/* Connectry portal. An app shell, not a page: the window never scrolls, only the stage does.
   Two layers, the way Apple and Linear separate them: glass for navigation (the rail), a calmer stage for content.
   Inside the stage, panels are tonal, never glass on glass. Dark by default, light one tap away.
   Five type sizes: 40 title, 16 lead, 15 row title, 14 ui, 13 meta. One accent word per title. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/inter-latin.woff2") format("woff2"); }

:root, :root[data-theme="dark"] {
  --bg: #0b0c0e;
  /* The app icon's ground (Fabian, 24 Oct): near-black with a cool blue glow high on the right and a warm one low on
     the left, held well back so the glass and content lead. No photo. */
  --ambient: none;
  /* More present on 3 Nov 2026 (Fabian): the blue glow reaches further and reads, still one soft light, no shapes. */
  --ambient-veil: radial-gradient(85% 75% at 100% 0%, rgba(58,86,128,.68), transparent 74%),
    radial-gradient(65% 60% at 0% 100%, rgba(58,50,44,.52), transparent 72%),
    linear-gradient(160deg, #151b25 0%, #0f1216 55%, #111111 100%);
  --rail: rgba(26,27,31,.50);
  --stage: rgba(14,15,18,.50);
  --pop: rgba(30,31,35,.86);
  --rim: inset 0 1px 0 rgba(255,255,255,.09), inset 0 0 0 1px rgba(255,255,255,.06);
  --lift: 0 24px 60px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2);
  --panel: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.028) 60%);
  --panel-line: rgba(255,255,255,.07);
  --panel-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 0 0 1px rgba(255,255,255,.065), 0 18px 40px -18px rgba(0,0,0,.55);
  --panel-hover: rgba(255,255,255,.055);
  --active: rgba(255,255,255,.08);
  --ink: #f5f5f7;
  --body: rgba(245,245,247,.80);
  --muted: rgba(245,245,247,.62);
  --faint: rgba(245,245,247,.46);
  --line: rgba(255,255,255,.07);
  --line-2: rgba(255,255,255,.12);
  --field: rgba(255,255,255,.05);
  --on-ink: #111214;
  --ring: #1a1b1f;
  --acc: #8db0e0;
  --tint: rgba(74,111,165,.18);
  --tint-line: rgba(127,163,214,.22);
  --ok: #8fcfa2; --warn: #e2ad72; --danger: #ee8f88; --live: #4cd964;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #eceef2;
  --ambient: url("img/ambient-light.jpg");
  --ambient-veil: radial-gradient(120% 90% at 70% 0%, rgba(245,245,247,.30), rgba(245,245,247,.78) 70%);
  --rail: rgba(255,255,255,.52);
  --stage: rgba(255,255,255,.55);
  --pop: rgba(255,255,255,.90);
  --rim: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(0,0,0,.05);
  --lift: 0 24px 60px rgba(30,35,50,.14), 0 2px 8px rgba(30,35,50,.06);
  --panel: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.70) 70%);
  --panel-line: rgba(0,0,0,.06);
  --panel-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(0,0,0,.05), 0 18px 40px -20px rgba(30,40,60,.22);
  --panel-hover: rgba(0,0,0,.03);
  --active: rgba(0,0,0,.055);
  --ink: #1d1d1f;
  --body: #46464b;
  --muted: #6e6e73;
  --faint: #8a8a90;
  --line: rgba(0,0,0,.07);
  --line-2: rgba(0,0,0,.12);
  --field: rgba(0,0,0,.04);
  --on-ink: #ffffff;
  --ring: #ffffff;
  --acc: #4a6fa5;
  --tint: rgba(74,111,165,.10);
  --tint-line: rgba(74,111,165,.16);
  --ok: #2f7d4f; --warn: #9a5b1e; --danger: #b0352f; --live: #34c759;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font-sans); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; background: var(--bg); color: var(--ink); font-size: 14px; line-height: 20px; overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
img { display: block; }
p, h1, h2, h3 { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 2px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.acc { color: var(--acc); }
.num, .time, .code { font-variant-numeric: tabular-nums; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
::selection { background: rgba(127,163,214,.35); }
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }

/* ---------- ambient: the city, blurred, so the glass has something to hold ---------- */
.ambient { position: fixed; inset: 0; z-index: 0; background: var(--ambient) center / cover no-repeat, var(--bg); transition: background .4s; }
.ambient::after { content: ""; position: absolute; inset: 0; background: var(--ambient-veil); }

/* ---------- shell ---------- */
.frame { position: fixed; inset: 0; z-index: 1; display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 12px; padding: 12px; }
.glass { -webkit-backdrop-filter: blur(40px) saturate(1.7); backdrop-filter: blur(40px) saturate(1.7); box-shadow: var(--rim), var(--lift); }
.rail { border-radius: 22px; background: var(--rail); display: flex; flex-direction: column; padding: 14px 12px 12px; min-height: 0; overflow: hidden; }
.stage { border-radius: 22px; background: var(--stage); display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
/* The stage keeps the glass rim and lift but not the blur: behind it are only the soft ambient gradients, so a 40px blur
   over the whole content area changed nothing visible and cost a third to half of every page switch (3 Nov 2026,
   measured: Tools 462 to 178 ms, Activity 649 to 402 ms). Real glass stays where there is something to bend. */
.stage.glass { -webkit-backdrop-filter: none; backdrop-filter: none; }

.brand { display: flex; align-items: center; height: 36px; padding: 0 4px; }
.brand img { height: 24px; }
:root[data-theme="dark"] .brand img, :root:not([data-theme]) .brand img { filter: invert(1) brightness(2); }
.find { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; margin: 14px 0 12px; padding: 0 8px 0 10px; border: 0; border-radius: 10px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; color: var(--faint); font-size: 13px; text-align: left; }
.find:hover { color: var(--muted); }
.find span { flex: 1; }
kbd { font-family: var(--font-sans); font-size: 11px; font-weight: 500; line-height: 18px; padding: 0 6px; border-radius: 6px; background: var(--active); color: var(--faint); }
.rnav { display: grid; gap: 2px; }
.rnav a { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 10px; border-radius: 10px; color: var(--muted); font-size: 14px; font-weight: 500; text-decoration: none; transition: background .15s, color .15s; }
.rnav a svg { flex: none; width: 18px; height: 18px; opacity: .85; }
.rnav a:hover { color: var(--ink); background: var(--panel-hover); }
.rnav a[aria-current="page"] { color: var(--ink); background: var(--active); }
.rnav a[aria-current="page"] svg { opacity: 1; color: var(--acc); }
.badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 500; line-height: 20px; text-align: center; }
.badge.soft { background: var(--active); color: var(--muted); }
.rlabel { display: flex; align-items: center; justify-content: space-between; padding: 20px 10px 6px; font-size: 12px; font-weight: 500; color: var(--faint); }
.rlabel { padding: 18px 4px 6px 10px; }
.rlabel .rl { color: var(--faint); text-decoration: none; }
.rlabel .rl:hover, .rlabel .rl[aria-current="page"] { color: var(--ink); }
.rlabel .icon-btn { font-size: 16px; color: var(--faint); }
.rnav .cir { gap: 10px; font-weight: 400; }
.mini { display: flex; flex: none; }
.mini { padding-left: 2px; }
.mini img { width: 20px; height: 20px; border-radius: 99px; object-fit: cover; box-shadow: 0 0 0 2px var(--ring); margin-right: -7px; }
.mini img:last-child { margin-right: 0; }
.rfoot { margin-top: auto; display: grid; gap: 8px; padding-top: 12px; }
/* the brain: a small wallet card under your name that opens the full card */
.bbtn { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; height: 60px; padding: 0 14px 0 16px; border: 0; border-radius: 14px; cursor: pointer; text-align: left; color: #fff;
  background: radial-gradient(140% 160% at 100% 0%, rgba(74,111,165,.7), rgba(74,111,165,0) 62%), linear-gradient(180deg, #1d2027, #131418);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.07), 0 10px 22px -12px rgba(0,0,0,.55); transition: transform .2s var(--ease-arrive), box-shadow .2s; }
.bbtn:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.1), 0 14px 26px -12px rgba(0,0,0,.6); }
.bb-wm { display: none; }
.bbtn .grow { position: relative; display: grid; gap: 1px; }
.bbtn small { font-size: 11px; font-weight: 500; letter-spacing: .02em; color: rgba(255,255,255,.62); }
.bbtn b { font-size: 15px; font-weight: 500; letter-spacing: -.005em; }
.bb-qr { position: relative; margin-left: auto; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); flex: none; }
.bc-m { width: 26px; height: 26px; border-radius: 8px; background: var(--blue); display: grid; place-items: center; flex: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.bc-m svg { width: 12px; height: 12px; }
/* the full card: one column, every edge on the same 20px line */
.modal.brainpop { width: min(408px, 100%); padding: 20px; display: grid; gap: 18px; background: var(--sheet-solid, #16171b); }
:root[data-theme="light"] .modal.brainpop { --sheet-solid: #fbfbfd; }
.wallet { position: relative; overflow: hidden; aspect-ratio: 1.7 / 1; display: grid; grid-template-rows: auto 1fr auto; padding: 20px 22px 18px; border-radius: 18px; color: #fff;
  background: radial-gradient(130% 120% at 100% 0%, rgba(74,111,165,.8), rgba(74,111,165,0) 60%), radial-gradient(90% 80% at 0% 100%, rgba(127,163,214,.22), rgba(127,163,214,0) 60%), linear-gradient(180deg, #1d2027, #121317);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.08), 0 24px 44px -20px rgba(0,0,0,.6); animation: walletin .6s var(--ease-arrive) both; }
@keyframes walletin { from { opacity: 0; transform: translateY(10px) } }
.bc-wm { position: absolute; right: -20px; bottom: -26px; width: 160px; height: 160px; fill: rgba(255,255,255,.06); pointer-events: none; }
.w-top { position: relative; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.82); }
.w-own { margin-left: auto; font-weight: 400; color: rgba(255,255,255,.6); }
.w-mid { position: relative; align-self: end; padding-bottom: 14px; }
.modal .w-num { margin: 0; font-size: 30px; line-height: 34px; font-weight: 500; letter-spacing: -.01em; color: #fff; }
.modal .w-mail { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: rgba(255,255,255,.72); }
.w-foot { position: relative; display: flex; justify-content: space-between; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.bp { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px; border-radius: 16px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); }
.qr { width: 104px; height: 104px; padding: 8px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 8px 20px -10px rgba(0,0,0,.3); }
.qr svg { width: 100%; height: 100%; display: block; }
.bp-r b { font-size: 16px; font-weight: 500; }
.modal .bp-r p { margin: 4px 0 0; font-size: 13px; line-height: 19px; color: var(--faint); }
.bp-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bp-acts .btn { width: 100%; padding: 0 8px; }
.bp-ai { display: grid; gap: 8px; }
.bp-ai > span { font-size: 13px; font-weight: 500; color: var(--muted); }
.bp-ai .copy code { color: var(--muted); }
.icon-btn { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: 0; border-radius: 9px; background: none; color: var(--muted); cursor: pointer; }
.icon-btn:hover { background: var(--panel-hover); color: var(--ink); }
.icon-btn.xs { width: 24px; height: 24px; border-radius: 7px; }
.user { display: flex; align-items: center; gap: 4px; }
.me { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px; border: 0; border-radius: 12px; background: none; cursor: pointer; text-align: left; }
.me:hover { background: var(--panel-hover); }
.me img { width: 28px; height: 28px; border-radius: 99px; object-fit: cover; }
.me b { display: block; font-size: 14px; font-weight: 500; }
.me small { display: block; font-size: 12px; color: var(--faint); }

/* stage bar: where you are, and that the brain is live */
.bar { flex: none; display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 20px 0 28px; border-bottom: 1px solid var(--line); }
.crumb { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; font-weight: 500; color: var(--faint); }
.crumb a { color: var(--faint); text-decoration: none; }
.crumb a:hover { color: var(--ink); }
.crumb b { font-weight: 500; color: var(--ink); }
.crumb i { font-style: normal; opacity: .5; }
.bar .right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.status { font-size: 13px; line-height: 16px; color: var(--faint); white-space: nowrap; display: inline-flex; align-items: center; }
.dot { width: 6px; height: 6px; border-radius: 9px; background: var(--live); margin-right: 8px; flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 18%, transparent); }
.dot.warn { background: var(--warn); box-shadow: none; }
.mbrand { display: none; }
.bar .mob { display: none; }

.scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20px, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 20px, #000 calc(100% - 28px), transparent 100%); }
main { max-width: 1320px; min-height: 100%; margin: 0 auto; padding: 32px 40px 40px; display: flex; flex-direction: column; }
/* Every page fills the stage: panels in a row share one height, the last panel in a column takes what is left,
   and long lists scroll inside their own panel instead of the page. */
main.fit { height: 100%; }
.sheet { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.sh-body { flex: 1; }
.main > :last-child, .aside > :last-child { flex: 1; }
.blk, .full, .wide { display: flex; flex-direction: column; min-height: 0; }
.blk > .rows, .full > .rows, .wide > .rows, .wide > .facts { flex: 1; }

/* ---------- page parts ---------- */
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; }
.sh-head { padding: 0 0 28px; align-items: end; }
.sh-head .ttl { grid-column: 1 / 9; }
.sh-head .act { grid-column: 9 / 13; justify-self: end; display: flex; align-items: center; gap: 12px; }
.date { display: block; font-size: 13px; line-height: 16px; color: var(--faint); margin-bottom: 10px; }
.h1 { font-size: 40px; line-height: 44px; font-weight: 500; letter-spacing: -.03em; }
.lead b { font-weight: 500; color: var(--ink); }
.lead { margin-top: 10px; font-size: 16px; line-height: 24px; color: var(--body); max-width: 720px; }
.sh-body { row-gap: 20px; align-items: stretch; }
.main, .aside { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.main { grid-column: 1 / 9; }
.aside { grid-column: 9 / 13; }
.full { grid-column: 1 / 13; min-width: 0; }
.navl { grid-column: 1 / 4; }
.wide { grid-column: 4 / 13; min-width: 0; }
.blk, .full, .wide { border-radius: 20px; background: var(--panel); box-shadow: var(--panel-shadow); padding: 20px 22px 8px; }
.blk.flat { background: none; box-shadow: none; padding: 0; }
.sh-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding: 0; }
.sect { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.sect h2 { font-size: 15px; line-height: 20px; font-weight: 500; }
.sect h2 em { font-style: normal; font-weight: 400; color: var(--faint); margin-left: 6px; }
.fine { font-size: 13px; line-height: 18px; color: var(--faint); }
.blk > .fine, .full > .fine { margin-bottom: 10px; }

/* ---------- rows ---------- */
.rows { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 0; border-top: 1px solid var(--line); text-decoration: none; }
.rows > .row:first-child, .rows > .app:first-child { border-top: 0; }
.row.tight { min-height: 52px; padding: 8px 0; }
.row.log { min-height: 44px; padding: 0; gap: 0; }
.row.click { cursor: pointer; margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 12px; border-top-color: transparent; box-shadow: 0 -1px 0 var(--line); transition: background .15s; }
.rows > .row.click:first-child { box-shadow: none; }
.row.click:hover { background: var(--panel-hover); }
.row .t { font-size: 15px; line-height: 20px; font-weight: 500; color: var(--ink); }
.row .t.reg { font-weight: 400; font-size: 14px; }
.row .s { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--faint); }
.row .grow { flex: 1; min-width: 0; }
.row .r { flex: none; font-size: 13px; color: var(--faint); white-space: nowrap; }
.row .r.blue { color: var(--acc); font-weight: 500; }
.time { width: 60px; flex: none; font-size: 14px; color: var(--faint); }
.state { flex: none; font-size: 13px; color: var(--faint); white-space: nowrap; text-align: right; }
.state.need { color: var(--acc); font-weight: 500; }
.chev { flex: none; color: var(--faint); transform: rotate(-90deg); }
.logo { width: 32px; height: 32px; border-radius: 8px; flex: none; object-fit: cover; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.logo.sm { width: 28px; height: 28px; border-radius: 7px; }
.logo.lg { width: 52px; height: 52px; border-radius: 13px; }
.logo.glyph { display: grid; place-items: center; background: #fff; color: #1d1d1f; }
.logo.glyph svg { width: 62%; height: 62%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mono { width: 32px; height: 32px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--blue); color: #fff; font-weight: 500; font-size: 14px; }
.mono.sm { width: 28px; height: 28px; border-radius: 7px; font-size: 13px; }
.mono.lg { width: 52px; height: 52px; border-radius: 13px; font-size: 22px; }
.avatar { width: 36px; height: 36px; border-radius: 99px; object-fit: cover; flex: none; box-shadow: 0 0 0 1px var(--line); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; border: 0; cursor: pointer; font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none; transition: filter .15s, background .15s, transform .1s; }
.btn:active { transform: scale(.98); }
.btn.sm { height: 34px; padding: 0 14px; }
.btn.ink { background: var(--ink); color: var(--on-ink); }
.btn.ink:hover { filter: brightness(.92); }
.btn.primary { position: relative; height: 48px; padding: 0 54px 0 22px; font-size: 15px; color: #fff; background: var(--blue); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 6px 18px rgba(20,40,80,.25); }
.btn.primary.plain { padding: 0 22px; height: 40px; font-size: 14px; }
.btn.primary.sm { height: 40px; padding: 0 18px; font-size: 14px; }
.btn.primary:hover { background: var(--blue-hover); }
.btn.primary .disc { position: absolute; right: 7px; top: 7px; width: 34px; height: 34px; border-radius: 999px; background: #fff; display: grid; place-items: center; }
.btn.primary.full { width: 100%; }
.btn.quiet { background: var(--field); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); }
.btn.quiet:hover { background: var(--panel-hover); }
.btn.text { background: none; padding: 0 8px; color: var(--muted); }
.btn.text:hover { color: var(--ink); }
.btn.danger { background: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger); }
.btn[disabled] { opacity: var(--opacity-disabled); cursor: default; }
.link { background: none; border: 0; padding: 0; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--acc); text-decoration: none; white-space: nowrap; }
.link:hover { text-decoration: underline; text-underline-offset: 4px; }
.cta { display: flex; align-items: center; gap: 6px; flex: none; }

/* ---------- fields ---------- */
.field { width: 100%; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--field); outline: none; font-size: 14px; transition: border-color .15s, box-shadow .15s; }
.field::placeholder { color: var(--faint); }
.field:focus { border-color: var(--blue-light); box-shadow: 0 0 0 4px rgba(127,163,214,.18); }
.field.search { height: 38px; border-radius: 999px; padding: 0 16px 0 38px; border-color: transparent; background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='%238a8a90' stroke-width='2'/%3E%3Cpath d='M20 20l-4-4' stroke='%238a8a90' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 14px 50% no-repeat; margin-bottom: 8px; }
textarea.field { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; font-family: var(--font-mono); font-size: 13px; }
.fl { display: grid; gap: 8px; }
.fl > span { font-size: 13px; font-weight: 500; color: var(--body); }
.seg { display: inline-grid; grid-auto-flow: column; gap: 2px; padding: 3px; margin-right: -1px; border-radius: 999px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); }
.seg button { height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: none; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--active); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.15); }
:root[data-theme="light"] .seg button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 1px var(--line); }
.toggle { position: relative; width: 40px; height: 24px; flex: none; border-radius: 999px; border: 0; background: var(--line-2); cursor: pointer; transition: background .2s; }
.toggle::after { content: ""; position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-knob); transition: transform .2s var(--ease-arrive); }
.toggle[aria-checked="true"] { background: var(--blue); }
.toggle[aria-checked="true"]::after { transform: translateX(16px); }

/* gates */
.gate { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 9px; border-radius: 999px; border: 0; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.gate.static { cursor: default; height: 26px; background: none; color: var(--muted); }
.gate svg { flex: none; }
.gate.allow { color: var(--warn); }
.gate.verify, .gate.two { color: var(--acc); }

/* today: hello and the reel on top, then two rows of paired panels that share a height */
.today { flex: 1; row-gap: 20px; align-items: stretch; grid-template-rows: auto minmax(286px, 1.7fr) minmax(170px, 1fr); min-height: 720px; }
.today .blk { overflow: hidden; }
.today .blk > .rows { min-height: 0; overflow: auto; margin: 0 -22px; padding: 0 22px; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent); }
.legend { display: flex; gap: 20px; flex-wrap: wrap; margin-top: auto; padding: 12px 0 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--faint); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend svg { color: var(--muted); }
.today .c8 { grid-column: 1 / 9; }
.today .c4 { grid-column: 9 / 13; }
/* the banner: our photos behind the onboarding glass card; the bars are the onboarding step bars, here counting photos */
.hero { grid-column: 1 / 13; position: relative; height: 264px; border-radius: 22px; overflow: hidden; background: #0d0e10; isolation: isolate; box-shadow: var(--panel-shadow); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.07); }
.slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; opacity: 0; transform: scale(1.035); transition: opacity 1.4s var(--ease-arrive), transform 8.4s linear; }
.slides img.on { opacity: 1; transform: scale(1); }
.gcard { position: absolute; z-index: 2; left: 20px; top: 20px; bottom: 20px; width: calc((100% + 20px) * 6 / 12 - 40px); min-width: 380px; display: flex; flex-direction: column; padding: 22px 26px 24px; border-radius: 16px; color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.04)), rgba(14,15,17,.52);
  -webkit-backdrop-filter: blur(14px) saturate(1.6) brightness(.94); backdrop-filter: blur(14px) saturate(1.6) brightness(.94);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(0,0,0,.2), 0 2px 5px rgba(0,0,0,.2), 0 16px 40px rgba(0,0,0,.28); }
.bars { display: flex; gap: 6px; margin-bottom: 18px; }
.gcard > .bars + * { margin-top: auto; }
.bars i { flex: 1; height: 2px; border-radius: 2px; background: rgba(255,255,255,.22); overflow: hidden; }
.bars b { display: block; width: 0; height: 100%; background: var(--blue-light); }
.bars i.done b { width: 100%; }
.bars i.on b { animation: fillbar 7s linear forwards; }
.hero.still .bars i b { width: 0; animation: none; }
.hero.still .bars i:first-child b { width: 100%; }
@keyframes fillbar { from { width: 0 } to { width: 100% } }
.gcard .date { color: rgba(255,255,255,.7); margin-bottom: 4px; }
.gcard .h1 { font-size: 34px; line-height: 38px; color: #fff; }
.gcard .acc { color: var(--blue-light); }
.gcard .lead { margin-top: 6px; font-size: 15px; line-height: 22px; color: rgba(255,255,255,.86); }
.quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.qbtn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; font-size: 13px; font-weight: 500; color: #fff; background: rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.16); transition: background .15s; }
.qbtn:hover { background: rgba(255,255,255,.2); }
.qbtn.ghost { background: none; box-shadow: none; color: rgba(255,255,255,.72); padding: 0 6px; }
.qbtn kbd { background: rgba(255,255,255,.14); color: rgba(255,255,255,.8); }
.row.life { min-height: 56px; padding: 8px 0; gap: 12px; font-size: 14px; }
.row.life .k { display: block; font-size: 12px; line-height: 16px; color: var(--faint); }
.row.life p { color: var(--ink); }
.row.life .st { flex: none; font-size: 12px; font-weight: 500; color: var(--acc); padding: 2px 8px; border-radius: 99px; background: var(--tint); }

/* account: a grid of panels, two per row, rows share a height */
.wide.bare { background: none; box-shadow: none; padding: 0; }
.panes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.panes > .blk { min-width: 0; }
.panes > .span { grid-column: 1 / -1; }
.row.kvrow { min-height: 50px; padding: 8px 0; gap: 12px; }
.kk { width: 96px; flex: none; font-size: 13px; color: var(--faint); }
.vv { flex: 1; min-width: 0; font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.prof { display: flex; align-items: center; gap: 16px; padding: 6px 0 16px; }
.prof .avatar { width: 56px; height: 56px; }
.pn { font-size: 17px; font-weight: 500; }
.big { font-size: 24px; line-height: 30px; font-weight: 500; letter-spacing: -.02em; margin: 4px 0 4px; overflow-wrap: anywhere; }
.acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding: 16px 0 12px; }
.blk > .foot { margin-top: auto; padding: 12px 0 12px; }
.rows.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.rows.two > .row:nth-child(2) { border-top: 0; }
.steps { margin: 4px 0 0; padding: 0; list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.steps li { counter-increment: s; display: grid; gap: 4px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--faint); }
.steps li::before { content: counter(s); font-size: 12px; font-weight: 500; color: var(--acc); }
.steps b { font-size: 14px; font-weight: 500; color: var(--ink); }
.planhead { display: flex; align-items: center; gap: 12px; }
.chip { font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; color: var(--acc); background: var(--tint); box-shadow: inset 0 0 0 1px var(--tint-line); }
.trial { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin-top: 16px; }
.trial .meter { width: 100%; }
.meter { display: block; height: 4px; border-radius: 4px; background: var(--active); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 4px; background: var(--blue-light); }
.row.use { min-height: 52px; padding: 8px 0; gap: 16px; }
.row.use .vv { overflow: visible; }
.uv { width: 120px; flex: none; text-align: right; font-size: 13px; color: var(--muted); }

/* Needs you: the Relay deck */
.needs .deck { flex: 1; min-height: 0; overflow: auto; margin: 4px -4px 0; padding: 2px 4px 8px; scrollbar-width: none; }
.dcard { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 14px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.07), 0 14px 30px -16px rgba(0,0,0,.7);
  transition: transform .32s var(--ease-arrive), opacity .32s; }
:root[data-theme="light"] .dcard { background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 14px 30px -18px rgba(30,40,60,.35); }
.upnext { margin: 14px 0 2px; font-size: 13px; font-weight: 500; color: var(--faint); }
.dtop { display: flex; gap: 14px; align-items: flex-start; }
.dtop .logo, .dtop .mono { width: 40px; height: 40px; border-radius: 10px; }
.dtop .t { font-size: 16px; line-height: 22px; font-weight: 500; }
.dtop .s { margin-top: 2px; font-size: 13px; color: var(--faint); }
.dcount { flex: none; font-size: 12px; color: var(--faint); }
.dbot { display: flex; align-items: center; gap: 10px; }
.dchg { display: grid; gap: 0; border-radius: 12px; background: rgba(0,0,0,.18); box-shadow: inset 0 0 0 1px var(--line); }
:root[data-theme="light"] .dchg { background: var(--field); }
.dchg > div { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 14px; font-size: 13px; }
.dchg > div + div { border-top: 1px solid var(--line); }
.dchg .k { width: 88px; flex: none; color: var(--faint); }
.dchg .was { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-2); }
.dchg svg { color: var(--faint); flex: none; }
.dchg b { font-weight: 500; color: var(--ink); }
.dchg .same { color: var(--muted); }
.dbot .fine { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcard.out-ok { transform: translateX(110%) rotate(5deg); opacity: 0; }
.dcard.out-no { transform: translateX(-110%) rotate(-5deg); opacity: 0; }
.calm { flex: 1; display: grid; place-content: center; text-align: center; gap: 4px; }
.calm .t { font-size: 15px; font-weight: 500; }

/* tools: cards for what is connected, a directory you can scan */
.tgrid { grid-column: 1 / 13; align-self: start; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.tcard { display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 16px; border: 0; border-radius: 20px; background: var(--panel); box-shadow: var(--panel-shadow); color: inherit; text-decoration: none; text-align: left; font: inherit; cursor: pointer; transition: transform .2s var(--ease-arrive); }
.tcard:hover { transform: translateY(-2px); }
.tc-top { display: flex; align-items: flex-start; justify-content: space-between; }
.tc-st { font-size: 12px; font-weight: 500; color: var(--muted); padding: 3px 10px; border-radius: 999px; background: var(--active); }
.tc-st.warn { color: var(--acc); background: var(--tint); }
.tc-mid { display: grid; gap: 2px; min-width: 0; }
.tc-mid b { font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.tc-mid span { font-size: 13px; color: var(--faint); }
.tc-nums { display: flex; gap: 16px; font-size: 12px; color: var(--faint); }
.tc-nums b { font-size: 15px; font-weight: 500; color: var(--ink); margin-right: 2px; }
.tc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); min-height: 44px; }
.tcard.add { align-items: center; justify-content: center; gap: 6px; min-height: 236px; background: none; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.tcard.add .plus { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; font-size: 22px; color: var(--acc); background: var(--tint); margin-bottom: 6px; }
.tcard.add b { font-size: 15px; font-weight: 500; }
.addtop { grid-column: span 6; }
.addtop > .fine { margin-bottom: 14px; }
.ownrow { display: flex; gap: 8px; }
.ownrow .btn { height: 44px; padding: 0 20px; }
.ownmeta { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.ownmeta .field { height: 38px; max-width: 220px; font-size: 13px; }
.areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.area { display: grid; gap: 4px; padding: 12px 14px; border: 0; border-radius: 14px; text-align: left; cursor: pointer; font: inherit; color: inherit; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); transition: background .2s, box-shadow .2s; }
.area:hover { background: var(--panel-hover); }
.area[aria-pressed="true"] { background: var(--tint); box-shadow: inset 0 0 0 1px var(--blue-light); }
.area b { font-size: 14px; font-weight: 500; }
.area span { font-size: 12px; line-height: 16px; color: var(--faint); }
.addtop { padding-bottom: 18px; }
.dirp { padding-bottom: 22px; }
.dirhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dirhead .field.search { max-width: 320px; margin: 0; }
.pchips.cats { margin: 14px 0 18px; }
.pchips.cats button span { color: var(--faint); font-weight: 400; margin-left: 2px; }
.agrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.acard { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; gap: 12px; padding: 14px; border-radius: 16px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); transition: background .2s; }
.acard:hover { background: var(--panel-hover); }
.acard .logo, .acard .mono { width: 40px; height: 40px; border-radius: 10px; }
.ac-t { display: grid; align-content: center; min-width: 0; }
.ac-t b { font-size: 14px; font-weight: 500; }
.ac-t span { font-size: 12px; color: var(--faint); }
.ac-f { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ac-f .btn { height: 30px; padding: 0 14px; font-size: 13px; }
.added { font-size: 13px; font-weight: 500; color: var(--faint); height: 30px; display: inline-flex; align-items: center; }

/* files: a gallery with previews */
.fgrid { grid-column: 1 / 13; align-self: start; align-content: start; display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 20px; }
.fcard { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--panel); box-shadow: var(--panel-shadow); transition: transform .2s var(--ease-arrive); }
.fcard:hover { transform: translateY(-2px); }
.fprev { position: relative; aspect-ratio: 16 / 10; margin: 8px 8px 0; border-radius: 12px; overflow: hidden; background: var(--field); }
.fprev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fnone { position: absolute; inset: 0; display: grid; place-items: center; }
.fby { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 6px; border-radius: 999px; font-size: 11px; font-weight: 500; color: #fff; background: rgba(14,15,17,.55); -webkit-backdrop-filter: blur(10px) saturate(1.6); backdrop-filter: blur(10px) saturate(1.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.fby svg { width: 14px; height: 14px; padding: 3px; border-radius: 99px; background: var(--blue); box-sizing: border-box; }
.fbody { padding: 12px 16px 10px; display: grid; gap: 4px; min-width: 0; }
.fname { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fname .t { font-size: 14px; font-weight: 500; min-width: 0; }
.fbody > .s { font-size: 12px; color: var(--faint); }
.ffoot { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.fctx { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-right: auto; }
.ftype.sm { width: 22px; height: 26px; border-radius: 4px; padding-bottom: 3px; font-size: 6.5px; }
.ftype.sm::before { border-left-width: 6px; border-bottom-width: 6px; }
.toggle.sm { width: 32px; height: 20px; }
.toggle.sm::after { width: 16px; height: 16px; }
.toggle.sm[aria-checked="true"]::after { transform: translateX(12px); }

/* circles: covers with a glass caption */
.cgrid { grid-column: 1 / 13; align-self: start; align-content: start; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.ccard { position: relative; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--panel); box-shadow: var(--panel-shadow); text-decoration: none; color: inherit; transition: transform .2s var(--ease-arrive); }
.ccard:hover { transform: translateY(-2px); }
.ccover { display: block; aspect-ratio: 16 / 8; margin: 8px 8px 0; border-radius: 14px; background-size: cover; }
.cglass { position: absolute; left: 20px; bottom: 76px; display: grid; gap: 2px; padding: 12px 16px; border-radius: 12px; color: #fff; background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.04)), rgba(14,15,17,.5); -webkit-backdrop-filter: blur(14px) saturate(1.6) brightness(.94); backdrop-filter: blur(14px) saturate(1.6) brightness(.94); box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 10px 24px rgba(0,0,0,.25); }
.cglass b { font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.cglass span { font-size: 12px; color: rgba(255,255,255,.78); }
.cfoot { display: flex; align-items: center; gap: 14px; padding: 14px 16px 16px 18px; }
.cfoot .grow { flex: 1; min-width: 0; }
.ccard.new { align-items: center; justify-content: center; gap: 6px; min-height: 240px; border: 0; cursor: pointer; font: inherit; background: none; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.ccard.new .plus { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; font-size: 22px; color: var(--acc); background: var(--tint); margin-bottom: 6px; }
.ccard.new b { font-size: 15px; font-weight: 500; }
.chero { margin-bottom: 20px; height: 260px; }
.chero .slides img { object-position: 100% 50%; }
.gfoot { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.gfoot .faces img { box-shadow: 0 0 0 2px rgba(30,31,36,.9); }
.qbtn.solid { background: #fff; color: #111214; box-shadow: none; }
.qbtn.solid:hover { background: rgba(255,255,255,.88); }

/* activity: the week in four numbers, then the record by day */
.stats { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 20px; background: var(--panel); box-shadow: var(--panel-shadow); }
.stats > div { padding: 18px 22px; display: grid; gap: 2px; }
.stats > div + div { box-shadow: inset 1px 0 0 var(--line); }
.stats b { font-size: 28px; line-height: 34px; font-weight: 500; letter-spacing: -.02em; }
.stats span { font-size: 13px; color: var(--faint); }
.day { margin: 14px 0 2px; font-size: 13px; font-weight: 500; color: var(--faint); }
.full > .day:first-child { margin-top: 0; }

/* a tool: its own logo, blown up and blurred, behind the glass card */
.thero { position: relative; height: 236px; margin-bottom: 20px; border-radius: 22px; overflow: hidden; isolation: isolate; background: radial-gradient(120% 140% at 85% 20%, rgba(74,111,165,.45), rgba(20,22,27,0) 60%), #121317; box-shadow: var(--panel-shadow); }
.thero-glow { position: absolute; right: 40px; top: 50%; width: 360px; height: 360px; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(127,163,214,.38), rgba(74,111,165,.12) 55%, transparent); pointer-events: none; }
.thero-icon { position: absolute; right: 112px; top: 50%; width: 132px; height: 132px; transform: translateY(-50%) rotate(-6deg); border-radius: 30px; object-fit: cover; background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 30px 60px -20px rgba(0,0,0,.7), 0 10px 20px -10px rgba(0,0,0,.5); animation: iconin .9s var(--ease-arrive) both; }
.mono-big { display: grid; place-items: center; font-size: 56px; font-weight: 500; color: #fff; background: linear-gradient(180deg, #5a80b9, #4a6fa5); }
@keyframes iconin { from { opacity: 0; transform: translateY(-46%) rotate(-12deg) scale(.94); } }
.sh-body.natural { align-items: start; flex: none; }
.sh-body.natural .main > :last-child, .sh-body.natural .aside > :last-child { flex: none; }
.thero::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.06); pointer-events: none; }
.gcard.tg { width: calc((100% + 20px) * 8 / 12 - 40px); gap: 0; }
.tg-top { display: flex; align-items: center; gap: 16px; }
.tg-top .h1 { font-size: 30px; line-height: 34px; color: #fff; }
.tg-sub { margin-top: 2px; font-size: 14px; color: rgba(255,255,255,.7); }
.gcard .tc-st { background: rgba(255,255,255,.12); color: rgba(255,255,255,.85); }
.tg-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: auto; padding: 14px 0 0; border-top: 1px solid rgba(255,255,255,.12); }
.tg-nums div { display: grid; gap: 2px; }
.tg-nums div + div { padding-left: 16px; border-left: 1px solid rgba(255,255,255,.1); }
.tg-nums b { font-size: 24px; line-height: 28px; font-weight: 500; color: #fff; }
.tg-nums span { font-size: 12px; color: rgba(255,255,255,.62); }
.gcard.tg .gfoot { margin-top: 14px; }
.qbtn.danger { color: #ffb4ae; }
.tdot { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--field); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.tdot.allow { color: var(--warn); }
.tdot.verify, .tdot.two { color: var(--acc); background: var(--tint); box-shadow: inset 0 0 0 1px var(--tint-line); }
.rgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-bottom: 14px; }
.rchip { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 8px 6px 7px; border-radius: 12px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; }
.rchip .tdot { width: 26px; height: 26px; border-radius: 8px; box-shadow: none; background: var(--active); }
.mini-tl { position: relative; margin: 2px 0 0; padding: 0 0 14px; list-style: none; display: grid; gap: 14px; }
.mini-tl::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 22px; width: 1px; background: var(--line-2); }
.mini-tl li { display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 12px; align-items: start; }
.mini-tl .tl-dot { margin-top: 6px; }
.mini-tl .t { font-size: 14px; line-height: 20px; font-weight: 500; }
.mini-tl .s { font-size: 12px; color: var(--faint); }
.mini-tl li.no .t { color: var(--muted); }

/* activity: a timeline that scrolls inside its own panel */
.tlp { padding: 0; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.sheet:has(.tlp) .sh-body { min-height: 0; }
.tl-scroll { flex: 1; min-height: 0; overflow: auto; padding: 4px 22px 22px; scrollbar-width: thin; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 22px), transparent); }
.tl-label { margin: 0; padding: 18px 0 8px 104px; font-size: 13px; font-weight: 500; color: var(--faint); }
.tl { position: relative; margin: 0; padding: 0; list-style: none; }
.tl::before { content: ""; position: absolute; left: 83.5px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, var(--line-2), var(--line)); }
.tl-item { position: relative; display: grid; grid-template-columns: 64px 24px minmax(0, 1fr); align-items: center; column-gap: 8px; padding: 5px 0; }
.tl-time { font-size: 13px; color: var(--faint); text-align: right; }
.tl-dot { justify-self: center; width: 9px; height: 9px; border-radius: 99px; background: var(--muted); box-shadow: 0 0 0 4px var(--panel-solid, #17181c); position: relative; z-index: 1; }
:root[data-theme="light"] .tl-dot { --panel-solid: #fff; }
.tl-dot.allow { background: var(--warn); }
.tl-dot.confirm { background: var(--muted); }
.tl-dot.verify, .tl-dot.two { background: var(--blue-light); }
.tl-card { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 14px; border-radius: 14px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); transition: background .2s, transform .2s var(--ease-arrive); }
.tl-card:hover { background: var(--panel-hover); transform: translateX(2px); }
.tl-card .grow { flex: 1; min-width: 0; }
.tl-card .t { font-size: 14px; line-height: 20px; font-weight: 500; }
.tl-card .s { margin-top: 1px; font-size: 12px; color: var(--faint); }
.tl-res { width: 64px; flex: none; text-align: right; font-size: 13px; color: var(--muted); }
.tl-item.no .tl-res { color: var(--acc); font-weight: 500; }
.tl-item.no .tl-card .t { color: var(--muted); }

/* the brain speaks in a message panel */
.brain { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 18px; background: var(--tint); box-shadow: inset 0 0 0 1px var(--tint-line); }
.brain .m { width: 28px; height: 28px; border-radius: 999px; background: var(--blue); display: grid; place-items: center; flex: none; margin-top: -2px; }
.brain p { font-size: 15px; line-height: 22px; color: var(--ink); }
.brain p.fine { margin-top: 6px; font-size: 13px; line-height: 16px; color: var(--faint); }

/* wells */
.wells { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.well { display: flex; flex-direction: column; min-width: 0; padding: 16px 18px; border-radius: 18px; background: var(--panel); box-shadow: var(--panel-shadow); }
.well .k { font-size: 13px; font-weight: 500; color: var(--faint); }
.well .v { margin: 8px 0 16px; font-size: 14px; line-height: 20px; color: var(--ink); }
.well .st { margin-top: auto; font-size: 13px; font-weight: 500; color: var(--acc); }

.faces { display: flex; flex: none; }
.faces { padding-left: 2px; }
.faces img { width: 30px; height: 30px; border-radius: 999px; object-fit: cover; box-shadow: 0 0 0 2px var(--ring); margin-right: -9px; }
.faces img:last-child { margin-right: 0; }
.faces.sm img { width: 24px; height: 24px; }

/* directory */
.dir { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.app { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0; border: 0; border-top: 1px solid var(--line); background: none; cursor: pointer; text-align: left; width: 100%; }
.app:hover .t { color: var(--acc); }
.app .t { font-size: 14px; font-weight: 500; }
.app .s { margin-top: 1px; font-size: 13px; color: var(--faint); }
.app .add { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--acc); white-space: nowrap; }
.app .add.done { color: var(--faint); font-weight: 400; }
.cat { margin: 20px 0 4px; font-size: 13px; font-weight: 500; color: var(--faint); }

/* files */
.drop { grid-column: 1 / 13; position: relative; display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 148px; padding: 24px; border-radius: 20px; text-align: center; cursor: pointer;
  background: radial-gradient(60% 120% at 50% 0%, var(--tint), transparent 70%), var(--panel); box-shadow: var(--panel-shadow); transition: background .3s, transform .3s var(--ease-arrive); }
.drop::after { content: ""; position: absolute; inset: 8px; border-radius: 14px; border: 1.5px dashed var(--line-2); pointer-events: none; transition: border-color .3s, inset .3s var(--ease-arrive); }
.drop:hover::after { border-color: var(--blue-light); }
.drop.over { transform: scale(1.005); background: radial-gradient(70% 140% at 50% 0%, rgba(127,163,214,.32), transparent 70%), var(--panel); }
.drop.over::after { border-color: var(--blue-light); inset: 6px; }
.dic { width: 44px; height: 44px; margin-bottom: 6px; border-radius: 14px; display: grid; place-items: center; color: var(--acc); background: var(--tint); box-shadow: inset 0 0 0 1px var(--tint-line); transition: transform .3s var(--ease-arrive); }
.dic svg { width: 20px; height: 20px; }
.drop:hover .dic, .drop.over .dic { transform: translateY(-2px); }
.drop b { font-size: 16px; font-weight: 500; color: var(--ink); }
.dsub { font-size: 13px; line-height: 19px; color: var(--faint); max-width: 520px; }
.drop u { color: var(--acc); text-decoration: none; font-weight: 500; }
.ftype { width: 32px; height: 38px; flex: none; border-radius: 6px; display: grid; place-items: end center; padding-bottom: 5px; font-size: 9px; font-weight: 600; letter-spacing: .04em; color: #fff; background: #6b7280; position: relative; }
.ftype::before { content: ""; position: absolute; right: 0; top: 0; border-left: 9px solid rgba(255,255,255,.35); border-bottom: 9px solid transparent; }
.ftype.deck { background: #c8693c; } .ftype.doc { background: #4a6fa5; } .ftype.sheet { background: #3f8a5c; } .ftype.pdf { background: #b5473f; } .ftype.img { background: #7c63a8; }
.by { display: inline-flex; align-items: center; gap: 6px; }
.by .m { width: 16px; height: 16px; border-radius: 99px; background: var(--blue); display: inline-grid; place-items: center; }

/* memory and account side nav */
.side { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; }
.side button, .side a { display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: none; cursor: pointer; font-size: 14px; color: var(--muted); text-align: left; text-decoration: none; }
.side button:hover, .side a:hover { color: var(--ink); background: var(--panel-hover); }
.side [aria-pressed="true"], .side [aria-current="true"] { background: var(--active); color: var(--ink); font-weight: 500; }
.side span { font-size: 13px; color: var(--faint); font-weight: 400; }
.fact { display: flex; gap: 16px; align-items: center; min-height: 64px; padding: 12px 0; border-top: 1px solid var(--line); }
.facts > .fact:first-child { border-top: 0; }
.fact .grow { flex: 1; min-width: 0; }
.fact .t { font-size: 15px; line-height: 22px; color: var(--ink); }
.fact .s { margin-top: 2px; font-size: 13px; color: var(--faint); }
.fact.gone .t { color: var(--faint); text-decoration: line-through; }
.kv { display: flex; align-items: center; gap: 16px; min-height: 46px; border-top: 1px solid var(--line); font-size: 14px; }
.kv:first-of-type { border-top: 0; }
.kv > span:first-child { width: 80px; flex: none; color: var(--faint); font-size: 13px; }
code, .code { font-family: var(--font-mono); font-size: 13px; }
.copy { display: flex; align-items: center; gap: 12px; padding: 0 6px 0 14px; height: 46px; border-radius: 12px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); }
.copy code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bubble { max-width: 100%; padding: 12px 16px; border-radius: 18px 18px 18px 6px; background: var(--field); font-size: 14px; line-height: 20px; }
.bubble.me { margin-left: auto; max-width: 85%; border-radius: 18px 18px 6px 18px; background: var(--blue); color: #fff; }

/* ---------- popovers: glass, one layer above everything ---------- */
.pop { background: var(--pop); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); box-shadow: var(--rim), 0 30px 80px rgba(0,0,0,.4); }
.menu { position: fixed; z-index: 40; width: 240px; padding: 6px; border-radius: 16px; animation: rise .18s var(--ease-arrive); }
.menu a, .menu button { display: flex; width: 100%; align-items: center; height: 34px; padding: 0 10px; border-radius: 9px; border: 0; background: none; text-decoration: none; font-size: 14px; text-align: left; cursor: pointer; }
.menu a:hover, .menu button:hover { background: var(--active); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
.gatepick { position: absolute; z-index: 30; width: 300px; padding: 6px; border-radius: 16px; animation: rise .18s var(--ease-arrive); }
.gatepick button { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none; text-align: left; cursor: pointer; }
.gatepick button:hover, .gatepick button[aria-checked="true"] { background: var(--active); }
.gatepick b { display: block; font-size: 14px; font-weight: 500; }
.gatepick small { display: block; font-size: 13px; color: var(--faint); }
.scrim { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(5,6,8,.62); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); animation: fade .22s ease; }
:root[data-theme="light"] .scrim { background: rgba(30,35,45,.32); }
.modal { width: min(460px, 100%); padding: 28px; border-radius: 24px; animation: rise .3s var(--ease-arrive); }
.modal h3 { font-size: 22px; line-height: 28px; font-weight: 500; letter-spacing: -.02em; }
.modal p { margin-top: 8px; font-size: 15px; line-height: 22px; color: var(--body); }
.modal .fine { font-size: 13px; color: var(--faint); }
.modal .acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.faceid { width: 60px; height: 60px; margin-bottom: 18px; border-radius: 18px; display: grid; place-items: center; background: var(--tint); color: var(--acc); }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 60; transform: translateX(-50%); padding: 11px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; animation: toastin .3s var(--ease-arrive); }

/* sheets: the pop-ups that create things */
.modal.wide { width: min(860px, 100%); padding: 0; overflow: hidden; }
.modal.sheet { width: min(560px, 100%); padding: 0; overflow: hidden; }
.mgrid { display: grid; grid-template-columns: 340px minmax(0, 1fr); min-height: 560px; }
.mprev { position: relative; background: #0d0e10; overflow: hidden; }
.mcover { position: absolute; inset: 0; background-size: cover; background-position: 70% 50%; transition: background-image .3s; }
.mprev .cglass { left: 20px; right: 20px; bottom: 76px; }
.mprev .cglass b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mprev-foot { position: absolute; left: 20px; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; font-size: 12px; color: rgba(255,255,255,.85); background: rgba(14,15,17,.5); -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.mprev-foot .faces img { width: 24px; height: 24px; box-shadow: 0 0 0 2px rgba(30,31,36,.9); }
.mform, .mbody { display: flex; flex-direction: column; gap: 18px; padding: 28px 28px 24px; min-width: 0; }
.mform h3, .mbody h3 { font-size: 28px; line-height: 32px; font-weight: 500; letter-spacing: -.025em; margin-top: -10px; }
.mbody > p { margin-top: -10px; }
.eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.fl > span em { font-style: normal; font-weight: 400; color: var(--faint); margin-left: 4px; }
.mform .acts, .mbody .acts { margin-top: auto; padding-top: 4px; }
.pchips { display: flex; flex-wrap: wrap; gap: 6px; }
.pchips button { height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer; }
.pchips button[aria-checked="true"] { background: var(--tint); color: var(--acc); box-shadow: inset 0 0 0 1px var(--tint-line); }
.covers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.cv { aspect-ratio: 3 / 2; border: 0; border-radius: 10px; background: var(--field) center / cover; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; color: var(--muted); transition: box-shadow .15s; }
.cv[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--blue-light); }
.cv.up { border: 1.5px dashed var(--line-2); box-shadow: none; }
.cv.up.set { border: 0; color: transparent; }
.cv.up.set[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--blue-light); }
.tokens { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 44px; padding: 6px 10px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--field); cursor: text; }
.tokens:focus-within { border-color: var(--blue-light); box-shadow: 0 0 0 4px rgba(127,163,214,.18); }
.tokens input { flex: 1; min-width: 160px; height: 30px; border: 0; outline: none; background: none; font-size: 14px; }
.tok { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px 0 10px; border-radius: 999px; font-size: 13px; background: var(--tint); color: var(--ink); box-shadow: inset 0 0 0 1px var(--tint-line); }
.tok button { width: 20px; height: 20px; border: 0; border-radius: 99px; background: none; color: var(--muted); cursor: pointer; }
.mhead { position: relative; height: 168px; background: #0d0e10 70% 50% / cover; }
.mhead .cglass { position: absolute; left: 20px; bottom: 20px; }
.mhead .cglass span { font-size: 12px; color: rgba(255,255,255,.75); }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.field.note { height: auto; padding: 12px 14px; resize: vertical; font-family: var(--font-sans); font-size: 14px; line-height: 20px; }
.field.note.big { font-size: 17px; line-height: 26px; min-height: 96px; }
.bubble.preview { align-self: flex-start; max-width: 90%; font-size: 13px; color: var(--body); }
.plist { display: grid; gap: 4px; max-height: 260px; overflow: auto; margin: 0 -8px; padding: 0 8px; }
.pick { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 6px 10px 6px 6px; border: 0; border-radius: 12px; background: none; text-align: left; cursor: pointer; }
.pick:hover { background: var(--panel-hover); }
.pick[aria-pressed="true"] { background: var(--tint); }
.pick img { width: 56px; height: 35px; border-radius: 6px; object-fit: cover; flex: none; box-shadow: 0 0 0 1px var(--line); }
.pdot { width: 56px; height: 35px; border-radius: 6px; flex: none; display: grid; place-items: center; background: var(--field); color: var(--muted); }
.pdot svg { width: 16px; height: 16px; }
.pick .grow { display: grid; min-width: 0; }
.pick b { font-size: 14px; font-weight: 500; }
.pick small { font-size: 12px; color: var(--faint); }
.tick { width: 20px; height: 20px; border-radius: 99px; flex: none; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.pick[aria-pressed="true"] .tick { background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; box-shadow: none; }

/* new circle: a pop-up in the sign-up's look. The cover on the left with the live circle card, the steps on the right. */
.cflow { position: fixed; inset: 0; z-index: 58; display: grid; place-items: center; padding: 20px; background: rgba(5,6,8,.62); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); animation: fade .22s ease; transition: opacity .18s; }
.cflow.leaving { opacity: 0; }
.cf-shell { --c-fg: #fff; --c-mut: rgba(255,255,255,.72); --c-faint: rgba(255,255,255,.55); --c-line: rgba(255,255,255,.1); --c-fill: rgba(255,255,255,.07); --c-fill2: rgba(255,255,255,.12); --c-edge: rgba(255,255,255,.16);
  position: relative; width: min(940px, 100%); height: min(640px, calc(100vh - 40px)); display: grid; grid-template-columns: 380px minmax(0, 1fr); border-radius: 26px; overflow: hidden; color: var(--c-fg); background: #111215;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.07), 0 40px 100px rgba(0,0,0,.5); animation: rise .4s var(--ease-arrive); }
:root[data-theme="light"] .cf-shell { --c-fg: #1d1d1f; --c-mut: #515154; --c-faint: #86868b; --c-line: rgba(0,0,0,.08); --c-fill: rgba(0,0,0,.035); --c-fill2: rgba(0,0,0,.06); --c-edge: rgba(0,0,0,.12);
  background: #fbfbfd; box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(0,0,0,.05), 0 40px 100px rgba(20,25,40,.28); }
:root[data-theme="light"] .cflow { background: rgba(30,35,45,.28); }
.cf-media { position: relative; overflow: hidden; background: #0b0c0e; }
.cf-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; opacity: 0; transform: scale(1.04); transition: opacity .6s var(--ease-arrive), transform 1.2s var(--ease-arrive); }
.cf-media > img.on { opacity: 1; transform: none; }
.cf-x { flex: none; width: 30px; height: 30px; border: 0; border-radius: 999px; display: grid; place-items: center; color: var(--c-mut); cursor: pointer; background: var(--c-fill); box-shadow: inset 0 0 0 1px var(--c-line); transition: background .15s, color .15s; }
.cf-x:hover { background: var(--c-fill2); color: var(--c-fg); }
.cf-card { position: relative; display: flex; flex-direction: column; min-height: 0; padding: 24px 28px 22px; background: radial-gradient(120% 80% at 100% 0%, rgba(74,111,165,.2), rgba(74,111,165,0) 60%); }
.cf-stage { position: relative; flex: 1; min-height: 0; margin-top: 18px; }
.cf-step { position: absolute; inset: 0; display: flex; flex-direction: column; transition: transform .28s var(--ease-arrive), opacity .22s ease; }
.cf-top { display: flex; align-items: center; gap: 16px; height: 30px; flex: none; }
.cf-bars { flex: 1; display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cf-bars li { flex: 1; height: 2px; border-radius: 2px; background: var(--c-edge); overflow: hidden; }
.cf-bars li i { display: block; height: 100%; width: 0; background: var(--blue-light); transition: width .45s var(--ease-arrive); }
.cf-bars li.on i { width: 100%; }
.cf-back { border: 0; background: none; padding: 0; color: var(--c-mut); font-size: 13px; cursor: pointer; text-decoration: underline; text-decoration-color: var(--c-edge); text-underline-offset: 4px; }
.cf-head { flex: none; }
.cf-eye { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--c-faint); }
.cf-head h2 { margin: 6px 0 0; font-size: 30px; line-height: 34px; font-weight: 500; letter-spacing: -.033em; text-wrap: balance; }
.cf-head .acc { color: var(--acc); }
.cf-head p { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--c-mut); }
.cf-body { flex: 1; min-height: 0; overflow: auto; margin: 20px -8px 0; padding: 2px 8px 8px; display: flex; flex-direction: column; gap: 16px; scrollbar-width: none; }
.cf-foot { flex: none; display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--c-line); }
.cf-foot .cf-back[hidden] + .btn { margin-left: auto; }
.cf-foot .btn.primary[disabled] { opacity: .4; }
.cflow .grow { flex: 1; min-width: 0; }
.opts { display: grid; gap: 6px; }
.opt { transition: background .2s, box-shadow .2s; display: flex; align-items: center; gap: 14px; width: 100%; padding: 11px 14px; border: 0; border-radius: 14px; text-align: left; cursor: pointer; color: var(--c-fg); background: var(--c-fill); box-shadow: inset 0 0 0 1px var(--c-line); transition: background .15s, box-shadow .15s; }
.opt:hover { background: var(--c-fill2); }
.opt[aria-checked="true"] { background: var(--tint); box-shadow: inset 0 0 0 1.5px var(--blue-light); }
.opt b { display: block; font-size: 15px; font-weight: 500; }
.opt small, .prow small, .srow small { display: block; margin-top: 2px; font-size: 12px; color: var(--c-faint); }
.opt .life { flex: none; font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 999px; color: var(--c-mut); background: var(--c-fill2); }
.cfl { display: grid; gap: 8px; }
.cfl > span { font-size: 13px; font-weight: 500; color: var(--c-fg); }
.cfl > span em { font-style: normal; font-weight: 400; color: var(--c-faint); margin-left: 4px; }
.cff { width: 100%; height: 48px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--c-edge); background: var(--c-fill); color: var(--c-fg); font-size: 16px; outline: none; }
.cff::placeholder { color: var(--c-faint); }
.cff:focus, .tokens.dark:focus-within { border-color: var(--blue-light); box-shadow: 0 0 0 4px rgba(127,163,214,.22); }
.cflow .covers { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cflow .cv { aspect-ratio: 4 / 3; }
.cflow .cv { box-shadow: inset 0 0 0 1px var(--c-line); color: var(--c-mut); }
.cflow .cv.up { border-color: var(--c-edge); }
.tokens.dark { border-color: var(--c-edge); background: var(--c-fill); }
.tokens.dark input { color: var(--c-fg); }
.tokens.dark input::placeholder { color: var(--c-faint); }
.tokens.dark .tok { background: var(--tint); color: var(--c-fg); box-shadow: inset 0 0 0 1px var(--tint-line); }
.tokens.dark .tok button { color: var(--c-mut); }
.plist2 { display: grid; }
.prow { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 0; border-top: 1px solid var(--c-line); }
.prow:first-child { border-top: 0; }
.prow img { width: 36px; height: 36px; border-radius: 99px; object-fit: cover; }
.prow b { font-size: 14px; font-weight: 500; }
.pinit { width: 36px; height: 36px; border-radius: 99px; flex: none; display: grid; place-items: center; font-size: 14px; font-weight: 500; color: #fff; background: linear-gradient(180deg, #5a80b9, #4a6fa5); }
.pinit.sm { width: 24px; height: 24px; font-size: 11px; margin-left: -8px; box-shadow: 0 0 0 2px rgba(30,31,36,.9); }
.seg.dk { background: var(--c-fill); box-shadow: inset 0 0 0 1px var(--c-line); }
.seg.dk button { height: 28px; padding: 0 10px; color: var(--c-faint); font-size: 12px; transition: background .2s, color .2s; }
.seg.dk button[aria-pressed="true"] { background: var(--c-fill2); color: var(--c-fg); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 2px rgba(0,0,0,.12); }
.cover-seat { height: 28px; padding: 0 10px; border: 0; border-radius: 999px; font-size: 12px; font-weight: 500; cursor: pointer; color: var(--c-mut); background: none; box-shadow: inset 0 0 0 1px var(--c-edge); transition: background .2s, color .2s, box-shadow .2s, opacity .2s; }
.cover-seat:disabled { opacity: .35; cursor: default; }
.cover-seat[aria-pressed="true"] { color: var(--acc); background: var(--tint); box-shadow: inset 0 0 0 1px var(--blue-light); }
.shr { display: grid; }
.srow { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 0; border-top: 1px solid var(--c-line); }
.shr .srow:first-child, .sum .srow:first-child { border-top: 0; }
.srow b { font-size: 14px; font-weight: 500; }
.srow.locked b { color: var(--c-mut); }
.lock { font-size: 12px; color: var(--c-faint); }
.cflow .toggle { background: var(--c-edge); }
.cflow .toggle[aria-checked="true"] { background: var(--blue); }
.handle { display: flex; align-items: center; height: 48px; border-radius: 12px; border: 1px solid var(--c-edge); background: var(--c-fill); overflow: hidden; }
.handle:focus-within { border-color: var(--blue-light); box-shadow: 0 0 0 4px rgba(127,163,214,.22); }
.handle .cff { border: 0; background: none; box-shadow: none !important; text-align: right; padding-right: 2px; }
.handle span { padding-right: 16px; color: var(--c-faint); font-size: 15px; white-space: nowrap; }
.hint { font-size: 12px; color: var(--c-faint); }
.sum { display: grid; }
.sk { width: 88px; flex: none; font-size: 13px; color: var(--c-faint); }
.sv { font-size: 14px; line-height: 20px; }
.cfine { font-size: 12px; color: var(--c-faint); }
.cf-prev { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 20px; display: grid; gap: 8px; }
.cf-prev .cglass { position: static; }
.cf-prev .cglass span { font-size: 12px; color: rgba(255,255,255,.75); }
.cf-pf { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; font-size: 12px; color: rgba(255,255,255,.85); background: rgba(14,15,17,.5); -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.cf-pf .faces { align-items: center; }
.cf-pf .faces img { width: 24px; height: 24px; box-shadow: 0 0 0 2px rgba(30,31,36,.9); margin-right: 0; }

/* command bar */
.cmdk { position: fixed; inset: 0; z-index: 55; display: flex; justify-content: center; align-items: flex-start; padding: 14vh 20px 20px; background: rgba(5,6,8,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: fade .15s ease; }
.cmdk .box { width: min(620px, 100%); border-radius: 20px; overflow: hidden; animation: rise .2s var(--ease-arrive); }
.cmdk input { width: 100%; height: 58px; padding: 0 20px 0 52px; border: 0; outline: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='%238a8a90' stroke-width='2'/%3E%3Cpath d='M20 20l-4-4' stroke='%238a8a90' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 20px 50% no-repeat; font-size: 16px; border-bottom: 1px solid var(--line); }
.cmdk .res { max-height: 52vh; overflow: auto; padding: 6px; }
.cmdk .grp { padding: 10px 12px 4px; font-size: 12px; font-weight: 500; color: var(--faint); }
.cmdk .it { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 6px 12px; border: 0; border-radius: 11px; background: none; text-align: left; cursor: pointer; font-size: 14px; }
.cmdk .it .s { margin-left: auto; font-size: 12px; color: var(--faint); white-space: nowrap; }
.cmdk .it[aria-selected="true"] { background: var(--active); }
.cmdk .it .ic { width: 24px; height: 24px; display: grid; place-items: center; flex: none; color: var(--muted); }
.cmdk .it .ic img { width: 22px; height: 22px; border-radius: 6px; }
.cmdk .foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--faint); }
.cmdk .empty { padding: 28px 16px; text-align: center; color: var(--faint); }

@keyframes fade { from { opacity: 0 } }
@keyframes rise { from { opacity: 0; transform: translateY(6px) scale(.99) } }
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 8px) } }
@keyframes arrive { from { opacity: 0; transform: translateY(6px) } }
.arrive { animation: arrive .45s var(--ease-arrive) both; }
/* A page's panels rise in one after another when you open it; images fade in as they load. */
@keyframes panelin { from { opacity: 0; transform: translateY(10px) scale(.995) } }
.stagger .sh-head, .stagger .hero, .stagger .blk, .stagger .full, .stagger .wide, .stagger .navl, .stagger .fcard, .stagger .ccard, .stagger .drop, .stagger .panes > * { animation: panelin .36s var(--ease-arrive) both; animation-delay: calc(var(--i, 0) * 30ms); }
img.ld { opacity: 0; }
img { transition: opacity .5s ease; }
.boot .rail { animation: panelin .6s var(--ease-arrive) both; }
.boot .stage { animation: panelin .6s var(--ease-arrive) .06s both; }
.bottom-tabs { display: none; }

/* ---------- sign in (cinematic, the same glass card as onboarding) ---------- */
.signin { position: fixed; inset: 0; z-index: 2; background: #0e0f11; color: #fff; overflow: hidden; }
.signin > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; animation: settle 2.4s var(--ease-arrive) both; }
@keyframes settle { from { transform: scale(1.04); filter: brightness(.6) } }
.signin .top { position: absolute; left: 89px; top: 42px; height: 28px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.si-card { position: absolute; left: 96px; top: 50%; transform: translateY(-50%); width: 506px; padding: 48px; border-radius: 24px; color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)), rgba(16,17,19,.74);
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 2px 6px rgba(0,0,0,.2), 0 24px 64px rgba(0,0,0,.32);
  animation: cardin .9s var(--ease-arrive) .15s both; }
@keyframes cardin { from { opacity: 0; transform: translateY(calc(-50% + 12px)) } }
.si-card .h { font-size: 56px; line-height: 60px; font-weight: 500; letter-spacing: -.034em; }
.si-card .h .acc { color: var(--blue-light); }
.si-card .sub { margin: 16px 0 40px; font-size: 16px; line-height: 24px; color: rgba(255,255,255,.72); }
.si-card label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.72); }
.si-card input { width: 100%; height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: #fff; font-size: 16px; outline: none; transition: border-color .15s, box-shadow .15s; }
.si-card input::placeholder { color: rgba(255,255,255,.45); }
.si-card input:focus { border-color: var(--blue-light); box-shadow: 0 0 0 4px rgba(127,163,214,.22); }
.si-card .btn.primary { margin-top: 12px; height: 52px; }
.si-card .btn.primary .disc { top: 8px; right: 8px; width: 36px; height: 36px; }
.or { display: flex; align-items: center; gap: 16px; margin: 24px 0; font-size: 13px; color: rgba(255,255,255,.5); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.14); }
.prov { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.prov button { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); cursor: pointer; color: #fff; font-size: 14px; font-weight: 500; transition: background .15s; }
.prov button:hover { background: rgba(255,255,255,.14); }
.prov svg { flex: none; }
.si-card .new { margin-top: 24px; font-size: 14px; color: rgba(255,255,255,.72); }
.si-card .new a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px; }
.signin footer { position: absolute; left: 96px; right: 96px; bottom: 32px; display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .02em; color: rgba(255,255,255,.72); }
.signin footer nav { display: flex; gap: 16px; }
.signin footer a { color: inherit; text-decoration: none; }
.signin footer a:hover { color: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .frame { grid-template-columns: 232px minmax(0, 1fr); }
  .wells { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  main { padding: 32px 28px 48px; }
}
@media (max-width: 980px) {
  .thero-icon, .thero-glow { display: none; }
  .gcard.tg { width: auto; right: 20px; }
  .thero { height: 300px; }
  .rgrid { grid-template-columns: minmax(0, 1fr); }
  .addtop { grid-column: 1 / 13; }
  .areas { grid-template-columns: minmax(0, 1fr); }
  .dirhead { flex-direction: column; align-items: stretch; }
  .dirhead .field.search { max-width: none; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > div:nth-child(3) { box-shadow: inset 0 1px 0 var(--line); }
  .stats > div:nth-child(4) { box-shadow: inset 1px 0 0 var(--line), inset 0 1px 0 var(--line); }
  .panes, .rows.two, .steps { grid-template-columns: minmax(0, 1fr); }
  .rows.two > .row:nth-child(2) { border-top: 1px solid var(--line); }
  .today .c8, .today .c4 { grid-column: 1 / 13; }
  .sh-body { align-content: start; }
  .hero { height: auto; min-height: 560px; display: flex; flex-direction: column; justify-content: flex-end; }
  .slides img { object-position: 72% 50%; }
  .gcard { position: relative; left: auto; top: auto; bottom: auto; width: auto; min-width: 0; margin: 12px; }
  .bars { margin-bottom: 18px; }
  main.fit { height: auto; }
  .today { grid-template-rows: none; min-height: 0; }
  .today .blk > .rows { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .main, .aside, .full, .navl, .wide { grid-column: 1 / 13; }
  .sh-head .ttl, .sh-head .act { grid-column: 1 / 13; justify-self: start; }
  .sh-head .act { margin-top: 16px; }
  .dir { grid-template-columns: minmax(0, 1fr); }
  .side { flex-direction: row; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  .side button, .side a { flex: none; gap: 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
}
@media (max-width: 760px) {
  .cflow { padding: 0; place-items: end stretch; }
  .cf-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: 150px minmax(0, 1fr); height: min(720px, 94vh); border-radius: 24px 24px 0 0; }
  .cf-prev { display: none; }
  .cf-head h2 { font-size: 26px; line-height: 30px; }
  .cf-card { padding: 18px 18px 16px; }
  .mgrid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .mprev { height: 200px; }
  .two-col { grid-template-columns: minmax(0, 1fr); }
  .covers { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .scrim { align-items: end; padding: 0; }
  .modal.wide, .modal.sheet { border-radius: 24px 24px 0 0; max-height: 92vh; overflow: auto; }
  .frame { grid-template-columns: minmax(0, 1fr); padding: 0; gap: 0; }
  .rail { display: none; }
  .stage { border-radius: 0; box-shadow: none; }
  .bar { padding: 0 8px 0 16px; padding-top: env(safe-area-inset-top); height: calc(56px + env(safe-area-inset-top)); }
  .crumb { display: none; }
  .mbrand { display: flex; align-items: center; }
  .mbrand img { height: 22px; }
  :root:not([data-theme="light"]) .mbrand img { filter: invert(1) brightness(2); }
  .bar .status { display: none; }
  .bar .mob { display: grid; }
  main { padding: 24px 16px 112px; }
  .h1 { font-size: 32px; line-height: 36px; }
  .blk, .full, .wide { padding: 16px 16px 4px; border-radius: 16px; }
  .wells { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .row { flex-wrap: wrap; }
  .row .grow { min-width: 55%; }
  .row.inbox .cta { width: 100%; padding-left: 46px; justify-content: flex-end; }
  .row.log { flex-wrap: nowrap; }
  .row.log .grow { min-width: 0; }
  .row.log .state { display: none; }
  .row .r[style] { display: none; }
  .time { width: 48px; }
  .sect > .fine { display: none; }
  .fact { flex-wrap: wrap; gap: 4px 16px; }
  .fact .grow { flex-basis: 100%; }
  .fact .cta { margin-left: -8px; }
  .sh-foot { flex-direction: column; align-items: flex-start; }
  .bottom-tabs { display: grid; grid-template-columns: repeat(6, 1fr); position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 20; height: 64px; padding: 6px; border-radius: 22px; background: var(--rail); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); box-shadow: var(--rim), var(--lift); }
  .bottom-tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 16px; font-size: 10px; font-weight: 500; color: var(--faint); text-decoration: none; }
  .bottom-tabs a[aria-current="page"] { color: var(--ink); background: var(--active); }
  .bottom-tabs a[aria-current="page"] svg { color: var(--acc); }
  .signin .top { left: 15px; top: 44px; height: 26px; }
  .signin > img.bg { object-position: 62% 50%; }
  .si-card { left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; transform: none; padding: 28px 20px 24px; border-radius: 28px; animation-name: sheetin; }
  .si-card .h { font-size: 40px; line-height: 44px; }
  .si-card .sub { margin: 8px 0 24px; font-size: 15px; line-height: 22px; }
  .prov button { font-size: 13px; gap: 6px; }
  .or { margin: 20px 0; }
  .si-card .new { margin-top: 20px; }
  .signin footer { display: none; }
}
@keyframes sheetin { from { opacity: 0; transform: translateY(16px) } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Export read cards (Memory, Insights) ---------- */

.ixv .grow { flex: 1; min-width: 0; }
.ix-orb { flex: none; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #cfe0f7, #7fa3d6 38%, #3d5f92 72%, #1e3150); box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 6px 18px -6px rgba(74,111,165,.8); animation: orb 6s ease-in-out infinite; }
@keyframes orb { 50% { box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 6px 26px -2px rgba(127,163,214,.9); } }

/* a read in progress */

.ix-prog { height: 2px; margin: 14px 0 12px; border-radius: 2px; background: var(--c-fill2); overflow: hidden; }
.ix-prog i { display: block; width: 0; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--blue), var(--blue-light)); transition: width .6s var(--ease-arrive); }
.ix-an .ix-prog i { transition: none; }

/* the reads: hairlines, not boxes; big quiet numbers; one chart per side */
.ix-an { padding: 22px 24px 24px; border-radius: 20px; background: var(--c-fill); box-shadow: inset 0 0 0 1px var(--c-line); }
.ix-an-h { display: flex; align-items: center; gap: 12px; }
.ix-an-h b { display: block; font-size: 15px; font-weight: 500; }
.ix-an-h small { display: block; margin-top: 1px; font-size: 12px; color: var(--c-faint); }
.ix-src2 { flex: none; display: flex; align-items: center; justify-content: center; gap: 3px; min-width: 36px; height: 36px; padding: 0 8px; border-radius: 11px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 2px 6px -2px rgba(0,0,0,.25); }
.ix-an-pct { font-size: 12px; color: var(--c-faint); font-variant-numeric: tabular-nums; }
.ix-an.done .ix-an-pct { color: var(--acc); }
.ix-an-n { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 4px 0 0; }
.ix-an-n div { padding: 6px 0 6px 16px; border-left: 1px solid var(--c-line); }
.ix-an-n div:first-child { padding-left: 0; border-left: 0; }
.ix-an-n b { display: block; font-size: 28px; line-height: 34px; font-weight: 400; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ix-an-n small { display: block; font-size: 12px; color: var(--c-faint); }
.ix-an-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--c-line); }
.ix-an-g > section { display: flex; flex-direction: column; min-width: 0; }
.ix-an-g > section + section { padding-left: 22px; margin-left: 22px; border-left: 1px solid var(--c-line); }
.ix-an-g h4 { margin: 0 0 12px; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--c-faint); }
.ix-an-g h4.mt { margin-top: 18px; }
.ix-rows { display: grid; gap: 10px; }
.ix-pb { display: grid; grid-template-columns: 24px 88px 1fr 28px; align-items: center; gap: 10px; font-size: 13px; opacity: .25; transition: opacity .5s var(--ease-arrive); }
.ix-pb.on { opacity: 1; }
.ix-pb img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.ix-pb i { height: 4px; border-radius: 4px; background: var(--c-fill2); overflow: hidden; }
.ix-pb i b { display: block; width: 0; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--blue), var(--blue-light)); transition: width 1s var(--ease-arrive); }
.ix-pb.on i b { width: var(--p); }
.ix-pb em { font-style: normal; text-align: right; color: var(--c-faint); font-variant-numeric: tabular-nums; }
.ix-day { height: 64px; clip-path: inset(0 100% 0 0); transition: clip-path 1.6s var(--ease-arrive); }
.ix-day.on { clip-path: inset(0 0 0 0); }
.ix-curve { display: block; width: 100%; height: 100%; overflow: visible; }
.ix-hl { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--c-faint); }
.ix-cloud { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.ix-cloud span { font-size: calc(12px + var(--w) * 8px); line-height: 1.35; font-weight: 500; letter-spacing: -.01em; color: var(--c-fg); opacity: 0; transform: translateY(4px); transition: opacity .7s var(--ease-arrive), transform .7s var(--ease-arrive); }
.ix-cloud span.on { opacity: calc(.4 + var(--w) * .6); transform: none; }
.ix-pal { display: flex; }
.ix-pal i { width: 30px; height: 30px; margin-right: -6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--pal-ring, #17181c); opacity: 0; transform: scale(.6); transition: opacity .5s var(--ease-arrive), transform .5s var(--ease-arrive); }
.ix-pal i.on { opacity: 1; transform: none; }
:root[data-theme="light"] .ix-pal i { --pal-ring: #fbfbfd; }

/* Insights in Memory: the finished reads, in the page's own theme, one card that fills the panel */
.ixv { --c-fg: var(--ink); --c-mut: var(--body); --c-faint: var(--faint); --c-line: var(--line); --c-fill: var(--field); --c-fill2: var(--line-2); --c-edge: var(--line-2); color: var(--ink); display: flex; flex-direction: column; min-height: 0; }
.ixv .ix-an { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0; background: none; box-shadow: none; animation: rise .4s var(--ease-arrive) both; }
.ixv .ix-an-h b { font-size: 17px; }
.ixv .ix-an-n { margin-top: 10px; }
.ixv .ix-an-n b { font-size: 40px; line-height: 46px; letter-spacing: -.035em; }
.ixv .ix-an-n small { font-size: 13px; }
.ixv .ix-an-g { flex: 1; min-height: 0; margin-top: 24px; padding-top: 22px; }
.ixv .ix-an-g > section + section { padding-left: 28px; margin-left: 28px; }
.ixv .ix-rows { flex: 1; align-content: space-evenly; }
.ixv .ix-pb { grid-template-columns: 32px 110px 1fr 32px; font-size: 14px; }
.ixv .ix-pb img { width: 32px; height: 32px; }
.ixv .ix-pb i { height: 6px; }
.ixv .ix-day { flex: 1; height: auto; min-height: 80px; max-height: 150px; }
.ixv .ix-cloud { flex: 1; align-content: center; gap: 6px 18px; }
.ixv .ix-cloud span { font-size: calc(15px + var(--w) * 17px); }
.ixv .ix-pal i { width: 44px; height: 44px; margin-right: -8px; }
:root[data-theme="dark"] .ixv .ix-pal i { --pal-ring: #1b1c20; }
:root[data-theme="light"] .ixv .ix-pal i { --pal-ring: #fff; }

/* the Memory side list: insights first, then facts */
.mside { gap: 1px; }
.side-h { margin: 0; padding: 0 12px 8px; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.side-h ~ .side-h { margin-top: 18px; }
.mside button { height: 34px; font-size: 14px; }
.mside button.ins { display: grid; grid-template-columns: 8px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; justify-content: stretch; height: auto; padding: 9px 12px; }
.mside .ins b { font-weight: 500; color: var(--ink); font-size: 14px; }
.mside .ins small { grid-column: 2; font-size: 12px; color: var(--faint); margin-top: 1px; }
.ins-dot { grid-row: 1 / 3; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.ins-dot.on { background: var(--blue-light); box-shadow: 0 0 0 3px var(--tint); }
.mside .ins:not([aria-pressed]) b { color: var(--muted); font-weight: 400; }

@media (max-width: 860px) {
  .ix-an-n { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; }
  .ix-an-g { grid-template-columns: 1fr; }
  .ix-an-g > section + section { padding: 18px 0 0; margin: 18px 0 0; border-left: 0; border-top: 1px solid var(--c-line); }
}
@media (prefers-reduced-motion: reduce) {
  .ix-orb { animation: none; }
  .ix-day { transition: none; }
}

/* the read card on glass */

.ix-an { background: var(--g-bg); -webkit-backdrop-filter: var(--g-fx); backdrop-filter: var(--g-fx); box-shadow: var(--g-sh); }
.ix-an-n div, .ix-an-g > section + section { border-left-color: var(--c-line); }
.ix-an-g .ix-sum { margin: auto 0 0; padding-top: 14px; font-size: 12px; line-height: 17px; color: var(--c-faint); }
.ixv .ix-an { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* dropping an export in Memory, Insights */

.ix-drop { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; cursor: pointer; transition: background .2s; }
.ix-drop::after { content: ""; position: absolute; inset: 0; border-radius: 16px; border: 1.5px dashed var(--c-edge); pointer-events: none; transition: border-color .2s; }
.ix-drop:hover { background: var(--c-fill); }
.ix-drop:hover::after { border-color: var(--blue-light); }
.ix-drop.big { padding: 22px 18px; }
.ix-drop b { display: block; font-size: 14px; font-weight: 500; }
.ix-drop small { display: block; margin-top: 2px; font-size: 12px; line-height: 17px; color: var(--c-faint); }
.ix-drop u { color: var(--acc); text-decoration-color: var(--tint-line); text-underline-offset: 3px; }
.ix-dic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--acc); background: var(--tint); box-shadow: inset 0 0 0 1px var(--tint-line); }

/* read card blocks */
.ix-blk + .ix-blk { margin-top: 18px; }
.ix-mono { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; color: #fff; background: hsl(var(--h) 38% 42%); }
.ix-tl { position: relative; display: grid; gap: 14px; }
.ix-tl::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px; background: var(--c-line); }
.ix-tr { position: relative; display: grid; grid-template-columns: 9px 1fr; gap: 14px; opacity: 0; transform: translateY(4px); transition: opacity .5s var(--ease-arrive), transform .5s var(--ease-arrive); }
.ix-tr.on { opacity: 1; transform: none; }
.ix-tr > i { width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--blue-light); box-shadow: 0 0 0 3px var(--tint); }
.ix-tr b { display: block; font-size: 14px; font-weight: 500; }
.ix-tr small { display: block; margin-top: 1px; font-size: 12px; color: var(--c-faint); }
.ix-chipset { display: flex; flex-wrap: wrap; gap: 6px; }
.ix-chipset span { padding: 4px 10px; border-radius: 999px; font-size: 12px; color: var(--c-mut); background: var(--c-fill2); opacity: 0; transition: opacity .5s; }
.ix-chipset span.on { opacity: 1; }
.ix-sk { display: inline-block; height: 14px; width: 96px; margin: 6px 10px 0 0; border-radius: 7px; background: linear-gradient(90deg, var(--c-fill), var(--c-fill2), var(--c-fill)); background-size: 200% 100%; animation: sk 1.2s linear infinite; }
.ix-sk.s { width: 58px; }
@keyframes sk { to { background-position: -200% 0; } }
.ix-prog i.run { width: 40%; animation: run 1.1s ease-in-out infinite alternate; }
@keyframes run { from { transform: translateX(-20%); } to { transform: translateX(170%); } }
.ixv .ix-blk { display: flex; flex-direction: column; }
.ixv .ix-an-g section { gap: 0; }
.ixv .ix-tl { gap: 20px; }
.ixv .ix-mono { width: 32px; height: 32px; font-size: 13px; }
.ix-blk .ix-pb { grid-template-columns: 24px minmax(0, 1.25fr) minmax(36px, 1fr) auto; }
.ixv .ix-blk .ix-pb { grid-template-columns: 32px minmax(0, 1.25fr) minmax(60px, 1fr) auto; }

/* a soft light on a read card under the pointer */

.ix-an { position: relative; }
.ix-an::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.09), transparent 60%); }
:root[data-theme="light"] .ix-an::before { background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.85), transparent 60%); mix-blend-mode: soft-light; }
.ix-an:hover::before { opacity: 1; }

/* Insights: one tab, a switcher across the sources, the card or the add-it-here panel below */
.insv { gap: 0; }
.insw { flex: none; display: flex; gap: 4px; padding: 4px; margin-bottom: 18px; border-radius: 14px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); overflow-x: auto; scrollbar-width: none; }
.insw-t { flex: 1 1 0; min-width: max-content; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 14px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.insw-t:hover { color: var(--ink); }
.insw-t[aria-selected="true"] { color: var(--ink); background: var(--panel-hover, rgba(255,255,255,.08)); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.2); }
:root[data-theme="light"] .insw-t[aria-selected="true"] { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.04); }
.insw-i { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.insw-t:not(.read) .insw-i { filter: grayscale(1); opacity: .6; }
.insw-t em { font-style: normal; font-size: 11px; color: var(--acc); padding: 1px 7px; border-radius: 999px; background: var(--tint); }
.insb { flex: 1; min-height: 0; display: flex; flex-direction: column; animation: rise .35s var(--ease-arrive) both; }
.ins-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; max-width: 520px; margin: 0 auto; text-align: center; }
.ins-empty > b { margin-top: 10px; font-size: 20px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.ins-empty > small { font-size: 14px; line-height: 20px; color: var(--faint); }
.ix-src2.big { min-width: 56px; height: 56px; border-radius: 16px; gap: 4px; }
.ins-steps { width: 100%; margin: 14px 0 6px; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 10px; text-align: left; }
.ins-steps li { counter-increment: s; display: grid; grid-template-columns: 24px 1fr; gap: 12px; font-size: 14px; line-height: 20px; color: var(--body); }
.ins-steps li::before { content: counter(s); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 500; color: var(--ink); background: var(--field); box-shadow: inset 0 0 0 1px var(--line); }
.ins-drop { width: 100%; text-align: left; --c-edge: var(--line-2); --c-fill: var(--field); --c-faint: var(--faint); }
.ins-acts { display: flex; gap: 10px; margin-top: 10px; }
.ins-empty .ix-prog { width: 220px; }
.ins-pend { flex: none; display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 14px 12px 18px; border-radius: 14px; background: var(--tint); box-shadow: inset 0 0 0 1px var(--tint-line); font-size: 14px; color: var(--body); }
.ins-pend > span { flex: 1; } .ins-pend b { font-weight: 500; color: var(--ink); }
.ins-rev { display: grid; gap: 4px; margin: 12px 0 4px; max-height: 340px; overflow: auto; }
.ins-ri { display: flex; gap: 12px; align-items: flex-start; padding: 10px 6px; border-top: 1px solid var(--line); font-size: 14px; line-height: 20px; cursor: pointer; }
.ins-ri:first-child { border-top: 0; }
.ins-ri input { margin-top: 3px; accent-color: var(--blue); }
.ins-ri small { display: block; font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.insv .ix-an { min-height: 0; }
.insw-t { flex: 1 1 0; min-width: 0; }
.insw-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insw-ok { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-light); box-shadow: 0 0 0 3px var(--tint); }
.insb .ix-an { flex: 1 1 auto; overflow: hidden; }
.insb { overflow: hidden; }
/* the switcher: five equal slots and one pill that slides between them */
.insw { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 4px; overflow: hidden; }
.insw-pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 5); border-radius: 10px; transform: translateX(calc(var(--i) * 100%)); transition: transform .38s var(--ease-arrive);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.06), 0 2px 8px -2px rgba(0,0,0,.35); }
:root[data-theme="light"] .insw-pill { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.04); }
.insw-t { position: relative; z-index: 1; width: 100%; min-width: 0; padding: 0 10px; gap: 8px; }
.insw-t[aria-selected="true"], :root[data-theme="light"] .insw-t[aria-selected="true"] { background: none; box-shadow: none; color: var(--ink); }
.insw-ok { opacity: 0; transform: scale(.4); transition: opacity .3s, transform .3s var(--ease-arrive); }
.insw-t.read .insw-ok { opacity: 1; transform: none; }
.insw-i { flex: none; }
@media (prefers-reduced-motion: reduce) { .insw-pill { transition: none; } }
/* Memory: the way to teach it sits at the foot of the facts panel, not floating under it */
.wide:has(> .facts) { display: flex; flex-direction: column; }
.wide > .facts { flex: 1; min-height: 0; overflow-y: auto; }
.mem-foot { flex: none; display: flex; align-items: center; gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.mem-foot p { flex: 1; margin: 0; font-size: 13px; line-height: 18px; color: var(--faint); }
.mem-foot .num { color: var(--body); font-variant-numeric: tabular-nums; }
main.fit > .sheet { min-height: 0; }
main.fit .sh-body { flex: 1; min-height: 0; }
main.fit .sh-body > .wide { min-height: 0; overflow: hidden; }
/* a file shared with a circle: the circle's faces and its name, quiet, the way the sidebar shows circles */
.fcirc { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 50%; height: 28px; padding: 0 10px 0 4px; border-radius: 999px; text-decoration: none; font-size: 12px; font-weight: 500; color: var(--muted); transition: background .2s, color .2s; }
.fcirc:hover { background: var(--field); color: var(--ink); }
.faces.sm { display: inline-flex; flex: none; }
.faces.sm img { width: 20px; height: 20px; margin-left: -6px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--panel-solid, #1b1c20); }
.faces.sm img:first-child { margin-left: 0; }
:root[data-theme="light"] .faces.sm img { box-shadow: 0 0 0 2px #fff; }

/* Tools directory: a search, a shelf of the most used, quiet tabs and rows; the rest on request */
.dirv .dirp { padding: 22px 24px; }
.dsearch { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; border-radius: 14px; color: var(--faint); background: var(--field); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s; }
.dsearch:focus-within { box-shadow: inset 0 0 0 1px var(--blue-light), 0 0 0 4px rgba(127,163,214,.16); }
.dsearch input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font: inherit; font-size: 15px; color: var(--ink); }
.dsearch input::placeholder { color: var(--faint); }
.dmost { margin-top: 22px; }
.dmost h3, .dtabs { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.dmost h3 { margin: 0 0 12px; }
.dshelf { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.dtile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px; border: 0; border-radius: 16px; background: none; color: var(--body); font: inherit; font-size: 12px; cursor: pointer; transition: background .2s, transform .2s var(--ease-arrive); }
.dtile:hover { background: var(--field); transform: translateY(-2px); }
.dtile:disabled { cursor: default; transform: none; background: none; }
.dtile b { font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dti { position: relative; }
.dti .logo, .dti .mono { width: 48px; height: 48px; border-radius: 13px; box-shadow: 0 0 0 1px var(--line), 0 6px 14px -8px rgba(0,0,0,.4); }
.dti i { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--blue); box-shadow: 0 0 0 2px var(--panel-solid, #1b1c20); }
:root[data-theme="light"] .dti i { box-shadow: 0 0 0 2px #fff; }
.dtabs { display: flex; gap: 22px; margin-top: 22px; border-bottom: 1px solid var(--line); text-transform: none; letter-spacing: 0; }
.dtabs button { position: relative; display: inline-flex; gap: 6px; padding: 0 0 12px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 500; color: var(--faint); cursor: pointer; transition: color .2s; }
.dtabs button span { font-weight: 400; font-size: 12px; color: var(--faint); opacity: .7; }
.dtabs button:hover { color: var(--ink); }
.dtabs button[aria-selected="true"] { color: var(--ink); }
.dtabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--blue-light); }
.dlist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; margin-top: 6px; }
.drow { display: flex; align-items: center; gap: 12px; min-width: 0; height: 60px; border-bottom: 1px solid var(--line); }
.drow .logo, .drow .mono { width: 32px; height: 32px; border-radius: 9px; flex: none; }
.drow .grow { flex: 1; min-width: 0; }
.drow b { display: block; font-size: 14px; font-weight: 500; }
.drow small { display: block; font-size: 12px; color: var(--faint); }
.dr-add { flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; display: grid; place-items: center; font-size: 17px; line-height: 1; color: var(--muted); background: var(--field); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; opacity: .7; transition: opacity .2s, background .2s, color .2s; }
.drow:hover .dr-add { opacity: 1; }
.dr-add:hover { color: #fff; background: var(--blue); box-shadow: none; }
.dr-ok { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--acc); background: var(--tint); }
.dfoot { display: flex; gap: 8px; align-items: center; margin-top: 18px; font-size: 13px; color: var(--faint); }
.dmsg { padding: 24px 0; }
@media (max-width: 1100px) { .dshelf { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the brain card under the account: the same quiet glass as the rest of the rail */
.bbtn { color: var(--ink); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.07), 0 8px 18px -12px rgba(0,0,0,.5); }
:root[data-theme="light"] .bbtn { background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.6)); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(0,0,0,.05), 0 8px 18px -12px rgba(30,40,60,.25); }
.bbtn:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.1), 0 12px 22px -12px rgba(0,0,0,.55); }
:root[data-theme="light"] .bbtn:hover { box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(0,0,0,.07), 0 12px 22px -12px rgba(30,40,60,.3); }
.bbtn small { color: var(--faint); }
.bb-qr { color: var(--ink); background: var(--field); box-shadow: inset 0 0 0 1px var(--line); }

/* Tools: one page that fits the screen; only the lists inside the cards scroll */
.segn { margin-left: 4px; font-weight: 400; color: var(--faint); }
.tview { flex: 1; min-height: 0; align-items: stretch; }
.tview .main, .tview .aside { min-height: 0; }
.tpanel { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-bottom: 16px; }
.tscroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; margin: 0 -8px; padding: 0 8px; }
.thead, .trow { display: grid; grid-template-columns: 36px minmax(0, 1.6fr) 54px 54px minmax(0, 1.4fr) 104px 14px; align-items: center; column-gap: 14px; }
.thead { height: 34px; margin-top: 8px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.trow { height: 68px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; border-radius: 0; transition: background .2s; }
.trow:hover { background: linear-gradient(90deg, transparent, var(--field) 8%, var(--field) 92%, transparent); }
.trow .logo, .trow .mono { width: 36px; height: 36px; border-radius: 10px; }
.tr-n b { display: block; font-size: 15px; font-weight: 500; }
.tr-n small { display: block; font-size: 12px; color: var(--faint); }
.tr-c b { display: block; font-size: 17px; font-weight: 500; line-height: 20px; }
.tr-c small { font-size: 11px; color: var(--faint); }
.tr-g { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.tr-s { justify-self: end; font-size: 12px; font-weight: 500; color: var(--faint); display: inline-flex; align-items: center; gap: 6px; }
.tr-s::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #5bb98c; }
.tr-s.warn { color: var(--warn, #d9a441); } .tr-s.warn::before { background: var(--warn, #d9a441); }
.trow .chev { color: var(--faint); }
.tadd { flex: none; display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin-top: 14px; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 500; color: var(--acc); cursor: pointer; }
.tadd .plus { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); box-shadow: inset 0 0 0 1px var(--tint-line); font-size: 16px; }
.frow { display: flex; align-items: center; gap: 12px; height: 64px; border-bottom: 1px solid var(--line); }
.frow .logo, .frow .mono { width: 32px; height: 32px; border-radius: 9px; flex: none; }
.frow b { display: block; font-size: 14px; font-weight: 500; }
.frow small { display: block; font-size: 12px; color: var(--faint); }
.tempty { padding: 16px 0; }
.tgates { flex: none; padding-bottom: 16px; }
.tgl { display: grid; grid-template-columns: 128px 1fr; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.tgl:last-of-type { border-bottom: 0; }
.tgl small { font-size: 12px; line-height: 16px; color: var(--faint); }
.tgl .gate { justify-self: start; }
.tgf { margin: 8px 0 0; }
/* Add: search, shelf and tabs stay put; the list scrolls inside the card */
main.fit .dirv { flex: 1; min-height: 0; }
main.fit .dirv .dirp { min-height: 0; display: flex; flex-direction: column; padding-bottom: 14px; }
.dirp > .dsearch, .dirp > .dmost, .dirp > .dtabs { flex: none; }
.dscroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; margin: 0 -8px; padding: 0 8px; }
.dscroll .addtop { margin-top: 18px; padding: 18px 0 0; background: none; box-shadow: none; border-top: 1px solid var(--line); border-radius: 0; }
.tpanel > .tadd, .tpanel > .tscroll + * { flex: none; }
.tpanel > .tscroll { flex: 1 1 0; }
.thead, .trow { grid-template-columns: 36px minmax(0, 1.5fr) 50px 50px minmax(0, 1.7fr) 96px 14px; }
.tr-g { flex-wrap: nowrap; overflow: hidden; }
.tr-g .gate { flex: none; }
.thead span:nth-child(2) { grid-column: 1 / 3; }
.thead span:first-child { display: none; }
.tr-more { font-size: 12px; color: var(--faint); align-self: center; }

/* Tools, connected: tiles that say what each tool may do */
.tgrid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 6px 0 4px; }
.ttile { position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 172px; padding: 18px 18px 16px; border: 0; border-radius: 18px; text-align: left; text-decoration: none; color: inherit; font: inherit; cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px var(--line); transition: transform .25s var(--ease-arrive), box-shadow .25s; }
:root[data-theme="light"] .ttile { background: linear-gradient(180deg, #fff, rgba(255,255,255,.7)); box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 10px 24px -18px rgba(30,40,60,.35); }
.ttile:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px var(--line-2), 0 16px 30px -20px rgba(0,0,0,.6); }
.tt-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
.ttile .logo.lg, .ttile .mono.lg { width: 44px; height: 44px; border-radius: 12px; }
.ttile > b { font-size: 16px; font-weight: 500; }
.ttile > small { font-size: 13px; color: var(--faint); }
.tt-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--faint); }
.tt-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #5bb98c; box-shadow: 0 0 0 3px rgba(91,185,140,.15); }
.tt-st.warn { color: #d9a441; } .tt-st.warn::before { background: #d9a441; box-shadow: 0 0 0 3px rgba(217,164,65,.15); }
.tt-bar { display: flex; gap: 3px; height: 5px; margin-top: auto; padding-top: 14px; box-sizing: content-box; }
.tt-bar i { height: 5px; border-radius: 3px; background: var(--blue-light); }
.tt-bar i.ask { background: var(--line-2); }
.tt-leg { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 12px; color: var(--faint); }
.tt-leg span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-leg i { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--blue-light); }
.tt-leg i.ask { background: var(--line-2); box-shadow: inset 0 0 0 1px var(--faint); }
.tt-add { align-items: center; justify-content: center; text-align: center; background: none; box-shadow: inset 0 0 0 1.5px var(--line); border: 0; }
:root[data-theme="light"] .tt-add { background: none; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.tt-add .plus { width: 40px; height: 40px; margin-bottom: 10px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; color: var(--acc); background: var(--tint); box-shadow: inset 0 0 0 1px var(--tint-line); }
.tt-add small { font-size: 12px; color: var(--faint); }
.thow { flex: none; padding-bottom: 14px; }
.th-i { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.th-i:first-of-type { border-top: 0; padding-top: 6px; }
.th-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: #fff; background: var(--blue); }
.th-n.ask { color: var(--ink); background: var(--field); box-shadow: inset 0 0 0 1px var(--line-2); }
.th-i b { display: block; font-size: 14px; font-weight: 500; }
.th-i small { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--faint); }
.tview .aside { gap: 20px; }
.tview .aside > .thow { flex: none; }
.tfin { flex: 1 1 0; }
/* Tools, add: the directory on the left, custom explained on the right */
.dirv .main.dirp { padding: 20px 22px 14px; }
.dirv .aside { min-height: 0; gap: 20px; }
.dirv .aside > section { flex: none; }
.dirv .aside > .downs { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.dirv .dshelf { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.dirv .dlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dexp { margin: 2px 0 14px; font-size: 13px; line-height: 19px; color: var(--body); }
.dexp code { padding: 1px 5px; border-radius: 5px; font-size: 12px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); }
.downs .ownrow { display: flex; gap: 8px; }
.downs .ownrow .field { flex: 1; min-width: 0; }
.dkey { margin-top: 10px; }
.dkey summary { cursor: pointer; font-size: 13px; color: var(--muted); list-style: none; }
.dkey summary::before { content: "+ "; color: var(--faint); }
.dkey[open] summary::before { content: "− "; }
.dkey .field { margin-top: 8px; width: 100%; -webkit-text-security: disc; }
.dkey small { display: block; margin-top: 6px; font-size: 12px; color: var(--faint); }
.dtry { margin: 12px 0 0; }
@media (max-width: 1100px) { .tgrid2 { grid-template-columns: 1fr; } .dirv .dshelf { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
html.cx-loading #app { visibility: hidden; }

/* ---------- Arrival and leaving (2026-10-22) ----------
   The veil holds the onboarding's last frame (photo, glass, "Opening your brain.") until the account is read, then
   dissolves while the portal rises in behind it. A return visit in the same tab skips it: theme.js marks cx-warm. */
.veil { position: fixed; inset: 0; z-index: 60; background: var(--ambient-veil), var(--bg); transition: opacity .3s ease, visibility 0s linear .3s; }
html.cx-ready .veil { opacity: 0; visibility: hidden; pointer-events: none; }
html.cx-warm .veil { display: none; }
/* A plain load just appears: no flourish (Fabian, 24 Oct). */
.boot .rail, .boot .stage { animation: none; }

/* Right after a sign-in (F): one blue hairline draws across the top while the account loads, then the page dissolves
   in and settles. */
.veil-line { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: #4a6fa5; transform-origin: 0 50%; }
html.cx-intro-line .veil-line { display: block; animation: vline .5s cubic-bezier(.2,.7,.2,1) both; }
html.cx-intro-line .veil { transition-duration: .45s; transition-delay: .2s; }
html.cx-intro-line .boot .rail { animation: bootin .55s cubic-bezier(.2,.7,.2,1) .25s both; }
html.cx-intro-line .boot .stage { animation: bootin .55s cubic-bezier(.2,.7,.2,1) .32s both; }
@keyframes vline { from { transform: scaleX(0); } to { transform: none; } }
@keyframes bootin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* After Open the portal (A): the first frame is the onboarding's last one, the dark ground with the lockup in the
   middle (apps/onboarding app.css .intro, the same numbers). Once the account is read the lockup glides into the
   top-left logo (app.js land) while the ground dissolves and the page settles around it. */
.intro-lock { display: none; position: fixed; z-index: 61; left: 50%; top: 50%; width: clamp(220px, 25vw, 320px); transform: translate(-50%, -50%); pointer-events: none; }
.intro-lock img { display: block; width: 100%; height: auto; }
html.cx-intro-lockup .intro-lock { display: block; }
html.cx-intro-lockup .veil { background: radial-gradient(75% 65% at 100% 0%, rgba(49,71,105,.48), transparent 72%), radial-gradient(65% 60% at 0% 100%, rgba(52,46,42,.48), transparent 72%), linear-gradient(160deg, #131821 0%, #0f1216 55%, #111111 100%);
  transition: opacity 1s cubic-bezier(.33,0,.2,1) .25s, visibility 0s linear 1.25s; }
html.cx-intro-lockup:not(.cx-landed) .brand img, html.cx-intro-lockup:not(.cx-landed) .mbrand img { opacity: 0; }
html.cx-landed .brand img, html.cx-landed .mbrand img { transition: opacity .25s ease; }
/* the rail only fades (it must not move under the landing logo); the stage settles with a little lift */
html.cx-intro-lockup .boot .rail { animation: bootfade 1s cubic-bezier(.33,0,.2,1) .25s both; }
html.cx-intro-lockup .boot .stage { animation: bootin 1s cubic-bezier(.22,.61,.36,1) .4s both; }
@keyframes bootfade { from { opacity: 0; } to { opacity: 1; } }

/* Sign out: the portal settles away before WorkOS ends the login. */
html.cx-leaving .frame { transition: opacity .4s ease, transform .4s cubic-bezier(.2,.7,.2,1), filter .4s ease; opacity: 0; transform: scale(.985); filter: blur(8px); }

/* Same-origin page changes (onboarding to portal, portal to the start page) cross-fade instead of cutting. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtout .35s cubic-bezier(.2,.7,.2,1) both; }
::view-transition-new(root) { animation: vtin .55s cubic-bezier(.2,.7,.2,1) both; }
@keyframes vtout { to { opacity: 0; } }
@keyframes vtin { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .veil, .veil-line, .boot .rail, .boot .stage { animation: none !important; transition: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* Preview (2026-10-23): parts that ship later show sample data, and say so, quietly. */
.pv-tag { margin-left: auto; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 500; letter-spacing: .02em; color: var(--faint); box-shadow: inset 0 0 0 1px var(--line); }
.sect h2 .pv-tag { margin-left: 10px; vertical-align: 2px; }
.rlabel .rl { display: inline-flex; align-items: center; gap: 8px; }
.rlabel .rl .pv-tag { margin-left: 0; }
.pv-note { margin-left: 14px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--muted); background: var(--field); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }

/* Devices and apps: one mark in front of each row, like the iPhone app's list. */
.row.dev { gap: 14px; }
.dev-mark { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--muted); font-size: 14px; font-weight: 600; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); }
.row.dev .logo.sm { width: 32px; height: 32px; border-radius: 9px; }
.row.dev .this { color: var(--faint); font-weight: 400; }

/* Light (2026-10-23, agreed with Fabian): the iPhone app's ground, not a photo. Clean Apple white with a quiet cool fall
   to the bottom, one soft blue bloom in the top corner and a warm one low on the other side, the same values as
   GroundBackground in the app. Dark keeps its city at night. */
:root[data-theme="light"] .ambient {
  background:
    radial-gradient(60vmax 60vmax at 95% -2%, rgba(127,163,214,.16), transparent 70%),
    radial-gradient(50vmax 50vmax at 0% 85%, rgba(242,201,168,.10), transparent 70%),
    linear-gradient(180deg, #ffffff, #f3f5f9 50%, #eceff5);
}
:root[data-theme="light"] .ambient::after { background: none; }

/* A tool's page (2026-10-23): one calm card in the page's own surface, like every other block and the iPhone app.
   Replaces the dark hero with the tilted logo, which stayed dark in light mode. */
.tool-head { gap: 0; padding: 24px 24px 20px; }
.tool-head .th-top { display: flex; align-items: center; gap: 16px; }
.tool-head .th-top .logo.lg, .tool-head .th-top .mono.lg { width: 56px; height: 56px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.tool-head .th-name { margin: 0; font-size: 28px; line-height: 1.1; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.tool-head .th-line { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.tool-head .th-state { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--ink); background: var(--field); box-shadow: inset 0 0 0 1px var(--line); }
.tool-head .th-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--live); }
.tool-head .th-state.warn { color: var(--acc); background: var(--tint); }
.tool-head .th-state.warn i { background: var(--warn); }
.tool-head .th-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; border-top: 1px solid var(--line); }
.tool-head .th-nums > div { padding: 16px 0 4px; display: grid; gap: 2px; }
.tool-head .th-nums > div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.tool-head .th-nums b { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.tool-head .th-nums span { font-size: 13px; color: var(--muted); }
.tool-head .th-acts { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
@media (max-width: 640px) { .tool-head .th-nums { grid-template-columns: 1fr; } .tool-head .th-nums > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } }
.tool-head { margin-bottom: 20px; }
.tool-head .th-top > .grow { flex: 1; min-width: 0; }
.tool-head .th-acts .btn.danger { margin-left: auto; }
.tool-head .th-nums b { line-height: 1.15; }
/* Room between the hairlines and the type (Fabian, 23 Oct): a line never sits closer than 14px to text. */
.tool-head .th-top { padding-bottom: 22px; }
.tool-head .th-nums { margin-top: 0; }
.tool-head .th-nums > div { padding: 20px 0 18px; gap: 6px; }
.tool-head .th-nums > div + div { padding-left: 24px; }
.tool-head .th-acts { margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--line); }
.kv { padding: 13px 0; line-height: 1.45; }

/* Today's banner (2026-10-23): glass over a slow mosaic of our people, light and dark. The columns drift once, very
   slowly, in opposite directions and rest; the faces fade in toward the glass so the words always read. */
.mzh { grid-column: 1 / 13; position: relative; height: 300px; border-radius: 18px; overflow: hidden; isolation: isolate;
  background: radial-gradient(520px 420px at 8% 110%, rgba(242,201,168,.22), transparent 70%), radial-gradient(640px 460px at 38% -30%, rgba(127,163,214,.26), transparent 70%), #ffffff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05), 0 18px 40px -22px rgba(30,40,60,.25); }
:root[data-theme="dark"] .mzh { background: radial-gradient(520px 420px at 8% 110%, rgba(242,201,168,.10), transparent 70%), radial-gradient(640px 460px at 38% -30%, rgba(74,111,165,.30), transparent 70%), #16171a;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 18px 40px -22px rgba(0,0,0,.6); }
.mzh-mosaic { position: absolute; top: 0; right: 0; width: min(900px, 82%); height: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.18) 14%, rgba(0,0,0,.55) 34%, #000 58%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.18) 14%, rgba(0,0,0,.55) 34%, #000 58%, #000 100%); }
.mzh-cols { display: flex; gap: 10px; padding-left: 26px; }
.mzh-col { display: flex; flex-direction: column; gap: 10px; flex: none; will-change: transform; }
.mzh-col img { display: block; width: 104px; height: 132px; object-fit: cover; border-radius: 10px; opacity: 0; animation: mzh-in 1.1s cubic-bezier(.2,.7,.2,1) forwards; }
:root[data-theme="dark"] .mzh-col img { animation-name: mzh-in-dark; }
.mzh-col.up { animation: mzh-up 160s cubic-bezier(.2,.7,.2,1) forwards; }
.mzh-col.down { transform: translateY(-280px); animation: mzh-down 180s cubic-bezier(.2,.7,.2,1) forwards; }
.mzh-col.slow { animation-duration: 200s; }
@keyframes mzh-up { from { transform: translateY(-40px); } to { transform: translateY(-280px); } }
@keyframes mzh-down { from { transform: translateY(-280px); } to { transform: translateY(-40px); } }
@keyframes mzh-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes mzh-in-dark { from { opacity: 0; transform: scale(.97); } to { opacity: .92; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mzh-col, .mzh-col img { animation: none; opacity: 1; } .mzh-col.down { transform: translateY(-160px); } }
.mzh-glass { position: absolute; z-index: 2; left: 28px; top: 28px; bottom: 28px; width: fit-content; max-width: min(500px, calc(100% - 56px)); box-sizing: border-box; padding: 26px 30px 24px; border-radius: 16px; display: flex; flex-direction: column; gap: 8px;
  /* More glass, still clearly a card (Fabian, 23 Oct): a frosted lens, a bright rim, a sheen down from the top and a
     soft lift, so it reads as glass over the faces in both themes. */
  background: linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.38) 60%, rgba(255,255,255,.46));
  -webkit-backdrop-filter: blur(14px) saturate(1.5) brightness(1.04); backdrop-filter: blur(14px) saturate(1.5) brightness(1.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 0 0 1px rgba(255,255,255,.75), 0 0 0 1px rgba(20,30,50,.08), 0 2px 6px rgba(20,30,50,.06), 0 22px 48px -22px rgba(20,30,50,.32); }
:root[data-theme="dark"] .mzh-glass {
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05) 55%, rgba(255,255,255,.08)), rgba(22,23,27,.46);
  -webkit-backdrop-filter: blur(14px) saturate(1.4) brightness(.92); backdrop-filter: blur(14px) saturate(1.4) brightness(.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), inset 0 0 0 1px rgba(255,255,255,.12), 0 0 0 1px rgba(0,0,0,.35), 0 22px 48px -22px rgba(0,0,0,.7); }
.mzh-date { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.mzh-h1 { margin: 0; font-size: 40px; line-height: 1.08; font-weight: 500; letter-spacing: -0.03em; color: var(--ink); }
.mzh-h1 .acc { color: var(--acc); }
.mzh-lead { margin: 2px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
/* The glass is as wide as its widest line (Fabian, 24 Oct: no empty band on the right); heading and actions keep to one
   line on wide screens so they set that width, the lead wraps inside it. */
.mzh-acts { display: flex; flex-wrap: nowrap; gap: 8px; margin-top: auto; }
.mzh-h1 { white-space: nowrap; }
.mzb { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; font: 500 14px/1 inherit; font-family: inherit;
  color: var(--ink); background: var(--field); box-shadow: inset 0 0 0 1px var(--line-2, var(--line)); transition: background .15s; }
.mzb:hover { background: var(--panel-hover); }
.mzb.solid { color: #fff; background: #4a6fa5; box-shadow: none; }
.mzb.solid:hover { background: #5a80b9; }
.mzb:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
@media (max-width: 900px) { .mzh-mosaic { width: 100%; -webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0,0,0,.4) 70%, rgba(0,0,0,.15) 100%); mask-image: linear-gradient(180deg, #000 0, rgba(0,0,0,.4) 70%, rgba(0,0,0,.15) 100%); }
  .mzh-glass { left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; max-width: none; padding: 18px; } .mzh-h1 { font-size: 30px; white-space: normal; } .mzh-acts { flex-wrap: wrap; } .mzh { height: 340px; } }

/* Drawn again (a refresh or coming back): the faces are already there, no second fade-in; the columns continue. */
.mzh.again .mzh-col img { animation: none; opacity: 1; }
:root[data-theme="dark"] .mzh.again .mzh-col img { opacity: .92; }

.logo.xs, .mono.xs { width: 16px; height: 16px; border-radius: 4.5px; font-size: 9px; }

/* The rail folds to its icons (Fabian, 24 Oct): a gentle slide, labels fade first on the way in and last on the
   way out; every icon, avatar stack and the brain card land on the same centre line. Wider screens only. */
.fold { display: flex; align-items: center; width: 38px; height: 36px; padding: 0 9px; border: 0; border-radius: 10px; background: none; color: var(--faint); cursor: pointer; transition: background .15s, color .15s, margin .5s cubic-bezier(.32,.72,0,1); }
.fold svg { flex: none; }
.fold:hover { color: var(--ink); background: var(--panel-hover); }
@media (min-width: 761px) {
  .frame { transition: grid-template-columns .5s cubic-bezier(.32,.72,0,1); }
  .frame.shut { grid-template-columns: 72px minmax(0, 1fr); }
  .rail .rt, .find span, .find kbd, .rnav .pv-tag, .rlabel .rl, .me > span, .bbtn .grow { transition: opacity .22s ease .2s; }
  .frame.shut .rail .rt, .frame.shut .find span, .frame.shut .find kbd, .frame.shut .rnav .pv-tag, .frame.shut .rlabel .rl, .frame.shut .me > span, .frame.shut .bbtn .grow { opacity: 0; pointer-events: none; transition: opacity .12s ease; }
  .rail .rt { overflow: hidden; text-overflow: clip; white-space: nowrap; }
  .brand { width: 100%; overflow: hidden; transition: padding .5s cubic-bezier(.32,.72,0,1), width .5s cubic-bezier(.32,.72,0,1); }
  .brand img { flex: none; transform-origin: 12px 50%; transition: transform .5s cubic-bezier(.32,.72,0,1); }
  .frame.shut .brand img { transform: scale(1.35); }
  .frame.shut .brand { width: 36px; padding-left: 12px; }
  .find { overflow: hidden; transition: padding .5s cubic-bezier(.32,.72,0,1), color .15s; }
  .find span { min-width: 0; overflow: hidden; white-space: nowrap; }
  .find kbd, .find svg { flex: none; }
  .frame.shut .find { padding-left: 16px; }
  .rnav a { position: relative; overflow: hidden; white-space: nowrap; transition: background .15s, color .15s, padding .5s cubic-bezier(.32,.72,0,1); }
  .frame.shut .rnav a { padding-left: 15px; }
  .frame.shut .rnav .badge { position: absolute; top: 3px; left: 27px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; box-shadow: 0 0 0 2px var(--ring); }
  .rlabel { overflow: hidden; transition: padding .5s cubic-bezier(.32,.72,0,1); }
  .rlabel .rl { max-width: 140px; overflow: hidden; white-space: nowrap; }
  .frame.shut .rlabel { justify-content: center; padding: 18px 0 6px; }
  .frame.shut .rlabel .rl { max-width: 0; }
  .mini, .mini img { transition: margin .5s cubic-bezier(.32,.72,0,1), width .5s cubic-bezier(.32,.72,0,1), height .5s cubic-bezier(.32,.72,0,1), padding .5s cubic-bezier(.32,.72,0,1); }
  .frame.shut .rnav .cir { padding-left: calc((48px - (18px * var(--n, 3) - 8px * (var(--n, 3) - 1))) / 2); }
  .frame.shut .rnav .cir .mini { padding-left: 0; }
  .frame.shut .rnav .cir .mini img { width: 18px; height: 18px; margin-right: -8px; }
  .frame.shut .rnav .cir .mini img:last-child { margin-right: 0; }
  .frame.shut .fold { margin-left: 5px; }
  .me { overflow: hidden; transition: background .15s, padding .5s cubic-bezier(.32,.72,0,1); }
  .frame.shut .me { flex: none; width: 48px; padding-left: 10px; }
  .frame.shut .user { flex-direction: column; gap: 6px; }
  .bbtn .grow { min-width: 0; overflow: hidden; white-space: nowrap; }
  .bbtn .bb-qr { flex: none; }
  .bbtn { transition: transform .2s var(--ease-arrive), box-shadow .2s, padding .5s cubic-bezier(.32,.72,0,1), gap .5s cubic-bezier(.32,.72,0,1), height .5s cubic-bezier(.32,.72,0,1); }
  .frame.shut .bbtn { height: 48px; padding: 0 8px; gap: 0; }
}
@media (min-width: 761px) and (prefers-reduced-motion: reduce) { .frame, .rail * { transition: none !important; } }
/* The Connectry app icon (25 Oct 2026): the brain's marks sit on the icon's own ground. */
.bc-m, .brain .m, .by .m { background: #232a36 url(img/app-ground-128.png) center / cover; color: #fff; }
.bc-m svg, .brain .m svg, .by .m svg { width: 56%; height: 56%; fill: #fff; }

/* ---------- Tools overview (26 Oct 2026): one line per tool, its next step on the line ---------- */
.tov .sect { gap: 12px; }
.tov .sect h2 { margin-right: 4px; }
.tchips { display: flex; gap: 6px; flex: 1; min-width: 0; }
.tchip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.tchip span { font-size: 12px; font-weight: 400; color: var(--faint); }
.tchip:hover { color: var(--ink); background: var(--panel-hover); }
.tchip[aria-pressed="true"] { color: var(--ink); background: var(--active); box-shadow: none; }
.tov .btn.ink.sm { gap: 6px; }
.tlist { display: flex; flex-direction: column; padding: 4px 0 8px; }
.tline { display: grid; grid-template-columns: 36px minmax(0, 1.5fr) 112px minmax(170px, 1fr) 148px; align-items: center; gap: 14px; min-height: 64px; padding: 0 10px; margin: 0 -10px; border-radius: 14px; cursor: pointer; transition: background .15s; }
.tline + .tline { box-shadow: 0 -1px 0 var(--line); }
.tline:hover { background: var(--panel-hover); box-shadow: none; }
.tline:hover + .tline { box-shadow: none; }
.tline .logo.sm, .tline .mono.sm { width: 36px; height: 36px; border-radius: 10px; }
.tl-name { min-width: 0; text-decoration: none; color: inherit; }
.tl-name b { display: block; font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-name small { display: block; font-size: 12.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-st { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.tl-st i { width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 18%, transparent); }
.tl-st.warn { color: var(--warn); } .tl-st.warn i { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 18%, transparent); }
.tl-st.mute i { background: var(--faint); box-shadow: none; }
.tl-g { display: flex; gap: 14px; font-size: 12.5px; color: var(--faint); white-space: nowrap; min-width: 0; overflow: hidden; }
.tl-g span { display: inline-flex; align-items: center; gap: 6px; }
.tl-g i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue-light); }
.tl-g i.a { background: none; box-shadow: inset 0 0 0 1.5px var(--faint); }
.tl-act { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.tl-note { font-size: 12px; color: var(--faint); white-space: nowrap; }
.tq { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--field); color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; opacity: 0; transition: opacity .15s, background .15s, color .15s; box-shadow: inset 0 0 0 1px var(--line); }
.tline:hover .tq, .tq:focus-visible { opacity: 1; }
.tq:hover { color: var(--ink); background: var(--active); }
.tline .icon-btn { width: 30px; height: 30px; }
.tquick { flex: none; }
.dsearch.sm { height: 38px; border-radius: 11px; padding: 0 12px; }
.dsearch.sm input { font-size: 14px; }
.tqgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.tqt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 4px 10px; border: 0; border-radius: 14px; background: none; font: inherit; color: var(--body); cursor: pointer; transition: background .15s, transform .15s; }
.tqt:hover { background: var(--field); transform: translateY(-1px); }
.tqt .logo, .tqt .mono { width: 38px; height: 38px; border-radius: 11px; box-shadow: 0 0 0 1px var(--line); }
.tqt b { font-size: 12px; font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tqt i { position: absolute; top: 8px; right: 14px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13px; line-height: 1; color: #fff; background: var(--blue); opacity: 0; transform: scale(.7); transition: opacity .15s, transform .15s; }
.tqt:hover i { opacity: 1; transform: none; }
.thow.sm { padding-top: 14px; }
.thow.sm .th-i { padding: 10px 0; }

/* ---------- Add a tool (26 Oct 2026): search first, one row of groups, a calm grid ---------- */
.dirv2 .main.dirp { display: flex; flex-direction: column; padding: 22px 24px 8px; }
.dsearch.big { height: 52px; border-radius: 16px; padding: 0 18px; flex: none; }
.dsearch.big input { font-size: 16px; }
.dcount { flex: none; font-size: 12px; color: var(--faint); padding: 3px 9px; border-radius: 999px; background: var(--active); }
.dchips { flex: none; display: flex; gap: 6px; margin: 16px 0 6px; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 92%, transparent); }
.dchips button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); transition: background .15s, color .15s; }
.dchips button span { font-size: 11.5px; font-weight: 400; color: var(--faint); }
.dchips button:hover { color: var(--ink); background: var(--panel-hover); }
.dchips button[aria-selected="true"] { color: var(--on-ink); background: var(--ink); box-shadow: none; }
.dchips button[aria-selected="true"] span { color: var(--on-ink); opacity: .6; }
.dirv2 .dscroll { padding-top: 8px; padding-bottom: 14px; }
.dirv2 .dmost { margin-top: 10px; }
.dirv2 .dshelf { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.dh { margin: 22px 0 8px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.dgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dapp { display: flex; align-items: center; gap: 12px; min-width: 0; height: 64px; padding: 0 12px; border-radius: 14px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); transition: background .15s, box-shadow .15s, transform .15s; }
.dapp:hover { background: var(--panel-hover); box-shadow: inset 0 0 0 1px var(--line-2, var(--line)), 0 10px 22px -18px rgba(0,0,0,.5); transform: translateY(-1px); }
.dapp .logo, .dapp .mono { width: 36px; height: 36px; border-radius: 10px; flex: none; }
.dapp .grow { flex: 1; min-width: 0; }
.dapp b { display: block; font-size: 14px; font-weight: 500; }
.dapp small { display: block; font-size: 12px; color: var(--faint); }
.dc-add { flex: none; min-width: 30px; height: 30px; padding: 0 8px; border: 0; border-radius: 999px; display: grid; place-items: center; font: inherit; font-size: 17px; line-height: 1; color: var(--muted); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: background .15s, color .15s; }
.dc-add:hover { color: #fff; background: var(--blue); box-shadow: none; }
.dapp .dc-add:not(:hover) { font-size: 17px; }
.dc-ok { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--acc); background: var(--tint); }
.dmore { display: block; margin: 14px auto 4px; height: 36px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--field); color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.dmore:hover { background: var(--active); }
.dnone { display: grid; gap: 4px; place-items: center; padding: 48px 0; text-align: center; }
.dnone b { font-size: 15px; font-weight: 500; }
.dnone span { font-size: 13px; color: var(--faint); }
/* Your own connector: the one place with a little light in it */
.dcustom { position: relative; overflow: hidden; isolation: isolate; }
.dc-glow { position: absolute; inset: -40% -30% auto auto; width: 280px; height: 280px; z-index: -1; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--blue-light) 30%, transparent), transparent); filter: blur(10px); }
.dcustom .ownrow .field { height: 44px; border-radius: 12px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; }
.dcustom .ownrow .btn { height: 44px; }
@media (max-width: 1180px) { .dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dirv2 .dshelf { grid-template-columns: repeat(5, minmax(0, 1fr)); } .tline { grid-template-columns: 36px minmax(0, 1fr) 110px auto; } .tl-g { display: none; } }
@media (max-width: 760px) { .dgrid { grid-template-columns: 1fr; } .tline { grid-template-columns: 36px minmax(0, 1fr) auto; } .tl-st { display: none; } .tq { opacity: 1; } }

/* ---------- Connected: the check, drawn ---------- */
.modal.cpm { width: min(420px, calc(100vw - 32px)); text-align: center; }
.cpop { display: flex; flex-direction: column; align-items: center; }
.cp-mark { position: relative; width: 112px; height: 112px; display: grid; place-items: center; margin: 6px 0 18px; }
.cp-mark > .logo, .cp-mark > .mono { width: 64px; height: 64px; border-radius: 18px; box-shadow: 0 0 0 1px var(--line), 0 14px 30px -14px rgba(0,0,0,.45); animation: cpIn .5s var(--ease-arrive, cubic-bezier(.2,.8,.2,1)) both; }
.cp-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.cp-ring circle { fill: none; stroke: var(--live); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 340; stroke-dashoffset: 340; animation: cpRing .9s .15s cubic-bezier(.65,0,.35,1) forwards; }
.cp-tick { position: absolute; right: 4px; bottom: 4px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--live); box-shadow: 0 0 0 4px var(--panel-solid, var(--bg)), 0 6px 14px -6px rgba(0,0,0,.4); transform: scale(0); animation: cpPop .45s .85s cubic-bezier(.34,1.56,.64,1) forwards; }
.cp-tick svg { width: 18px; height: 18px; }
.cp-tick path { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; animation: cpDraw .35s 1.05s ease-out forwards; }
.cpop h3 { margin: 0 0 6px; font-size: 20px; font-weight: 600; letter-spacing: -.2px; }
.cpop > p { margin: 0; font-size: 14px; color: var(--muted); }
.cp-stats { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; margin: 20px 0 4px; padding: 14px 0; border-radius: 14px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); }
.cp-stats span { display: grid; gap: 2px; font-size: 12px; color: var(--faint); }
.cp-stats span + span { box-shadow: -1px 0 0 var(--line); }
.cp-stats b { font-size: 18px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.cpop .acts { width: 100%; margin-top: 20px; }
.cpop .acts .btn { flex: 1; }
@keyframes cpRing { to { stroke-dashoffset: 0; } }
@keyframes cpPop { to { transform: scale(1); } }
@keyframes cpDraw { to { stroke-dashoffset: 0; } }
@keyframes cpIn { from { transform: scale(.85); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cp-ring circle, .cp-tick, .cp-tick path, .cp-mark > .logo { animation-duration: .01s; animation-delay: 0s; } }

/* ---------- Today and a view beside it (26 Oct 2026): tabs in the bar, where the crumb sits on other pages ---------- */
.tt-tabs { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.tt-tab { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 14px; border-radius: 999px; color: var(--muted); font-size: 13.5px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.tt-tab span { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.tt-tab:hover { color: var(--ink); }
.tt-tab[aria-current="page"] { color: var(--ink); background: var(--panel); box-shadow: 0 1px 2px rgba(0,0,0,.08), inset 0 0 0 1px var(--line); }
.tt-tab .vx-ic.xs { width: 16px; height: 16px; }
.tt-add { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--faint); font: inherit; font-size: 16px; cursor: pointer; }
.tt-add:hover { color: var(--ink); background: var(--panel-hover); }
.tt-first { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--faint); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.tt-first:hover { color: var(--ink); }
.tt-first.on { color: var(--acc); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 40%, transparent); background: var(--tint); }
.tt-first svg { width: 12px; height: 12px; }
main.fit > .vx-home { flex: 1; min-height: 0; }

/* Inside the iPhone app on iPhone Duo (26 Oct 2026): only the Views pages, edge to edge. The app draws its own tab bar
   and status strip, so the portal's rail, top bar actions and bottom tabs stay away. The app sets html.cx-app. */
html.cx-app .frame, html.cx-app .frame.shut { grid-template-columns: minmax(0, 1fr); padding: 0; gap: 0; }
html.cx-app .rail, html.cx-app .bottom-tabs, html.cx-app .bar .mbrand, html.cx-app .bar .right { display: none; }
html.cx-app .stage { border-radius: 0; box-shadow: none; }
html.cx-app .bar { padding-left: 24px; }

/* Your own connector: the add flow (31 Oct 2026). One sheet, three steps: how it lets Connectry in, the key or app, done. */
.modal.own-m { width: min(560px, 100%); padding: 28px; }
.own-flow { display: flex; flex-direction: column; gap: 18px; }
.own-top { display: flex; align-items: center; gap: 10px; margin: -6px -8px -4px 0; }
.own-dots { display: flex; gap: 6px; }
.own-dots i { width: 20px; height: 4px; border-radius: 999px; background: var(--line-2); }
.own-dots i.on { background: var(--ink); }
.own-top .eyebrow { flex: 1; }
.own-x { width: 44px; height: 44px; border: 0; border-radius: 999px; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.own-x:hover { background: var(--active); }
.own-head { display: flex; align-items: center; gap: 16px; }
.own-head h3 { margin: 0; font-size: 24px; line-height: 28px; font-weight: 500; letter-spacing: -.02em; }
.own-head .own-sub, .own-flow .own-sub { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: var(--muted); }
.own-logo { width: 56px; height: 56px; flex: none; border-radius: 14px; object-fit: cover; background: var(--surface, #fff); box-shadow: 0 0 0 1px var(--line), 0 10px 24px -12px rgba(0,0,0,.35); animation: cpIn .45s var(--ease-arrive, cubic-bezier(.2,.7,.2,1)) both; }
.own-logo.mono { display: grid; place-items: center; font-size: 22px; font-weight: 600; color: var(--ink); background: var(--field); }
.own-found { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--field); font-size: 13px; color: var(--body); }
.own-found svg { color: var(--ink); }
.own-note { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--field); font-size: 13px; color: var(--body); }
.own-lbl { font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: -10px; }
.own-opts { display: flex; flex-direction: column; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line-2); overflow: hidden; }
.own-opt { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; cursor: pointer; transition: background .16s ease; }
.own-opt + .own-opt { border-top: 1px solid var(--line); }
.own-opt:hover { background: var(--active); }
.own-opt.on { background: var(--tint); }
.own-opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--blue); flex: none; }
.own-opt b { display: block; font-size: 15px; font-weight: 500; }
.own-opt small { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--muted); }
.own-opt.off { cursor: default; }
.own-opt.off:hover { background: none; }
.own-opt.off b { color: var(--muted); }
.own-opt.off em { font-style: normal; font-size: 12px; color: var(--faint); }
.own-radio { width: 18px; height: 18px; flex: none; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.own-rec { flex: none; height: 24px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; color: var(--acc); background: var(--tint); }
.own-link { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; background: var(--field); color: var(--ink); text-decoration: none; }
.own-link:hover:not(.static) { background: var(--active); }
.own-link b { display: block; font-size: 15px; font-weight: 500; }
.own-link small, .own-link code { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.own-link code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; }
/* The design system's --surface is white unless the theme is site-dark or film (tokens.css); the portal's dark is
   neither, so text on it was light on white (10 Nov 2026, Fabian: "Changes ask me first" was unreadable in dark).
   Anything that carries text takes the portal's own tonal fill, and white in light, like the other cards here. */
.own-n { width: 28px; height: 28px; flex: none; border-radius: 999px; display: grid; place-items: center; font-size: 13px; font-weight: 600; background: var(--field); box-shadow: inset 0 0 0 1px var(--line-2); }
:root[data-theme="light"] .own-n { background: #fff; }
.own-go { flex: none; font-size: 14px; font-weight: 500; color: var(--acc); }
.own-key { display: flex; align-items: center; gap: 8px; }
.own-key .field { flex: 1; height: 52px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 14px; letter-spacing: .02em; }
.own-key .field:focus { border-color: var(--blue); box-shadow: 0 0 0 4px var(--tint); }
.own-eye { height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--field); font-size: 13px; font-weight: 500; color: var(--body); cursor: pointer; }
/* "Sent as": one row on one baseline, every control 40 px tall (1 Nov 2026: the select sat lower than its label). */
.own-send { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.own-send-l { flex: none; line-height: 40px; }
.own-send .field { height: 40px; width: auto; flex: 1; min-width: 120px; font-size: 13px; margin: 0; }
.own-send .own-hn { flex: 0 1 180px; }
.own-selw { position: relative; display: inline-flex; align-items: center; flex: 0 1 230px; min-width: 180px; height: 40px; }
.own-selw select { -webkit-appearance: none; appearance: none; width: 100%; height: 40px; margin: 0; padding: 0 34px 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--field); color: var(--ink); font-family: inherit; font-size: 13px; font-weight: 500; line-height: 38px; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease; }
.own-selw select:hover { border-color: var(--muted); }
.own-selw select:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.own-selw svg { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.own-more { align-self: flex-start; margin-top: -8px; }
.own-scopes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.own-scopes code { height: 26px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; background: var(--field); font-size: 12px; color: var(--body); }
.own-check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.own-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--blue); }
.own-check b { display: block; font-size: 14px; font-weight: 500; }
.own-check small { display: block; font-size: 13px; color: var(--muted); }
.own-err { margin: 0; padding: 12px 14px; border-radius: 12px; font-size: 14px; color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.own-flow .acts { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.own-seal { font-size: 13px; color: var(--muted); }
.own-flow .grow { flex: 1; min-width: 0; }
@media (max-width: 640px) { .modal.own-m { padding: 20px; } .own-head h3 { font-size: 20px; line-height: 24px; } .own-foot { flex-wrap: wrap; } .own-seal { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .own-logo { animation: none; } }
/* Add flow polish (31 Oct 2026): gates in the flow, a first thing to try, the clipboard offer. */
.own-ways { margin-left: -8px; }
.own-gates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.own-gate { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px; border: 0; border-radius: 14px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line-2); text-align: left; cursor: pointer; color: var(--ink); transition: box-shadow .16s ease, background .16s ease; }
/* :not(.on): the chosen card keeps its tint in light too (this rule would otherwise outrank .own-gate.on). */
:root[data-theme="light"] .own-gate:not(.on) { background: #fff; }
.own-gate svg { width: 20px; height: 20px; }
.own-gate b { font-size: 16px; font-weight: 500; }
.own-gate small { font-size: 13px; line-height: 18px; color: var(--muted); }
.own-gate.on { background: var(--tint); box-shadow: inset 0 0 0 1.5px var(--blue); }
.own-gate:focus-visible, .own-clip:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.own-clip { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 10px; padding: 12px 14px; border: 0; border-radius: 12px; background: var(--tint); color: var(--ink); text-align: left; cursor: pointer; }
.own-clip svg { width: 18px; height: 18px; color: var(--acc); flex: none; }
.own-clip b { display: block; font-size: 14px; font-weight: 500; }
.own-clip small { display: block; font-size: 12px; color: var(--muted); }
.cp-try { width: 100%; margin-top: 18px; padding: 16px 18px; border-radius: 14px; background: var(--field); display: flex; flex-direction: column; gap: 10px; text-align: left; }
.cp-tryrow { display: flex; align-items: center; gap: 12px; }
.cp-tryrow b { flex: 1; font-size: 16px; line-height: 22px; font-weight: 500; color: var(--ink); }
.cp-tryrow .btn svg { margin-right: 6px; }
.cp-try small { font-size: 13px; color: var(--muted); }
@media (max-width: 640px) { .own-gates { grid-template-columns: minmax(0, 1fr); } }

/* The add card arriving (1 Nov 2026, Fabian: "more cinematic but elegant, not too crazy"). It rises out of a soft focus
   once, its blooms behind; then the logo, title and fields settle one after another. A step change replays only the
   gentle settle, never the card. Durations and curves are the system's (easing-arrive, duration-row-stagger spirit). */
.modal.own-m, .modal.cpm { position: relative; overflow: hidden; border-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px var(--line), 0 40px 90px -30px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.12);
  animation: ownCard .62s cubic-bezier(.2,.7,.2,1) both; }
:root[data-theme="light"] .modal.own-m, :root[data-theme="light"] .modal.cpm {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(0,0,0,.05), 0 40px 90px -30px rgba(20,30,50,.28), 0 2px 8px rgba(0,0,0,.06); }
.modal.own-m::before, .modal.cpm::before { content: ""; position: absolute; inset: -40% -30% auto auto; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(74,111,165,.16), transparent); pointer-events: none; animation: ownBloom 1.4s cubic-bezier(.2,.7,.2,1) both; }
.modal.own-m::after, .modal.cpm::after { content: ""; position: absolute; inset: auto auto -45% -25%; width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,217,176,.10), transparent); pointer-events: none; animation: ownBloom 1.6s .1s cubic-bezier(.2,.7,.2,1) both; }
.modal.own-m > *, .modal.cpm > * { position: relative; z-index: 1; }
.own-flow > * { animation: ownSettle .5s cubic-bezier(.2,.7,.2,1) both; }
.own-flow > :nth-child(1) { animation-delay: .08s; } .own-flow > :nth-child(2) { animation-delay: .14s; }
.own-flow > :nth-child(3) { animation-delay: .19s; } .own-flow > :nth-child(4) { animation-delay: .23s; }
.own-flow > :nth-child(5) { animation-delay: .27s; } .own-flow > :nth-child(n+6) { animation-delay: .3s; }
.scrim:has(.own-m), .scrim:has(.cpm) { animation: ownScrim .45s ease both; }
@keyframes ownCard { from { opacity: 0; transform: translateY(18px) scale(.965); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes ownSettle { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ownBloom { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes ownScrim { from { -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); background: transparent; } }
/* Already added: the logo with the system's check, said plainly. */
.own-added { position: relative; width: 72px; height: 72px; margin: 4px auto 0; }
.own-added .own-logo { width: 72px; height: 72px; border-radius: 18px; }
.own-addck { position: absolute; right: -6px; bottom: -6px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; box-shadow: 0 0 0 3px var(--ring); }
.own-addck svg { width: 13px; height: 13px; }
.own-addtx { text-align: center; }
.own-addtx h3 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 500; letter-spacing: -.02em; }
.own-addtx .own-sub { margin-top: 6px; }
@media (prefers-reduced-motion: reduce) {
  .modal.own-m, .modal.cpm, .own-flow > *, .modal.own-m::before, .modal.own-m::after, .modal.cpm::before, .modal.cpm::after, .scrim:has(.own-m), .scrim:has(.cpm) { animation: none; }
}

/* Tools > Add: the own-tool card fills the aside (2026-11-01). */
.dirv .aside > .dcustom { display: flex; flex-direction: column; padding: 26px; border-radius: 22px; background: var(--panel); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px var(--line), 0 30px 70px -34px rgba(0,0,0,.6); }
:root[data-theme="light"] .dirv .aside > .dcustom { background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 22px 50px -30px rgba(30,40,60,.35); }
.dcustom .dc-glow { inset: -150px -120px auto auto; width: 360px; height: 360px; filter: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--blue-light, #7fa3d6) 32%, transparent), transparent); }
.dc-glow2 { position: absolute; left: -150px; bottom: -170px; width: 340px; height: 340px; z-index: -1; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,217,176,.10), transparent); }
.dc-head { display: flex; align-items: center; gap: 12px; }
.dc-mark { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--acc); background: var(--tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 28%, transparent); }
.dc-eyebrow { font-size: 12px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; color: var(--faint); }
.dc-title { margin: 18px 0 8px; font-size: 28px; line-height: 32px; font-weight: 600; letter-spacing: -.025em; color: var(--ink); }
.dc-title em { font-style: normal; color: var(--acc); }
.dcustom .dexp { margin: 0 0 18px; font-size: 14px; line-height: 21px; }
.dcustom .dc-field { align-items: center; gap: 10px; height: 54px; padding: 0 6px 0 14px; border-radius: 14px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line-2, var(--line)); transition: box-shadow .2s; }
.dcustom .dc-field:focus-within { box-shadow: inset 0 0 0 1px var(--acc), 0 0 0 4px var(--tint); }
.dcustom .dc-field > svg { color: var(--faint); flex: none; }
.dcustom .dc-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; color: var(--ink); font: 500 13.5px var(--font-mono, ui-monospace, monospace); }
.dcustom .dc-field input::placeholder { color: var(--faint); }
.dcustom .dc-field .btn { height: 42px; border-radius: 10px; flex: none; }
.dcustom .own-clip { margin-top: 12px; border-radius: 14px; }
.dc-reads { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.dc-reads span { margin-right: 2px; font-size: 12px; color: var(--faint); }
.dc-reads code { padding: 5px 9px; border-radius: 999px; font: 500 11.5px var(--font-mono, ui-monospace, monospace); color: var(--body); background: var(--field); }
.dsteps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; }
.dsteps li { position: relative; display: grid; grid-template-columns: 30px 1fr; column-gap: 14px; padding-bottom: 14px; }
.dsteps li:last-child { padding-bottom: 0; }
.dsteps li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 32px; bottom: 2px; width: 1px; background: var(--line-2, var(--line)); }
.dsteps i { grid-row: span 2; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: var(--ink); background: var(--field); }
.dsteps i svg { width: 14px; height: 14px; }
.dsteps b { padding-top: 4px; font-size: 14px; font-weight: 500; color: var(--ink); }
.dsteps span { margin-top: 2px; font-size: 12.5px; line-height: 17px; color: var(--faint); }
.dc-try { margin-top: auto; padding-top: 22px; display: grid; gap: 10px; }
.dc-tries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dc-tries button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: 12px; cursor: pointer; font: inherit; color: var(--ink); text-align: left; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); transition: background .2s, transform .2s; }
.dc-tries button:hover { background: var(--panel-hover); transform: translateY(-1px); }
.dc-tries button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.dc-tries .logo, .dc-tries .mono { width: 28px; height: 28px; border-radius: 8px; flex: none; }
.dc-tries b { font-size: 13px; font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .dc-tries button { transition: none; } .dc-tries button:hover { transform: none; } }
.dc-reads { flex-wrap: nowrap; overflow: hidden; }
.dc-reads code { white-space: nowrap; }
@media (max-height: 980px) {
  .dirv .aside > .dcustom { padding: 22px; }
  .dc-mark { width: 34px; height: 34px; border-radius: 10px; }
  .dc-title { margin: 14px 0 6px; font-size: 24px; line-height: 28px; }
  .dcustom .dexp { margin-bottom: 14px; font-size: 13.5px; line-height: 20px; }
  .dcustom .dc-field { height: 50px; }
  .dcustom .dc-field .btn { height: 38px; }
  .dc-reads { margin-top: 12px; padding-bottom: 14px; }
  .dsteps { margin-top: 14px; }
  .dsteps li { padding-bottom: 10px; }
  .dsteps li:not(:last-child)::after { top: 30px; }
  .dsteps i { width: 28px; height: 28px; }
  .dsteps li { grid-template-columns: 28px 1fr; }
  .dsteps li:not(:last-child)::after { left: 14px; }
  .dc-try { padding-top: 16px; gap: 8px; }
}
@media (max-height: 820px) { .dc-reads { display: none; } .dsteps { margin-top: 0; } }

/* Email connect (2 Nov 2026, the Email canvas's Web screens): one sheet that changes screens, and Tools, Email. */
.modal.ml-m { width: min(560px, 100%); padding: 30px 32px 26px; overflow: clip; }
.ml-flow { position: relative; gap: 18px; }
.ml-x { position: absolute; top: -10px; right: -12px; z-index: 1; width: 36px; height: 36px; border: 0; border-radius: 999px; background: var(--field); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.ml-x:hover { background: var(--active); }
.ml-x:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ml-head { display: flex; flex-direction: column; gap: 12px; padding-right: 40px; }
.ml-head.ml-side { flex-direction: row; align-items: center; gap: 14px; }
.ml-head h3, .ml-found h3 { margin: 0; font-size: 28px; line-height: 1.12; font-weight: 600; letter-spacing: -.025em; }
.ml-head.ml-side h3 { font-size: 26px; }
.ml-head .own-sub { margin-top: 6px; }
.ml-head:not(.ml-side) .own-sub { margin-top: -6px; }
.ml-list { display: flex; flex-direction: column; margin-top: -6px; }
.ml-row { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; border-radius: 0; }
.ml-row + .ml-row { border-top: 1px solid var(--line); }
.ml-row b { display: block; font-size: 15px; font-weight: 500; }
.ml-row small { display: block; margin-top: 1px; font-size: 13px; color: var(--muted); }
.ml-row:hover:not([disabled]) b { color: var(--acc); }
.ml-row:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 8px; }
.ml-row[disabled] { cursor: default; }
.ml-chev { flex: none; color: var(--faint); display: grid; place-items: center; width: 18px; }
.ml-soon { flex: none; font-style: normal; font-size: 12px; font-weight: 500; color: var(--muted); height: 24px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; background: var(--field); }
.ml-type { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 5px 0 16px; border-radius: 14px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); }
.ml-type:focus-within { box-shadow: inset 0 0 0 1.5px var(--blue), 0 0 0 4px var(--tint); }
.ml-type input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: 400 15px var(--font-sans); color: var(--ink); }
.ml-type input::placeholder { color: var(--faint); }
.ml-type .btn { flex: none; }
.ml-fine { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.45; color: var(--faint); }
.ml-fine.c { justify-content: center; margin-top: -6px; }
.ml-fine svg { flex: none; }
.ml-found { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 18px 0 4px; }
.ml-found .own-sub { margin: -10px 0 0; }
.ml-tile { width: 84px; height: 84px; border-radius: 24px; display: grid; place-items: center; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.08), inset 0 0 0 1px rgba(0,0,0,.06); }
.ml-center { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ml-flow .btn.ml-big { height: 46px; padding: 0 26px; font-size: 15px; }
.ml-flow .btn.text { color: var(--acc); }
.ml-whys { display: flex; flex-direction: column; margin-top: -4px; }
.ml-why { display: flex; gap: 14px; padding: 13px 0; }
.ml-why + .ml-why { border-top: 1px solid var(--line); }
.ml-why b { display: block; font-size: 15px; font-weight: 500; }
.ml-why small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.ml-dot { width: 32px; height: 32px; flex: none; border-radius: 999px; display: grid; place-items: center; background: var(--tint); color: var(--acc); }
.ml-foot { display: flex; align-items: center; gap: 20px; padding-top: 4px; }
.ml-foot > :first-child { flex: 1; }
.ml-note { font-size: 12px; line-height: 1.45; color: var(--muted); }
.ml-step { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--field); color: var(--ink); text-decoration: none; }
a.ml-step:hover { background: var(--active); }
.ml-step b { display: block; font-size: 15px; font-weight: 500; }
.ml-step small { display: block; margin-top: 1px; font-size: 13px; color: var(--muted); }
.ml-n { width: 24px; height: 24px; flex: none; border-radius: 999px; display: grid; place-items: center; background: var(--blue); color: #fff; font-size: 12px; font-weight: 600; }
.ml-open { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; color: var(--acc); }
.ml-pw { display: flex; flex-direction: column; gap: 14px; }
.ml-lbl { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; }
.ml-fields { display: flex; gap: 10px; margin-top: -4px; }
.ml-fields .field { flex: 1; min-width: 0; height: 48px; margin: 0; border-radius: 12px; font-size: 15px; }
.ml-fields .field:focus { border-color: var(--blue); box-shadow: 0 0 0 4px var(--tint); outline: none; }
.ml-fields #ml-pp { letter-spacing: .06em; }
.ml-fields .field[readonly] { color: var(--muted); }
.ml-ok { width: 64px; height: 64px; border-radius: 999px; display: grid; place-items: center; background: linear-gradient(180deg, #5a80b9, #4a6fa5); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 12px 30px rgba(74,111,165,.32); animation: cpIn .45s var(--ease-arrive) both; }
.ml-box { padding: 0 16px; border-radius: 14px; background: var(--field); }
.ml-two { display: flex; gap: 10px; }
.ml-two .btn { flex: 1; }
.ml-two .btn.quiet { box-shadow: none; }
.ml-two .btn.quiet svg { color: var(--acc); }
.ml-mb { display: flex; align-items: center; gap: 12px; min-height: 60px; }
.ml-mb .grow { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ml-mb b { font-size: 15px; font-weight: 500; }
.ml-mb small { font-size: 13px; color: var(--muted); }
.ml-live { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ok); }
.ml-live i { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.ml-live.warn { color: var(--warn); }
.ml-spin { width: 16px; height: 16px; border-radius: 999px; border: 2px solid var(--line-2); border-top-color: var(--blue); animation: mlspin .8s linear infinite; display: block; }
.ml-spin.lg { width: 34px; height: 34px; border-width: 3px; }
@keyframes mlspin { to { transform: rotate(360deg); } }
.ml-page .ml-card { padding: 18px 20px 6px; }
.ml-mbs { display: flex; flex-direction: column; }
.ml-mbs > * + * { border-top: 1px solid var(--line); }
.ml-mbs .ml-rm { color: var(--muted); padding: 0 6px; }
.ml-mbs .ml-rm:hover { color: var(--danger); }
.ml-add { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0; border: 0; background: none; font: 500 15px var(--font-sans); color: var(--acc); cursor: pointer; text-align: left; }
.ml-add > span { width: 32px; height: 32px; display: grid; place-items: center; }
.ml-can > div { display: flex; align-items: center; min-height: 44px; gap: 12px; }
.ml-can > div + div { border-top: 1px solid var(--line); }
.ml-can span { flex: 1; font-size: 14px; }
.ml-can b { font-size: 13px; font-weight: 400; color: var(--muted); }
.ml-can b.acc { font-weight: 500; color: var(--acc); }
@media (max-width: 720px) {
  .modal.ml-m { padding: 26px 20px 22px; overflow: auto; }
  .ml-x { right: -4px; }
  .ml-head { padding-right: 44px; }
  .ml-head h3, .ml-found h3 { font-size: 24px; }
  .ml-fields { flex-direction: column; }
  .ml-fields .field { flex: none; }
  .ml-foot { flex-direction: column; align-items: stretch; gap: 12px; }
  .ml-foot .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .ml-ok { animation: none; } .ml-spin { animation-duration: 2s; } }
.ml-mb > .grow { flex: 1 1 auto; }
.ml-mbs .btn.primary.sm { height: 32px; padding: 0 14px; font-size: 13px; box-shadow: none; }
.ml-flow .grow, .ml-page .grow { flex: 1 1 auto; min-width: 0; }

/* Email on Tools (2 Nov 2026, comps PhoneToolsHero and PhoneToolsHeroLive): a card above the list, never a row in it. */
.tview .tcol { gap: 16px; }
.tview .tcol > .tpanel { flex: 1 1 0; }
.mhero { position: relative; flex: none; overflow: hidden; display: flex; flex-direction: row; align-items: center; gap: 24px; padding: 20px 22px;
  background: linear-gradient(135deg, rgba(90,128,185,.16), rgba(90,128,185,0) 62%), var(--panel); }
.mhero::after { content: ""; position: absolute; top: -90px; right: -70px; width: 260px; height: 260px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(127,163,214,.28), rgba(127,163,214,0)); }
.mhero > * { position: relative; z-index: 1; }
.mh-l { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mh-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.mh-fan { display: flex; align-items: center; gap: 8px; }
.mh-new { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--acc); }
.mh-t { margin: 0; font-size: 22px; line-height: 26px; font-weight: 500; letter-spacing: -.02em; }
.mh-s { margin: 6px 0 0; font-size: 14px; line-height: 20px; color: var(--body); }
.mh-go { flex: none; }
.mhero.on { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 20px; cursor: pointer; transition: box-shadow .15s; }
.mh-cover { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.mh-cover:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.mhero.on > :not(.mh-cover) { pointer-events: none; }
.mhero.on .mh-chip.add { pointer-events: auto; position: relative; z-index: 2; }
.mh-row { display: flex; align-items: center; gap: 12px; }
.mh-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mh-name b { font-size: 17px; font-weight: 500; }
.mh-name small { font-size: 13px; color: var(--muted); }
.mh-chev { flex: none; color: var(--faint); }
.mhero .tl-st { display: inline-flex; }
.mh-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.mh-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; max-width: 100%; padding: 0 12px 0 9px; border: 0; border-radius: 999px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); font: 400 13px var(--font-sans); color: var(--ink); min-width: 0; }
.mh-chip .trunc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-chip.warn { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 45%, transparent); }
.mh-chip.add { padding: 0 14px; font-weight: 500; color: var(--acc); cursor: pointer; }
.mh-chip.add:hover { background: var(--tint); }
.mh-chip.add:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
:root:not([data-theme="light"]) .mhero { background: linear-gradient(135deg, rgba(90,128,185,.22), rgba(90,128,185,0) 62%), var(--panel); }
@media (max-width: 760px) {
  .mhero { flex-direction: column; align-items: stretch; gap: 16px; padding: 18px 16px 16px; }
  .mh-t { font-size: 20px; line-height: 24px; }
  .mh-go { width: 100%; }
  .mhero.on { padding: 14px 14px 14px 16px; gap: 12px; }
}
@media (max-width: 980px) { .tview .tcol > .tpanel, .tview .tcol .tscroll { flex: none; } }
/* The tools list shares its column with the Email card: the name keeps room, and the gate counts go first when it is narrow. */
.tlist { container-type: inline-size; }
.tline { grid-template-columns: 36px minmax(120px, 1.5fr) auto minmax(0, 1fr) auto; }
@container (max-width: 620px) { .tline { grid-template-columns: 36px minmax(0, 1fr) auto auto; } .tl-g { display: none; } }
@media (max-width: 760px) { .tline { grid-template-columns: 36px minmax(0, 1fr) auto; } .tov .sect { flex-wrap: wrap; row-gap: 10px; } .tov .tchip { white-space: nowrap; } .tov .tchips { order: 3; flex: 1 0 100%; overflow-x: auto; scrollbar-width: none; } .tov .sect > .btn { margin-left: auto; } }

/* Provider icons (2 Nov 2026, Fabian: sleek, not framed): an app-icon squircle, no ring, no border, no overlap. Full icons
   (Yahoo, iCloud) fill it; transparent marks (Gmail, Outlook) sit at 68% on white with a soft shadow, in both themes. */
.mi { --s: 36px; width: var(--s); height: var(--s); flex: none; border-radius: calc(var(--s) * .23); overflow: hidden; display: grid; place-items: center; }
.mi > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mi.mark { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.mi.mark > img { width: 68%; height: 68%; object-fit: contain; }
.mi.env { background: #fff; color: #5b5c66; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.mi.env svg { width: 52%; height: 52%; }
.mi > .mono { width: 100%; height: 100%; border-radius: 0; font-size: calc(var(--s) * .42); }
.mi.md { --s: 44px; } .mi.lg { --s: 48px; } .mi.xl { --s: 64px; }
.ml-mb .mi { --s: 32px; }
.mh-fan .mi { --s: 32px; }
.mh-fan.sm .mi { --s: 28px; }
.mh-fan.sm { gap: 6px; }
.mh-chip .mi { --s: 18px; }
.ml-row[disabled] .mi, .ml-row[disabled] .grow { opacity: .5; }

/* Email on Tools > Add (2 Nov 2026): the compact card above the directory, the directory still on the first screen. */
.dirv .dcol { gap: 14px; min-height: 0; }
.dirv2 .dcol > .dirp { display: flex; flex-direction: column; padding: 22px 24px 8px; }
main.fit .dirv .dcol > .dirp { flex: 1 1 0; }
.mhero.cmp { gap: 16px; padding: 14px 16px 14px 18px; }
.mhero.cmp .mh-fan { gap: 6px; }
.mhero.cmp .mh-fan .mi { --s: 28px; }
.mhero.cmp .mh-t { font-size: 17px; line-height: 22px; }
.mhero.cmp .mh-s { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--muted); }
.mhero.cmp .mh-go { flex: none; }
.mhero.on.cmp { padding: 12px 16px; }
.mhero.on.cmp .mh-chip.add { flex: none; }
@media (max-width: 980px) { main.fit .dirv .dcol > .dirp, main.fit .dirv .dcol .dscroll { flex: none; } }
.mh-name b, .mh-name small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) {
  .mhero.cmp:not(.on) { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "fan go" "txt txt"; align-items: center; gap: 10px 12px; padding: 14px 16px; }
  .mhero.cmp:not(.on) .mh-fan { grid-area: fan; }
  .mhero.cmp:not(.on) .mh-l { grid-area: txt; }
  .mhero.cmp:not(.on) .mh-go { grid-area: go; width: auto; }
}
/* Phone: the compact connected card keeps the name; its state shows as the dot alone (title says which). */
@media (max-width: 760px) { .mhero.on.cmp .tl-st > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .mh-name { min-width: 64px; } }
/* A search for Gmail, Outlook or Yahoo (2 Nov 2026): the Email card answers it, marked, and a line in the results says so. */
.mhero.hit { box-shadow: var(--panel-shadow), inset 0 0 0 1.5px var(--blue); }
.dmail { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; margin: 4px 0 14px; padding: 14px 16px; border-radius: 14px; background: var(--tint); }
.dmail b { font-size: 14px; font-weight: 500; flex: 1 1 260px; }
.dmail span { order: 3; flex: 1 0 100%; font-size: 13px; color: var(--muted); margin-top: -2px; }
.dmail .btn { flex: none; }
@media (max-width: 760px) { .dmail .btn { order: 4; margin-top: 6px; } }

/* ---------- glass rail and its lens (Fabian, 3 Nov 2026; canvas "Portal glass navigation") ----------
   The rail reads as a thick piece of glass: its rim lit from above plus a bevel on the inside of each edge. The active
   section sits under a lens: a fill close to the rail's own, a rim banded with light the way thick glass catches it,
   and depth under its lip. The lens glides in one move and flexes on the way (placeLens in app.js). */
:root {
  --rail-bevel: inset 0 12px 16px -12px rgba(255,255,255,.12), inset 12px 0 16px -14px rgba(255,255,255,.06), inset 0 -12px 16px -12px rgba(0,0,0,.30);
  /* Dark (4 Nov 2026, Fabian: "not this greyish"): clear glass with a faint cast of the Connectry blue, lit at the top
     edge; no metallic diagonal band. */
  --lens-fill: linear-gradient(180deg, rgba(127,163,214,.20), rgba(74,111,165,.12));
  --lens-rim: linear-gradient(160deg, rgba(200,220,255,.42) 0%, rgba(160,190,235,.10) 40%, rgba(160,190,235,.06) 70%, rgba(200,220,255,.24) 100%);
  --lens-depth: inset 0 1px 0 rgba(220,232,255,.20), inset 0 8px 12px -8px rgba(160,190,235,.18), inset 0 -6px 10px -8px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.25), 0 8px 20px -4px rgba(10,20,40,.45);
}
:root[data-theme="light"] {
  --rail-bevel: inset 0 12px 16px -12px rgba(255,255,255,.95), inset 12px 0 16px -14px rgba(255,255,255,.70), inset 0 -12px 16px -12px rgba(0,0,0,.06), inset -12px 0 16px -14px rgba(0,0,0,.035);
  --lens-fill: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.80));
  --lens-rim: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.30) 30%, rgba(255,255,255,.85) 50%, rgba(26,26,26,.14) 80%, #fff 100%);
  --lens-depth: inset 0 1px 0 #fff, inset 0 7px 9px -7px #fff, inset 0 -7px 9px -7px rgba(26,26,26,.10), 0 1px 2px rgba(0,0,0,.06), 0 6px 16px rgba(30,40,60,.12);
}
.rail.glass { box-shadow: var(--rim), var(--rail-bevel), var(--lift); }
.rnav.main { position: relative; flex: none; }
/* The rail nav also carries the page column's .main class (flex column, gap 20, last child flex: 1). Its last link took
   flex: 1 with a zero basis and came out 20 px tall, so the last tab's highlight was smaller (Memory, 5 Nov 2026).
   Every link keeps its own 36 px; the 20 px rhythm stays as it looks today. */
.rnav.main > a { flex: none; }
.rnav.main a { position: relative; z-index: 1; }
.rnav.main a[aria-current="page"] { background: none; }
.rlens { position: absolute; left: 0; top: 0; z-index: 0; width: var(--lw, 0); height: var(--lh, 36px); transform: translateY(var(--ly, 0)); box-sizing: border-box;
  border-radius: 10px; border: 1px solid transparent; background: var(--lens-fill) padding-box, var(--lens-rim) border-box; box-shadow: var(--lens-depth);
  pointer-events: none; opacity: 0;
  /* One glide (4 Nov 2026): the two-step reach read as a jolt. Width is left out on purpose: folding the rail resizes the
     link every frame and a width transition made the lens trail behind it. */
  transition: transform .5s var(--glide), height .5s var(--glide), opacity .2s ease; }
:root { --glide: cubic-bezier(.32,.72,0,1); }
.rlens.on { opacity: 1; }
/* While it travels the lens flexes a little along the way it moves, like a drop of liquid, and settles back round. */
.rlens.flex { animation: rlflex .5s var(--glide); }
@keyframes rlflex { 0% { scale: 1 1; } 35% { scale: .965 1.1; } 100% { scale: 1 1; } }
@media (prefers-reduced-motion: reduce) { .rlens { transition: opacity .2s ease; } .rlens.flex { animation: none; } }
/* Hover on the rail (4 Nov 2026): a faint sheet of the same glass as the lens, never a flat grey fill. */
:root { --rail-hover: linear-gradient(180deg, rgba(127,163,214,.09), rgba(74,111,165,.04)); --rail-hover-rim: inset 0 0 0 1px rgba(160,190,235,.09), inset 0 1px 0 rgba(200,220,255,.10); }
:root[data-theme="light"] { --rail-hover: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.34)); --rail-hover-rim: inset 0 0 0 1px rgba(255,255,255,.95), 0 1px 2px rgba(30,40,60,.05), 0 6px 14px -6px rgba(30,40,60,.12); }
.rnav.main a { transition: background .25s ease, box-shadow .25s ease, color .2s ease, padding .5s var(--glide); }
.rnav.main a:hover { background: var(--rail-hover); box-shadow: var(--rail-hover-rim); }
.rnav.main a[aria-current="page"], .rnav.main a[aria-current="page"]:hover { background: none; box-shadow: none; }

/* Connect an AI app (3 Nov 2026): the address leads, large, with the one blue action; the steps follow, short. */
.lead-ai { margin: 0 0 14px; font-size: 14px; }
.copy--big { height: 52px; }
.copy--big code { font-size: 15px; }
.steps--ai { margin-top: 18px; }
.steps--ai li { align-content: start; } /* titles line up when one description wraps */

/* Your tools rows (3 Nov 2026, as in the app): icon, name and line, state, an optional Sign in, the arrow. */
.tline { grid-template-columns: 36px minmax(0, 1fr) auto auto 12px; gap: 14px; }
.tl-chev { width: 12px; height: 12px; fill: none; stroke: var(--faint); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Memory (proposal B, 5 Nov 2026): one panel that scrolls inside itself, rows not chips, a detail panel beside it. */
.mem-main { grid-column: 1 / 13; overflow: hidden; padding-bottom: 12px; }
.mem-main.with-det { grid-column: 1 / 9; }
.mem-main.over { box-shadow: var(--panel-shadow), inset 0 0 0 2px var(--acc); }
.mem-main > .field.search { margin: 0 0 6px; }
.mem-h { margin: 14px 0 2px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.mem-list { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -22px; padding: 0 22px; }
.mem-row { width: 100%; text-align: left; background: none; border-left: 0; border-right: 0; border-bottom: 0; font: inherit; cursor: pointer; min-height: 56px; padding: 10px 0; }
.mem-row .t { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mem-row:hover .t, .mem-row.sel .t { color: var(--acc); }
.mem-chk { flex: none; font-size: 12px; color: var(--warn); }
.mem-call { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.mem-call p { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; color: var(--body); }
.mem-call b { color: var(--ink); font-weight: 500; }
.mem-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.mem-rail { display: flex; gap: 10px; overflow-x: auto; padding: 6px 0 4px; scrollbar-width: none; }
.mem-rail::-webkit-scrollbar { display: none; }
.mem-topic { flex: none; width: 200px; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; text-align: left; font: inherit; border: 1px solid var(--line); border-radius: 14px; background: none; cursor: pointer; }
.mem-topic:hover { background: var(--panel-hover); }
.mem-topic b { font-size: 14px; font-weight: 500; color: var(--ink); }
.mem-topic span { font-size: 13px; line-height: 18px; color: var(--body); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mem-topic small { font-size: 12px; color: var(--faint); }
.mem-person { flex: none; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 6px; font: inherit; font-size: 12px; color: var(--body); background: none; border: 0; cursor: pointer; }
.mem-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--field); color: var(--ink); font-size: 14px; font-weight: 500; }
.mem-person:hover .mem-av { background: var(--panel-hover); }
.mem-det { grid-column: 9 / 13; padding-bottom: 16px; }
.mem-det-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mem-big { font-size: 17px; line-height: 25px; color: var(--ink); }
.mem-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 16px 0 0; font-size: 13px; }
.mem-dl dt { color: var(--faint); }
.mem-dl dd { margin: 0; color: var(--body); }
.mem-acts { display: flex; gap: 8px; margin-top: auto; padding-top: 18px; }
.btn.mem-del { color: var(--danger); }
.mem-full { grid-column: 1 / 13; }
@media (max-width: 900px) {
  .mem-main.with-det, .mem-det { grid-column: 1 / 13; }
  .mem-list { margin: 0 -16px; padding: 0 16px; }
}
.mem-person { width: 76px; }
.mem-pn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tell it something lives in the + launcher since 10 Nov 2026 (launcher.css); its slide-out styles are gone with it. */
.mem-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 4px 0 2px; }
.mem-kind { height: 44px; padding: 0 14px; text-align: left; font: inherit; font-size: 14px; font-weight: 500; color: var(--ink); background: var(--field); border: 0; border-radius: 12px; cursor: pointer; }
.mem-kind:hover { background: var(--panel-hover); }
.mem-back { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13px; }
.mem-h:has(.mem-back) { display: flex; align-items: baseline; }
@media (max-width: 640px) { .mem-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mem-delrow { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; margin-top: 8px; padding: 0; font: inherit; font-size: 14px; color: var(--body); background: none; border: 0; border-top: 1px solid var(--line); cursor: pointer; }
.mem-delrow .n { color: var(--faint); font-variant-numeric: tabular-nums; }
.mem-delrow:hover span:first-child { color: var(--acc); }
.mem-list .mem-row .btn { flex: none; }

/* ---------- Connectry glass pass (11 Nov 2026, Fabian: "it feels pretty non glass", light and dark) ----------
   Why it read flat: in light the veil washed the ground to one pale grey, and near-opaque white panels sat on it.
   Glass needs light behind it to bend (brand system 6, Blooms): so the ground gets its two blooms back, blue high on
   the right and warm low on the left, the rail and the stage let them through, and panels are the ground plate of
   the Connectry glass: a thin white tint, a rim lit from above, depth under the lip, a soft long shadow.
   No blur on panels: over a soft ground there is nothing sharp to soften, and it would cost every page switch. */
:root[data-theme="light"] .ambient {
  background:
    radial-gradient(62vmax 62vmax at 96% -4%, rgba(104,142,198,.30), transparent 70%),
    radial-gradient(54vmax 54vmax at -2% 92%, rgba(242,190,150,.26), transparent 70%),
    linear-gradient(180deg, #f5f7fb, #e9edf4 52%, #e2e7ef);
}
:root[data-theme="light"] {
  --rail: rgba(255,255,255,.30);
  --stage: rgba(255,255,255,.20);
  --rim: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.55), inset 0 -1px 0 rgba(26,26,26,.05);
  --panel: linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.52));
  --panel-shadow: inset 0 1px 0 #fff, inset 0 10px 14px -12px #fff, inset 0 0 0 1px rgba(255,255,255,.60), inset 0 -1px 0 rgba(26,26,26,.06), 0 24px 48px -26px rgba(30,40,60,.30), 0 2px 6px rgba(30,40,60,.05);
}
:root:not([data-theme="light"]) {
  --rim: inset 0 1px 0 rgba(255,255,255,.13), inset 0 0 0 1px rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.30);
  --panel: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.028) 62%);
  --panel-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 10px 14px -12px rgba(255,255,255,.10), inset 0 0 0 1px rgba(255,255,255,.06), inset 0 -8px 12px -10px rgba(0,0,0,.35), 0 24px 48px -24px rgba(0,0,0,.62), 0 2px 6px rgba(0,0,0,.22);
}

/* ---------- Alignment pass (11 Nov 2026, audit of every page) ---------- */
/* A row whose control cannot shrink (a segment) lets it drop under the words instead of squeezing them to one word a line. */
.row:has(> .seg) { flex-wrap: wrap; row-gap: 10px; }
.row:has(> .seg) > .grow, .row:has(> .seg) > .kk { flex: 1 1 160px; }
.row > .seg { max-width: 100%; }
/* An address breaks after the @, never inside a word. */
.big.mail { overflow-wrap: normal; word-break: normal; font-size: clamp(18px, 1.55vw, 24px); }
/* The + floats over the bottom right corner: a page's last line and its foot keep clear of it. */
.sh-foot { padding-right: 76px; }

/* Memory (11 Nov 2026): the kinds as one row of tonal tiles with their mark, rows led by the same mark, a lens on
   hover instead of a colour change. Inside a glass panel these are wells, never a second sheet of glass. */
.mk-ic { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: var(--acc); background: var(--tint); box-shadow: inset 0 0 0 1px var(--tint-line); }
.mk-ic.sm { width: 32px; height: 32px; border-radius: 10px; color: var(--muted); background: var(--field); box-shadow: inset 0 0 0 1px var(--line); }
.mem-kinds { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 6px 0 4px; }
.mem-kind { height: auto; min-height: 88px; padding: 12px 14px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 10px; border-radius: 16px; border: 1px solid transparent; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); transition: background .16s ease, box-shadow .16s ease, transform .2s var(--ease-arrive); }
.mem-kind:hover { background: var(--lens-fill) padding-box, var(--lens-rim) border-box; box-shadow: var(--lens-depth); }
.mem-kind:active { transform: scale(.98); }
.mem-main > .field.search { height: 44px; font-size: 15px; }
.mem-row { gap: 14px; margin: 0 -10px; width: calc(100% + 20px); padding: 10px; border-radius: 14px; border-top-color: transparent; box-shadow: 0 -1px 0 var(--line); transition: background .15s ease; }
.facts > .mem-row:first-child { box-shadow: none; }
.mem-row:hover, .mem-row.sel { background: var(--panel-hover); }
.mem-row:hover .mk-ic, .mem-row.sel .mk-ic { color: var(--acc); background: var(--tint); box-shadow: inset 0 0 0 1px var(--tint-line); }
.mem-topic { border-radius: 16px; background: var(--field); border-color: transparent; box-shadow: inset 0 0 0 1px var(--line); transition: background .16s ease, box-shadow .16s ease; }
.mem-topic:hover { background: var(--lens-fill) padding-box, var(--lens-rim) border-box; box-shadow: var(--lens-depth); }
@media (max-width: 900px) { .mem-kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* A segment inside a key and value row drops under its label when the pane is narrow, instead of being cut. */
.kvrow:has(.seg) { flex-wrap: wrap; row-gap: 8px; }
.kvrow:has(.seg) .vv { flex: 1 1 100%; overflow: visible; }
/* A long memory (what it read from a picture or a file) shows its first lines; the rest opens on request. */
.mem-big.clamp { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.mem-big { white-space: pre-line; overflow-wrap: anywhere; }
.mem-det:has(.mem-more) .mem-big:not(.clamp) { font-size: 15px; line-height: 23px; max-height: 46vh; overflow-y: auto; }
.mem-more { align-self: flex-start; margin: 6px 0 4px; font-size: 13px; }
.mem-row .one { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; }
.mem-sum { margin-top: 6px; font-size: 15px; line-height: 22px; color: var(--body); }
.mem-read { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; line-height: 21px; color: var(--body); white-space: pre-line; overflow-wrap: anywhere; max-height: 40vh; overflow-y: auto; }
.mem-main.with-det .mem-kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mem-main.with-det .mem-kind { min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; }

/* ---------- Comp: calm content, glass only on what floats (11 Nov 2026, second pass) ----------
   One grid for every page: the sentence on the left starts on the plate's left edge, the one glass pill on the right
   ends on the plate's right edge and is centred on the sentence. Pills are 76 high, plates have a 22 radius and 20
   of padding, hairlines run the plate's full inner width. */
.calm-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 40px; min-height: 132px; padding: 0 0 28px; text-align: left; }
.ch-h { font-size: 46px; line-height: 50px; font-weight: 500; letter-spacing: -.035em; text-wrap: balance; }
.ch-h .acc { white-space: nowrap; }
.ch-s { margin-top: 10px; font-size: 17px; line-height: 26px; color: var(--body); }
.ch-pill { flex: none; display: inline-flex; align-items: center; height: 76px; padding: 8px; border-radius: 999px; border: 1px solid transparent; color: var(--ink); font: inherit; cursor: pointer; text-align: left;
  background: var(--lens-fill) padding-box, var(--lens-rim) border-box; -webkit-backdrop-filter: blur(14px) saturate(1.7); backdrop-filter: blur(14px) saturate(1.7);
  box-shadow: var(--lens-depth), 0 22px 44px -22px rgba(20,30,50,.40); transition: transform .25s var(--ease-arrive), box-shadow .25s ease; }
button.ch-pill:hover { transform: translateY(-1px); box-shadow: var(--lens-depth), 0 28px 54px -22px rgba(20,30,50,.48); }
button.ch-pill:active { transform: scale(.985); }
.ch-dock { gap: 4px; cursor: default; }
.ch-dock a { position: relative; width: 60px; height: 60px; border-radius: 999px; display: grid; place-items: center; transition: transform .22s var(--ease-arrive), background .16s ease; }
.ch-dock a:hover { transform: translateY(-3px) scale(1.06); background: var(--field); }
.ch-dock a.need::after { content: ""; position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; border-radius: 999px; background: #c8792b; box-shadow: 0 0 0 2px var(--bg); }
.ch-dock .ch-add { width: 60px; height: 60px; margin-left: 4px; border-radius: 999px; border: 0; display: grid; place-items: center; background: var(--ink); color: var(--bg); font-size: 26px; font-weight: 300; line-height: 1; cursor: pointer; transition: transform .2s var(--ease-arrive); }
.ch-dock .ch-add:hover { transform: scale(1.05); }
.ch-year { gap: 14px; padding-right: 22px; --x-cool: #4a6fa5; --x-warm: #c98d5b; --x-ring0: rgba(26,26,26,.08); --x-ink: var(--ink); --x-mut: var(--muted); }
:root:not([data-theme="light"]) .ch-year { --x-cool: #8fb0e6; --x-warm: #e0a878; --x-ring0: rgba(255,255,255,.10); }
.ch-year svg.ixy-ring { width: 60px; height: 60px; }
.ch-year svg.ixy-ring text { display: none; }
.ch-year svg.ixy-ring .ixy-sec path { stroke-width: 7; }
.ch-year .ch-pt { padding-left: 14px; }
.ch-year svg.ixy-ring + .ch-pt { padding-left: 0; }
.ch-pt { display: grid; gap: 1px; }
.ch-pt b { font-size: 16px; line-height: 22px; font-weight: 500; letter-spacing: -.01em; }
.ch-pt small { font-size: 13px; line-height: 18px; color: var(--muted); }
.ch-chev { width: 12px; height: 12px; margin-left: 6px; fill: none; stroke: var(--faint); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ch-seg { height: 52px; padding: 5px; border-radius: 999px; border: 1px solid transparent; background: var(--lens-fill) padding-box, var(--lens-rim) border-box; box-shadow: var(--lens-depth), 0 18px 40px -22px rgba(20,30,50,.40); }
.ch-seg button { height: 40px; padding: 0 18px; border-radius: 999px; font-size: 14px; }

/* The one plate. */
.quiet .tpanel.tov, .quiet .tlp, .quiet .facts.mem-list, .quiet.today .needs { border-radius: 22px; }
/* Tools: the email line is a slim row above the list; the side column is words on the ground. */
.quiet .mhero { padding: 12px 16px 12px 18px; gap: 16px; border-radius: 18px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); }
.quiet .mhero::after { display: none; }
.quiet .mhero p { display: none; }
.quiet .mhero h2, .quiet .mhero h3 { font-size: 16px; line-height: 22px; margin: 0; }
.quiet .aside .blk, .quiet.today > .blk.c4 { background: none; box-shadow: none; border-radius: 0; padding: 0 2px 20px; border-bottom: 1px solid var(--line); }
.quiet .aside .blk:last-child { border-bottom: 0; }
.quiet .aside .sect h2, .quiet.today > .blk.c4 .sect h2, .quiet.today > .blk.c8:not(.needs) .sect h2 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.quiet.today > .blk.c8:not(.needs) { background: none; box-shadow: none; border-radius: 0; padding: 0 2px; }
.quiet.today > .blk.c4 { border-bottom: 0; }

/* Memory: search and the kinds are controls, so they are glass and share one width; what it knows is the plate. */
.quiet .mem-main { background: none; box-shadow: none; padding: 0; overflow: visible; display: flex; flex-direction: column; }
.quiet .mem-main > .field.search { height: 52px; border-radius: 999px; padding: 0 22px 0 50px; border: 1px solid transparent; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='%238a8a90' stroke-width='2'/%3E%3Cpath d='M20 20l-4-4' stroke='%238a8a90' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 22px 50% no-repeat padding-box, var(--lens-fill) padding-box, var(--lens-rim) border-box; box-shadow: var(--lens-depth), 0 18px 40px -22px rgba(20,30,50,.36); font-size: 16px; }
.quiet .mem-h { display: none; }
.quiet .mem-kinds { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; margin: 12px 0 16px; padding: 4px; border-radius: 999px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); }
.quiet .mem-kind { min-height: 0; height: 40px; flex-direction: row; align-items: center; justify-content: center; gap: 8px; padding: 0 10px; border-radius: 999px; background: none; box-shadow: none; font-size: 14px; }
.quiet .mem-kind .mk-ic { width: 20px; height: 20px; border-radius: 0; background: none; box-shadow: none; }
.quiet .mem-kind:hover { background: var(--lens-fill) padding-box, var(--lens-rim) border-box; box-shadow: var(--lens-depth); }
.quiet .mem-main .facts.mem-list { margin: 0; width: auto; padding: 4px 20px; overflow: hidden; background: var(--panel); box-shadow: var(--panel-shadow); }
.quiet .mem-row { margin: 0; width: 100%; padding: 14px 0; border-radius: 0; box-shadow: none; border-top: 1px solid var(--line); }
.quiet .facts > .mem-row:first-child { border-top: 0; }
.quiet .mem-row:hover, .quiet .mem-row.sel { background: none; }
.quiet .mem-row:hover .t { color: var(--acc); }
/* second pass, alignment: every page's content starts on the same line; no card inside the plate; one way to add a tool */
.calm-hero { min-height: 164px; }
.quiet .tl-card { background: none; box-shadow: none; border-radius: 0; padding: 12px 0; border-bottom: 1px solid var(--line); }
.quiet .tl-item:last-child .tl-card { border-bottom: 0; }
.quiet .tl-card:hover { background: none; transform: none; }
.quiet .tl-card:hover .t { color: var(--acc); }
.quiet .tov [data-act="toolstab"][data-t="add"] { display: none; }
/* origin motion: things give under the press */
.cflow.leaving { transition-duration: .3s; }
.ch-dock a:active { transform: scale(.92); }
.quiet .mem-row { transition: transform .18s var(--ease-arrive); }
.quiet .mem-row:active { transform: scale(.992); }
.quiet .tov .row:active, .quiet .tl-card:active { transform: scale(.995); }
/* calm Memory keeps every label and its way back ("All of Memory"); only the "By kind" label goes, the switcher says it */
.quiet .mem-h { display: flex; align-items: center; justify-content: space-between; margin: 4px 2px 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.quiet .mem-h .link { text-transform: none; letter-spacing: 0; font-size: 13px; }
.quiet .mem-h:has(+ .mem-kinds) { display: none; }
/* with a memory open the switcher stays one row: icons only, the words stay for screen readers */
.quiet .mem-main.with-det .mem-kinds { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.quiet .mem-main.with-det .mem-kind { justify-content: center; padding: 0; }
.quiet .mem-main.with-det .mem-kind > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Opened from a press: the full-window blur is the costly part (frame time halves without it), so it stays off while
   the panel travels and settles in once the panel is still. */
.cflow.from-tap { -webkit-backdrop-filter: none; backdrop-filter: none; }
.cflow.from-tap::before { content: ""; position: absolute; inset: 0; z-index: -1; -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); opacity: 0; transition: opacity .32s ease; pointer-events: none; }
.cflow.from-tap.settled::before { opacity: 1; }
.cflow.from-tap .cf-shell { will-change: transform, opacity; }
.cflow.from-tap.leaving::before { transition: none; opacity: 0; }
/* every page leads the same way: a pill without a ring keeps its inset; two plain buttons sit as a pair */
.ch-acts { display: flex; gap: 8px; align-items: center; }
.ch-year:not(:has(svg.ixy-ring)) { padding-left: 14px; }
/* the search pill's shadow was cut square by its clipping column; the column no longer clips (11 Nov 2026) */
.sheet.quiet .wide.mem-main, main.fit .sheet.quiet .sh-body > .wide.mem-main { overflow: visible; }
.quiet .mem-kind[aria-pressed="true"] { background: var(--lens-fill) padding-box, var(--lens-rim) border-box; box-shadow: var(--lens-depth); color: var(--ink); }
.quiet .mem-kind { transition: background .18s ease, box-shadow .18s ease, transform .18s var(--ease-arrive); }
.quiet .mem-kind:active { transform: scale(.97); }
.ch-year svg.ring0 { color: var(--ink); }
.quiet .facts.mem-list > .fine { padding: 18px 0; }

/* ---------- Calm content, leftovers (11 Nov 2026) ---------- */
/* Views leads like every other page. */
.vx-page .vx-head { min-height: 164px; padding-bottom: 28px; align-items: center; }
.vx-page .vx-head .h1 { font-size: 46px; line-height: 50px; font-weight: 500; letter-spacing: -.035em; }
.vx-page .vx-head .lead { margin-top: 10px; font-size: 17px; line-height: 26px; }
@media (min-width: 761px) {
  /* A list that runs on fades out at the plate's edge; it is never cut mid-row. */
  .quiet .tov .tscroll, .quiet .mem-main .facts.mem-list { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent); padding-bottom: 30px; }
  .quiet .aside .tscroll { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent); padding-bottom: 24px; }
  /* The + has its own line at the foot of the page, as Activity's Export line already gives it: nothing sits under it. */
  main.fit .sheet.quiet:not(:has(.sh-foot)) { padding-bottom: 56px; }
  .today.quiet { padding-bottom: 88px; }
}
@media (max-width: 760px) {
  /* Phone width: the sentence, then its pill under it; nothing overlaps (the first pass put the pill on the words). */
  .calm-hero { grid-template-columns: minmax(0, 1fr); row-gap: 18px; min-height: 0; padding-bottom: 20px; }
  .ch-h { font-size: 34px; line-height: 38px; }
  .ch-s { font-size: 16px; line-height: 24px; }
  .ch-pill { height: 64px; max-width: 100%; justify-self: start; }
  .ch-dock { overflow-x: auto; scrollbar-width: none; }
  .ch-dock { gap: 0; }
  .ch-dock a, .ch-dock .ch-add { flex: none; width: 44px; height: 44px; }
  .ch-dock .ch-add { margin-left: 2px; }
  .ch-year svg.ixy-ring { width: 48px; height: 48px; }
  .ch-seg { justify-self: start; }
  .ch-acts { flex-wrap: wrap; }
  .quiet .mem-kinds, .quiet .mem-main.with-det .mem-kinds { display: flex; overflow-x: auto; scrollbar-width: none; }
  .quiet .mem-kind { flex: none; padding: 0 14px; white-space: nowrap; }
  .quiet .mem-row { flex-wrap: nowrap; gap: 14px; text-align: left; }
  .quiet .mem-row .grow { min-width: 0; }
  .quiet .tl-card { flex-wrap: wrap; row-gap: 6px; }
  .quiet .tl-card .grow { flex: 1 1 calc(100% - 60px); }
  .vx-page .vx-head { min-height: 0; padding-bottom: 20px; }
  .vx-page .vx-head .h1 { font-size: 34px; line-height: 38px; }
}
@media (max-width: 760px) {
  /* room for the + beside the bar; the iPhone app has its own bar and + */
  html:not(.cx-app) .bottom-tabs { right: 84px; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px 4px; }
  html:not(.cx-app) .bottom-tabs a { min-width: 0; }
}
/* Memory while it opens: the rows are there as quiet shapes */
.mem-list.sk .mem-row { pointer-events: none; }
.sk-ic { flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--field); }
.sk-l { display: block; height: 12px; width: 46%; border-radius: 6px; background: linear-gradient(90deg, var(--field) 0%, var(--line) 50%, var(--field) 100%); background-size: 200% 100%; animation: skl 1.4s ease-in-out infinite; }
.sk-l.s { width: 22%; height: 10px; margin-top: 8px; opacity: .7; }
.mem-list.sk .mem-row:nth-child(2) .sk-l:first-child { width: 58%; } .mem-list.sk .mem-row:nth-child(3) .sk-l:first-child { width: 38%; } .mem-list.sk .mem-row:nth-child(4) .sk-l:first-child { width: 52%; }
@keyframes skl { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .sk-l { animation: none; } }
.quiet .mem-kind[disabled] { opacity: .55; }
/* A picture kept in Memory shows as the picture; pressing it opens the original. */
.mem-pic { display: block; width: 100%; max-height: 260px; margin: 2px 0 14px; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); cursor: zoom-in; }
.mem-pic img { display: block; width: 100%; height: 100%; max-height: 260px; object-fit: cover; }
.mem-pic.sk { height: 180px; cursor: default; background: linear-gradient(90deg, var(--field) 0%, var(--line) 50%, var(--field) 100%); background-size: 200% 100%; animation: skl 1.4s ease-in-out infinite; }
.mem-open { margin: 10px 0 2px; }
@media (prefers-reduced-motion: reduce) { .mem-pic.sk { animation: none; } }
.mem-det { overflow-y: auto; scrollbar-width: none; }
.mem-det > * { flex: none; }
.mem-det .mem-acts { margin-top: auto; }
.mem-pic, .mem-pic img { max-height: 210px; }

/* ---------- Today: glass cards that open a briefing, and the bell (11 Nov 2026, Fabian) ----------
   One card shape for any topic: a photograph of ours, and on its lower third a dark plate (white 15 to 5 percent over
   graphite) carrying what the brain keeps. The card is dark in both themes because it sits on a photograph. */
.td { --td-ease: cubic-bezier(.2,.7,.2,1); }
.td .calm-hero { min-height: 0; padding-bottom: 26px; }
.td-cards { flex: 1 1 auto; min-height: 340px; max-height: 560px; display: grid; grid-auto-flow: column;
  /* three across on a wide window; on a narrower one a card keeps a width its words fit in and the row scrolls */
  grid-auto-columns: max(272px, calc((100% - 40px) / 3)); gap: 16px;
  /* a scrolling row clips what leaves it, so the room for each card's shadow and its lift on hover is inside the row */
  padding: 8px 4px 48px; margin: -8px -4px -36px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; scrollbar-width: none; overscroll-behavior-x: contain; }
.td-cards::-webkit-scrollbar { display: none; }
.td-card { position: relative; isolation: isolate; height: 100%; min-width: 0; padding: 0; border: 0; border-radius: 28px; overflow: hidden; background: #18191d; color: #fff; font: inherit; text-align: left; cursor: pointer; scroll-snap-align: start;
  /* the shadow falls straight down and stays narrower than the card, so the row never cuts it off at its sides */
  box-shadow: 0 1px 2px rgba(20,26,40,.14), 0 18px 26px -16px rgba(20,26,40,.42), 0 34px 40px -30px rgba(20,26,40,.5); transition: transform .4s var(--td-ease), box-shadow .4s ease; }
.td-card:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(20,26,40,.14), 0 24px 30px -16px rgba(20,26,40,.46), 0 42px 44px -30px rgba(20,26,40,.56); }
.td-card:active { transform: scale(.985); transition-duration: .15s; }
.td-card:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
/* until its picture has arrived a card holds its shape with a slow sheen, then the picture settles in */
.td-card::before, .td-pic::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, #1b1c21 30%, #2a2c34 50%, #1b1c21 70%) 0 0 / 220% 100%; animation: td-sheen 1.8s linear infinite; }
.td-card:has(.td-img.in)::before, .td-pic:has(.td-img.in)::before { animation: none; }
@keyframes td-sheen { to { background-position: -220% 0; } }
.td-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; opacity: 0; transform: scale(1.04); transition: opacity .7s ease, transform 1.4s var(--td-ease); }
.td-img.in { opacity: 1; transform: none; }
.td-card:hover .td-img.in { transform: scale(1.03); }
.td-glass { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-direction: column; padding: 18px 18px 16px; border-radius: 20px;
  background: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.05)), rgba(24,25,29,.42); -webkit-backdrop-filter: blur(9px) saturate(1.7) brightness(1.04); backdrop-filter: blur(9px) saturate(1.7) brightness(1.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.20), inset 0 1px 0 rgba(255,255,255,.42), inset 0 9px 12px -9px rgba(255,255,255,.22), inset 0 -18px 28px -22px rgba(0,0,0,.5), 0 10px 26px rgba(0,0,0,.30); }
.td-label { display: block; font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-h { display: block; margin: 8px 0 0; font-size: 24px; line-height: 29px; font-weight: 500; letter-spacing: -.03em; text-wrap: balance; color: #fff; }
.td-h .acc { color: #b7cff0; }
.td-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 4px 0 0; font-size: 14px; line-height: 20px; color: rgba(255,255,255,.84); }
.td-rows { display: block; margin-top: 12px; }
.td-rows:empty { display: none; }
.td-row { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.16); }
.td-row:last-child { padding-bottom: 0; }
.td-row .k { flex: none; width: 78px; font-size: 13px; line-height: 19px; color: rgba(255,255,255,.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-row .v { flex: 1; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; font-size: 14px; line-height: 19px; font-weight: 500; }
.td-row.sk { align-items: center; height: 38px; padding: 0; }
.td-row.sk .k, .td-row.sk .v { height: 9px; border-radius: 99px; background: rgba(255,255,255,.18); animation: td-pulse 1.4s ease-in-out infinite; }
.td-row.sk .k { width: 46px; } .td-row.sk .v { flex: 0 1 62%; }
@keyframes td-pulse { 50% { opacity: .45; } }
/* a thing and its value: the thing leads, its value sits at the right; a file's line goes under its name */
.td-row.pair .k { width: auto; max-width: 46%; text-align: right; }
.td-row.pair.stack { flex-direction: column; align-items: stretch; gap: 1px; }
.td-row.pair.stack .k { max-width: 100%; text-align: left; }
/* every plate has the same height, so the cards in a row line up: two lines of headline, two of text, two rows */
.td-card .td-h { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 58px; }
.td-card .td-line { min-height: 40px; }
.td-card .td-rows, .td-card .td-rows:empty { display: block; min-height: 76px; }
.td-row.pair.stack .k { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; }
/* a first step carries its own action at the foot of the plate */
.td-card.step { cursor: default; }
.td-card.step:hover { transform: none; }
.td-card.step .td-rows { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.td-card.step .td-row { border-top: 0; padding: 0; }
.td-card.step .td-row .v { font-weight: 400; color: rgba(255,255,255,.84); }
.td-card.step .td-btn { flex: none; align-self: flex-start; height: 40px; padding: 0 18px; font-size: 14px; }
.td-dots { flex: none; display: flex; justify-content: center; gap: 6px; padding: 16px 0 2px; }
.td-dots[hidden] { display: none; }
.td-dots i { width: 6px; height: 6px; border-radius: 99px; background: var(--ink); opacity: .22; transition: width .42s var(--td-ease), opacity .42s ease; }
.td-dots i.on { width: 18px; opacity: .9; }
/* the briefing */
.td-scrim { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: rgba(14,16,20,.40); animation: td-fade .32s ease both; }
.td-scrim.leaving { animation: td-out .28s ease both; }
@keyframes td-fade { from { background: rgba(14,16,20,0); } }
@keyframes td-out { to { background: rgba(14,16,20,0); } }
.td-brief { position: relative; width: min(940px, 100%); height: min(580px, 100%); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); border-radius: 30px; overflow: hidden; background: #18191d; color: #fff; box-shadow: 0 2px 6px rgba(10,14,24,.3), 0 40px 100px -20px rgba(10,14,24,.62); }
.td-pic { position: relative; isolation: isolate; display: block; min-height: 0; }
.td-body { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 46px 44px 36px; overflow: auto; scrollbar-width: none; }
.td-body .td-h { margin-top: 12px; font-size: 40px; line-height: 44px; letter-spacing: -.035em; }
.td-body .td-line { -webkit-line-clamp: 4; margin-top: 10px; font-size: 17px; line-height: 26px; }
.td-body .td-rows { margin-top: 22px; }
.td-body .td-row { padding: 13px 0; }
.td-body .td-row .k { width: 96px; line-height: 22px; }
.td-body .td-row .v { -webkit-line-clamp: 3; font-size: 16px; line-height: 22px; }
.td-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 24px; }
.td-btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 22px; border: 0; border-radius: 999px; color: #fff; font: inherit; font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer; transition: transform .2s var(--td-ease), filter .2s ease; }
.td-btn:hover { filter: brightness(1.08); } .td-btn:active { transform: scale(.97); }
.td-btn.acc { background: #4a6fa5; }
.td-btn.gl { background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); }
.td-x { position: absolute; top: 18px; right: 18px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 999px; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.20); color: #fff; cursor: pointer; }
.td-x:hover { background: rgba(255,255,255,.2); }
.td-x.sm { position: static; width: 30px; height: 30px; background: var(--field); box-shadow: none; color: var(--ink); }
/* the bell, in the top bar on every page */
.icon-btn.bell { position: relative; }
.icon-btn.bell.has::after { content: ''; position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 99px; background: #a85f1c; box-shadow: 0 0 0 2px var(--panel); }
.bell-pop { position: fixed; top: var(--top, 64px); right: var(--right, 20px); z-index: 55; width: min(384px, calc(100vw - 24px)); max-height: calc(100vh - var(--top, 64px) - 24px); overflow: auto; scrollbar-width: none; padding: 16px 18px 18px; border-radius: 26px; border: 1px solid transparent; color: var(--ink);
  background: var(--lens-fill) padding-box, var(--lens-rim) border-box; -webkit-backdrop-filter: blur(18px) saturate(1.7); backdrop-filter: blur(18px) saturate(1.7); box-shadow: var(--lens-depth), 0 30px 70px -20px rgba(20,26,40,.46); }
.bell-pop .td-label { color: var(--muted); }
.bell-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 30px; }
.bell-row { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.bell-t { display: flex; align-items: flex-start; gap: 10px; }
.bell-t .t { font-size: 15px; line-height: 20px; font-weight: 500; }
.bell-t .s { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--muted); }
.bell-a { display: flex; align-items: center; gap: 8px; }
.bell-a .btn { border-radius: 999px; }
.bell-a .fine { text-align: right; }
.bell-none { margin-top: 10px; font-size: 14px; line-height: 20px; color: var(--body); }
/* Today and the view beside it: one glass switch at the right of the top bar, next to the bell */
/* centered in the bar (12 Nov 2026, Fabian); "Open Today here" sits at the right with the bell, the same height and glass */
.bar:has(.tt-tabs) { position: relative; }
.bar .tt-first { margin-left: auto; height: 32px; padding: 0 14px; border: 1px solid transparent; background: var(--lens-fill) padding-box, var(--lens-rim) border-box; box-shadow: var(--lens-depth); color: var(--muted); }
.bar .tt-first.on { color: var(--acc); background: var(--lens-fill) padding-box, var(--lens-rim) border-box; box-shadow: var(--lens-depth), inset 0 0 0 1px color-mix(in srgb, var(--acc) 45%, transparent); }
.bar .tt-first ~ .right { margin-left: 4px; }
.bar .tt-tabs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; height: 40px; padding: 4px; gap: 0; border: 1px solid transparent; background: var(--lens-fill) padding-box, var(--lens-rim) border-box; box-shadow: var(--lens-depth); }
.bar .tt-tabs .tt-tab { height: 30px; }
.bar .tt-tab[aria-current="page"] { animation: tt-in .44s cubic-bezier(.2,.7,.2,1); }
.bar .tt-tab:first-child[aria-current="page"] { --tt-from: 36%; }
@keyframes tt-in { from { transform: translateX(var(--tt-from, -36%)); opacity: .4; } }
@media (max-width: 760px) {
  .td .calm-hero { padding-bottom: 18px; }
  /* a centered carousel: the card in the middle, its neighbours showing at both sides */
  .td-cards { --w: min(314px, 80vw); grid-auto-columns: var(--w); gap: 12px; min-height: 380px; max-height: 560px; margin-inline: -16px; padding-inline: calc((100vw - var(--w)) / 2); scroll-padding-inline: 0; }
  .td-card { scroll-snap-align: center; }
  .td-card:hover { transform: none; }
  .td-scrim { padding: 0; }
  .td-brief { display: block; width: 100%; height: 100%; border-radius: 0; }
  .td-pic { position: absolute; inset: 0; }
  .td-body { position: absolute; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-height: 72%; padding: 20px 20px 18px; border-radius: 24px;
    background: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.05)), rgba(24,25,29,.46); -webkit-backdrop-filter: blur(9px) saturate(1.7) brightness(1.04); backdrop-filter: blur(9px) saturate(1.7) brightness(1.04);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.20), inset 0 1px 0 rgba(255,255,255,.42), inset 0 -18px 28px -22px rgba(0,0,0,.5), 0 10px 26px rgba(0,0,0,.30); }
  .td-body .td-h { margin-top: 8px; font-size: 28px; line-height: 33px; }
  .td-body .td-line { font-size: 15px; line-height: 22px; }
  .td-body .td-rows { margin-top: 14px; } .td-body .td-row { padding: 10px 0; } .td-body .td-row .k { width: 78px; } .td-body .td-row .v { font-size: 15px; line-height: 20px; }
  .td-acts { padding-top: 16px; } .td-btn { flex: 1; padding: 0 16px; }
  .td-x { top: calc(14px + env(safe-area-inset-top)); right: 14px; width: 44px; height: 44px; background: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.05)), rgba(24,25,29,.42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .bell-pop { left: 12px; right: 12px; width: auto; }
  /* a phone's bar is narrow: with the switch in it, the wordmark gives way to the mark and the bar keeps bell and account */
  .bar .tt-tabs .tt-tab { padding: 0 10px; } .bar .tt-tab span { max-width: 92px; } .bar .tt-tabs .tt-add, .bar .tt-first { display: none; } .bar .tt-first ~ .right { margin-left: auto; }
  .bar:has(.tt-tabs) .mbrand { flex: none; width: 20px; overflow: hidden; } .bar:has(.tt-tabs) .mbrand img { max-width: none; }
  .bar:has(.tt-tabs) .right { gap: 6px; } .bar:has(.tt-tabs) .right [data-act="theme-flip"], .bar:has(.tt-tabs) .right [data-act="cmdk"] { display: none; }
}
@media (prefers-reduced-motion: reduce) { .td-card::before, .td-pic::before, .td-row.sk .k, .td-row.sk .v, .bar .tt-tab[aria-current="page"] { animation: none; } .td-img { transition: none; transform: none; } .td-card, .td-card:hover { transition: none; transform: none; } }

/* Work journal in Activity (12 Nov 2026): episodes on the left, the open one on the right, the switch beside the filter. */
.jr-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.jr-sw { display: inline-flex; align-items: center; gap: 12px; height: 40px; padding: 0 8px 0 16px; border-radius: 999px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 500; color: var(--ink); }
.jr-card { flex-direction: column; align-items: stretch; gap: 0; }
.jr-head { display: flex; align-items: center; gap: 14px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.jr-chev { display: grid; place-items: center; color: var(--faint); transform: rotate(-90deg); transition: transform .25s var(--ease-arrive); }
.jr-item.open .jr-chev { transform: none; }
.jr-steps { list-style: none; margin: 16px 0 0 46px; padding: 16px 0 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.jr-steps li { display: flex; gap: 14px; padding-bottom: 18px; position: relative; }
.jr-steps li:not(:last-child)::before { content: ""; position: absolute; left: 4px; top: 16px; bottom: 0; width: 2px; background: color-mix(in srgb, var(--acc) 25%, transparent); }
.jr-dot { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 999px; background: var(--acc); }
.jr-steps li.no .jr-dot { background: var(--faint); }
.jr-st { display: block; font-size: 14px; line-height: 20px; color: var(--ink); }
.jr-sm { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.jr-acts { padding: 0 0 4px 46px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.jr-off { padding: 48px 0; text-align: center; }
.jr-off-t { margin: 0 0 8px; font-size: 18px; font-weight: 500; color: var(--ink); }
.jr-none { padding: 24px 0; }
@media (max-width: 900px) { .jr-top { justify-content: flex-start; } }
.blk > .jr-tool { border-top: 0; padding-top: 0; padding-bottom: 0; }
.tl-item.jr-item { align-items: flex-start; }
.jr-item > .tl-time { padding-top: 22px; }
.jr-item > .tl-dot { margin-top: 26px; background: var(--acc); }
.jr-head .t { color: var(--ink); }

/* ---------- Today H (12 Nov 2026): one line, one picture, the rest beside it ---------- */
.td-h2 { display: flex; flex-direction: column; gap: 28px; }
.td-top { display: flex; flex-direction: column; gap: 10px; animation: td-rise .56s var(--td-ease) both; }
.td-when { font-size: 14px; line-height: 16px; font-weight: 500; color: var(--muted); }
.td-say { margin: 0; font-size: clamp(34px, 4.2vw, 52px); line-height: 1.08; font-weight: 500; letter-spacing: -.04em; text-wrap: balance; color: var(--ink); }
.td-say .acc { color: var(--acc); }
.td-grid { display: grid; grid-template-columns: min(560px, 58%) minmax(280px, 1fr); gap: 24px; align-items: start; }
.td-grid.solo { grid-template-columns: minmax(0, 640px); }
.td-hero { position: relative; isolation: isolate; height: clamp(420px, 62vh, 580px); border-radius: 32px; overflow: hidden; background: #18191d; color: #fff;
  box-shadow: 0 1px 2px rgba(20,26,40,.12), 0 24px 56px -12px rgba(20,26,40,.34); animation: td-rise .64s .09s var(--td-ease) both; }
.td-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, #1b1c21 30%, #2a2c34 50%, #1b1c21 70%) 0 0 / 220% 100%; animation: td-sheen 1.8s linear infinite; }
.td-hero:has(.td-img.in)::before { animation: none; }
.td-hero .td-img { object-position: 50% 22%; }
.td-hero:hover .td-img.in { transform: scale(1.02); }
/* the words sit on the picture: a shade from the middle down keeps them readable on a bright photo */
.td-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,10,16,0) 26%, rgba(8,10,16,.36) 52%, rgba(8,10,16,.86) 100%); pointer-events: none; }
.td-hit { position: absolute; inset: 0; z-index: 1; border: 0; background: transparent; cursor: pointer; border-radius: inherit; }
.td-hit:focus-visible { outline: 2px solid var(--acc); outline-offset: -4px; }
.td-hb { position: absolute; left: 32px; right: 32px; bottom: 30px; z-index: 2; pointer-events: none; }
.td-hb > * { pointer-events: auto; }
.td-hb .td-label, .td-hb .td-h, .td-hb .td-line { pointer-events: none; }
.td-hb .td-h { margin-top: 10px; font-size: 32px; line-height: 36px; letter-spacing: -.025em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.td-hb .td-line { margin-top: 8px; font-size: 15px; line-height: 21px; color: rgba(255,255,255,.84); }
.td-ha { display: flex; align-items: center; gap: 22px; margin-top: 20px; }
.td-btn.wh { height: 44px; padding: 0 20px; background: #fff; color: #1a1a1a; }
.td-more-t { padding: 0; border: 0; background: none; color: rgba(255,255,255,.86); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.td-more-t:hover { color: #fff; }

.td-also { animation: td-rise .56s .2s var(--td-ease) both; }
.td-cap { font-size: 14px; line-height: 16px; font-weight: 500; color: var(--muted); }
.td-also > .td-cap { padding: 18px 16px 6px; }
.td-list { display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: var(--panel); box-shadow: var(--panel-shadow); }
.td-li { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background .2s ease; }
.td-li + .td-li { box-shadow: inset 78px 0 0 transparent, 0 -1px 0 var(--panel-line); }
@media (hover: hover) { .td-li:hover { background: var(--panel-hover); } }
.td-li:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; border-radius: 16px; }
.td-th { position: relative; flex: none; width: 48px; height: 48px; border-radius: 12px; overflow: hidden; background: #24262c; }
.td-th .td-img { transform: none; }
.td-lt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.td-lt .t { font-size: 15px; line-height: 19px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-lt .s { font-size: 13px; line-height: 17px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-go { flex: none; color: var(--faint); transform: rotate(-90deg); display: grid; }
.td-pill { display: none; }
@keyframes td-rise { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .td-top, .td-hero, .td-also { animation: none; } }

/* the rest of the day, folded: a glass pill under the picture, opening a glass panel */
.td-scrim.glass { background: rgba(240,243,248,.30); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
:root[data-theme="dark"] .td-scrim.glass { background: rgba(10,11,14,.40); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .td-scrim.glass { background: rgba(10,11,14,.40); } }
.td-morep { width: min(440px, 100%); padding: 18px 10px 10px; border-radius: 30px; background: var(--pop); -webkit-backdrop-filter: blur(28px) saturate(1.8); backdrop-filter: blur(28px) saturate(1.8); box-shadow: var(--rim), var(--lift); }
.td-mh { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 10px 10px; }
.td-mh .td-x { position: static; width: 30px; height: 30px; background: var(--field); box-shadow: none; color: var(--ink); }
.td-morep .td-list { background: none; box-shadow: none; border-radius: 20px; }

@media (max-width: 900px) {
  .td-h2 { gap: 20px; }
  .td-grid, .td-grid.solo { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .td-hero { height: min(520px, 60vh); border-radius: 28px; }
  .td-ha .td-btn { flex: none; }
  .td-hb { left: 22px; right: 22px; bottom: 22px; }
  .td-hb .td-h { font-size: 28px; line-height: 32px; }
  .td-also { display: none; }
  .td-pill { display: inline-flex; align-self: center; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--pop);
    -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: var(--rim), 0 8px 22px rgba(30,40,60,.10); color: var(--ink); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; justify-self: center; }
  .td-pill span { display: grid; color: var(--muted); transform: rotate(-90deg); }
  .td-scrim.glass { place-items: end center; padding: 12px; }
  .td-morep { width: 100%; }
}

/* The Today switch (12 Nov 2026): words at the left of the bar, where a page's name sits; the page you are on in ink,
   the other one faint, a short line under the current one. No pill, nothing centered. */
.bar .tt-tabs { position: static; transform: none; height: auto; padding: 0; gap: 22px; margin: 0; border: 0; background: none; box-shadow: none; border-radius: 0; }
.bar .tt-tabs .tt-tab { position: relative; height: 32px; padding: 0; border-radius: 0; background: none; box-shadow: none; font-size: 14px; color: var(--faint); animation: none; }
.bar .tt-tabs .tt-tab:hover { color: var(--ink); }
.bar .tt-tabs .tt-tab[aria-current="page"] { color: var(--ink); background: none; box-shadow: none; animation: none; }
.bar .tt-tabs .tt-tab[aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; border-radius: 2px; background: var(--ink); opacity: .8; }
.bar .tt-tabs .tt-add { width: 26px; height: 26px; margin-left: -12px; color: var(--faint); box-shadow: none; }
.tt-put { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; margin-left: -8px; border: 0; border-radius: 999px; background: none; color: var(--faint); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: color .15s, background .15s; }
.tt-put:hover { color: var(--ink); background: var(--panel-hover); }
.bar .tt-first { margin-left: 18px; height: 28px; padding: 0 10px; border: 0; background: none; box-shadow: none; color: var(--faint); font-size: 13px; }
.bar .tt-first.on { color: var(--acc); background: none; box-shadow: none; }
.bar .tt-first ~ .right { margin-left: auto; }
@media (max-width: 760px) { .bar .tt-tabs { gap: 16px; } .tt-put span { display: none; } .bar .tt-put { display: inline-flex; } }

/* Also today is as tall as the picture beside it (12 Nov 2026, Fabian): rows share the height up to a calm row size,
   what is left stays quiet glass with one way on at the bottom */
.td-grid { align-items: stretch; }
.td-also { display: flex; flex-direction: column; }
.td-also > .td-li { flex: 1 1 auto; max-height: 104px; }
.td-foot { margin-top: auto; padding: 14px 16px 16px; border-top: 1px solid var(--panel-line); font-size: 13px; font-weight: 500; color: var(--muted); text-decoration: none; }
.td-foot:hover { color: var(--ink); }

/* Activity: one head for both parts, one quiet row under it */
.act .calm-hero { min-height: 0; padding-bottom: 22px; }
.act-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 44px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.act-tabs { display: flex; gap: 26px; align-self: stretch; }
.act-tab { position: relative; padding: 0; border: 0; background: none; color: var(--faint); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.act-tab:hover { color: var(--ink); }
.act-tab[aria-current="page"] { color: var(--ink); }
.act-tab[aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--ink); opacity: .85; }
.act-ctl { display: flex; align-items: center; }
.act-sw { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer; }
.act-fs { display: flex; gap: 4px; }
.act-f { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--faint); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: color .15s, background .15s; }
.act-f:hover { color: var(--ink); }
.act-f[aria-pressed="true"] { color: var(--ink); background: var(--field); box-shadow: inset 0 0 0 1px var(--line); }
.td-grid:has(.td-hero.step) > .td-also { align-self: start; }

/* Memory, one memory open (12 Nov 2026, board I): a pop-up over the page, shaped by what it is */
.mk-ic.th { overflow: hidden; padding: 0; background: var(--field); }
.mk-ic.th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mem-scrim { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: rgba(240,243,248,.34); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); animation: td-fade .3s ease both; }
:root[data-theme="dark"] .mem-scrim { background: rgba(10,11,14,.46); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mem-scrim { background: rgba(10,11,14,.46); } }
.mem-pop.mem-det { grid-column: auto; display: grid; grid-template-columns: minmax(0, 1fr); width: min(560px, 100%); max-height: min(720px, 100%); padding: 0; overflow: hidden; border-radius: 30px; background: var(--pop); -webkit-backdrop-filter: blur(28px) saturate(1.8); backdrop-filter: blur(28px) saturate(1.8); box-shadow: var(--rim), var(--lift); }
.mem-pop.is-pic, .mem-pop.is-doc { width: min(880px, 100%); grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.mp-media { position: relative; min-height: 380px; display: grid; place-items: center; overflow: hidden; }
.mp-media.pic { background: #0e1014; }
.mp-img { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.mp-img img { display: block; width: 100%; height: 100%; max-height: 720px; object-fit: contain; }
.mp-sk { position: absolute; inset: 0; background: linear-gradient(110deg, #16181d 30%, #23252c 50%, #16181d 70%) 0 0 / 220% 100%; animation: td-sheen 1.8s linear infinite; }
/* a file is a page: white, a little turned up at the light, its kind on it */
.mp-media.doc { background: linear-gradient(160deg, var(--tint), transparent 70%), var(--field); }
.mp-page { position: relative; width: 168px; height: 220px; padding: 22px 20px; display: flex; flex-direction: column; gap: 10px; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(20,26,40,.10), 0 24px 44px -16px rgba(20,26,40,.36); transform: rotate(-2deg); }
.mp-page i { display: block; height: 6px; border-radius: 3px; background: #e6e8ee; }
.mp-page i.s { width: 60%; }
.mp-doc-k { align-self: flex-start; margin-bottom: 8px; padding: 3px 8px; border-radius: 6px; background: #4a6fa5; color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.mp-media.pic .mp-doc-k { background: rgba(255,255,255,.14); }
.mp-body { display: flex; flex-direction: column; min-height: 0; padding: 22px 24px 20px; overflow-y: auto; scrollbar-width: none; }
.mp-h { display: flex; align-items: center; justify-content: space-between; }
.mp-t { margin: 12px 0 0; font-size: 24px; line-height: 30px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); overflow-wrap: anywhere; text-wrap: balance; }
.mp-t.txt { font-size: 26px; line-height: 33px; white-space: pre-line; }
.mp-t.clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.mp-s { margin: 8px 0 0; font-size: 15px; line-height: 22px; color: var(--body); }
.mp-body .mem-more { align-self: flex-start; margin-top: 10px; }
.mp-body .mem-read { max-height: 32vh; }
.mp-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0; margin: 20px 0 0; padding: 0; }
.mp-dl dt, .mp-dl dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.mp-dl dt { color: var(--faint); }
.mp-dl dd { padding-left: 18px; color: var(--ink); text-align: right; overflow-wrap: anywhere; }
.mp-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 20px; }
.mp-acts .grow { flex: 1; }
/* a picture, full screen: on black, the whole picture, a click anywhere closes it */
.mem-lb { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 28px; background: rgba(6,7,9,.92); cursor: zoom-out; animation: td-fade .25s ease both; }
.mem-lb img { position: absolute; inset: 28px; width: calc(100% - 56px); height: calc(100% - 56px); object-fit: contain; }
@media (max-width: 760px) {
  .mem-scrim { place-items: end center; padding: 10px; }
  .mem-pop.mem-det, .mem-pop.is-pic, .mem-pop.is-doc { width: 100%; max-height: 88vh; grid-template-columns: minmax(0, 1fr); border-radius: 28px; }
  .mp-media { min-height: 0; height: 240px; }
  .mp-media.doc { height: 200px; } .mp-page { width: 124px; height: 160px; padding: 16px 14px; gap: 8px; }
  .mp-t.txt { font-size: 22px; line-height: 28px; }
  .mp-acts > .btn.primary { flex: 1 1 100%; height: 44px; }
}
.mem-scrim.still { animation: none; }

/* A tool's page (12 Nov 2026): the header is its name, its state and a trash can; every switch is in Settings */
.tool-head .th-del { margin-left: 4px; color: var(--faint); }
.tool-head .th-del:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.tool-head .th-state.mute { color: var(--muted); }
.tool-head .th-state.mute i { background: var(--faint); }
.sect .sect-act { margin-left: auto; font-size: 13px; }
.ts-rows { display: flex; flex-direction: column; }
.ts-row { width: 100%; gap: 14px; padding: 14px 0; border: 0; border-top: 1px solid var(--line); background: none; font: inherit; color: inherit; text-align: left; text-decoration: none; }
.ts-rows > .ts-row:first-child { border-top: 0; padding-top: 4px; }
.ts-row .t { font-size: 14px; font-weight: 500; color: var(--ink); }
.ts-row .s { margin-top: 2px; font-size: 12.5px; line-height: 17px; color: var(--muted); }
.ts-go { cursor: pointer; }
.ts-go:hover .t { color: var(--acc); }
.ts-chev { flex: none; display: grid; color: var(--faint); }
.kv-v { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
/* the two columns end on one line: each column's last card takes what is left */
.sh-body.natural.even { align-items: stretch; }
.sh-body.natural.even .main, .sh-body.natural.even .aside { display: flex; flex-direction: column; }
.sh-body.natural.even .main > :last-child, .sh-body.natural.even .aside > :last-child { flex: 1 1 auto; }

/* Today's briefing (12 Nov 2026, Fabian: "slightly bigger, more gentle, a gradient behind"): a little larger, a slower
   fade, and a soft light behind it instead of a flat grey */
.td-scrim:not(.glass) { background: radial-gradient(60% 55% at 50% 45%, rgba(74,111,165,.22), transparent 70%), linear-gradient(180deg, rgba(14,16,20,.30), rgba(14,16,20,.52));
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); animation-duration: .5s; }
@media (min-width: 761px) { .td-brief { width: min(1040px, 100%); height: min(640px, 100%); } }

/* Memory, one memory open, in its slide-out column (12 Nov 2026): the picture or page at the head of the panel */
.mem-side { padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; }
.mem-side .mp-media { flex: none; }
.mem-side .mp-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.mem-side .mp-media { min-height: 0; height: 240px; border-radius: 0; }
.mem-side.is-doc .mp-media { height: 200px; }
.mem-side .mp-page { width: 118px; height: 152px; padding: 16px 14px; gap: 8px; }
.mem-side .mp-img img { max-height: 240px; object-fit: cover; }
.mem-side .mp-body { padding: 18px 20px 18px; }
.mem-side .mp-t { font-size: 20px; line-height: 26px; }
.mem-side .mp-t.txt { font-size: 20px; line-height: 27px; }
.mem-side .mp-acts { flex: none; margin: 0; padding: 14px 20px 16px; border-top: 1px solid var(--line); }
.mem-side .mp-media { height: 210px; }
.mem-side.is-text .mp-h { margin-top: 2px; }
.mem-side .mp-acts { flex-wrap: nowrap; gap: 6px; }
.mem-side .mp-acts .btn.quiet[data-act="mem-archive"] { background: none; box-shadow: none; color: var(--muted); padding: 0 8px; }
.mem-side .mp-acts .btn.quiet[data-act="mem-archive"]:hover { color: var(--ink); }
.mp-ic { color: var(--faint); }
.mp-ic:hover { color: var(--ink); background: var(--panel-hover); }
.mp-ic.del:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
/* first paint: a place held, never a state that flips a moment later */
.ch-pill.wait { cursor: default; }
.ch-pill.wait small { display: block; width: 84px; height: 9px; margin-top: 5px; border-radius: 99px; background: var(--line-2); animation: td-pulse 1.4s ease-in-out infinite; }
.ixk-wait .ixk-h b, .ixk-wait .ixk-h small { display: block; height: 10px; border-radius: 99px; background: var(--line-2); animation: td-pulse 1.4s ease-in-out infinite; }
.ixk-wait .ixk-h b { width: 180px; } .ixk-wait .ixk-h small { width: 120px; margin-top: 8px; }
.ixk-wait .ixk-r { height: 44px; margin-top: 10px; border-radius: 12px; background: var(--field); animation: td-pulse 1.4s ease-in-out infinite; }

/* the journal's tools, stacked beside its switch */
.act-stack { display: inline-flex; align-items: center; }
.act-stack > .logo, .act-stack > .mono, .act-stack > .more { width: 24px; height: 24px; border-radius: 8px; font-size: 11px; box-shadow: 0 0 0 2px var(--bg), 0 0 0 2.5px var(--line); }
.act-stack > * + * { margin-left: -4px; }
.act-tab { white-space: nowrap; }
@media (max-width: 760px) { .act-sw > span:not(.act-stack) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
.act-stack > .more { display: grid; place-items: center; background: var(--field); color: var(--muted); font-weight: 600; backdrop-filter: blur(6px); }

/* ---------- Your year (12 Nov 2026, board K): the ring alone, then an area ---------- */
.yr { display: flex; flex-direction: column; gap: 12px; }
.yr-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.yr-acts { animation: yr-in .5s ease both; }
.yr-eye { font-size: 14px; font-weight: 500; color: var(--muted); }
.yr-acts { display: flex; gap: 8px; }
.yr-main { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 40px; align-items: center; }
.yr-ring { width: 100%; height: auto; overflow: visible; }
.yr-ring .trk { fill: none; stroke: var(--acc); stroke-opacity: .12; stroke-linecap: round; }
.yr-ring .val { fill: none; stroke: var(--acc); stroke-linecap: round; transition: opacity .3s ease; }
.yr-ring text { font: 500 15px Inter, sans-serif; fill: var(--muted); }
.yr-seg { cursor: pointer; }
.yr-seg:hover text, .yr-seg.sel text { fill: var(--ink); }
.yr-seg:hover .val { opacity: 1 !important; }
.yr-seg:focus-visible { outline: none; } .yr-seg:focus-visible text { fill: var(--acc); text-decoration: underline; }
.yr-ring .yr-n { font: 500 72px Inter, sans-serif; letter-spacing: -.04em; fill: var(--ink); }
.yr-ring .yr-nl { font: 400 16px Inter, sans-serif; fill: var(--muted); }
.yr-line { margin: 0; font-size: 34px; line-height: 40px; font-weight: 500; letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.yr-line .acc, .yr-h .acc { color: var(--acc); }
.yr-from { margin: 12px 0 0; font-size: 15px; line-height: 22px; color: var(--muted); max-width: 46ch; }
.yr-areas { list-style: none; margin: 24px 0 0; padding: 0; border-radius: 22px; overflow: hidden; background: var(--panel); box-shadow: var(--panel-shadow); }
.yr-areas a { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; }
.yr-areas li + li a { box-shadow: 0 -1px 0 var(--panel-line); }
.yr-areas a:hover { background: var(--panel-hover); }
.yr-areas .n { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.yr-areas em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--acc); }
.yr-main.yr-area { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: start; }
.yr-ring.sm text { font-size: 18px; }
.yr-h { margin: 0 0 12px; font-size: 44px; line-height: 48px; font-weight: 500; letter-spacing: -.04em; }
.yr-list ol { list-style: none; margin: 0 0 20px; padding: 0 20px; border-radius: 22px; background: var(--panel); box-shadow: var(--panel-shadow); overflow: hidden; }
.yr-cap { margin: 4px 0 10px 4px; font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--muted); }
.yr-it { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 16px 0; }
.yr-it + .yr-it { box-shadow: 0 -1px 0 var(--panel-line); }
.yr-tx { min-width: 0; }
.yr-it .t { margin: 0; font-size: 16px; line-height: 22px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.yr-ev { margin: 4px 0 0; font-size: 13px; line-height: 19px; color: var(--muted); }
.yr-do { display: flex; align-items: center; gap: 8px; }
.yr .btn.sm, .yr .btn.primary.sm { height: 34px; padding: 0 14px; font-size: 13px; }
.yr .btn.primary.sm, .yr .btn.primary.plain { box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.yr-kept { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--acc); background: color-mix(in srgb, var(--acc) 10%, transparent); }
.yr-kept svg { width: 13px; height: 13px; }
.yr-none { padding: 22px; border-radius: 22px; background: var(--panel); box-shadow: var(--panel-shadow); }
.yr-none p { margin: 0; font-size: 16px; font-weight: 500; color: var(--ink); }
.yr-none .fine { margin-top: 4px; font-size: 13px; font-weight: 400; color: var(--muted); }
.yr-acts { align-items: center; }
a.ch-pill, a.ch-pill:hover { text-decoration: none; }
a.ch-pill { transition: transform .2s, box-shadow .2s; }
a.ch-pill:hover { transform: translateY(-1px); box-shadow: var(--lens-depth), 0 28px 54px -22px rgba(20,30,50,.48); }
.yr-rule { margin: 8px 0 0; font-size: 12px; color: var(--faint); }
.yr-wait { display: flex; flex-direction: column; gap: 24px; padding-top: 12px; }
.yr-ring-sk { width: 380px; height: 380px; border-radius: 50%; border: 18px solid var(--field); animation: td-pulse 1.4s ease-in-out infinite; }
@media (max-width: 900px) {
  .yr-main, .yr-main.yr-area { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .yr-ring { max-width: 420px; justify-self: center; }
  .yr-ring.sm { max-width: 200px; }
  .yr-line { font-size: 26px; line-height: 32px; }
  .yr-top { flex-wrap: wrap; }
  .yr-it.new { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
/* Today while it is being put together: its shape, a soft sheen, no card that will be swapped */
.sk-line { display: block; height: 12px; border-radius: 99px; background: linear-gradient(90deg, var(--field) 0%, var(--line-2) 50%, var(--field) 100%) 0 0 / 220% 100%; animation: td-sheen 1.6s linear infinite; }
.sk-line + .sk-line { margin-top: 10px; }
.sk-line.w30 { width: 30%; } .sk-line.w40 { width: 40%; } .sk-line.w50 { width: 50%; } .sk-line.w60 { width: 60%; height: 44px; border-radius: 14px; } .sk-line.w70 { width: 70%; } .sk-line.w80 { width: 80%; }
.sk-line.big { height: 26px; border-radius: 10px; }
.sk-line.lt { background: linear-gradient(90deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.10) 100%) 0 0 / 220% 100%; }
.td-hero.td-sk .td-hb { pointer-events: none; }
.td-li.td-sk { cursor: default; }
.td-li.td-sk .td-th { background: var(--field); }
.forming .td-top, .forming .td-hero, .forming .td-also { animation: none; }
@media (prefers-reduced-motion: reduce) { .sk-line { animation: none; } }

/* Today's briefing opens and closes softly (12 Nov 2026, Fabian: "abrupt"). Root cause: the scrim's blur came in and
   went out at once (only its colour was animated), and the card it grew from stayed visible underneath. The ground now
   fades as a layer of its own, blur included, and the card steps aside while it is open. */
.td-scrim:not(.glass) { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; }
.td-scrim:not(.glass)::before { content: ''; position: fixed; inset: 0; z-index: -1;
  background: radial-gradient(60% 55% at 50% 45%, rgba(74,111,165,.22), transparent 70%), linear-gradient(180deg, rgba(14,16,20,.30), rgba(14,16,20,.52));
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); animation: td-veil-in .55s cubic-bezier(.22,1,.36,1) both; }
.td-scrim:not(.glass).leaving { animation: none; }
.td-scrim:not(.glass).leaving::before { animation: td-veil-out .5s cubic-bezier(.32,.72,0,1) both; }
@keyframes td-veil-in { from { opacity: 0; } }
@keyframes td-veil-out { to { opacity: 0; } }
.td-away { opacity: 0 !important; transition: opacity .18s ease; }
.td-hero, .td-li { transition: opacity .3s ease; }
@media (prefers-reduced-motion: reduce) { .td-scrim:not(.glass)::before { animation: none; } }

/* The first real draw after the shimmer: the words and rows settle in place of the bones, once, with no jump. */
.td.arrive .td-say, .td.arrive .td-hb, .td.arrive .td-also > *, .td.arrive .td-pill { animation: td-settle .52s var(--td-ease) both; }
.td.arrive .td-also > :nth-child(2) { animation-delay: .05s; } .td.arrive .td-also > :nth-child(3) { animation-delay: .1s; }
.td.arrive .td-also > :nth-child(n+4) { animation-delay: .15s; }
@keyframes td-settle { from { opacity: 0; filter: blur(4px); } }
@media (prefers-reduced-motion: reduce) { .td.arrive * { animation: none !important; } }

/* Your year, a read running: the Aperture. A continuous ring fills like a watch bezel and its ticks light as it
   passes; the arc moves smoothly between polls. Done, the ring opens into the eight areas, each drawn in turn. */
.yr-aptrk { fill: none; stroke: var(--acc); stroke-opacity: .10; }
.yr-arc { fill: none; stroke: url(#yrG); stroke-linecap: round; }
.yr-prog { transition: stroke-dashoffset .9s cubic-bezier(.4,0,.2,1); }
.yr-tick { fill: none; stroke: var(--ink); stroke-opacity: .12; stroke-width: 1.3; stroke-linecap: round; }
.yr-tick.lit { stroke: var(--acc); stroke-opacity: 1; stroke-width: 1.5; }
.yr-ring .yr-n.pct { font-weight: 300; }
.yr-ring.reading { animation: yr-in .5s ease both; }
.yr-ring.opened .trk, .yr-ring.opened .val { transform-box: view-box; transform-origin: 210px 210px; animation: yr-open .8s cubic-bezier(.2,.8,.2,1) both; }
.yr-ring.opened .val { stroke: url(#yrV); stroke-dasharray: 100; animation: yr-open .8s cubic-bezier(.2,.8,.2,1) both, yr-draw .9s cubic-bezier(.22,.8,.2,1) both; animation-delay: 0s, .18s; }
.yr-ring.opened .val.v1 { animation-delay: 0s, 0.25s; }
.yr-ring.opened .val.v2 { animation-delay: 0s, 0.32s; }
.yr-ring.opened .val.v3 { animation-delay: 0s, 0.39s; }
.yr-ring.opened .val.v4 { animation-delay: 0s, 0.46s; }
.yr-ring.opened .val.v5 { animation-delay: 0s, 0.53s; }
.yr-ring.opened .val.v6 { animation-delay: 0s, 0.60s; }
.yr-ring.opened .val.v7 { animation-delay: 0s, 0.67s; }

@keyframes yr-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes yr-open { from { opacity: 0; transform: rotate(-12deg) scale(.94); } }
@keyframes yr-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .yr-ring.opened .val, .yr-ring.opened .trk, .yr-ring.reading { animation: none; } .yr-prog { transition: none; } }
.yr-run { margin: 10px 0 0; font-size: 13px; font-weight: 500; color: var(--acc); }

.ch-year svg.ch-ap { width: 52px; height: 52px; flex: none; }
.ch-year svg.ch-ap .yr-arc { stroke: var(--acc); }
.ch-year .ch-run { color: var(--acc); font-weight: 500; font-variant-numeric: tabular-nums; }