/* Steward dashboard demo: glass look. Two colour schemes on html[data-theme]; cool is the default. */
:root,html[data-theme="cool"]{
  --ink:#1b2340;--accent:#3b6cf6;--link:#2f5ee0;--tint:#e8efff;--good:#1f9d55;--muted:#5b6480;--line:rgba(27,35,64,.12);
  --on-accent:#fff;--bg:#eef3ff;
  --ground:linear-gradient(160deg,#f5f8ff 0%,#e5edff 52%,#f2f6ff 100%);
  --glass:rgba(255,255,255,.58);--glass-edge:rgba(255,255,255,.7);--shadow:0 10px 30px rgba(27,35,64,.08);
  --field:rgba(255,255,255,.72);
  --b1:rgba(59,108,246,.40);--b2:rgba(124,92,246,.28);--b3:rgba(56,189,248,.34);--b4:rgba(31,157,85,.16);
  --ta-bg:#e8efff;--ta-fg:#3b6cf6;--tb-bg:#efe8ff;--tb-fg:#7a5af8;--tc-bg:#dcf3f7;--tc-fg:#0e8fa3;--td-bg:#e0f4e8;--td-fg:#1f9d55;
}
html[data-theme="warm"]{
  --ink:#1f1b16;--accent:#a8853f;--link:#8a6a2c;--tint:#f1ead9;--good:#8a6a2c;--muted:#6f675c;--line:#e3ddd2;
  --on-accent:#fff;--bg:#faf8f4;
  --ground:#faf8f4;
  --glass:rgba(255,255,255,.58);--glass-edge:rgba(255,255,255,.7);--shadow:0 10px 30px rgba(31,27,22,.07);
  --field:rgba(255,255,255,.72);
  --b1:rgba(168,133,63,.26);--b2:rgba(214,190,140,.34);--b3:rgba(168,133,63,.16);--b4:rgba(232,216,182,.46);
  --ta-bg:#f3ecdb;--ta-fg:#a8853f;--tb-bg:#f6efe0;--tb-fg:#9a7a38;--tc-bg:#efe6d2;--tc-fg:#8a6a2c;--td-bg:#f4ecda;--td-fg:#a8853f;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;min-height:100vh;background:var(--ground);background-color:var(--bg);background-attachment:fixed;color:var(--ink);font:400 15px/1.45 "DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
button,input{font-family:inherit}
html{touch-action:manipulation}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Blurred backdrop blobs */
.blobs{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.blobs i{position:absolute;border-radius:50%;filter:blur(70px);animation:drift 38s ease-in-out infinite alternate}
.blobs i:nth-child(1){width:46vmax;height:46vmax;left:-12vmax;top:-14vmax;background:var(--b1)}
.blobs i:nth-child(2){width:38vmax;height:38vmax;right:-10vmax;top:6vmax;background:var(--b2);animation-duration:46s;animation-delay:-12s}
.blobs i:nth-child(3){width:42vmax;height:42vmax;left:22vw;bottom:-22vmax;background:var(--b3);animation-duration:52s;animation-delay:-20s}
.blobs i:nth-child(4){width:26vmax;height:26vmax;right:14vw;bottom:-6vmax;background:var(--b4);animation-duration:42s;animation-delay:-6s}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(5vmax,3vmax,0) scale(1.12)}}
@media (prefers-reduced-motion:reduce){.blobs i{animation:none}.panel{animation:none!important}}
body.dash>*:not(.blobs),body.signin>*:not(.blobs){position:relative;z-index:1}

/* Glass */
.glass,.card{background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);border:1px solid var(--glass-edge);border-radius:18px;box-shadow:var(--shadow)}

/* Type */
.title{font:600 28px/1.1 "Playfair Display",Georgia,serif;margin:0;letter-spacing:.2px}
.lede{color:var(--muted);margin:6px 0 22px;font-size:16px}
.fine{color:var(--muted);font-size:13px;text-align:center;margin:22px 0 0}
.note{color:var(--muted);margin:0}
.empty{margin:8px 0 0;color:var(--muted);font-size:14px}
.what,.what-rail{color:var(--muted);font-size:13px;line-height:1.35;margin:2px 0 0}
.count{margin:4px 0 4px;font-size:13px;color:var(--muted)}

/* Buttons */
.pill{appearance:none;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);font:600 14px/1 "DM Sans",sans-serif;padding:0 18px;min-height:38px;border-radius:999px;cursor:pointer;white-space:nowrap}
.pill:hover{filter:brightness(1.06)}
.pill:active{opacity:.85}
.pill.ghost{background:transparent;color:var(--link);border-color:var(--line)}
.pill.small{font-size:13px;padding:0 14px;min-height:30px}
.pill:disabled{opacity:.55;cursor:default}
.link{appearance:none;background:none;border:0;color:var(--link);font:500 14px "DM Sans",sans-serif;padding:6px 4px;cursor:pointer}
.link:hover{text-decoration:underline}
select.link{max-width:9em;text-overflow:ellipsis;cursor:pointer}
.link.small{font-size:12px;padding:0 2px}
.mic{appearance:none;flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--glass);color:var(--link);display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
.mic[hidden]{display:none}
.mic[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(59,108,246,.35)}100%{box-shadow:0 0 0 10px rgba(59,108,246,0)}}
@media (prefers-reduced-motion:reduce){.mic[aria-pressed="true"]{animation:none}}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Sign in page */
body.signin{display:block}
.wrap{max-width:520px;margin:0 auto;padding:16px 16px 48px}
.wrap.narrow{padding-top:15vh}
body.signin .title{font-size:40px}
.card.center{padding:28px 16px;text-align:center}
.g-button{display:flex;justify-content:center;min-height:44px}

/* The phone's first screen: one big mic button and Steward's answer, the rest a scroll away (his words 3:08 am 2026-11-03) */
.hero{display:none}
.mic.big{width:112px;height:112px;border-width:1.5px}
.mic.big svg{width:44px;height:44px}
.hero-title{margin:0;font:600 22px/1.1 "Playfair Display",Georgia,serif}
.hero-reply{margin:0;font-size:17px;line-height:1.45;color:var(--ink);max-width:30em}
.hero-reply.live{color:var(--muted)}
#keep-mic[aria-pressed="true"],#keep-mic-top[aria-pressed="true"],#mic-open[aria-pressed="true"],#mic-open-top[aria-pressed="true"]{font-weight:600}
.hero-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px}
.mic[aria-pressed="true"].hush{animation:none;background:var(--line);color:var(--muted);border-color:var(--line)}
.talk .line{display:block;-webkit-line-clamp:unset;overflow:visible}
.talk .line+.line{margin-top:2px}
.talk .who{font-weight:600}
.rail .talk .line{display:-webkit-box;-webkit-line-clamp:2;overflow:hidden}
#hear-voice{font-weight:600;margin-left:10px}
.hero-hint{margin:0;font-size:13px;color:var(--muted)}

/* Header */
.top{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:8px 20px;padding:10px 18px}
.today-date{margin:0;font-size:14px;color:var(--muted);white-space:nowrap}
.tell{display:flex;gap:10px;align-items:center;min-width:0}
.tell .field{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:40px;padding:0 4px 0 14px;border-radius:999px;border:1px solid var(--glass-edge);background:var(--field);color:var(--muted)}
.tell .field:focus-within{border-color:var(--accent)}
.tell input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:400 15px/1.4 "DM Sans",sans-serif;outline:none;height:100%}
.tell input::placeholder{color:var(--muted)}
.top-right{display:flex;align-items:center;gap:10px}
.theme-switch{display:inline-flex;padding:2px;border-radius:999px;border:1px solid var(--line);background:var(--field)}
.theme-switch button{appearance:none;border:0;background:transparent;color:var(--muted);font:500 12px/1 "DM Sans",sans-serif;padding:6px 11px;border-radius:999px;cursor:pointer}
.theme-switch button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
#signout{white-space:nowrap}

/* Tiles */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0}
.tile{appearance:none;text-align:left;color:inherit;font:inherit;display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;min-width:0}
.tile:hover{border-color:#fff}
.tile-icon{flex:none;width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.t-a{background:var(--ta-bg);color:var(--ta-fg)}
.t-b{background:var(--tb-bg);color:var(--tb-fg)}
.t-c{background:var(--tc-bg);color:var(--tc-fg)}
.t-d{background:var(--td-bg);color:var(--td-fg)}
.tile-body{display:flex;flex-direction:column;min-width:0}
.tile-label{font-size:13px;color:var(--muted);line-height:1.2}
.tile-num{font-size:26px;font-weight:600;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile-line{font-size:12.5px;color:var(--muted);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile-line.good{color:var(--good)}

/* Rails */
.rail{display:flex;flex-direction:column;gap:14px;min-height:0;min-width:0}
.rail>section{padding:14px 16px;min-height:0;flex:none}
.rail>section.fill{flex:1 1 0;overflow:hidden}
.rail h2{margin:0;font-size:15px;font-weight:600}
.label{appearance:none;background:none;border:0;padding:0;color:var(--ink);font:600 15px/1.3 "DM Sans",sans-serif;cursor:pointer}
.label:hover{color:var(--link)}
.item{padding:7px 0;border-top:1px solid var(--line)}
.item:first-child{border-top:0}
.item .chat{font-weight:600;font-size:14px;line-height:1.3}
.item .meta{color:var(--muted);font-size:13.5px;line-height:1.35;margin-top:2px}
.item .clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.time{color:var(--muted);font-variant-numeric:tabular-nums;display:block;font-size:12.5px}
.line{font-size:14px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.actions{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap}
.group h3{font:600 11px/1.2 "DM Sans",sans-serif;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:10px 0 3px}
.group:first-child h3{margin-top:6px}
.cb{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;background:none;border:0;color:inherit;font:inherit;font-size:14px;line-height:1.35;padding:3px 0;cursor:pointer}
.cb .tx{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.box{flex:none;width:17px;height:17px;border-radius:5px;border:1.5px solid var(--accent);background:rgba(255,255,255,.6);margin-top:2px}
.cb:hover .box{background:var(--tint)}
.rank{color:var(--muted);font-variant-numeric:tabular-nums;margin-right:6px}
.more{display:block;padding:2px 0;font-size:13px}
.cal-day{font:600 11px/1.2 "DM Sans",sans-serif;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:10px 0 3px}
.cal-day:first-child{margin-top:6px}
.cal-row{display:flex;gap:10px;align-items:baseline;padding:3px 0;font-size:14px;line-height:1.35}
.cal-when{flex:none;width:5.4em;color:var(--muted);font-variant-numeric:tabular-nums;font-size:12.5px}
.cal-title{min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cal-row.off .cal-title{text-decoration:line-through;color:var(--muted)}
.cal-foot{margin:8px 0 0;color:var(--muted);font-size:12.5px}
.cal-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:8px}
.cal-span{font:600 13px/1.3 "DM Sans",sans-serif}
.cal-toggle{padding:0 2px;font-size:13px}
.cal-week,.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;margin-top:6px}
.cal-cell{appearance:none;background:none;border:1px solid transparent;border-radius:10px;padding:4px 0 3px;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;cursor:pointer;color:var(--ink);font-family:"DM Sans",sans-serif}
@media (hover:hover){.cal-cell:hover{background:var(--tint)}}
.cal-cell.picked{border-color:var(--accent);background:var(--tint)}
.cal-cell.dim{opacity:.45}
.cal-dow{font-size:10.5px;line-height:1.2;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);text-align:center}
.cal-num{font-size:14px;font-weight:600;width:26px;height:26px;line-height:26px;text-align:center;border-radius:50%;font-variant-numeric:tabular-nums}
.cal-cell.today .cal-num{background:var(--accent);color:var(--on-accent);font-weight:700}
.cal-dot{font-size:10px;line-height:12px;min-height:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.cal-grid .cal-cell{padding:2px 0 1px}
.cal-grid-head{margin-top:8px}

/* Stage */
.stage{display:flex;flex-direction:column;min-height:0;min-width:0;position:relative;z-index:2}
.idle{margin:auto;color:var(--muted);font-size:16px;text-align:center;max-width:36ch}
.panel{display:flex;flex-direction:column;flex:1;min-height:0;padding:22px 28px;overflow:hidden;animation:rise .24s ease-out both}
.panel[hidden]{display:none}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.panel-head h2{margin:0;font:600 32px/1.15 "Playfair Display",Georgia,serif}
.panel.is-review .panel-head h2{font-size:24px}
.panel-body{font-size:16px;flex:1;min-height:0;margin-top:16px;overflow:hidden;column-width:280px;column-gap:32px;column-fill:auto}
.panel-body.money,.panel-body.review{column-width:auto}
.panel-body .item,.panel-body .cb{break-inside:avoid}
.panel-body .item .chat,.panel-body .line,.panel-body .cb{font-size:1em}
.panel-body .item .meta{font-size:.9em}
.panel-body .time{font-size:.8em}
.panel-body .cb{padding:2px 0;line-height:1.3}
.panel-body .cb .tx,.panel-body .line{-webkit-line-clamp:unset;display:block;overflow:visible}
.panel-body .group h3{break-after:avoid}
.panel-body .cal-row{break-inside:avoid;font-size:1em}
.panel-body .cal-when{width:8.6em;font-size:.8em}
.panel-body .cal-title{-webkit-line-clamp:unset;display:block;overflow:visible}
.panel-body .cal-day{break-after:avoid}
.panel-body.calendar{column-width:auto;display:flex;flex-direction:column}
.panel-body.calendar>*{flex:none}
.panel-body.calendar .cal-list{flex:1 1 0;min-height:0;column-gap:32px;column-fill:auto;overflow:hidden;margin-top:2px}
.panel-body .cal-week,.panel-body .cal-grid{max-width:600px}
.panel-body .cal-cell{padding:8px 0 6px}
.panel-body .cal-grid .cal-cell{padding:3px 0 2px}
.panel-body .cal-span{font-size:1em}
.panel-body .cal-dow{font-size:.7em}
.big{font:600 30px/1.25 "DM Sans",sans-serif;margin:0}

/* Review of one item */
.rv{display:flex;flex-direction:column;gap:12px;height:100%;min-height:0}
.rv-meta{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:.95em}
.rv-meta dt{color:var(--muted)}
.rv-meta dd{margin:0}
.rv h3{margin:0;font:600 12px/1.2 "DM Sans",sans-serif;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.rv ul{margin:6px 0 0;padding-left:20px;font-size:.95em}
.rv li{margin:3px 0}
.rv label{display:block;font-weight:600;font-size:.9em;margin-bottom:4px}
.rv-note{display:flex;align-items:center;gap:8px;height:40px;padding:0 4px 0 14px;border-radius:12px;border:1px solid var(--glass-edge);background:var(--field)}
.rv-note:focus-within{border-color:var(--accent)}
.rv-note input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:400 15px "DM Sans",sans-serif;outline:none;height:100%}
.rv-actions{display:flex;gap:10px;margin-top:auto;flex-wrap:wrap}

/* Footer */
.bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:9px 18px}
.reply{margin:0;min-height:1.4em;font-size:14px;color:var(--ink);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo{margin:0;font-size:12px;color:var(--muted);text-align:right;flex:none}
.brain{margin-left:10px}

/* Desktop dashboard: one page, no scrolling */
@media (min-width:900px){
  html{height:100%;overflow:hidden}
  body.dash{height:100vh;height:100dvh;overflow:hidden;padding:14px 20px;display:grid;gap:14px;grid-template-columns:300px minmax(0,1fr) 300px;grid-template-rows:auto auto minmax(0,1fr) auto}
  .top{grid-column:1/-1;grid-row:1}
  .tiles{grid-column:1/-1;grid-row:2}
  .rail.left{grid-column:1;grid-row:3}
  .stage{grid-column:2;grid-row:3}
  .rail.right{grid-column:3;grid-row:3}
  .bar{grid-column:1/-1;grid-row:4}
  body.tight .rail>section{padding:10px 14px}
  body.tight .rail{gap:10px}
  body.tight .rail .item{padding:5px 0}
  body.tight .rail .cb,body.tight .rail .line,body.tight .rail .item .chat{font-size:14px}
  body.tight .rail .item .meta,body.tight .rail .more,body.tight .rail .count,body.tight .rail .time{font-size:13px}
  body.tighter .rail>section{padding:8px 12px}
  body.tighter .rail{gap:8px}
  body.tighter .rail .item .clamp,body.tighter .rail .cb .tx,body.tighter .rail .line{-webkit-line-clamp:1}
  body.tighter .rail .cb,body.tighter .rail .line,body.tighter .rail .item .chat{font-size:13px}
  body.tighter .rail .item .meta,body.tighter .rail .more,body.tighter .rail .count,body.tighter .rail .time{font-size:13px}
  body.tighter .rail .count{margin:2px 0 0}
  body.tighter .rail .group h3{margin:6px 0 1px}
  body.tighter .rail .actions{margin-top:4px}
}
@media (min-width:900px) and (max-width:1180px){
  body.dash{grid-template-columns:260px minmax(0,1fr) 260px;padding:12px 14px;gap:12px}
  .top{gap:8px 14px}
  .tiles{gap:12px}
  .tile{padding:10px 12px;gap:10px}
  .tile-icon{width:36px;height:36px}
  .tile-num{font-size:22px}
  .panel{padding:18px 20px}
  .panel-head h2{font-size:26px}
}

/* Narrow: one column, the page may scroll, the rails stack */
@media (max-width:899.98px){
  body.dash{display:flex;flex-direction:column;gap:12px;padding:calc(env(safe-area-inset-top) + 12px) calc(env(safe-area-inset-right) + 14px) calc(env(safe-area-inset-bottom) + 20px) calc(env(safe-area-inset-left) + 14px)}
  .hero{order:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:22px;min-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px);padding:12px 8px}
  .hero-title{margin-bottom:auto}
  .hero-hint{margin-top:auto}
  .stage{order:1}
  .top{order:2}
  .tiles{order:3}
  .top{grid-template-columns:1fr auto;gap:8px 12px}
  .top .tell{grid-column:1/-1;grid-row:3}
  .top .today-date{grid-column:1;grid-row:2;align-self:center}
  .top-right{grid-column:2;grid-row:1/3;display:grid;grid-template-columns:auto;justify-items:end;gap:6px}
  .top-right .link{white-space:nowrap}
  .desk-only{display:none}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stage{display:none}
  .stage.on{display:flex}
  .panel{padding:18px 16px}
  .panel-head h2{font-size:26px}
  .panel-body{overflow:visible;column-width:auto;margin-top:10px}
  .rail.left{order:5}
  .rail.right{order:6}
  .bar{order:7;flex-direction:column;align-items:stretch;gap:4px}
  .reply{white-space:normal}
  .demo{text-align:left}
  .brain{margin-left:0;display:block}
  .pill.small,.link,.label,.cb,.more{min-height:40px}
  .cb{align-items:center}
  .tell input,.rv-note input{font-size:16px}
}