/* Lori on the phone. The same ink, sheet, gold and two typefaces as the desktop window
   (design/claude-design-v4: FolioShell, MeetingStates, LoriConfirms), laid out for a thumb.
   Every colour is a token with a light and a dark value; nothing below names a colour directly
   except the three brand constants, which are the same in both. */

@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/HankenGrotesk-latin.woff2) format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(fonts/Newsreader-latin.woff2) format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/Newsreader-italic-latin.woff2) format("woff2"); }

:root {
  /* Studio Lorikeet, the desktop window's own tokens (assets/web/home.html, Mark 12 Oct 2026):
     a forest frame, a warm reading sheet, blue links, Lakers gold for the one main action. */
  --gold: #F9A01B;            /* the brand: the one main action, and what is selected */
  --gold-hover: #FBB444;
  --on-gold: #16130C;
  --rec: #F14D4C;             /* recording */
  --frame: #123D2D;           /* the forest the sheet sits in (the desktop's rail) */
  --frame-deep: #0C2E21;
  --frame-ink: #F5F5E8;
  --frame-ink2: #BFC4BD;
  --frame-chip: #1C4A39;
  --frame-edge: #2C5C49;
  --sheet: #FFFDF8;
  --soft: #F5F4EF;
  --ink: #292B27;
  --ink2: #5D625B;
  --hair: #E4E6DF;
  --chip: #E8EDE3;
  --edge: #D4D7CF;
  --link: #245EA8;
  --gold-ink: #983E07;        /* gold as text on the sheet (gold itself fails contrast there) */
  --bar: #123D2D;             /* a bar in a chart on the sheet */
  --err: #B3261E;
  --err-bg: #FBEDEB;
  --ok: #2E6B45;
  --shadow: 0 1px 2px rgb(18 61 45 / .06), 0 14px 34px -16px rgb(18 61 45 / .32);
  --serif: "Newsreader", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, sans-serif;
  /* Motion. Real damped springs, sampled into CSS (mobile/android Spring.java uses the same
     physics): snappy settles with no visible bounce, bouncy overshoots once, gentle never does. */
  --ease: linear(0, 0.023, 0.078, 0.151, 0.234, 0.322, 0.408, 0.491, 0.567, 0.636, 0.698, 0.752, 0.799, 0.839, 0.873, 0.901, 0.924, 0.943, 0.958, 0.97, 0.979, 0.986, 0.992, 0.996, 0.999, 1.001, 1.002, 1.003, 1.004, 1.004, 1.004, 1.004, 1.003, 1.003, 1.003, 1.002, 1.002, 1.002, 1.001, 1.001, 1.001, 1.001, 1);
  --spring: linear(0, 0.049, 0.161, 0.306, 0.462, 0.611, 0.744, 0.854, 0.94, 1.003, 1.045, 1.069, 1.079, 1.08, 1.073, 1.063, 1.05, 1.038, 1.026, 1.017, 1.008, 1.002, 0.998, 0.995, 0.994, 0.994, 0.994, 0.994, 0.995, 0.996, 0.997, 0.998, 0.999, 1, 1, 1, 1, 1.001, 1.001, 1);
  --gentle: linear(0, 0.022, 0.075, 0.144, 0.222, 0.301, 0.38, 0.454, 0.523, 0.586, 0.642, 0.692, 0.736, 0.774, 0.808, 0.837, 0.861, 0.883, 0.901, 0.917, 0.93, 0.941, 0.95, 0.958, 0.965, 0.971, 0.976, 0.98, 0.983, 0.986, 0.988, 0.99, 0.992, 0.993, 0.994, 0.995, 0.996, 0.997, 0.997, 0.998, 0.998, 1);
  --t-fast: .32s; --t-move: .52s; --t-pop: .62s;
  /* The installed app hands in the status and gesture bars (--nat-t, --nat-b); a browser has env(). */
  --safe-t: var(--nat-t, env(safe-area-inset-top, 0px));
  --safe-b: var(--nat-b, env(safe-area-inset-bottom, 0px));
  color-scheme: light;
}
:root[data-theme="dark"] {
  --frame: #08120D;
  --frame-deep: #050B08;
  --frame-chip: #13241B;
  --frame-edge: #23382C;
  --sheet: #20231F;
  --soft: #171A16;
  --ink: #F1F2ED;
  --ink2: #BFC4BD;
  --hair: #353B34;
  --chip: #25372D;
  --edge: #4C554B;
  --link: #9AC6FF;
  --gold-ink: #F9A01B;
  --bar: #5B8A74;
  --err: #FFB4AB;
  --err-bg: #3A1F1C;
  --ok: #8FD6A8;
  --shadow: 0 16px 40px -18px rgb(0 0 0 / .7);
  color-scheme: dark;
}
@supports not (transition-timing-function: linear(0, 1)) {
  :root { --ease: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.3, 1.35, .5, 1); --gentle: cubic-bezier(.25, .7, .3, 1); }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--frame); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; overscroll-behavior: none; overflow: hidden;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
.selectable { -webkit-user-select: text; user-select: text; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 8px; }

/* ---- the frame: ink at the top and bottom, the sheet rising between them ------------------- */
#app { position: fixed; inset: 0; display: flex; flex-direction: column; }
.top { flex: none; padding: calc(var(--safe-t) + 10px) 18px 12px; display: flex; align-items: center; gap: 10px; color: var(--frame-ink); min-height: calc(var(--safe-t) + 56px); }
.top .mark { width: 28px; height: 28px; flex: none; }
.top .name { font-family: var(--serif); font-size: 23px; letter-spacing: -0.01em; line-height: 1; }
.top .grow { flex: 1; }
.pc { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 999px; background: var(--frame-chip); color: var(--frame-ink2); font-size: 13px; font-weight: 500; white-space: nowrap; }
.pc i { width: 7px; height: 7px; border-radius: 50%; background: var(--frame-ink2); opacity: .55; transition: background-color .3s, opacity .3s; }
.pc.on { color: var(--frame-ink); }
.pc.on i { background: var(--gold); opacity: 1; }
.iconbtn { width: 44px; height: 44px; margin: -7px; display: grid; place-items: center; border-radius: 50%; color: inherit; transition: background-color .15s, transform .14s var(--ease); }
.iconbtn:active { transform: scale(.9); background: rgba(127, 127, 127, .18); }
.iconbtn svg, .tab svg, .row svg, .btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.stage { flex: 1; position: relative; min-height: 0; }
.screen { position: absolute; inset: 0; background: var(--sheet); border-radius: 26px 26px 0 0; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 -1px 0 rgba(255, 255, 255, .04); will-change: transform, opacity; }
.scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 22px 20px calc(var(--safe-b) + 120px); scrollbar-width: none; }
.scroll::-webkit-scrollbar { display: none; }

/* ---- the bar at the bottom: two places and the one action ---------------------------------- */
.dock { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(var(--safe-b) + 12px); display: flex; align-items: center; justify-content: center; gap: 10px; pointer-events: none; background: linear-gradient(to top, var(--sheet) 62%, transparent); z-index: 5; transition: transform .34s var(--ease), opacity .2s; }
.dock.away { transform: translateY(120%); opacity: 0; }
.tabs { pointer-events: auto; display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--frame); box-shadow: var(--shadow); }
.tab { position: relative; height: 46px; min-width: 46px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; color: var(--frame-ink2); font-size: 14.5px; font-weight: 500; transition: color .2s, transform .14s var(--ease); }
.tab:active { transform: scale(.95); }
.tab span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .3s var(--ease), opacity .2s; opacity: 0; margin-left: -8px; }
/* The gold slides (.glide) and then belongs to the tab itself, so the label always has its own
   gold behind it (and the contrast check can see what the eye sees). */
.tab[aria-current="page"] { color: var(--on-gold); background: var(--gold); transition: color .2s, transform .14s var(--ease), background-color .01s .3s; }
.tab[aria-current="page"] span { max-width: 96px; opacity: 1; margin-left: 0; }
.tabs .glide { position: absolute; top: 5px; bottom: 5px; border-radius: 999px; background: var(--gold); transition: left .34s var(--ease), width .34s var(--ease); }
.tabs { position: relative; }
.tab { z-index: 1; }
.mic { pointer-events: auto; width: 64px; height: 64px; border-radius: 50%; background: var(--gold); color: var(--on-gold); display: grid; place-items: center; box-shadow: 0 10px 26px -8px rgba(249, 160, 27, .65), var(--shadow); transition: transform .16s var(--spring), box-shadow .2s; }
.mic svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mic:active { transform: scale(.9); }

/* ---- type and the pieces every screen shares ------------------------------------------------ */
.title { font-family: var(--serif); font-weight: 400; font-size: 36px; letter-spacing: -0.014em; line-height: 1.06; }
.sub { margin-top: 8px; color: var(--ink2); font-size: 15.5px; }
.h2 { font-family: var(--serif); font-weight: 400; font-size: 23px; letter-spacing: -0.005em; }
.label { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); font-weight: 600; }
.count { font-size: 13px; color: var(--ink2); margin-left: 8px; font-family: var(--sans); letter-spacing: 0; }
.section { margin-top: 30px; }
.section > header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.link { color: var(--link); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; min-height: 44px; display: inline-flex; align-items: center; }

.btn { min-height: 48px; padding: 0 20px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 600; font-size: 15.5px; border: 1px solid var(--edge); background: var(--sheet); color: var(--ink); transition: transform .14s var(--ease), background-color .15s, opacity .15s; }
.btn:active { transform: scale(.97); }
.btn.ink { background: var(--ink); color: var(--sheet); border-color: var(--ink); }
.btn.gold { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.btn.quiet { border-color: transparent; background: var(--chip); }
.btn.danger { color: var(--err); }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

.chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -20px; padding: 2px 20px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 40px; padding: 0 15px; border-radius: 999px; background: var(--chip); color: var(--ink); font-size: 14.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 7px; transition: transform .14s var(--ease), background-color .15s; position: relative; }
.chip::after { content: ""; position: absolute; inset: -4px 0; }      /* a 48 px touch height on a 40 px pill */
.chip:active { transform: scale(.95); }
.chip.on { background: var(--ink); color: var(--sheet); }

.list { border-top: 1px solid var(--hair); }
.row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 2px; min-height: 64px; border-bottom: 1px solid var(--hair); text-align: left; transition: background-color .15s, transform .14s var(--ease); }
.row:active { background: var(--chip); }
.row .body { flex: 1; min-width: 0; }
.row .head { font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .tail { margin-top: 2px; color: var(--ink2); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .pill { flex: none; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--chip); color: var(--ink2); font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; white-space: nowrap; }
.row .pill.busy { color: var(--ink); }
.row .pill.bad { color: var(--err); background: var(--err-bg); }
.row .chev { color: var(--ink2); opacity: .6; }
.day { margin: 26px 0 4px; }

.card { border: 1px solid var(--hair); border-radius: 18px; padding: 16px; background: var(--sheet); }
.card.tint { background: var(--chip); border-color: transparent; }
.empty { margin-top: 26px; padding: 26px 20px; border: 1px dashed var(--edge); border-radius: 18px; text-align: center; color: var(--ink2); }
.empty b { display: block; color: var(--ink); font-family: var(--serif); font-weight: 400; font-size: 21px; margin-bottom: 6px; }

.skel { height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--chip) 25%, var(--hair) 37%, var(--chip) 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; margin: 12px 0; }
@keyframes shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/* ---- the numbers on Home: gold serif numerals on the ink band, as on the desktop ------------ */
.band { margin-top: 22px; border-radius: 18px; background: var(--frame); color: var(--frame-ink); padding: 16px 18px; display: flex; gap: 22px; }
.band div { flex: 1; min-width: 0; }
.band b { display: block; font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: -0.02em; color: var(--gold); }
.band span { display: block; margin-top: 6px; font-size: 12.5px; color: var(--frame-ink2); }

/* ---- a dictation in History ----------------------------------------------------------------- */
.said { padding: 14px 0; border-bottom: 1px solid var(--hair); }
.said p { font-size: 16.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.said.open p { -webkit-line-clamp: unset; }
.said footer { margin-top: 8px; display: flex; align-items: center; gap: 4px; color: var(--ink2); font-size: 13px; }
.said footer .grow { flex: 1; }
.said .mini { min-width: 44px; height: 44px; margin: -8px 0; padding: 0 10px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--ink2); font-size: 13.5px; font-weight: 500; transition: background-color .15s, transform .14s var(--ease); }
.said .mini svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.said .mini:active { background: var(--chip); transform: scale(.94); }

/* ---- the layer that covers everything while Lori listens or records ------------------------- */
.cover { position: fixed; inset: 0; z-index: 30; background: var(--frame); color: var(--frame-ink); display: flex; flex-direction: column; padding: calc(var(--safe-t) + 14px) 22px calc(var(--safe-b) + 22px); transform: translateY(100%); transition: transform .42s var(--ease); will-change: transform; }
.cover.up { transform: none; }
.cover header { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.cover header .state { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; }
.cover header .state i { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); animation: breathe 1.6s ease-in-out infinite; }
.cover.rec header .state i { background: var(--rec); }
.cover.paused header .state i { animation: none; opacity: .5; }
@keyframes breathe { 50% { transform: scale(1.5); opacity: .55; } }
.cover .clock { font-family: var(--serif); font-size: 64px; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.cover .body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.cover .words { flex: 1; min-height: 0; overflow-y: auto; margin-top: 18px; font-family: var(--serif); font-size: 27px; line-height: 1.32; letter-spacing: -0.005em; scrollbar-width: none; display: flex; flex-direction: column; justify-content: flex-end; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 64px); mask-image: linear-gradient(to bottom, transparent 0, #000 64px); }
.cover .words .soft { color: var(--frame-ink2); }
.cover .words .hint { color: var(--frame-ink2); font-style: italic; }
.cover .note { margin-top: 14px; width: 100%; min-height: 52px; max-height: 30vh; resize: none; border: 1px solid var(--frame-edge); border-radius: 16px; background: var(--frame-chip); color: var(--frame-ink); padding: 14px 16px; font-size: 16px; line-height: 1.4; -webkit-user-select: text; user-select: text; }
.cover .note::placeholder { color: var(--frame-ink2); opacity: 1; }
.cover .warn { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: #4A2420; color: #FBE3DF; font-size: 14px; }
.cover .hintline { margin-top: 10px; color: var(--frame-ink2); font-size: 13.5px; text-align: center; }
.wave { height: 76px; margin: 18px 0 6px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.wave i { width: 4px; border-radius: 2px; background: var(--gold); height: 6px; transition: height .09s linear; }
.cover.rec .wave i { background: var(--frame-ink); }
.cover.paused .wave i { opacity: .35; }
.controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; }
.round { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--frame-chip); color: var(--frame-ink); transition: transform .16s var(--spring), background-color .15s; }
.round svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.round:active { transform: scale(.9); }
.round.big { width: 84px; height: 84px; background: var(--gold); color: var(--on-gold); box-shadow: 0 0 0 0 rgba(249, 160, 27, .5); }
.round.big svg { width: 32px; height: 32px; }
.cover.rec .round.big { background: var(--rec); color: #fff; }
.round.big.live { animation: ring 1.8s ease-out infinite; }
.cover.rec .round.big.live { animation-name: ringred; }
@keyframes ring { to { box-shadow: 0 0 0 22px rgba(249, 160, 27, 0); } }
@keyframes ringred { from { box-shadow: 0 0 0 0 rgba(241, 77, 76, .5); } to { box-shadow: 0 0 0 22px rgba(241, 77, 76, 0); } }
.round .cap { position: absolute; }
.ctl { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 76px; font-size: 12.5px; color: var(--frame-ink2); font-weight: 500; }

/* ---- sheets that rise from the bottom (a result, a question, a choice) ----------------------- */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgb(5 20 14 / .55); opacity: 0; transition: opacity .28s ease; }
.scrim.on { opacity: 1; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-height: 88vh; background: var(--sheet); color: var(--ink); border-radius: 26px 26px 0 0; padding: 10px 20px calc(var(--safe-b) + 20px); transform: translateY(105%); transition: transform .4s var(--ease); display: flex; flex-direction: column; will-change: transform; box-shadow: 0 -18px 50px -20px rgba(0, 0, 0, .45); }
.sheet.up { transform: none; }
.sheet .grab { width: 40px; height: 5px; border-radius: 3px; background: var(--edge); margin: 0 auto 14px; flex: none; }
.sheet .inner { overflow-y: auto; min-height: 0; scrollbar-width: none; }
.sheet .sub { color: var(--ink2); font-size: 15px; margin-top: 6px; }
.howto { margin: 16px 0 4px; padding: 0; list-style: none; counter-reset: n; }
.howto li { counter-increment: n; display: flex; gap: 12px; padding: 9px 0; color: var(--ink); font-size: 15px; line-height: 1.45; }
.howto li::before { content: counter(n); width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: var(--on-gold); display: grid; place-items: center; font-weight: 600; font-size: 13px; flex: none; margin-top: 1px; }
.sheet h3 { font-family: var(--serif); font-weight: 400; font-size: 25px; letter-spacing: -0.008em; line-height: 1.15; }
.sheet .said-text { margin-top: 14px; font-size: 18px; line-height: 1.5; }
.sheet .actions { display: flex; gap: 10px; margin-top: 18px; flex: none; }
.sheet .actions .btn { flex: 1; }
.pick { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 4px; min-height: 68px; text-align: left; border-bottom: 1px solid var(--hair); transition: transform .14s var(--ease); }
.pick:last-child { border-bottom: 0; }
.pick:active { transform: scale(.985); }
.pick .dot { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--chip); color: var(--ink); }
.pick .dot.gold { background: var(--gold); color: var(--on-gold); }
.pick .dot.rec { background: var(--rec); color: #fff; }
.pick .dot svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pick b { display: block; font-weight: 600; font-size: 16.5px; }
.pick small { display: block; color: var(--ink2); font-size: 14px; margin-top: 2px; }

.field { width: 100%; min-height: 52px; border: 1px solid var(--edge); border-radius: 14px; background: var(--sheet); color: var(--ink); padding: 13px 15px; font-size: 16px; -webkit-user-select: text; user-select: text; }
.field::placeholder { color: var(--ink2); opacity: 1; }
.field:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
textarea.field { resize: none; line-height: 1.4; }

/* ---- a meeting's notes ---------------------------------------------------------------------- */
.back { display: flex; align-items: center; gap: 6px; height: 44px; margin: -6px 0 6px -8px; padding: 0 10px 0 4px; border-radius: 12px; color: var(--ink2); font-weight: 500; font-size: 15px; width: max-content; transition: background-color .15s, transform .14s var(--ease); }
.back:active { background: var(--chip); transform: scale(.96); }
.back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.meta { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--ink2); font-size: 14.5px; }
.notes h4 { margin: 24px 0 8px; font-family: var(--serif); font-weight: 400; font-size: 20px; }
.notes .lead { margin: 12px 0; font-size: 17px; line-height: 1.55; }
.notes .point { position: relative; padding-left: 18px; margin: 9px 0; font-size: 16.5px; line-height: 1.5; }
.notes .point::before { content: ""; position: absolute; left: 3px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink2); }
.notes b { font-weight: 600; }
.ts { color: var(--link); font-size: 13.5px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; padding: 6px 2px; margin: -6px 0 -6px 4px; }
.quote { margin: 14px 0; padding-left: 14px; border-left: 2px solid var(--edge); }
.quote q { font-family: var(--serif); font-size: 18px; line-height: 1.45; quotes: "\201C" "\201D"; }
.quote small { display: block; margin-top: 4px; color: var(--ink2); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.own { margin-top: 18px; }
.own li { margin: 6px 0; }
.own ul { margin: 8px 0 0; padding-left: 18px; }
.todo { width: 100%; display: flex; align-items: flex-start; gap: 13px; padding: 13px 0; min-height: 52px; border-bottom: 1px solid var(--hair); text-align: left; }
.todo .box { width: 26px; height: 26px; border-radius: 8px; border: 1.8px solid var(--ink2); flex: none; display: grid; place-items: center; margin-top: 1px; transition: background-color .18s, border-color .18s, transform .2s var(--spring); }
.todo .box svg { width: 16px; height: 16px; fill: none; stroke: var(--sheet); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .24s ease .04s; }
.todo.done .box { background: var(--ink); border-color: var(--ink); transform: scale(1.06); }
.todo.done .box svg { stroke-dashoffset: 0; }
.todo span { flex: 1; font-size: 16.5px; line-height: 1.45; transition: color .2s, opacity .2s; }
.todo.done span { color: var(--ink2); text-decoration: line-through; text-decoration-color: var(--edge); }
.line { margin: 14px 0; }
.line small { display: block; color: var(--ink2); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.line p { margin-top: 3px; font-size: 16.5px; line-height: 1.5; }
.flash { animation: flash 2.2s ease-out; border-radius: 8px; }
@keyframes flash { 0%, 30% { background: rgba(249, 160, 27, .3); } 100% { background: transparent; } }

/* the question box that sits above the bottom of a meeting */
.askbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; padding: 10px 16px calc(var(--safe-b) + 14px); background: linear-gradient(to top, var(--sheet) 70%, transparent); }
.askbar button { width: 100%; min-height: 54px; border-radius: 999px; background: var(--frame); color: var(--frame-ink2); display: flex; align-items: center; gap: 10px; padding: 0 8px 0 20px; font-size: 16px; text-align: left; box-shadow: var(--shadow); transition: transform .14s var(--ease); }
.askbar button:active { transform: scale(.98); }
.askbar button span { flex: 1; }
.askbar button i { width: 40px; height: 40px; border-radius: 50%; background: var(--gold); color: var(--on-gold); display: grid; place-items: center; }
.askbar button i svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.asked { margin-top: 18px; color: var(--ink2); font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.4; }
.answer { margin-top: 14px; font-size: 17px; line-height: 1.55; }
.answer p { margin: 10px 0; }
.thinking { display: inline-flex; gap: 5px; align-items: center; height: 24px; }
.thinking i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink2); animation: step 1.1s ease-in-out infinite; }
.thinking i:nth-child(2) { animation-delay: .15s; }
.thinking i:nth-child(3) { animation-delay: .3s; }
@keyframes step { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }

/* ---- settings ------------------------------------------------------------------------------- */
.set { display: flex; align-items: center; gap: 14px; padding: 14px 0; min-height: 60px; border-bottom: 1px solid var(--hair); }
.set .body { flex: 1; min-width: 0; }
.set b { display: block; font-weight: 600; font-size: 16px; }
.set small { display: block; color: var(--ink2); font-size: 14px; margin-top: 2px; }
.switch { width: 52px; height: 32px; border-radius: 999px; background: var(--chip); border: 1px solid var(--edge); position: relative; flex: none; transition: background-color .22s, border-color .22s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--ink2); transition: transform .26s var(--spring), background-color .22s; }
.switch[aria-checked="true"] { background: var(--gold); border-color: var(--gold); }
.switch[aria-checked="true"]::after { transform: translateX(20px); background: var(--on-gold); }
.switch::before { content: ""; position: absolute; inset: -8px; }
.seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--chip); }
.seg button { min-height: 40px; padding: 0 13px; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--ink2); transition: background-color .18s, color .18s; position: relative; }
.seg button::after { content: ""; position: absolute; inset: -4px 0; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--sheet); }

/* ---- the first screen (linking the phone to a PC) -------------------------------------------- */
.hello { flex: 1; display: flex; flex-direction: column; padding: 8px 24px calc(var(--safe-b) + 24px); color: var(--frame-ink); overflow-y: auto; }
.hello .bird { width: 84px; height: 84px; margin: 6vh 0 22px; }
.hello h1 { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1.05; letter-spacing: -0.015em; }
.hello p { margin-top: 12px; color: var(--frame-ink2); font-size: 16.5px; line-height: 1.5; }
.hello ol { margin: 22px 0 0; padding: 0; list-style: none; counter-reset: n; }
.hello li { counter-increment: n; display: flex; gap: 14px; padding: 10px 0; color: var(--frame-ink); font-size: 16px; }
.hello li::before { content: counter(n); width: 28px; height: 28px; border-radius: 50%; background: var(--frame-chip); color: var(--gold); display: grid; place-items: center; font-weight: 600; font-size: 14px; flex: none; }
.hello .field { margin-top: 20px; background: var(--frame-chip); border-color: var(--frame-edge); color: var(--frame-ink); }
.hello .field::placeholder { color: var(--frame-ink2); }
.hello .btn { margin-top: 12px; }
.hello .grow { flex: 1; min-height: 16px; }

/* ---- the word that appears for a moment, under the top bar where it covers nothing you press ---- */
.toast { position: fixed; left: 50%; top: calc(var(--safe-t) + 62px); z-index: 60; transform: translate(-50%, -14px) scale(.96); opacity: 0; pointer-events: none; width: max-content; max-width: calc(100vw - 40px); padding: 12px 18px; border-radius: 22px; background: var(--frame); color: var(--frame-ink); font-size: 14.5px; font-weight: 500; box-shadow: var(--shadow); transition: transform .3s var(--spring), opacity .2s; display: flex; align-items: center; gap: 9px; }
.toast.on { transform: translate(-50%, 0); opacity: 1; }
.toast svg { width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.toast.bad svg { stroke: var(--rec); }

/* ---- how screens come and go ----------------------------------------------------------------- */
.screen.enter { animation: rise .34s var(--ease) both; }
.screen.enter-right { animation: fromright .34s var(--ease) both; }
.screen.leave-left { animation: toleft .3s var(--ease) both; }
.screen.enter-left { animation: fromleft .34s var(--ease) both; }
.screen.leave-right { animation: toright .3s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes fromright { from { transform: translateX(100%); } }
@keyframes toleft { to { transform: translateX(-28%); opacity: 0; } }
@keyframes fromleft { from { transform: translateX(-28%); opacity: 0; } }
@keyframes toright { to { transform: translateX(100%); } }
.stagger > * { animation: rise .4s var(--ease) both; }
.stagger > *:nth-child(1) { animation-delay: .02s; } .stagger > *:nth-child(2) { animation-delay: .06s; }
.stagger > *:nth-child(3) { animation-delay: .1s; } .stagger > *:nth-child(4) { animation-delay: .14s; }
.stagger > *:nth-child(5) { animation-delay: .18s; } .stagger > *:nth-child(n+6) { animation-delay: .22s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (min-width: 620px) {       /* a tablet or a desktop browser: the phone's column, centred */
  #app, .cover, .sheet, .scrim { max-width: 480px; margin: 0 auto; left: 0; right: 0; }
  body { background: #071510; }
  #app { background: var(--frame); }
}

/* =============================================================================================
   Lori phone app 2 (19 Oct 2026): the desktop's Studio Lorikeet look, four places, and motion
   that runs on real springs. Everything below overrides or adds to what is above.
   ============================================================================================= */

/* ---- the frame: the forest, the bird, and the sheet rising out of it ------------------------ */
.top .mark { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 6px rgb(0 0 0 / .25)); }
.top .name { font-size: 25px; }
.pc { background: var(--frame-chip); }
.pc.on i { box-shadow: 0 0 0 0 rgb(249 160 27 / .6); animation: pcpulse 2.4s ease-out infinite; }
@keyframes pcpulse { to { box-shadow: 0 0 0 7px rgb(249 160 27 / 0); } }
.screen { border-radius: 28px 28px 0 0; box-shadow: 0 -1px 0 rgb(255 255 255 / .05), 0 -20px 40px -30px rgb(0 0 0 / .5); }

/* ---- the dock: four places in a forest pill, the gold action beside it --------------------- */
.dock { background: linear-gradient(to top, var(--sheet) 58%, transparent); transition: transform var(--t-move) var(--ease), opacity .24s; }
.dock.away { transform: translateY(130%); opacity: 0; }
.tabs { background: var(--frame); padding: 5px; gap: 2px; box-shadow: 0 10px 30px -10px rgb(8 30 22 / .55), inset 0 0 0 1px rgb(255 255 255 / .04); }
.tab { height: 48px; min-width: 48px; padding: 0 14px; color: var(--frame-ink2); transition: color .25s, transform .3s var(--spring); }
.tab:active { transform: scale(.9); }
.tab span { transition: max-width var(--t-move) var(--ease), opacity .25s, margin var(--t-move) var(--ease); }
/* The label turns dark only once the gold is under it, and then the gold becomes the tab's own
   background (the desktop rail's rule), so dark-on-forest is never on screen, even mid-slide. */
.tab[aria-current="page"] { background: var(--gold); color: var(--on-gold); transition: color .18s .2s, background-color .01s .42s, transform .3s var(--spring); }
.tabs .glide { left: 0; top: 5px; bottom: 5px; border-radius: 999px; background: var(--gold); box-shadow: 0 4px 14px -4px rgb(249 160 27 / .7);
  transition: transform var(--t-pop) var(--spring), width var(--t-pop) var(--spring); will-change: transform, width; }
.mic { width: 62px; height: 62px; transition: transform .4s var(--spring), box-shadow .3s, background-color .3s; }
.mic:active { transform: scale(.86); }
.mic.swap svg { animation: iconswap .5s var(--spring) both; }
@keyframes iconswap { from { transform: scale(.4) rotate(-40deg); opacity: 0; } }
.mic.recmode { background: var(--rec); color: #fff; box-shadow: 0 10px 26px -8px rgb(241 77 76 / .6), var(--shadow); }

/* ---- type ----------------------------------------------------------------------------------- */
.kicker { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 8px; }
.title em { font-style: italic; color: var(--ink2); }
.day { margin: 24px 0 6px; }

/* ---- Home: the bubble's state, the numbers band, history by day ---------------------------- */
.fix, .ready { margin-top: 20px; width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 20px; text-align: left; background: var(--soft); border: 1px solid var(--hair); transition: transform .3s var(--spring); }
.fix:active { transform: scale(.98); }
.fix .ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--frame); color: var(--gold); }
.fix .ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fix span, .ready span { flex: 1; min-width: 0; }
.fix b, .ready b { display: block; font-weight: 600; font-size: 16px; }
.fix small, .ready small { display: block; margin-top: 3px; color: var(--ink2); font-size: 14px; line-height: 1.4; }
.fix em { font-style: normal; flex: none; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--frame); color: var(--frame-ink); display: inline-flex; align-items: center; font-weight: 600; font-size: 14px; }
.fix.gold { background: var(--frame); border-color: transparent; color: var(--frame-ink); }
.fix.gold .ic { background: var(--frame-chip); }
.fix.gold small { color: var(--frame-ink2); }
.fix.gold em { background: var(--gold); color: var(--on-gold); animation: nudge 2.6s var(--spring) 1.2s infinite; }
@keyframes nudge { 0%, 70%, 100% { transform: none; } 78% { transform: scale(1.08); } 86% { transform: scale(.98); } }
.ready .orb { width: 44px; height: 44px; border-radius: 50%; background: var(--frame); display: grid; place-items: center; flex: none; box-shadow: 0 6px 16px -6px rgb(18 61 45 / .6); animation: float 4s ease-in-out infinite; }
.ready .orb img { width: 30px; height: 30px; object-fit: contain; }
@keyframes float { 50% { transform: translateY(-3px); } }
.band { margin-top: 18px; border-radius: 22px; padding: 18px 18px 16px; background: var(--frame); position: relative; overflow: hidden; }
.band::after { content: ""; position: absolute; inset: auto -30% -60% auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgb(249 160 27 / .16), transparent 70%); pointer-events: none; }
.band b { font-variant-numeric: tabular-nums; font-size: 31px; }
.said footer .via { display: inline-flex; align-items: center; gap: 5px; padding: 0 9px 0 6px; height: 24px; border-radius: 999px; background: var(--chip); color: var(--ink); font-weight: 600; font-size: 12.5px; margin-right: 6px; }
.said footer .via svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.saids .said:last-child { border-bottom: 0; }

/* ---- Meetings: coming up -------------------------------------------------------------------- */
.upcoming { display: flex; flex-direction: column; gap: 8px; }
.cu { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 18px; background: var(--soft); border: 1px solid var(--hair); }
.cu.next { background: var(--frame); border-color: transparent; color: var(--frame-ink); }
.cu .when { width: 66px; flex: none; }
.cu .when b { display: block; font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 1.1; }
.cu .when small { color: var(--ink2); font-size: 12.5px; }
.cu.next .when small, .cu.next .tail { color: var(--frame-ink2); }
.cu .body { flex: 1; min-width: 0; }
.cu .head { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu .tail { color: var(--ink2); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.gold { background: var(--gold); color: var(--on-gold); }
.chip svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.search { position: relative; margin-top: 18px; }
.search .field { padding-left: 46px; }
.search svg { position: absolute; left: 14px; top: 15px; width: 22px; height: 22px; fill: none; stroke: var(--ink2); stroke-width: 1.7; stroke-linecap: round; }

/* ---- Notes ---------------------------------------------------------------------------------- */
.md { margin-top: 18px; font-size: 17px; line-height: 1.6; }
.md p { margin: 10px 0; }
.md h3, .md h4, .md h5 { font-family: var(--serif); font-weight: 400; margin: 22px 0 6px; }
.md h3 { font-size: 24px; } .md h4 { font-size: 21px; } .md h5 { font-size: 18px; }
.md ul, .md ol { padding-left: 22px; margin: 8px 0; }
.md li { margin: 5px 0; }
.md code { font-size: .9em; background: var(--chip); padding: 1px 6px; border-radius: 6px; }
.md-todo { display: flex; gap: 11px; align-items: flex-start; }
.md-todo .box { width: 22px; height: 22px; border-radius: 7px; border: 1.8px solid var(--ink2); flex: none; display: grid; place-items: center; margin-top: 3px; }
.md-todo .box svg { width: 14px; height: 14px; fill: none; stroke: var(--sheet); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.md-todo.done .box { background: var(--ink); border-color: var(--ink); }
.md-todo.done .box svg { opacity: 1; }
.md-todo.done span { color: var(--ink2); text-decoration: line-through; }
.note-edit { width: 100%; min-height: 60vh; border: 0; background: transparent; color: var(--ink); resize: none; font: 400 18px/1.6 var(--sans); padding: 6px 0; outline: none; }
.note-edit::first-line { font-family: var(--serif); font-size: 30px; }
.saved { position: sticky; bottom: 0; color: var(--ink2); font-size: 13.5px; padding: 8px 0; }

/* ---- You ------------------------------------------------------------------------------------ */
.set.go { width: 100%; text-align: left; transition: transform .3s var(--spring), background-color .15s; border-radius: 0; }
.set.go:active { transform: scale(.985); }
.set .ic { width: 40px; height: 40px; border-radius: 12px; background: var(--chip); display: grid; place-items: center; flex: none; color: var(--ink); }
.set .ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.set .pill { height: 26px; padding: 0 10px; border-radius: 999px; background: var(--chip); color: var(--ink); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; }
.set .chev svg { width: 18px; height: 18px; fill: none; stroke: var(--ink2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--edge); flex: none; }
.dot.on { background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 22%, transparent); }
.hintline-s { margin-top: 12px; color: var(--ink2); font-size: 13.5px; line-height: 1.45; }
.week { display: flex; gap: 8px; align-items: flex-end; height: 92px; margin-top: 12px; padding: 0 4px; }
.wk { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
.wk i { width: 100%; max-width: 30px; height: var(--h); border-radius: 8px 8px 4px 4px; background: var(--bar); transform-origin: bottom; animation: growbar .8s var(--spring) var(--d) both; }
.wk:last-child i { background: var(--gold); }
.wk small { font-size: 11.5px; color: var(--ink2); font-weight: 600; }
@keyframes growbar { from { transform: scaleY(0); } }
.addrow { display: flex; gap: 10px; margin-top: 18px; }
.addrow .btn { width: 52px; padding: 0; flex: none; }
.addrow .btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.wordcloud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.wordchip { min-height: 42px; padding: 0 15px; border-radius: 999px; background: var(--soft); border: 1px solid var(--edge); font-size: 15.5px; font-weight: 500; animation: chipin .5s var(--spring) both; animation-delay: calc(var(--i) * 18ms); transition: transform .3s var(--spring); }
.wordchip:active { transform: scale(.92); }
.wordchip.pin { background: var(--frame); color: var(--frame-ink); border-color: transparent; }
@keyframes chipin { from { opacity: 0; transform: scale(.6); } }
.flabel { display: block; margin: 16px 0 6px; font-size: 13px; font-weight: 600; color: var(--ink2); letter-spacing: .04em; }
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---- listening: a circle out of the gold button, a living orb, words coming into focus ----- */
.cover { transform: none; clip-path: circle(0 at var(--ox, 50%) var(--oy, 100%)); transition: clip-path .62s var(--ease); background: radial-gradient(120% 80% at 50% 20%, var(--frame) 0%, var(--frame-deep) 100%); }
.cover.up { clip-path: circle(150vmax at var(--ox, 50%) var(--oy, 100%)); }
.cover.closing { transition: clip-path .46s cubic-bezier(.6, 0, .8, .4); }
.cover > * { transition: opacity .3s .12s, transform .5s var(--spring) .1s; }
.cover:not(.up) > * { opacity: 0; transform: translateY(14px); }
.cover .timer { font-variant-numeric: tabular-nums; color: var(--frame-ink2); font-size: 15px; font-weight: 500; }
.cover .orb { width: calc(100% + 44px); margin: 0 -22px; height: 36vh; min-height: 210px; flex: none; }
.cover .body { justify-content: flex-start; }
.cover .words { display: block; margin-top: 4px; font-size: 28px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40px); mask-image: linear-gradient(to bottom, transparent 0, #000 40px); padding-top: 36px; }
.cover .words .w { display: inline; }
.cover .words .w.in { display: inline-block; white-space: pre; animation: wordin .5s var(--ease) both; animation-delay: calc(var(--k) * 40ms); }
@keyframes wordin { from { opacity: 0; filter: blur(8px); transform: translateY(10px) scale(.96); } }
.cover .words .w.maybe { opacity: .78; }
.cover .controls { display: grid; grid-template-columns: 1fr auto 1fr; justify-items: center; }
.cover .controls .ctl:first-child { justify-self: start; }
.cover .controls .ctl:last-child { justify-self: end; }
.wave i { height: 70px; transform: scaleY(.08); transform-origin: center; transition: transform .14s cubic-bezier(.2, .8, .2, 1); border-radius: 3px; }
.round { transition: transform .4s var(--spring), background-color .2s; }
.round:active { transform: scale(.86); }

/* ---- sheets rise on a spring, the scrim follows --------------------------------------------- */
.sheet { transition: transform var(--t-pop) var(--spring); }
.scrim { transition: opacity .3s ease; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }

/* ---- the first screen ----------------------------------------------------------------------- */
.hello { background: radial-gradient(130% 70% at 50% 0%, var(--frame-chip) 0%, var(--frame) 60%); }
.hero-bird { width: 112px; height: 112px; margin: 7vh 0 22px; border-radius: 34px; background: radial-gradient(circle at 35% 30%, #1F5A44, var(--frame-deep)); display: grid; place-items: center; box-shadow: 0 20px 50px -18px rgb(0 0 0 / .6), inset 0 0 0 1px rgb(255 255 255 / .06); animation: birdin .9s var(--spring) both; }
.hero-bird img { width: 84px; height: 84px; object-fit: contain; animation: float 4.5s ease-in-out 1s infinite; }
@keyframes birdin { from { opacity: 0; transform: scale(.6) rotate(-8deg); } }
.hello h1, .hello > p, .hello ol, .hello .btn, .hello .link-quiet { animation: rise .6s var(--ease) both; }
.hello h1 { animation-delay: .12s; } .hello > p { animation-delay: .18s; } .hello ol { animation-delay: .24s; } .hello .btn { animation-delay: .3s; }
.btn.big { min-height: 56px; font-size: 16.5px; border-radius: 16px; }
.link-quiet { margin-top: 10px; min-height: 44px; color: var(--frame-ink2); text-decoration: underline; text-underline-offset: 3px; font-size: 15px; }
.hello .wrong { color: #FFB4AB; }
.hello .fine { font-size: 13.5px; }

/* ---- how screens come and go: springs, with a little parallax ------------------------------ */
.screen.enter { animation: rise var(--t-move) var(--ease) both; }
.screen.enter-right { animation: fromright var(--t-move) var(--ease) both; z-index: 2; box-shadow: -20px 0 40px -20px rgb(0 0 0 / .35); }
.screen.leave-left { animation: toleft var(--t-move) var(--ease) both; }
.screen.enter-left { animation: fromleft var(--t-move) var(--ease) both; }
.screen.leave-right { animation: toright .42s var(--ease) both; z-index: 2; }
.screen.enter-tabr { animation: tabfromr var(--t-move) var(--ease) both; }
.screen.enter-tabl { animation: tabfroml var(--t-move) var(--ease) both; }
.screen.leave-tabl { animation: tabtol .36s var(--ease) both; }
.screen.leave-tabr { animation: tabtor .36s var(--ease) both; }
.screen.gone { pointer-events: none; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes fromright { from { transform: translateX(100%); } }
@keyframes toleft { to { transform: translateX(-26%); filter: brightness(.86); } }
@keyframes fromleft { from { transform: translateX(-26%); filter: brightness(.86); } }
@keyframes toright { to { transform: translateX(100%); } }
@keyframes tabfromr { from { opacity: 0; transform: translateX(14%) scale(.985); } }
@keyframes tabfroml { from { opacity: 0; transform: translateX(-14%) scale(.985); } }
@keyframes tabtol { to { opacity: 0; transform: translateX(-10%) scale(.985); } }
@keyframes tabtor { to { opacity: 0; transform: translateX(10%) scale(.985); } }
.stagger > * { animation: rise .62s var(--ease) both; }
.stagger > *:nth-child(1) { animation-delay: .03s; } .stagger > *:nth-child(2) { animation-delay: .07s; }
.stagger > *:nth-child(3) { animation-delay: .11s; } .stagger > *:nth-child(4) { animation-delay: .15s; }
.stagger > *:nth-child(5) { animation-delay: .19s; } .stagger > *:nth-child(n+6) { animation-delay: .23s; }
.row, .said, .chip, .btn, .back { transition: transform .3s var(--spring), background-color .15s; }
.row:active { transform: scale(.985); }

@media (prefers-reduced-motion: reduce) {
  .cover, .cover.up { clip-path: none; }
  .pc.on i, .ready .orb, .hero-bird img, .fix.gold em { animation: none !important; }
}

/* ---- phone app 3: style choices, pre-read rows ----------------------------------------------- */
.set.col { flex-direction: column; align-items: stretch; gap: 10px; }
.seg.wrap { flex-wrap: wrap; align-self: flex-start; }
.cu[data-act="preread"] { cursor: pointer; transition: transform .3s var(--spring); }
.cu[data-act="preread"]:active { transform: scale(.985); }
.chip.on { background: var(--frame); color: var(--frame-ink); }

/* =============================================================================================
   Lori phone app 4 (21 Oct 2026): Studio as a fifth place, Video calls, a meeting's tools, the
   PC's history, My voice and Help. Only the tokens above; nothing new names a colour.
   ============================================================================================= */

/* five places and the gold button fit a phone only as icons (the open place is the gold one, and
   each still says its name to a screen reader); a tablet has room for the open place's name */
@media (max-width: 559px) {
  .tab[aria-current="page"] span { max-width: 0; opacity: 0; margin-left: -8px; }
  .tab { padding: 0 12px; min-width: 46px; }
}

/* choosing several meetings */
.row .pickbox, .tline .pickbox { width: 24px; height: 24px; border-radius: 8px; border: 1.8px solid var(--ink2); flex: none; display: grid; place-items: center; transition: background-color .15s, border-color .15s, transform .3s var(--spring); }
.row .pickbox svg, .tline .pickbox svg { width: 15px; height: 15px; fill: none; stroke: var(--sheet); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.row.picked .pickbox, .tline.picked .pickbox { background: var(--ink); border-color: var(--ink); transform: scale(1.06); }
.row.picked .pickbox svg, .tline.picked .pickbox svg { opacity: 1; }
.selbar { position: sticky; top: 0; z-index: 2; margin: 14px -4px 0; padding: 10px 12px; border-radius: 18px; background: var(--frame); color: var(--frame-ink); display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow); animation: chipin .45s var(--spring) both; }
.selbar .grow { flex: 1; font-size: 14.5px; }
.selbar b { font-family: var(--serif); font-weight: 400; font-size: 20px; margin-right: 4px; }
.selbar .btn { min-height: 44px; padding: 0 14px; font-size: 14.5px; background: var(--frame-chip); color: var(--frame-ink); border-color: transparent; }
.selbar .btn.danger { color: var(--frame-ink); background: color-mix(in srgb, var(--rec) 38%, var(--frame)); }
.chips.filters .chip svg { width: 16px; height: 16px; }

/* people */
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--frame); color: var(--frame-ink); display: grid; place-items: center; font-family: var(--serif); font-size: 19px; flex: none; }

/* a meeting's screen pictures */
.shots { margin-top: 14px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.shot { display: flex; flex-direction: column; gap: 6px; text-align: left; border-radius: 14px; overflow: hidden; transition: transform .3s var(--spring); }
.shot:active { transform: scale(.97); }
.shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; border: 1px solid var(--hair); background: var(--soft); }
.shot small { font-size: 12.5px; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bigshot { width: 100%; border-radius: 12px; border: 1px solid var(--hair); }

/* the transcript, line by line, to take lines out */
.tlines { margin-top: 12px; border-top: 1px solid var(--hair); }
.tline { width: 100%; display: flex; gap: 12px; align-items: flex-start; padding: 12px 2px; border-bottom: 1px solid var(--hair); text-align: left; font-size: 15px; line-height: 1.45; }
.tline .pickbox { margin-top: 1px; }
.tline.picked span { color: var(--ink2); text-decoration: line-through; }

/* a link to copy or share */
.linkbox { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--soft); border: 1px solid var(--hair); font-size: 14.5px; word-break: break-all; color: var(--ink); }

/* progress: a gold line that grows on a spring; "live" breathes while the PC works */
.progress { margin-top: 12px; height: 6px; border-radius: 999px; background: var(--chip); overflow: hidden; }
.progress i { display: block; height: 100%; border-radius: 999px; background: var(--gold); transition: width .6s var(--spring); }
.progress.live i { animation: breathe 1.8s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .55; } }

/* Studio */
.vthumb { width: 46px; height: 46px; border-radius: 14px; background: var(--frame); color: var(--gold); display: grid; place-items: center; flex: none; }
.vthumb svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.card.film { margin-top: 10px; background: var(--soft); }
.card.film .label { color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 16px; font-weight: 600; }
.card.film.bad .sub { color: var(--err); }
.player { width: 100%; margin-top: 14px; border-radius: 14px; background: #000; max-height: 60vh; }
.chips.wrap { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }

/* My voice: the line to read, big, and the microphone's level */
.teachread { margin-top: 14px; font-family: var(--serif); font-size: 27px; line-height: 1.3; letter-spacing: -0.006em; }
.tlevel { margin-top: 18px; height: 8px; border-radius: 999px; background: var(--chip); overflow: hidden; }
.tlevel i { display: block; height: 100%; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .08s linear; }
.btn.live { background: var(--rec); color: #fff; border-color: var(--rec); }
.teachline { align-items: flex-start; }
.teachline .num { width: 30px; height: 30px; border-radius: 50%; background: var(--chip); display: grid; place-items: center; font-size: 13px; font-weight: 600; flex: none; color: var(--ink2); }
.teachline .num svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.teachline.done .num { background: var(--frame); color: var(--gold); }
.teachline .head { white-space: normal; font-weight: 500; line-height: 1.4; }

/* Help: a thread of messages */
.thread { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 88%; padding: 12px 14px; border-radius: 18px; font-size: 15.5px; line-height: 1.45; animation: chipin .45s var(--spring) both; }
.msg.me { align-self: flex-end; background: var(--frame); color: var(--frame-ink); border-bottom-right-radius: 6px; }
.msg.them { align-self: flex-start; background: var(--chip); color: var(--ink); border-bottom-left-radius: 6px; }
.msg p { white-space: pre-wrap; }
.msg small { display: block; margin-top: 6px; font-size: 12px; opacity: .8; }

/* the words of a meeting as it records (on the ink cover) */
.livewords { width: 100%; margin-top: 16px; padding: 12px 14px; border-radius: 16px; background: rgb(255 255 255 / .06); text-align: left; }
.livewords .label { color: var(--frame-ink2); }
.livewords p { margin-top: 6px; max-height: 22vh; overflow-y: auto; font-size: 15.5px; line-height: 1.5; color: var(--frame-ink); }
.livewords .hint { color: var(--frame-ink2); }
.mini.danger { color: var(--err); }
@media (prefers-reduced-motion: reduce) { .selbar, .msg { animation: none; } .progress.live i { animation: none; } }
.livewords .w.in { display: inline; animation: wordin .5s var(--ease) both; }