:root { --blue:#009ee3; --action:#006d9f; --ink:#193e50; --body:#345461; --muted:#5b737f; --line:#d7e5ed; --wash:#edf7fc; --canvas:#fff; color-scheme:light; font-family:'Open Sans',sans-serif; color:var(--body); font-size:16px; line-height:1.6; }
* { box-sizing:border-box; }
body { margin:0; background:var(--canvas); }
button,input,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
a { color:var(--action); text-underline-offset:3px; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid #034d73; outline-offset:4px; }
[hidden] { display:none !important; }
h1,h2,h3,strong.heading { font-family:Montserrat,sans-serif; color:var(--ink); }
h1 { font-weight:600; font-size:clamp(1.65rem,3.5vw,2.2rem); line-height:1.3; letter-spacing:-.025em; margin:0 0 14px; }
h2 { font-size:1.25rem; line-height:1.4; margin:0 0 16px; font-weight:600; }
h3 { font-size:1.1rem; line-height:1.45; margin:5px 0 9px; font-weight:600; }
p { margin:0 0 14px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; top:-100px; left:20px; z-index:10; padding:12px; background:#fff; }
.skip-link:focus { top:10px; }
.site-header { border-top:5px solid var(--blue); border-bottom:1px solid var(--line); }
.header-inner { max-width:1120px; margin:auto; display:flex; align-items:center; gap:28px; padding:17px 30px; }
.site-name { text-decoration:none; color:#075675; font-family:Montserrat,sans-serif; font-weight:600; font-size:1.25rem; margin-right:auto; }
.site-name>span { display:block; font-family:'Open Sans',sans-serif; color:var(--muted); font-size:.78rem; font-weight:400; margin-top:3px; }
.demo-label { margin-left:8px; padding:2px 6px; border-radius:3px; background:#eff4f6; color:#4e6875; }
.site-logo { width:43px; height:auto; }
.home-link { font-size:.875rem; text-decoration:none; }
.page-main { max-width:1120px; padding:30px 30px 44px; margin:auto; min-height:70vh; }
.start-intro { max-width:800px; }
.start-intro>p:last-child { color:var(--muted); }
.eyebrow { color:var(--action); font-size:.75rem; font-weight:600; letter-spacing:.08em; margin:0 0 9px; }
.search-form { display:flex; gap:10px; max-width:960px; margin:22px 0 26px; }
.search-form input { min-width:0; flex:1; padding:13px 16px; border:1px solid #aac7d8; border-radius:5px; font-size:1rem; background:#fff; color:var(--ink); }
.search-form input::placeholder { color:#6a828e; }
.button { display:inline-flex; align-items:center; justify-content:center; text-align:center; gap:8px; border:1px solid var(--action); background:#fff; color:var(--action); border-radius:5px; padding:10px 16px; min-height:44px; text-decoration:none; font-size:.875rem; font-weight:600; }
.button:hover { background:var(--wash); }
.button-primary { background:var(--action); color:#fff; }
.button-primary:hover { background:#005985; }
.button-quiet { border-color:var(--line); color:var(--muted); }
.suggestions { display:flex; align-items:flex-start; gap:10px 14px; margin:-9px 0 32px; font-size:.8rem; }
.suggestions>span { flex:0 0 auto; color:var(--muted); padding-top:6px; }
.suggestion-list { display:flex; flex-wrap:wrap; gap:8px; }
.suggestions a { padding:5px 9px; border:1px solid var(--line); border-radius:4px; text-decoration:none; background:#fff; }
.suggestions a:hover { background:var(--wash); border-color:#82cdec; }
.section-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 18px; margin-bottom:16px; }
.section-top h2 { margin:0; }
.quiet-label,.quiet-note,.matrix-note { font-size:.8rem; color:var(--muted); }
.matrix { border:1px solid var(--line); border-radius:7px; overflow:hidden; }
.matrix-head,.matrix-row { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1.15fr) 24px; gap:24px; align-items:center; }
.matrix-head { background:var(--wash); color:#466878; font-size:.75rem; padding:11px 22px; }
.matrix-row { padding:18px 22px; border-top:1px solid var(--line); color:var(--ink); text-decoration:none; }
.matrix-row:hover { background:#f0f9fe; }
.matrix-domain { display:flex; align-items:center; gap:15px; }
.matrix-domain strong { font-family:Montserrat,sans-serif; font-size:.96rem; line-height:1.4; font-weight:600; }
.domain-number { font-family:Montserrat,sans-serif; color:var(--action); font-size:.85rem; flex:0 0 25px; }
.matrix-question { font-size:1rem; color:#4e6a78; }
.row-arrow { color:var(--action); font-size:1.2rem; }
.matrix-note { margin:12px 0 0; }
.breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:.8rem; margin:0 0 23px; color:var(--muted); }
.breadcrumb a { text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }
.view-heading { margin-bottom:19px; }
.view-heading p:last-child { color:var(--muted); }
.select-label { display:flex; flex-direction:column; gap:5px; font-size:.875rem; color:var(--muted); max-width:600px; }
.select-label select { width:100%; min-width:0; max-width:100%; border:1px solid #b9d1df; border-radius:5px; background:#fff; padding:10px 35px 10px 12px; color:var(--ink); font-size:.9rem; min-height:46px; }
.topic-section { margin:27px 0; }
.topics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.topic { border:1px solid var(--line); background:#fff; border-radius:6px; padding:13px; text-align:left; color:var(--body); }
.topic strong { display:block; font-size:.875rem; font-weight:600; color:var(--ink); }
.topic span { display:block; font-size:.875rem; color:var(--muted); margin-top:4px; }
.topic:hover { background:#f5fbfe; }
.topic[aria-pressed="true"] { background:var(--wash); border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue); }
.topic-label { color:var(--action); font-size:.8rem; padding:3px 10px; background:var(--wash); border-radius:16px; }
.question-option { display:flex; justify-content:space-between; align-items:center; gap:20px; color:var(--ink); text-decoration:none; border:1px solid var(--line); border-radius:6px; padding:19px 22px; margin-bottom:12px; }
.question-main { border-left:4px solid var(--blue); background:#f6fbfe; }
.question-option:hover { background:var(--wash); }
.question-option small { color:var(--muted); font-size:.75rem; display:block; margin-bottom:6px; }
.question-option strong { font-size:1rem; font-family:Montserrat,sans-serif; font-weight:500; }
.question-arrow { font-size:1.35rem; color:var(--action); }
.quiet-note { margin:12px 0 0; }
.result-header { max-width:900px; }
.change-topic { font-size:.8rem; display:inline-block; margin:0 0 20px; }
.answer-box { padding:20px 23px; background:var(--wash); border-left:3px solid var(--blue); border-radius:0 6px 6px 0; }
.answer-box p { margin:0; max-width:890px; }
.answer-label { display:block; font-size:.8rem; font-weight:600; color:var(--action); margin-bottom:8px; }
.citation { font-size:.8rem; white-space:nowrap; }
.source-section { margin-top:28px; }
.source-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.source-card { display:flex; flex-direction:column; align-items:flex-start; border:1px solid var(--line); border-radius:6px; padding:21px; }
.source-kind { font-size:.75rem; color:var(--muted); }
.source-card h3 { margin:7px 0 11px; }
.source-card>p { font-size:1rem; }
.source-card .source-meta { font-size:.75rem; color:var(--muted); margin:0 0 18px; }
.source-card .button { margin-top:auto; }
.activity { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:22px; background:var(--wash); border-radius:6px; margin-top:24px; }
.activity h3 { margin:4px 0 7px; }
.activity>div { max-width:680px; }
.activity p:last-child { margin:0; font-size:1rem; }
.activity .button { flex-shrink:0; max-width:250px; }
.knowledge-block { background:#fff; border:1px solid #cbdfe9; }
.knowledge-label { display:flex; flex-direction:column; gap:5px; margin-bottom:10px; }
.knowledge-group { display:inline-flex; align-items:center; gap:8px; color:var(--action); font-size:.875rem; font-weight:600; }
.knowledge-group svg { width:22px; height:22px; flex:none; }
.knowledge-block .source-kind { color:var(--muted); font-size:.875rem; }
.knowledge-block .source-meta { color:var(--muted); }
.knowledge-block .button { border-color:#aacbdc; }
.knowledge-block .button-primary { border-color:var(--action); }
.knowledge-block .button:hover { background:var(--wash); }
.knowledge-block .button-primary:hover { background:#005985; }
.result-filters { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin:23px 0 14px; max-width:850px; }
.result-count { color:var(--muted); font-size:.8rem; }
.related-question { display:inline-block; margin:15px 0 0; font-size:.875rem; }
.empty-state { padding:30px; background:var(--wash); border-radius:6px; }
.empty-actions { display:flex; flex-wrap:wrap; gap:12px; }
.site-footer { border-top:1px solid var(--line); padding:18px 30px; font-size:.75rem; color:var(--muted); }
.site-footer>div { display:flex; gap:10px; flex-wrap:wrap; justify-content:space-between; max-width:1060px; margin:auto; }
.site-footer strong { color:var(--action); font-family:Montserrat,sans-serif; font-weight:500; }
@media(max-width:850px) { .topics { grid-template-columns:repeat(3,minmax(0,1fr)); } .activity { align-items:flex-start; flex-direction:column; gap:16px; } }
@media(max-width:600px) { .page-main { padding:22px 18px 35px; } .header-inner { padding:14px 18px; gap:15px; } .site-footer { padding:18px; } .home-link { display:none; } .search-form { gap:8px; } .search-form input { padding:12px 10px; } .search-form .button { padding:10px 12px; } .matrix-head { display:none; } .matrix-row { grid-template-columns:minmax(0,1fr) 22px; gap:8px 12px; padding:17px; } .matrix-domain { grid-column:1; } .matrix-question { grid-column:1; padding-left:40px; font-size:.85rem; } .row-arrow { grid-column:2; grid-row:1 / 3; } .topics { grid-template-columns:repeat(2,minmax(0,1fr)); } .topic { padding:11px; } .source-grid,.result-filters { grid-template-columns:1fr; } .source-card,.answer-box,.question-option,.activity { padding:18px; } .question-option { gap:12px; } .quiet-label { display:none; } .result-header h1 { font-size:1.65rem; } .select-label select { font-size:1rem; } }
@media(max-width:360px) { .search-form { flex-wrap:wrap; } .search-form input { flex-basis:100%; } }