/* Dayrail blog: shared post components (used by the newer guides).
   Relies on the tokens in /styles.css (--paper, --surface-2, --ink, --muted, --line, --accent...). */

.post-body{max-width:680px; margin:0 auto;}
.post-back{display:inline-block; margin-bottom:24px; font-size:0.85rem; color:var(--muted); text-decoration:none;}
.post-back:hover{color:var(--ink);}
.post-hero{width:100%; height:280px; object-fit:cover; border-radius:16px; border:1px solid var(--line); box-shadow:var(--shadow); margin:0 0 30px; display:block;}
@media (max-width:520px){ .post-hero{height:200px;} }

.crumbs{font-size:0.78rem; color:var(--muted); margin:0 0 14px;}
.crumbs a{color:var(--muted); text-decoration:none;}
.crumbs a:hover{color:var(--ink); text-decoration:underline;}

.meta-row{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px;}
.pill{
  font-family:"JetBrains Mono", monospace; font-size:0.68rem; letter-spacing:0.05em; text-transform:uppercase;
  background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:4px 10px; color:var(--muted);
}
.pill.accent{background:var(--accent-soft); border-color:#E9C9AE; color:var(--accent-deep);}

.post-body h1{font-weight:800; font-size:clamp(1.85rem,4vw,2.35rem); letter-spacing:-0.02em; margin:0 0 18px; line-height:1.15; text-wrap:balance;}
.post-body h2{font-size:1.32rem; font-weight:800; margin:48px 0 14px; letter-spacing:-0.01em; line-height:1.25; scroll-margin-top:16px;}
.post-body h3{font-size:1.05rem; font-weight:700; margin:28px 0 10px; line-height:1.3;}
.post-body p{font-size:1rem; line-height:1.72; color:var(--ink); margin:0 0 18px;}
.post-body ul, .post-body ol{margin:0 0 20px; padding-left:22px;}
.post-body li{font-size:1rem; line-height:1.7; margin-bottom:8px;}
.post-body a{color:var(--accent); text-decoration:underline; text-underline-offset:2px;}
.post-body a:hover{color:var(--accent-deep);}
.post-body strong{font-weight:700;}
.post-body :focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px;}

/* Answer-first block */
.quick-answer{
  background:var(--accent-soft); border:1px solid #E9C9AE; border-radius:14px; padding:20px 22px 6px; margin:0 0 22px;
}
.quick-answer .qa-label{
  font-family:"JetBrains Mono", monospace; font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--accent-deep); font-weight:600; margin:0 0 8px; display:block;
}
.quick-answer p{font-size:1.04rem; line-height:1.65;}

.takeaways{background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:18px 22px 8px; margin:0 0 26px;}
.takeaways h2{margin:0 0 10px; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); font-weight:700;}
.takeaways ul{list-style:none; padding:0; margin:0 0 6px;}
.takeaways li{position:relative; padding-left:26px; margin-bottom:9px; font-size:0.96rem;}
.takeaways li::before{content:"\2713"; position:absolute; left:0; top:0; color:var(--accent); font-weight:800;}

.toc{background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:18px 22px; margin:0 0 34px;}
.toc h2{margin:0 0 10px; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); font-weight:700;}
.toc ol{margin:0; padding-left:20px;}
.toc li{font-size:0.92rem; margin-bottom:6px; line-height:1.5;}
.toc a{color:var(--ink); text-decoration:none; font-weight:600;}
.toc a:hover{color:var(--accent); text-decoration:underline;}

/* Callouts */
.callout{background:var(--surface-2); border-left:3px solid var(--accent); border-radius:0 10px 10px 0; padding:16px 20px; margin:0 0 22px;}
.callout .label{font-family:"JetBrains Mono", monospace; font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent-deep); font-weight:600; display:block; margin-bottom:4px;}
.callout p{margin:0; font-size:0.95rem; line-height:1.65;}
.callout.warn{border-left-color:var(--accent-deep); background:#F7E6DA;}
.callout.note{border-left-color:var(--muted);}
.callout.note .label{color:var(--muted);}

/* Tables */
.table-wrap{overflow-x:auto; margin:0 0 26px; border:1px solid var(--line); border-radius:12px; background:var(--paper);}
.compare-table{width:100%; border-collapse:collapse; font-size:0.88rem; min-width:460px;}
.compare-table th, .compare-table td{border-bottom:1px solid var(--line); padding:12px 14px; text-align:left; vertical-align:top; line-height:1.5;}
.compare-table tr:last-child td{border-bottom:none;}
.compare-table th{background:var(--surface-2); font-weight:700; font-size:0.76rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink);}
.compare-table td:first-child{font-weight:700;}
.compare-table td.win{background:var(--accent-soft);}
.compare-table .yes{color:#2F6B45; font-weight:700;}
.compare-table .no{color:var(--muted);}
.compare-table .mid{color:#8A5A12; font-weight:600;}
.post-body .table-note{font-size:0.8rem; line-height:1.55; color:var(--muted); margin:-14px 0 24px;}

/* Step-flow infographic */
.post-body .steps-flow{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:0 0 28px; padding:0; list-style:none;}
.post-body .steps-flow.c4{grid-template-columns:repeat(4,1fr);} .post-body .steps-flow.c5{grid-template-columns:repeat(5,1fr);} .post-body .steps-flow.c6{grid-template-columns:repeat(3,1fr);} .post-body .steps-flow.c7{grid-template-columns:repeat(4,1fr);}
@media (max-width:560px){ .post-body .steps-flow.c4,.post-body .steps-flow.c5,.post-body .steps-flow.c6,.post-body .steps-flow.c7{grid-template-columns:repeat(2,1fr);} }
.post-body .steps-flow li{
  position:relative; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:14px 12px 12px; margin:0;
  box-shadow:0 1px 2px rgba(33,28,23,0.04);
}
.steps-flow .n{
  width:24px; height:24px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:"JetBrains Mono", monospace; font-size:0.74rem; font-weight:700; margin-bottom:8px;
}
.steps-flow b{display:block; font-size:0.9rem; line-height:1.3; margin-bottom:3px;}
.steps-flow span{display:block; font-size:0.78rem; color:var(--muted); line-height:1.4;}

/* Day-timeline infographic (proportional-ish blocks) */
.figure-card{background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:16px 16px 12px; margin:0 0 26px; box-shadow:var(--shadow);}
.figure-card .fig-title{font-weight:800; font-size:0.95rem; margin:0 0 2px;}
.figure-card .fig-sub{font-size:0.8rem; color:var(--muted); margin:0 0 14px;}
.figure-card figcaption{font-size:0.78rem; color:var(--muted); margin-top:10px;}
.tl{display:grid; grid-template-columns:74px 1fr; gap:6px 10px; margin:0 0 4px;}
.tl .t{font-family:"JetBrains Mono", monospace; font-size:0.7rem; color:var(--muted); padding-top:7px; text-align:right;}
.tl .b{border-radius:8px; padding:7px 12px; font-size:0.84rem; line-height:1.35; border:1px solid transparent; display:flex; flex-direction:column; justify-content:center;}
.tl .b small{display:block; font-size:0.7rem; opacity:0.78; margin-top:1px;}
.tl .deep{background:#F4E0CE; border-color:#C1552A;}
.tl .admin{background:#E4EAF2; border-color:#7C93B3;}
.tl .meet{background:#ECE7DE; border-color:#B4A997;}
.tl .life{background:#E3EDE0; border-color:#7DA378;}
.tl .learn{background:#EBE3F1; border-color:#9A86B3;}
.tl .buffer{background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(124,114,102,0.13) 7px 14px); border:1px dashed #C9BFAF; color:var(--muted);}
.post-body .legend{display:flex; flex-wrap:wrap; gap:6px 14px; margin:10px 0 0; padding:0; list-style:none; font-size:0.74rem; color:var(--muted);}
.post-body .legend li{display:flex; align-items:center; gap:6px; margin:0; font-size:0.74rem; line-height:1.2;}
.legend i{width:12px; height:12px; border-radius:3px; display:inline-block; border:1px solid transparent;}
.legend .deep{background:#F4E0CE; border-color:#C1552A;}
.legend .admin{background:#E4EAF2; border-color:#7C93B3;}
.legend .meet{background:#ECE7DE; border-color:#B4A997;}
.legend .life{background:#E3EDE0; border-color:#7DA378;}
.legend .learn{background:#EBE3F1; border-color:#9A86B3;}
.legend .buffer{background:repeating-linear-gradient(135deg,transparent 0 3px,rgba(124,114,102,0.25) 3px 6px); border:1px dashed #B9AE9C;}
@media (max-width:520px){ .tl{grid-template-columns:58px 1fr;} }

.splitbar{display:flex; height:12px; border-radius:6px; overflow:hidden; margin:14px 0 6px; border:1px solid var(--line);}
.splitbar span{display:block; min-width:3px;}
.splitbar .deep{background:#C1552A;} .splitbar .admin{background:#7C93B3;} .splitbar .meet{background:#B4A997;}
.splitbar .life{background:#7DA378;} .splitbar .learn{background:#9A86B3;} .splitbar .buffer{background:#D8CFC0;}
.post-body .split-note{font-size:0.76rem; color:var(--muted); margin:0 0 6px; line-height:1.5;}
.split-note b{color:var(--ink); font-weight:700; margin-left:2px;}

/* Color swatches */
.palette-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; margin:0 0 28px;}
.palette{background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:14px 14px 12px; box-shadow:0 1px 2px rgba(33,28,23,0.04);}
.palette h3{margin:0 0 2px; font-size:0.98rem;}
.palette .use{font-size:0.78rem; color:var(--muted); margin:0 0 10px; line-height:1.4;}
.swatches{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px;}
.sw{border:0; padding:0; background:none; cursor:pointer; text-align:center; font:inherit; color:inherit;}
.sw .chip{display:block; height:44px; border-radius:8px; border:1px solid rgba(33,28,23,0.12);}
.sw .hex{display:block; font-family:"JetBrains Mono", monospace; font-size:0.6rem; margin-top:4px; color:var(--muted); letter-spacing:0;}
.sw .lab{display:block; overflow-wrap:anywhere; font-size:0.62rem; color:var(--muted); line-height:1.2; margin-top:1px;}
.sw:hover .chip, .sw:focus-visible .chip{box-shadow:0 0 0 2px var(--accent);}
.sw.copied .hex{color:var(--accent-deep); font-weight:700;}
@media (max-width:420px){ .swatches{grid-template-columns:repeat(3,1fr);} }

/* Decision cards */
.post-body .decisions{display:grid; gap:10px; margin:0 0 26px; padding:0; list-style:none;}
.post-body .decisions li{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--paper); margin:0; padding:0;}
.decisions .if, .decisions .then{padding:12px 14px; font-size:0.9rem; line-height:1.5;}
.decisions .if{background:var(--surface-2); border-right:1px solid var(--line);}
.decisions .if b, .decisions .then b{display:block; font-family:"JetBrains Mono", monospace; font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin-bottom:3px; font-weight:600;}
.decisions .then b{color:var(--accent-deep);}
@media (max-width:560px){ .decisions li{grid-template-columns:1fr;} .decisions .if{border-right:none; border-bottom:1px solid var(--line);} }

/* Do / Don't pair */
.pair{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 26px;}
.pair > div{border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:var(--paper);}
.pair h3{margin:0 0 8px; font-size:0.92rem;}
.post-body .pair ul{margin:0; padding-left:18px;}
.post-body .pair li{font-size:0.9rem; margin-bottom:6px; line-height:1.5;}
.pair .bad{background:#FAF1EA;}
.pair .good{background:#F1F5EC;}
@media (max-width:560px){ .pair{grid-template-columns:1fr;} }

/* Stat cards */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:0 0 26px;}
.stat{background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:14px 14px 12px;}
.stat b{display:block; font-size:1.5rem; letter-spacing:-0.02em; line-height:1.1; color:var(--accent-deep);}
.stat span{display:block; font-size:0.78rem; color:var(--muted); margin-top:4px; line-height:1.4;}

/* Inline soft CTA */
.cta-box{background:var(--ink); color:#fff; border-radius:14px; padding:22px 24px; margin:0 0 28px;}
.cta-box p{color:#fff; margin:0 0 14px; font-size:0.98rem;}
.cta-box p.cta-title{font-weight:800; font-size:1.08rem; margin-bottom:6px;}
.cta-box .btn{background:var(--accent); color:#fff; text-decoration:none;}
.cta-box .btn:hover{background:var(--accent-deep); color:#fff;}
.cta-box .fine{font-size:0.78rem; color:#CFC6B9; margin:10px 0 0;}
.post-body .cta-box a.btn{color:#fff; text-decoration:none;}

/* FAQ, sources, related */
.faq-item{margin-bottom:22px;}
.faq-item h3{margin:0 0 6px; font-size:1.02rem;}
.faq-item p{margin:0; color:var(--ink); font-size:0.96rem;}
.about-guide{background:var(--surface-2); border-radius:12px; padding:16px 20px; margin:40px 0 0; font-size:0.86rem; color:var(--muted); line-height:1.6;}
.about-guide strong{color:var(--ink);}
.post-body .sources{margin:0 0 10px; padding-left:20px;}
.post-body .sources li{font-size:0.9rem; margin-bottom:10px; line-height:1.55;}
.post-body .sources span{display:block; font-size:0.82rem; color:var(--muted); line-height:1.45;}
.related{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin:0 0 10px;}
.related.r4{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (max-width:520px){ .related.r4{grid-template-columns:1fr;} }
.related a{display:block; text-decoration:none !important; border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:var(--paper); color:var(--ink) !important;}
.related a:hover{border-color:var(--accent); box-shadow:var(--shadow);}
.related a b{display:block; font-size:0.94rem; line-height:1.35; margin-bottom:4px; color:var(--ink);}
.related a span{display:block; font-size:0.8rem; color:var(--muted); line-height:1.45;}
.related a em{display:block; font-style:normal; font-family:"JetBrains Mono", monospace; font-size:0.64rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:6px;}

@media (prefers-reduced-motion:no-preference){ .related a{transition:border-color .15s, box-shadow .15s;} }
@media print{ nav.site, footer.site, .final-cta, .cta-box{display:none;} }