/* Extra styles for the newer Learn guides (_build/guides_more.py). Loads after assets/site.css and uses its tokens.
   Each guide links this file from inside its own prose, so it works without touching shell(). Thin rules and small
   radii, no pill shapes, no offset shadows. */

/* copy-to-clipboard box for the reconciliation letter */
.copybox { border:1px solid var(--line); border-radius:12px; background:var(--white); overflow:hidden; }
.copybox .bar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:12px 16px; background:var(--ink); color:var(--white); }
.copybox .bar b { font:600 12px var(--body); letter-spacing:.08em; text-transform:uppercase; }
.copybox pre { margin:0; padding:20px; font:400 14.5px/1.65 var(--mono); white-space:pre-wrap; overflow-wrap:anywhere; color:var(--ink); }
.copybox .ph { background:var(--amber-t); box-shadow:inset 0 -1px 0 #D9B95A; padding:0 2px; }
.cbtn { font:600 14px/1 var(--body); padding:10px 14px; border:1px solid var(--white); border-radius:6px; background:var(--white); color:var(--ink); cursor:pointer; transition:background .15s; }
.cbtn:hover { background:var(--paper); }
.cbtn.done { background:var(--green-t); color:var(--green-2); border-color:var(--green-t); }

/* comparison tables: real <table>, stacked into cards on a phone via data-label */
.dtable { width:100%; border-collapse:collapse; border:1px solid var(--line); background:var(--white); font-size:15px; line-height:1.45; }
.dtable th { text-align:left; background:var(--paper); color:var(--muted); border-bottom:1px solid var(--line); font:600 12px var(--body); letter-spacing:.08em; text-transform:uppercase; padding:12px 14px; }
.dtable td { padding:12px 14px; border-top:1px solid var(--line); vertical-align:top; }
.dtable td:first-child { font-weight:600; }
.dtable td .num { white-space:nowrap; }
.dtable .tn { display:block; margin-top:4px; font-size:13px; color:var(--muted); font-weight:400; }

/* numbered red-flag / checklist rows */
.flags { list-style:none; padding:0 !important; counter-reset:flag; border-top:1px solid var(--ink); }
.flags li { counter-increment:flag; padding:16px 0 16px 48px; border-bottom:1px solid var(--line); position:relative; margin-top:0 !important; }
.flags li::before { content:counter(flag); position:absolute; left:0; top:17px; width:30px; height:30px; display:grid; place-items:center; background:var(--green-t); color:var(--green-2); border-radius:6px; font:600 14px var(--body); font-variant-numeric:tabular-nums; }
.flags li b { display:block; font:600 17px var(--body); }
.flags li span { color:var(--muted); }

/* sources and fine print under a guide */
.sources { font-size:15px; line-height:1.55; color:var(--muted); padding-left:20px; }
.sources a { overflow-wrap:anywhere; }
.note { font-size:14px; line-height:1.55; color:var(--muted); }
.prose h2.src { font-size:26px; margin-top:48px; }

@media (max-width:720px) {
  .dtable, .dtable tbody, .dtable tr, .dtable td { display:block; }
  .dtable thead { position:absolute; left:-9999px; }
  .dtable tr { border-top:1px solid var(--line-2); padding:6px 0; }
  .dtable tr:first-child { border-top:0; }
  .dtable td { border:0; padding:5px 14px; }
  .dtable td::before { content:attr(data-label); display:block; font:600 11px var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
  .dtable td:first-child::before { display:none; }
  .dtable td:first-child { font-size:17px; padding-top:8px; }
  .copybox pre { padding:16px; font-size:13.5px; }
}

/* Learn hub: stats line, situation picker, topic index, course box */
.hubstats { display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:28px; font:500 15px var(--body); color:var(--ink-2); }
.hubstats b { font:600 17px var(--body); color:var(--green); font-variant-numeric:tabular-nums; }
.hubstats a { color:inherit; }
.hubsec.alt { background:var(--paper-2); border-block:1px solid var(--line); }
.sits { margin-top:36px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.sit { padding:22px 24px; background:var(--white); border:1px solid var(--line); border-top:3px solid var(--green); border-radius:8px; }
.sit h3 { font-size:20px; line-height:1.25; }
.sit ul { list-style:none; padding:0; margin:14px 0 0; display:grid; gap:8px; }
.sit li a { font:600 15px var(--body); color:var(--green); text-decoration:none; }
.sit li a:hover { text-decoration:underline; }
.jump { display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:22px; padding-bottom:18px; border-bottom:1px solid var(--line); font:600 14.5px var(--body); }
.jump a { color:var(--ink-2); text-decoration:none; }
.jump a:hover { color:var(--green); text-decoration:underline; }
.topic { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:40px; padding-block:40px; border-bottom:1px solid var(--line); scroll-margin-top:84px; }
.topic .th h2 { font-size:clamp(26px, 2.6vw, 32px); }
.topic .th p { margin-top:10px; color:var(--muted); font-size:16px; }
.topic .th .n { display:block; margin-top:12px; font:600 12px var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--green); }
.glist { border-top:1px solid var(--ink); }
.grow { display:grid; grid-template-columns:64px minmax(0,1fr); column-gap:16px; padding:16px 4px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); transition:background .15s; }
.grow:hover { background:var(--white); }
.grow .m { grid-row:span 2; font:600 13px var(--body); color:var(--muted); padding-top:4px; font-variant-numeric:tabular-nums; }
.grow h3 { font-size:19px; line-height:1.3; }
.grow:hover h3 { color:var(--green); }
.grow p { margin-top:4px; color:var(--muted); font-size:15px; line-height:1.5; }
.coursebox { margin-top:48px; display:flex; align-items:center; justify-content:space-between; gap:24px 40px; flex-wrap:wrap; padding:28px 30px; background:var(--ink); color:var(--white); border-radius:12px; }
.coursebox > div { flex:1 1 420px; }
.coursebox .tag { color:#9FD3C2; margin-bottom:8px; }
.coursebox h3 { font-size:24px; color:var(--white); }
.coursebox p { margin-top:8px; color:rgba(255,255,255,.78); }
@media (max-width:900px) {
  .sits { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .topic { grid-template-columns:minmax(0,1fr); gap:18px; padding-block:32px; }
}
@media (max-width:640px) {
  .sits { grid-template-columns:minmax(0,1fr); }
  .grow { grid-template-columns:minmax(0,1fr); }
  .grow .m { grid-row:auto; padding-top:0; }
  .coursebox { padding:22px 20px; }
}
.hubsec { padding-block:72px; }
@media (max-width:640px) { .hubsec { padding-block:52px; } }