/* CDC sample-demo frame: shared by every demo. Demo-specific look lives in each demo's app.css. */
@font-face { font-family:"CDC Serif"; src:url("/shared/fonts/sourceserif-600.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"CDC Sans"; src:url("/shared/fonts/sourcesans-var.woff2") format("woff2"); font-weight:200 900; font-display:swap; }
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:120px; }
body { margin:0; }
img, svg { max-width:100%; }
button, input, select, textarea { font:inherit; color:inherit; }
button { cursor:pointer; }
.sr-only { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip { position:absolute; left:8px; top:-60px; z-index:200; background:#152436; color:#f5f2ec; padding:10px 14px; border-radius:6px; font:600 14px "CDC Sans",system-ui,sans-serif; }
.skip:focus { top:8px; }
[hidden] { display:none !important; }

/* ---------- CDC strip (always visible) ---------- */
.cdc-strip { position:sticky; top:0; z-index:60; height:44px; background:#152436; color:#f5f2ec; font:500 13px/1.2 "CDC Sans",system-ui,sans-serif; border-bottom:1px solid #34465c; }
.cdc-strip-in { height:100%; max-width:1440px; margin:0 auto; display:flex; align-items:center; gap:10px; padding:0 12px; }
.cdc-home { display:flex; align-items:center; gap:8px; color:inherit; text-decoration:none; flex:none; border-radius:6px; }
.cdc-home img { width:24px; height:24px; display:block; }
.cdc-home span { font-family:"CDC Serif",Georgia,serif; font-size:14px; white-space:nowrap; }
.cdc-badge { display:inline-flex; align-items:center; gap:6px; border:1px dashed #e0a078; color:#f5f2ec; border-radius:999px; padding:3px 10px; font-weight:700; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.cdc-badge::before { content:""; width:7px; height:7px; border-radius:50%; background:#e0a078; }
.cdc-badge em { font-style:normal; font-weight:500; letter-spacing:.02em; text-transform:none; color:#cfd8e3; }
.cdc-sp { flex:1 1 auto; }
.cdc-btn { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px; border-radius:6px; border:1px solid #34465c; background:transparent; color:#f5f2ec; font-weight:600; font-size:13px; text-decoration:none; white-space:nowrap; }
.cdc-btn:hover { border-color:#e0a078; }
.cdc-btn svg { width:15px; height:15px; }
.cdc-cta { background:#c56a32; border-color:#c56a32; color:#fff; }
.cdc-cta:hover { background:#b05c28; border-color:#b05c28; }
.cdc-strip a:focus-visible, .cdc-strip button:focus-visible { outline:2px solid #e0a078; outline-offset:2px; }
.cdc-short { display:none; }
@media (max-width:760px) {
  .cdc-home span, .cdc-long { display:none; }
  .cdc-short { display:inline; }
  .cdc-strip-in { gap:6px; padding:0 8px; }
  .cdc-badge { padding:3px 8px; font-size:10.5px; letter-spacing:.05em; }
  .cdc-btn { padding:0 8px; font-size:12.5px; }
  .cdc-btn .lbl-tour { display:none; }
}
@media (max-width:380px) { .cdc-badge em { display:none; } }

/* ---------- Footer CTA (inside each demo) ---------- */
.cdc-foot { margin:28px auto 0; max-width:1200px; padding:22px 20px; border-radius:14px; background:#152436; color:#f5f2ec; display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; font:400 15px/1.45 "CDC Sans",system-ui,sans-serif; position:relative; overflow:hidden; }
.cdc-foot::after { content:""; position:absolute; right:-80px; bottom:-120px; width:300px; height:300px; background:url("/shared/img/growth-arcs-tr-dark.svg") center/contain no-repeat; opacity:.55; pointer-events:none; }
.cdc-foot b { display:block; font-family:"CDC Serif",Georgia,serif; font-weight:600; font-size:20px; margin-bottom:2px; }
.cdc-foot p { margin:0; color:#cfd8e3; max-width:60ch; }
.cdc-foot .grow { flex:1 1 320px; position:relative; z-index:1; }
.cdc-foot a { position:relative; z-index:1; display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:8px; background:#c56a32; color:#fff; font-weight:700; text-decoration:none; }
.cdc-foot a:hover { background:#b05c28; }
.cdc-foot a:focus-visible { outline:2px solid #e0a078; outline-offset:3px; }

/* ---------- AI breakdown box (demo themes recolor via --ai-*) ---------- */
.ai { border:1px solid var(--ai-line,#d8d2c6); background:var(--ai-bg,#fbfaf7); border-radius:var(--ai-r,12px); padding:14px 16px; position:relative; }
.ai-h { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 8px; font-weight:700; font-size:14px; }
.ai-h svg { width:18px; height:18px; color:var(--ai-ink,#5b4bb7); flex:none; }
.ai-tag { font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; padding:2px 7px; border-radius:4px; border:1px dashed currentColor; color:var(--ai-ink,#5b4bb7); }
.ai p { margin:0 0 8px; }
.ai ul { margin:0; padding-left:18px; }
.ai li { margin:3px 0; }
.ai .ai-note { font-size:12.5px; opacity:.8; margin-top:8px; }

/* ---------- Toast ---------- */
.toast-wrap { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:120; display:grid; gap:8px; width:min(92vw,420px); pointer-events:none; }
.toast { background:#152436; color:#f5f2ec; border-radius:10px; padding:12px 16px; font:500 14px/1.35 "CDC Sans",system-ui,sans-serif; box-shadow:0 10px 30px rgba(0,0,0,.25); animation:toast-in .2s ease-out; }
.toast.out { opacity:0; transition:opacity .3s; }
@keyframes toast-in { from { transform:translateY(8px); opacity:0 } }
@media (max-width:760px) { .toast-wrap { bottom:92px; } }

/* ---------- Sheet / dialog ---------- */
dialog.sheet { border:0; padding:0; border-radius:16px; width:min(640px,94vw); max-height:88vh; box-shadow:0 30px 80px rgba(0,0,0,.35); color:inherit; background:var(--sheet-bg,#fff); }
dialog.sheet::backdrop { background:rgba(10,16,24,.55); }
.sheet-h { position:sticky; top:0; display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--sheet-line,#e5e1d8); background:inherit; z-index:1; }
.sheet-h h2 { margin:0; font-size:18px; flex:1; }
.sheet-x { width:36px; height:36px; border-radius:8px; border:1px solid var(--sheet-line,#e5e1d8); background:transparent; font-size:18px; line-height:1; }
.sheet-b { padding:16px 18px 20px; }
@media (max-width:640px) { dialog.sheet { width:100vw; max-width:100vw; margin:auto 0 0; border-radius:16px 16px 0 0; max-height:90vh; } }

/* ---------- Guided tour ---------- */
.tour-ring { position:fixed; z-index:100; border-radius:12px; box-shadow:0 0 0 4px #e0a078, 0 0 0 9999px rgba(10,16,24,.58); pointer-events:none; transition:all .25s ease; }
.tour-ring.none { box-shadow:0 0 0 9999px rgba(10,16,24,.58); width:0; height:0; left:50%; top:50%; }
.tour-pop { position:fixed; z-index:101; width:min(360px,calc(100vw - 24px)); background:#fff; color:#152436; border-radius:14px; padding:18px 18px 14px; box-shadow:0 20px 50px rgba(0,0,0,.35); font:400 15px/1.45 "CDC Sans",system-ui,sans-serif; border-top:4px solid #c56a32; }
.tour-pop h2 { font-family:"CDC Serif",Georgia,serif; font-weight:600; font-size:19px; margin:2px 0 6px; line-height:1.2; }
.tour-pop p { margin:0 0 14px; color:#3d4757; }
.tour-k { font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#9e4e22; }
.tour-row { display:flex; align-items:center; gap:8px; }
.tour-row .sp { flex:1; }
.tour-dots { display:flex; gap:5px; }
.tour-dots i { width:7px; height:7px; border-radius:50%; background:#cfc8bc; }
.tour-dots i.on { background:#c56a32; }
.tour-btn { min-height:38px; padding:0 14px; border-radius:8px; border:1px solid #cfc8bc; background:#fff; color:#152436; font-weight:700; font-size:14px; }
.tour-btn.pri { background:#152436; border-color:#152436; color:#f5f2ec; }
.tour-btn:focus-visible, .tour-skip:focus-visible { outline:3px solid #c56a32; outline-offset:2px; }
.tour-skip { background:none; border:0; color:#4a5568; text-decoration:underline; font-size:13.5px; padding:6px 4px; }
@media (max-width:640px) { .tour-pop { left:12px !important; right:12px; bottom:12px; top:auto !important; width:auto; } }
@media (prefers-reduced-motion:reduce) { .tour-ring, .toast { transition:none; animation:none; } }

/* ---------- Mail (themed with --m-*) ---------- */
.mail { --mb:var(--m-line,#e3dfd6); font-size:15px; }
.mail-bar { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-bottom:12px; }
.mail-conn { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font-size:14px; flex:1 1 260px; }
.mail-conn i { width:9px; height:9px; border-radius:50%; background:#1e8a5a; box-shadow:0 0 0 3px rgba(30,138,90,.18); }
.mail-conn small { flex-basis:100%; padding-left:17px; color:var(--m-muted,#5a6372); font-size:12.5px; }
.mail-folders { display:flex; gap:4px; background:var(--m-soft,#efece5); padding:4px; border-radius:var(--m-r,10px); }
.mail-folders button { border:0; background:transparent; padding:7px 14px; border-radius:calc(var(--m-r,10px) - 3px); font-weight:600; font-size:14px; color:var(--m-muted,#5a6372); }
.mail-folders button[aria-selected="true"] { background:var(--m-card,#fff); color:var(--m-ink,#152436); box-shadow:0 1px 2px rgba(0,0,0,.08); }
.mail-n { display:inline-block; min-width:20px; padding:0 6px; border-radius:999px; background:var(--m-accent,#152436); color:var(--m-on-accent,#fff); font-size:11.5px; font-weight:800; }
.mail-grid { display:grid; grid-template-columns:minmax(0,1fr); border:1px solid var(--mb); border-radius:var(--m-r,10px); background:var(--m-card,#fff); overflow:hidden; min-height:420px; }
.mail-list { list-style:none; margin:0; padding:0; }
.mail-row { display:grid; grid-template-columns:1fr auto; gap:2px 10px; padding:13px 16px; border-bottom:1px solid var(--mb); text-decoration:none; color:inherit; position:relative; }
.mail-row:hover { background:var(--m-soft,#f6f4ef); }
.mail-row.on { background:var(--m-sel,#eef1f6); }
.mail-row.unread::before { content:""; position:absolute; left:5px; top:19px; width:7px; height:7px; border-radius:50%; background:var(--m-accent,#152436); }
.mail-row.unread .mail-from, .mail-row.unread .mail-subj { font-weight:800; }
.mail-from { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mail-time { font-size:12.5px; color:var(--m-muted,#5a6372); }
.mail-subj { grid-column:1/-1; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mail-snip { grid-column:1/-1; font-size:13px; color:var(--m-muted,#5a6372); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mail-label { grid-column:1/-1; justify-self:start; margin-top:4px; font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--m-soft,#efece5); color:var(--m-ink,#152436); }
.mail-empty { padding:24px 16px; color:var(--m-muted,#5a6372); }
.mail-read { padding:18px; display:none; }
.mail.has-open .mail-read { display:block; }
.mail.has-open .mail-list { display:none; }
.mail-back { display:inline-block; margin-bottom:10px; font-weight:600; color:var(--m-link,#152436); }
.mail-h { margin:0 0 14px; font-size:20px; }
.mail-msg { border:1px solid var(--mb); border-radius:var(--m-r,10px); padding:12px 14px; margin-bottom:10px; }
.mail-msg.me { background:var(--m-soft,#f6f4ef); }
.mail-msg header { display:flex; flex-wrap:wrap; gap:2px 8px; align-items:baseline; margin-bottom:6px; font-size:13.5px; }
.mail-msg header span, .mail-msg header time { color:var(--m-muted,#5a6372); font-size:12.5px; }
.mail-msg header time { margin-left:auto; }
.mail-body { line-height:1.55; }
.mail-reply { margin-top:14px; }
.mail-reply label { display:block; font-weight:700; font-size:13.5px; margin-bottom:6px; }
.mail-reply textarea { width:100%; border:1px solid var(--mb); border-radius:var(--m-r,10px); padding:10px 12px; background:var(--m-card,#fff); resize:vertical; line-height:1.5; }
.mail-actions { display:flex; gap:8px; margin-top:8px; align-items:center; }
.mail-actions .sp { flex:1; }
.mail-ai, .mail-send { min-height:40px; padding:0 14px; border-radius:var(--m-r,10px); font-weight:700; font-size:14px; }
.mail-ai { border:1px dashed var(--ai-ink,#5b4bb7); background:transparent; color:var(--ai-ink,#5b4bb7); }
.mail-send { border:0; background:var(--m-accent,#152436); color:var(--m-on-accent,#fff); }
.mail-fine { font-size:12.5px; color:var(--m-muted,#5a6372); margin:8px 0 0; }
.mail-pick { display:grid; place-items:center; height:100%; color:var(--m-muted,#5a6372); }
@media (min-width:900px) {
  .mail-grid { grid-template-columns:minmax(280px,360px) minmax(0,1fr); }
  .mail-list { border-right:1px solid var(--mb); max-height:640px; overflow:auto; }
  .mail-read { display:block; }
  .mail.has-open .mail-list { display:block; }
  .mail-back { display:none; }
}