/* ==========================================================================
   SIDORA
   Light is the base. Dark follows the viewer's system setting.
   Accent is a single restrained bronze; the dosha hues are semantic and
   deliberately separate from it.
   ========================================================================== */

:root {
  --ground:     #f5f3ee;
  --surface:    #fffefb;
  --surface-2:  #ebe8e0;
  --ink:        #16171a;
  --ink-2:      #55585f;
  --ink-3:      #82868e;
  --line:       #ddd9d0;
  --line-soft:  #e9e6de;

  --accent:     #8a6a2f;
  --accent-2:   #6d5324;
  --accent-wash:#f0e8d8;

  --vata:       #4a7392;
  --pitta:      #b0662c;
  --kapha:      #4e7f66;
  --vata-wash:  #e4ecf2;
  --pitta-wash: #f6e8dc;
  --kapha-wash: #e2eee8;

  --danger:     #9a3b31;
  --danger-wash:#f4e4e1;

  --display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "IBM Plex Mono", Menlo, monospace;

  --radius: 12px;
  --shadow: 0 1px 2px rgba(22, 23, 26, .04), 0 10px 34px rgba(22, 23, 26, .07);
  --topbar-h: 62px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:     #0c0d10;
    --surface:    #15171b;
    --surface-2:  #1d2026;
    --ink:        #ecebe6;
    --ink-2:      #9ba0a8;
    --ink-3:      #7a7f88;
    --line:       #262a31;
    --line-soft:  #1e2127;

    --accent:     #c5a468;
    --accent-2:   #d8bc87;
    --accent-wash:#221d12;

    --vata:       #7fa9cd;
    --pitta:      #d9955a;
    --kapha:      #74b092;
    --vata-wash:  #141d25;
    --pitta-wash: #241a10;
    --kapha-wash: #12211a;

    --danger:     #d4796c;
    --danger-wash:#251512;

    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 40px rgba(0,0,0,.45);
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--display); font-weight: 400; text-wrap: balance; margin: 0; }
p { margin: 0; }
em { font-style: italic; }

button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.lede { color: var(--ink-2); font-size: 18px; line-height: 1.6; }
.lede.sm { font-size: 15.5px; }

/* ---------------- buttons ---------------- */
.btn {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 10px;
  padding: 9px 16px;
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, background .15s, opacity .15s, transform .1s;
}
.btn:hover { border-color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.btn.ghost { background: transparent; }
.btn.lg { padding: 13px 24px; font-size: 15.5px; border-radius: 11px; }
.btn.full { width: 100%; }
.btn.text { border: none; background: none; padding: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------- top bar ---------------- */
.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 clamp(16px, 4vw, 40px);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 40;
}
.wordmark {
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: .3em;
  padding: 0;
  color: var(--ink);
}
.topbar-right { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.tier-chip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-3);
}
.tier-chip.pro { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-wash); }

/* ---------------- landing ---------------- */
.landing { padding: clamp(40px, 9vh, 96px) clamp(16px, 4vw, 40px) 80px; }
.landing-inner { max-width: 940px; margin: 0 auto; }
.landing h1 {
  font-size: clamp(38px, 7.2vw, 76px);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 18px 0 0;
}
.landing h1 em { color: var(--accent); }
.landing .lede { max-width: 56ch; margin-top: 22px; }
.landing-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.landing-note { margin-top: 14px; font-size: 13px; color: var(--ink-3); }

.pillars {
  margin-top: clamp(48px, 8vw, 88px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.pillar { background: var(--surface); padding: 24px 22px 26px; }
.pillar-n { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: .1em; }
.pillar h3 { font-size: 20px; margin: 10px 0 8px; line-height: 1.2; }
.pillar p { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }

/* ---------------- assessment ---------------- */
.assess {
  max-width: 660px;
  margin: 0 auto;
  padding: clamp(24px, 5vh, 56px) clamp(16px, 4vw, 24px) 60px;
  min-height: calc(100dvh - var(--topbar-h));
  display: flex;
  flex-direction: column;
}
.progress { height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: var(--accent); transition: width .3s ease; }
.assess-meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; }
.assess-meta .mono { font-size: 12px; color: var(--ink-3); }

.assess-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 28px 0; }
.domain-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.assess-body h2 {
  font-size: clamp(25px, 4.4vw, 34px);
  line-height: 1.2;
  letter-spacing: -.012em;
  margin: 10px 0 26px;
}
.options { display: flex; flex-direction: column; gap: 10px; }
.option {
  text-align: left;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 15px 18px;
  cursor: pointer;
  display: flex;
  gap: 13px;
  align-items: flex-start;
  font-size: 15.5px;
  line-height: 1.45;
  transition: border-color .13s, background .13s, transform .1s;
}
.option:hover { border-color: var(--accent); background: var(--accent-wash); }
.option:active { transform: scale(.995); }
.option .key {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 5px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  flex: 0 0 20px;
  margin-top: 2px;
}
.option:hover .key { color: var(--accent); border-color: var(--accent); }

.assess-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hint { font-size: 12.5px; color: var(--ink-3); }

/* ---------------- result ---------------- */
.result {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(28px, 6vh, 64px) clamp(16px, 4vw, 24px) 80px;
}
.result h1 {
  font-size: clamp(42px, 8vw, 68px);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 12px 0 0;
}
.confidence {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13.5px;
  color: var(--ink-2);
  background: var(--surface);
}
.conf-dot { width: 8px; height: 8px; border-radius: 50%; }
.conf-high { background: var(--kapha); }
.conf-moderate { background: var(--pitta); }
.conf-low { background: var(--danger); }

.bars { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; }
.bar-row { display: grid; grid-template-columns: 92px 1fr 54px; gap: 14px; align-items: center; }
.bar-name { font-size: 14.5px; font-weight: 500; text-transform: capitalize; }
/* Both are spans: blockify them or width/height silently do nothing. */
.bar-track { display: block; height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 999px; width: 0; transition: width .7s cubic-bezier(.2,.8,.2,1); }
.bar-fill.vata { background: var(--vata); }
.bar-fill.pitta { background: var(--pitta); }
.bar-fill.kapha { background: var(--kapha); }
.bar-pct { font-family: var(--mono); font-size: 13.5px; text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.panel {
  margin-top: 28px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.panel h3 { font-size: 19px; margin-bottom: 12px; }
.panel .why { font-size: 14.5px; color: var(--ink-2); }
.why-group { margin-top: 14px; }
.why-group b { font-size: 13px; text-transform: capitalize; letter-spacing: .01em; }
.why-group ul { margin: 6px 0 0; padding-left: 1.1em; }
.why-group li { font-size: 14px; color: var(--ink-2); margin: 3px 0; }
.why-group li span { color: var(--ink-3); }

.dev-row { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; }
.dev-row:last-child { border-bottom: none; }
.dev-row .name { text-transform: capitalize; font-weight: 500; width: 74px; }
.dev-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; }
.dev-tag.aggravated { background: var(--pitta-wash); color: var(--pitta); }
.dev-tag.depleted { background: var(--vata-wash); color: var(--vata); }
.dev-tag.stable { background: var(--surface-2); color: var(--ink-3); }

.result-cta { margin-top: 34px; display: flex; flex-direction: column; gap: 12px; }

/* ---------------- auth ---------------- */
.auth { max-width: 400px; margin: 0 auto; padding: clamp(36px, 8vh, 90px) 20px 80px; }
.auth h1 { font-size: 38px; letter-spacing: -.015em; }
.auth .lede { margin-top: 10px; }
.auth-form { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field span { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.field input {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 15.5px;
  outline: none;
  transition: border-color .15s;
}
.field input:focus { border-color: var(--accent); }
.form-error {
  background: var(--danger-wash);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  color: var(--danger);
  border-radius: 9px;
  padding: 10px 13px;
  font-size: 14px;
}
.auth-switch { margin-top: 18px; font-size: 14px; color: var(--ink-2); text-align: center; }

/* ---------------- chat ---------------- */
.thread { flex: 1; overflow-y: auto; padding: 26px clamp(18px, 4vw, 44px) 10px; }
.thread-empty { max-width: 560px; margin: 6vh auto 0; text-align: center; }
.thread-empty h2 { font-size: 30px; letter-spacing: -.012em; }
.thread-empty p { margin-top: 10px; color: var(--ink-2); font-size: 15px; }
.starters { margin-top: 26px; display: grid; gap: 9px; text-align: left; }
.starter {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 10px;
  padding: 12px 15px;
  cursor: pointer;
  font-size: 14.5px;
  text-align: left;
  transition: border-color .13s;
}
.starter:hover { border-color: var(--accent); }

.msg { max-width: 720px; margin: 0 auto 24px; }
.msg-role {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 7px;
}
.msg.user .bubble {
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 15.5px;
}
.bubble { overflow-wrap: anywhere; font-size: 15.5px; }
.bubble p { margin: 0 0 .78em; }
.bubble p:last-child { margin-bottom: 0; }
.bubble h2, .bubble h3, .bubble h4 { font-family: var(--display); font-size: 19px; margin: 1.1em 0 .45em; }
.bubble ul, .bubble ol { margin: 0 0 .8em; padding-left: 1.2em; }
.bubble li { margin: .26em 0; }
.bubble code { background: var(--surface-2); border-radius: 5px; padding: 1px 5px; font-family: var(--mono); font-size: 13px; }
.bubble pre { background: var(--surface-2); border-radius: 10px; padding: 12px; overflow-x: auto; }
.bubble pre code { background: none; padding: 0; }
.bubble em { color: var(--ink-2); }

.cite {
  display: inline-block;
  min-width: 16px;
  padding: 0 5px;
  margin: 0 1px;
  border-radius: 4px;
  background: var(--accent-wash);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  font-family: var(--mono);
  font-size: 11px;
  vertical-align: 1px;
  cursor: pointer;
}
.cite:hover { background: color-mix(in srgb, var(--accent) 22%, var(--accent-wash)); }

.sources { margin-top: 12px; }
.sources summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 11px;
  background: var(--surface);
}
.sources summary::-webkit-details-marker { display: none; }
.sources summary:hover { color: var(--ink); border-color: var(--accent); }
.source-list { margin-top: 9px; display: flex; flex-direction: column; gap: 7px; }
.source {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 10px;
  padding: 9px 13px;
  font-size: 13.5px;
  scroll-margin-top: 20px;
}
.source.flash { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.source-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.source-n { font-family: var(--mono); font-size: 11.5px; color: var(--accent); font-weight: 600; }
.source-title { font-weight: 600; }
.source-section { font-size: 12px; color: var(--ink-3); }
.source-snippet { color: var(--ink-2); font-size: 13px; margin-top: 4px; }

.thinking { display: inline-flex; gap: 5px; padding: 5px 0; }
.thinking i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: pulse 1.2s infinite ease-in-out; }
.thinking i:nth-child(2) { animation-delay: .18s; }
.thinking i:nth-child(3) { animation-delay: .36s; }
@keyframes pulse { 0%, 80%, 100% { opacity: .22; } 40% { opacity: 1; } }

.notice {
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--line));
  background: var(--danger-wash);
  color: var(--danger);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
}

.composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 0 clamp(18px, 4vw, 44px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 8px 8px 15px;
  box-shadow: var(--shadow);
  max-width: 720px;
  align-self: center;
  width: calc(100% - clamp(36px, 8vw, 88px));
  transition: border-color .15s;
}
.composer:focus-within { border-color: var(--accent); }
.composer textarea {
  flex: 1;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  max-height: 170px;
  padding: 6px 0;
  font-size: 15.5px;
}
.send {
  flex: 0 0 34px;
  height: 34px;
  border: none;
  border-radius: 9px;
  background: var(--ink);
  color: var(--ground);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.send:disabled { opacity: .35; cursor: not-allowed; }
.legal { text-align: center; font-size: 11.5px; color: var(--ink-3); padding: 9px 20px 14px; }

/* ---------------- paywall ---------------- */
.paywall {
  max-width: 460px;
  margin: 0 auto;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 28px 26px 26px;
  box-shadow: var(--shadow);
}
.paywall h2 { font-size: 30px; margin: 8px 0 10px; letter-spacing: -.012em; }
.plan-list { list-style: none; padding: 0; margin: 20px 0 24px; display: flex; flex-direction: column; gap: 10px; }
.plan-list li { font-size: 14.5px; color: var(--ink-2); padding-left: 22px; position: relative; }
.plan-list li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.plan-list b { color: var(--ink); }
.paywall-note { margin-top: 12px; font-size: 12px; color: var(--ink-3); text-align: center; }

/* ---------------- responsive ---------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   App shell - Today is the hero, everything else is a tab away
   ========================================================================== */

.app-shell { display: flex; flex-direction: column; min-height: calc(100dvh - var(--topbar-h)); }

.tabbar {
  display: flex;
  gap: 2px;
  padding: 0 clamp(14px, 4vw, 40px);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
  position: sticky;
  top: var(--topbar-h);
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter: blur(10px);
  z-index: 30;
}
.tabbar::-webkit-scrollbar { display: none; }
.tab {
  border: none;
  background: none;
  padding: 13px 14px 11px;
  font-size: 14.5px;
  color: var(--ink-3);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .13s, border-color .13s;
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }

.workspace { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.pane { flex: 1; display: flex; flex-direction: column; min-height: 0; }
/* `display: flex` above outranks the UA stylesheet's [hidden] rule, so a
   hidden pane would otherwise still occupy a flex share of the workspace. */
.pane[hidden] { display: none; }

/* ---------------- Today ---------------- */
.today {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(26px, 5vw, 48px) clamp(16px, 4vw, 24px) 96px;
}
.today-head { margin-bottom: 26px; }
.today-head h1 {
  font-size: clamp(30px, 5.6vw, 44px);
  line-height: 1.08;
  letter-spacing: -.018em;
  margin-top: 10px;
}

.context-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}
.ctx {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 13px;
  color: var(--ink-2);
}
.ctx b { color: var(--ink); font-weight: 600; }
.ctx.muted { color: var(--ink-3); border-style: dashed; }
.ctx .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.ctx .dot.vata { background: var(--vata); }
.ctx .dot.pitta { background: var(--pitta); }
.ctx .dot.kapha { background: var(--kapha); }
.ctx .dot.on { background: var(--kapha); }
.ctx .dot.off { background: var(--ink-3); }

/* ---------------- cards ---------------- */
.card {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.card-head h2 { font-size: 25px; letter-spacing: -.012em; }
.card-note { font-size: 11.5px; color: var(--ink-3); }

/* ---------------- check-in ---------------- */
.checkin-fields { display: flex; flex-direction: column; gap: 15px; }
.ci-field > span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-2);
  margin-bottom: 7px;
}
.ci-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.ci-choice {
  border: 1px solid var(--line);
  background: var(--ground);
  border-radius: 9px;
  padding: 11px 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all .12s;
  text-align: center;
}
.ci-choice:hover { border-color: var(--accent); }
.ci-choice.on {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent);
  font-weight: 600;
}
.note-field { margin-top: 18px; }
.note-field span { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.note-field input {
  border: 1px solid var(--line);
  background: var(--ground);
  border-radius: 9px;
  padding: 11px 13px;
  font-size: 15px;
  outline: none;
  width: 100%;
}
.note-field input:focus { border-color: var(--accent); }
#checkin-submit { margin-top: 20px; }

/* ---------------- brief ---------------- */
.brief { animation: rise .45s cubic-bezier(.2,.8,.2,1); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.brief-confidence {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-2);
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 5px 13px;
}
.brief-summary {
  font-family: var(--display);
  font-size: clamp(23px, 4vw, 30px);
  line-height: 1.28;
  letter-spacing: -.01em;
  margin: 18px 0 30px;
}

.brief-block { margin-bottom: 26px; }
.brief-block h3 {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 11px;
}
.brief-block p { font-size: 16px; line-height: 1.62; color: var(--ink); }
.brief-block ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.brief-block li {
  font-size: 15.5px;
  line-height: 1.55;
  padding-left: 19px;
  position: relative;
}
.brief-block li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .66em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-3);
}
.brief-block.actions li {
  background: var(--kapha-wash);
  border: 1px solid color-mix(in srgb, var(--kapha) 24%, transparent);
  border-radius: 10px;
  padding: 12px 15px 12px 32px;
}
.brief-block.actions li::before { background: var(--kapha); left: 15px; top: 1.15em; }
.brief-block.cautions li::before { background: var(--pitta); }

.why, .sources { margin-bottom: 18px; }
.why > summary, .sources > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  background: var(--surface);
}
.why > summary::-webkit-details-marker,
.sources > summary::-webkit-details-marker { display: none; }
.why > summary::after, .sources > summary::after { content: "＋"; font-size: 11px; color: var(--ink-3); }
.why[open] > summary::after, .sources[open] > summary::after { content: "－"; }
.why > summary:hover, .sources > summary:hover { border-color: var(--accent); color: var(--ink); }

.why-body {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.why-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 0 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}
.why-row:last-child { border-bottom: none; }
.why-row b { font-weight: 600; }
.why-row span { color: var(--ink-2); }
.why-row .src {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 3px;
}
@media (max-width: 560px) {
  .why-row { grid-template-columns: 1fr; gap: 3px; }
}

.safety {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-3);
  border-left: 2px solid var(--line);
  padding-left: 13px;
  margin: 22px 0;
}

/* ---------------- feedback ---------------- */
.feedback {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  margin-top: 8px;
}
.fb-q { font-size: 14.5px; color: var(--ink-2); margin-bottom: 10px; }
.fb-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.fb-btn {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: all .12s;
}
.fb-btn:hover { border-color: var(--accent); }
.fb-btn.on { border-color: var(--accent); background: var(--accent-wash); color: var(--accent); font-weight: 600; }
.fb-done { font-size: 13.5px; color: var(--kapha); }

/* ---------------- states ---------------- */
.state {
  text-align: center;
  padding: 42px 20px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--ink-2);
}
.state h3 { font-size: 21px; margin-bottom: 8px; color: var(--ink); }
.state p { font-size: 14.5px; max-width: 44ch; margin: 0 auto 16px; }
.state .btn { margin-top: 4px; }

.skeleton { display: flex; flex-direction: column; gap: 12px; }
.skel {
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--line-soft) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
.skel.tall { height: 30px; }
.skel.w70 { width: 70%; }
.skel.w45 { width: 45%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------------- history ---------------- */
.history { width: 100%; max-width: 680px; margin: 0 auto; padding: clamp(24px,5vw,44px) clamp(16px,4vw,24px) 80px; }
.history h1 { font-size: 34px; letter-spacing: -.015em; margin-bottom: 20px; }
.hist-row {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.hist-row:last-child { border-bottom: none; }
.hist-date { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.hist-summary { font-size: 14.5px; line-height: 1.5; }
.hist-flag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.hist-flag.yes { background: var(--kapha-wash); color: var(--kapha); }
.hist-flag.somewhat { background: var(--pitta-wash); color: var(--pitta); }
.hist-flag.no { background: var(--danger-wash); color: var(--danger); }
@media (max-width: 560px) {
  .hist-row { grid-template-columns: 1fr auto; }
  .hist-date { grid-column: 1 / -1; }
}

/* ---------------- you / profile ---------------- */
.you { width: 100%; max-width: 620px; margin: 0 auto; padding: clamp(24px,5vw,44px) clamp(16px,4vw,24px) 80px; }
.you h1 { font-size: 34px; letter-spacing: -.015em; }
.you section { margin-top: 34px; }
.you h2 { font-size: 22px; margin-bottom: 6px; }
.you .sub { font-size: 14px; color: var(--ink-2); margin-bottom: 16px; }

.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-soft);
}
.consent-row:last-child { border-bottom: none; }
.consent-copy { flex: 1; min-width: 0; }
.consent-copy b { display: block; font-size: 15px; margin-bottom: 3px; }
.consent-copy p { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.consent-copy .for {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 5px;
}
.toggle {
  flex: none;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  cursor: pointer;
  position: relative;
  transition: background .16s, border-color .16s;
  margin-top: 3px;
}
/* This is the control for a privacy decision, so it must clear the 44px touch
   minimum. Padding the button would move the knob below, which is positioned
   against this box, so the hit area is expanded invisibly instead. */
.toggle::before {
  content: "";
  position: absolute;
  inset: -9px -4px;
}
.toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0,0,0,.22);
  transition: transform .16s;
}
.toggle.on { background: var(--accent); border-color: var(--accent); }
.toggle.on::after { transform: translateX(20px); }

.danger-zone {
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--line));
  background: var(--danger-wash);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.danger-zone h2 { color: var(--danger); }
.danger-zone .sub { color: var(--ink-2); }
.btn.danger { border-color: color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger); background: transparent; }
.btn.danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

.form-ok {
  background: var(--kapha-wash);
  border: 1px solid color-mix(in srgb, var(--kapha) 35%, transparent);
  color: var(--kapha);
  border-radius: 9px;
  padding: 10px 13px;
  font-size: 14px;
}

.row-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* ---------------- ask pane ---------------- */
#pane-ask { min-height: calc(100dvh - var(--topbar-h) - 46px); }

@media (prefers-reduced-motion: reduce) {
  .brief { animation: none; }
  .skel { animation: none; }
}


/* ---- onboarding ---------------------------------------------------- */
.onboarding .step-count {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 0.4rem;
}
.goal-list { display: grid; gap: 0.55rem; margin: 1.1rem 0 1.4rem; }
.goal {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line, #d9d4cc);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.goal:hover { border-color: var(--accent, #7a6a52); }
.goal[aria-pressed="true"] {
  border-color: var(--accent, #7a6a52);
  background: color-mix(in srgb, var(--accent, #7a6a52) 8%, transparent);
}
.goal .tick { opacity: 0; font-weight: 700; }
.goal[aria-pressed="true"] .tick { opacity: 1; }
.promise { display: grid; gap: 0.75rem; margin: 1.2rem 0 1.4rem; }
.promise li { list-style: none; padding-left: 1.4rem; position: relative; }
.promise li::before { content: "-"; position: absolute; left: 0.35rem; opacity: 0.5; }
.promise .no { opacity: 0.75; }

/* ==========================================================================
   App phase 1 — thinking state, patterns, check-in
   Extends the existing tokens. No new palette, no new type scale.
   ========================================================================== */

/* --- generation state ---------------------------------------------------- */

.thinking {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 56px 24px;
  text-align: center;
}
.think-dots { display: flex; gap: 7px; }
.think-dots i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  opacity: .28;
  animation: think 1.5s ease-in-out infinite;
}
.think-dots i:nth-child(2) { animation-delay: .2s; }
.think-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes think {
  0%, 100% { opacity: .28; transform: translateY(0); }
  50%      { opacity: .85; transform: translateY(-3px); }
}
.think-line {
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--ink-2);
  transition: opacity .22s ease;
  margin: 0;
}

/* --- patterns ------------------------------------------------------------ */

.patterns {
  /* Matches the Today pane: centred column with side gutters. Without the
     horizontal padding the text ran to the viewport edge on mobile and the
     progress count was clipped. */
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 44px) clamp(16px, 4vw, 24px) 96px;
}
.pat-head { margin-bottom: 20px; }
.pat-head h2 {
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 0 0 8px;
}
.pat-body { color: var(--ink-2); margin: 0; line-height: 1.55; }

.pat-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
/* `display: flex` outranks the UA stylesheet's [hidden] rule - the same trap
   already documented for `.pane`. Without this the progress bar stayed visible
   at full width once patterns unlocked. */
.pat-progress[hidden] { display: none; }
.pat-track {
  flex: 1; height: 4px; border-radius: 2px;
  background: var(--surface-2); overflow: hidden;
}
.pat-fill {
  height: 100%; background: var(--accent);
  border-radius: 2px; transition: width .6s ease;
}
.pat-count { color: var(--ink-3); font-size: .78rem; white-space: nowrap; }

.pat-list { display: flex; flex-direction: column; gap: 14px; }
.pat-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
}
.pat-observation { margin: 0 0 8px; line-height: 1.55; }
.pat-interpretation { margin: 0 0 12px; color: var(--ink-2); font-size: .92rem; }
.pat-evidence { display: flex; gap: 10px; flex-wrap: wrap; }
.pat-evidence span {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--ink-3);
  background: var(--surface-2);
  padding: 3px 8px;
  border-radius: 6px;
}
.pat-denominator { color: var(--accent-2) !important; background: var(--accent-wash) !important; }
.pat-caveat {
  margin: 12px 0 0; padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-3); font-size: .82rem; line-height: 1.5;
}

/* --- check-in ------------------------------------------------------------ */

.ci-label {
  display: block;
  font-family: var(--display);
  font-size: 1.08rem;
  margin-bottom: 10px;
}
.ci-more {
  display: block;
  width: 100%;
  margin: 4px 0 16px;
  padding: 11px;
  background: none;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--ink-3);
  font: inherit;
  font-size: .88rem;
  cursor: pointer;
}
.ci-more:hover { color: var(--ink-2); border-color: var(--ink-3); }

/* Tap targets sized for a thumb, per the mobile-first rule. */
.ci-choice { min-height: 44px; }

/* The optional fields are toggled by [hidden]; make sure no layout
   display value outranks it. */
.checkin-fields[hidden] { display: none; }

/* --- maturity ------------------------------------------------------------ */

.maturity {
  margin-top: 22px;
  padding: 14px 16px;
  background: var(--surface-2);
  border-radius: var(--radius);
}
.maturity p { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--ink-2); }
.maturity strong { color: var(--ink); font-weight: 600; }

/* --- mobile -------------------------------------------------------------- */

@media (max-width: 560px) {
  .thinking { padding: 44px 16px; }
  .pat-head h2 { font-size: 1.32rem; }
  .pat-card { padding: 16px; }
  /* The tabbar gained a fifth tab; keep labels legible on narrow screens. */
  .tab { font-size: .74rem; padding-left: 2px; padding-right: 2px; }
}

/* The bottom bar must clear the home indicator. */
.tabbar { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ==========================================================================
   Conversational check-in
   Extends the existing tokens. No new palette, no new type scale.
   ========================================================================== */

.talk-head { margin-bottom: 18px; }
.talk-head h2 {
  font-family: var(--display);
  font-size: clamp(22px, 5vw, 28px);
  line-height: 1.18;
  margin: 0 0 6px;
}
.talk-sub { color: var(--ink-2); margin: 0; font-size: .93rem; }

.talk-input {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px 14px 12px;
  transition: border-color .18s ease;
}
.talk-input:focus-within { border-color: var(--accent); }

#talk-text {
  width: 100%;
  border: 0;
  background: none;
  resize: none;
  color: var(--ink);
  font: inherit;
  font-size: 1.02rem;
  line-height: 1.55;
  outline: none;
}
#talk-text::placeholder { color: var(--ink-3); }

.talk-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
/* The send control is the primary action of the whole screen; the shared
   button padding left it at 43px, one pixel under the touch minimum. */
.talk-actions .btn { min-height: 44px; }

/* The microphone. Restrained on purpose - a recording button that shouts
   belongs in a messaging app, not here. */
.mic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: .88rem;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.mic:hover { border-color: var(--accent); color: var(--ink); }
.mic-glyph {
  width: 11px; height: 16px;
  border-radius: 6px 6px 5px 5px;
  border: 1.5px solid currentColor;
  position: relative;
  flex: none;
}
.mic-glyph::after {
  content: ""; position: absolute;
  left: 50%; bottom: -6px; transform: translateX(-50%);
  width: 9px; height: 5px;
  border: 1.5px solid currentColor;
  border-top: 0;
  border-radius: 0 0 6px 6px;
}
/* Unsupported browsers still get a button; it explains itself on tap. */
.mic.is-unavailable { opacity: .45; }

/* Listening. Calm, no fake waveform. */
.listening {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 26px 16px 20px;
  text-align: center;
}
.listening[hidden] { display: none; }   /* display:flex outranks [hidden] */
.listen-pulse {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent);
  animation: listen 1.6s ease-in-out infinite;
}
@keyframes listen {
  0%, 100% { opacity: .35; transform: scale(1); }
  50%      { opacity: .9;  transform: scale(1.25); }
}
.listen-title { font-family: var(--display); font-size: 1.1rem; margin: 4px 0 0; }
.listen-sub { color: var(--ink-3); font-size: .86rem; margin: 0 0 6px; }

.talk-switch {
  display: block;
  width: 100%;
  margin-top: 16px;
  text-align: center;
  min-height: 44px;
}

/* --- what SIDORA understood --------------------------------------------- */

.und-words {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-left: 2px solid var(--accent);
  background: var(--surface-2);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink-2);
  font-style: italic;
  line-height: 1.55;
}
.und-list { list-style: none; margin: 0 0 22px; padding: 0; }
.und-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}
.und-row:last-child { border-bottom: 0; }
.und-signal { color: var(--ink-2); font-size: .93rem; }
.und-value { font-family: var(--display); font-size: 1.12rem; }

.und-edit-row { padding: 4px 0 16px; }
.und-actions { display: flex; flex-direction: column; gap: 10px; }
/* Confirm and Edit are the two decisions of this screen; the shared
   ghost-button padding left Edit at 43px. */
.und-actions .btn { min-height: 44px; }

/* ---- "did SIDORA understand you?" --------------------------------------- */
.und-ask {
  margin-top: 26px; padding: 18px 20px;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--surface);
}
.und-ask-q { margin: 0 0 12px; font-size: .93rem; color: var(--ink-2); }
.und-ask-row { display: flex; gap: 8px; flex-wrap: wrap; }
.und-ask-row[hidden] { display: none; }   /* display:flex outranks [hidden] */
.und-ask-row .ci-choice { flex: 1; min-width: 90px; min-height: 44px; }
.und-ask-more { margin-top: 12px; }
.und-ask-more[hidden] { display: none; }
.und-ask-skip { margin-top: 10px; min-height: 44px; }
.und-ask-done { margin: 0; font-size: .9rem; color: var(--ink-3); }

/* ---- understanding: the processing state -------------------------------- */
.und-steps { list-style: none; margin: 4px 0 0; padding: 0; }
.und-steps li {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 0; color: var(--ink-3); font-size: .95rem;
  opacity: .45; transition: opacity .5s ease, color .5s ease;
}
.und-steps li.on { opacity: 1; color: var(--ink-2); }
.step-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line); flex: none; transition: background .5s ease;
}
.und-steps li.on .step-dot { background: var(--accent); }

/* ---- clarify: not understood, or not reachable -------------------------- */
.clarify-questions { margin-bottom: 20px; }
.clarify-questions[hidden] { display: none; }

/* ---- editing an interpretation ------------------------------------------ */
.und-group {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
  padding: 18px 0 8px; border-bottom: 1px solid var(--line-soft);
  margin-bottom: 10px;
}
.und-group:first-child { padding-top: 0; }
.und-edit-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.und-drop {
  background: none; border: 0; padding: 6px 2px;
  color: var(--ink-3); font: inherit; font-size: .82rem;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  min-height: 44px;
}
.und-drop:hover { color: var(--danger); }

@media (prefers-reduced-motion: reduce) {
  .und-steps li, .step-dot { transition: none; }
}

@media (max-width: 560px) {
  .talk-actions { flex-wrap: wrap; }
  .talk-actions .btn { flex: 1; min-width: 140px; }
  .und-value { font-size: 1.05rem; }
  .und-edit-head { gap: 8px; }
}