/* The design system of record.
 *
 * It began as a copy of prototype.html's, and the real build has long since
 * moved past what the prototype covers — blocks, the shop, the board. So this
 * file is the record now, and the prototype is kept for the BEHAVIOUR it spells
 * out rather than the colours.
 *
 * The palette is brown and blue, and it is a deliberate sibling of Post Werx's
 * own tokens: Koached sits under the same software umbrella, and Post Werx
 * already calls its brown "bark" and its blue "azure". Same names here, so the
 * relationship is visible in the code rather than only on the screen.
 *
 * Every pair below was measured rather than eyeballed. The worst contrast in
 * light mode is 4.06:1 (faint text, which is never load-bearing) and everything
 * carrying meaning is 4.5:1 or better in both modes. Powder blue is the one
 * colour that does NOT flip between modes, so the text on it does not either —
 * hence --on-powder, which is dark in both.
 *
 * Brand, action and alert are 0.23+ apart in oklab, so no two of them read as
 * the same pill at a glance. That was the mistake to avoid: an amber alert
 * beside a brown brand is two browns.
 */

:root{
  --paper:#F8F5F0; --surface:#FFFFFF; --sunk:#F1EDE7;
  --ink:#241C17; --ink-soft:#574C44; --ink-faint:#887C72;
  --rule:#E6DFD7; --wire:#D4CBC1; --chip:#EAE3DA;
  --bark:#3E2821; --bark-lift:#5A3D32; --bark-wash:#EDE4DE; --on-bark:#FDF8F3;
  /* The brand colour as TEXT, on paper rather than on itself. A panel can be
     any colour because its ink is measured against it; a label on the page
     cannot, so this is the same colour walked until it reads. */
  --bark-ink:#3E2821;
  /* How tall the branded panel is. The coach sets it per business (0040);
     this is what it falls back to before her answer has arrived. */
  --phead-h:238px;
  /* The one face in here that is not Nunito, and the reason is real italics.
     fonts.css carries four upright weights and no italic at all, so every
     font-style:italic in this app was being SLANTED by the browser — a faked
     letterform, and it shows most at the size a quotation wants to be read at.
     These are serifs that ship with the operating system, so there is nothing to
     download and nothing to wait for, and each of them has a drawn italic. */
  --quote:"Iowan Old Style", Charter, Georgia, "Noto Serif", "Droid Serif", serif;
  /* What the phone itself puts over the top of the screen: nothing in a
     browser tab, the status bar in a standalone app, and the bezel's island
     in the desktop frame. The picture starts below it. */
  --chrome-top:env(safe-area-inset-top, 0px);
  --azure:#3F6E96; --azure-ink:#2F5C82; --azure-wash:#E4EDF5; --on-azure:#F5FAFD;
  --powder:#A2BCD6; --on-powder:#1A1412;
  --signal:#B4470A; --signal-wash:#FBE8D6;
  --shadow:0 1px 2px rgba(36,28,23,.05), 0 8px 24px -14px rgba(36,28,23,.28);
  --devh:clamp(540px, calc(100vh - 176px), 860px);
  /* One typeface. --display and --body were a serif and a system sans; they are
     both Nunito now, and differ by weight rather than by family. */
  --wordmark:Nunito,ui-rounded,"Segoe UI",system-ui,sans-serif;
  --display:Nunito,ui-rounded,"Segoe UI",system-ui,sans-serif;
  --body:Nunito,ui-rounded,"Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#15100D; --surface:#1E1814; --sunk:#191410;
    --ink:#F1EAE3; --ink-soft:#B0A296; --ink-faint:#82756A;
    --rule:#2E2620; --wire:#3B322B; --chip:#292118;
    --bark:#DFC3AC; --bark-lift:#C9A488; --bark-wash:#2C1F19; --on-bark:#191210;
    --bark-ink:#DFC3AC;
    --azure:#8FB8D8; --azure-ink:#A9C9E2; --azure-wash:#1A2836; --on-azure:#0E1620;
    --powder:#A2BCD6; --on-powder:#1A1412;
    --signal:#E89A4A; --signal-wash:#33230F;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --paper:#15100D; --surface:#1E1814; --sunk:#191410;
  --ink:#F1EAE3; --ink-soft:#B0A296; --ink-faint:#82756A;
  --rule:#2E2620; --wire:#3B322B; --chip:#292118;
  --bark:#DFC3AC; --bark-lift:#C9A488; --bark-wash:#2C1F19; --on-bark:#191210;
  --azure:#8FB8D8; --azure-ink:#A9C9E2; --azure-wash:#1A2836; --on-azure:#0E1620;
  --powder:#A2BCD6; --on-powder:#1A1412;
  --signal:#E89A4A; --signal-wash:#33230F;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -14px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--body);
     font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--azure); outline-offset:2px; border-radius:3px}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}

/* ── the mark ──────────────────────────────────────────────────────────────
 *
 * Two forms of one idea, defined once.
 *
 *   .wm    the word. "koached", lowercase, with the k in blue.
 *   .kmark the square. The same blue k in a brown rounded square, for the
 *          places a word does not fit: a favicon, an app icon, an avatar.
 *
 * The k is the only coloured letter, which is what makes the word a mark rather
 * than a heading — that and the tight tracking. On a brown ground the k goes
 * powder blue, because powder is the one colour that does not flip between
 * light and dark, so it is right against brown in both.
 */
.wm{font-family:var(--wordmark); font-weight:900; letter-spacing:-.045em;
    color:var(--bark); line-height:1; display:inline-block}
.wm .k{color:var(--azure)}
.wm.on-dark{color:var(--on-bark)}
.wm.on-dark .k{color:var(--powder)}

/* The square is /mark.svg, used as an image rather than redrawn in CSS: a
   favicon is rendered without our stylesheet and cannot be relied on to have
   Nunito, so its k is a path — and having a second, typeset k for the same
   mark would mean two logos that nearly match. This class only sizes it. */
.kmark{display:block; flex:none; width:2.1em; height:2.1em}

.app{max-width:1360px; margin:0 auto; padding:0 clamp(14px,3vw,30px) 60px}

/* ── top bar ─────────────────────────────────────────── */
.topbar{display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px;
        padding:16px 0 14px; border-bottom:1px solid var(--rule)}
.brand{display:flex; align-items:center; gap:9px; margin-right:auto}
.brand .nm{font-size:23px}
.brand .tag{font-family:var(--mono); font-size:9.5px; letter-spacing:.15em; text-transform:uppercase;
            color:var(--ink-faint); border-left:1px solid var(--rule); padding-left:9px; margin-left:2px}

.seg{display:flex; background:var(--sunk); border:1px solid var(--rule); border-radius:6px; padding:3px; gap:2px}
.seg button{background:none; border:0; cursor:pointer; font-size:12.5px; font-weight:600;
            padding:6px 11px; border-radius:4px; color:var(--ink-soft); white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--bark); color:var(--on-bark)}

.picker{display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10px;
        letter-spacing:.11em; text-transform:uppercase; color:var(--ink-faint)}
.picker select{background:var(--surface); border:1px solid var(--rule); border-radius:5px;
               padding:5px 8px; font-family:var(--body); font-size:12.5px; letter-spacing:0;
               text-transform:none; color:var(--ink)}
.ghost{background:none; border:1px solid var(--rule); border-radius:5px; padding:6px 10px;
       font-size:12.5px; color:var(--ink-soft); cursor:pointer}
.ghost:hover{border-color:var(--wire); color:var(--ink)}

/* ── context strip ───────────────────────────────────── */
.ctx{display:flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline;
     padding:11px 0 15px; font-size:13.5px; color:var(--ink-soft)}
.ctx b{color:var(--ink); font-weight:600}
.ctx .hint{font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
           color:var(--azure-ink)}

/* ── stage ───────────────────────────────────────────── */
.stage{display:grid; gap:20px; align-items:start}
.stage.split{grid-template-columns:minmax(0,1fr) 302px}
.stage.solo-phone{grid-template-columns:minmax(0,340px); justify-content:center}
@media (max-width:900px){ .stage.split{grid-template-columns:minmax(0,1fr)} }

.win{background:var(--surface); border:1px solid var(--rule); border-radius:8px;
     box-shadow:var(--shadow); overflow:hidden; height:var(--devh);
     display:flex; flex-direction:column; min-height:0}
.winbar{display:flex; align-items:center; gap:7px; padding:9px 13px; flex:none;
        border-bottom:1px solid var(--rule); background:var(--sunk)}
.winbar i{width:8px; height:8px; border-radius:50%; background:var(--wire); display:block}
.winbar .t{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
           color:var(--ink-faint); margin-left:5px}
.winbar .who{margin-left:auto; font-size:12px; color:var(--ink-soft)}

.cols{display:grid; grid-template-columns:186px minmax(0,1fr); flex:1 1 0; min-height:0}
@media (max-width:640px){ .cols{grid-template-columns:1fr} }
.side{border-right:1px solid var(--rule); background:transparent; padding:18px 12px 18px 10px;
      display:flex; flex-direction:column; gap:1px; overflow-y:auto; min-height:0}
@media (max-width:640px){ .side{flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid var(--rule); padding:10px} }
.side button{display:flex; align-items:center; gap:10px; position:relative;
             background:none; border:0; text-align:left; cursor:pointer; font-size:13px;
             padding:7px 9px 7px 11px; border-radius:6px; color:var(--ink-soft); white-space:nowrap;
             transition:color .12s}
.side button svg{width:15px; height:15px; flex:none; opacity:.5; transition:opacity .12s}
.side button .lb{flex:1}
.side button:hover{color:var(--ink)}
.side button:hover svg{opacity:.8}
.side button[aria-current="true"]{color:var(--ink); font-weight:600}
.side button[aria-current="true"] svg{opacity:1; color:var(--bark)}
.side button[aria-current="true"]::before{content:""; position:absolute; left:0; top:8px; bottom:8px;
             width:2.5px; border-radius:99px; background:var(--bark)}
/* What is waiting, as a number you cannot miss. Filled rather than tinted: a
   pale pill beside a word reads as a label, and this is meant to read as "there
   is something here". A rounded square rather than a circle, because at two
   digits a circle has to stretch into a lozenge anyway. */
/* A demo is for looking at. Everything that would write is simply not there,
   which is kinder than a control that answers "the demo is read only". */
body.demo .btn, body.demo button[data-habit], body.demo textarea, body.demo input,
body.demo [data-send], body.demo [data-buy], body.demo #toYou,
/* The whole block, not its boxes one at a time: hiding the inputs on their own
   left a lone dropdown above a list nobody could add to. */
body.demo .addentry, body.demo .entry-x{display:none !important}
body.demo .tick{pointer-events:none}
/* The demo is shown inside a frame exactly one phone tall and it does not
   scroll, so the screen is one screen: the bar stays on it however long the
   day underneath happens to be. */
body.demo .device{height:100dvh; min-height:0; overflow:hidden}
body.demo .pscr{overflow:hidden; min-height:0;
  /* A day longer than the screen gets cut by the frame, so the cut is a fade
     rather than a card sliced in half. */
  mask-image:linear-gradient(to bottom, #000 calc(100% - 30px), transparent)}

.count{font-family:var(--mono); font-size:9.5px; font-weight:800; line-height:1;
       color:#fff; background:var(--signal); border-radius:6px; padding:3px 5px;
       min-width:16px; text-align:center; flex:none;
       box-shadow:0 1px 2px rgba(36,28,23,.25)}
.side .count{margin-left:auto}

/* On the tab bar it sits over the corner of the icon, the way a phone does it. */
.ptabs .count{position:absolute; top:3px; left:50%; margin-left:3px; padding:2px 4px;
              font-size:9px; border:2px solid var(--surface); border-radius:7px}
.ptabs .hub .count{top:-14px; margin-left:8px}
.side .grp{font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
           color:var(--ink-faint); padding:20px 11px 6px; opacity:.85}
.side .grp:first-child{padding-top:2px}

.pane{padding:24px 26px 40px; min-width:0; overflow-y:auto; min-height:0;
      overscroll-behavior:contain; scrollbar-gutter:stable}
.pane::-webkit-scrollbar,.side::-webkit-scrollbar{width:6px}
.pane::-webkit-scrollbar-thumb,.side::-webkit-scrollbar-thumb{background:var(--wire); border-radius:99px}
.pane-head{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:0 0 3px}
.pane h2{font-family:var(--display); font-weight:800; font-size:26px; letter-spacing:-.018em;
         margin:0; color:var(--ink); text-wrap:balance; line-height:1.15}
.pane .sub{font-size:12.5px; color:var(--ink-faint); margin:0 0 22px; letter-spacing:.005em}
.pane .sub b{color:var(--signal); font-weight:600}
.pane h3{font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
         font-weight:600; margin:30px 0 11px; color:var(--ink-faint);
         display:flex; align-items:center; gap:11px}
.pane h3::after{content:""; flex:1; height:1px; background:var(--rule)}
.pane h3:first-child{margin-top:0}
.pane p{margin:0 0 12px}
.note{font-size:12.5px; color:var(--ink-faint); line-height:1.5; margin:10px 0 0; max-width:62ch}

/* ── rows / lists ────────────────────────────────────── */
.rows{display:flex; flex-direction:column; gap:0; border-top:1px solid var(--rule)}
.row{display:flex; align-items:center; gap:12px; width:100%; text-align:left;
     padding:11px 10px; border:0; border-bottom:1px solid var(--rule); border-radius:0;
     background:none; cursor:pointer; font-size:13.5px; color:inherit; transition:background .1s}
.row:hover{background:var(--sunk)}
/* A row that is a button, with something beside it: the row stays the way in and
   the thing beside it is its own control, because a button cannot be inside a
   button and still be pressable on its own. */
.rowwrap{display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--rule)}
.rowwrap > .row{border-bottom:0; flex:1; min-width:0}
.rowwrap > .btn{flex:none; margin-right:8px}
.row.flat{cursor:default}
.row.flat:hover{background:none}
.av{width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center;
    position:relative; overflow:hidden; color:#fff; font-size:10.5px; font-weight:800; letter-spacing:.03em}
.av svg{position:absolute; inset:0; width:100%; height:100%}
.av span{position:relative; z-index:1; text-shadow:0 1px 2px rgba(0,0,0,.28)}
.nm{font-weight:600; flex:none; min-width:92px}
.dt{color:var(--ink-faint); flex:1; font-size:12.5px; min-width:0}
.pill{font-family:var(--mono); font-size:9.5px; letter-spacing:.07em; text-transform:uppercase;
      padding:3px 8px; border-radius:99px; white-space:nowrap; font-weight:800; flex:none}
.pill.late{background:var(--signal-wash); color:var(--signal); box-shadow:inset 0 0 0 1px var(--signal)}
.pill.slip{background:var(--signal-wash); color:var(--signal)}
.pill.ok{background:var(--azure-wash); color:var(--azure-ink)}
.pill.new{background:var(--chip); color:var(--ink-soft)}
.pill.calm{background:var(--chip); color:var(--ink-faint)}

/* streak */
.streak{display:grid; grid-template-columns:repeat(14,1fr); gap:3px; max-width:230px}
.streak i{aspect-ratio:1; border-radius:2px; background:var(--chip); display:block}
.streak i.full{background:var(--azure)}
.streak i.part{background:var(--azure); opacity:.42}
.streak i.miss{box-shadow:inset 0 0 0 1.5px var(--signal); background:transparent}

/* field/value list */
.fields{display:flex; flex-direction:column; gap:7px}
.field{display:flex; justify-content:space-between; align-items:center; gap:12px;
       border:1px solid var(--rule); border-radius:6px; padding:9px 12px; font-size:12.5px;
       color:var(--ink-faint); background:var(--surface)}
.field b{color:var(--ink); font-weight:600; font-size:13px}
.field .val{text-align:right; font-variant-numeric:tabular-nums}
.field.dash{border-style:dashed}
.field.col{flex-direction:column; align-items:stretch; gap:6px}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px;
     background:var(--azure); color:var(--on-azure); border:0; border-radius:6px;
     font-size:13px; font-weight:600; padding:9px 15px; cursor:pointer}
.btn:hover{background:var(--azure-ink)}
.btn.wine{background:var(--bark)} .btn.wine:hover{background:var(--bark-lift)}
.btn.line{background:none; color:var(--ink-soft); border:1px solid var(--rule)}
.btn.line:hover{background:var(--sunk); color:var(--ink)}
.btn.sm{font-size:12px; padding:6px 11px}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.btnrow{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}

.in{background:var(--surface); border:1px solid var(--rule); border-radius:5px;
    padding:7px 9px; font-size:13px; width:100%; min-width:0}
.in:hover{border-color:var(--wire)}
textarea.in{resize:vertical; min-height:62px; line-height:1.45}

table{border-collapse:collapse; width:100%; min-width:560px; font-size:13px}
.scroll{overflow-x:auto; border:1px solid var(--rule); border-radius:6px; background:var(--surface)}
th,td{text-align:left; padding:9px 12px; border-bottom:1px solid var(--rule); vertical-align:middle}
th{font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
   color:var(--ink-faint); font-weight:600; white-space:nowrap}
tr:last-child td{border-bottom:0}
td.num{font-variant-numeric:tabular-nums; text-align:right}
td b{font-weight:600}

body:not(.notes) .pane .callout, body:not(.notes) .pane .note{display:none}
body:not(.notes) .pscr .day:last-child{display:none}
.callout{border:1px solid var(--rule); border-left:3px solid var(--azure); background:var(--azure-wash);
         border-radius:0 6px 6px 0; padding:13px 15px; margin:16px 0; font-size:13px; line-height:1.5}
.callout.warn{border-left-color:var(--signal); background:var(--signal-wash)}
/* A nudge is her talking, not the app explaining itself, so it wears her colour
   rather than the functional blue. The blue is reserved for things the app is
   telling you about itself, which has to stay distinguishable. */
.callout.nudge{border-left-color:var(--bark); background:var(--bark-wash)}
.callout.nudge b{font-family:var(--display)}
.callout.nudge .btn{background:var(--bark); color:var(--on-bark)}
.callout.nudge .btn:hover{background:var(--bark-lift)}
.callout p{margin:0 0 8px} .callout p:last-child{margin:0}
.callout b{font-weight:600}

.tabs{display:flex; gap:4px; border-bottom:1px solid var(--rule); margin:0 0 16px; overflow-x:auto}
.tabs button{background:none; border:0; border-bottom:2px solid transparent; cursor:pointer;
             font-size:13px; font-weight:600; color:var(--ink-faint); padding:7px 11px; white-space:nowrap}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-pressed="true"]{color:var(--bark); border-bottom-color:var(--bark)}

/* builder */
.build{display:flex; flex-direction:column; gap:8px}
.brow{display:grid; grid-template-columns:1fr 132px auto; gap:8px; align-items:center;
      border:1px solid var(--rule); border-radius:6px; padding:8px 9px; background:var(--surface)}
@media (max-width:560px){ .brow{grid-template-columns:1fr auto} }
.brow .x{background:none; border:0; cursor:pointer; color:var(--ink-faint); font-size:15px;
         line-height:1; padding:4px 6px; border-radius:4px}
.brow .x:hover{background:var(--signal-wash); color:var(--signal)}

/* chat */
.thread{display:flex; flex-direction:column; gap:8px; max-height:320px; overflow-y:auto;
        padding:4px 2px 2px}
.msg{max-width:78%; padding:8px 11px; border-radius:11px; font-size:13px; line-height:1.45}
.msg .from{display:block; font-family:var(--mono); font-size:9px; letter-spacing:.09em;
           text-transform:uppercase; opacity:.62; margin-bottom:3px}
.msg.them{align-self:flex-start; background:var(--chip); color:var(--ink); border-bottom-left-radius:3px}
.msg.me{align-self:flex-end; background:var(--azure); color:var(--on-azure); border-bottom-right-radius:3px}
.compose{display:flex; gap:8px; margin-top:12px; align-items:center}
.compose.rec{background:var(--bark-wash); border:1px solid var(--bark); border-radius:7px; padding:7px 9px}
.recdot{width:9px; height:9px; border-radius:50%; background:var(--bark); flex:none; animation:pulse 1.1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.28}}
.rectime{font-family:var(--mono); font-size:12px; font-variant-numeric:tabular-nums; flex:1; color:var(--bark)}
.mic{flex:none; width:36px; padding:0; font-size:15px; line-height:1}
.voice{display:flex; align-items:center; gap:9px; min-width:158px}
.voice .play{width:26px; height:26px; border-radius:50%; border:0; cursor:pointer; flex:none;
             display:grid; place-items:center; font-size:10px; line-height:1}
.msg.me .voice .play{background:var(--on-azure); color:var(--azure)}
.msg.them .voice .play{background:var(--ink); color:var(--surface)}
.wave{flex:1; display:flex; align-items:center; gap:2px; height:22px; position:relative; overflow:hidden}
.wave i{flex:1; border-radius:1px; background:currentColor; opacity:.34; min-width:1px}
.wave .fill{position:absolute; inset:0 100% 0 0; background:currentColor; opacity:.2; border-radius:2px}
.wave.on .fill{animation:sweep linear forwards; inset:0 0 0 0}
@keyframes sweep{from{inset:0 100% 0 0}to{inset:0 0 0 0}}
.vdur{font-family:var(--mono); font-size:10px; opacity:.7; flex:none; font-variant-numeric:tabular-nums}
.vspeed{background:none; border:1px solid currentColor; opacity:.55; border-radius:99px; cursor:pointer;
        font-family:var(--mono); font-size:9px; padding:1px 5px; flex:none; color:inherit}
.vspeed:hover{opacity:1}
.cov{position:relative; overflow:hidden; border-radius:8px; display:block}
.cov svg{display:block; width:100%; height:100%}
.cov .lab{position:absolute; left:12px; right:12px; bottom:11px; color:#fff; font-weight:600;
          font-size:14px; line-height:1.25; text-shadow:0 1px 6px rgba(0,0,0,.4); z-index:1}
.cov .tag{position:absolute; top:10px; left:11px; z-index:1; font-family:var(--mono); font-size:8.5px;
          letter-spacing:.1em; text-transform:uppercase; font-weight:800; color:#fff;
          background:rgba(0,0,0,.32); backdrop-filter:blur(3px); border-radius:99px; padding:3px 8px}
.thumb{width:46px; height:46px; border-radius:7px; overflow:hidden; flex:none; position:relative}
.thumb svg{width:100%; height:100%; display:block}
.thumb .pl{position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:13px;
           text-shadow:0 1px 4px rgba(0,0,0,.4)}
.doc{display:flex; gap:12px; align-items:flex-start; padding:12px 2px; border-bottom:1px solid var(--rule);
     width:100%; text-align:left; background:none; border-left:0; border-right:0; border-top:0;
     cursor:pointer; color:inherit}
.doc:hover{background:var(--sunk)}
.doc .pg{width:34px; height:44px; border-radius:3px; background:var(--surface); border:1px solid var(--wire);
         flex:none; position:relative; overflow:hidden; box-shadow:1px 1px 0 var(--rule)}
.doc .pg::before{content:""; position:absolute; left:5px; right:5px; top:7px; height:2px; background:var(--wire)}
.doc .pg::after{content:""; position:absolute; left:5px; right:9px; top:13px; bottom:8px;
                background:repeating-linear-gradient(var(--rule) 0 1.5px, transparent 1.5px 5px)}
.doc .pg.signed{border-color:var(--azure)}
.doc .pg.signed span{position:absolute; inset:0; display:grid; place-items:center; z-index:1;
                     color:var(--azure); font-size:15px}
.doc .dd{flex:1; min-width:0}
.doc .dd b{font-size:13px; font-weight:600; display:block}
.doc .dd em{font-style:normal; font-size:11.5px; color:var(--ink-faint); display:block; margin-top:3px}
.mergechip{display:inline-block; background:var(--azure-wash); color:var(--azure-ink); border-radius:4px;
           padding:1px 5px; font-family:var(--mono); font-size:11px; font-weight:600}
.paper{border:1px solid var(--rule); border-radius:8px; background:var(--surface); padding:22px 24px;
       font-size:13.5px; line-height:1.7; margin-bottom:14px}
.paper h4{font-family:var(--display); font-size:19px; font-weight:800; margin:0 0 4px; letter-spacing:-.015em}
.paper .meta2{font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
              color:var(--ink-faint); margin:0 0 16px}
.paper p{margin:0 0 11px}
.sigline{border-top:1px solid var(--rule); margin-top:18px; padding-top:14px; display:flex;
         align-items:center; gap:12px}
.sigline .sg{font-family:"Snell Roundhand","Apple Chancery",cursive; font-size:23px; color:var(--bark);
             line-height:1}
.blogcard{display:flex; gap:13px; align-items:flex-start; padding:11px 2px; border-bottom:1px solid var(--rule);
          width:100%; text-align:left; background:none; border-left:0; border-right:0; border-top:0;
          cursor:pointer; color:inherit}
.blogcard:hover{background:var(--sunk)}
.blogcard .thumb{width:64px; height:44px; border-radius:6px}
.stat3{display:flex; gap:16px; flex:none; font-variant-numeric:tabular-nums}
.stat3 span{font-family:var(--mono); font-size:9.5px; color:var(--ink-faint); text-align:right}
.stat3 span b{display:block; font-size:13px; color:var(--ink); font-weight:600}
.chips2{display:flex; gap:6px; flex-wrap:wrap; margin:0 0 16px}
.chips2 button{background:none; border:1px solid var(--rule); border-radius:99px; cursor:pointer;
               font-size:11.5px; padding:5px 11px; color:var(--ink-soft); display:flex; align-items:center; gap:6px}
.chips2 button:hover{border-color:var(--wire); color:var(--ink)}
.chips2 button[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.chips2 button i{width:7px; height:7px; border-radius:2px; display:block}
.ch-instagram{background:linear-gradient(135deg,#C13584,#F56040,#FCAF45)}
.ch-facebook{background:#3B5998}
.ch-email{background:var(--ink-faint)}
.ch-koached{background:var(--azure)}
.src{font-family:var(--mono); font-size:8px; letter-spacing:.09em; text-transform:uppercase; font-weight:800;
     border-radius:99px; padding:2px 7px; color:#fff; flex:none}
.src.koached{background:var(--azure)} .src.email{background:var(--ink-faint)}
.src.facebook{background:#3B5998}
.src.instagram{background:linear-gradient(135deg,#C13584,#F56040)}
.win24{display:flex; align-items:center; gap:9px; border:1px solid var(--rule); border-radius:8px;
       padding:8px 11px; font-size:11.5px; color:var(--ink-soft); margin:0 0 12px; background:var(--surface)}
.win24 .bar{flex:1; height:4px; border-radius:99px; background:var(--chip); overflow:hidden}
.win24 .bar i{display:block; height:100%; background:var(--azure); border-radius:99px}
.win24.low .bar i{background:var(--signal)}
.win24 b{font-variant-numeric:tabular-nums}
.win24.low b{color:var(--signal)}
.board{display:flex; gap:12px; overflow-x:auto; padding:2px 2px 10px; align-items:flex-start}
.blist{flex:0 0 208px; background:var(--sunk); border-radius:10px; padding:10px 9px 9px; min-height:90px}
.blist.over{outline:2px dashed var(--azure); outline-offset:-2px}
.blist .bh{display:flex; align-items:center; gap:7px; margin:0 3px 9px}
.blist .bh b{font-size:12px; font-weight:600; flex:1}
.blist .bh span{font-family:var(--mono); font-size:9px; color:var(--ink-faint)}
.bcard{background:var(--surface); border:1px solid var(--rule); border-radius:8px; padding:9px 10px;
       margin-bottom:7px; font-size:12.5px; cursor:grab; line-height:1.4; width:100%; text-align:left; color:inherit}
.bcard:hover{border-color:var(--wire)}
.bcard.drag{opacity:.4}
.bcard .bm{display:flex; align-items:center; gap:7px; margin-top:8px}
.bcard .bm .av{width:21px; height:21px; font-size:8px}
.bcard .due{font-family:var(--mono); font-size:9px; letter-spacing:.05em; text-transform:uppercase;
            color:var(--ink-faint); margin-left:auto}
.bcard .due.soon{color:var(--signal); font-weight:800}
.bcard .tg{display:inline-block; font-family:var(--mono); font-size:8px; letter-spacing:.09em;
           text-transform:uppercase; font-weight:800; padding:2px 6px; border-radius:99px; margin-bottom:6px}
.addcard{width:100%; background:none; border:1px dashed var(--wire); border-radius:8px; padding:7px;
         font-size:11.5px; color:var(--ink-faint); cursor:pointer}
.addcard:hover{color:var(--ink); border-color:var(--ink-faint)}
.brow2{display:flex; align-items:center; gap:12px; padding:11px 2px; border-bottom:1px solid var(--rule);
       width:100%; text-align:left; background:none; border-left:0; border-right:0; border-top:0;
       cursor:pointer; color:inherit; font-size:13px}
.brow2:hover{background:var(--sunk)}
.brow2 .sj{flex:1; min-width:0; font-weight:600}
.brow2 .sj em{display:block; font-style:normal; font-weight:400; font-size:11.5px; color:var(--ink-faint); margin-top:2px}
.mini2{display:flex; gap:14px; flex:none; font-variant-numeric:tabular-nums}
.mini2 span{font-family:var(--mono); font-size:10px; color:var(--ink-faint); text-align:right}
.mini2 span b{display:block; font-size:13px; color:var(--ink); font-weight:600}
.livebar{display:flex; align-items:center; gap:9px; background:var(--bark); color:var(--on-bark);
         border-radius:99px; padding:6px 13px; font-size:12px; font-weight:600; width:fit-content}
.livedot{width:8px; height:8px; border-radius:50%; background:#FF5A5A; animation:pulse 1.2s infinite}
.chart{border:1px solid var(--rule); border-radius:9px; padding:13px 13px 9px; background:var(--surface);
       margin-bottom:11px}
.chart .ct{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:2px}
.chart .ct b{font-size:12.5px; font-weight:600}
.chart .ct span{font-family:var(--mono); font-size:10px; color:var(--ink-faint); font-variant-numeric:tabular-nums}
.chart .cs{font-size:11.5px; color:var(--ink-faint); margin:0 0 9px}
.chart .cs em{font-style:normal; font-weight:600; color:var(--azure-ink)}
.chart .cs em.down{color:var(--signal)}
.chart svg{display:block; width:100%; height:auto; overflow:visible}
.chart svg text{font-family:var(--mono); font-size:8px; fill:var(--ink-faint)}
.chart svg text.val{font-size:9px; font-weight:800; fill:var(--azure-ink)}
.chart svg .grid{stroke:var(--rule); stroke-width:1}
.chart svg .ln{fill:none; stroke:var(--azure); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.chart svg .ar{fill:var(--azure); opacity:.11}
.chart svg .pt{fill:var(--azure); stroke:var(--surface); stroke-width:2}
.chart svg .pt.miss{fill:var(--signal)}
.chart svg .br{fill:var(--azure); rx:2}
.chart svg .br.low{fill:var(--signal); opacity:.85}
.calbar{display:flex; align-items:baseline; gap:4px; margin:0 0 10px}
.calbar .mo{font-family:var(--display); font-size:21px; font-weight:800; letter-spacing:-.02em;
            flex:1; line-height:1.2}
.calbar button{background:none; border:0; cursor:pointer; color:var(--ink-faint);
               width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
               font-size:15px; line-height:1; transition:color .12s, background .12s}
.calbar button:hover{color:var(--ink); background:var(--chip)}
.calbar .todaybtn{width:auto; padding:0 9px; height:24px; font-family:var(--mono); font-size:9px;
                  letter-spacing:.11em; text-transform:uppercase; font-weight:800;
                  color:var(--azure-ink); border-radius:99px}
.cal{background:none; border:0; margin-bottom:4px}
.caldow{display:grid; grid-template-columns:repeat(7,1fr); background:none; border:0; margin-bottom:4px}
.caldow span{font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase;
             color:var(--ink-faint); text-align:center; padding:0 0 4px; font-weight:600; opacity:.75}
.calgrid{display:grid; grid-template-columns:repeat(7,1fr); row-gap:2px}
.calcell{border:0; background:none; padding:2px 0 4px; cursor:pointer; color:inherit;
         display:flex; flex-direction:column; align-items:center; gap:4px; position:relative}
.calcell .dn{font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink);
             width:27px; height:27px; display:grid; place-items:center; border-radius:50%;
             flex:none; transition:background .12s, color .12s, box-shadow .12s}
.calcell:hover .dn{background:var(--chip)}
.calcell.out{opacity:.3}
.calcell.out .dn{font-weight:400}
.calcell.today .dn{background:var(--bark); color:var(--on-bark); font-weight:800}
.calcell.sel .dn{box-shadow:0 0 0 1.5px var(--azure); color:var(--azure-ink)}
.calcell.sel.today .dn{box-shadow:0 0 0 2px var(--azure); color:var(--on-bark)}
.calcell.sel:hover .dn{background:none}
.dots{display:flex; gap:3px; justify-content:center; min-height:5px}
.dots i{width:4.5px; height:4.5px; border-radius:50%; display:block}
.dots i.one{background:var(--azure)}
.dots i.grp{background:var(--bark-lift)}
.evs{display:flex; flex-direction:column; gap:2px; width:100%; padding:0 3px}
.ev{font-size:9.5px; line-height:1.35; border-radius:5px; padding:2px 6px; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; font-weight:600; text-align:left}
.ev.one{background:var(--azure-wash); color:var(--azure-ink)}
.ev.grp{background:var(--bark-wash); color:var(--bark)}
.ev.more{background:none; color:var(--ink-faint); font-weight:400; padding-left:6px}
.calfull .calcell{align-items:stretch; min-height:74px; padding:4px 1px 6px}
.calfull .calcell .dn{align-self:flex-start; margin-left:2px}
.pscr .calcell .dn{width:25px; height:25px; font-size:12px}
.agenda{display:flex; flex-direction:column; gap:8px}
.agitem{display:flex; gap:12px; align-items:flex-start; border:1px solid var(--rule); border-radius:8px;
        padding:11px 12px; background:var(--surface)}
.agitem .when{font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
              color:var(--ink-faint); width:74px; flex:none; line-height:1.5}
.agitem .when b{display:block; color:var(--ink); font-size:13px; letter-spacing:0; text-transform:none;
                font-variant-numeric:tabular-nums}
.agitem .what{flex:1; min-width:0}
.agitem .what .t2{font-weight:600; font-size:13px}
.agitem .what .w3{font-size:12px; color:var(--ink-faint); margin-top:2px}
.feed{display:flex; gap:9px; align-items:center; border:1px solid var(--rule); border-radius:8px;
      padding:9px 11px; background:var(--surface); font-size:12px; margin-bottom:7px}
.feed code{flex:1; min-width:0; font-family:var(--mono); font-size:11px; color:var(--azure-ink);
           overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:10px; margin:0 0 22px}
.tile{border:1px solid var(--rule); border-radius:9px; padding:13px 14px; background:var(--surface)}
.tile b{display:block; font-family:var(--display); font-size:30px; line-height:1; font-weight:800;
        letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums}
.tile span{display:block; font-family:var(--mono); font-size:9px; letter-spacing:.11em; text-transform:uppercase;
           color:var(--ink-faint); margin-top:7px}
.tile.hot b{color:var(--signal)}
.tile.hot{background:var(--signal-wash); border-color:transparent}
/* A count you can press. It names a group of people, so it should take you to
   them rather than being a number to read and then go looking for. */
button.tile{cursor:pointer; text-align:left; font:inherit; width:100%; transition:border-color .12s}
button.tile:hover{border-color:var(--wire)}
button.tile[aria-pressed="true"]{border-color:var(--bark); box-shadow:inset 0 0 0 1px var(--bark)}
button.tile[aria-pressed="true"] span{color:var(--bark)}
button.tile[disabled]{opacity:.5; cursor:default}
.acard{display:flex; gap:13px; align-items:center; width:100%; text-align:left; cursor:pointer;
       background:var(--surface); border:1px solid var(--rule); border-radius:10px;
       padding:13px 14px 13px 12px; color:inherit; position:relative; overflow:hidden; transition:border-color .12s}
.acard:hover{border-color:var(--wire)}
.acard::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--wire)}
.acard.late::before,.acard.slip::before{background:var(--signal)}
.acard.ok::before{background:var(--azure)}
.acard.new::before{background:var(--bark)}
.acard .av{width:40px; height:40px; font-size:12px}
.acard .body{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.acard .n2{font-weight:600; font-size:13.5px}
.acard .w2{font-size:12px; color:var(--ink-faint); line-height:1.4}
.acard .rt{display:flex; flex-direction:column; align-items:flex-end; gap:7px; flex:none}
.hero{position:relative; overflow:hidden; border-radius:10px; margin:0 0 20px}
.hero svg{display:block; width:100%; height:100%}
.hero .on{position:absolute; left:18px; right:18px; bottom:15px; z-index:1; color:#fff}
.hero .h1{font-family:var(--display); font-size:27px; font-weight:800; letter-spacing:-.02em;
          line-height:1.1; text-shadow:0 2px 10px rgba(0,0,0,.4)}
.hero .h2{font-size:12.5px; opacity:.92; margin-top:5px; text-shadow:0 1px 6px rgba(0,0,0,.45)}
.hero .hp{position:absolute; top:14px; right:16px; z-index:1}
.cardgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px}
.ccard{border:1px solid var(--rule); border-radius:9px; overflow:hidden; background:var(--surface);
       cursor:pointer; text-align:left; padding:0; color:inherit; display:flex; flex-direction:column}
.ccard:hover{border-color:var(--wire)}
.ccard .meta{padding:10px 12px 12px; display:flex; flex-direction:column; gap:5px; flex:1}
.ccard .t{font-weight:600; font-size:13px; line-height:1.3}
.ccard .d{font-size:11.5px; color:var(--ink-faint); font-variant-numeric:tabular-nums}
.statuscard{border:1px solid var(--rule); border-left:3px solid var(--azure); background:var(--azure-wash);
            border-radius:0 7px 7px 0; padding:11px 12px; margin-bottom:14px}
.statuscard.warn{border-left-color:var(--signal); background:var(--signal-wash)}
.statuscard b{display:block; font-size:13px; font-weight:600; margin-bottom:3px}
.statuscard span{font-size:12px; color:var(--ink-soft); line-height:1.45; display:block}
.statuscard .mini{display:flex; gap:14px; margin-top:9px; font-family:var(--mono); font-size:9.5px;
                  letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint)}
.prod{border:1px solid var(--rule); border-radius:7px; padding:11px 12px; margin-bottom:8px; background:var(--surface)}
.prod .ph{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.prod .pn{font-weight:600; font-size:13px; line-height:1.35}
.prod .pp{font-family:var(--mono); font-size:12.5px; font-weight:800; color:var(--azure-ink); white-space:nowrap;
          font-variant-numeric:tabular-nums}
.kind{font-family:var(--mono); font-size:8.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:800;
      border-radius:99px; padding:2px 7px; background:var(--chip); color:var(--ink-soft); display:inline-block; margin-top:6px}
.kind.course{background:var(--bark-wash); color:var(--bark)}
.kind.session{background:var(--azure-wash); color:var(--azure-ink)}
.kind.physical{background:var(--signal-wash); color:var(--signal)}
.post{display:block; width:100%; text-align:left; cursor:pointer; background:var(--surface);
       border:1px solid var(--rule); border-radius:7px; padding:11px 13px; margin-bottom:8px; color:inherit}
.post:hover{border-color:var(--wire)}
.pb{font-size:12px; color:var(--ink-soft); line-height:1.45; display:-webkit-box;
     -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.pm{font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--ink-faint); display:flex; align-items:center; gap:10px; margin-top:2px}
.pm .faces{display:flex; margin-left:auto}
.pm .faces .av{width:19px; height:19px; font-size:8px; margin-left:-6px;
               box-shadow:0 0 0 1.5px var(--surface)}
.pm .faces .av:first-child{margin-left:0}
.pinned{font-family:var(--mono); font-size:8.5px; letter-spacing:.09em; text-transform:uppercase;
        background:var(--bark); color:var(--on-bark); border-radius:99px; padding:2px 7px; font-weight:800}
.comment{display:flex; gap:9px; align-items:flex-start; margin-bottom:11px; font-size:12.5px}
.comment .av{width:26px; height:26px; font-size:9px}
.comment .cb{flex:1; min-width:0; background:var(--sunk); border-radius:3px 11px 11px 11px;
             padding:8px 11px; line-height:1.45}
.comment b{display:block; font-size:10.5px; color:var(--ink-faint); font-weight:800; margin-bottom:2px}
.ptabs{overflow-x:auto}
.ptabs button{min-width:46px; flex:1 0 auto}

/* phone */
.phone{background:var(--surface); border:1px solid var(--rule); border-radius:26px;
       box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column;
       height:var(--devh); position:static}
.phone .notch{height:24px; background:#2C1D18; display:grid; place-items:center; flex:none}
.phone .notch::after{content:""; width:52px; height:5px; border-radius:99px; background:rgba(255,255,255,.3)}
/* The panel at the top of their day. Its ink is the measured one, not a fixed
   near-white: a coach who picks pale gold and gets white text on it has been
   handed a broken app by us, not by her taste. */
.phead{padding:16px 16px 15px; position:relative; overflow:hidden; color:var(--on-bark);
       background:var(--bark)}
.phead svg.bg{position:absolute; inset:0; width:100%; height:100%}
.phead img.bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.phead .in2{position:relative; z-index:1}
.phead .biz{font-family:var(--display); font-size:17px; font-weight:800; line-height:1.15}
.phead .whose{font-size:11.5px; opacity:.8}

/* With her picture in it, the panel is the first thing they see rather than a
   strip above the habits. Tall enough to be a photograph, with the greeting
   sitting in it. */
/* A column, not a row. The greeting and the line for the day are two blocks that
   stack at the bottom of the picture; a row put them side by side and squeezed
   both, which is the shape of bug that lost the picture entirely once already. */
.phead.hero{min-height:var(--phead-h); display:flex; flex-direction:column;
            justify-content:flex-end; align-items:stretch; padding:20px 16px 17px}
/* Whole-picture mode letterboxes against her colour rather than cropping. The
   panel grows to suit, because a picture nobody chose the crop of is usually
   taller than a strip. */
/* Whole-picture mode uses the same height she set; letterboxing against her
   colour is what fills whatever is left over. */
.phead.hero.whole{min-height:var(--phead-h)}
.phead.hero.whole img.bg{object-fit:contain}
.phead.hero .biz{font-size:23px; letter-spacing:-.015em}
.phead.hero .whose{font-size:12.5px; opacity:.92}
/* A wash of her own colour over the picture, densest where the words are. The
   ink was measured against that colour, so the contrast it was measured at is
   the contrast it keeps. */
/* The wash sits under the words and nowhere else. The first version ran it
   across the whole picture at 86 per cent and drowned it: the point of putting a
   photograph there is that somebody can see the photograph. */
.phead.hero::after{content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(to top,
    color-mix(in oklab, var(--bark) 92%, transparent) 0%,
    color-mix(in oklab, var(--bark) 74%, transparent) 26%,
    color-mix(in oklab, var(--bark) 30%, transparent) 52%,
    transparent 72%)}
/* Where color-mix is not understood, a flat wash of the same colour rather than
   a photograph with unreadable words on it. */
@supports not (background: color-mix(in oklab, red 50%, transparent)) {
  .phead.hero::after{background:linear-gradient(to top, var(--bark), transparent 72%);
                     opacity:.9}
}

/* Everywhere that is not Today: her colour and her name, and nothing else. The
   greeting belongs to the morning and the line for the day has already been
   read, so carrying either into Messages costs three hundred pixels of the
   thing somebody actually opened. */
.phead.slim{min-height:0; padding:12px 16px 13px; display:block}
.phead.slim .biz{font-size:16px}
.phead.slim .whose{font-size:11px; opacity:.72}

/* The picture in a rectangle of its own, with the greeting on a bar underneath.
   The default, because a photograph of a person cannot survive having a status
   bar across its top and a greeting across its middle: a real one arrived with
   the subject's eyes exactly where the island sits, and no crop setting fixes
   that. Nothing overlaps the picture here, so the crop can be chosen for the
   face. --chrome-top is whatever the phone puts over the top of the screen. */
.phead.hero.under{display:block; padding:0; background:var(--bark); color:var(--on-bark)}
/* The picture is an ordinary block with a height of its own, not something
   absolutely positioned inside a box. A box that computes to no height takes an
   absolutely positioned child with it and the picture simply disappears, which
   is a failure this layout does not need to be able to have. */
.phead.hero.under .shot{display:block; margin-top:var(--chrome-top, 0px);
                        background:var(--bark-lift); line-height:0}
.phead.hero.under .shot img.bg{position:static; display:block; width:100%;
                               height:var(--phead-h, 238px); object-fit:cover}
.phead.hero.under.whole .shot img.bg{object-fit:contain}
.phead.hero.under .in2{padding:12px 16px 14px}
.phead.hero.under .biz{font-size:19px}
.phead.hero.under::after{display:none}

/* The line for the day lives INSIDE the branded panel, on the same colour, under
   a hairline drawn in the panel's own ink rather than a rule. A separate band
   beneath it read as a second header; this reads as the bottom of the first.
   Nothing is drawn at all on a day with no line, so the panel simply ends. */
/* Above the wash, like the greeting: the scrim paints after both of them. */
.phead .qline{position:relative; z-index:1;
              border-top:1px solid color-mix(in oklab, var(--on-bark) 18%, transparent);
              padding:12px 16px 13px; color:var(--on-bark)}
/* In the overlay layout the panel already has its own side padding, so the line
   only needs the gap above it. */
.phead.hero:not(.under) .qline{padding:11px 0 0; margin-top:12px}
/* Set to the panel's own width, not the window's: in the desktop frame the window
   is four times the phone and a viewport unit would size the line for a screen
   nobody is holding. Falls back to a fixed size where container units are not
   understood. */
.phead{container-type:inline-size}
.phead .qline p{margin:0; font-family:var(--quote); font-style:italic; font-weight:400;
                font-size:14.5px; line-height:1.42; text-wrap:balance;
                /* A drawn italic carries itself; the weight Nunito needed to
                   hold a line would make a serif look shouted. */
                /* Big enough to carry a short line across the panel, capped so a
                   long one does not turn into a paragraph of headlines. */
                font-size:clamp(14.5px, 5.1cqw, 20px)}
.phead .qline footer{margin-top:5px; font-size:11px; opacity:.78; font-weight:600;
                     font-style:normal; letter-spacing:.01em}
@supports not (color: color-mix(in oklab, red 50%, transparent)) {
  .phead .qline{border-top-color:rgba(255,255,255,.2)}
}

.pscr{padding:14px 14px 20px; flex:1 1 0; min-height:0; overflow-y:auto; overscroll-behavior:contain}
.pscr::-webkit-scrollbar{width:5px}
.pscr::-webkit-scrollbar-thumb{background:var(--wire); border-radius:99px}
.pscr h4{font-size:15px; font-weight:600; margin:0 0 2px}
.pscr .day{font-size:11.5px; color:var(--ink-faint); margin:0 0 13px}
.pscr h5{font-size:12px; font-weight:600; margin:18px 0 7px; color:var(--ink-soft)}
.ptabs{display:flex; border-top:1px solid var(--rule); background:var(--surface); flex:none;
        padding:2px 4px 4px}
.ptabs button{flex:1; background:none; border:0; cursor:pointer; padding:8px 2px 7px; position:relative;
              font-size:9px; font-weight:600; color:var(--ink-faint); letter-spacing:.01em;
              display:flex; flex-direction:column; align-items:center; gap:3px}
.ptabs button svg{width:17px; height:17px; opacity:.5; transition:opacity .12s}
.ptabs button[aria-current="true"]{color:var(--bark)}
.ptabs button[aria-current="true"] svg{opacity:1}
.ptabs button[aria-current="true"]::before{content:""; position:absolute; top:0; left:26%; right:26%;
              height:2px; border-radius:99px; background:var(--bark)}

.tick{display:flex; align-items:center; gap:9px; width:100%; text-align:left; cursor:pointer;
      padding:9px 10px; border:1px solid var(--rule); border-radius:6px; font-size:12.5px;
      background:var(--surface); margin-bottom:6px}
.tick:hover{border-color:var(--wire)}
.tick .box{width:16px; height:16px; border-radius:4px; border:1.5px solid var(--wire); flex:none;
           display:grid; place-items:center; font-size:10px; line-height:1; color:transparent}
.tick .box.on{background:var(--azure); border-color:var(--azure); color:var(--on-azure)}
.tick .lbl{flex:1}

.scale{display:grid; grid-template-columns:repeat(10,1fr); gap:3px}
.scale button{background:var(--surface); border:1px solid var(--rule); border-radius:4px;
              padding:6px 0; font-size:11px; cursor:pointer; font-variant-numeric:tabular-nums}
.scale button[aria-pressed="true"]{background:var(--azure); color:var(--on-azure); border-color:var(--azure); font-weight:800}
.yn{display:flex; gap:6px}
.yn button{flex:1; background:var(--surface); border:1px solid var(--rule); border-radius:5px;
           padding:7px 0; font-size:12px; cursor:pointer}
.yn button[aria-pressed="true"]{background:var(--azure); color:var(--on-azure); border-color:var(--azure); font-weight:600}
.flabel{font-size:12px; font-weight:600; margin:0 0 5px}
.fwrap{margin-bottom:12px}
.fhint{font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
       color:var(--ink-faint); margin-left:6px; font-weight:600}

.slotwrap{margin-bottom:14px}
.slothead{display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:0 0 6px}
.slothead b{font-size:12px; font-weight:600}
.slothead span{font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint)}
.entry{display:flex; align-items:flex-start; gap:9px; border:1px solid var(--rule); border-radius:6px;
       padding:8px 10px; margin-bottom:6px; font-size:12.5px; background:var(--surface)}
.entry .txt{flex:1; min-width:0; line-height:1.4}
.entry .kc{font-family:var(--mono); font-size:10px; color:var(--ink-faint); white-space:nowrap;
           font-variant-numeric:tabular-nums; padding-top:2px}
.entry .rm{background:none; border:0; cursor:pointer; color:var(--ink-faint); font-size:14px; line-height:1;
           padding:2px 4px; border-radius:4px; flex:none}
.entry .rm:hover{background:var(--signal-wash); color:var(--signal)}
.entry .meta{font-family:var(--mono); font-size:9px; letter-spacing:.07em; text-transform:uppercase;
             color:var(--azure-ink); display:block; margin-top:3px}
.totals{border:1px solid var(--rule); border-radius:7px; padding:11px 12px; margin-bottom:15px; background:var(--sunk)}
.totrow{display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:12px; margin-bottom:4px}
.totrow b{font-variant-numeric:tabular-nums; font-weight:600}
.totrow.over b{color:var(--signal)}
.daynav{display:flex; gap:5px; margin-bottom:12px}
.daynav button{flex:1; background:var(--surface); border:1px solid var(--rule); border-radius:5px;
               padding:6px 0; font-size:11.5px; cursor:pointer}
.daynav button[aria-pressed="true"]{background:var(--bark); color:var(--on-bark); border-color:var(--bark); font-weight:600}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px}
.chip{display:inline-flex; align-items:center; gap:6px; background:var(--chip); border:0; border-radius:99px;
      padding:5px 10px; font-size:11.5px; color:var(--ink)}
button.chip{cursor:pointer; font:inherit; font-size:11.5px; text-align:left;
            border:1px solid transparent; transition:background .12s}
button.chip:hover{background:var(--azure-wash); border-color:var(--azure)}
button.chip .n{font-family:var(--mono); font-size:9px; color:var(--ink-faint); flex:none}
button.chip .kc2{font-family:var(--mono); font-size:9px; color:var(--azure-ink); flex:none}
.usualhead{font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase;
           color:var(--ink-faint); margin:0 0 5px}
.chip button{background:none; border:0; cursor:pointer; color:var(--ink-faint); font-size:13px; line-height:1; padding:0}
.chip button:hover{color:var(--signal)}
.ptabs button{letter-spacing:-.01em}
.prog{height:5px; border-radius:99px; background:var(--chip); overflow:hidden; margin:7px 0 0}
.prog i{display:block; height:100%; background:var(--azure); border-radius:99px}
.lesson{display:flex; align-items:center; gap:9px; width:100%; text-align:left; cursor:pointer;
        padding:9px 10px; border:1px solid var(--rule); border-radius:6px; font-size:12.5px;
        background:var(--surface); margin-bottom:6px; color:inherit}
.lesson:hover:not([disabled]){border-color:var(--wire)}
.lesson[disabled]{opacity:.48; cursor:not-allowed}
.lesson .ty{font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase;
            color:var(--ink-faint); flex:none}
.lesson .mins{margin-left:auto; color:var(--ink-faint); font-variant-numeric:tabular-nums; flex:none}
.lesson .lt{flex:1; min-width:0}
.mod{border:1px solid var(--rule); border-radius:7px; padding:12px 13px; margin-bottom:10px; background:var(--surface)}
.mod > header{display:flex; align-items:center; gap:9px; margin-bottom:10px}
.mod > header .mn{font-family:var(--mono); font-size:9.5px; letter-spacing:.11em; text-transform:uppercase;
                  color:var(--ink-faint); flex:none}
.lrow{display:grid; grid-template-columns:1fr 116px 78px auto; gap:6px; align-items:center; margin-bottom:6px}
@media (max-width:560px){ .lrow{grid-template-columns:1fr auto} }
.player{aspect-ratio:16/9; border-radius:8px; background:var(--bark); display:grid; place-items:center; margin-bottom:13px}
.player span{width:0; height:0; margin-left:6px; border-left:22px solid var(--on-bark);
             border-top:14px solid transparent; border-bottom:14px solid transparent}
.empty{border:1px dashed var(--wire); border-radius:7px; padding:22px 18px; text-align:center;
       color:var(--ink-faint); font-size:13px}
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
       background:var(--bark); color:var(--on-bark); padding:10px 18px; border-radius:99px;
       font-size:13px; font-weight:600; box-shadow:var(--shadow); z-index:50}

footer.foot{margin-top:34px; padding-top:16px; border-top:1px solid var(--rule);
            font-family:var(--mono); font-size:10.5px; letter-spacing:.07em; color:var(--ink-faint);
            display:flex; flex-wrap:wrap; gap:6px 22px}


/* ── progress, as a line ──────────────────────────────────────────────────
   One shape for both halves of the product: koached.js draws it, this makes it
   look like the rest of the page it is on. The colour is the brand's, so on a
   client's phone it is her coach's colour and in the portal it is ours. */
.charts{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:14px}
.chart{margin:0; background:var(--surface); border:1px solid var(--rule); border-radius:12px;
       padding:12px 12px 10px}
.chart figcaption{display:flex; align-items:baseline; justify-content:space-between; gap:10px;
                  font-size:12.5px; color:var(--ink-soft); margin-bottom:6px}
.chart figcaption b{font-family:var(--display); font-size:19px; font-weight:800;
                    letter-spacing:-.02em; color:var(--ink)}
.chart svg{display:block; width:100%; height:86px; overflow:visible}
.chart .line{fill:none; stroke:var(--bark); stroke-width:2; stroke-linecap:round;
             stroke-linejoin:round; vector-effect:non-scaling-stroke}
.chart .fill{fill:color-mix(in srgb, var(--bark) 10%, transparent); stroke:none}
.chart .dots circle{fill:var(--bark)}
.chart-ends{display:flex; justify-content:space-between; margin-top:7px;
            font-family:var(--mono); font-size:9px; letter-spacing:.08em;
            color:var(--ink-faint)}


/* The card on Today that is about her: the shop tile's shape, with her own line
   behind it instead of a photograph. */
.youcard{display:block; padding:0; margin:20px 0 0; width:100%; text-align:left;
         position:relative; overflow:hidden; height:128px}
.youcard-art{position:absolute; inset:0; display:block; opacity:.5}
.youcard-art svg:not(.chart svg){width:100%; height:100%; display:block}
.youcard-art .chart{background:none; border:0; border-radius:0; padding:0; height:100%}
.youcard-art .chart figcaption, .youcard-art .chart-ends{display:none}
.youcard-art .chart svg{height:128px}
.youcard-art .chart .line{stroke:var(--on-bark)}
.youcard-art .chart .fill{fill:color-mix(in srgb, var(--on-bark) 22%, transparent)}
.youcard-art .chart .dots circle{fill:var(--on-bark)}
.youcard{background:var(--bark)}
.youcard-wash{position:absolute; inset:0;
              background:linear-gradient(to top,
                color-mix(in oklab, var(--bark) 86%, transparent), transparent 72%),
                linear-gradient(to bottom,
                color-mix(in oklab, var(--bark) 72%, transparent), transparent 42%)}
.youcard-name{position:absolute; left:14px; bottom:11px; color:var(--on-bark);
              font-family:var(--display); font-size:19px; font-weight:800; letter-spacing:-.02em}
.youcard-now{position:absolute; left:14px; top:12px; color:var(--on-bark); font-size:11.5px;
             opacity:.9}
.youcard-go{position:absolute; right:13px; bottom:13px; color:var(--on-bark); font-size:17px;
            opacity:.85}


/* ── the shared record ────────────────────────────────────────────────────
   Written by either of them, read by both, so every row says which. */
.entries{list-style:none; margin:14px 0 0; padding:0}
.entry{position:relative; border-top:1px solid var(--rule); padding:12px 34px 12px 0}
.entry-when{font-family:var(--mono); font-size:9.5px; letter-spacing:.09em; text-transform:uppercase;
            color:var(--ink-faint); margin-bottom:4px}
.entry-head{font-size:14.5px; color:var(--ink)}
.entry-head b{font-weight:700}
.entry-num{font-family:var(--display); font-weight:800; font-size:17px; letter-spacing:-.02em;
           color:var(--bark); margin-left:6px}
.entry-body{margin:4px 0 0; font-size:14px; line-height:1.5; color:var(--ink-soft)}
.entry-pic{display:block; margin-top:8px; max-width:100%; border-radius:9px}
.entry-x{position:absolute; top:10px; right:0; background:none; border:0; cursor:pointer;
         font-size:18px; line-height:1; color:var(--ink-faint); padding:2px 6px}
.entry-x:hover{color:var(--signal)}
.entry-milestone .entry-head b::before{content:"★ "; color:var(--bark)}
.addentry{display:grid; gap:7px; margin-top:12px}
.addentry .row2{display:grid; grid-template-columns:1fr 92px; gap:7px}