* { box-sizing: border-box; }
html, body { margin:0; background:var(--bg); color:var(--ink); font:var(--fs-body)/1.45 var(--font); }
button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
.top { display:flex; align-items:center; gap:var(--sp-20); padding:var(--sp-14) var(--sp-24); border-bottom:1px solid var(--line); }
.brand { font-weight:600; letter-spacing:.01em; }
/* The shell: a sidebar with the app's name (foundations/7); Library at its bottom (foundations/8) */
.shell { display:grid; grid-template-columns: 200px minmax(0,1fr); min-height:100vh; }
.appside { display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-16) var(--sp-12); border-right:1px solid var(--line); background:var(--side); position:sticky; top:0; height:100vh; }
.appside .brand { padding:var(--sp-4) var(--sp-8) var(--sp-10); }
.appside .capbtn { margin:0 var(--sp-4) var(--sp-12); text-align:left; }
.appside #inboxcount:empty { display:none; }
.appside .sp { flex:1; }
.appmain { min-width:0; }
.sp { flex:1; }
.link { color:var(--ink); font-size:var(--fs-meta); text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:2px; }

.layout { display:grid; grid-template-columns: 300px minmax(0,1fr); min-height: calc(100vh - 56px); }
.layout.with-panel { grid-template-columns: 300px minmax(0,1fr) 340px; }
.tray { border-right:1px solid var(--line); padding:var(--sp-20) var(--sp-20) var(--sp-40); background:var(--side); }
.board { padding:var(--sp-24) var(--sp-32) var(--sp-64); max-width:900px; width:100%; }
.board.wide { max-width:none; }
.panel { border-left:1px solid var(--line); padding:var(--sp-20); background:var(--side); }
.panel h2 { margin:0 0 var(--sp-4); font-size:var(--fs-heading); }
h3.sec { margin:var(--sp-24) 0 var(--sp-6); font-size:var(--fs-meta); font-weight:700; letter-spacing:.02em; border-bottom:1px solid var(--line); padding-bottom:var(--sp-6); display:flex; justify-content:space-between; align-items:baseline; }
h3.sec .sub { font-weight:400; color:var(--soft); font-size:var(--fs-meta); }
.tray h3.sec:first-child { margin-top:0; }
.head { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--sp-16); margin-bottom:var(--sp-6); }
.head h1 { font-size:var(--fs-title); font-weight:600; margin:0; }
.head h1 .rest { color:var(--soft); font-weight:400; }
.over { color:var(--red); font-weight:600; }
.sugg { color:var(--soft); font-size:var(--fs-small); margin:var(--sp-4) 0 0; }
.views { display:flex; gap:var(--sp-16); margin:var(--sp-14) 0 var(--sp-6); border-bottom:1px solid var(--line); }
.views button { padding:var(--sp-8) 0; color:var(--soft); border-bottom:2px solid transparent; }
.views button.on { color:var(--ink); border-color:var(--ink); font-weight:600; }
.views kbd { color:var(--faint); font-size:var(--fs-label); margin-right:var(--sp-4); }
.hint { color:var(--soft); font-size:var(--fs-meta); font-style:italic; }
.rowbtns { display:flex; gap:var(--sp-10); align-items:center; }
.tray .row { padding:var(--sp-8) var(--sp-6); }
.event { display:flex; gap:var(--sp-8); color:var(--soft); font-size:var(--fs-small); padding:var(--sp-4) var(--sp-8); }
.event .lock { opacity:.6; }
.quiet { color:var(--soft); font-size:var(--fs-small); padding:var(--sp-4) var(--sp-8); }
.dropzone { min-height:36px; border-radius:var(--r-lg); }
.dropzone.over-drop { outline:2px dashed var(--soft); background:var(--hover); }
.hl { border:1.5px solid var(--ink); background:var(--surface); border-radius:var(--r-xl); padding:var(--sp-2) var(--sp-6); margin:var(--sp-14) 0 0; }
.hl .lbl { font-size:var(--fs-label); letter-spacing:.06em; text-transform:uppercase; color:var(--ink); padding:var(--sp-6) var(--sp-8) 0; font-weight:700; }
.block { border:1px solid var(--line); border-left:3px solid var(--line-strong); border-radius:var(--r-lg); margin:var(--sp-8) 0; padding:var(--sp-6) var(--sp-6) var(--sp-8); }
.block .bh { display:flex; justify-content:space-between; padding:var(--sp-2) var(--sp-8); font-weight:600; font-size:var(--fs-small); }
.block .bh span { font-weight:400; color:var(--soft); font-size:var(--fs-meta); }
.warn { color:var(--red); font-size:var(--fs-small); margin:var(--sp-8) 0; }
.meters { margin-top:var(--sp-24); }
.strip { position:relative; height:34px; background:var(--hover); border-radius:var(--r-md); overflow:hidden; }
.strip .m { position:absolute; top:4px; bottom:4px; border-radius:var(--r-sm); background:var(--strip-mark); font-size:var(--fs-label); padding:var(--sp-2) var(--sp-4); overflow:hidden; white-space:nowrap; }
.strip .m.deep, .strip .m.task, .strip .m.batch { background:var(--strip-work); }
.strip .nowmark { position:absolute; top:0; bottom:0; width:2px; background:var(--red); }
.strip-hours { display:flex; justify-content:space-between; color:var(--faint); font-size:var(--fs-label); margin-top:var(--sp-4); }
.readouts { display:flex; gap:var(--sp-24); margin-top:var(--sp-8); color:var(--soft); font-size:var(--fs-small); }
.week { display:grid; grid-template-columns: repeat(7, minmax(120px,1fr)); gap:var(--sp-10); margin-top:var(--sp-14); }
.col { border:1px solid var(--line); border-radius:var(--r-xl); padding:var(--sp-8); min-height:200px; }
.col.today { border-color:var(--ink); }
.col h4 { margin:0 0 var(--sp-2); font-size:var(--fs-meta); }
.col .load { font-size:var(--fs-caption); color:var(--soft); margin-bottom:var(--sp-8); }
.col .load.over { color:var(--red); font-weight:600; }
.now-wrap { padding:var(--sp-32) 0; }
.now-line { color:var(--soft); font-size:var(--fs-body); }
.now-task { font-size:var(--fs-title); font-weight:600; margin:var(--sp-14) 0 var(--sp-6); }
.now-timer { font-size:var(--fs-title); font-variant-numeric: tabular-nums; margin:var(--sp-10) 0 var(--sp-16); color:var(--ink); }
.steps { list-style:none; padding:0; margin:var(--sp-12) 0 0; }
.steps li { padding:var(--sp-10) 0; border-bottom:1px solid var(--line); }
.steps .nm { font-weight:600; display:flex; justify-content:space-between; }
.steps .goal { color:var(--soft); font-size:var(--fs-small); margin:var(--sp-2) 0 var(--sp-6); }
.steps li.cur { background:var(--hover); margin:0 calc(-1 * var(--sp-10)); padding:var(--sp-10); border-radius:var(--r-lg); }
.steps .tick { color:var(--ink); }
.steps .sk { color:var(--faint); }
.menu { position:absolute; right:24px; top:52px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:var(--sp-8); width:260px; z-index:10; }
.menu button, .menu label { display:block; width:100%; text-align:left; padding:var(--sp-8) var(--sp-8); border-radius:var(--r-md); font-size:var(--fs-small); }

.menu hr { border:0; border-top:1px solid var(--line); margin:var(--sp-6) 0; }
.menu select { width:100%; margin-top:var(--sp-4); }
#toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:var(--sp-8) var(--sp-16); border-radius:var(--r-lg); opacity:0; pointer-events:none; transition:opacity .2s; z-index:40; max-width:90vw; }
#toast.show { opacity:1; }
#toast.acts { pointer-events:auto; }
#toast .link { color:inherit; text-decoration-color:currentColor; margin-left:var(--sp-8); }
#notices { position:fixed; top:64px; right:16px; z-index:30; display:flex; flex-direction:column; gap:var(--sp-8); }
.notice { background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-xl); padding:var(--sp-10) var(--sp-14); display:flex; gap:var(--sp-12); align-items:center; }
.tasks-layout { display:grid; grid-template-columns: 200px minmax(0,1fr); }
.tnav { padding:var(--sp-20); border-right:1px solid var(--line); }
.tnav kbd { color:var(--faint); margin-right:var(--sp-8); font-size:var(--fs-caption); }
.keys { display:grid; grid-template-columns: auto 1fr; gap:var(--sp-4) var(--sp-14); font-size:var(--fs-small); }
.keys kbd { background:var(--sunken); border-radius:var(--r-sm); padding:0 var(--sp-6); font-family:inherit; }
.fold { color:var(--faint); font-size:var(--fs-meta); padding:var(--sp-8); }
@media (max-width: 860px) {
  .layout, .layout.with-panel, .tasks-layout { grid-template-columns: 1fr; }
  .tray, .tnav { border-right:0; border-bottom:1px solid var(--line); }
  .tnav { display:flex; flex-wrap:wrap; gap:var(--sp-4); padding:var(--sp-10); } .tnav button { width:auto; }
  .board { padding:var(--sp-16) var(--sp-16) var(--sp-64); }
  /* BG 10/14 on his phone: Shut down "did nothing" because the panel opened below the whole day. On one column it comes first. */
  .panel { border-left:0; border-top:1px solid var(--line); order:-1; border-bottom:1px solid var(--line); }
  .week { grid-template-columns: 1fr; }
  .top { padding:var(--sp-10) var(--sp-14); gap:var(--sp-10); flex-wrap:wrap; }
  .shell { grid-template-columns: 1fr; }
  .appside { flex-direction:row; align-items:center; height:auto; position:static; overflow-x:auto; padding:var(--sp-8) var(--sp-10); border-right:0; border-bottom:1px solid var(--line); }
  .appside .brand { padding:0 var(--sp-8) 0 var(--sp-4); white-space:nowrap; }
  .appside .capbtn { margin:0 var(--sp-4); white-space:nowrap; }
  .appside .sp { display:none; }
  .appnav { width:auto; white-space:nowrap; }
  .menu { right:10px; }
  .views { gap:var(--sp-12); overflow-x:auto; }
  .layout > .board { order:-1; }
  .layout > .tray { border-top:1px solid var(--line); border-bottom:0; }
  .overlay { padding:6vh var(--sp-10) 0; }
}
.sheet { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); }
.sheet .btn { padding:var(--sp-12); font-size:var(--fs-body); }
.touch kbd, .touch .keyhint { display:none; }
.touch .row { padding-top:var(--sp-10); padding-bottom:var(--sp-10); }
.touch .chk { width:26px; height:26px; }

/* ---- phase 2 ---- */
.home { color:var(--soft); font-size:var(--fs-meta); white-space:nowrap; max-width:160px; overflow:hidden; text-overflow:ellipsis; }
.amber, .head h1 .amber { color:var(--amber); }
.evening { margin-top:var(--sp-16); opacity:.85; }
.life-layout { display:grid; grid-template-columns: 280px minmax(0,1fr); min-height: calc(100vh - 56px); }
/* Notes (capture/1): the list on the left, the note on the right; the Trash at the bottom of the list */
.notes-layout { display:grid; grid-template-columns: 300px minmax(0,1fr); min-height: calc(100vh - 56px); }
.nnav { display:flex; flex-direction:column; gap:var(--sp-10); border-right:1px solid var(--line); padding:var(--sp-16) var(--sp-14); background:var(--side); }
.nnav .nhead { display:flex; justify-content:space-between; align-items:center; gap:var(--sp-8); }
.nnav .nhead h3.sec { margin:0; border:0; padding:0; gap:var(--sp-6); }
.nlist { flex:1; overflow:auto; }
.nrow { cursor:pointer; }
.nfoot { display:flex; align-items:center; gap:var(--sp-10); margin-top:var(--sp-16); }
.jday { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-8); border-top:1px solid var(--line); padding-top:var(--sp-10); }
.jgroup { color:var(--soft); font-size:var(--fs-meta); font-weight:600; padding:var(--sp-8) var(--sp-8) var(--sp-2); }
.jmeta select { font-size:var(--fs-meta); padding:var(--sp-2) var(--sp-6); }
.jrow { display:flex; justify-content:space-between; align-items:center; padding:var(--sp-6) 0; border-bottom:1px solid var(--line); }
.attach { margin-top:var(--sp-16); }
.attach:empty { display:none; }
.nmain.dropping { outline:2px dashed var(--soft); outline-offset:-8px; }
/* advanced/writing/4: the note's header, its title and the clock of its versions */
.editor .ehead { display:flex; align-items:center; gap:var(--sp-8); }
.editor .ehead .etitle { flex:1; min-width:0; }
/* advanced/writing/3: the note's comments, a right pane beside it (below it on a narrow screen) */
.nwithpane.on { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:var(--sp-24); align-items:start; }
.nwithpane .cpane { position:sticky; top:var(--sp-16); }
@media (max-width: 1100px) { .nwithpane.on { grid-template-columns:minmax(0,1fr); } .nwithpane .cpane { position:static; } }
.pfields { display:grid; grid-template-columns:120px minmax(0,1fr); gap:var(--sp-8) var(--sp-12); align-items:center; }
.pfields label { color:var(--soft); font-size:var(--fs-meta); }
.pfields textarea { min-height:120px; resize:vertical; }
/* Calendar (time/1) */
.cal .rowbtns .chips { margin:0; min-height:0; }
.callegend { display:flex; flex-wrap:wrap; gap:var(--sp-14); margin:var(--sp-8) 0 var(--sp-12); color:var(--soft); font-size:var(--fs-meta); }
.calkey { display:inline-flex; align-items:center; gap:var(--sp-6); }
.calgrid { display:grid; grid-template-columns:52px repeat(var(--cols), minmax(0,1fr)); border-top:1px solid var(--line); }
.calday { padding:var(--sp-6) var(--sp-4); font-size:var(--fs-meta); font-weight:600; border-left:1px solid var(--line); }
.calday.today { text-decoration:underline; text-underline-offset:3px; }
.calall { min-height:var(--sp-10); padding:var(--sp-2); border-left:1px solid var(--line); border-bottom:1px solid var(--line); }
.calhourpad { border-bottom:1px solid var(--line); }
.calhours { color:var(--faint); font-size:var(--fs-label); text-align:right; padding-right:var(--sp-6); }
.calhour { border-top:1px solid transparent; transform:translateY(calc(-1 * var(--sp-6))); }
.calcol { position:relative; border-left:1px solid var(--line); background-image:linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size:100% 44px; }
.calcol.today { background-color:var(--hover); }
.nowline { position:absolute; left:0; right:0; height:2px; background:var(--red); z-index:3; }
.evtimes { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--sp-8); }
.evtimes input { width:100%; }
.jevents:empty { display:none; }
.jev { display:flex; align-items:center; gap:var(--sp-8); padding:var(--sp-4) var(--sp-8); border-left:3px solid var(--line-strong); margin-bottom:var(--sp-4); }
.jev .etime { flex:none; width:64px; color:var(--soft); font-size:var(--fs-meta); }
.jev .t { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.callinkadd { display:grid; grid-template-columns:1fr 2fr auto; gap:var(--sp-6); margin:var(--sp-8) 0 var(--sp-4); }
.chead .segswitch { margin-left:var(--sp-8); }
#arules .flh { margin:var(--sp-14) 0 var(--sp-4); font-size:var(--fs-meta); }
#arules .jrow.locked { color:var(--soft); }
.calwrap.with-pane { display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:var(--sp-16); align-items:start; }
.calpane .caladd { margin-top:var(--sp-10); display:grid; gap:var(--sp-6); }
.calpane .caladd summary { cursor:pointer; }
@media (max-width: 860px) { .calwrap.with-pane { grid-template-columns:minmax(0,1fr); } }
.gapzone { border-left:2px dashed var(--line); margin:var(--sp-4) 0; padding:var(--sp-2) 0 var(--sp-2) var(--sp-10); min-height:var(--sp-24); }
.gapzone.quiet-gap { min-height:var(--sp-8); border-left-color:transparent; }
.gaphead { display:flex; gap:var(--sp-10); color:var(--faint); font-size:var(--fs-caption); padding:var(--sp-2) 0; }
.gaphead .over { color:var(--red); font-weight:600; }
.views .lens { display:inline-flex; gap:var(--sp-8); align-items:center; }
.views .lens button { border-bottom:0; padding:var(--sp-4) var(--sp-10); }
.views .lens .chips { margin:0; min-height:0; }
.routines { display:flex; flex-wrap:wrap; gap:var(--sp-8); align-items:center; margin:var(--sp-10) 0; }
.routines .tpladd { display:inline-flex; gap:var(--sp-6); align-items:center; }
.routines .tpladd[open] { display:flex; }
.routines .tpladd input { width:auto; max-width:180px; padding:var(--sp-4) var(--sp-8); }
.calcol { touch-action:none; cursor:crosshair; }
@media (max-width: 860px) { .notes-layout { grid-template-columns: minmax(0,1fr); } .nnav { border-right:0; border-bottom:1px solid var(--line); } }
.lnav { border-right:1px solid var(--line); padding:var(--sp-16) var(--sp-14) var(--sp-40); background:var(--side); }
.lchips { display:flex; gap:var(--sp-6); align-items:center; flex-wrap:wrap; margin-bottom:var(--sp-8); }
.lchips input { flex:1; min-width:80px; padding:var(--sp-4) var(--sp-8); font-size:var(--fs-meta); }
.lgh { display:block; width:100%; text-align:left; font-weight:700; font-size:var(--fs-meta); padding:var(--sp-10) var(--sp-4) var(--sp-4); }
.look { display:flex; justify-content:space-between; gap:var(--sp-12); align-items:center; padding:var(--sp-8) 0; border-bottom:1px solid var(--line-soft); }
.crow { display:flex; justify-content:space-between; gap:var(--sp-12); padding:var(--sp-6) var(--sp-8); border-radius:var(--r-md); cursor:pointer; }

.cgoal { margin-bottom:var(--sp-8); } .cgoal .crow:not(:first-child) { padding-left:var(--sp-20); }
.hw { font-weight:600; font-size:var(--fs-meta); }
.hw-steady { color:var(--soft); } .hw-drifting { color:var(--amber); } .hw-rotting { color:var(--rust); }
.habit-row { display:flex; justify-content:space-between; gap:var(--sp-12); align-items:center; padding:var(--sp-6) 0; }
.lamps { display:inline-flex; gap:var(--sp-4); }
.lamp { width:11px; height:11px; border-radius:var(--r-round); border:1.5px solid var(--line-strong); display:inline-block; }
.lamp.on { background:var(--ink); border-color:var(--ink); }
.bal { display:grid; grid-template-columns: 1fr 120px 24px; gap:var(--sp-10); align-items:center; padding:var(--sp-4) 0; }
.bar { background:var(--line-soft); height:6px; border-radius:var(--r-xs); overflow:hidden; } .bar i { display:block; height:100%; background:var(--bar-fill); }
.chain { color:var(--soft); margin:var(--sp-4) 0 var(--sp-12); } .chain a, .look a, .f a { color:var(--ink); text-decoration:underline; text-decoration-color:var(--line-strong); cursor:pointer; }
.titlein { font-size:var(--fs-title); font-weight:600; border:0; border-bottom:1px solid transparent; padding:var(--sp-2) 0; width:100%; }

.flds { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:var(--sp-4) var(--sp-16); margin-top:var(--sp-12); }
.fld { display:block; font-size:var(--fs-meta); color:var(--soft); } .fld input, .fld select { width:100%; margin-top:var(--sp-2); color:var(--ink); font-size:var(--fs-small); }
.think { width:100%; line-height:1.5; }
.radio { display:block; padding:var(--sp-4) 0; font-size:var(--fs-small); }
@media (max-width: 860px) { .life-layout { grid-template-columns: 1fr; } .lnav { border-right:0; border-bottom:1px solid var(--line); } .flds { grid-template-columns: 1fr; } }

/* ---- B8 chat ---- */
.chat { display:grid; grid-template-columns: minmax(0,1fr); height: calc(100vh - 56px); height: calc(100dvh - 56px); }
.chat.with-list { grid-template-columns: 260px minmax(0,1fr); }
.chat:not(.with-list) .clist { display:none; }
.clist { border-right:1px solid var(--line); padding:var(--sp-16); overflow:auto; background:var(--side); display:flex; flex-direction:column; gap:var(--sp-4); }
.clist .btn { margin-bottom:var(--sp-10); }
.cmain { display:flex; flex-direction:column; min-height:0; }
.chead { display:flex; gap:var(--sp-14); align-items:center; padding:var(--sp-10) var(--sp-20); border-bottom:1px solid var(--line); }
.cthread { flex:1; overflow:auto; padding:var(--sp-20); max-width:760px; width:100%; margin:0 auto; }
.cm { margin:0 0 var(--sp-16); }
.cm.you { display:flex; justify-content:flex-end; }
.cm .bub { background:var(--sunken); padding:var(--sp-8) var(--sp-14); border-radius:var(--r-3xl); max-width:85%; }
.cm p { margin:0 0 var(--sp-8); } .cm p:last-child { margin-bottom:0; }
.cm code { background:var(--sunken); padding:0 var(--sp-4); border-radius:var(--r-sm); font-size:.92em; }
.cnote { color:var(--faint); font-size:var(--fs-meta); } .cnote.err { color:var(--warn); }
.steps { font-size:var(--fs-meta); color:var(--soft); margin-bottom:var(--sp-6); }
.steps > summary { cursor:pointer; }
.steps ol { margin:var(--sp-6) 0 0 var(--sp-16); padding:0; }
.steps li.st-error > details > summary { color:var(--warn); }
.steps pre { white-space:pre-wrap; max-height:220px; overflow:auto; background:var(--sunken); padding:var(--sp-8); border-radius:var(--r-md); font-size:var(--fs-caption); }
.ccomp { display:flex; gap:var(--sp-8); padding:var(--sp-12) var(--sp-20) calc(var(--sp-12) + env(safe-area-inset-bottom)); border-top:1px solid var(--line); max-width:760px; width:100%; margin:0 auto; }
.ccomp textarea { flex:1; resize:none; font:inherit; font-size:var(--fs-heading); padding:var(--sp-8) var(--sp-10); border:1px solid var(--line); border-radius:var(--r-lg); }
@media (max-width: 860px) {
  .chat.with-list { grid-template-columns: 1fr; }
  .chat.with-list .cmain { display:none; }
  .clist { border-right:0; }
  .cthread { padding:var(--sp-14); }
}
.ccard { border:1px solid var(--line); border-left:3px solid var(--line-strong); border-radius:var(--r-lg); padding:var(--sp-10) var(--sp-12); margin:var(--sp-10) 0; background:var(--surface); }
.ccard.dismissed, .ccard.undone { opacity:.6; }
.ccard ul { margin:var(--sp-6) 0 var(--sp-8) var(--sp-16); padding:0; font-size:var(--fs-small); color:var(--soft); }
.ccb { display:flex; gap:var(--sp-12); align-items:center; }
.cundo { display:flex; gap:var(--sp-12); align-items:center; font-size:var(--fs-meta); color:var(--soft); margin-top:var(--sp-6); }
.askbox { flex:1; max-width:340px; }
.askbox input { width:100%; padding:var(--sp-6) var(--sp-10); border:1px solid var(--line); border-radius:var(--r-lg); font:inherit; font-size:var(--fs-small); }
.cabout { font-size:var(--fs-caption); color:var(--soft); margin-top:var(--sp-4); }
.cm a[data-c=goto] { color:var(--ink); text-decoration:underline; }
@media (max-width: 860px) { .askbox { order:5; flex-basis:100%; max-width:none; } .askbox input { font-size:var(--fs-heading); } }

/* ---- B15 voice ---- */
.mic { flex:none; width:38px; height:38px; border-radius:var(--r-round); border:1px solid var(--line); background:var(--surface); color:var(--soft); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.mic.on { background:var(--red); border-color:var(--red); color:var(--on-accent); animation: micpulse 1.2s ease-in-out infinite; }
@keyframes micpulse { 50% { box-shadow:0 0 0 6px var(--red-ring); } }
.askbox { display:flex; gap:var(--sp-6); align-items:center; }
.askbox .mic { width:32px; height:32px; }
.withmic { display:flex; gap:var(--sp-8); align-items:center; } .withmic input { flex:1; }
.ccomp { align-items:flex-end; }
#callpill { position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); width:min(360px, calc(100vw - 32px)); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-3xl); padding:var(--sp-10) var(--sp-12); z-index:30; }
.cpbar { display:flex; gap:var(--sp-8); align-items:center; }
.cpbar .sp { flex:1; }
.cpdot { width:10px; height:10px; border-radius:var(--r-round); background:var(--line-strong); }
.cpdot.listening { background:var(--ink); } .cpdot.speaking { background:var(--blue); animation: micpulse 1s infinite; } .cpdot.thinking { background:var(--gold); animation: micpulse 1s infinite; }
.cplines { margin-top:var(--sp-8); font-size:var(--fs-small); max-height:30vh; overflow:auto; }
.cplines .cl { margin:var(--sp-4) 0; } .cplines .cl.you { color:var(--soft); text-align:right; }
.callbtn { display:inline-flex; gap:var(--sp-6); align-items:center; }
.gacct { border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-10) var(--sp-12); margin:var(--sp-12) 0; }
.gsw { display:block; margin:var(--sp-6) 0; font-size:var(--fs-small); }
.ok { color:var(--ink); font-weight:600; } .warn { color:var(--warn); font-weight:600; }
.gpend { border-left:3px solid var(--gold); padding:var(--sp-6) var(--sp-10); margin:var(--sp-8) 0; background:var(--gold-bg); border-radius:var(--r-md); }
.gnote { background:var(--note-bg); border-bottom:1px solid var(--note-line); padding:var(--sp-8) var(--sp-20); font-size:var(--fs-small); }

/* ---- phase 3: live cards (task, hand-over, event), where an answer came from, the journal ---- */
.cfrom { font-size:var(--fs-caption); color:var(--faint); margin-bottom:var(--sp-4); }
.tcard { display:flex; justify-content:space-between; gap:var(--sp-10); align-items:center; border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-8) var(--sp-12); margin:var(--sp-6) 0; background:var(--surface); }
.tcard label { display:flex; gap:var(--sp-10); align-items:center; cursor:pointer; min-width:0; }
.tcard input { width:20px; height:20px; accent-color:var(--ink); flex:none; }
.tcard .tt { overflow:hidden; text-overflow:ellipsis; }
.tcard.done .tt { text-decoration:line-through; color:var(--faint); }
.tcard .quiet { font-size:var(--fs-meta); white-space:nowrap; }
.jcard { border:1px solid var(--line); border-left:3px solid var(--violet); border-radius:var(--r-lg); padding:var(--sp-10) var(--sp-12); margin:var(--sp-8) 0; background:var(--surface); font-size:var(--fs-small); }
.jcard .quiet { font-size:var(--fs-meta); }
.jst { display:flex; gap:var(--sp-8); align-items:center; margin-top:var(--sp-4); font-size:var(--fs-meta); }
.jdot { width:8px; height:8px; border-radius:var(--r-round); background:var(--faint); }
.jcard.st-working .jdot { background:var(--violet); animation: micpulse 1.2s ease-in-out infinite; }
.jcard.st-done .jdot { background:var(--soft); }
.jcard.st-error .jdot { background:var(--warn); }
.ecard { border:1px solid var(--line); border-left:3px solid var(--steel); border-radius:var(--r-lg); padding:var(--sp-6) var(--sp-12); margin:var(--sp-6) 0; font-size:var(--fs-small); background:var(--surface); }
.ecard .et { color:var(--soft); font-variant-numeric:tabular-nums; margin-right:var(--sp-6); }
.jrow { border-bottom:1px solid var(--line); padding:var(--sp-10) 0; }
.jrow .jk { font-size:var(--fs-caption); color:var(--soft); }
.jrow.corr .jk { color:var(--warn); }
.jrow .jb { display:flex; gap:var(--sp-12); margin-top:var(--sp-4); font-size:var(--fs-meta); }
.jtabs { display:flex; gap:var(--sp-6); margin:var(--sp-6) 0 var(--sp-10); }
/* The Design library page (foundations/8) */
.lib-h { font-size:var(--fs-heading); margin:var(--sp-32) 0 0; }
/* advanced/design-library/1: the check line on top of the Library, a word and a mark; the Token table */
.lib-check { margin:var(--sp-16) 0 0; padding:var(--sp-8) var(--sp-12); border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); }
.lib-check.bad { border-color:var(--red); }
.lib-check ul { margin:var(--sp-6) 0 0; padding-left:var(--sp-16); font-size:var(--fs-meta); }
.lib-toktable { width:100%; border-collapse:collapse; font-size:var(--fs-meta); }
.lib-toktable th { text-align:left; color:var(--soft); font-weight:600; padding:var(--sp-4) var(--sp-8); border-bottom:1px solid var(--line); }
.lib-toktable td { padding:var(--sp-4) var(--sp-8); border-bottom:1px solid var(--line-soft); vertical-align:top; }
.lib-toktable td.v { font-variant-numeric:tabular-nums; white-space:nowrap; }
.lib-toktable .lib-dot { display:inline-block; width:12px; height:12px; margin-right:var(--sp-6); border:1px solid var(--line); border-radius:var(--r-round); vertical-align:-1px; }
/* advanced/design-library/2: the accent rule, its example and counter-example, and the views counted */
.lib-rule { margin:var(--sp-8) 0; }
.lib-examples { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:var(--sp-12); margin:var(--sp-8) 0 var(--sp-12); }
.lib-ex { display:flex; flex-direction:column; gap:var(--sp-6); padding:var(--sp-10) var(--sp-12); border:1px solid var(--line); border-radius:var(--r-md); }
.lib-accent tr.bad td { font-weight:600; }
/* advanced/design-library/3: the state strip under each component, each state forced with its twin class */
.lib-states { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:var(--sp-8); margin-top:var(--sp-10); padding-top:var(--sp-10); border-top:1px dashed var(--line); }
.lib-states:has(> .lib-say:only-child) { grid-template-columns:minmax(0, 1fr); }
.lib-state { display:flex; flex-direction:column; gap:var(--sp-4); min-width:0; }
.lib-state input { width:100%; }
.lib-say { color:var(--soft); font-size:var(--fs-meta); }
/* advanced/design-library/5: the find box, where a piece is used, its markup to copy */
.lib-find { display:flex; align-items:center; gap:var(--sp-10); margin:var(--sp-10) 0; }
.lib-find .searchbox { max-width:420px; }
.lib-used { display:flex; flex-wrap:wrap; gap:var(--sp-6); margin-top:var(--sp-6); font-size:var(--fs-meta); }
.lib-code { margin-top:var(--sp-10); border:1px solid var(--line); border-radius:var(--r-md); background:var(--sunken); }
.lib-codehead { display:flex; align-items:center; justify-content:space-between; padding:var(--sp-4) var(--sp-8); border-bottom:1px solid var(--line); }
.lib-code pre { margin:0; padding:var(--sp-8) var(--sp-10); max-height:160px; overflow:auto; font-size:var(--fs-caption); white-space:pre-wrap; overflow-wrap:anywhere; }
.lib-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:var(--sp-12) var(--sp-16); margin:var(--sp-12) 0; }
.lib-tok { display:flex; gap:var(--sp-12); align-items:center; font-size:var(--fs-meta); }
.lib-tok.lib-wide { grid-column:1 / -1; justify-content:space-between; }
.lib-tok code { font-size:var(--fs-caption); }
.lib-sw { flex:none; width:32px; height:32px; border-radius:var(--r-md); border:1px solid var(--line); }
.lib-sp { flex:none; height:12px; background:var(--soft); border-radius:var(--r-xs); }
.lib-r { flex:none; width:44px; height:32px; border:1.5px solid var(--ink); }
.lib-comp { display:grid; grid-template-columns:200px minmax(0, 1fr); gap:var(--sp-16); padding:var(--sp-16) 0; border-top:1px solid var(--line); align-items:start; }
.lib-comp h4 { margin:0 0 var(--sp-4); font-size:var(--fs-small); }
.lib-cards { display:flex; gap:var(--sp-8); } .lib-cards .card { width:160px; }
.lib-row { display:flex; gap:var(--sp-8); align-items:center; }
.lib-dlg { width:auto; max-width:420px; }
.lib-side { width:240px; }
.ptabs { margin-bottom:var(--sp-16); } /* advanced/people/3: Page or Timeline, under the card */
.mail-layout { display:grid; grid-template-columns: minmax(0,520px) minmax(0,1fr); min-height: calc(100vh - 56px); } /* advanced/mail/5 */
.mail-layout .mlist { border-right:1px solid var(--line); padding:var(--sp-12); overflow:auto; }
.mail-layout .mread { padding:var(--sp-16) var(--sp-24); overflow:auto; }
.mread .mbody { white-space:pre-wrap; overflow-wrap:anywhere; }
@media (max-width: 860px) { .mail-layout { grid-template-columns: minmax(0,1fr); } }
.msender { display:flex; flex-wrap:wrap; gap:var(--sp-16); align-items:center; margin-bottom:var(--sp-8); } /* advanced/mail/10: who wrote it, beside the mail */
.msender .personcard { margin-bottom:0; cursor:pointer; }

/* advanced/health: the Health page's frame (its pieces are the dashboard kit, design/components.css) */
.hgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:var(--sp-12); }
.htrend { margin-bottom:var(--sp-16); }
.hfoot { margin:var(--sp-8) 0 var(--sp-16); }
.jrow.hjournal .status { margin-right:var(--sp-4); }

/* advanced/paperwork/4 and 5: the Money page's frame (its pieces are Split tabs, the Transaction row, the Category rule row and the Import report) */
.moneyfolder { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-12); margin-bottom:var(--sp-12); }
.moneyimports { display:flex; flex-direction:column; gap:var(--sp-8); }
.moneyfocus { display:flex; flex-direction:column; gap:var(--sp-4); margin-bottom:var(--sp-8); }
.moneycats { display:grid; grid-template-columns:repeat(auto-fill, minmax(11rem, 1fr)); gap:var(--sp-12); margin-bottom:var(--sp-8); }
.moneycat { border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-10); }
.helperlog { margin-top:var(--sp-8); max-height:18rem; overflow:auto; }
.moneycat .mchead { display:flex; justify-content:space-between; align-items:center; gap:var(--sp-8); margin-bottom:var(--sp-6); }

/* advanced/paperwork: the Documents page's frame (its pieces are the Document card, the Field row and the Scan inbox strip) */
.docdrop { padding:var(--sp-16); margin-bottom:var(--sp-12); border:1px dashed var(--line-strong); border-radius:var(--r-lg); text-align:center; color:var(--soft); font-size:var(--fs-small); }
.doclist { display:flex; flex-direction:column; }
.docpage .docfile { margin:var(--sp-10) 0; }
.doclinks { display:flex; flex-wrap:wrap; gap:var(--sp-8); margin-bottom:var(--sp-8); font-size:var(--fs-small); }
.doclink { border:1px solid var(--line); border-radius:var(--r-pill); padding:0 var(--sp-8); }
.doctext pre { white-space:pre-wrap; font-size:var(--fs-meta); max-height:24rem; overflow:auto; }
.nsdocs .entry { cursor:pointer; }

/* advanced/desktop/1: the Desktop page, and the desktop app's capture window */
.dkrow { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:var(--sp-16); padding:var(--sp-10) 0; border-bottom:1px solid var(--line); }
.dkwhat { display:flex; flex-direction:column; gap:var(--sp-2); min-width:0; }
.dkwhat .f { font-size:var(--fs-meta); }
.dkpage h3.sec { margin-top:var(--sp-24); }
.capwin { margin:0; padding:var(--sp-8); background:transparent; overflow:hidden; }
.capwin .floatwin { width:auto; }
.capwin .capbox textarea { resize:none; }
/* advanced/desktop/3: a recording's page */
.recgrid { display:grid; grid-template-columns:minmax(0, 3fr) minmax(260px, 2fr); gap:var(--sp-24); align-items:start; margin-top:var(--sp-12); }
.recplayer { width:100%; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--sunken); }
.recchapters, .rectranscript { display:flex; flex-direction:column; }
.recchapter, .recline { text-align:left; background:transparent; border:0; border-bottom:1px solid var(--line-soft); padding:var(--sp-6) var(--sp-4); color:var(--ink); font:inherit; cursor:pointer; }
.recchapter:hover, .recline:hover { background:var(--hover); }
.recchapter .f, .recline .f { font-variant-numeric:tabular-nums; margin-right:var(--sp-8); }
.recline.hit { background:var(--note-bg); border-left:3px solid var(--ink); }
.recside { display:flex; flex-direction:column; gap:var(--sp-8); max-height:72vh; }
.recsearch { width:100%; }
.rectranscript { overflow:auto; }
/* advanced/desktop/4: the Stop pinned over the app frame while a session runs; the pill's own window */
.stoppin { position:fixed; top:var(--sp-12); left:50%; transform:translateX(-50%); z-index:40; }
.handsteps { display:flex; flex-direction:column; }
.pillwin { margin:0; padding:var(--sp-4); background:transparent; overflow:hidden; }
/* advanced/desktop/1: the call's own window over every app (call-window.html), the Call widget alone on a clear background */
.callwin { margin:0; padding:var(--sp-8); background:transparent; overflow:hidden; }
.callwin #callwidget { margin:0; }
/* advanced/everywhere/5: the web app's sign-in, its line for thinking and the foot of its sidebar */
.websignin { max-width:380px; margin:12vh auto 0; padding:0 var(--sp-20); }
.websignin .brand { display:flex; align-items:center; gap:var(--sp-8); margin-bottom:var(--sp-24); }
.websignin label { display:block; margin:var(--sp-12) 0 var(--sp-4); color:var(--soft); font-size:var(--fs-small); }
.websignin input[type="email"] { width:100%; }
.websignin .btns { margin-top:var(--sp-16); }
.webthink { flex:1; max-width:340px; color:var(--faint); font-size:var(--fs-small); }
@media (max-width: 860px) { .webthink { order:5; flex-basis:100%; max-width:none; } } /* on a phone, its own line under the buttons, as the ask box */
.webfoot { display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-4); padding:var(--sp-6) var(--sp-8) 0; font-size:var(--fs-meta); }