/* Material Design 3 refinements, layered on the ICG look.
   1 tonal palette from ICG blue (#3A4BFB, HCT hue 281.5) and ICG petrol (#003B49, hue 221.6)
   2 answers on tonal surfaces, snackbars for confirmations
   3 touch targets of at least 48px
   4 mobile: bottom navigation bar and a pinned Ask bar */

:root[data-theme='light'] {
  /* primary: tonal palette of ICG blue */
  --md-primary: #3243f5;            /* P40, 6.45:1 on white */
  --md-on-primary: #ffffff;
  --md-primary-container: #e0e0ff;  /* P90 */
  --md-on-primary-container: #000767;/* P10 */
  --md-primary-80: #bdc2ff;         /* P80 for use on dark */
  /* secondary: tonal palette of ICG petrol */
  --md-secondary: #1b4d5b;          /* T30 */
  --md-secondary-container: #d4f3ff;/* T94 */
  /* neutral: low-chroma palette at the petrol hue */
  --md-surface: #ffffff;
  --md-surface-container-low: #f8f9fb;  /* N98 */
  --md-surface-container: #f2f4f5;      /* N96 */
  --md-surface-container-high: #eceeef; /* N94 */
  --md-on-surface: #191c1d;             /* N10 */
  --md-on-surface-variant: #444749;     /* N30, 9.7:1 on white */
  --md-outline: #757779;                /* N50 */
  --md-outline-variant: #c5c7c8;        /* N80 */
  --md-inverse-surface: #2e3132;        /* N20 */
  --md-inverse-on-surface: #eff1f2;     /* N95 */
  --md-dark: #1b1b21;                   /* N10 at the blue hue: header */
  --md-on-dark-variant: #c7c5d0;        /* NV80, 10.9:1 on header */

  --accent: var(--md-primary);
  --fg: var(--md-on-surface);
  --fg-2: var(--md-on-surface-variant);
  --fg-3: #5c5f60;                      /* N40, 6.4:1: replaces the 4.4:1 grey */
  --border: var(--md-outline-variant);
  --bg-2: var(--md-surface-container);
  --bg-3: var(--md-surface-container-high);
  --petrol: #003542;                    /* T20 */
  --touch: 48px;
}

/* ---------- 1. tonal palette in the dark chrome ---------- */
.site, .hero { background-color: var(--md-dark); }
.hero { background: linear-gradient(180deg, var(--md-dark) 0%, #29292f 60%, #39393f 100%); }
.logo span, .persona, .hero-kicker { color: var(--md-on-dark-variant); }
.timeline .sub { color: #abaab4; }                       /* NV70, 7.3:1 */
.timeline .now .sub { color: var(--md-primary-80); }
.timeline li::before { background: #5e5d67; }            /* NV40: visible track (was 1.9:1) */
.timeline .next .dot { border-color: #91909a; }          /* NV60, 5.6:1 */
.timeline .past .dot, .timeline .now .dot { border-color: var(--md-primary); }
.timeline .past .dot { background: var(--md-primary); }
.textnav .count:not(:empty) { background: var(--md-primary); }

/* ---------- 2. answers on tonal surfaces ---------- */
.turn { margin-top: 20px; }
.turn-q { padding: 0 4px 8px; }
.answer {
  border-top: 0; background: var(--md-surface-container-low); border-radius: 16px;
  padding: 20px 24px 12px; box-shadow: 0 0 0 1px var(--md-outline-variant) inset;
}
.answer .tag { background: var(--md-primary-container); color: var(--md-on-primary-container); border: 0; }
.quote blockquote { background: var(--md-surface); border-radius: 0 12px 12px 0; border-left-color: var(--md-secondary); }
.quote summary, .general summary { min-height: var(--touch); display: flex; align-items: center; gap: 6px; }
.answer .office { background: var(--md-surface); border-radius: 0 12px 12px 0; padding: 10px 14px; }
.thinking { background: var(--md-surface-container-low); border-radius: 0 16px 16px 0; padding: 14px 18px 18px; position: relative; overflow: hidden; }
.thinking::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--md-primary-container); }
.thinking::before { content: ''; position: absolute; left: 0; bottom: 0; height: 4px; width: 35%; background: var(--md-primary); z-index: 1; animation: lp 1.1s ease-in-out infinite; border-radius: 2px; }
@keyframes lp { from { left: -35%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .thinking::before { animation: none; width: 100%; left: 0; } }

/* snackbar */
.snackbar {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 24px); opacity: 0; z-index: 50;
  display: flex; align-items: center; gap: 16px; min-height: 48px; max-width: min(560px, calc(100vw - 32px));
  padding: 6px 8px 6px 16px; border-radius: 4px; background: var(--md-inverse-surface); color: var(--md-inverse-on-surface);
  font-size: 15px; box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 12px rgba(0,0,0,.18); transition: transform .2s ease, opacity .2s ease; pointer-events: none;
}
.snackbar.on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.snackbar b { font-weight: 600; }
.snackbar .sb-msg { flex: 1; padding: 8px 0; }
.snackbar button { all: unset; cursor: pointer; color: var(--md-primary-80); font-weight: 600; font-size: 14px; padding: 0 12px; min-height: 40px; display: inline-flex; align-items: center; border-radius: 20px; }
.snackbar button:hover { background: rgba(189, 194, 255, .12); }
.snackbar button:focus-visible { outline: 2px solid var(--md-primary-80); }

/* ---------- 3. touch targets: 48px ---------- */
.btn, .btn-primary { min-height: 40px; padding: 10px 24px; border-radius: 20px; font-weight: 500; position: relative; }
.btn::before, .btn-primary::before, .link::before { content: ''; position: absolute; inset: -4px; }   /* 48px hit area */
.btn-primary::after { content: none; }
.btn { border-color: var(--md-outline); color: var(--md-primary); }
.btn:hover { background: color-mix(in srgb, var(--md-primary) 8%, transparent); color: var(--md-primary); border-color: var(--md-outline); }
.link { position: relative; display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 4px; }
.fb { gap: 4px; font-size: 13px; }
.fb .btn { min-width: var(--touch); min-height: 40px; padding: 8px 14px; font-size: 14px; }
.fb .btn[aria-pressed='true'] { background: var(--md-secondary-container); color: var(--md-secondary); border-color: transparent; }
.list > button { min-height: 56px; }
.list > div.row { min-height: 56px; }
.textnav .rail-item, .arrows button { min-height: var(--touch); }
.timeline .rail-item { min-height: 72px; }
.persona select, .field, select.field { min-height: var(--touch); }
.ask .field, .ask .btn-primary { min-height: 56px; }
.ask .btn-primary { border-radius: 28px; }
.tbl td .link { min-height: 40px; }

/* ---------- 4. mobile: navigation bar and pinned Ask ---------- */
.navbar, .askbar { display: none; }
@media (max-width: 860px) {
  .textnav .rail-item[data-go="home"], .textnav .rail-item[data-go="deadlines"], .textnav .rail-item[data-go="requests"], .textnav .rail-item[data-go="letter"], .textnav .rail-item[data-go="services"] { display: none; }
  .textnav { width: 100%; }
  .persona { width: 100%; }
  .persona select { flex: 1; min-width: 0; }
  .hero { min-height: 0 !important; }
  .streaks { display: none; }
  .hero-inner { padding: 20px 16px 24px; }
  .hero h1 { font-size: 28px; }
  body { padding-bottom: 80px; }
  body[data-view='home'] { padding-bottom: 80px; }

  .navbar {
    display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    height: 80px; background: var(--md-surface-container); box-shadow: 0 -1px 0 var(--md-outline-variant);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .navbar button { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--md-on-surface-variant); }
  .navbar .ind { width: 64px; height: 32px; border-radius: 16px; display: grid; place-items: center; position: relative; }
  .navbar .ind svg { width: 24px; height: 24px; fill: currentColor; }
  .navbar .badge { position: absolute; top: 2px; left: 38px; min-width: 16px; height: 16px; border-radius: 8px; background: #ba1a1a; color: #fff; font-size: 11px; line-height: 16px; text-align: center; padding: 0 4px; }
  .navbar .badge:empty { display: none; }
  .navbar button[aria-current='true'] { color: var(--md-on-surface); font-weight: 700; }
  .navbar button[aria-current='true'] .ind { background: var(--md-secondary-container); color: var(--md-secondary); }
  .navbar button:focus-visible .ind { outline: 2px solid var(--md-primary); }

  body[data-view='home'] .askbar {
    display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 80px; z-index: 39;
    padding: 12px 12px; background: var(--md-surface-container-low); box-shadow: 0 -1px 0 var(--md-outline-variant);
  }
  .askbar input { flex: 1; min-width: 0; min-height: 48px; border-radius: 24px; border: 1px solid var(--md-outline); padding: 0 18px; font: inherit; font-size: 16px; background: var(--md-surface); }
  .askbar input:focus { outline: 2px solid var(--md-primary); border-color: transparent; }
  .askbar button { min-height: 48px; border-radius: 24px; padding: 0 20px; border: 0; background: var(--md-primary); color: #fff; font: inherit; font-weight: 500; cursor: pointer; }
  .snackbar { bottom: 92px; }
  body[data-view='home'] .snackbar { bottom: 164px; }
  .answer { padding: 16px 16px 8px; border-radius: 12px; }
  .actions { gap: 8px; }
}
.quote summary::before, .general summary::before { content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; flex: none; margin-right: 4px; }
.quote[open] summary::before, .general[open] summary::before { transform: rotate(45deg); }
@media (max-width: 860px) { body[data-view='home'] .hint { display: none; } }