/* Hallmark · checked form · genre mm · shape: app screen · redesign: full · surface: absolute (iOS paper, #FFF light and #000 dark, pinned by the shipped app) · posture: restrained · nav: app sidebar, a phone dock with a centre record button · footer: none · hero: custom, the start card is the only raised object · copy: plain sentence case */
/* Hallmark · waive 7b · surface: absolute is stamped and every text pair passes 4.5:1 · Vaani dark mode is true black so the recording and notes screens match iOS on OLED phones */
/* Three weights in running use: 400 text and controls, 600 owners, titles and heads, 700 the display greeting and note titles */
/* Hallmark · dismissed 29 · the sidebar blur is the iOS and macOS source-list material over the paper, not a glow or wash behind text */
/* Hallmark · answered F7 · every pill here is a control or a live status chip: nudge, folder suggestion, owner filter, the recording island */
/* Hallmark · dismissed 73 · transcript lines above the clipped .lyrics box are not painted; .lyrics starts at the header's bottom edge with overflow hidden */
/* Hallmark · waive 39b · the Mark this button is one 67px tap target with its icon over its label · the record screen keeps the iOS icon-over-label control beside Stop */
/* Hallmark · answered F4 · Meeting and Quick note are one segmented control with a single sliding thumb, not two filled buttons */
/* Vaani app stylesheet. Replaces the inline <style> in index.html (disabled by patch). One system for every screen:
   a date gutter, an axis and a node on the left, content on the right ("the line"). Colour literals live only in the token blocks. */

/* ================= tokens ================= */
:root{
  color-scheme:light;
  --bg:#FFFFFF;--bg2:#F2F2F7;--card:#FFFFFF;--card2:#FFFFFF;--sheet:#F2F2F7;--side:rgba(242,242,247,0.86);
  --label:#000000;--label2:#6C6C70;--label3:#737378;--sep:rgba(60,60,67,0.18);
  --fill:rgba(118,118,128,0.12);--fill2:rgba(118,118,128,0.2);--fill-card:var(--fill);
  --tint:#0A66D8;--tint-soft:rgba(10,102,216,0.12);--on-tint:#FFFFFF;--tint-fill:#0A66D8;
  --red:#FF3B30;--red-ink:#D70015;--red-soft:rgba(255,59,48,0.12);--ring:#D1D1D6;--past:#8E8E93;--ck-edge:#8E8E93;
  --amber:#9A5200;--amber-soft:rgba(255,159,10,0.16);--amber-bar:#FF9F0A;--wave:#FF9F0A;
  --field-edge:rgba(60,60,67,0.6);--switch-on:#34C759;--knob:#FFFFFF;--thumb:#FFFFFF;--mask:#000000;
  --glass:rgba(255,255,255,0.74);--glass-edge:rgba(0,0,0,0.08);--glass-hi:rgba(255,255,255,0.85);
  --island:#000000;--on-island:#FFFFFF;--island-edge:rgba(0,0,0,0);
  --shadow-s:0 1px 2px rgba(0,0,0,0.06),0 4px 14px rgba(0,0,0,0.06);
  --shadow-l:0 10px 30px rgba(0,0,0,0.12);
  --shadow-thumb:0 3px 8px rgba(0,0,0,0.12),0 0 0 .5px rgba(0,0,0,0.04);
  --shadow-dot:0 6px 18px rgba(255,59,48,0.3);
  --shadow-toast:0 10px 30px rgba(0,0,0,0.25);
  --scrim:rgba(0,0,0,0.28);
  --spring:cubic-bezier(.32,.72,0,1);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  --font-d:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:32px;--space-8:40px;--space-9:56px;--space-10:72px;
  --side-w:264px;--col:760px;--gutter:var(--space-8);
  --gut:112px;--axis:32px;
  --h1-soft:oklch(93% 0.035 25);--h1-ink:oklch(45% 0.13 25);--h1-dot:oklch(62% 0.15 25);
  --h2-soft:oklch(93% 0.04 55);--h2-ink:oklch(45% 0.11 55);--h2-dot:oklch(62% 0.15 55);
  --h3-soft:oklch(93% 0.045 85);--h3-ink:oklch(45% 0.09 85);--h3-dot:oklch(62% 0.125 85);
  --h4-soft:oklch(93% 0.045 150);--h4-ink:oklch(45% 0.125 150);--h4-dot:oklch(62% 0.15 150);
  --h5-soft:oklch(93% 0.045 195);--h5-ink:oklch(45% 0.075 195);--h5-dot:oklch(62% 0.105 195);
  --h6-soft:oklch(93% 0.035 250);--h6-ink:oklch(45% 0.125 250);--h6-dot:oklch(62% 0.15 250);
  --h7-soft:oklch(93% 0.035 285);--h7-ink:oklch(45% 0.13 285);--h7-dot:oklch(62% 0.15 285);
  --h8-soft:oklch(93% 0.04 345);--h8-ink:oklch(45% 0.13 345);--h8-dot:oklch(62% 0.15 345);
  /* insights heatmap: steps of the tint over the paper, so both themes follow their own tokens */
  --heat-0:var(--fill);--heat-1:color-mix(in srgb,var(--tint) 80%,var(--bg));--heat-2:color-mix(in srgb,var(--tint) 88%,var(--bg));--heat-3:color-mix(in srgb,var(--tint) 94%,var(--bg));--heat-4:var(--tint);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#000000;--bg2:#000000;--card:#1C1C1E;--card2:#2C2C2E;--sheet:#1C1C1E;--side:rgba(28,28,30,0.86);
  --label:#FFFFFF;--label2:#AEAEB2;--label3:#98989D;--sep:rgba(84,84,88,0.6);
  --fill:rgba(118,118,128,0.24);--fill2:rgba(118,118,128,0.32);--fill-card:var(--card2);
  --tint:#4D97FF;--tint-soft:rgba(77,151,255,0.2);
  --red:#FF453A;--red-ink:#FF6961;--red-soft:rgba(255,69,58,0.18);--ring:#48484A;--past:#7C7C80;
  --amber:#FFB340;--amber-soft:rgba(255,179,64,0.18);--amber-bar:#FFB340;
  --thumb:#636366;--field-edge:rgba(235,235,245,0.5);
  --glass:rgba(44,44,46,0.74);--glass-edge:rgba(255,255,255,0.1);--glass-hi:rgba(255,255,255,0.08);
  --island-edge:rgba(255,255,255,0.16);
  --shadow-s:0 1px 2px rgba(0,0,0,0.5),0 4px 14px rgba(0,0,0,0.4);
  --shadow-l:0 10px 30px rgba(0,0,0,0.6);
  --shadow-thumb:0 3px 8px rgba(0,0,0,0.4),0 0 0 .5px rgba(255,255,255,0.06);
  --shadow-dot:0 6px 18px rgba(255,69,58,0.32);
  --shadow-toast:0 8px 24px rgba(0,0,0,0.5);
  --scrim:rgba(0,0,0,0.55);
  --h1-soft:oklch(34% 0.07 25);--h1-ink:oklch(88% 0.06 25);--h1-dot:oklch(72% 0.14 25);
  --h2-soft:oklch(34% 0.07 55);--h2-ink:oklch(88% 0.07 55);--h2-dot:oklch(72% 0.14 55);
  --h3-soft:oklch(34% 0.07 85);--h3-ink:oklch(88% 0.08 85);--h3-dot:oklch(72% 0.14 85);
  --h4-soft:oklch(34% 0.07 150);--h4-ink:oklch(88% 0.08 150);--h4-dot:oklch(72% 0.14 150);
  --h5-soft:oklch(34% 0.055 195);--h5-ink:oklch(88% 0.08 195);--h5-dot:oklch(72% 0.12 195);
  --h6-soft:oklch(34% 0.07 250);--h6-ink:oklch(88% 0.06 250);--h6-dot:oklch(72% 0.14 250);
  --h7-soft:oklch(34% 0.07 285);--h7-ink:oklch(88% 0.06 285);--h7-dot:oklch(72% 0.14 285);
  --h8-soft:oklch(34% 0.07 345);--h8-ink:oklch(88% 0.08 345);--h8-dot:oklch(72% 0.14 345);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#000000;--bg2:#000000;--card:#1C1C1E;--card2:#2C2C2E;--sheet:#1C1C1E;--side:rgba(28,28,30,0.86);
    --label:#FFFFFF;--label2:#AEAEB2;--label3:#98989D;--sep:rgba(84,84,88,0.6);
    --fill:rgba(118,118,128,0.24);--fill2:rgba(118,118,128,0.32);--fill-card:var(--card2);
    --tint:#4D97FF;--tint-soft:rgba(77,151,255,0.2);
    --red:#FF453A;--red-ink:#FF6961;--red-soft:rgba(255,69,58,0.18);--ring:#48484A;--past:#7C7C80;
    --amber:#FFB340;--amber-soft:rgba(255,179,64,0.18);--amber-bar:#FFB340;
    --thumb:#636366;--field-edge:rgba(235,235,245,0.5);
    --glass:rgba(44,44,46,0.74);--glass-edge:rgba(255,255,255,0.1);--glass-hi:rgba(255,255,255,0.08);
    --island-edge:rgba(255,255,255,0.16);
    --shadow-s:0 1px 2px rgba(0,0,0,0.5),0 4px 14px rgba(0,0,0,0.4);
    --shadow-l:0 10px 30px rgba(0,0,0,0.6);
    --shadow-thumb:0 3px 8px rgba(0,0,0,0.4),0 0 0 .5px rgba(255,255,255,0.06);
    --shadow-dot:0 6px 18px rgba(255,69,58,0.32);
    --shadow-toast:0 8px 24px rgba(0,0,0,0.5);
    --scrim:rgba(0,0,0,0.55);
    --h1-soft:oklch(34% 0.07 25);--h1-ink:oklch(88% 0.06 25);--h1-dot:oklch(72% 0.14 25);
    --h2-soft:oklch(34% 0.07 55);--h2-ink:oklch(88% 0.07 55);--h2-dot:oklch(72% 0.14 55);
    --h3-soft:oklch(34% 0.07 85);--h3-ink:oklch(88% 0.08 85);--h3-dot:oklch(72% 0.14 85);
    --h4-soft:oklch(34% 0.07 150);--h4-ink:oklch(88% 0.08 150);--h4-dot:oklch(72% 0.14 150);
    --h5-soft:oklch(34% 0.055 195);--h5-ink:oklch(88% 0.08 195);--h5-dot:oklch(72% 0.12 195);
    --h6-soft:oklch(34% 0.07 250);--h6-ink:oklch(88% 0.06 250);--h6-dot:oklch(72% 0.14 250);
    --h7-soft:oklch(34% 0.07 285);--h7-ink:oklch(88% 0.06 285);--h7-dot:oklch(72% 0.14 285);
    --h8-soft:oklch(34% 0.07 345);--h8-ink:oklch(88% 0.08 345);--h8-dot:oklch(72% 0.14 345);
  }
}

/* ================= base ================= */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;overflow-x:clip}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--fill2) transparent}
body{background:var(--bg);color:var(--label);font-family:var(--font);font-size:16px;line-height:1.45;letter-spacing:-0.01em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;caret-color:var(--tint)}
::selection{background:var(--tint-soft)}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;border:0;background:none;padding:0;-webkit-tap-highlight-color:transparent;white-space:nowrap}
button:active{opacity:.8}
button:disabled{cursor:not-allowed;opacity:.4}
a{color:var(--tint)}
:focus-visible{outline:2px solid var(--tint);outline-offset:2px;border-radius:8px}
h1,h2,h3{font-family:var(--font-d);margin:0;letter-spacing:-0.025em;overflow-wrap:break-word;min-width:0;text-wrap:balance}
p{margin:0}
svg{flex:none}
.glass{background:var(--glass);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:0 0 0 .5px var(--glass-edge),var(--shadow-l),inset 0 1px 0 var(--glass-hi)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
kbd,.kbd{font-family:var(--font);font-size:12px;font-weight:400;padding:2px var(--space-2);border-radius:6px;background:var(--fill);color:var(--label2);white-space:nowrap}

/* ================= shell ================= */
.app{display:grid;grid-template-columns:minmax(0,1fr);min-height:100vh;min-height:100dvh}
.main{position:relative;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;min-width:0}
.side{display:none;flex-direction:column;min-height:0}
.bar{display:flex;align-items:center;gap:var(--space-2);padding:calc(env(safe-area-inset-top,0px) + var(--space-2)) var(--space-2) var(--space-1);min-height:52px}
.brand{font-family:var(--font-d);font-size:17px;font-weight:600;letter-spacing:-0.02em}
.bar .brand{margin-right:auto}
.icon-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--tint);transition:background-color .15s var(--spring)}
@media (hover:hover){.icon-btn:hover{background:var(--fill)}}
.icon-btn svg{width:22px;height:22px}
.view{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;width:100%}

/* ================= sidebar ================= */
.side-head{display:flex;align-items:center;gap:var(--space-1);min-height:52px;padding:calc(env(safe-area-inset-top,0px) + var(--space-1)) var(--space-3) 0 var(--space-5)}
.side-head .brand{font-size:20px;margin-right:auto}
.side-head .icon-btn{width:32px;height:32px;border-radius:8px;color:var(--label2)}
.side-head .icon-btn svg{width:18px;height:18px}
.new-btn{display:flex;align-items:center;gap:var(--space-3);margin:var(--space-1) var(--space-3) var(--space-2);min-height:40px;padding:0 var(--space-3);border-radius:10px;background:var(--card);box-shadow:0 0 0 .5px var(--glass-edge),var(--shadow-s);font-size:15px;font-weight:600;transition:transform .2s var(--spring)}
.new-btn:active{transform:scale(.98)}
.new-btn i{width:12px;height:12px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.new-btn .kbd{margin-left:auto;background:none;padding:0;color:var(--label3)}
.search{position:relative;display:block;margin:0 var(--space-3);color:var(--label2)}
.search svg{position:absolute;left:var(--space-3);top:50%;width:15px;height:15px;transform:translateY(-50%);pointer-events:none}
.search input{width:100%;height:36px;padding:0 var(--space-3) 0 var(--space-8);border:0;border-radius:10px;background:var(--fill);box-shadow:inset 0 0 0 1px var(--field-edge);font-size:15px;color:var(--label);appearance:none}
.search input::placeholder{color:var(--label2)}
.snav{display:flex;flex-direction:column;gap:2px;padding:0 var(--space-3)}
.snav.first{margin-top:var(--space-4)}
.ni{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:36px;padding:0 var(--space-3);border-radius:8px;font-size:15px;font-weight:400;color:var(--label);text-align:left;text-decoration:none;transition:background-color .15s var(--spring)}
.ni .ico{color:var(--label2)}
.ni:hover{background:var(--fill)}
.ni:active{background:var(--fill2)}
.ni[aria-current="page"]{background:var(--fill2);font-weight:600}
.ni[aria-current="page"] .ico{color:var(--tint)}
.ni[aria-current="page"] .n{color:var(--label)}
.ni .n{margin-left:auto;font-size:13px;font-weight:400;color:var(--label2);font-variant-numeric:tabular-nums}
.ni .fdot{width:18px;display:grid;place-items:center}
.ni .fdot i{width:10px;height:10px;border-radius:50%}
.ni .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fhead{display:flex;align-items:center;min-height:28px;margin-top:var(--space-5);padding:0 var(--space-2) 0 var(--space-6);font-size:13px;font-weight:600;color:var(--label2)}
.fhead button{margin-left:auto;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--label2)}
.fhead button:hover{background:var(--fill)}
.ni.add{color:var(--tint)}.ni.add .ico{color:var(--tint)}
.sfill{flex:1;min-height:var(--space-4)}
.side-foot{display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:var(--space-2) var(--space-3) calc(env(safe-area-inset-bottom,0px) + var(--space-3));box-shadow:inset 0 .5px 0 var(--sep)}
.saved{display:block;width:100%;min-height:32px;padding:var(--space-2) var(--space-3) 0;font-size:13px;color:var(--label2);text-align:left}
.saved b{color:var(--label);font-weight:600}
.saved:hover b{color:var(--tint)}
.side-foot>.icon-btn{display:none}

/* ================= home and pages: the column ================= */
.v-idle,.v-page{align-items:stretch;padding:0;overflow-y:auto}
.col{width:100%;max-width:calc(var(--col) + var(--gutter) * 2);margin:0 auto;padding:var(--space-9) var(--gutter) var(--space-4)}
.hm-hello h1,.pg-h1{font-size:34px;line-height:40px;font-weight:700;letter-spacing:-0.03em}
.hm-hello p{margin-top:var(--space-1);font-size:15px;line-height:22px;color:var(--label2);max-width:60ch}
.hm-hello p b{color:var(--label);font-weight:600}
.hero{text-align:left}
.hero h1{font-size:34px;line-height:40px;font-weight:700;letter-spacing:-0.03em}
.hero p{margin-top:var(--space-1);font-size:15px;line-height:22px;color:var(--label2);max-width:60ch}

/* start card: the only raised object on Home */
.hm-now{position:relative;margin-top:var(--space-6);padding:var(--space-6);border-radius:20px;background:var(--card);box-shadow:0 0 0 .5px var(--glass-edge),var(--shadow-s)}
.hm-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-5);align-items:center}
.rec{position:relative;width:136px;height:136px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 5px var(--ring);transition:transform .3s var(--spring)}
.rec .dot{width:112px;height:112px;border-radius:56px;background:var(--red);box-shadow:var(--shadow-dot);transition:transform .45s var(--spring),border-radius .45s var(--spring)}
.rec:hover .dot{transform:scale(1.03)}
.rec:active{opacity:1}
.rec:active .dot{transform:scale(.92)}
.rec.on .dot{transform:scale(.4);border-radius:24px}
.rec.on:active .dot{transform:scale(.36)}
.rec.sm{width:84px;height:84px;box-shadow:inset 0 0 0 4px var(--ring)}
.rec.sm .dot{width:68px;height:68px;border-radius:34px}
.rec.sm.on .dot{transform:scale(.45);border-radius:15px}
.rec:disabled{opacity:.35;cursor:not-allowed}
.hm-now .rec{width:76px;height:76px;box-shadow:inset 0 0 0 4px var(--ring)}
.hm-now .rec .dot{width:62px;height:62px;border-radius:31px}
.hm-title h2{font-size:22px;line-height:28px;font-weight:600;letter-spacing:-0.02em}
.hm-title p,.rec-label{display:block;margin-top:2px;font-size:15px;line-height:20px;color:var(--label2);font-weight:400}
.rec-label .kbd{margin-left:var(--space-1)}
.seg{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:2px;border-radius:9px;background:var(--fill);width:240px}
.seg button{position:relative;z-index:1;min-height:32px;border-radius:7px;font-size:13px;font-weight:600;transition:color .15s var(--spring)}
.seg button:active{opacity:.7}
.seg .thumb{position:absolute;top:2px;bottom:2px;left:2px;width:calc(50% - 2px);border-radius:7px;background:var(--thumb);box-shadow:var(--shadow-thumb);transition:transform .45s var(--spring)}
.seg[data-on="1"] .thumb{transform:translateX(100%)}
.seg[data-on="none"] .thumb{opacity:0}
.hm-now .seg{width:208px}
.seg3{grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
.seg3 .thumb{width:calc(33.333% - 1.4px)}
.seg3[data-on="1"] .thumb{transform:translateX(100%)}
.seg3[data-on="2"] .thumb{transform:translateX(200%)}
.hm-opts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:var(--space-5);padding-top:var(--space-4);box-shadow:inset 0 .5px 0 var(--sep)}
.pills{display:contents}
.pill-select{position:relative;display:inline-flex;align-items:center;max-width:100%;border-radius:999px}
.pill-select>span{display:none}
.pill-select>svg{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--label2)}
.pill-select>.ico{left:var(--space-3);width:15px;height:15px}
.pill-select>svg:not(.ico){right:var(--space-3);width:11px;height:11px}
.pill-select select{appearance:none;-webkit-appearance:none;min-height:36px;max-width:100%;padding:0 var(--space-7) 0 var(--space-8);border:0;border-radius:999px;background:var(--fill);box-shadow:inset 0 0 0 1px var(--field-edge);font-size:14px;font-weight:400;color:var(--label);cursor:pointer;text-overflow:ellipsis;white-space:nowrap;transition:background-color .15s var(--spring)}
.pill-select select:hover{background:var(--fill2)}
.pill-select option{color:var(--label);background:var(--card)}
.pill-select.set select{background:var(--tint-soft);color:var(--tint)}
.pill-select.set>svg{color:var(--tint)}
.pill-clear{position:relative;z-index:1;width:24px;height:24px;margin-right:calc(var(--space-2) * -1);border-radius:50%;display:grid;place-items:center;color:var(--tint)}
.pill-clear:hover{background:var(--fill)}
.hm-call{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-3);min-width:0}
.hm-steer{margin-top:var(--space-4);padding-top:var(--space-4);box-shadow:inset 0 .5px 0 var(--sep);font-size:14px;line-height:20px;color:var(--label2)}
.hm-steer p{max-width:62ch}
.hm-steer div{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}
.hm-steer .btn-f{background:var(--fill-card)}
.call-chip{display:inline-flex;align-items:center;gap:var(--space-2);height:36px;padding:0;border-radius:999px;background:none;color:var(--label2);font-size:14px;font-weight:400;transition:color .15s var(--spring)}
.call-chip:hover{color:var(--label)}
.call-chip svg{width:16px;height:16px}
.call-chip[aria-pressed=true]{color:var(--label)}
.ext-link{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:400;color:var(--tint);text-decoration:none}
.ext-link:hover{text-decoration:underline}

/* ================= the line ================= */
.ln{position:relative;margin-top:var(--space-8)}
.ln-list{position:relative}
.ln-list::before{content:"";position:absolute;left:calc(var(--gut) + var(--axis) / 2 - .75px);top:var(--space-4);bottom:var(--space-4);width:1.5px;background:var(--sep)}
.ln-head{display:flex;align-items:baseline;gap:var(--space-3);padding-left:calc(var(--gut) + var(--axis));margin-bottom:var(--space-2)}
.ln-head h2{font-size:20px;line-height:26px;font-weight:600;letter-spacing:-0.02em;margin-right:auto}
.ln-head .seg{width:180px;align-self:center}
.lnk{font-size:15px;font-weight:400;color:var(--tint);white-space:nowrap;min-height:32px;padding:0 var(--space-1);border-radius:8px}
.lnk:hover{text-decoration:underline}
.row-r{position:relative;display:grid;grid-template-columns:var(--gut) var(--axis) minmax(0,1fr) auto;align-items:start;min-height:52px;border-radius:10px;transition:background-color .15s var(--spring),opacity .2s var(--spring),transform .2s var(--spring)}
.row-r.hov:hover{background:var(--fill)}
.row-r.out{animation:rowOut .2s var(--spring) forwards}
.ln-g{padding:var(--space-3) var(--space-3) 0 0;text-align:right;font-size:13px;line-height:20px;font-weight:600;color:var(--label2);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ln-g.late{color:var(--label)}
.ln-g.now{color:var(--red-ink)}
.ln-n{position:relative;z-index:2;display:grid;justify-items:center;padding-top:var(--space-3)}
.ln-dot{position:relative;top:2px;width:9px;height:9px;margin-top:var(--space-1);border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--label3)}
.ln-dot.mk{background:var(--amber-bar);box-shadow:none}
.ln-c{min-width:0;padding:var(--space-3) var(--space-2) var(--space-3) var(--space-1)}
.ln-x{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-2) 0 0;font-size:13px;color:var(--label2);white-space:nowrap}
.l1{display:block;font-size:16px;line-height:22px;color:var(--label);overflow-wrap:break-word}
.l1 b{font-weight:600}
.l2{display:flex;flex-wrap:wrap;gap:0 var(--space-2);margin-top:2px;font-size:13px;line-height:18px;color:var(--label2)}
.l2 .late{color:var(--label);font-weight:400}
.ln-link{display:inline;text-align:left;white-space:normal;color:inherit;border-radius:6px}
.ln-link.cover::after{content:"";position:absolute;inset:0;border-radius:10px}
.ln-link.cover:empty{position:absolute;inset:0;z-index:1;display:block;border-radius:10px}
.ln-link.cover:empty::after{content:none}
.row-r .ck,.row-r .owner,.row-r .ln-x button,.row-r .sug{position:relative;z-index:2}
.row-r .ln-n{z-index:3}
.row-r:has(.ln-link.cover:focus-visible){outline:2px solid var(--tint);outline-offset:2px}
.ln-link.cover:focus-visible{outline:none}
.owner{font-weight:600;border-radius:4px;padding-block:var(--space-2);margin-block:calc(var(--space-2) * -1);vertical-align:baseline}
.owner:hover{text-decoration:underline}
.ck{position:relative;flex:none;width:44px;height:44px;margin:calc(var(--space-3) * -1);border-radius:50%;display:grid;place-items:center;color:var(--on-tint);transition:transform .2s var(--spring)}
.ck::before{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--ck-edge);transition:background-color .3s var(--spring),box-shadow .3s var(--spring)}
.ck svg{position:relative;width:12px;height:12px;opacity:0;transition:opacity .2s var(--spring)}
.ck:focus-visible{outline-offset:-9px;border-radius:50%}
.ck:hover::before{box-shadow:inset 0 0 0 1.5px var(--tint)}
.ck:active{transform:scale(.88);opacity:1}
.ck.done::before,.ck[aria-pressed="true"]::before{background:var(--tint);box-shadow:none}
.ck.done svg,.ck[aria-pressed="true"] svg{opacity:1}
.row-r.is-done .l1{color:var(--label3);text-decoration:line-through;text-decoration-color:var(--label3)}
/* one action pill: Nudge, Draft a follow-up, Recap my week, Download a backup, Remove sample, Make notes */
.nudge,.btn-f{min-height:36px;padding:0 var(--space-4);border-radius:999px;background:var(--fill);font-size:14px;font-weight:600;color:var(--tint);transition:background-color .15s var(--spring)}
.nudge:hover,.btn-f:hover{background:var(--fill2)}
.chip{display:inline-flex;align-items:center;height:20px;padding:0 var(--space-2);border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--fill);color:var(--label2)}
.c1{background:var(--h1-soft);color:var(--h1-ink)}.c2{background:var(--h2-soft);color:var(--h2-ink)}.c3{background:var(--h3-soft);color:var(--h3-ink)}.c4{background:var(--h4-soft);color:var(--h4-ink)}
.c5{background:var(--h5-soft);color:var(--h5-ink)}.c6{background:var(--h6-soft);color:var(--h6-ink)}.c7{background:var(--h7-soft);color:var(--h7-ink)}.c8{background:var(--h8-soft);color:var(--h8-ink)}
.d1{background:var(--h1-dot)}.d2{background:var(--h2-dot)}.d3{background:var(--h3-dot)}.d4{background:var(--h4-dot)}.d5{background:var(--h5-dot)}.d6{background:var(--h6-dot)}.d7{background:var(--h7-dot)}.d8{background:var(--h8-dot)}
.av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;box-shadow:0 0 0 2px var(--bg)}
.avs{display:flex}.avs .av + .av{margin-left:calc(var(--space-2) * -1)}
.av.more{background:var(--fill2);color:var(--label);font-size:11px}
.fdot-i{display:inline-block;width:8px;height:8px;border-radius:50%;align-self:center}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-2);margin-top:2px;font-size:13px;line-height:18px;color:var(--label2)}
.ln-day{padding:var(--space-4) 0 0 calc(var(--gut) + var(--axis) + var(--space-1));font-size:13px;font-weight:600;color:var(--label2)}
.sug{display:inline-flex;align-items:center;gap:var(--space-1);height:30px;padding:0 var(--space-1) 0 var(--space-3);border-radius:999px;background:var(--fill);font-size:13px;color:var(--label2);white-space:nowrap}
.sug b{color:var(--label);font-weight:600;max-width:140px;overflow:hidden;text-overflow:ellipsis}
.sug button{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:var(--label2)}
.sug button:first-of-type{color:var(--tint)}
.sug button:hover{background:var(--fill2)}
.sug .ico{width:14px;height:14px;stroke-width:2.2}
.empty{padding:var(--space-2) 0 0 calc(var(--gut) + var(--axis) + var(--space-1));font-size:15px;line-height:22px;color:var(--label2)}
.empty button{color:var(--tint);font-weight:400;white-space:normal;text-align:left}
.empty button.quiet{color:var(--label2)}
.open-n{font-variant-numeric:tabular-nums}
.fdot-i.fdot-h{width:12px;height:12px;vertical-align:middle;margin-right:var(--space-3)}
.tag-s{margin-left:var(--space-1)}
.tm-l{display:none}
@media (min-width:900px){.due-l{display:none}}
.lnk-in{display:inline;font:inherit;color:var(--tint);white-space:normal;text-align:left}
.lnk-in:hover{text-decoration:underline}
.due-a{color:var(--label2)}

/* recovery and backup rows: flat, hairlines, no box */
.hm-alert{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-top:var(--space-6);padding:var(--space-4) 0;box-shadow:inset 0 .5px 0 var(--sep),inset 0 -.5px 0 var(--sep);font-size:15px}
.hm-alert p{flex:1;min-width:220px}
.hm-alert b{font-weight:600}
.btn-t{min-height:36px;padding:0 var(--space-2);border-radius:8px;font-size:15px;font-weight:400;color:var(--label2)}
.btn-t:hover{color:var(--label)}
.btn-p{min-height:44px;padding:0 var(--space-5);border-radius:12px;background:var(--tint-fill);color:var(--on-tint);font-size:15px;font-weight:600}

/* your week: type over hairlines, no icons */
.wk-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-left:calc(var(--gut) + var(--axis) + var(--space-1))}
.wk-grid div{padding:2px var(--space-5)}
.wk-grid div:first-child{padding-left:0}
.wk-grid div + div{box-shadow:inset .5px 0 0 var(--sep)}
.wk-v{display:block;font-family:var(--font-d);font-size:22px;line-height:28px;font-weight:600;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.wk-v small{font-size:15px;font-weight:600;color:var(--label2)}
.wk-l{display:block;font-size:13px;color:var(--label2)}
.wk-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);margin:var(--space-4) 0 0 calc(var(--gut) + var(--axis) + var(--space-1));font-size:15px;color:var(--label2)}

/* ================= pages ================= */
.pg-sub{margin-top:var(--space-1);font-size:15px;color:var(--label2)}
.pg-head{display:flex;align-items:flex-start;gap:var(--space-4)}
.pg-head>div{flex:1;min-width:0}
.pg-ctl{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-5)}
.pg-ctl .seg{width:200px}
.pg-ctl .seg.w2{width:240px}
.fchips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-5)}
.fchip{display:inline-flex;align-items:center;gap:var(--space-2);min-height:32px;padding:0 var(--space-3);border-radius:999px;background:var(--fill);font-size:14px;font-weight:400}
.fchip:hover{background:var(--fill2)}
.fchip[aria-pressed="true"]{background:var(--fill2);font-weight:600;box-shadow:inset 0 0 0 1px var(--sep)}
.ofilter{display:inline-flex;align-items:center;gap:var(--space-2);min-height:32px;margin-top:var(--space-4);padding:0 var(--space-1) 0 var(--space-3);border-radius:999px;background:var(--fill);font-size:14px;font-weight:400}
.ofilter button{width:24px;height:24px;border-radius:50%;display:grid;place-items:center}
.ofilter button:hover{background:var(--fill2)}
.more-btn{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--tint);background:var(--fill)}
.menu{position:absolute;z-index:30;min-width:200px;padding:var(--space-1);border-radius:14px}
.menu button{display:flex;width:100%;min-height:44px;align-items:center;padding:0 var(--space-3);border-radius:10px;font-size:15px;text-align:left}
.menu button:hover{background:var(--fill)}
.menu .danger{color:var(--red-ink)}
.grp-h{display:flex;align-items:baseline;gap:var(--space-3);padding:var(--space-5) 0 var(--space-1) calc(var(--gut) + var(--axis) + var(--space-1))}
.grp-h b{font-size:13px;font-weight:600;color:var(--label2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grp-h span{margin-left:auto;font-size:13px;color:var(--label3);white-space:nowrap}
.grp-h.person b{font-size:15px;color:var(--label)}
.grp-h .av{width:24px;height:24px;font-size:11px;align-self:center}
/* names and words */
.wd-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:var(--space-3);margin-top:var(--space-6)}
.wd-form label{display:flex;flex-direction:column;gap:var(--space-1);font-size:13px;color:var(--label2)}
.field{width:100%;min-height:44px;padding:0 var(--space-4);border-radius:12px;border:0;background:var(--card2);font-size:16px;color:var(--label);box-shadow:inset 0 0 0 1px var(--field-edge);appearance:none}
.field:focus{outline:none;box-shadow:inset 0 0 0 2px var(--tint)}
.field::placeholder{color:var(--label3)}
textarea.field{min-height:180px;padding:var(--space-3) var(--space-4);line-height:1.5;resize:vertical}
textarea.field.short{min-height:120px}
select.field{background-image:linear-gradient(45deg,transparent 50%,var(--label2) 50%),linear-gradient(135deg,var(--label2) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:var(--space-8)}
.wd-form .btn-p{align-self:end}
.wd-list{margin-top:var(--space-6)}
.wd-row{display:flex;align-items:center;gap:var(--space-3);min-height:52px;padding:0 var(--space-1) 0 0;box-shadow:inset 0 -.5px 0 var(--sep)}
.wd-row b{font-size:16px;font-weight:400}
.wd-row span{flex:1;min-width:0;font-size:13px;color:var(--label2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wd-row button{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--label2)}
.wd-row button:hover{background:var(--fill);color:var(--red-ink)}
.wd-me{margin-top:var(--space-8);max-width:420px}
.wd-me label{display:block;margin-bottom:var(--space-2);font-size:15px;color:var(--label2)}

/* ================= ask bar, answer panel, slash menu ================= */
.askdock{position:sticky;bottom:0;z-index:8;margin-top:auto;pointer-events:none}
.askdock-in{width:100%;max-width:calc(var(--col) + var(--gutter) * 2);margin:0 auto;padding:var(--space-8) var(--gutter) var(--space-5);background:linear-gradient(to top,var(--bg) 55%,transparent);pointer-events:auto}
.askbar{display:flex;align-items:center;gap:var(--space-2);height:52px;padding:0 var(--space-2) 0 var(--space-4);border-radius:26px;box-shadow:inset 0 0 0 1px var(--field-edge),var(--shadow-l)}
.askbar>.ico{color:var(--label3)}
.askbar input{flex:1;min-width:0;height:100%;border:0;background:none;outline:none;font-size:16px;color:var(--label)}
.askbar input::placeholder{color:var(--label2)}
.askbar:focus-within{box-shadow:inset 0 0 0 2px var(--tint),var(--shadow-l)}
.achip{display:inline-flex;align-items:center;gap:var(--space-2);height:36px;padding:0 var(--space-3);border-radius:18px;background:var(--fill);font-size:14px;font-weight:400}
.achip:hover{background:var(--fill2)}
.achip .ico{width:15px;height:15px;color:var(--label2)}
.asend{width:36px;height:36px;border-radius:50%;background:var(--tint-fill);color:var(--on-tint);display:grid;place-items:center}
.asend .ico{stroke-width:2.4}
.tabs{display:none}
.scrim.ask-scrim{z-index:7;display:block;padding:0;background:transparent;animation:none}
.apanel{color:var(--label);position:fixed;display:flex;flex-direction:column;max-height:60dvh;overflow:hidden;padding:0;border-radius:20px;background:var(--card);box-shadow:0 0 0 .5px var(--glass-edge),var(--shadow-l);animation:rise .35s var(--spring) backwards}
.ahead{flex:none;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-5) var(--space-2)}
.abody{min-height:0;overflow-y:auto;padding:0 var(--space-5) var(--space-5)}
.askdock-in{position:relative}
.apanel .aq{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--label2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apanel .aa{font-size:16px;line-height:24px}
.apanel .aa h3{font-size:17px;font-weight:600;margin:var(--space-4) 0 var(--space-1)}
.apanel .aa ul{margin:var(--space-1) 0;padding-left:var(--space-5)}
.apanel .aa li{margin:2px 0}
.apanel .aa mark{background:var(--amber-soft);color:inherit;border-radius:3px}
.apanel .hint{margin-top:var(--space-3);font-size:13px;color:var(--label2)}
.asrc{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:var(--space-4);font-size:13px;color:var(--label2)}
.asrc button{display:inline-flex;align-items:center;gap:var(--space-2);min-height:28px;padding:0 var(--space-3);border-radius:999px;background:var(--fill);font-size:13px;font-weight:400;color:var(--label);max-width:260px;overflow:hidden;text-overflow:ellipsis}
.aact{display:flex;gap:var(--space-1);margin-right:calc(var(--space-2) * -1)}
.aact button{min-height:36px;padding:0 var(--space-2);border-radius:8px;font-size:15px;font-weight:400;color:var(--tint)}
.aact button:hover{background:var(--fill)}
.slash{position:absolute;left:var(--gutter);right:var(--gutter);bottom:calc(100% - var(--space-6));padding:var(--space-1);border-radius:14px;animation:rise .25s var(--spring) backwards}
.slash button{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:44px;padding:0 var(--space-3);border-radius:10px;text-align:left}
.slash button b{font-size:15px;font-weight:600}
.slash button span{font-size:13px;color:var(--label2);overflow:hidden;text-overflow:ellipsis}
.slash button[aria-selected="true"],.slash button:hover{background:var(--fill)}
.think i{display:inline-block;width:8px;height:8px;margin:0 var(--space-1);border-radius:50%;background:var(--label);animation:think 1.2s ease-in-out infinite}
.think i:nth-child(2){animation-delay:.15s}.think i:nth-child(3){animation-delay:.3s}

/* ================= recording ================= */
.v-rec{padding:var(--space-1) var(--space-6) calc(env(safe-area-inset-bottom,0px) + var(--space-7));animation:fadeIn .35s var(--spring) backwards}
.rec-top{position:relative;display:flex;align-items:center;justify-content:center;width:100%;max-width:960px;min-height:44px}
.island{display:inline-flex;align-items:center;gap:var(--space-3);height:36px;padding:0 var(--space-4) 0 var(--space-3);border-radius:999px;background:var(--island);color:var(--on-island);box-shadow:0 0 0 1px var(--island-edge),var(--shadow-s);animation:drop .45s var(--spring) backwards}
.island .r{width:8px;height:8px;border-radius:50%;background:var(--red);animation:pulse 1.4s ease-in-out infinite}
.island .t{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.wv{display:flex;align-items:center;gap:2px;height:16px}
.wv i{width:2.5px;height:16px;border-radius:2px;background:var(--wave);transform:scaleY(.3);transition:transform .09s linear}
.wv.css i{animation:wv .9s ease-in-out infinite}
.wv.css i:nth-child(2){animation-delay:.12s}.wv.css i:nth-child(3){animation-delay:.24s}.wv.css i:nth-child(4){animation-delay:.36s}.wv.css i:nth-child(5){animation-delay:.18s}
.consent{position:absolute;right:0;display:inline-flex;align-items:center;gap:var(--space-2);min-height:36px;padding:0 var(--space-3);border-radius:999px;background:var(--fill);font-size:14px;font-weight:400;color:var(--label)}
.consent:hover{background:var(--fill2)}
.consent .ico{width:15px;height:15px;color:var(--label2)}
.consent .c-short{display:none}
.rec-meta{margin-top:var(--space-5);font-size:13px;font-weight:600;color:var(--label2);align-self:stretch;max-width:760px;margin-inline:auto;width:100%}
.lyrics{flex:1;min-height:0;width:100%;max-width:760px;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--space-5);overflow:hidden;padding-bottom:var(--space-3);-webkit-mask-image:linear-gradient(to bottom,transparent 0,var(--mask) 24%,var(--mask) 100%);mask-image:linear-gradient(to bottom,transparent 0,var(--mask) 24%,var(--mask) 100%)}
.ly{margin:0;font-family:var(--font-d);font-size:27px;line-height:1.22;font-weight:700;letter-spacing:-0.02em;color:var(--past);transition:color .45s var(--spring);animation:rise .45s var(--spring) backwards}
.ly.now{color:var(--label)}
.ly.interim{color:var(--label2);animation:none}
.ly time{display:block;font-family:var(--font);font-size:13px;font-weight:600;letter-spacing:0;color:var(--label2);margin-bottom:2px;font-variant-numeric:tabular-nums}
.ly.mk{color:var(--label);box-shadow:inset 4px 0 0 var(--amber-bar);padding-left:var(--space-4)}
.ly.mk time{color:var(--amber)}
.empty-ly{font-family:var(--font-d);font-size:27px;font-weight:700;letter-spacing:-0.02em;color:var(--past)}
.rec-foot{display:flex;align-items:center;justify-content:center;gap:var(--space-7);padding-top:var(--space-4)}
.rec-foot>.rec-label{display:none}
.rf-side{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);width:96px;font-size:13px;font-weight:400;color:var(--label2)}
.rf-side>span:first-child{width:44px;height:44px;border-radius:50%;background:var(--fill);display:grid;place-items:center;color:var(--label);transition:background-color .15s var(--spring)}
.rf-side:hover>span:first-child{background:var(--fill2)}
.rf-side.on>span:first-child{background:var(--amber-soft);color:var(--amber)}
.rf-hint{font-size:13px;color:var(--label2);text-align:center;margin-top:var(--space-2)}
/* v2.3: words heard, and the calm warning when speech is heard but no words arrive */
.rec-health{margin-top:var(--space-1);font-size:13px;line-height:18px;color:var(--label2);font-variant-numeric:tabular-nums;align-self:stretch;max-width:760px;margin-inline:auto;width:100%}
.rec-warn{align-self:stretch;max-width:760px;width:100%;margin:var(--space-3) auto 0;padding:var(--space-3) var(--space-4);border-radius:14px;background:var(--amber-soft);font-size:15px;line-height:21px;color:var(--label)}
.rec-warn b{font-weight:600}
.rw-act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:var(--space-3)}
.rw-act .pill-select select,.rw-act .btn-f{background:var(--card)}
.rw-act .pill-select select:hover,.rw-act .btn-f:hover{background:var(--bg2)}

/* ================= making ================= */
.v-making{justify-content:center;gap:var(--space-4);padding-inline:var(--space-4);animation:fadeIn .35s var(--spring) backwards}
.v-making h2{font-size:22px;font-weight:600;text-align:center}
.v-making p{font-size:15px;color:var(--label2);text-align:center;max-width:46ch}
/* the one-time speech-to-text choice: the second option is the grey fill on a card (4.5:1 in both themes) */
#sttChoice .btn-wide{background:var(--fill-card)}
#sttChoice .btn-wide:hover{background:var(--fill2)}
#sttChoice h2:focus{outline:none}
.stt-ask .btn-f{min-height:44px;border-radius:12px;padding:0 var(--space-5)}
.stt-ask{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--space-2);max-width:420px}

/* ================= note view ================= */
.v-note{background:var(--bg);align-items:stretch;position:relative;animation:sheet .45s var(--spring) backwards}
.note-scroll{flex:1;min-height:0;overflow-y:auto;padding:var(--space-3) var(--space-4) calc(env(safe-area-inset-bottom,0px) + 120px)}
.note-inner{max-width:var(--col);margin:0 auto}
.note-title{font-size:30px;line-height:1.12;font-weight:700;letter-spacing:-0.03em}
.note-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:var(--space-2);font-size:15px;color:var(--label2)}
.kicker{margin-top:var(--space-2);font-size:15px;color:var(--label2)}
.kicker:empty{display:none}
.nt-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:var(--space-4)}
.note-tabs{margin:0}
.nt-tools .pill-select select{min-height:32px}
.note-scroll .sec-h{display:block;margin:var(--space-6) 0 var(--space-1);padding-left:calc(var(--gut) + var(--axis) + var(--space-1));font-family:var(--font-d);font-size:17px;line-height:24px;font-weight:600;letter-spacing:-0.015em;color:var(--label)}
.nb-sec{position:relative}
.nb-sec::before{content:"";position:absolute;left:calc(var(--gut) + var(--axis) / 2 - .75px);top:var(--space-4);bottom:var(--space-4);width:1.5px;background:var(--sep)}
.nb-row{min-height:0}
.nb-row .ln-c{padding-top:var(--space-2);padding-bottom:var(--space-2)}
.nb-row .ln-n,.nb-row .ln-g{padding-top:var(--space-2)}
.nb-row .l1{line-height:24px}
.rc-t{min-height:24px;padding:0 var(--space-1);border-radius:6px;font-size:13px;font-weight:400;color:var(--tint);font-variant-numeric:tabular-nums}
.rc-t:hover{background:var(--tint-soft)}
.rc-t[aria-expanded="true"]{background:var(--tint-soft)}
.rcpt{grid-column:3 / -1;margin:0 var(--space-2) var(--space-3) var(--space-1);padding:var(--space-3) var(--space-4);border-radius:12px;background:var(--fill);font-size:14px;line-height:1.5;color:var(--label2);animation:rise .3s var(--spring) backwards}
.rcpt div + div{margin-top:var(--space-1)}
.rcpt time{font-weight:600;color:var(--label);margin-right:var(--space-2);font-variant-numeric:tabular-nums}
.flag{display:inline-flex;align-items:center;height:20px;margin-left:var(--space-2);padding:0 var(--space-2);border-radius:6px;font-size:12px;font-weight:600;background:var(--amber-soft);color:var(--amber);vertical-align:2px;white-space:nowrap}
.chk-line{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-4);padding-left:calc(var(--gut) + var(--axis) + var(--space-1));font-size:14px;color:var(--label2)}
.inline-act{display:flex;flex-wrap:wrap;gap:var(--space-2);padding:var(--space-2) 0 0 calc(var(--gut) + var(--axis) + var(--space-1))}
.peak{margin:var(--space-8) 0 0 calc(var(--gut) + var(--axis) + var(--space-1));padding:var(--space-4) 0;box-shadow:inset 0 .5px 0 var(--sep),inset 0 -.5px 0 var(--sep);font-size:15px;line-height:22px}
.peak div{display:flex;gap:var(--space-2);margin-top:var(--space-3)}
/* v2.3: a recording with too few words gets the likely reason and a fix, never invented notes */
.thin-fix{margin:var(--space-6) 0 0 calc(var(--gut) + var(--axis) + var(--space-1));padding:var(--space-4) 0;box-shadow:inset 0 .5px 0 var(--sep),inset 0 -.5px 0 var(--sep);font-size:15px;line-height:22px;max-width:62ch}
.thin-fix p + p{margin-top:var(--space-2)}
.thin-fix b{font-weight:600}
.tf-act{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}
.card{color:var(--label);background:var(--card2);border-radius:14px;overflow:hidden;margin-left:calc(var(--gut) + var(--axis) + var(--space-1))}
.row{display:flex;gap:var(--space-3);align-items:flex-start;width:100%;padding:var(--space-3) var(--space-4);font-size:16px;line-height:1.45;text-align:left;white-space:normal}
.row b{font-weight:600}
.qtext{min-height:200px;padding:var(--space-4);font-size:18px;line-height:1.55;outline:none;white-space:pre-wrap;background:var(--fill);border-radius:14px}
.qtext:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--tint)}
.v-note .card:has(.qtext){background:none}
.tr-sec{margin-top:var(--space-5)}
.tr-row .ln-g{font-weight:400}
.tr-row.mk .ln-g{color:var(--amber)}
.engine-note{display:block;margin:var(--space-6) 0 0;padding-left:calc(var(--gut) + var(--axis) + var(--space-1));font-size:13px;color:var(--label2)}
.engine-note button{color:var(--tint);font-size:13px;font-weight:400}
.ask-list{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-6);padding-left:calc(var(--gut) + var(--axis) + var(--space-1))}
.qa{display:flex;flex-direction:column;gap:var(--space-2);animation:rise .35s var(--spring) backwards}
.qa .q{align-self:flex-end;max-width:80%;padding:var(--space-2) var(--space-4);border-radius:18px;border-bottom-right-radius:6px;background:var(--tint-fill);color:var(--on-tint);font-size:16px}
.qa .a{align-self:flex-start;max-width:86%;padding:var(--space-2) var(--space-4);border-radius:18px;border-bottom-left-radius:6px;background:var(--fill);font-size:16px}
.qa .a button{color:var(--tint);font-weight:400}
.ask-row{display:flex;gap:var(--space-2);margin-top:var(--space-3);padding-left:calc(var(--gut) + var(--axis) + var(--space-1))}
.ask-row input{flex:1;min-width:0;min-height:44px;padding:0 var(--space-4);border-radius:999px;border:0;background:var(--card2);font-size:16px;box-shadow:inset 0 0 0 1px var(--field-edge)}
.ask-row input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--tint)}
.send{width:44px;height:44px;border-radius:50%;background:var(--tint-fill);color:var(--on-tint);display:grid;place-items:center}
.send svg{width:18px;height:18px}
.toolbar{position:absolute;left:var(--space-4);right:var(--space-4);bottom:calc(env(safe-area-inset-bottom,0px) + var(--space-5));z-index:5;display:flex;justify-content:space-around;align-items:center;max-width:520px;margin:0 auto;border-radius:999px;padding:var(--space-1) var(--space-2)}
.tb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:56px;min-height:52px;border-radius:999px;font-size:11px;font-weight:400;color:var(--tint);transition:background-color .15s var(--spring),transform .2s var(--spring)}
.tb:hover{background:var(--fill)}
.tb:active{transform:scale(.94)}
.tb svg{width:22px;height:22px}
.tb.red{color:var(--red-ink)}
.fix-pop{position:absolute;z-index:30;width:260px;padding:var(--space-3);border-radius:14px}
.fix-pop b{display:block;font-size:13px;font-weight:600;color:var(--label2);margin-bottom:var(--space-2)}
.fix-pop .field{min-height:40px}
.fix-pop .btn-p{width:100%;min-height:40px;margin-top:var(--space-2)}

/* ================= sheets ================= */
.scrim{position:fixed;inset:0;z-index:50;background:var(--scrim);display:flex;align-items:flex-end;justify-content:center;padding:var(--space-2);animation:fadeIn .3s var(--spring) backwards}
.panel{color:var(--label);width:100%;max-width:460px;max-height:88vh;max-height:88dvh;overflow-y:auto;background:var(--card);border-radius:22px;padding:var(--space-5) var(--space-4) calc(env(safe-area-inset-bottom,0px) + var(--space-4));box-shadow:var(--shadow-l);animation:sheetUp .45s var(--spring) backwards}
.panel h2{font-size:20px;font-weight:700;text-align:center}
.panel .sub{margin:var(--space-2) auto var(--space-4);max-width:36ch;font-size:15px;line-height:1.45;color:var(--label2);text-align:center}
.opts,.facts,.status,.keys{background:transparent;border-radius:0;box-shadow:inset 0 .5px 0 var(--sep),inset 0 -.5px 0 var(--sep)}
.opts{display:flex;flex-direction:column}
.opts + .opts{margin-top:var(--space-4)}
.opt{display:flex;align-items:center;gap:var(--space-4);min-height:52px;padding:0 var(--space-2);border-radius:10px;font-size:17px;text-align:left;transition:background-color .15s var(--spring)}
.opt:hover{background:var(--fill)}
.opt + .opt{box-shadow:inset 48px .5px 0 var(--card),inset 0 .5px 0 var(--sep)}
.opt:hover + .opt,.opt + .opt:hover{box-shadow:none}
.opts :focus-visible,.facts :focus-visible{outline-offset:-3px}
.opt .oi{width:24px;height:24px;display:grid;place-items:center;color:var(--tint);flex:none}
.opt .oi svg{width:22px;height:22px}
.opt small{display:block;font-size:13px;color:var(--label2)}
.opt.danger,.opt.danger .oi{color:var(--red-ink)}
.cancel{display:block;width:100%;min-height:48px;margin-top:var(--space-2);border-radius:12px;font-size:17px;font-weight:400;color:var(--tint)}
.cancel:hover{background:var(--fill)}
.btn-wide{display:block;width:100%;min-height:52px;margin-top:var(--space-2);border-radius:14px;background:var(--fill);font-size:17px;font-weight:600;color:var(--tint)}
.btn-wide:hover{background:var(--fill2)}
.form-l{display:block;margin:var(--space-4) var(--space-1) var(--space-2);font-size:13px;color:var(--label2)}
.panel .field{min-height:44px}
.hint{margin:var(--space-2) var(--space-1) 0;font-size:13px;line-height:1.5;color:var(--label2)}
.hint a{color:var(--tint)}
.status{margin-top:var(--space-4);padding:var(--space-3) var(--space-1);font-size:14px;line-height:1.45;color:var(--label2)}
.status b{color:var(--label)}
.done-btn{display:block;width:100%;min-height:52px;margin-top:var(--space-5);border-radius:14px;background:var(--tint-fill);color:var(--on-tint);font-size:17px;font-weight:600}
.panel>.done-btn:last-child{position:sticky;bottom:0;box-shadow:0 -16px 16px var(--card),0 16px 0 var(--card)}
.facts{display:flex;flex-direction:column}
.fact{display:flex;gap:var(--space-3);padding:var(--space-4) var(--space-1);font-size:15px;line-height:1.45;color:var(--label2)}
#privNow:empty{display:none}
.fact + .fact{box-shadow:inset 0 .5px 0 var(--sep)}
.fact b{color:var(--label)}
.fact svg{width:22px;height:22px;color:var(--tint);margin-top:1px}
.set-more{margin-top:var(--space-2)}
.set-row{display:flex;align-items:center;gap:var(--space-3);min-height:52px;padding:0 var(--space-1);font-size:16px}
.set-row + .set-row{box-shadow:inset 0 .5px 0 var(--sep)}
.set-row>span{flex:1;min-width:0}
.set-row button{min-height:44px;font-size:16px;font-weight:400;color:var(--tint)}
.switch{display:grid;place-items:center;min-width:51px}
.call-chip i,.switch i{width:30px;height:18px;border-radius:999px;background:var(--label3);position:relative;transition:background-color .25s var(--spring)}
.call-chip i::after,.switch i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--knob);transition:transform .3s var(--spring)}
.call-chip[aria-pressed=true] i,.switch[aria-checked=true] i{background:var(--switch-on)}
.call-chip[aria-pressed=true] i::after,.switch[aria-checked=true] i::after{transform:translateX(12px)}
.switch i{width:44px;height:26px}
.switch i::after{width:22px;height:22px}
.switch[aria-checked=true] i::after{transform:translateX(18px)}
.sh-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);margin-top:var(--space-3)}
.sh-actions button{min-height:44px;border-radius:12px;font-size:15px;font-weight:600;color:var(--tint)}
.sh-actions button:hover{background:var(--fill)}
.sh-actions button:first-child{background:var(--tint-fill);color:var(--on-tint)}
.panel .seg{width:100%;margin-top:var(--space-2)}
.keys{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-2) var(--space-4);align-items:center;padding:var(--space-4) var(--space-1);font-size:15px}
.keys kbd{justify-self:start}

/* ================= toast ================= */
.toast,.vtoast{position:fixed;top:calc(env(safe-area-inset-top,0px) + var(--space-3));left:50%;z-index:80;transform:translate(-50%,-30px) scale(.9);opacity:0;pointer-events:none;display:flex;align-items:center;gap:var(--space-3);max-width:calc(100% - 32px);padding:var(--space-2) var(--space-5);min-height:40px;border-radius:999px;background:var(--island);color:var(--on-island);font-size:14px;font-weight:600;box-shadow:0 0 0 1px var(--island-edge),var(--shadow-toast);transition:transform .45s var(--spring),opacity .3s var(--spring)}
/* the toast sizes to its text (one line on a phone); max-width still caps it */
.toast,.vtoast{width:max-content}
.toast.show,.vtoast.show{opacity:1;transform:translate(-50%,0) scale(1);pointer-events:auto}
.vtoast button{font-size:14px;font-weight:600;color:var(--tint);min-height:28px;padding:0 var(--space-1)}
:root .vtoast button{color:var(--on-island);text-decoration:underline;text-underline-offset:3px}

/* ================= motion ================= */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{to{opacity:0}}
@keyframes drop{from{transform:translateY(-12px) scale(.94);opacity:0}to{transform:none;opacity:1}}
@keyframes pulse{50%{opacity:.35}}
@keyframes wv{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@keyframes rise{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
@keyframes sheet{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes sheetUp{from{transform:translateY(48px);opacity:0}to{transform:none;opacity:1}}
@keyframes rowOut{to{opacity:0;transform:translateY(-4px)}}
@keyframes think{0%,100%{opacity:.15;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
  .row-r.out{animation-name:fadeOut}
}

/* ================= phone ================= */
@media (max-width:899px){
  :root{--gutter:var(--space-4);--gut:0px;--axis:28px}
  /* the record screen is one viewport tall, so the Stop button stays on screen however long the transcript gets */
  .app[data-view="rec"] .main{height:100vh;height:100dvh}
  .desk-only{display:none!important}
  .bar{position:sticky;top:0;z-index:9;background:var(--glass);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:inset 0 -.5px 0 var(--sep)}
  .app[data-view="rec"] .bar,.app[data-view="making"] .bar{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .app.list-open .side{display:flex;position:fixed;inset:0;z-index:40;overflow-y:auto;background:var(--bg);animation:sheetUp .45s var(--spring) backwards}
  .app.list-open .side .ni{min-height:44px}
  .side-head .icon-btn,.fhead button{width:44px;height:44px}
  .new-btn{min-height:44px}
  .search input{height:44px}
  .col{padding:var(--space-5) var(--gutter) 176px}
  .hm-hello h1,.hero h1,.pg-h1{font-size:30px;line-height:36px}
  .hm-now{padding:var(--space-5)}
  .hm-top{grid-template-columns:minmax(0,1fr)}
  .hm-now .rec{display:none}
  .hm-now .seg{width:100%}
  .pill-select select{font-size:16px}
  .hm-title h2{font-size:20px;line-height:26px}
  .hm-call{display:none}
  .ln-x .avs,.row-r .sug{display:none}
  :root{--gut:0px}
  .row-r{grid-template-columns:var(--axis) minmax(0,1fr)}
  .row-r>.ln-g{display:none}
  .row-r .ln-x{grid-column:2;padding:0 0 var(--space-3) var(--space-1)}
  .row-r .ln-x:empty{display:none}
  .tm-l{display:inline}
  .nb-row>.ln-g{display:block;grid-column:2;grid-row:2;justify-self:start;padding:0 0 var(--space-2) var(--space-1)}
  .nb-row>.ln-g:empty{display:none}
  .rcpt{grid-column:2}
  .wk-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--space-4)}
  .wk-grid div:nth-child(3){padding-left:0;box-shadow:none}
  .wd-form{grid-template-columns:minmax(0,1fr)}
  .v-idle,.v-page{overflow:visible}
  .askdock{position:fixed;left:0;right:0}
  .askdock-in{padding:var(--space-2) var(--space-4) calc(env(safe-area-inset-bottom,0px) + var(--space-1));background:var(--bg);box-shadow:inset 0 .5px 0 var(--sep)}
  .askbar{height:44px;border-radius:22px;background:var(--fill);box-shadow:inset 0 0 0 1px var(--field-edge);-webkit-backdrop-filter:none;backdrop-filter:none}
  .askbar:focus-within{box-shadow:inset 0 0 0 2px var(--tint)}
  .askbar .achip{display:none}
  .tabs{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-top:var(--space-2)}
  .tab{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:48px;justify-content:center;font-size:11px;font-weight:400;color:var(--label2)}
  .tab .ico{width:24px;height:24px}
  .tab[aria-current="page"]{color:var(--tint)}
  .tab .cnt{display:inline-block;margin-left:var(--space-1);padding:0 var(--space-1);min-width:18px;border-radius:9px;background:var(--fill2);color:var(--label);font-size:11px;font-weight:600}
  .tabrec{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 3.5px var(--ring)}
  .tabrec i{width:48px;height:48px;border-radius:50%;background:var(--red);box-shadow:var(--shadow-dot);transition:transform .2s var(--spring)}
  .tabrec:active i{transform:scale(.92)}
  .slash{left:var(--space-2);right:var(--space-2);bottom:calc(100% + var(--space-2))}
  .app:not([data-view="idle"]):not([data-view="page"]) .askdock{display:none}
  .v-rec{padding:var(--space-1) var(--space-4) calc(env(safe-area-inset-bottom,0px) + var(--space-6))}
  .rec-top{justify-content:space-between}
  .consent{position:static}
  .rec-foot{gap:var(--space-5)}
  .note-title{font-size:28px}
  .toolbar{position:fixed}
  .scrim{align-items:flex-end}
  .tr-row>.ln-g{display:block;grid-column:2;grid-row:1;justify-self:start;padding:var(--space-2) 0 0 var(--space-1)}
  .tr-row>.ln-c{grid-column:2;grid-row:2;padding-top:0}
  .sh-actions{grid-template-columns:1fr 1fr}
  .sh-actions button:first-child{grid-column:1 / -1}
  /* every control is at least 44px to the finger; small inline ones grow their box, not the layout */
  .seg button{min-height:44px}
  .ln-head{flex-wrap:wrap}
  .ln-head h2{white-space:nowrap}
  .ln-head .seg{order:3;width:100%;margin-top:var(--space-2)}
  .lnk,.nudge,.fchip,.btn-f,.btn-t,.more-btn,.aact button,.asrc button,.pill-select select,.nt-tools .pill-select select,.consent,.ofilter,.achip{min-height:44px}
  .more-btn{width:44px;height:44px}
  .fchip,.set-row button,.consent,.asend{min-width:44px}
  .asend{height:44px}
  .ofilter button,.pill-clear,.wd-row button{width:44px;height:44px}
  .ofilter{padding-right:0}
  .saved{min-height:44px;padding-top:0}
  .nb-row>.ln-g{overflow:visible}
  .rc-t{position:relative;z-index:1;min-height:44px;margin-block:calc(var(--space-3) * -1);min-width:44px}
  .owner{display:inline;min-width:0;padding:var(--space-3) var(--space-2);margin:calc(var(--space-3) * -1) calc(var(--space-2) * -1)}
  .lnk-in,.empty button,.engine-note button,.qa .a button,.hint a{display:inline-block;line-height:20px;padding-block:var(--space-3);margin-block:calc(var(--space-3) * -1)}
  .vtoast button{min-height:44px;margin-block:-2px}
  .fix-pop .field,.fix-pop .btn-p{min-height:44px}
}
@media (hover:none){.new-btn .kbd{display:none}}
@media (max-width:420px){
  .rf-side{width:72px}
  .consent .c-long{display:none}
  .consent .c-short{display:inline}
}

/* ================= laptop ================= */
@media (min-width:900px){
  .phone-only{display:none!important}
  :root{--side-w:240px}
  .app{grid-template-columns:var(--side-w) minmax(0,1fr);height:100vh;height:100dvh;overflow:hidden}
  .side{position:relative;z-index:8;display:flex;background:var(--side);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);box-shadow:inset -.5px 0 0 var(--sep);height:100vh;height:100dvh;overflow-y:auto}
  .main{height:100vh;height:100dvh;overflow:hidden}
  .bar{display:none}
  .v-rec{padding:var(--space-5) var(--space-8) var(--space-8)}
  .ly{font-size:40px;line-height:1.16}
  .empty-ly{font-size:40px}
  .note-scroll{padding:76px var(--space-8) var(--space-9)}
  .note-title{font-size:36px}
  .toolbar{position:absolute;top:var(--space-3);right:var(--space-4);left:auto;bottom:auto;margin:0;padding:2px var(--space-1);gap:2px;box-shadow:0 0 0 .5px var(--glass-edge),var(--shadow-s),inset 0 1px 0 var(--glass-hi)}
  .tb{flex-direction:row;gap:var(--space-2);min-width:0;min-height:36px;padding:0 var(--space-3);font-size:13px}
  .tb svg{width:17px;height:17px}
  .v-note{animation:fadeIn .35s var(--spring) backwards}
  .scrim{align-items:center}
  .panel{border-radius:18px}
}
@media (min-width:900px) and (max-width:1099px){:root{--gutter:var(--space-7)}}
@media (min-width:1280px){:root{--side-w:264px}}
.nt-t{font-weight:600;overflow:hidden;text-overflow:ellipsis}

/* ================= v2.1: Insights ================= */
.pg-head .ins-copy{align-self:center}
.ins-lead{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--space-7);align-items:end;margin-top:var(--space-7);padding-bottom:var(--space-6);box-shadow:inset 0 -.5px 0 var(--sep)}
.ins-big{font-family:var(--font-d);font-size:64px;line-height:68px;font-weight:700;letter-spacing:-0.035em;font-variant-numeric:tabular-nums;white-space:nowrap}
.ins-big small{font-size:28px;font-weight:600;letter-spacing:-0.02em;color:var(--label2)}
.ins-cap{margin-top:var(--space-2);font-size:17px;line-height:24px;color:var(--label2);max-width:44ch}
.ins-ledger{display:flex;flex-direction:column;margin:0}
.ins-ledger div{display:flex;align-items:baseline;gap:var(--space-3);min-height:44px;padding:var(--space-2) 0;box-shadow:inset 0 -.5px 0 var(--sep)}
.ins-ledger div:last-child{box-shadow:none}
.ins-ledger dt{flex:1;min-width:0;font-size:15px;color:var(--label2)}
.ins-ledger dd{margin:0;font-family:var(--font-d);font-size:22px;line-height:28px;font-weight:600;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;text-align:right}
.ins-ledger dd small{display:block;font-family:var(--font);font-size:13px;line-height:18px;font-weight:400;letter-spacing:0;color:var(--label2)}
.ins-ledger.sm{margin-top:var(--space-2)}
.ins-ledger.sm dd{font-size:17px;line-height:24px}
.ins-ledger dd.late{color:var(--red-ink)}
.ins-pair{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--space-7)}
.ins-sec{margin-top:var(--space-8)}
.ins-h{display:flex;align-items:baseline;gap:var(--space-3);margin-bottom:var(--space-2)}
.ins-h h2{margin-right:auto;font-size:20px;line-height:26px;font-weight:600;letter-spacing:-0.02em}
.ins-line{font-size:16px;line-height:24px;color:var(--label);max-width:60ch}
.ins-line b{font-weight:600}
.ins-note{margin-top:var(--space-3);font-size:13px;line-height:18px;color:var(--label2);max-width:60ch}
.ins-meter{position:relative;height:8px;margin:var(--space-3) 0 var(--space-1);border-radius:4px;background:var(--fill);overflow:hidden}
.ins-meter i,.ib-t i,.ib-t b{position:absolute;top:0;bottom:0;left:0;width:calc(var(--w) * 100%);border-radius:inherit;background:var(--tint);transform-origin:left center;animation:grow .7s var(--spring) backwards}
.ins-bars{list-style:none;display:flex;flex-direction:column;gap:var(--space-2);margin:var(--space-3) 0 0;padding:0}
.ins-bars li{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr) 3em;gap:var(--space-3);align-items:center;font-size:15px;line-height:20px}
.ib-l{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--label)}
.ib-t{position:relative;height:10px;border-radius:5px;background:var(--fill);overflow:hidden}
.ib-n{text-align:right;font-variant-numeric:tabular-nums;color:var(--label2)}
.ins-bars li.ref .ib-t i{background:var(--label3)}
.ins-bars.two li{grid-template-columns:minmax(0,7.5em) minmax(0,1fr) 3em}
.ins-two{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--space-7);margin-top:var(--space-4)}
.ins-sub,.ins-grp h3{font-family:var(--font);font-size:15px;line-height:20px;font-weight:600;letter-spacing:-0.01em;color:var(--label)}
.ins-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6) var(--space-7);margin-top:var(--space-4)}
.ins-cols{list-style:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--space-2);align-items:end;margin:var(--space-3) 0 0;padding:0}
.ins-cols li{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);font-size:13px;line-height:18px;color:var(--label2)}
.ic-t{position:relative;width:100%;max-width:32px;height:88px;border-radius:6px;background:var(--fill);overflow:hidden}
.ic-t i{position:absolute;left:0;right:0;bottom:0;height:calc(var(--h) * 100%);border-radius:inherit;background:var(--tint);transform-origin:center bottom;animation:growY .7s var(--spring) backwards}
.ic-n{font-variant-numeric:tabular-nums;color:var(--label)}
.ins-cols .top .ic-l{font-weight:600;color:var(--label)}
.ins-ppl{display:flex;flex-direction:column;margin-top:var(--space-2)}
.ins-person{display:grid;grid-template-columns:28px minmax(0,11em) minmax(0,1fr) 7.5em;gap:var(--space-3);align-items:center;min-height:52px;margin:0 calc(var(--space-2) * -1);padding:0 var(--space-2);border-radius:10px;font-size:16px;text-align:left;transition:background-color .15s var(--spring)}
.ins-person:hover{background:var(--fill)}
.ins-person + .ins-person{box-shadow:inset 0 .5px 0 var(--sep)}
.ins-person:hover + .ins-person,.ins-person + .ins-person:hover{box-shadow:none}
.ip-n{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.ip-c{font-size:13px;color:var(--label2);font-variant-numeric:tabular-nums;text-align:right}
.ins-person .ib-t i{background:var(--label3)}
/* blue (open) and grey (done) are close in lightness in dark mode, so a 2px gap marks where one ends */
.ins-person .ib-t b{background:var(--tint);box-shadow:2px 0 0 var(--bg)}
.ins-foot{margin-top:var(--space-9);padding-top:var(--space-4);box-shadow:inset 0 .5px 0 var(--sep);font-size:13px;line-height:20px;color:var(--label2)}
.ins-empty{max-width:560px;margin-top:var(--space-7)}
.ins-empty .ins-note{margin-top:var(--space-4)}
/* the heatmap: 20 weeks by 7 days, one focusable grid, the active cell is announced */
.hm-wrap{max-width:calc(28px + 20 * 18px + 20 * var(--space-1));margin-top:var(--space-4)}
.hm-months,.hm-row{display:grid;grid-template-columns:28px repeat(20,minmax(0,1fr));gap:var(--space-1)}
.hm-months{min-height:16px;margin-bottom:var(--space-1);font-size:12px;line-height:16px;color:var(--label2)}
.hm-mon{white-space:nowrap}
.hm-grid{display:flex;flex-direction:column;gap:var(--space-1);border-radius:6px}
.hm-grid:focus-visible{outline-offset:4px}
.hm-dl{align-self:center;font-size:12px;line-height:12px;color:var(--label2)}
.hm-c{display:block;aspect-ratio:1;border-radius:3px;background:var(--heat-0)}
.hm-c.l1{background:var(--heat-1)}.hm-c.l2{background:var(--heat-2)}.hm-c.l3{background:var(--heat-3)}.hm-c.l4{background:var(--heat-4)}
.hm-c.hm-f{background:none}
.hm-c.today{box-shadow:inset 0 0 0 1.5px var(--label2)}
.hm-grid:focus .hm-c.act{outline:2px solid var(--label);outline-offset:1px}
.hm-key{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-1);margin-top:var(--space-2);font-size:12px;line-height:16px;color:var(--label2)}
.hm-key .hm-c{width:12px;flex:none}
.hm-key .hm-c:first-of-type{margin-left:var(--space-1)}.hm-key .hm-c:last-of-type{margin-right:var(--space-1)}
@keyframes grow{from{transform:scaleX(0)}}
@keyframes growY{from{transform:scaleY(0)}}

/* ================= v2.1: Google Calendar ================= */
.cal-hint{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-5);font-size:15px;line-height:22px;color:var(--label2)}
.cal-hint>span{flex:1;min-width:0}
.cal-hint>.ico{color:var(--label2)}
.cal-x{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--label2)}
.cal-x .ico{width:15px;height:15px}
@media (hover:hover){.cal-x:hover{background:var(--fill);color:var(--label)}}
.cal-ln{margin-top:var(--space-6)}
.cal-st{font-size:15px;color:var(--label2)}
.cal-row .meta .now{color:var(--red-ink);font-weight:600}
.cal-ban{position:fixed;z-index:45;top:calc(env(safe-area-inset-top,0px) + var(--space-3));right:var(--space-4);display:flex;align-items:center;gap:var(--space-3);width:fit-content;max-width:min(520px,calc(100% - 32px));padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4);border-radius:22px;background:var(--card);box-shadow:0 0 0 .5px var(--glass-edge),var(--shadow-l);font-size:15px;line-height:20px;color:var(--label);animation:drop .45s var(--spring) backwards}
.cal-ban .cal-join{font-weight:600}
.cal-ban>span{min-width:0;text-wrap:pretty}
@media (min-width:900px){.app[data-view="note"] ~ .cal-ban{top:64px}}
.cal-ban>.ico{color:var(--tint)}
.set-row small{display:block;font-size:13px;line-height:18px;color:var(--label2)}
.set-row.off>span{color:var(--label2)}
.set-adv{padding:0 var(--space-1) var(--space-3);box-shadow:inset 0 .5px 0 var(--sep)}
.set-adv summary{display:flex;align-items:center;min-height:44px;font-size:15px;color:var(--tint);cursor:pointer;list-style:none}
.set-adv summary::-webkit-details-marker{display:none}
.set-adv .form-l{margin-top:var(--space-1)}
.adv-act{display:flex;gap:var(--space-2);margin-top:var(--space-3)}
.adv-act .adv-save{min-height:36px;padding:0 var(--space-2);font-size:16px;font-weight:600;color:var(--tint)}
#calLeft{color:var(--label)}
@media (max-width:899px){
  .ins-lead,.ins-pair,.ins-two,.ins-grid{grid-template-columns:minmax(0,1fr)}
  .ins-lead{gap:var(--space-4);margin-top:var(--space-6)}
  .ins-pair{gap:0}
  .ins-big{font-size:48px;line-height:54px}
  .ins-big small{font-size:22px}
  .ins-bars li{grid-template-columns:minmax(0,10em) minmax(0,1fr) 2.5em}
  .ib-h,.ip-key{display:none}
  .ins-person{grid-template-columns:28px minmax(0,1fr) auto;min-height:52px}
  .ins-person .ib-t{display:none}
  .cal-x{width:44px;height:44px;margin:0 calc(var(--space-2) * -1)}
  /* in the flow at rest, then held under the top bar while the page scrolls (and after a reload restores the scroll) */
  .cal-ban{position:sticky;z-index:8;top:calc(env(safe-area-inset-top,0px) + 64px);left:auto;right:auto;flex:none;width:auto;max-width:none;margin:var(--space-2) var(--space-4) 0;gap:var(--space-2);padding-left:var(--space-3);box-shadow:0 0 0 .5px var(--glass-edge)}
  .cal-ban>.ico{display:none}
  .cal-ban>span{flex:1}
  .cal-ban .cal-join{min-height:44px}
  #hmCal .empty button{position:relative;z-index:1}
  .adv-act .adv-save,.adv-act .btn-t{min-height:44px}
}
@media (prefers-reduced-motion:reduce){.ins-meter i,.ib-t i,.ib-t b,.ic-t i,.cal-ban{animation:none}}
/* inline text buttons inside a sentence get a 32px box on a laptop without moving the line (phone already grows them to 44px) */
@media (min-width:900px){.lnk-in,.empty button{display:inline-block;padding-block:var(--space-2);margin-block:calc(var(--space-2) * -1);line-height:20px}}

/* ================= v2.1: security fixes ================= */
/* framed by another site: a single link out, nothing of the app */
.framed{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);min-height:100vh;min-height:100dvh;padding:var(--space-6);text-align:center;font-size:17px;color:var(--label)}
.framed a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--space-5);border-radius:999px;background:var(--fill);font-weight:600;color:var(--tint);text-decoration:none}
/* restore: what is in the file, and the rules you can opt into */
.rs-sum{margin:0;padding:var(--space-2) var(--space-1);list-style:none;font-size:15px;line-height:22px;color:var(--label2);box-shadow:inset 0 .5px 0 var(--sep),inset 0 -.5px 0 var(--sep)}
.rs-sum li{padding:var(--space-1) 0}
.rs-sum b{font-weight:600;color:var(--label)}
.rs-warn{margin-top:var(--space-4)}
.rs-opts{display:flex;flex-direction:column;margin-top:var(--space-2);max-height:40vh;overflow-y:auto}
.rs-opt{display:flex;align-items:center;gap:var(--space-3);min-height:44px;padding:0 var(--space-1);font-size:15px;line-height:20px;overflow-wrap:anywhere;cursor:pointer}
.rs-opt + .rs-opt{box-shadow:inset 0 .5px 0 var(--sep)}
.rs-opt input{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:44px;height:44px;margin:0 calc(var(--space-3) * -1);cursor:pointer}
.rs-opt input::before{content:"";position:absolute;inset:11px;border-radius:6px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--ck-edge)}
.rs-opt input:checked::before{background:var(--tint);box-shadow:none}
.rs-opt input::after{content:"";position:absolute;left:19px;top:14px;width:6px;height:12px;border:solid var(--on-tint);border-width:0 2.5px 2.5px 0;transform:rotate(45deg);opacity:0}
.rs-opt input:checked::after{opacity:1}
.rs-opt input:focus-visible{outline:2px solid var(--tint);outline-offset:-9px;border-radius:8px}
.key-rm{margin-top:var(--space-1);margin-left:calc(var(--space-2) * -1)}
@media (max-width:899px){.key-rm{min-height:44px}}