/* One stylesheet, no framework, no webfont. A page whose text depends on a
   network request is a page that renders blank for someone on a bad connection. */
:root{--ink:#1B221B;--ink2:#59635A;--paper:#fff;--line:rgba(27,34,27,.14);--jade:#3B6B4C;--soft:#F4F6F2}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font:16px/1.7 system-ui,-apple-system,"Segoe UI","Noto Sans TC","Noto Sans SC",sans-serif}
.qa{max-width:760px;margin:0 auto;padding:32px 18px 64px}
/* jade links everywhere, visited included - scoped rules below still win */
.qa a{color:var(--jade)}
h1{font-size:1.9rem;line-height:1.3;margin:0 0 14px}
h2{font-size:1.25rem;margin:28px 0 10px}
h3{font-size:1.08rem;margin:22px 0 8px}
.summary{font-size:1.08rem;color:var(--ink2);border-left:3px solid var(--jade);
  padding:2px 0 2px 14px;margin:0 0 26px}
.answer p{margin:0 0 14px}
.answer a{color:var(--jade)}
.table-wrap{overflow-x:auto;margin:16px 0}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
th{background:var(--soft);font-weight:600}
ul,ol{margin:0 0 14px;padding-left:22px}
.sources{margin-top:34px;border-top:1px solid var(--line);padding-top:16px;font-size:.86rem;color:var(--ink2)}
.sources h2{font-size:.86rem;text-transform:uppercase;letter-spacing:.06em;margin:0 0 8px}
.sources ul{list-style:none;padding:0}
.sources li{margin:0 0 6px;word-break:break-word}
.sources a{color:var(--ink2)}
.asof{opacity:.75}
.reviewed{font-size:.8rem;color:var(--ink2);margin-top:10px}
.chat{margin-top:44px;border-top:1px solid var(--line);padding-top:20px}
.chat h2{margin-top:0}
/* Always light, matching the Omni chat (JK, 2026-08-21). The build shipped a
   prefers-color-scheme:dark block; removed so both surfaces feel like one. */

/* ── QA hub (landing) — same family, landing-page shape ─────────────────── */
.qa.hub{max-width:1060px}
.hub-hero{background:var(--soft);border:1px solid var(--line);border-radius:14px;
  padding:34px 30px;margin:0 0 30px}
.hub-kicker{margin:0 0 6px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--jade);font-weight:700}
.hub-hero h1{margin:0 0 10px}
.hub-intro{max-width:620px;color:var(--ink2);margin:0 0 18px}
.hub-cta{margin:0;display:flex;gap:10px;flex-wrap:wrap}
.hub-btn{display:inline-block;background:var(--jade);color:#fff!important;text-decoration:none;
  border-radius:8px;padding:10px 18px;font-weight:600}
.hub-btn:hover{filter:brightness(1.08)}
.hub-btn--ghost{background:transparent;color:var(--jade)!important;border:1px solid var(--jade)}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin:0 0 8px}
.hub-card{border:1px solid var(--line);border-radius:12px;padding:18px 20px;background:var(--paper)}
.hub-card h2{margin:0 0 10px;font-size:1.05rem;color:var(--ink)}
.hub-count{display:inline-block;background:var(--soft);color:var(--ink2);border-radius:10px;
  padding:1px 9px;font-size:.75rem;font-weight:600;vertical-align:2px}
.hub-card ul{margin:0;padding:0;list-style:none}
.hub-card li{margin:0 0 8px;font-size:.94rem;line-height:1.5}
.hub-card a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.hub-card a:hover{color:var(--jade);border-color:var(--jade)}
.hub-sub{margin:34px 0 14px;font-size:1.15rem}
.hub-grid--small .hub-card{padding:14px 16px}
.hub-card--small h2{font-size:.95rem;color:var(--ink2)}
.hub-card--small li{font-size:.9rem}
.hub-consult{margin:30px 0 0;text-align:center}

/* ── Narrow screens: tables become stacked cards (JK, 2026-08-21). Each td
   carries data-label = its column header, injected at build time, so the
   value keeps its meaning when the grid collapses. ─────────────────────── */
@media (max-width:640px){
  .table-wrap{overflow-x:visible;margin:16px 0}
  .table-wrap thead{display:none}
  .table-wrap table,.table-wrap tbody,.table-wrap tr,.table-wrap td{display:block;width:100%}
  .table-wrap tr{border:1px solid var(--line);border-radius:10px;padding:8px 14px;
    margin:0 0 12px;background:var(--paper)}
  .table-wrap td{border:none;padding:7px 0;display:flex;justify-content:space-between;
    align-items:baseline;gap:14px;text-align:right}
  .table-wrap td+td{border-top:1px dashed var(--line)}
  .table-wrap td::before{content:attr(data-label);font-weight:600;color:var(--ink2);
    text-align:left;flex:0 0 46%}
  .table-wrap td:not([data-label]){display:block;text-align:left;font-weight:600}
}

/* ── "Continue this conversation" as a seeded hand-off form (prototype for Alex, 2026-08-22) ── */
.chat-form{display:flex;gap:8px;margin:12px 0 6px}
.chat-form input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--line,#dfe5df);border-radius:8px;font:inherit;color:var(--ink);background:var(--paper)}
.chat-form input:focus{outline:2px solid var(--jade);outline-offset:1px}
.chat-form button{padding:10px 16px;border:0;border-radius:8px;background:var(--jade);color:#fff;font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}
.chat-note{font-size:.9rem;color:var(--ink2,#55605a);margin:0}
@media (max-width:640px){.chat-form{flex-direction:column}}

/* ── "Keep going from here" suggestion chips (5/page, 2026-08-28). Short
   YouTube-style labels; the full question rides in the ?seed= link. ───────── */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 14px}
.chip{display:inline-flex;align-items:center;padding:7px 14px;border:1px solid var(--line,#dfe5df);border-radius:999px;background:var(--paper);color:var(--ink);text-decoration:none;font-size:.92rem;font-weight:600}
.chip:hover{border-color:var(--jade);background:var(--soft);color:var(--jade)}

/* ── Language switcher on article pages (2026-08-29), mirrors the hub bar ── */
.langbar{font-size:.85rem;color:var(--ink2,#59635A);margin:0 0 16px}
.langbar a{color:var(--jade);text-decoration:none}
.langbar a:hover{text-decoration:underline}
.langbar strong{color:var(--ink)}

/* ── Hub question list, round 3 (2026-08-29): roomier lines (Alex) and a
   click-weight bullet — five tiers from "very rarely" to "very frequently
   clicked". Dots are emitted by the builder only when click data exists. ── */
.hub-card li{margin:0 0 14px;line-height:1.55;display:flex;align-items:baseline;gap:9px}
.hub-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;display:inline-block;transform:translateY(-1px)}
.hub-dot--1{background:#D5D9DE}
.hub-dot--2{background:#9BA3AC}
.hub-dot--3{background:#4C8DF6}
.hub-dot--4{background:#1554D6}
.hub-dot--5{background:#0B2E7A}

.langbar--bottom{margin:26px 0 6px;padding-top:16px;border-top:1px solid var(--line)}