:root {
  --bg: #0e1116; --panel: #171c24; --line: #2a3140;
  --ink: #e8ebf1; --dim: #93a0b4;
  --warm: #ff9f43; --calm: #5ec8a8; --warn: #ff6b6b;
  --card: #1a2030; /* card surfaces (was undefined -> tutorial banner transparent) */
  font-size: 16px;
}
.spoonbtn { margin-top: .5rem; padding: .35rem .8rem; font-size: .8rem; }
#spoonsInfo { margin-top: .6rem; padding: .7rem .9rem; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
#spoonsInfo p { margin: .3rem 0; font-size: .85rem; color: var(--dim); line-height: 1.45; }
#spoonsInfo strong { color: var(--warm); }

/* guided tutorial: fixed banner, one step at a time, warm accent */
#tutorialBar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 12px; max-width: 440px; width: calc(100% - 24px);
  background: var(--card, #1a2030); border: 2px solid var(--warm); border-radius: 10px;
  padding: .7rem .9rem; box-shadow: 0 4px 18px rgba(0,0,0,.18); z-index: 60;
  pointer-events: none; /* the guide never blocks the app it explains */
}
#tutorialBar .tutrow { pointer-events: auto; } /* its own buttons stay tappable */
body.tutorial-open { padding-bottom: 130px; } /* content scrolls clear of the banner */
#tutorialBar p { margin: .3rem 0 .2rem; font-size: .9rem; }
#tutorialBar .tut-step { color: var(--warm); font-weight: 700; font-size: .75rem; letter-spacing: .04em; }
#tutorialBar .tutrow { display: flex; gap: 1rem; }
.tut-highlight { outline: 3px solid var(--warm); outline-offset: 3px; border-radius: 8px; }
.authpane { margin-bottom: .6rem; }
.authpane h2 { margin-top: 0; }

/* authmode: on the login screen, hide everything inside appMain except the auth card */
body.authmode #planCard,
body.authmode #historyCard,
body.authmode #transcript,
body.authmode #quickRow,
body.authmode .controls,
body.authmode .tools,
body.authmode #reportsPanel { display: none; }
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  min-height: 100vh;
}
main { max-width: 640px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
.hidden { display: none !important; }
header { margin-bottom: 1.5rem; }
.topline { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.logo { font-size: 2rem; font-weight: 700; letter-spacing: .35em; color: var(--warm); }
.who { color: var(--dim); font-size: .8rem; text-align: right; overflow-wrap: anywhere; max-width: 60%; }
.sub { color: var(--dim); font-size: .85rem; margin-top: .35rem; }

#transcript {
  display: flex; flex-direction: column; gap: .6rem; margin: 1rem 0 1.25rem;
}
.bubble {
  padding: .8rem 1rem; border-radius: 14px; max-width: 85%;
  line-height: 1.45; animation: pop .18s ease-out;
}
.bubble.you { align-self: flex-end; background: #24304a; }
.bubble.flare { align-self: flex-start; background: var(--panel); border: 1px solid var(--line); }
.bubble.flare::before { content: "FLARE"; display: block; font-size: .6rem; letter-spacing: .25em; color: var(--warm); margin-bottom: .25rem; }
@keyframes pop { from { transform: translateY(4px); opacity: 0 } to { transform: none; opacity: 1 } }

#planCard, #historyCard, #reportsPanel, #authCard {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 1rem 1.25rem; margin-bottom: 1.25rem;
}
#planCard h2, #historyCard h2, #reportsPanel h2, #authCard h2 { margin: 0 0 .5rem; font-size: 1.05rem; }
#bandLine { color: var(--dim); font-size: .9rem; margin-bottom: .6rem; }
#anchorList { margin: 0; padding-left: 1.2rem; }
#anchorList li { margin: .35rem 0; }
#anchorList li.done { color: var(--calm); text-decoration: line-through; }
#anchorList li.skipped { color: var(--dim); text-decoration: line-through; opacity: .75; }
#anchorList li.dropped { color: var(--warn); text-decoration: line-through; opacity: .6; }
#anchorList li .rest { color: var(--dim); font-size: .8rem; margin-left: .4rem; }
#anchorList li.tappable { cursor: pointer; }
#anchorList li.tappable:hover { color: var(--warm); }

/* quick check-in pills */
.quick { display: flex; gap: .75rem; align-items: stretch; justify-content: center; flex-wrap: wrap; margin-bottom: 1.25rem; }
.qfield { display: flex; flex-direction: column; gap: .3rem; align-items: center; }
@media (max-width: 480px) {
  /* phone: three steppers on one line, Log it full-width beneath — no overlap, no scroll */
  .quick { gap: .45rem; }
  .quick .qfield { flex: 1 1 0; min-width: 0; }
  .quick .qgo { flex: 1 1 100%; padding: .6rem; }
  .qstepper { gap: .2rem; padding: .3rem .2rem; justify-content: center; }
  .qstepper button { width: 2.2rem; height: 2.2rem; font-size: 1.15rem; }
  .qval { min-width: 1.2rem; font-size: 1.05rem; }
  .qlabel { font-size: .7rem; }
}
.qlabel { color: var(--dim); font-size: .8rem; letter-spacing: .08em; }
.qstepper { display: flex; align-items: center; gap: .5rem; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: .35rem .55rem; }
.qstepper button {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; flex: none;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  font-size: 1.25rem; line-height: 1; cursor: pointer; touch-action: manipulation;
}
.qstepper button:active { border-color: var(--warm); color: var(--warm); }
.qval { min-width: 1.6rem; text-align: center; font-size: 1.2rem; font-weight: 600; }
.qgo {
  align-self: stretch; padding: .5rem 1.3rem; border-radius: 999px;
  border: 1px solid var(--warm); background: var(--warm); color: #1a1208;
  font-size: 1rem; font-weight: 600; cursor: pointer;
}
.qgo:active { filter: brightness(.92); }

.controls { text-align: center; }
#mic {
  font-size: 1.05rem; padding: .9rem 1.6rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  cursor: pointer; transition: all .15s;
}
#mic.listening { background: var(--warm); color: #1a1208; border-color: var(--warm); }
#mic:disabled { opacity: .45; cursor: default; }
.hint { color: var(--dim); font-size: .8rem; margin-top: .8rem; }
.error { color: var(--warn); font-size: .85rem; margin-top: .6rem; }
.textrow { display: flex; gap: .6rem; margin-top: .8rem; align-items: flex-end; }
.textrow textarea {
  flex: 1; padding: .7rem 1rem; border-radius: 14px; resize: none;
  border: 1px solid var(--line); background: var(--panel);
  color: var(--ink); font-size: .95rem; font-family: inherit; outline: none;
  min-height: 5.25rem; max-height: 8rem; line-height: 1.4;
}
.textrow textarea:focus { border-color: var(--warm); }
.textrow textarea::placeholder { color: var(--dim); }
.textrow button {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; flex: none;
  border: 1px solid var(--line); background: var(--panel); color: var(--dim);
  cursor: pointer; font-size: 1.1rem; line-height: 1;
  transition: color .15s, border-color .15s;
}
.textrow button:hover, .textrow button:focus { color: var(--warm); border-color: var(--warm); }

/* tools row + reports */
.tools { display: flex; gap: .6rem; justify-content: center; margin-top: 1.5rem; }
.ghostbtn {
  padding: .55rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); color: var(--dim);
  font-size: .9rem; cursor: pointer;
}
.ghostbtn:hover, .ghostbtn:focus { color: var(--warm); border-color: var(--warm); }
#reportsPanel label.rlab { display: block; margin: .6rem 0; color: var(--dim); font-size: .9rem; }
#reportsPanel select, #reportsPanel input[type="date"] {
  display: block; margin-top: .25rem; width: 100%;
  padding: .5rem .7rem; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: .95rem;
}
#customDates.hidden { display: none; }
#reportsPanel .qgo { margin-top: .8rem; }
#historyWrap svg { display: block; }

/* v18.17: consistent inputs everywhere + styled tabs (Kris 2026-10-21 practice run) */
#profileCard input, .pconfirm {
  display: block; width: 100%; box-sizing: border-box;
  padding: .65rem .9rem; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  font-size: 1rem; outline: none; margin: .25rem 0 .45rem;
}
#profileCard input:focus, .pconfirm:focus { border-color: var(--warm); }
.ptab {
  padding: .45rem 1.1rem; margin: .5rem .25rem .7rem 0; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  font-size: .95rem; cursor: pointer;
}
.ptab-on { background: var(--warm); border-color: var(--warm); color: #1a1208; font-weight: 600; }
.ptab #pvReqBadge { margin-left: .45rem; }
#authForm input, #authForm select,
#loginForm input, #registerForm input, #loginForm select {
  padding: .65rem .9rem; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  font-size: 1rem; outline: none;
}
/* 2026-10-21 scanner catch: the CSS targeted #authForm, an id absent from the
   markup for months (#registerForm/#loginForm is the real shape) — the
   sign-in buttons and inputs had been silently UA-default the whole time. */
#authForm input:focus, #authForm select:focus,
#loginForm input:focus, #registerForm input:focus { border-color: var(--warm); }
#authForm button,
#loginForm button, #registerForm button {
  padding: .65rem; border-radius: 999px; border: 1px solid var(--warm);
  background: var(--warm); color: #1a1208; font-weight: 600; cursor: pointer;
}
#authCard .ghostbtn { margin-top: .6rem; width: 100%; }
/* v11 additions: midday selector, anchor done/skip taps, tomorrow line */
#quickKind {
  flex: 1 1 100%; padding: .45rem .8rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  font-size: .9rem; cursor: pointer;
}
li.planned .anchdone, li.planned .anchskip {
  width: 2rem; height: 2rem; border-radius: 50%; flex: none;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  font-size: 1rem; line-height: 1; cursor: pointer; margin-left: .5rem;
  touch-action: manipulation;
}
li.planned .anchdone:active { border-color: #289646; color: #289646; }
li.planned .anchskip:active { border-color: var(--warm); color: var(--warm); }
.tomorrow { color: var(--dim); font-size: .85rem; margin-top: .35rem; }
/* v12: "same as yesterday" pre-fill button sits next to Log it on the quick row */
.samebtn { flex: none; font-size: .8rem; padding: .5rem .9rem; color: var(--ink); }
.samebtn:disabled { opacity: .5; cursor: default; }
.restbtn-day { flex: 1 1 100%; font-size: .8rem; padding: .5rem .9rem; color: var(--dim); }
.restbtn-day:disabled { opacity: .5; cursor: default; }

/* landscape (Alexa+ / Echo Show): wide-but-short screen. Two columns so the
   quick check-in, plan anchors and mic all sit above the fold with no scroll. */
@media (min-width: 900px) and (max-height: 850px) {
  main {
    max-width: 1000px; padding: .8rem 1.5rem 1rem;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    grid-template-areas:
      "head  head"
      "quick chat"
      "plan  chat"
      "hist  ctrl"
      "tools tools";
    gap: .8rem 1.25rem;
    align-items: start;
  }
  header { grid-area: head; margin-bottom: 0; }
  header .sub { font-size: .75rem; }
  .topline { margin-bottom: .1rem; }
  .democta { grid-area: head; justify-self: end; margin-top: 2.6rem; max-width: 430px; }
  .quick { grid-area: quick; margin-bottom: 0; }
  #transcript { grid-area: chat; max-height: 46vh; overflow-y: auto; margin: 0; }
  .controls { grid-area: ctrl; margin: 0; text-align: left; }
  #planCard { grid-area: plan; margin-bottom: 0; }
  #historyCard { grid-area: hist; margin-bottom: 0; }
  #historyCard svg { max-height: 96px; }
  /* reports panel opens INSIDE the grid (left column), so the page never scrolls (audit #10) */
  #reportsPanel { grid-area: hist; z-index: 5; }
  footer.tools { grid-area: tools; margin-top: 0; }
  .hint { display: none; }
  .bubble { max-width: 100%; padding: .55rem .8rem; }
}

/* tour mode CTA: easy signup after the demo */
.democta {
  display: flex; gap: .8rem; align-items: center; flex-wrap: wrap;
  padding: .55rem 1rem; border-radius: 14px;
  border: 1px dashed var(--warm); color: var(--ink);
  background: rgba(255, 170, 60, 0.07); font-size: .9rem;
}
.democta .warmbtn {
  padding: .45rem 1rem; border-radius: 999px; border: 1px solid var(--warm);
  background: var(--warm); color: #1a1208; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}

/* rest timer chip: countdown state */
.restbtn { cursor: pointer; }
.restbtn.resting { border-color: var(--warm); color: var(--warm); font-variant-numeric: tabular-nums; }

/* forgot-passphrase flow */
.linkbtn { background: none; border: none; color: var(--warm); cursor: pointer;
  font-size: .85rem; padding: .3rem 0; text-align: left; text-decoration: underline; }
#forgotForm { display: flex; flex-direction: column; gap: .6rem; margin-top: .4rem; }
#forgotForm input { padding: .65rem .9rem; border-radius: 12px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); font-size: 1rem; outline: none; }
#forgotForm button { padding: .65rem; border-radius: 999px; border: 1px solid var(--warm);
  background: transparent; color: var(--warm); font-weight: 600; cursor: pointer; }

/* calibration (2026-09-25) */
.calline { color: var(--dim); font-size: .78rem; margin-top: .3rem; letter-spacing: .02em; }
.crashwarn {
  background: #2a2118; border: 1px solid var(--warm); color: var(--ink);
  border-radius: 8px; padding: .8rem 1rem; margin: 0 0 1rem; font-size: .92rem;
}

/* report panel: two equal actions (Kris: email-the-PDF is a first-class
   path for phone/Alexa+ users; download remains for desktop) */
.rrow { display: flex; gap: .5rem; }
.rrow .qgo { flex: 1; }

/* provider console + consent card (Oct 2026) */
.pform { display: grid; gap: .45rem; margin: .5rem 0; }
.pform label { display: grid; gap: .15rem; font-size: .8rem; color: var(--dim); }
.pform input, .prow input { background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); padding: .45rem .6rem; font: inherit; width: 100%; }
.prow { display: flex; gap: .5rem; margin: .5rem 0; align-items: center; }
.prow input { flex: 1; }
.pdays { width: 4.2rem; }
.pconfirm { margin: .4rem 0 .6rem; }
.keyout, .browseout { background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: .6rem; font-size: .78rem; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }
#pvKeys, #pvGrants, #consentList, #accessLogList { margin: .35rem 0 .8rem; padding-left: 1.1rem; }
#consentsCard ul li { margin: .3rem 0; }

/* utility classes ported from welcome.css (provider console + signup note use them) */
.small { font-size: .85rem; }
.dim { color: var(--dim); }

/* topline voice toggle (Kris 2026-10-05: load-time voice off by default) */
.speaktoggle { margin-left: auto; font-size: .8rem; padding: .2rem .5rem; }

/* debug day-shift bar (config debug:true only) */
.debugbar { display: flex; gap: .4rem; align-items: center; padding: .25rem .6rem; }

/* spoons bar (2026-10-05): the day's budget as a visible draining bar */
.spoonbar { height: 8px; border-radius: 4px; background: #233043; margin: .35rem 0 .75rem; overflow: hidden; }
.spoonbar > div { height: 100%; width: 0%; border-radius: 4px; background: linear-gradient(90deg, #4ade80, #fbbf24); transition: width .4s ease; }

/* baseline line (numbers are personal, SPEC §6) */
.baseline { margin: .25rem .6rem; }