/* PostReach design tokens. Every colour, size and duration downstream comes from here.
   Brand values come from the kit (../brand/colors.css). Signal pink is the logo dot and, in the
   product, one thing only: the moment, meaning "now" on the timeline or the send time on a card.
   Status colours are not in the kit. They are functional, appear only on status marks, and sit
   away from pink's hue so a problem never reads as the brand. *//* PostReach brand colours. Signal pink is for the logo dot and one highlight per screen at most. */
:root{
  --pr-black:#000000;
  --pr-white:#FFFFFF;
  --pr-pink:#FF3D7F;      /* Signal pink */
  --pr-grey-700:#57575F;  /* secondary text on white (7.0:1) */
  --pr-grey-400:#8E8E96;  /* hints and captions on white */
  --pr-grey-100:#F4F4F5;  /* panels and plates */
  --pr-line:#E7E7EA;      /* hairlines */
  --pr-font:"Host Grotesk", "Helvetica Neue", Arial, sans-serif;
}
@font-face {
  font-family: "Host Grotesk"; font-style: normal; font-display: swap; font-weight: 300 800;
  src: url("/assets/host-grotesk-latin-wght-normal-CBa0fl4q.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Host Grotesk"; font-style: normal; font-display: swap; font-weight: 300 800;
  src: url("/assets/host-grotesk-latin-ext-wght-normal-B8jkyusk.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;

  --ground: var(--pr-white);        /* page, sidebar, dialogs */
  --raised: var(--pr-grey-100);     /* plates and panels */
  --side: #efeff1;                  /* the sidebar: its own tone, one step past a plate, so it reads as a place */
  --side-hover: #e5e5e8;
  --side-current: var(--pr-white);
  --active: #ebebed;                /* the active nav pill, one step past a plate */
  --border: var(--pr-line);         /* edges */
  --rule: #f0f0f2;                  /* row rules, one step lighter */
  --control: #c9c9cf;               /* outlined buttons */
  --field: var(--pr-grey-400);      /* input edges: 3.3:1 on white */

  --text: var(--pr-black);
  --muted: var(--pr-grey-700);      /* 7:1 on white */
  --faint: #6e6e78;                 /* 5:1 on white, 4.6:1 on a plate. The kit's grey 400 is too light for words */

  --primary: var(--pr-black);
  --primary-hover: #26262c;
  --primary-ink: var(--pr-white);

  --moment: var(--pr-pink);         /* the one highlight */
  --focus: var(--pr-pink);          /* 3.4:1 on white, 3.1:1 on a plate */

  --data: var(--pr-black);          /* chart marks: ink, because pink is spoken for */
  --data-quiet: #c9c9cf;            /* what has already happened */

  --positive: #1a7f4b;
  --negative: #c8321e;
  --warning: #8a5a00;
  --pill-positive-bg: #e6f6ec; --pill-positive-ink: #0b4a2b;
  --pill-negative-bg: #fdece8; --pill-negative-ink: #8f2213;
  --pill-warning-bg: #fbf1d9;  --pill-warning-ink: #5f4100;
  --pill-neutral-bg: var(--pr-grey-100); --pill-neutral-ink: var(--pr-grey-700);

  --scrim: rgb(0 0 0 / .36);
  --float-shadow: 0 12px 32px rgb(0 0 0 / .14), 0 1px 3px rgb(0 0 0 / .08);

  /* The kit's stack, with system fonts for the Asian languages Host Grotesk doesn't cover. */
  --font: "Host Grotesk", "Helvetica Neue", Arial, "Apple SD Gothic Neo", "Noto Sans CJK KR", "Malgun Gothic", "Hiragino Sans", "Noto Sans CJK JP", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;   /* addresses and keys only */
  --fs-small: 13px;
  --fs-body: 14px;
  --fs-section: 16px;
  --fs-title: 24px;

  /* Radius follows the mark: soft plates, stepping down as things nest. Buttons are squared with round corners (owner, 3 Nov 2026); only status pills stay fully round, so what you can press looks different from what just tells you something. */
  --radius-dialog: 20px;
  --radius-card: 16px;
  --radius-inner: 12px;
  --radius-field: 10px;
  --radius-control: 8px;
  --radius-chip: 7px;
  --radius-pill: 999px;
  /* The Corner: anything PostReach says to you has the mark's one sharp corner. */
  --corner-bl: 16px 16px 16px 4px;

  --sidebar-width: 232px;
  --pad: 32px;
  --gap: 24px;
  --control-height: 34px;
  --field-height: 40px;
  --row-height: 48px;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --t-press: 120ms;
  --t-hover: 150ms;
  --t-ui: 200ms;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  /* The kit's dark values. Elevation comes from lightness alone. */
  --ground: #0a0a0c;
  --raised: #16161a;
  --side: #17171b;                  /* the sidebar: lifted off the page, with a hairline */
  --side-hover: #212126;
  --side-current: #2b2b32;
  --active: #26262c;
  --border: #26262c;
  --rule: #1c1c21;
  --control: #3f3f47;
  --field: #6e6e78;                 /* 4:1 on the ground */

  --text: #f5f5f7;
  --muted: #a8a8b2;
  --faint: #8e8e96;                 /* 6:1 on the ground. The kit's #6e6e78 is too dark for words here */

  --primary: var(--pr-white);
  --primary-hover: var(--pr-line);
  --primary-ink: var(--pr-black);

  --data: #f5f5f7;
  --data-quiet: #3f3f47;

  --positive: #4cc38a;
  --negative: #ff7a66;
  --warning: #e8b04a;
  --pill-positive-bg: #11261b; --pill-positive-ink: #6fd5a2;
  --pill-negative-bg: #2e1613; --pill-negative-ink: #ff9a8a;
  --pill-warning-bg: #2a2110;  --pill-warning-ink: #edbb5c;
  --pill-neutral-bg: #26262c;  --pill-neutral-ink: #c9c9cf;

  --scrim: rgb(0 0 0 / .64);
  --float-shadow: 0 12px 32px rgb(0 0 0 / .64), 0 0 0 1px var(--border);
}

/* Larger targets for fingers. */
@media (pointer: coarse) {
  :root { --control-height: 44px; --field-height: 44px; }
}
/* Shared components for the platform and the in-chat cards. Tokens only; no raw colours. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 20px;
  color: var(--text);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
code { font-family: var(--mono); font-size: 13px; }
svg.ico { display: block; flex: none; }
[hidden] { display: none !important; }

/* Headlines 600, body 400, as the kit says. Tracking matches the wordmark. */
h1 { font-size: var(--fs-title); line-height: 30px; font-weight: 600; letter-spacing: -.02em; }
h2 { font-size: var(--fs-section); line-height: 24px; font-weight: 600; letter-spacing: -.01em; }
h3 { font-size: var(--fs-body); line-height: 20px; font-weight: 600; }
strong { font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-small); line-height: 18px; }
.block { display: block; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-chip); }
[tabindex="-1"]:focus-visible { outline: none; }

/* Logo: the kit's files, one per theme. */
.logo { display: block; flex: none; line-height: 0; }
.logo img { display: block; width: 100%; height: auto; }
.logo .logo-dark { display: none; }
:root[data-theme="dark"] .logo .logo-light { display: none; }
:root[data-theme="dark"] .logo .logo-dark { display: block; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--control-height); padding: 0 14px; white-space: nowrap;
  border: 1px solid var(--control); border-radius: var(--radius-control);
  background: transparent; color: var(--text); font-weight: 500; text-decoration: none;
  transition: background var(--t-hover), border-color var(--t-hover), transform var(--t-press) var(--ease-out);
}
.btn:hover { background: var(--raised); }
.btn:active { transform: scale(.98); }
.btn:focus-visible { border-radius: var(--radius-control); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-quiet { border-color: transparent; padding: 0 10px; }
.btn-danger { color: var(--negative); }
.btn[disabled]:where(:not([aria-busy="true"])), .btn[aria-disabled="true"]:where(:not([aria-busy="true"])) { background: var(--raised); border-color: var(--raised); color: var(--faint); cursor: not-allowed; transform: none; }
/* Waiting for an answer: spinner plus "Approving", from system.md. It keeps its colours so its words stay readable, and the spinner waits 150 ms so a quick answer doesn't flicker. See docs/spec/web-integration.md, section 2.2. */
.btn[aria-busy="true"], .btn[aria-busy="true"]:hover, .btn[aria-busy="true"]:active { cursor: progress; transform: none; }
a.btn[aria-busy="true"] { pointer-events: none; }
.btn[aria-busy="true"]::before { content: ""; flex: none; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; opacity: 0; animation: btn-spin-in 1ms linear 150ms forwards, btn-spin .7s linear 150ms infinite; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
@keyframes btn-spin-in { to { opacity: 1; } }
.icon-btn { width: var(--control-height); padding: 0; }
.link { color: var(--text); font-weight: 500; text-decoration: underline; text-decoration-color: var(--control); text-underline-offset: 3px; display: inline-flex; align-items: center; gap: 4px; transition: text-decoration-color var(--t-hover); }
.link:hover { text-decoration-color: currentColor; }

/* Segmented control */
.seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--raised); border-radius: var(--radius-control); }
.seg button {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: calc(var(--control-height) - 4px); padding: 0 12px; border: 1px solid transparent; border-radius: calc(var(--radius-control) - 2px);
  color: var(--muted); font-weight: 500; transition: background var(--t-hover), color var(--t-hover);
}
.seg button:hover { color: var(--text); }
.seg button[aria-disabled="true"], .seg button[aria-disabled="true"]:hover { color: var(--faint); cursor: not-allowed; }
.seg button[data-fixed] { cursor: default; }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--ground); color: var(--text); border-color: var(--border); }
.seg button:focus-visible { border-radius: calc(var(--radius-control) - 2px); }

/* Underline tabs */
.tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs [role="tab"], .tabs a {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; margin-bottom: -1px; white-space: nowrap; text-decoration: none;
  color: var(--muted); font-weight: 500; border-bottom: 2px solid transparent; flex: none;
}
.tabs [role="tab"]:hover, .tabs a:hover { color: var(--text); }
.tabs [role="tab"][aria-selected="true"], .tabs a[aria-current="page"] { color: var(--text); border-bottom-color: var(--text); }
.tabs [role="tab"]:focus-visible, .tabs a:focus-visible { outline-offset: -2px; }

/* Fields */
.field { display: grid; gap: 8px; min-width: 0; }
.field > label, .field-label { font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.field-row { display: flex; gap: 8px; flex-wrap: wrap; }
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="time"], select, textarea {
  width: 100%; min-height: var(--field-height); padding: 8px 12px;
  background: var(--ground); border: 1px solid var(--field); border-radius: var(--radius-field);
  transition: border-color var(--t-hover);
}
input[type="date"], input[type="time"] { width: auto; }
input:hover, select:hover, textarea:hover { border-color: var(--text); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--text); outline-offset: 0; border-color: var(--text); border-radius: var(--radius-field); }
textarea { resize: vertical; line-height: 22px; display: block; }
::placeholder { color: var(--faint); opacity: 1; }

.copy-field { display: flex; gap: 8px; }
.copy-field input { font-family: var(--mono); font-size: 13px; min-width: 0; flex: 1; }
.copy-field .btn { flex: none; height: var(--field-height); }

/* Status pills: pale tint, dark ink of the same hue */
.pill {
  display: inline-flex; align-items: center; gap: 4px; flex: none; height: 22px; padding: 0 9px;
  border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: 500; line-height: 22px; white-space: nowrap;
  background: var(--pill-neutral-bg); color: var(--pill-neutral-ink);
}
.pill-positive { background: var(--pill-positive-bg); color: var(--pill-positive-ink); }
.pill-negative { background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
.pill-warning { background: var(--pill-warning-bg); color: var(--pill-warning-ink); }
.pill-strong { background: var(--primary); color: var(--primary-ink); }

/* Account tokens: the network's own mark in its own colours, so people can tell networks apart at a glance. It has its own shape, so no box. */
.tok { position: relative; display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; color: var(--text); }
.tok-lg { width: 28px; height: 28px; }
.tok[data-issue]::after {
  content: ""; position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 2px var(--ground);
}
.tok[data-issue="error"]::after { background: var(--negative); }
.toks { display: inline-flex; flex: none; gap: 2px; }
.tok > .nic { --s: 100%; }

/* A network's mark: its own files, as downloaded, on one rounded square whose corner is the LinkedIn bug's own (7.6% of its side), at every size.
   Nothing is drawn over a file, and nothing is masked but Bluesky's square, which its rules allow. docs/design/README.md, "Network marks".
   Two looks, by place, as the owner chose (6 Nov 2026): app icons on cards and on the badge on an account's picture; plain white tiles in lists and rows. */
.nic { position: relative; display: grid; place-items: center; flex: none; width: var(--s, 20px); height: var(--s, 20px); border-radius: var(--net-radius, 7.6%); }
.nic > img { grid-area: 1 / 1; display: block; max-width: none; height: auto; user-select: none; }
:root:not([data-theme="dark"]) .nic > .nic-dark, :root[data-theme="dark"] .nic > .nic-light { display: none; }
.nic-drawn > svg { width: 82%; height: 82%; }

/* Plain tiles, in lists and rows: each network's full-colour logo, unaltered, centred on the same white square, white in dark mode too because the
   logos are made for white. */
.nic-plain { background: #fff; overflow: hidden; }
:root:not([data-theme="dark"]) .nic-plain { box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1); }
.nic-plain.nic-facebook > img { width: 66.7%; }
.nic-plain.nic-instagram > img { width: 64%; }
.nic-plain.nic-linkedin > img { width: 68%; transform: translateX(7%); } /* the bug is 58% of the square; its ® sits beside it */
.nic-plain.nic-x > img { width: 50%; }
.nic-plain.nic-threads > img { width: 56%; }
.nic-plain:is(.nic-youtube, .nic-tiktok, .nic-bluesky) > img { width: 100%; }

/* App icons, on cards and badges. Facebook: its secondary logo on Facebook Blue, a quarter of the logo's width clear around it. X and Threads: white on
   black, and in dark mode black on white (owner, 6 Nov 2026), as X's guide allows any background. LinkedIn: the bug is the square, its ® just outside.
   TikTok and Bluesky: their own squares. YouTube and Instagram, which have no square of their own: on white. */
.nic-app.nic-facebook { background: #0866ff; }
.nic-app.nic-facebook > img { width: 66.7%; }
.nic-app:is(.nic-x, .nic-threads) { background: #000; }
:root[data-theme="dark"] .nic-app:is(.nic-x, .nic-threads) { background: #fff; }
.nic-app.nic-x > img { width: 50%; }
.nic-app.nic-threads > img { width: 56%; }
.nic-app:is(.nic-instagram, .nic-youtube) { background: #fff; }
.nic-app.nic-instagram > img { width: 64%; }
.nic-app:is(.nic-youtube, .nic-tiktok, .nic-bluesky) > img { width: 100%; }
.nic-app.nic-linkedin > img { position: absolute; left: 0; top: 0; z-index: 1; width: auto; height: 100%; }
/* The bug's "in" is cut out of the file, so on a dark panel the dark would show through the letters. LinkedIn's preferred use is the bug on
   solid white (owner, 6 Nov 2026: "make sure the LinkedIn middle letters stay white"), so white sits behind the letters only. The letters run from
   13.8% to 85.1% of the square, so the white stops at 10% in from every side, well inside the bug's blue: no white reaches its edge or corners.
   The file is unchanged. */
.nic-app.nic-linkedin::before { content: ""; position: absolute; inset: 10%; background: #fff; }
.nic-app.nic-bluesky { overflow: hidden; }
/* A white square on a white page needs an edge to read as a square. It's the tile's, never the logo's. */
:root:not([data-theme="dark"]) .nic-app:is(.nic-instagram, .nic-youtube, .nic-tiktok) { box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1); }

/* The moment: the only use of Signal pink besides the logo. */
.moment { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--moment); }

/* Help tooltips: open on hover, focus or tap; Esc closes; the pointer can move onto them.
   They speak, so they have the Corner, on the corner nearest what they explain. */
.tip-btn {
  display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; margin: -2px; border-radius: 50%;
  color: var(--faint); vertical-align: middle; position: relative;
}
@media (pointer: coarse) { .tip-btn::after { content: ""; position: absolute; inset: -10px; } } /* 44px for fingers */
.tip-btn:hover, .tip-btn[aria-expanded="true"] { color: var(--text); }
.tip-btn:focus-visible { border-radius: 50%; }
#tooltip {
  position: fixed; z-index: 1000; max-width: 280px; padding: 10px 12px;
  background: var(--float, var(--primary)); color: var(--float-ink, var(--primary-ink)); box-shadow: var(--float-shadow);
  font-size: var(--fs-small); line-height: 18px; font-weight: 400;
  border-radius: 12px; animation: tip-in var(--t-hover) var(--ease-out);
}
#tooltip[data-corner="bl"] { border-bottom-left-radius: 3px; }
#tooltip[data-corner="br"] { border-bottom-right-radius: 3px; }
#tooltip[data-corner="tl"] { border-top-left-radius: 3px; }
#tooltip[data-corner="tr"] { border-top-right-radius: 3px; }
@keyframes tip-in { from { opacity: 0; } }

/* Toast */
#toasts { position: fixed; z-index: 900; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; gap: 8px; width: max-content; max-width: min(520px, calc(100vw - 32px)); }
.toast {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--corner-bl);
  background: var(--float, var(--primary)); color: var(--float-ink, var(--primary-ink)); box-shadow: var(--float-shadow); font-weight: 500;
  animation: toast-in var(--t-ui) var(--ease-out);
}
.toast button { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; flex: none; }
.toast button:focus-visible { outline-color: var(--float-ink, var(--primary-ink)); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* Network previews. Approximate on purpose, so nobody mistakes them for the network itself. */
.pv { background: var(--ground); border: 1px solid var(--border); border-radius: var(--radius-inner); overflow: hidden; }
.pv-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 0; }
.pv-avatar { position: relative; overflow: hidden; width: 36px; height: 36px; border-radius: 10px; background: var(--active); display: grid; place-items: center; font-weight: 600; flex: none; }
/* The account's own picture, over its letter: the same square, the letter showing while it loads and staying if it won't. */
.pv-avatar-pic { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; background: #fff; }
/* The panel's hairline over its edge, as on an account's card, so a white logo still reads as a square on a white panel and a dark one on a dark panel. */
.pv-avatar:has(> .pv-avatar-pic)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--border); pointer-events: none; }
:root[data-theme="dark"] .pv-avatar:has(> .pv-avatar-pic)::after { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
.pv-name { font-weight: 600; display: block; line-height: 18px; }
.pv-sub { color: var(--muted); font-size: var(--fs-small); line-height: 16px; display: block; overflow-wrap: anywhere; }
.pv-net { margin-left: auto; color: var(--text); }
.pv-text { padding: 10px 14px 12px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 21px; }
.pv-text.clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; padding-bottom: 0; margin-bottom: 12px; }
.pv-more { padding: 0 14px 12px; margin-top: -6px; color: var(--muted); font-size: var(--fs-small); line-height: 16px; display: block; }
.pv-media { background: var(--raised); display: flex; justify-content: center; }
.pv-media .art { width: min(100%, 380px); }
.pv-foot { display: flex; gap: 16px; padding: 10px 14px; color: var(--faint); }
.pv[data-network="instagram"] .pv-head { padding-bottom: 10px; }
/* A file in a frame. Its text scales with it, so a crop really does cut the graphic. */
.mbox { position: relative; display: flex; overflow: hidden; width: 100%; }
.pv-media .mbox { width: min(100%, 380px); }
.mbox-in { flex: none; display: block; }
.pv-media .mbox .art, .mbox .art { width: 100%; justify-content: center; gap: 1em; }
/* Keep a video's sample text clear of the play button and the app's own overlays. */
.mbox.is-video .art { justify-content: flex-start; }
.mbox.is-upright .art { padding-top: 26%; }
.mbox.is-wide .art b { font-size: 5.5cqw; }
.art-file { padding: 0; }
.art-file img, .art-file video { display: block; width: 100%; height: 100%; object-fit: cover; }
.mbox-play { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center; border-radius: 50%; background: rgb(0 0 0 / .55); color: #fff; }
.mbox-time { position: absolute; right: 8px; bottom: 8px; padding: 0 6px; border-radius: var(--radius-field); background: rgb(0 0 0 / .7); color: #fff; font-size: var(--fs-small); line-height: 20px; }
.mbox-empty { align-items: center; justify-content: center; color: var(--muted); font-size: var(--fs-small); background: var(--active); }
/* Vertical formats get a phone-shaped frame: on phones they fill the screen, and that's what people need to judge. */
.pv-tall { background: none; border: 0; border-radius: 0; overflow: visible; }
.pv-screen { position: relative; width: min(100%, 264px); aspect-ratio: 9 / 16; margin-inline: auto; overflow: hidden; border-radius: var(--radius-card); background: #000; color: #fff; }
.pv-screen .mbox { position: absolute; inset: 0; height: 100%; }
.pv-screen .mbox-empty { background: #000; color: #b9b9c0; }
.pv-screen .pv-avatar { width: 28px; height: 28px; border-radius: 8px; background: rgb(255 255 255 / .2); }
.pv-screen .pv-net { color: #fff; }
.pv-screen .mbox-play { background: rgb(0 0 0 / .45); }
.pv-screen .mbox-time { display: none; }
.pv-bars { position: absolute; z-index: 1; top: 6px; left: 8px; right: 8px; height: 2px; border-radius: 1px; background: rgb(255 255 255 / .85); }
.pv-screen-head { position: absolute; z-index: 1; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: 14px 10px 24px; background: linear-gradient(rgb(0 0 0 / .55), transparent); } /* taste-skill-ignore: a neutral scrim over the customer's media */
.pv-screen-head .pv-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-screen-side { position: absolute; z-index: 1; right: 10px; bottom: 64px; display: grid; gap: 14px; }
.pv-screen-cap { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 28px 44px 12px 12px; background: linear-gradient(transparent, rgb(0 0 0 / .7)); font-size: var(--fs-small); line-height: 18px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /* taste-skill-ignore: a neutral scrim over the customer's media */
.pv-player { padding: 10px 14px 0; }
.pv-player + .pv-text { padding-top: 6px; }

/* The customer's own graphics: what PostReach renders from their words. Their colours, not ours. */
.art { aspect-ratio: 4 / 5; padding: 8%; display: flex; flex-direction: column; justify-content: space-between; container-type: inline-size; font-family: var(--font); }
.art-wide { aspect-ratio: 16 / 9; padding: 5%; }
.art-square { aspect-ratio: 1; }
.art b { font-weight: 600; font-size: 9.5cqw; line-height: 1.12; letter-spacing: -.02em; display: block; }
.art-wide b { font-size: 6.2cqw; }
.art small { font-size: 3.6cqw; line-height: 1.3; font-weight: 500; display: block; }
.art-wide small { font-size: 2.4cqw; }
.art-a { background: #12372e; color: #f4c542; }
.art-b { background: #f4c542; color: #12372e; }
.art-c { background: #e9ece4; color: #12372e; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}
/* The working look, from the owner's words of 6 Nov 2026: "a more simple light theme and dark theme", "clean", "modern and minimalistic",
   "the landing page is fun and the dashboard is a place to work". Neutral surfaces separated by hairlines, ink for words and for the one
   primary action, a single blue for the focus ring, and Signal pink kept to the moment (now, the next post) and the counts that need you.
   These replace the tokens for the platform only: the in-chat cards read shared/tokens.css. docs/design/README.md says what each one is for. */
:root {
  --ground: #fff;                   /* the page */
  --card: #fff;                     /* a panel: a hairline sets it apart, not a tint */
  --raised: #f6f6f7;                /* wells, tracks and hover fills */
  --active: #ededf0;                /* a pressed or chosen fill, one step past --raised */
  --side: #fafafa;                  /* the sidebar, one step off the page */
  --side-hover: #f0f0f2;
  --side-current: #ebebee;          /* the open page: a neutral pill */
  --border: #e7e7ea;                /* the kit's line: panel edges */
  --rule: #f0f0f2;                  /* row rules, one step lighter */
  --control: #d6d6db;               /* outlined buttons */
  --field: #8e8e96;                 /* input edges: 3.3:1 on white */
  --switch-off: #8e8e96;            /* a switch that is off: 3.3:1 on white */

  --text: #0b0b0d;
  --quiet: #3a3a40;                 /* 11:1 on white */
  --muted: #57575f;                 /* the kit's grey 700: 7:1 on white */
  --faint: #68686f;                 /* 5.5:1 on white, 4.6:1 on the open page's pill */

  --primary: #0b0b0d;               /* the one filled button is ink, like the logo */
  --primary-hover: #2b2b31;
  --primary-ink: #fff;
  --float: #0b0b0d;                 /* tooltips and toasts: ink in light mode */
  --float-ink: #fff;
  --accent: #0f3df0;                /* the website's blue, kept to the focus ring: 7.1:1 on white */
  --focus: var(--accent);
  --count-ink: #fff;                /* a badge's number on Signal pink: white, the owner's choice (4 Nov 2026), 3.4:1, the exception in system.md */

  --data: #0b0b0d;                  /* chart marks in ink */
  --data-mid: #a1a1aa;              /* what's still to come */
  --data-quiet: #d9d9de;            /* what has already happened */

  --positive: #1a7f4b;
  --negative: #c8321e;
  --warning: #8a5a00;
  --pill-positive-bg: #e7f5ec; --pill-positive-ink: #0b5a33;
  --pill-negative-bg: #fdecea; --pill-negative-ink: #9a2414;
  --pill-warning-bg: #fbf2dc;  --pill-warning-ink: #6b4500;
  --pill-neutral-bg: #f0f0f2;  --pill-neutral-ink: #3a3a40;
  /* Needs you, in light yellow (owner, 6 Nov 2026). Words keep their contrast on it: ink 18:1, grey 6.6:1, the red alert 4.9:1. */
  --needs-bg: #fff6d6; --needs-line: #f1de9a; --needs-rule: #f3e5b3; --needs-urgent: var(--negative);

  --float-shadow: 0 10px 32px rgb(0 0 0 / .10), 0 1px 3px rgb(0 0 0 / .08), 0 0 0 1px rgb(0 0 0 / .04);

  /* A tighter, quieter scale: three sizes do the work, and the page title is the largest thing on a screen. */
  --fs-small: 13px;
  --fs-body: 14px;
  --fs-section: 16px;
  --fs-title: 24px;
  --fs-figure: 24px;                /* a headline number */

  /* Calm radii, stepping down as things nest. The Corner, the mark's one sharp corner, stays on what PostReach says to you:
     Needs you, tooltips and notices. */
  --radius-dialog: 16px;
  --radius-card: 12px;
  --radius-inner: 10px;
  --radius-field: 8px;
  --radius-control: 8px;
  --radius-chip: 6px;
  --corner-bl: 12px 12px 12px 3px;
  --net-radius: 7.6%;               /* a network's mark: the LinkedIn bug's own corner, so every square matches it */

  --sidebar-width: 232px;
  --pad: 32px;
  --gap: 16px;
  --control-height: 34px;
  --field-height: 40px;
}
:root[data-theme="dark"] {
  /* True neutral darks from the kit. Panels are one lightness step up, with a hairline. */
  --ground: #0a0a0c;
  --card: #111114;
  --raised: #18181c;
  --active: #222227;
  --side: #0e0e11;
  --side-hover: #18181c;
  --side-current: #1f1f24;
  --border: #232329;
  --rule: #1a1a1f;
  --control: #36363e;
  --field: #6e6e78;                 /* 3.9:1 on the page */
  --switch-off: #66666f;            /* 3.3:1 on a panel */

  --text: #f5f5f7;
  --quiet: #d4d4d8;
  --muted: #a8a8b2;
  --faint: #8e8e96;                 /* 5.8:1 on a panel */

  --primary: #f5f5f7;
  --primary-hover: #dcdce0;
  --primary-ink: #0a0a0c;
  --accent: #6f8bff;                /* 6.1:1 on a panel */

  --data: #f5f5f7;
  --data-mid: #6e6e78;
  --data-quiet: #34343b;

  --positive: #4cc38a;
  --negative: #ff7a66;
  --warning: #e8b04a;
  --pill-positive-bg: #10261a; --pill-positive-ink: #6fd5a2;
  --pill-negative-bg: #2c1512; --pill-negative-ink: #ff9a8a;
  --pill-warning-bg: #2a2110;  --pill-warning-ink: #edbb5c;
  --pill-neutral-bg: #232329;  --pill-neutral-ink: #c9c9cf;
  --needs-bg: #2a2110; --needs-line: #4a3a17; --needs-rule: #3a2e15; /* a deep amber: words 14.6:1 and 6.7:1, the red alert 6.2:1 */

  --float-shadow: 0 12px 32px rgb(0 0 0 / .6), 0 0 0 1px #2c2c33;
  --float: #1f1f24;                 /* tooltips and toasts stay dark in dark mode, not white (owner, 6 Nov 2026): words 15:1 */
  --float-ink: #f5f5f7;
}
@media (pointer: coarse) { :root { --control-height: 44px; --field-height: 44px; } }

/* Platform screens. Shell: open plane. Sidebar and page share one ground; plates sit on it.
   Grid at 1440: 232 sidebar + 1208 canvas. Inside the canvas: 32 + 1144 + 32.
   Split: 792 + 24 + 328 = 1144. The page centres past 1208 wide, so wide windows stay balanced. */

#app { min-height: 100dvh; }
body[data-shell="app"] #app { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); height: 100dvh; }
.skip { position: fixed; left: 12px; top: -64px; z-index: 50; background: var(--ground); padding: 8px 12px; border-radius: var(--radius-field); }
.skip:focus { top: 12px; box-shadow: var(--float-shadow); }

/* ---------- Sidebar ---------- */
.side { display: flex; flex-direction: column; min-height: 0; padding: 20px 16px 12px; background: var(--side); border-right: 1px solid var(--border); }
.brand { display: grid; gap: 18px; }
.brand .logo { margin-left: 4px; } /* at 135px wide, the mark lines up with the nav icons and the name with the nav labels */
/* Workspace switcher: in its own box, with its picture over the nav icons and its name over the nav labels. */
.ws-switch { position: relative; }
.ws-switch summary { display: flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; height: var(--field-height); padding: 0 10px 0 5px; border: 1px solid var(--control); border-radius: var(--radius-control); color: var(--text); font-weight: 500; transition: border-color var(--t-hover), background var(--t-hover); }
.ws-switch summary::-webkit-details-marker { display: none; }
.ws-switch summary { background: var(--ground); }
.ws-switch summary:hover { background: var(--raised); }
.ws-switch[open] summary { border-color: var(--text); }
.ws-switch summary:focus-visible { border-radius: var(--radius-control); }
.ws-switch summary > svg { margin-left: auto; flex: none; color: var(--muted); }
/* The same switcher on a page, the height of the buttons beside it. */
.ws-switch-field { min-width: 0; }
.ws-switch-field summary { height: var(--control-height); gap: 8px; }
.ws-av-all { background: var(--active); color: var(--text); }
.ws-av { --s: 24px; width: var(--s); height: var(--s); flex: none; display: grid; place-items: center; overflow: hidden; border-radius: calc(var(--s) * .28); font-weight: 600; font-size: calc(var(--s) * .5); line-height: 1; }
.ws-av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ws-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ws-menu { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; width: max(100%, 256px); padding: 6px; background: var(--ground); border-radius: var(--radius-inner); box-shadow: var(--float-shadow); }
.ws-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; padding: 7px 8px; border-radius: var(--radius-field); transition: background var(--t-hover); }
.ws-item:hover { background: var(--raised); }
.ws-menu-wide { width: min(372px, calc(100vw - 16px)); }
.ws-row { display: flex; align-items: center; gap: 2px; border-radius: var(--radius-field); transition: background var(--t-hover); }
.ws-row:hover { background: var(--raised); }
.ws-row .ws-item { flex: 1; min-width: 0; background: none; }
.ws-row-acts { display: inline-flex; flex: none; padding-right: 4px; }
.ws-row-acts .p-id-copy:hover { background: var(--active); }
.ws-row-acts .is-danger { color: var(--negative); }
.ws-row-acts .is-danger:hover { color: var(--negative); }
.ws-row-acts [disabled] { opacity: .4; cursor: not-allowed; }
.ws-item:focus-visible { border-radius: var(--radius-field); outline-offset: -2px; }
.ws-item-copy { display: grid; flex: 1; min-width: 0; line-height: 18px; }
.ws-new { justify-content: flex-start; gap: 6px; font-weight: 500; margin-top: 4px; border-top: 1px solid var(--rule); border-radius: 0 0 var(--radius-field) var(--radius-field); padding-top: 9px; }
.side nav { flex: 1; margin-top: 16px; display: flex; min-height: 0; }
.side nav ul { display: flex; flex-direction: column; gap: 2px; flex: 1; }
@media (min-width: 861px) { .side nav { overflow-y: auto; } .side nav ul { min-height: max-content; } } /* a very short window scrolls the list rather than running into your menu */
.side nav li.nav-end { margin-top: auto; }
.side nav a {
  display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: var(--radius-field);
  text-decoration: none; color: var(--muted); font-weight: 500; transition: background var(--t-hover), color var(--t-hover);
}
.side nav a:hover { color: var(--text); background: var(--side-hover); }
.side nav a[aria-current="page"] { background: var(--side-current); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.side nav a:focus-visible { border-radius: var(--radius-field); outline-offset: -2px; }
.side nav .nav-help button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 0 10px; border-radius: var(--radius-field); color: var(--muted); font-weight: 500; text-align: left; transition: background var(--t-hover), color var(--t-hover); }
.side nav .nav-help button:hover { color: var(--text); background: var(--side-hover); }
.side nav .nav-help button:focus-visible { border-radius: var(--radius-field); outline-offset: -2px; }
.user-help { display: none; }
.user-soon { margin-left: auto; }
.help-docs { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-inner); background: var(--raised); color: var(--text); text-decoration: none; transition: background var(--t-hover); }
.help-docs:hover { background: var(--active); }
.help-docs > span { flex: 1; min-width: 0; }
.help-docs strong { font-weight: 500; }
.help-docs svg { flex: none; }
form[data-submit="help-send"], form[data-submit="key-create"] { display: grid; gap: 14px; }
.nav-count { margin-left: auto; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--moment); color: #fff; font-size: 11px; line-height: 16px; text-align: center; font-weight: 600; }
/* The person, at the very bottom. A person's picture is round; a workspace's is square, so the two never get mixed up. */
.side-foot { position: relative; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.user-menu { position: relative; }
.user-menu summary { display: flex; align-items: center; gap: 6px; height: var(--field-height); padding: 0 10px 0 6px; border-radius: var(--radius-field); list-style: none; cursor: pointer; font-weight: 500; transition: background var(--t-hover); }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary:hover, .user-menu[open] summary { background: var(--side-hover); }
.user-menu summary:focus-visible { border-radius: var(--radius-field); outline-offset: -2px; }
.user-menu summary > svg { margin-left: auto; flex: none; color: var(--muted); }
.user-av { width: 24px; height: 24px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--ground); box-shadow: inset 0 0 0 1px var(--border); font-size: 11px; line-height: 1; font-weight: 600; }
.user-av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.user-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-pop { position: absolute; z-index: 40; left: 0; bottom: calc(100% + 6px); width: 272px; padding: 6px; background: var(--ground); border-radius: var(--radius-inner); box-shadow: var(--float-shadow); }
.user-head { display: flex; align-items: center; gap: 10px; padding: 6px 8px 8px; line-height: 18px; overflow-wrap: anywhere; }
.user-head p { min-width: 0; }
.me-pic { display: flex; align-items: center; gap: 14px; }
.me-pic-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.acc-av { position: relative; display: block; flex: none; }
.acc-av-face { position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border-radius: var(--radius-field); font-weight: 600; line-height: 1; }
/* The account's own picture, over its initials. White behind it, because a logo is often drawn for white, and the panel's hairline over its edge, so a
   white logo still reads as a square on a white card. If it won't load it's taken away, and the initials and their plain edge are what's left. */
.acc-av-pic { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.acc-av-face:has(> .acc-av-pic)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--border); pointer-events: none; }
.acc-av-net { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; padding: 1px; border-radius: 6px; background: var(--ground); color: var(--text); }
.acc-av-net .mark { display: block; }
.acc-av[data-issue]::after { content: ""; position: absolute; left: -1px; top: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--negative); box-shadow: 0 0 0 2px var(--ground); }
.pick.is-off .acc-av[data-issue]::after, .pick.is-off .acc-av-net { box-shadow: 0 0 0 2px var(--raised); }
.pick.is-off .acc-av-net { background: var(--raised); }
.user-group { padding-top: 6px; margin-top: 6px; border-top: 1px solid var(--rule); }
.user-item { justify-content: flex-start; gap: 10px; color: var(--text); text-decoration: none; }
.user-item > svg { flex: none; }
.user-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; padding: 2px 8px; }
.user-row > label, .user-row > span { display: inline-flex; align-items: center; gap: 10px; }
.user-row select, .user-group .proto select { width: auto; flex: none; min-height: 30px; padding: 2px 8px; font-size: var(--fs-small); border-color: var(--control); border-radius: var(--radius-control); }
.user-group .proto { display: grid; gap: 4px; padding: 2px 8px 4px; }
.user-group .proto select { width: 100%; }
.theme button { padding: 0 8px; }
.proto { font-size: var(--fs-small); color: var(--muted); }

/* ---------- Canvas ---------- */
.sheet { padding: 28px var(--pad) var(--pad); overflow-y: auto; min-width: 0; outline: none; }
.page { max-width: 1144px; margin-inline: auto; }
.title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: var(--gap); }
.title-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.finding { color: var(--muted); margin-top: 2px; font-size: var(--fs-body); }
.num { font-variant-numeric: tabular-nums; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.only-phone { display: none; }

/* ---------- Needs you: PostReach speaking, so it has the Corner ---------- */
.needs { background: var(--raised); border-radius: var(--corner-bl); padding: 14px 16px 6px; margin-bottom: var(--gap); }
.needs h2 { margin-bottom: 2px; }
.needs-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 56px; padding: 8px 0; }
.needs-row + .needs-row { border-top: 1px solid var(--border); }
.missed { display: grid; gap: 12px; }
.missed-list { list-style: none; margin: 0; padding: 0; max-height: 44vh; overflow-y: auto; }
.missed-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; }
.missed-row + .missed-row { border-top: 1px solid var(--border); }
.missed-copy { display: grid; gap: 2px; min-width: 0; }
.missed-copy strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.needs-copy { display: grid; min-width: 0; }
.needs-copy strong { font-weight: 500; }
.needs-sub { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.needs-act { display: flex; gap: 8px; flex: none; }
.tone-negative { color: var(--negative); }
.tone-warning { color: var(--warning); }
.tone-accent { color: var(--text); }

/* ---------- Dashboard: widgets on one grid ---------- */
.dash { display: grid; grid-template-columns: minmax(0, 1fr) 328px; gap: 12px; align-items: start; }
.dash-main, .dash-side { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.tile { display: grid; gap: 2px; height: 100%; padding: 14px 16px; border-radius: var(--radius-card); background: var(--raised); text-decoration: none; color: var(--text); transition: background var(--t-hover); }
.tile:hover { background: var(--active); }
.tile:focus-visible { border-radius: var(--radius-card); }
.tile-label { color: var(--muted); }
.tile-value { font-size: 28px; line-height: 36px; font-weight: 500; letter-spacing: -.02em; }
.tile-sub { color: var(--muted); font-size: var(--fs-small); line-height: 18px; }
.widget { padding: 14px 16px; border-radius: var(--radius-card); box-shadow: inset 0 0 0 1px var(--border); min-width: 0; }
.widget-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.widget-next .widget-head { align-items: center; }
.widget-more { margin: 8px 0 2px 70px; }
.widget-empty { padding: 12px 0; }
.dash-side .widget { background: var(--raised); box-shadow: none; }
.best { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; border-radius: var(--radius-field); }
.best:hover .best-text { text-decoration: underline; text-decoration-color: var(--control); text-underline-offset: 3px; }
.best-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; }
.best-who { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.best-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.best-figures dd { font-size: var(--fs-section); line-height: 22px; font-weight: 500; }
/* ---------- Posts: one bar of filters, then a grid, a list or a calendar ---------- */
.posts-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.posts-filters, .posts-view { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.filter summary { color: var(--muted); font-weight: 400; padding-left: 10px; }
.filter summary > .tok { margin-left: -4px; }
.filter.is-set summary, .filter[open] summary { color: var(--text); border-color: var(--text); }
.filter .ws-menu { width: max(100%, 232px); max-width: calc(100vw - 16px); }
.posts-clear { color: var(--muted); }
/* Every column is centred except the post's own words, which read better from the left. */
.table.p-table th { white-space: nowrap; text-align: center; }
.p-nets, .p-when, .p-status, .p-ws, .p-num { text-align: center; }
.p-table td { padding-top: 8px; padding-bottom: 8px; }
.p-post { width: 34%; min-width: 240px; }
.p-open { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border-radius: var(--radius-field); }
.p-open:hover .p-text { text-decoration: underline; text-decoration-color: var(--control); text-underline-offset: 3px; }
.p-open .thumb { width: 40px; height: 40px; }
.p-open .thumb .art { transform: scale(.25); }
.thumb.thumb-text { display: grid; place-items: center; background: var(--raised); color: var(--muted); }
.p-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; }
.p-when { white-space: nowrap; line-height: 18px; }
.p-num { width: 1%; white-space: nowrap; }
.p-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.p-grid > li { min-width: 0; }
.p-card { display: flex; flex-direction: column; width: 100%; height: 100%; border-radius: var(--radius-card); box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow var(--t-hover); }
.p-card:hover { box-shadow: inset 0 0 0 1px var(--control); }
.p-card-open { display: flex; flex-direction: column; flex: 1; width: 100%; text-align: left; border-radius: var(--radius-card) var(--radius-card) 0 0; }
.p-card-open:focus-visible { border-radius: var(--radius-card) var(--radius-card) 0 0; }
.p-face { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-card) var(--radius-card) 0 0; background: var(--raised); flex: none; width: 100%; }
.p-face .art { width: 100%; height: 100%; aspect-ratio: auto; }
.p-face-text { flex: 1 1 auto; aspect-ratio: auto; min-height: 168px; padding: 14px 16px; }
.p-face-words { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--fs-section); line-height: 22px; }
.p-play { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; display: grid; place-items: center; border-radius: 50%; background: rgb(0 0 0 / .55); color: #fff; }
.p-chip { position: absolute; right: 8px; bottom: 8px; padding: 0 6px; border-radius: var(--radius-chip); background: rgb(0 0 0 / .7); color: #fff; font-size: var(--fs-small); line-height: 20px; }
.p-card-copy { display: grid; gap: 8px; padding: 10px 12px; align-content: start; flex: none; width: 100%; min-width: 0; }
.p-card-top, .p-card-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; min-width: 0; }
.p-kind { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: var(--fs-small); line-height: 18px; }
.p-kind svg { flex: none; }
.p-card-when { white-space: nowrap; }
.p-figs { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.p-fig { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-small); line-height: 18px; font-weight: 500; }
.p-fig svg { flex: none; color: var(--muted); }
.p-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding: 4px 6px 4px 12px; border-top: 1px solid var(--rule); }
.p-id { display: inline-flex; align-items: center; gap: 2px; min-width: 0; color: var(--muted); }
.p-id code, .row-id code, .post-id code { font-size: 12px; }
.p-id-copy, .p-act { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: var(--radius-control); color: var(--muted); transition: background var(--t-hover), color var(--t-hover); }
.p-id-copy { width: 26px; height: 26px; }
.p-id-copy:hover, .p-act:hover { background: var(--raised); color: var(--text); }
.p-act[data-act="delete-post"], .p-act[data-act="delete-post"]:hover { color: var(--negative); }
.p-card-acts { display: inline-flex; gap: 2px; flex: none; }
.p-thumb { position: relative; display: block; flex: none; width: 40px; height: 40px; }
.p-thumb-mark { position: absolute; right: 3px; bottom: 3px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: var(--radius-chip); background: rgb(0 0 0 / .65); color: #fff; }
.p-more { width: 1%; text-align: right; }
.table td.p-more { padding-left: 4px; padding-right: 0; }
.row-menu { position: relative; display: inline-block; }
.row-menu summary { display: grid; place-items: center; width: 30px; height: 30px; list-style: none; cursor: pointer; border-radius: var(--radius-control); color: var(--muted); transition: background var(--t-hover), color var(--t-hover); }
.row-menu summary::-webkit-details-marker { display: none; }
.row-menu summary:hover, .row-menu[open] summary { background: var(--raised); color: var(--text); }
.row-menu summary:focus-visible { border-radius: var(--radius-control); }
.row-menu .ws-menu { left: auto; right: 0; width: 232px; text-align: left; font-size: var(--fs-body); }
.row-id { padding: 6px 8px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--rule); }
.ws-item.is-danger { color: var(--negative); }
.post-id { align-items: center; }
.del-group { display: grid; gap: 4px; }
.del-group h3 { font-size: var(--fs-small); line-height: 18px; font-weight: 500; color: var(--muted); }
.del-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 0; }
.del-who { min-width: 0; line-height: 18px; overflow-wrap: anywhere; }
/* More than four accounts on a post: a bubble, and every account on hover or focus. */
.toks { align-items: center; gap: 0; }
/* Marks overlap a little, each on its own disc, so several take up little room and still read one by one. */
.toks > .tok { width: 28px; height: 28px; border-radius: 50%; background: var(--ground); box-shadow: inset 0 0 0 1px var(--border); }
.toks > .tok .mark { width: 16px; height: 16px; }
.toks > .tok + .tok, .toks > .tok + .nets-more { margin-left: -6px; }
.nets-more { position: relative; display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--active); box-shadow: inset 0 0 0 1px var(--border); color: var(--text); font-size: 11px; font-weight: 600; line-height: 1; cursor: default; }
.nets-more:focus-visible { border-radius: var(--radius-pill); }
.nets-more[data-issue]::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 2px var(--ground); }
.nets-more[data-issue="error"]::after { background: var(--negative); }
.nets-pop { position: absolute; z-index: 30; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); display: none; gap: 2px; width: max-content; min-width: 200px; max-width: 300px; padding: 6px; background: var(--ground); color: var(--text); border-radius: var(--radius-inner); box-shadow: var(--float-shadow); text-align: left; font-size: var(--fs-small); font-weight: 400; line-height: 18px; }
.nets-more:hover > .nets-pop, .nets-more:focus > .nets-pop { display: grid; }
.nets-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 3px 6px; }
.nets-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nets-net { color: var(--muted); }
.p-card .nets-pop, .t-meta .nets-pop { left: 0; transform: none; }
.m-mark { flex: none; display: inline-flex; align-items: center; }
.m-mark .tok { width: 16px; height: 16px; border-radius: 50%; background: var(--ground); box-shadow: 0 0 0 1px var(--ground); }
.m-mark .tok + .tok { margin-left: -4px; }
.m-mark .mark { width: 12px; height: 12px; }
.m-more { margin-left: 2px; font-size: 11px; line-height: 16px; font-weight: 600; }
.more-opts { border-top: 1px solid var(--rule); padding-top: 10px; }
.more-opts > summary { font-weight: 500; cursor: pointer; }
.more-opts > .net-fields { margin-top: 12px; }
.yt-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.yt-thumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.yt-thumb img { display: block; border-radius: var(--radius-chip); object-fit: cover; }
.yt-thumb-big { display: block; width: 100%; height: 100%; object-fit: cover; }
.more-opts .over { color: var(--negative); font-weight: 600; }
.t-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.zone { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); font-size: var(--fs-small); }

/* ---------- Timeline: one axis, with now on it ---------- */
.t-day { scroll-margin-top: 16px; }
.t-day + .t-day { margin-top: 20px; }
.t-day h3 { margin-bottom: 4px; }
.t-day h3 .muted { font-weight: 400; margin-left: 4px; }
.t-row { position: relative; display: grid; grid-template-columns: 44px 22px minmax(0, 1fr) auto; align-items: start; column-gap: 4px; }
.t-row::before { content: ""; position: absolute; left: 58.5px; top: 0; bottom: 0; width: 1px; background: var(--border); }
.t-time { padding-top: 10px; color: var(--muted); }
.t-node { position: relative; justify-self: center; margin-top: 15px; width: 9px; height: 9px; border-radius: 50%; background: var(--ground); box-shadow: inset 0 0 0 1.5px var(--text), 0 0 0 3px var(--ground); z-index: 1; }
.t-row[data-state="published"] .t-node { background: var(--data-quiet); box-shadow: 0 0 0 3px var(--ground); }
.t-row[data-state="held"] .t-node, .t-row[data-state="unknown"] .t-node { box-shadow: inset 0 0 0 1.5px var(--warning), 0 0 0 3px var(--ground); }
.t-row[data-state="partial"] .t-node { box-shadow: inset 0 0 0 1.5px var(--negative), 0 0 0 3px var(--ground); }
.t-row[data-state="draft"] .t-node { box-shadow: inset 0 0 0 1.5px var(--faint), 0 0 0 3px var(--ground); }
.t-row[data-state="sending"] .t-node { background: var(--text); }
.t-body { text-align: left; display: grid; gap: 4px; padding: 8px 10px; border-radius: var(--radius-field); min-width: 0; transition: background var(--t-hover); }
.t-body:hover { background: var(--raised); }
.t-body:focus-visible { border-radius: var(--radius-field); outline-offset: -2px; }
.t-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 72ch; }
.t-row[data-past="true"] .t-text { color: var(--muted); }
.t-meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--fs-small); line-height: 16px; min-height: 24px; flex-wrap: wrap; }
.t-acct { min-width: 0; }
/* The next post leads: it answers the screen's question. */
.t-row.is-next .t-body { padding-top: 8px; padding-bottom: 10px; }
.t-row.is-next .t-text { font-size: var(--fs-section); line-height: 24px; font-weight: 500; letter-spacing: -.005em; -webkit-line-clamp: 3; }
.t-row.is-next .t-time { color: var(--text); font-weight: 600; }
.t-row.is-next .t-node { background: var(--text); }
.t-next { color: var(--text); font-weight: 600; }
.thumb { display: block; width: 48px; height: 48px; border-radius: var(--radius-field); overflow: hidden; flex: none; }
.t-row .thumb { margin-top: 8px; }
.thumb .art { width: 160px; height: 160px; aspect-ratio: 1; transform: scale(.3); transform-origin: 0 0; }
.thumb .art small { display: none; } /* a caption this small is noise, in a real thumbnail too */
/* The moment. The dot is the logo's dot, and it sits on the axis. */
.t-now { position: relative; display: flex; align-items: center; height: 28px; }
.t-now::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--moment); }
.t-now-dot { position: absolute; left: 53px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: var(--moment); box-shadow: 0 0 0 3px var(--ground); }
.t-now-label { position: relative; margin-left: 67px; padding: 0 8px 0 7px; background: var(--ground); font-size: var(--fs-small); font-weight: 600; }
.t-earlier { margin: 0 0 16px 70px; }
.t-empty { color: var(--muted); padding: 12px 0 12px 70px; }
.timeline-solo { margin-top: 4px; }
.first-try { margin: 8px 0 0 70px; max-width: 72ch; }
.first-try p { color: var(--muted); }

/* ---------- Rail ---------- */
.rail-block { background: var(--raised); border-radius: var(--radius-card); padding: 14px 16px; }
.rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rail-note { margin-top: 2px; }
.with-tip { display: inline-flex; align-items: center; gap: 2px; }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 10px; }
.week-day { width: 100%; display: grid; justify-items: center; gap: 4px; padding: 2px 0 4px; border-radius: var(--radius-chip); color: var(--text); transition: background var(--t-hover); }
.week-day:not([disabled]):hover { background: var(--active); }
.week-day[disabled] { cursor: default; color: var(--faint); }
.week-n { font-size: var(--fs-small); line-height: 16px; }
.week-bar { display: flex; align-items: flex-end; width: 20px; height: 44px; box-shadow: 0 1px 0 var(--control); }
.week-bar span { display: block; width: 100%; background: var(--data); border-radius: 4px 4px 0 0; }
.week-day.is-past .week-bar span { background: var(--data-quiet); }
.week-label { font-size: var(--fs-small); line-height: 16px; color: var(--muted); }
.week-day.is-today .week-label { color: var(--text); font-weight: 600; }
.rail-accounts { margin-top: 8px; display: grid; gap: 2px; }
.rail-accounts li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 40px; }
.rail-accounts .tok[data-issue]::after { box-shadow: 0 0 0 2px var(--raised); }
.rail-name { display: grid; min-width: 0; line-height: 16px; }
.rail-name > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-assistant { margin-top: 6px; }

/* ---------- First visit ---------- */
.setup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); margin-bottom: var(--gap); }
.setup-col { background: var(--raised); border-radius: var(--radius-card); padding: 16px; display: grid; gap: 10px; align-content: start; }
.setup-col h2 { display: flex; align-items: center; gap: 8px; }
.setup-col.is-done h2 svg { color: var(--positive); }
.setup-links { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.setup-promise { color: var(--muted); }
.setup-ready { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; background: var(--raised); border-radius: var(--corner-bl); padding: 16px; gap: var(--gap); }
.prompt-copy { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 14px; background: var(--ground); border-radius: var(--radius-inner); box-shadow: inset 0 0 0 1px var(--border); margin-top: 8px; }
.prompt-copy q { quotes: none; }
.prompt-copy .btn { flex: none; }

.net-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.net-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; height: 100%; text-align: left; padding: 10px 12px; min-height: 64px;
  background: var(--ground); border: 1px solid var(--border); border-radius: var(--radius-inner); transition: border-color var(--t-hover), transform var(--t-press) var(--ease-out);
}
.net-btn:hover { border-color: var(--text); }
.net-btn:active { transform: scale(.99); }
.net-btn:focus-visible { border-radius: var(--radius-inner); }
.net-btn[disabled] { cursor: default; background: var(--raised); border-color: var(--raised); color: var(--muted); }
.net-copy { display: grid; line-height: 18px; min-width: 0; }
.net-copy strong { font-weight: 600; }

/* ---------- Connect panel ---------- */
.conn-phone { flex: none; }
.qr-wrap { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 16px; align-items: center; }
.qr { width: 148px; height: 148px; padding: 10px; background: var(--pr-white); color: var(--pr-black); border-radius: var(--radius-inner); box-shadow: inset 0 0 0 1px var(--border); }
.qr svg { display: block; width: 100%; height: 100%; }
.how-text { margin-top: 8px; }

/* ---------- Inbox: coming soon. Our own layout: one list, one reading pane, on a plate. ---------- */
.with-pill { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.with-pill .pill { font-weight: 500; letter-spacing: 0; }
.nav-soon { margin-left: auto; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--pill-warning-bg); color: var(--pill-warning-ink); font-size: 11px; line-height: 16px; font-weight: 500; }
.ib-tabs { margin-bottom: 14px; }
.ib-tabs a { display: inline-flex; align-items: center; gap: 6px; }
/* The Inbox isn't built yet: a real sense of it, blurred, with a padlock over it. It fills what's left of the window. */
.ib-wrap { position: relative; display: grid; min-height: max(440px, calc(100dvh - 190px)); overflow: hidden; border-radius: var(--radius-card); box-shadow: inset 0 0 0 1px var(--border); }
.ib-wrap .ib { filter: blur(5px); user-select: none; pointer-events: none; border-radius: 0; box-shadow: none; }
.ib-lock { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; background: color-mix(in srgb, var(--ground) 45%, transparent); }
.ib-lock h2 { font-size: var(--fs-title, 20px); font-weight: 600; }
.ib-lock p { max-width: 44ch; }
.ib-lock .btn { margin-top: 6px; }
.ib-padlock { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ground); box-shadow: inset 0 0 0 1px var(--border); }
.ib { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
.ib-list, .ib-read { background: var(--ground); min-width: 0; }
.ib-filters { display: flex; gap: 6px; padding: 10px 12px; flex-wrap: wrap; }
.ib-filter { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-control); background: var(--raised); color: var(--muted); font-size: var(--fs-small); line-height: 18px; }
.ib-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--rule); }
.ib-row.is-open { background: var(--raised); }
.ib-row-copy { display: grid; gap: 1px; min-width: 0; line-height: 18px; }
.ib-who { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.ib-unread { width: 7px; height: 7px; border-radius: 50%; background: var(--text); }
.ib-text { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ib-read { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 360px; }
.ib-read-head { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.ib-read-body { padding: 16px; }
.ib-bubble { max-width: 56ch; background: var(--raised); padding: 10px 14px; border-radius: var(--corner-bl); }
.ib-reply { display: flex; gap: 8px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--rule); }
.ib-input { flex: 1; min-width: 0; min-height: var(--field-height); display: flex; align-items: center; padding: 0 12px; color: var(--faint); border-radius: var(--radius-field); box-shadow: inset 0 0 0 1px var(--control); }
.ib-send { flex: none; display: inline-flex; align-items: center; height: var(--control-height); padding: 0 14px; border-radius: var(--radius-control); background: var(--raised); color: var(--faint); font-weight: 500; }

/* ---------- Analytics: type first, one series in ink ---------- */
.a-select { width: auto; min-height: var(--control-height); padding: 4px 10px; border-radius: var(--radius-control); border-color: var(--control); }
.x-note { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px; align-items: center; background: var(--raised); border-radius: var(--corner-bl); padding: 12px 16px; margin-bottom: var(--gap); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--gap); }
.kpi { display: grid; gap: 2px; padding: 2px 16px; min-width: 0; }
.kpi:first-child { padding-left: 0; }
.kpi + .kpi { border-left: 1px solid var(--border); }
.kpi-label { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); }
.kpi-value { font-size: var(--fs-title); line-height: 32px; font-weight: 400; letter-spacing: -.01em; }
.kpi-delta { color: var(--muted); font-size: var(--fs-small); line-height: 18px; }
.a-split { display: grid; grid-template-columns: minmax(0, 1fr) 328px; gap: var(--gap); align-items: start; margin-bottom: 28px; }
.a-chart { padding: 14px 16px; border-radius: var(--radius-card); box-shadow: inset 0 0 0 1px var(--border); }
.a-chart .section-head { margin-bottom: 8px; }
.a-bars { display: grid; grid-template-columns: repeat(var(--days), minmax(0, 1fr)); gap: 2px; align-items: end; }
.a-bar { display: grid; justify-items: center; gap: 6px; min-width: 0; }
.a-col { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: var(--bar-h, 164px); box-shadow: 0 1px 0 var(--control); }
.a-col span { display: block; width: min(24px, 80%); background: var(--data-quiet); border-radius: 4px 4px 0 0; }
.a-bar.is-peak .a-col span { background: var(--data); }
.a-label { font-size: var(--fs-small); line-height: 18px; color: var(--muted); white-space: nowrap; min-height: 18px; }
.a-accounts { display: grid; gap: 12px; margin-top: 10px; }
.a-accounts li { display: grid; gap: 4px; }
.a-acc-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.a-acc-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-track { display: block; height: 4px; }
.a-track span { display: block; height: 100%; background: var(--data); border-radius: 2px; }
.a-posts-head { margin-bottom: 0; }
.a-table th { white-space: nowrap; }
.a-post { max-width: 560px; }
.a-post-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.a-post-meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.a-empty { padding: 16px 0; }

/* ---------- Month ---------- */
.month-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.month-nav { display: flex; align-items: center; gap: 8px; }
.month-nav h2 { min-width: 148px; text-align: center; }
.month-head .zone { margin-left: auto; }
.m-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
.m-dow { background: var(--ground); padding: 6px 8px; font-size: var(--fs-small); color: var(--muted); }
.m-cell { background: var(--ground); min-height: 112px; padding: 6px; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 4px; min-width: 0; }
.m-cell.is-weekend, .m-cell.is-out { background: var(--raised); }
.m-cell.is-out .m-date { color: var(--faint); }
.m-date { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-small); line-height: 22px; padding-left: 4px; }
.m-cell.is-today .m-date { font-weight: 600; }
.m-cell.is-today .m-date::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--moment); }
.m-cell ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; }
.m-chip { display: flex; gap: 6px; width: 100%; text-align: left; font-size: var(--fs-small); line-height: 16px; padding: 2px 5px; border: 1px solid transparent; border-radius: var(--radius-chip); background: var(--raised); color: var(--text); min-width: 0; overflow: hidden; font-weight: 500; transition: border-color var(--t-hover); }
.m-chip:hover { border-color: var(--text); }
.m-cell.is-weekend .m-chip, .m-cell.is-out .m-chip { background: var(--active); }
.m-chip[data-state="published"], .m-cell.is-weekend .m-chip[data-state="published"], .m-cell.is-out .m-chip[data-state="published"] { background: none; color: var(--muted); font-weight: 400; }
.m-chip[data-state="held"], .m-chip[data-state="unknown"] { background: var(--pill-warning-bg); color: var(--pill-warning-ink); }
.m-chip[data-state="partial"] { background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
.m-chip[data-state="draft"] { background: none; border-color: var(--control); color: var(--text); }
.m-chip[data-state="draft"]:hover { border-color: var(--text); }
.m-time { flex: none; }
.m-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; min-width: 0; }

/* ---------- Accounts ---------- */
.table-wrap { margin-bottom: 32px; }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-weight: 400; color: var(--muted); font-size: var(--fs-small); height: 36px; padding: 0 12px; }
.table th:first-child, .table td:first-child { padding-left: 0; }
.table th:last-child, .table td:last-child { padding-right: 0; }
.table td { padding: 10px 12px; border-top: 1px solid var(--rule); vertical-align: middle; }
.num-col { text-align: right !important; }
.acct-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.acct-id > span:last-child { display: grid; min-width: 0; }
.can-post { display: inline-flex; align-items: center; gap: 4px; }
.can-post > svg:first-child { color: var(--positive); }
.cell-act { text-align: right; white-space: nowrap; width: 1%; }
.cell-act .btn + .btn { margin-left: 8px; }
.cell-act .btn-quiet { color: var(--muted); }
.cell-act .btn-quiet:hover { color: var(--text); }
/* A card per connected account, and a card to connect each network that has none. Connected ones sit on a plate, so what's connected reads at a glance. */
.acc-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.acc-bar-ws { display: flex; align-items: center; gap: 4px; min-width: 0; }
.acc-layout button { padding: 0 8px; }
.ncards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 12px; }
.ncard { display: flex; flex-direction: column; gap: 12px; min-height: 152px; padding: 14px; border-radius: var(--radius-card); box-shadow: inset 0 0 0 1px var(--border); }
.ncard.is-on { background: var(--raised); box-shadow: none; }
.ncard-head { display: flex; align-items: flex-start; gap: 10px; }
.tok-link { display: inline-flex; flex: none; border-radius: var(--radius-chip); }
.ncard-head .net-copy { flex: 1; }
.ncard-head .net-copy .pill { justify-self: start; }
.ncard-head .tip-btn { margin: 0; flex: none; }
/* A connected card leads with the account: its picture, with the network on the corner, then its name. */
.ncard-person { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; }
.ncard-person .acc-av { grid-row: 1 / span 2; align-self: center; }
.ncard-name { grid-column: 2; grid-row: 1; align-self: end; font-weight: 600; line-height: 20px; overflow-wrap: anywhere; }
.ncard-sub { grid-column: 2 / -1; grid-row: 2; align-self: start; line-height: 18px; overflow-wrap: anywhere; }
.ncard-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; min-height: 22px; }
.ncard-meta .pill[data-tip] { cursor: help; }
/* Networks not connected yet line up with the pictures above them. */
.ncard:not(.is-on) .ncard-head > .tok { width: 44px; height: 44px; border-radius: var(--radius-field); background: var(--raised); }
.ncard:not(.is-on) .ncard-head { align-items: center; gap: 12px; }
.ncard:not(.is-on) .ncard-head > .tip-btn { align-self: flex-start; }
.ncard-ws { display: flex; align-items: center; gap: 6px; }
.ncard-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.ncard-login { flex: 1 1 0; justify-content: center; min-width: 88px; padding-inline: 8px; }
.ncard.is-soon .ncard-actions .btn { flex: 1; justify-content: center; }
.ncard.is-on .ncard-actions .btn { flex: 1 1 0; }
.ncard-tools { grid-column: 3; grid-row: 1; display: inline-flex; flex: none; margin: -6px -6px 0 4px; }
.ncard-tools .p-act[data-tone="negative"] { color: var(--negative); }
.ncard-tools .p-act[data-tone="warning"] { color: var(--warning); }
.cell-act .row-menu { margin-left: 4px; vertical-align: middle; }
.health { display: grid; align-content: start; gap: 22px; }
.health h3 { margin-bottom: 8px; font-size: var(--fs-body); font-weight: 600; }
.health h4 { margin: 12px 0 6px; font-size: var(--fs-small); font-weight: 400; color: var(--muted); }
.health section > p { margin-top: 8px; }
.health-who { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.dlg-head h2 .pill { margin-left: 6px; vertical-align: 2px; font-weight: 500; }
.health-rows { border-radius: var(--radius-inner); box-shadow: inset 0 0 0 1px var(--border); }
.health-rows > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 16px; padding: 10px 12px; }
.health-rows > div + div { border-top: 1px solid var(--rule); }
.health-rows dt { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.health-rows dd { text-align: right; }
.health-rows dd .link { margin-left: 8px; }
.health-rows .is-good { color: var(--pill-positive-ink); font-weight: 500; }
.health-rows .is-bad { color: var(--negative); font-weight: 500; }
.health-rows .is-warn { color: var(--pill-warning-ink); font-weight: 500; }
.scopes { display: flex; flex-wrap: wrap; gap: 6px; }
.scope { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 5px; max-width: 100%; padding: 3px 8px; border-radius: var(--radius-chip); background: var(--raised); color: var(--muted); font-size: var(--fs-small); line-height: 18px; overflow-wrap: anywhere; }
.scope svg { flex: none; }
.scope.is-on { background: var(--pill-positive-bg); color: var(--pill-positive-ink); }
.scope-for { flex-basis: 100%; padding-left: 17px; font-size: 12px; }
.btn-wide { width: 100%; justify-content: center; }
.pill svg { flex: none; }
.x-range { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; width: 100%; }
.x-month { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.x-month.is-on { color: var(--text); }
.x-month-name { min-width: 124px; text-align: center; font-weight: 500; }
.row-acts { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; }
.row-acts .btn { margin-right: 4px; }
.p-act.p-bin, .p-act.p-bin:hover { color: var(--negative); }
.keys { display: grid; gap: 20px; }
.keys-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; }
.keys-head h2 { font-size: var(--fs-body); font-weight: 600; }
.keys-table { overflow-x: auto; border-radius: var(--radius-inner); box-shadow: inset 0 0 0 1px var(--border); }
.keys-table .table td { padding: 10px 12px; border-top: 1px solid var(--rule); }
.keys-table .table th { padding: 0 12px; }
.keys-table .table th:first-child, .keys-table .table td:first-child { padding-left: 12px; }
.keys-table .table th:last-child { width: 1%; }
.keys-table code { font-size: var(--fs-small); }
.key-name strong { font-weight: 500; }
.keys-empty { padding: 24px; text-align: center; border-radius: var(--radius-inner); box-shadow: inset 0 0 0 1px var(--border); }
.keys-banner { padding: 14px 16px; border-radius: var(--radius-card); background: var(--raised); }
.keys-banner h3 { margin-bottom: 6px; font-size: var(--fs-body); font-weight: 600; }
.key-facts { display: grid; gap: 4px; }
.key-facts > div { display: flex; justify-content: space-between; gap: 16px; }
.key-facts dt { color: var(--muted); }
.key-facts dd { text-align: right; }
.ncards-note { margin-top: 14px; }
.acc-table .acct-id .net-copy { overflow-wrap: anywhere; }
.acc-ws { display: inline-flex; align-items: center; gap: 6px; }
.acc-empty { background: var(--raised); border-radius: var(--radius-card); padding: 24px 16px; text-align: center; }
/* New connection: every network in one list, and where the new account goes. */
.conn-body { display: grid; gap: 14px; align-content: start; }
.conn-target-row { display: flex; align-items: center; gap: 10px; }
.conn-target-row select { flex: 1; min-width: 0; }
.conn-list { display: grid; }
.conn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 64px; padding: 10px 0; }
.conn-row + .conn-row { border-top: 1px solid var(--rule); }
.conn-row .net-copy { flex: 1 1 130px; }
.conn-name { display: inline-flex; align-items: center; gap: 2px; }
.conn-row-actions { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
.conn-another { background: var(--raised); border-radius: var(--radius-inner); padding: 10px 12px; }
/* A workspace's picture */
.ws-picture-row { display: flex; align-items: flex-start; gap: 14px; }
.ws-picture-tools { display: grid; gap: 8px; min-width: 0; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.swatch { position: relative; width: 26px; height: 26px; border-radius: 8px; overflow: hidden; display: block; cursor: pointer; }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--text); }
.swatch-any { display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--control); color: var(--muted); }
.swatch-any:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.swatch-any input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.ws-picture-image { display: flex; flex-wrap: wrap; gap: 4px; margin-left: -8px; }
.x-balance { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.x-balance-value { font-size: 28px; line-height: 34px; font-weight: 500; letter-spacing: -.01em; }
.cmp-ws { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.add-accounts { margin-top: 8px; }

/* ---------- Assistant ---------- */
.as-grid { display: grid; grid-template-columns: minmax(0, 1fr) 328px; gap: var(--gap); align-items: start; }
.as-block + .as-block { margin-top: 28px; }
.as-main .tabs { margin-top: 4px; }
.as-panel { padding-top: 16px; }
.steps { counter-reset: step; display: grid; gap: 16px; }
.steps > li { counter-increment: step; position: relative; padding-left: 34px; display: grid; gap: 8px; }
.steps > li::before { content: counter(step); position: absolute; left: 0; top: -2px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--raised); font-size: var(--fs-small); font-weight: 600; }
.steps .field > label { font-weight: 400; color: var(--muted); font-size: var(--fs-small); }
.plain-rows { display: grid; }
.plain-rows li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 0; }
.plain-rows li + li { border-top: 1px solid var(--rule); }
.plain-rows strong { font-weight: 500; }
.sign-in { display: flex; align-items: center; gap: 12px; min-width: 0; overflow-wrap: anywhere; }
.sign-in > svg { flex: none; }
.pw-field { display: flex; gap: 8px; }
.pw-field input { flex: 1; min-width: 0; }
.pw-field .btn { flex: none; height: var(--field-height); }
/* Show and hide a password: an eye, crossed out while the password shows. */
.pw-eye { position: relative; width: var(--field-height); padding: 0; justify-content: center; }
.pw-eye.is-on::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2px; height: 22px; margin: -11px 0 0 -1px; border-radius: 1px; background: currentColor; transform: rotate(-45deg); }
.pw-forgot { justify-self: start; }
.as-side { background: var(--raised); border-radius: var(--radius-card); padding: 14px 16px 16px; }
.can-list { display: grid; gap: 8px; margin-top: 8px; }
.can-list li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; }
.can-list svg { margin-top: 3px; color: var(--positive); }
.can-not svg { color: var(--muted); }
.can-h2 { margin-top: 18px; }
.can-note { margin-top: 16px; }

/* ---------- Settings: each section a row, label beside panel ---------- */
.title-tabs { margin-bottom: 8px; }
.set-tabs { margin-bottom: 24px; }
.set-row { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 32px; padding-bottom: 28px; }
.set-row + .set-row { border-top: 1px solid var(--rule); padding-top: 28px; }
.dlg-warn { display: inline-flex; margin-right: 8px; color: var(--negative); vertical-align: -4px; }
.danger-panel { background: none; box-shadow: inset 0 0 0 1px var(--negative); }
.danger-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.danger-item > div { flex: 1 1 260px; min-width: 0; }
.danger-item p { margin-top: 2px; }
.danger-list { display: grid; gap: 4px; margin: 8px 0 12px; }
.danger-list li { display: flex; align-items: flex-start; gap: 8px; }
.danger-list svg { flex: none; margin-top: 3px; color: var(--negative); }
form[data-submit="danger-code"] { display: grid; justify-items: start; gap: 10px; }
form[data-submit="danger-code"] .field, form[data-submit="danger-code"] .dlg-actions { width: 100%; }
.code-row { display: flex; align-items: center; gap: 12px; }
.code-input { flex: 1; min-width: 0; font-size: 20px; letter-spacing: .16em; }
.code-timer { display: inline-flex; flex: none; align-items: center; gap: 5px; min-width: 58px; color: var(--muted); font-weight: 500; }
.code-timer.is-low { color: var(--negative); }
.field-error { color: var(--negative); margin-top: 6px; overflow-wrap: anywhere; }
.set-label p { margin-top: 4px; }
.set-label h2 { display: flex; align-items: center; gap: 4px; }
.set-panel { background: var(--raised); border-radius: var(--radius-card); padding: 16px; display: grid; gap: 16px; justify-items: start; }
.set-panel > .field, .set-panel > .plain-rows, .set-panel > .key-reveal, .set-panel > .invite { width: 100%; }
.set-panel .plain-rows li + li { border-top-color: var(--border); }
.invite { display: flex; align-items: flex-end; gap: 8px; }
.invite .field { flex: 1; }
.invite .btn { height: var(--field-height); }
.key-reveal { display: grid; gap: 8px; }
.saved-note { margin-top: -6px; }
.compare { font-size: var(--fs-body); }
.compare th[scope="row"] { text-align: left; font-weight: 500; color: var(--muted); padding: 8px 12px 8px 0; vertical-align: top; white-space: nowrap; }
.compare td { border-top: 1px solid var(--border); padding: 8px 12px; vertical-align: top; }
.compare tbody tr:first-child td, .compare tbody tr:first-child th { border-top-color: var(--border); }
.compare th[scope="row"] { border-top: 1px solid var(--border); }
.x-total th, .x-total td { font-weight: 600; color: var(--text) !important; }
.check-row { display: flex; align-items: center; gap: 8px; min-height: 28px; cursor: pointer; }
.check-row input { width: 16px; height: 16px; accent-color: var(--text); flex: none; }
.check-row.is-off { color: var(--faint); cursor: not-allowed; }
.check-list { display: grid; gap: 2px; }

/* ---------- Choosing workspaces: one dropdown with a search, the same for one workspace or sixty (owner, 7 Nov 2026) ---------- */
/* "All workspaces, including new ones", or only some. The dropdown sits under the second, lined up with its words. */
.ws-scope { display: grid; gap: 2px; }
.ws-scope > .ms { margin: 6px 0 0 24px; }
.ms { position: relative; display: grid; min-width: 0; }
/* Closed, it reads like a select: a field's edge, height and focus, with the pictures of what's chosen and the words. */
.ms-field {
  display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; min-height: var(--field-height); padding: 0 10px 0 12px;
  background: var(--ground); border: 1px solid var(--field); border-radius: var(--radius-field); color: var(--text); text-align: left;
  transition: border-color var(--t-hover);
}
.ms-field:hover, .ms-field[aria-expanded="true"] { border-color: var(--text); }
.ms-field:focus-visible { outline: 2px solid var(--focus); outline-offset: -1px; border-color: var(--focus); border-radius: var(--radius-field); }
.ms-field > svg { flex: none; margin-left: auto; color: var(--muted); }
.ms-avs { display: inline-flex; flex: none; }
.ms-avs .ws-av { box-shadow: 0 0 0 2px var(--ground); }
.ms-avs .ws-av + .ws-av { margin-left: -4px; } /* overlapped, with every letter still whole */
.ms-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-val.is-empty { color: var(--faint); }
/* Open, the list floats under the field, or over it where there's more room, as wide as the field. The search box stays put and the rows scroll,
   so sixty workspaces take no more room than eight. It floats, so it has the shadow of what floats. */
.ms-pop { position: fixed; z-index: 60; display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--card); border-radius: var(--radius-inner); box-shadow: var(--float-shadow); }
.ms-search { position: relative; flex: none; padding: 8px; }
.ms-search > svg { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.ms-search input { padding-left: 36px; }
.ms-list { position: relative; flex: 1 1 auto; min-height: 0; display: grid; align-content: start; gap: 1px; padding: 0 6px 6px; overflow-y: auto; overscroll-behavior: contain; }
.ms-opt { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 5px 8px; border-radius: var(--radius-field); cursor: pointer; transition: background var(--t-hover); }
.ms-opt:hover { background: var(--raised); }
/* The keyboard's highlight is the focus ring, inside the row. */
.ms-opt.is-active { background: var(--raised); box-shadow: inset 0 0 0 2px var(--focus); }
/* The tick is drawn like the page's own checkboxes: an ink box with a white tick, white with a dark tick in dark mode. */
.ms-box { flex: none; display: grid; place-items: center; width: 16px; height: 16px; border: 1.5px solid var(--field); border-radius: 4px; color: transparent; transition: background var(--t-hover), border-color var(--t-hover); }
.ms-opt[aria-selected="true"] .ms-box { background: var(--text); border-color: var(--text); color: var(--ground); }
.ms-name { min-width: 0; line-height: 18px; overflow-wrap: anywhere; }
.ms-none { flex: 1 1 auto; padding: 4px 16px 14px; overflow-wrap: anywhere; }
.ms-foot { flex: none; display: flex; align-items: center; gap: 4px; padding: 8px 8px 8px 16px; border-top: 1px solid var(--rule); }
.ms-count { flex: 1; min-width: 0; color: var(--muted); font-size: var(--fs-small); line-height: 18px; }
/* On a phone, a sheet at the foot of the screen, in reach of a thumb, lifted above the keyboard while it's open. The rows are 44 px, for fingers. */
.ms-scrim { position: fixed; inset: 0; z-index: 59; background: var(--scrim); touch-action: none; }
.ms-pop.is-sheet { left: 0; right: 0; bottom: var(--ms-lift, 0px); width: auto; max-height: 85dvh; border-radius: var(--radius-dialog) var(--radius-dialog) 0 0; padding-bottom: env(safe-area-inset-bottom); animation: rise var(--t-ui) var(--ease-out); }
.ms-pop.is-sheet .ms-search { padding: 12px 12px 8px; touch-action: none; }
.ms-pop.is-sheet .ms-search > svg { left: 24px; top: calc(50% + 2px); }
.ms-pop.is-sheet .ms-list { padding: 0 8px 8px; }
.ms-pop.is-sheet .ms-foot { gap: 8px; padding: 8px 12px 8px 20px; touch-action: none; }
.ms-pop.is-sheet .ms-foot .btn { min-height: 44px; }
@media (max-width: 640px), (max-height: 500px), (pointer: coarse) { .ms-opt { min-height: 44px; } }

/* ---------- Team and activity ---------- */
.team-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.team-table .cell-act { width: 1%; }
.team-table strong { font-weight: 500; }
.team-form { display: grid; gap: 18px; align-content: start; padding-top: 4px; }
.roles { display: grid; gap: 6px; }
.role-pick { min-height: 56px; }
.act-filters select { width: auto; min-height: var(--control-height); padding: 4px 10px; border-radius: var(--radius-control); border-color: var(--control); }
.act-list li { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--rule); }
.act-what strong { font-weight: 500; }
.cmp-note { display: flex; align-items: flex-start; gap: 6px; }
.cmp-note svg { margin-top: 2px; }

/* ---------- Sign in ---------- */
.signin { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.signin-brand { position: relative; overflow: hidden; background: var(--pr-black); color: var(--pr-white); padding: 40px 48px; display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; }
.signin-brand h1 { position: relative; font-size: clamp(30px, 3.9vw, 56px); line-height: 1.08; letter-spacing: -.03em; font-weight: 600; z-index: 1; }
.signin-brand .logo { position: relative; z-index: 1; margin-left: -6px; background: var(--pr-black); box-shadow: 0 0 0 10px var(--pr-black); }
.reach { position: absolute; inset: 0; width: 100%; height: 100%; }
.reach-ring { fill: none; stroke: var(--pr-white); stroke-width: 1; stroke-opacity: var(--o); animation: reach-wave 9s calc(var(--i) * .42s) infinite; }
.reach-hit { fill: var(--pr-white); fill-opacity: .38; animation: reach-land 9s calc(var(--i) * .42s + .08s) infinite; }
.reach-dot { fill: #ff3d7f; }
@keyframes reach-wave { 0%, 15%, 100% { stroke-opacity: var(--o); } 5% { stroke-opacity: .9; } }
@keyframes reach-land { 0%, 20%, 100% { fill-opacity: .38; } 6% { fill-opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .reach-ring, .reach-hit { animation: none; } }
.signin-form-side { display: grid; place-items: center; padding: 32px 24px; }
.signin-box { width: min(360px, 100%); display: grid; gap: 14px; justify-items: start; }
/* An agent names itself, up to 60 characters with no spaces if it likes, and it still has to fit. Ordinary words wrap as before. */
.signin-box { overflow-wrap: anywhere; }
.signin-box .dlg-actions .btn { height: auto; max-width: 100%; white-space: normal; text-align: center; }
.signin-box h2 { font-size: var(--fs-title); line-height: 30px; letter-spacing: -.02em; }
.signin-form, .signin-code { display: grid; gap: 12px; width: 100%; margin-top: 6px; }
/* Forgot password? sits at the end of its label's line. */
.pass-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.signin-or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; width: 100%; color: var(--muted); font-size: var(--fs-small); }
.signin-or::before, .signin-or::after { content: ""; height: 1px; background: var(--border); }
.btn-wide { width: 100%; }
.signin .btn { min-height: 44px; }

/* ---------- Dialogs ---------- */
dialog { border: 0; padding: 0; color: var(--text); background: var(--ground); }
dialog::backdrop { background: var(--scrim); }
dialog:not(:focus-visible) { outline: none; }
.dlg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dlg-head h2 { font-size: var(--fs-section); line-height: 24px; }
.dlg-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.dlg-actions.spread { justify-content: space-between; }
.form-error { color: var(--negative); }

dialog.modal { width: min(460px, calc(100vw - 32px)); margin: auto; border-radius: var(--radius-dialog); box-shadow: var(--float-shadow); animation: rise var(--t-ui) var(--ease-out); }
.connect { padding: 20px; display: grid; gap: 12px; }
.connect-body { display: grid; gap: 14px; }
.sim { background: var(--raised); border-radius: var(--radius-inner); padding: 14px; display: grid; gap: 6px; }
.how { background: var(--raised); border-radius: var(--radius-inner); padding: 10px 12px; }
.how summary { font-weight: 500; cursor: pointer; }
.how-steps { display: grid; gap: 6px; margin-top: 8px; list-style: disc; padding-left: 18px; }
.problem { background: var(--raised); border-radius: var(--corner-bl); padding: 14px; display: grid; gap: 4px; }

dialog.panel { position: fixed; margin: 0 8px 0 auto; inset: 8px 0 8px auto; height: calc(100dvh - 16px); max-height: none; width: min(500px, calc(100vw - 16px)); border-radius: var(--radius-dialog); box-shadow: var(--float-shadow); animation: slide var(--t-ui) var(--ease-out); overflow: hidden; }
.panel-inner { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
.panel-inner .dlg-head { padding: 16px 16px 12px 20px; }
.panel-body { overflow-y: auto; padding: 0 20px 20px; }
.panel-body > .tabs { margin-bottom: 14px; }
.panel-foot { padding: 12px 20px; border-top: 1px solid var(--rule); }
.preview-state { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; min-height: 22px; }
.preview-note { display: inline-flex; align-items: center; gap: 2px; }
.post-reason { background: var(--raised); padding: 8px 12px; border-radius: var(--radius-field); margin-bottom: 10px; }
.post-record { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.post-record > svg:first-child { flex: none; }
.post-form { display: grid; gap: 10px; }
.slide-nav { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 0; }

dialog.composer { width: min(1040px, calc(100vw - 32px)); height: min(780px, calc(100dvh - 32px)); max-height: none; margin: auto; border-radius: var(--radius-dialog); box-shadow: var(--float-shadow); animation: rise var(--t-ui) var(--ease-out); overflow: hidden; }
.cmp { display: grid; grid-template-columns: minmax(0, 1fr) 420px; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
.cmp > .dlg-head { grid-column: 1 / -1; padding: 16px 16px 12px 20px; }
.cmp-form { overflow-y: auto; padding: 4px 20px 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start; }
.cmp-group { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.cmp-group legend { padding: 0; margin-bottom: 8px; }
.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.picks-col { grid-template-columns: 1fr; }
.pick { display: flex; align-items: center; gap: 10px; padding: 7px 10px; min-height: 48px; border-radius: var(--radius-inner); box-shadow: inset 0 0 0 1px var(--border); cursor: pointer; transition: box-shadow var(--t-hover), background var(--t-hover); }
.pick:hover { box-shadow: inset 0 0 0 1px var(--text); }
.pick:has(input:checked) { box-shadow: inset 0 0 0 2px var(--text); }
.pick:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick.is-off { cursor: not-allowed; background: var(--raised); box-shadow: none; }
.pick.is-off .tok[data-issue]::after { box-shadow: 0 0 0 2px var(--raised); }
.pick.is-off:has(input:checked) { box-shadow: none; }
.pick-name { min-width: 0; line-height: 18px; overflow-wrap: anywhere; }
.cmp-under { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-height: 40px; padding-top: 4px; }
#cmp-count { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
#cmp-count .over { color: var(--negative); font-weight: 600; }
.media-files { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.media-file { position: relative; display: block; }
.media-file .thumb, .media-sample .thumb { width: 40px; height: 40px; }
.media-file .thumb .art, .media-sample .thumb .art { transform: scale(.25); }
.media-play { position: absolute; left: 0; top: 0; width: 40px; height: 40px; display: grid; place-items: center; color: #fff; background: rgb(0 0 0 / .3); border-radius: var(--radius-field); }
.media-x { position: absolute; right: -8px; top: -8px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--radius-chip); background: var(--ground); color: var(--text); box-shadow: inset 0 0 0 1px var(--control); }
.media-x:hover { box-shadow: inset 0 0 0 1px var(--text); }
.media-words { color: var(--muted); }
#cmp-media { min-width: 0; }
.media-menu { display: grid; gap: 10px; justify-items: start; padding: 12px; border-radius: var(--radius-inner); background: var(--raised); }
.media-samples { width: 100%; }
.media-sample { width: 100%; text-align: left; background: var(--ground); }
.cmp-group > .seg { justify-self: start; }
.when-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.quick-times { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-times .btn[aria-pressed="true"] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.cmp-datetime { align-items: flex-end; margin-top: 12px; }
.cmp-zone { flex: 1 1 180px; min-width: 0; }
.cmp-zone select { width: 100%; }
.cmp-side { background: var(--raised); padding: 12px 20px 20px; overflow-y: auto; min-height: 0; border-radius: var(--radius-card) 0 0 0; }
.cmp-side .tabs { margin-bottom: 12px; }
.cmp-side .tabs [role="tab"] { flex: none; }
.cmp-side { --strip-bg: var(--raised); }
.cmp-form { --strip-bg: var(--ground); }
.cmp-what { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.cmp-what .tabs { margin-bottom: 0; }
#cmp-account { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
#cmp-account[hidden], #cmp-all[hidden] { display: none; }
.type-pick { display: grid; gap: 6px; }
.cmp-side .pv { max-width: 340px; margin-inline: auto; }
.cmp-side .pv-tall { max-width: none; }
.cmp-side .pv-screen { width: min(100%, 216px); }
/* Tabs that run out of room get an arrow on the side with more. */
.tab-strip { position: relative; min-width: 0; }
.tab-arrow { position: absolute; z-index: 1; top: 0; bottom: 1px; width: 32px; display: grid; place-items: center; background: var(--strip-bg, var(--ground)); color: var(--text); }
.tab-arrow[hidden] { display: none; }
.tab-arrow-l { left: 0; box-shadow: 8px 0 8px -4px var(--strip-bg, var(--ground)); }
.tab-arrow-r { right: 0; box-shadow: -8px 0 8px -4px var(--strip-bg, var(--ground)); }
.tab-arrow:hover { color: var(--muted); }
.panel-inner { --strip-bg: var(--ground); }
.as-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; }
.as-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.as-numbers { grid-column: 1 / -1; }
/* An AI agent's mark: its maker's own file, one for each theme, or a plain tile with the Corner. The files are drawn as they come. */
.agent-mark { --s: 28px; width: var(--s); height: var(--s); flex: none; display: grid; place-items: center; }
.agent-mark > img { grid-area: 1 / 1; display: block; width: 100%; height: 100%; }
.agent-mark > .on-dark, :root[data-theme="dark"] .agent-mark > .on-light { display: none; }
:root[data-theme="dark"] .agent-mark > .on-dark { display: block; }
/* OpenAI's file holds the Blossom's own clear space, so it's drawn larger to match the others. The space stays empty around it. */
.agent-chatgpt > img { transform: scale(1.75); }
.agent-plain { border-radius: calc(var(--s) * .33) calc(var(--s) * .33) calc(var(--s) * .33) calc(var(--s) * .08); background: var(--active); color: var(--quiet); font-size: max(10px, calc(var(--s) * .5)); font-weight: 600; line-height: 1; }
.pick-row { display: grid; gap: 6px; }
.pick-files { display: flex; flex-wrap: wrap; gap: 8px; }
.pick-file { position: relative; display: block; width: 48px; height: 48px; border-radius: var(--radius-field); }
.pick-file .thumb { width: 48px; height: 48px; }
.pick-file .thumb .art { transform: scale(.3); }
.pick-file[aria-pressed="true"] .thumb { opacity: 1; box-shadow: 0 0 0 2px var(--text); }
.pick-mark { position: absolute; right: -4px; top: -4px; width: 18px; height: 18px; display: none; place-items: center; border-radius: 50%; background: var(--text); color: var(--ground); }
.pick-file[aria-pressed="true"] .pick-mark { display: grid; }
.override .over { color: var(--negative); font-weight: 600; }
.type-pick .small { color: var(--muted); }
.type-fixed { display: flex; align-items: baseline; gap: 8px; }
.seg-fill { display: flex; width: 100%; }
.seg-fill button { flex: 1; justify-content: center; padding-inline: 6px; }
.keep-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fit-line, .fit-note { display: flex; align-items: flex-start; gap: 6px; }
.fit-line > svg { color: var(--positive); flex: none; margin-top: 2px; }
.fit-note > svg { color: var(--muted); flex: none; margin-top: 2px; }
.fit-line > span, .fit-note > span { min-width: 0; }
.net-fields { display: grid; gap: 14px; }
.radio-row { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.check-tip { display: flex; align-items: center; gap: 2px; }
.net-sub { padding-left: 24px; }
.cmp-empty { padding: 24px 0; }
.override { justify-items: stretch; }
.override textarea { width: 100%; }
.override-link { margin-top: 12px; }
#cmp-preview .override-link { display: flex; justify-content: center; }
.cmp-foot { grid-column: 1 / -1; padding: 12px 20px; border-top: 1px solid var(--rule); display: grid; gap: 10px; }
.cmp-foot-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cmp-summary { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.cmp-summary .moment { transform: translateY(-1px); }
.cmp-foot .dlg-actions { flex: none; flex-wrap: nowrap; }
.cmp-issues { display: grid; gap: 4px; padding: 8px 12px; border-radius: var(--radius-inner); background: var(--pill-warning-bg); color: var(--text); }
.cmp-issues li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: start; gap: 2px 8px; }
.cmp-issues svg { color: var(--warning); flex: none; margin-top: 3px; }
.cmp-fixes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 12px; }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes slide { from { opacity: 0; transform: translateX(16px); } }

/* ---------- Narrower desktops: the list keeps the numbers that matter most ---------- */
@media (max-width: 1400px) {
  .p-table .p-num:nth-last-child(-n+4) { display: none; }
}

/* ---------- Narrower desktops: the rail moves under the timeline ---------- */
@media (max-width: 1180px) {
  .dash, .as-grid { grid-template-columns: minmax(0, 1fr); }
  .dash-side { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .p-table .p-num:nth-last-child(-n+5) { display: none; }
  .p-table .p-post { min-width: 200px; }
  .table.p-table th, .table.p-table td { padding-left: 8px; padding-right: 8px; }
  .table.p-table th:first-child, .table.p-table td:first-child, .table.p-table td.p-more { padding-left: 0; }
  .table.p-table th:last-child, .table.p-table td:last-child { padding-right: 0; }
  .p-table .p-ws .acc-ws span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .set-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* ---------- Phone and small tablet: a top bar and a bottom bar of four places ---------- */
@media (max-width: 860px) {
  :root { --pad: 16px; --gap: 16px; }
  body[data-shell="app"] #app { display: block; height: auto; }
  .side { position: sticky; top: 0; z-index: 20; padding: 6px 16px; flex-direction: row; align-items: center; min-height: 52px; background: var(--ground); border-right: 0; }
  .side nav a:hover { background: var(--raised); }
  .side nav a[aria-current="page"] { background: var(--active); box-shadow: none; }
  .user-menu summary:hover, .user-menu[open] summary { background: var(--raised); }
  .user-av { background: var(--active); box-shadow: none; }
  .brand { display: flex; align-items: center; flex: 1; min-width: 0; gap: 12px; }
  .brand .logo { margin-left: -5px; }
  .ws-switch { margin-left: auto; min-width: 0; }
  .ws-switch summary { height: 40px; }
  .ws-switch-field summary { height: var(--control-height); }
  .ws-menu { left: auto; right: 0; }
  .ws-switch.ws-switch-field { margin-left: 0; }
  .ws-switch-field .ws-menu { left: 0; right: auto; }
  .side nav a { font-size: 12px; }
  .side-foot { flex: none; margin: 0 0 0 8px; padding: 0; border: 0; }
  .user-menu summary { justify-content: center; width: 40px; height: 40px; padding: 0; }
  .user-name, .user-menu summary > svg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .user-pop { left: auto; right: 0; bottom: auto; top: calc(100% + 6px); width: min(272px, calc(100vw - 32px)); max-height: calc(100dvh - 124px); overflow-y: auto; }
  .side nav { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; margin: 0; background: var(--ground); border-top: 1px solid var(--border); padding: 4px 8px calc(4px + env(safe-area-inset-bottom)); }
  .side nav ul { flex-direction: row; justify-content: space-around; gap: 4px; }
  .side nav li { flex: 1; }
  .side nav li.nav-end { margin-top: 0; }
  .side nav a { flex-direction: column; justify-content: center; gap: 2px; height: 48px; padding: 0; font-size: var(--fs-small); position: relative; }
  .nav-count { position: absolute; top: 2px; left: calc(50% + 6px); margin: 0; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px; font-size: 11px; }
  .sheet { overflow: visible; padding: 12px 16px 88px; }
  .needs { padding: 12px 12px 4px; }
  .t-row { grid-template-columns: 40px 18px minmax(0, 1fr) auto; column-gap: 2px; }
  .t-row::before { left: 50.5px; }
  .t-now-dot { left: 45px; }
  .t-now-label { margin-left: 59px; }
  .t-earlier { margin-left: 60px; }
  .t-empty { padding-left: 60px; }
  .first-try { margin-left: 0; }
  .t-body { padding: 8px 6px; }
  .setup { grid-template-columns: minmax(0, 1fr); }
  .setup-ready { grid-template-columns: minmax(0, 1fr); }
  .net-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .conn-phone { display: none; } /* already on a phone */
  .user-help { display: flex; }
  .side nav li.nav-help { display: none; }
  .nav-soon-item, .side nav li.nav-end { display: none; } /* five places fit the bottom bar. Settings is in the person's menu; Inbox joins when it's live */
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-table tr { position: relative; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .p-table .p-post { width: auto; min-width: 0; grid-column: 1 / -1; padding-right: 36px !important; }
  .p-table .p-more { position: absolute; top: 12px; right: 0; width: auto; }
  .p-table .p-num { display: none; }
  .p-table .p-when { white-space: normal; min-width: 0; }
  .p-table .p-when .block { display: inline; }
  .p-table .p-when .small::before { content: ", "; }
  .p-table .p-ws { grid-column: 1 / -1; }
  .p-nets .nets-pop { left: 0; transform: none; }
  .widget-more { margin-left: 60px; }
  .ib { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 0; }
  .kpi:nth-child(odd) { padding-left: 0; border-left: 0; }
  .a-split { grid-template-columns: minmax(0, 1fr); }
  .a-table thead { position: absolute; }
  .a-table tr { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .a-table .a-post { grid-column: 1 / -1; max-width: none; }
  .a-table td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: 12px; line-height: 16px; }
  .a-table td.num-col { text-align: left !important; }
  .x-note { grid-template-columns: 20px minmax(0, 1fr); }
  .x-note .btn { grid-column: 2; justify-self: start; }
  .act-list li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .team-table .cell-ws, .team-table .cell-last { grid-column: 1 / -1; }
  .team-table tr { grid-template-columns: minmax(0, 1fr) auto; }
  .team-table .cell-act { grid-column: 1 / -1; }
  .qr-wrap { grid-template-columns: minmax(0, 1fr); }
  .month-head { flex-wrap: wrap; }
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table, .table tbody { display: block; }
  .table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 0; border-top: 1px solid var(--rule); }
  .table td { display: block; border: 0; padding: 0 !important; text-align: left; }
  .cell-id { grid-column: 1 / -1; }
  .cell-type { display: none !important; }
  .cell-count { text-align: right !important; font-size: var(--fs-small); }
  .only-phone { display: inline; }
  .cell-act { grid-column: 1 / -1; display: flex !important; width: auto; gap: 8px; }
  .cell-act .btn { flex: 1; min-height: 44px; }
  .cell-act .btn + .btn { margin-left: 0; }
  dialog.panel, dialog.composer { inset: 0; margin: 0; width: 100vw; max-width: 100vw; height: 100dvh; border-radius: 0; }
  dialog.composer { overflow-y: auto; }
  .cmp { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 100dvh; grid-template-rows: auto auto auto auto; }
  .cmp-form { overflow: visible; }
  .cmp-side { overflow: visible; padding-top: 16px; border-radius: 0; }
  /* A long list of issues could otherwise fill the screen and hide the form behind it. So the list scrolls by itself,
     and on a short screen the footer stops following you and sits at the end of the form. */
  .cmp-foot { position: sticky; bottom: 0; z-index: 6; display: flex; flex-direction: column; max-height: 50dvh; overflow: hidden; background: var(--ground); padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .cmp-foot > [role="status"] { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
  .cmp-foot > .cmp-foot-row { flex: none; }
  dialog.composer { scroll-padding-bottom: 51dvh; }
  .cmp-issues li { grid-template-columns: 14px minmax(0, 1fr); }
  .cmp-issues li > :nth-child(n+3) { grid-column: 2; justify-self: start; }
  .cmp-foot { grid-template-columns: minmax(0, 1fr); }
  .cmp-foot-row { flex-direction: column; align-items: stretch; gap: 10px; }
  /* One row where the words fit, so the fixed part of the window takes less of a phone's screen. */
  .cmp-foot .dlg-actions { flex-wrap: wrap; }
  .cmp-foot .dlg-actions .btn { flex: 1 1 auto; }
  .picks { grid-template-columns: minmax(0, 1fr); }
  .invite { flex-direction: column; align-items: stretch; }
  .prompt-copy { flex-direction: column; align-items: stretch; }
  .signin { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .signin-brand { padding: 20px 16px 28px; gap: 36px; min-height: 0; }
  .signin-brand h1 { font-size: 30px; }
  /* One column: the form starts where the logo and headline do. */
  .signin-form-side { padding: 24px 16px 32px; place-items: start; }
  #toasts { bottom: 76px; }
  dialog[open] #toasts { top: 12px; bottom: auto; } /* a window's actions are at its foot, and they stay pressable */
}

/* ---------- Phones: actions fill the width, easy for a thumb, and the list is the only view ---------- */
@media (max-width: 640px) {
  .title-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .title-actions { flex-wrap: wrap; }
  .title-actions .btn { flex: 1; min-height: 44px; }
  .title-actions .seg { flex: 1; }
  .title-actions .seg button { flex: 1; justify-content: center; }
  .a-select, .act-filters select { flex: 1 1 100%; width: 100%; min-width: 0; }
  .team-head > * { min-width: 0; max-width: 100%; }
  .act-filters { width: 100%; }
  .only-wide { display: none !important; }
  .posts-filters > *, .posts-view { width: 100%; }
  .posts-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .posts-filters .ws-switch-field:first-child { grid-column: 1 / -1; }
  .posts-view { justify-content: space-between; flex-wrap: nowrap; }
  .posts-view .filter { flex: 1; min-width: 0; }
  .yt-two { grid-template-columns: minmax(0, 1fr); }
  .needs-row { grid-template-columns: 20px minmax(0, 1fr); padding: 10px 0; }
  .needs-sub { white-space: normal; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
  .needs-act { grid-column: 2; }
  .needs-act .btn { flex: 1; min-height: 44px; }
}

/* The pages outside the app, and what shows when the service can't be reached */
.outside-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: 100%; }
.outside-actions > .dlg-actions, .outside-actions > .consent-box, .outside-actions > p { width: 100%; }
.consent-box { display: grid; gap: 10px; background: var(--raised); padding: 14px 16px; border-radius: var(--radius-card); }
.signin-notice { width: 100%; background: var(--raised); padding: 10px 12px; border-radius: var(--radius-field); }
.status-block { display: grid; gap: 12px; justify-items: start; max-width: 480px; padding-top: 48px; }
.last-resort { padding: 20px var(--pad) 40px; } /* the app couldn't start, so there's no sidebar around it */
.status-block h1, .status-block h2 { font-size: var(--fs-title); line-height: 30px; letter-spacing: -.02em; }
.sys-banner { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 16px; padding: 10px 12px; background: var(--raised); border-radius: var(--radius-field); font-size: 14px; }
.sys-banner svg { flex: none; margin-top: 2px; color: var(--negative); }
.role-note { margin-bottom: 12px; }
.ask-owner { align-self: center; }
.cmp-leaving { margin-top: 6px; text-align: right; }
.team-owner-row { display: grid; gap: 8px; justify-items: start; padding-top: 0; }
.skeleton { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 8px; }
.sk { display: block; background: var(--raised); border-radius: var(--radius-field); }
.sk-title { width: 180px; height: 28px; }
.sk-line { width: 320px; max-width: 100%; height: 16px; }
.sk-block { width: 100%; height: 120px; border-radius: var(--radius-card); }
@media (prefers-reduced-motion: no-preference) { .sk { animation: sk-pulse 1.4s ease-in-out infinite; } }
@keyframes sk-pulse { 50% { opacity: .55; } }

/* Fingers need more room than a pointer. These grow the place you can tap, without moving anything. */
dialog.composer { scroll-padding-bottom: 120px; }
@media (pointer: coarse) {
  .link, .pill[tabindex], .toast button, .quick-times .btn { position: relative; }
  .link::after, .pill[tabindex]::after, .toast button::after { content: ""; position: absolute; inset: -8px -6px; }
  .more-opts > summary, .how summary { padding-block: 10px; }
}

/* The calendar on narrower screens: one network mark and a count, so the time always shows. */
.m-more-narrow { display: none; }
@media (max-width: 1240px) {
  .m-extra, .m-more { display: none; }
  .m-more-narrow { display: inline; }
}
@media (pointer: coarse) {
  .m-chip { min-height: 28px; align-items: center; }
}
.m-time { flex: none; }

/* The table's headings are hidden when it stacks, so its help moves up to the Views total. */
@media (max-width: 1100px) { .a-table thead .tip-btn { display: none; } }

/* A small window, like the one an AI agent opens for signing in, about 590 by 640: the band keeps the logo, and the headline is left to screen readers,
   so the form and its first button show without scrolling. */
@media (max-width: 860px) and (max-height: 760px) {
  .signin-brand { padding-block: 14px; gap: 0; }
  .signin-brand h1 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .signin-form-side { padding-top: 20px; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .cmp-foot { position: static; max-height: none; overflow: visible; }
  dialog.composer { scroll-padding-bottom: 0; }
}

.tu-sum { display: grid; gap: 4px; padding: 10px 12px; background: var(--raised); border-radius: var(--radius-inner); }
.tu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tu-total { font-weight: 600; padding-top: 6px; margin-top: 2px; border-top: 1px solid var(--rule); }

/* ==========================================================================
   The working look, 6 Nov 2026: neutral panels on one ground, hairlines, ink
   ========================================================================== */
body { line-height: 20px; }
h1 { font-weight: 600; line-height: 30px; letter-spacing: -.018em; }
h2 { font-weight: 600; line-height: 22px; letter-spacing: -.006em; }
h3 { line-height: 20px; }
.small { line-height: 18px; }
.pill { height: 22px; padding: 0 8px; font-size: 12px; font-weight: 500; line-height: 22px; }
.btn { font-weight: 500; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: -1px; border-color: var(--focus); }
.seg { box-shadow: inset 0 0 0 1px var(--border); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--card); border-color: var(--border); }
:root[data-theme="dark"] .seg button[aria-pressed="true"], :root[data-theme="dark"] .seg button[aria-selected="true"] { background: var(--active); border-color: var(--control); box-shadow: none; }
.title-row { align-items: flex-end; margin-bottom: 20px; }
.finding { margin-top: 4px; color: var(--muted); font-size: var(--fs-body); }
.user-av { background: var(--active); color: var(--text); box-shadow: none; font-weight: 600; }
.nav-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--moment); color: var(--count-ink); font-size: 11px; font-weight: 600; line-height: 18px; }
.nav-soon { padding: 0 7px; background: var(--active); color: var(--muted); font-size: 11px; font-weight: 500; line-height: 18px; }
.with-pill .pill-warning { background: var(--active); color: var(--muted); } /* "Coming soon" says the same as the sidebar's Soon */
.sheet { padding: 24px var(--pad) 48px; }

/* Panels: one ground, a hairline, and one radius. Notices and wells are a step of grey with no line. */
.widget, .rail-block, .a-chart, .set-panel, .as-side, .setup-col, .setup-ready, .needs, .consent-box, .acc-empty, .ib-wrap, .p-card, .ncard {
  background: var(--card); border-radius: var(--radius-card); box-shadow: inset 0 0 0 1px var(--border);
}
.dash-side .widget { background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.x-note, .keys-banner, .sys-banner, .signin-notice { background: var(--raised); border-radius: var(--radius-inner); }
.danger-panel { background: none; box-shadow: inset 0 0 0 1px var(--pill-negative-bg); }
:root[data-theme="dark"] .danger-panel { box-shadow: inset 0 0 0 1px #4a201a; }
.widget, .rail-block, .a-chart { padding: 16px 18px; }
.widget-head { margin-bottom: 12px; }
.table-wrap:has(.p-table) { padding: 2px 16px; background: var(--card); border-radius: var(--radius-card); box-shadow: inset 0 0 0 1px var(--border); }
.table-wrap:has(.p-table) .table td { border-top-color: var(--rule); }

/* The sidebar: a step off the page, with the open page as a neutral pill */
@media (min-width: 861px) {
  .side { padding: 18px 12px 12px; border-right: 1px solid var(--border); }
  .brand { gap: 18px; }
  .brand .logo { margin-left: 8px; }
  .brand .ws-switch summary { height: 38px; gap: 8px; padding: 0 10px 0 7px; background: var(--card); border-color: var(--border); font-weight: 500; }
  .brand .ws-switch summary:hover, .brand .ws-switch[open] summary { background: var(--card); border-color: var(--control); }
  .side nav { margin-top: 14px; }
  .side nav ul { gap: 1px; }
  .side nav a, .side nav .nav-help button { height: 34px; min-height: 34px; gap: 10px; padding: 0 10px; color: var(--muted); font-weight: 500; }
  .side nav a[aria-current="page"] { background: var(--side-current); color: var(--text); box-shadow: none; }
  .side-foot { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
  .user-menu summary { height: 40px; gap: 8px; padding: 0 8px 0 6px; font-weight: 500; }
}

/* The Dashboard's top: hello as the page title, the week in one sentence, the two things people come here to do, and the next post */
.welcome { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 24px; align-items: end; margin-bottom: 20px; }
.welcome.is-plain { grid-template-columns: minmax(0, 1fr); }
.w-rings { display: none; }
.w-text { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.welcome .finding { margin: 0; max-width: 64ch; text-wrap: pretty; }
.w-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.w-new { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.w-new:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.w-next { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; padding: 9px 13px 9px 9px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); text-align: left; transition: border-color var(--t-hover); }
.w-next:hover { border-color: var(--control); }
.w-next:focus-visible { border-radius: var(--radius-card); }
.w-next .thumb { width: 56px; height: 56px; border-radius: var(--radius-field); }
.w-next .thumb .art { transform: scale(.35); }
.w-next-copy { display: grid; gap: 2px; min-width: 0; }
.w-next-when { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-small); line-height: 18px; }
.w-next-when .moment { width: 7px; height: 7px; }
.w-next .t-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.w-next .small { color: var(--muted); }

/* Needs you: PostReach speaking, so it keeps the Corner. Its count is one of the few pink things on a screen. In light yellow, with the alert in red
   on what's urgent (a lost connection, a post on hold or missed, a payment problem: the rows marked negative or warning), so urgency shows at a
   glance (owner, 6 Nov 2026). A calm row, like a draft waiting for review, keeps its grey pencil. */
.needs { position: relative; padding: 14px 18px 4px; border-radius: var(--corner-bl); counter-reset: needs; background: var(--needs-bg); box-shadow: inset 0 0 0 1px var(--needs-line); }
.needs h2 { margin-bottom: 2px; padding-right: 40px; }
.needs-row { counter-increment: needs; min-height: 60px; }
.needs-row + .needs-row { border-top-color: var(--needs-rule); }
.needs-glyph.tone-negative, .needs-glyph.tone-warning { color: var(--needs-urgent); }
.needs .btn:not(.btn-primary) { background: var(--card); }
.needs .btn:not(.btn-primary):hover { background: var(--raised); }
.needs::after { content: counter(needs) / ""; position: absolute; top: 15px; right: 18px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--moment); color: var(--count-ink); font-size: 12px; font-weight: 600; line-height: 20px; text-align: center; }
.needs-glyph { display: grid; place-items: center; color: var(--muted); }
.needs-copy strong { font-weight: 500; }

/* The week at a glance: one panel split by hairlines, label over figure */
.tiles { gap: 0; margin-bottom: var(--gap); border-radius: var(--radius-card); box-shadow: inset 0 0 0 1px var(--border); background: var(--card); overflow: hidden; }
.tiles > li { min-width: 0; }
.tiles > li + li .tile { box-shadow: inset 1px 0 0 var(--border); }
.tile { gap: 4px; padding: 14px 18px 15px; border-radius: 0; background: none; }
.tile:hover { background: var(--raised); }
.tile:focus-visible { border-radius: var(--radius-card); outline-offset: -2px; }
.tile-label { color: var(--muted); font-size: var(--fs-small); font-weight: 500; line-height: 18px; }
.tile-value { font-size: var(--fs-figure); line-height: 30px; font-weight: 600; letter-spacing: -.015em; }
.tile-sub { color: var(--muted); font-size: var(--fs-small); line-height: 18px; }
.dash, .dash-main, .dash-side { gap: var(--gap); }

/* Up next: one axis, now in pink on it, and each post's picture beside its words */
.t-day + .t-day { margin-top: 16px; }
.t-row.is-next .t-text { font-size: var(--fs-body); line-height: 20px; font-weight: 500; letter-spacing: 0; }
.t-next { padding: 0 8px; border-radius: var(--radius-pill); background: var(--pill-neutral-bg); color: var(--text); font-size: 12px; font-weight: 500; line-height: 20px; }
.t-row .thumb { width: 52px; height: 52px; margin-top: 6px; }
.t-row .thumb .art { transform: scale(.325); }
.thumb { border-radius: var(--radius-field); }
.thumb.thumb-text { background: var(--raised); color: var(--muted); }
.prompt-copy { background: var(--raised); box-shadow: none; }

/* The week and the charts: ink, with what's past in grey */
.week-bar { height: 52px; box-shadow: 0 1px 0 var(--border); }
.week-bar span { background: var(--data-mid); border-radius: 3px 3px 0 0; }
.week-day.is-today .week-bar span { background: var(--data); }
.week-day.is-past .week-bar span { background: var(--data-quiet); }
.week-n { font-weight: 500; }
.rail-accounts li { min-height: 40px; }
.rail-name > span:first-child { font-weight: 500; }
.a-col span { border-radius: 3px 3px 0 0; }
.a-num { font-size: var(--fs-small); font-weight: 500; }
.best { display: grid; gap: 10px; }
.best .thumb { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.best .thumb .art { width: 100%; height: 100%; aspect-ratio: auto; transform: none; }
.best-text { font-weight: 500; }
.best-figures dd { font-size: var(--fs-section); line-height: 22px; font-weight: 600; }
.kpi-value { font-size: var(--fs-figure); line-height: 30px; font-weight: 600; letter-spacing: -.015em; }
.x-balance-value { font-size: var(--fs-figure); line-height: 30px; font-weight: 600; }

/* First visit */
.setup-col { padding: 18px; gap: 12px; }
.setup-ready { padding: 16px 18px; }
.net-btn { gap: 12px; min-height: 60px; padding: 10px 12px; background: var(--card); border-color: var(--border); border-radius: var(--radius-inner); }
.net-btn:hover { border-color: var(--control); background: var(--raised); }
.net-copy { line-height: 18px; }
.net-copy strong { font-weight: 500; }

/* Network marks: the square is the mark, so the discs and plates that held the old drawn marks are gone. One size in each place. */
.net-btn .tok, .conn-row > .tok { width: 36px; height: 36px; border-radius: 0; background: none; box-shadow: none; }
.ncard:not(.is-on) .ncard-head > .tok { width: 44px; height: 44px; border-radius: 0; background: none; box-shadow: none; } /* the size of the account pictures beside it */
.toks > .tok { width: 22px; height: 22px; border-radius: 0; background: none; box-shadow: none; }
.toks > .tok .mark, .m-mark .tok .mark, .rail-accounts .tok .mark { width: 100%; height: 100%; }
.toks { gap: 3px; }
.toks > .tok + .tok, .toks > .tok + .nets-more { margin-left: 0; }
.nets-more { min-width: 22px; height: 22px; border-radius: var(--radius-chip); }
.rail-accounts li { grid-template-columns: 24px minmax(0, 1fr) auto; }
.rail-accounts .tok { width: 24px; height: 24px; background: none; border-radius: 0; }
.rail-agents { display: grid; gap: 2px; margin-top: 8px; }
.rail-agents li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 40px; }
.m-mark .tok { width: 14px; height: 14px; background: none; box-shadow: none; border-radius: 0; }
.m-mark .tok + .tok { margin-left: 2px; }
.acc-av-net { right: -5px; bottom: -5px; padding: 0; border-radius: 4px; background: none; box-shadow: 0 0 0 2px var(--card); }
.ncard.is-on .acc-av-net, .pick .acc-av-net { box-shadow: 0 0 0 2px var(--card); }

/* Posts */
.ws-switch-field summary, .filter summary { background: var(--card); border-color: var(--control); }
.ws-switch-field summary:hover, .filter summary:hover { background: var(--raised); }
.filter summary { color: var(--text); font-weight: 500; }
.filter.is-set summary, .filter[open] summary, .ws-switch-field[open] summary { border-color: var(--text); }
.p-grid { gap: var(--gap); }
.p-card { position: relative; transition: box-shadow var(--t-hover); }
.p-card:hover { box-shadow: inset 0 0 0 1px var(--control); }
.p-card-open:focus-visible { outline-offset: -3px; }
.p-face-text { padding: 40px 16px 16px; }
.p-face-words { font-weight: 500; }
.p-card-top .pill { position: absolute; left: 10px; top: 10px; }
.p-card-top .pill:not(.pill-positive, .pill-negative, .pill-warning, .pill-strong) { background: var(--card); color: var(--text); box-shadow: 0 0 0 1px var(--border); }
.p-card-copy { padding: 12px 14px; }
.p-card-text { font-weight: 500; }
.p-card-foot { padding-left: 14px; }
.table.p-table th, .table.p-table td { padding-left: 8px; padding-right: 8px; }
.table.p-table th:first-child, .table.p-table td:first-child { padding-left: 0; }
.table.p-table th:last-child, .table.p-table td:last-child { padding-right: 0; }
.p-post { min-width: 220px; }
@media (max-width: 1700px) { .p-table:has(.p-ws) .p-num:nth-last-child(-n+4) { display: none; } }
@media (max-width: 1400px) { .p-post { min-width: 180px; } }
@media (max-width: 1240px) { .p-post { min-width: 160px; } .p-table:has(.p-ws) .p-num { display: none; } }
/* Too narrow for the columns, with the sidebar still there: each post stacks, as it does on a phone. */
@media (min-width: 861px) and (max-width: 1100px) {
  .p-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .p-table, .p-table tbody { display: block; }
  .p-table tr { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--rule); }
  .table.p-table td { display: block; padding: 0 !important; border: 0; text-align: left; }
  .table.p-table .p-post { grid-column: 1 / -1; width: auto; min-width: 0; padding-right: 36px !important; }
  .table.p-table .p-more { position: absolute; top: 12px; right: 0; width: auto; }
  .p-table .p-num { display: none; }
  .p-table .p-when { min-width: 0; white-space: normal; }
  .p-table .p-when .block { display: inline; }
  .p-table .p-when .small::before { content: ", "; }
  .p-table .p-ws { grid-column: 1 / -1; }
}
.p-open .thumb, .p-thumb { width: 44px; height: 44px; }
.p-open .thumb .art { transform: scale(.275); }

/* Connections: a connected account is a panel; a network still to connect is a quiet well */
.ncards { gap: var(--gap); }
.ncard { padding: 16px; }
.ncard.is-on { background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.ncard:not(.is-on) { background: var(--raised); box-shadow: none; }
.ncard:not(.is-on) .btn[disabled] { background: var(--active); border-color: var(--active); }
.ncard-name { font-weight: 600; }
/* "Ink" is one of the pictures' colours, and on a dark panel it would vanish, so pictures keep a faint edge there. */
:root[data-theme="dark"] :is(.acc-av-face, .ws-av) { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
:root[data-theme="dark"] .acc-av-face:has(> .acc-av-pic)::after { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
.p-act { width: 32px; height: 32px; }

/* Settings keep their structure; only the surfaces change */
.set-panel { padding: 18px; }

/* A real picture fills its frame. Only graphics we draw from someone's words have margins. */
.art.art-file { display: block; padding: 0; }
.p-face .art:not(.art-file) { padding-top: 44px; }

/* On a phone, words typed into a field are 16 px, or the browser zooms in when the field is pressed. */
@media (pointer: coarse) {
  input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="time"], select, textarea { font-size: 16px; }
  .code-input { font-size: 20px; }
}

@media (max-width: 1180px) {
  .welcome { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .w-next { max-width: 480px; }
}
@media (max-width: 860px) {
  :root { --gap: 12px; }
  .side { min-height: 56px; padding: 8px 16px; border-bottom: 1px solid var(--border); }
  .side nav { padding-inline: 4px; }
  .side nav a { height: 52px; padding: 0; border-radius: 10px; font-size: 12px; font-weight: 500; }
  .side nav a[aria-current="page"] { background: none; color: var(--text); font-weight: 600; }
  .nav-count { top: 2px; left: calc(50% + 7px); min-width: 17px; height: 17px; padding: 0 4px; line-height: 17px; }
  .brand .ws-switch summary { background: var(--card); border-color: var(--border); }
  .sheet { padding: 16px 16px 96px; }
  .welcome { gap: 14px; margin-bottom: 16px; }
  .w-next { max-width: none; }
  .needs { padding: 12px 14px 4px; }
  .needs::after { top: 13px; right: 14px; }
  .widget, .rail-block { padding: 14px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles > li + li .tile { box-shadow: none; }
  .tiles > li:nth-child(even) .tile { box-shadow: inset 1px 0 0 var(--border); }
  .tiles > li:nth-child(3) .tile { box-shadow: inset 0 1px 0 var(--border); }
  .tiles > li:nth-child(4) .tile { box-shadow: inset 1px 1px 0 var(--border); }
  .tile { padding: 12px 14px; }
  .t-row .thumb { width: 44px; height: 44px; }
  .t-row .thumb .art { transform: scale(.275); }
  .table-wrap:has(.p-table) { padding: 0 14px; }
}

/* A switch, for settings that save as soon as they change. On is ink; off is a grey that still reads against the page (3.3:1).
   Underneath it's a checkbox with role="switch", so keyboards and screen readers know it. */
.toggle { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 36px; height: 20px; margin: 0; border-radius: var(--radius-pill); background: var(--switch-off); cursor: pointer; transition: background var(--t-hover); }
.toggle::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: transform var(--t-ui) var(--ease-out); }
.toggle:checked { background: var(--text); }
.toggle:checked::before { transform: translateX(16px); }
:root[data-theme="dark"] .toggle:checked::before { background: var(--ground); }
.toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-pill); }
.toggle:disabled { cursor: progress; opacity: .6; }
@media (pointer: coarse) {
  .toggle { width: 44px; height: 26px; }
  .toggle::before { width: 22px; height: 22px; }
  .toggle:checked::before { transform: translateX(18px); }
}

/* ---------- Assistant: every agent on one row of a table, the owner's choice of 6 Nov 2026 ---------- */
.as-page .as-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--gap); align-items: start; }
.as-page .as-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); min-width: 0; }
.as-page .as-block + .as-block { margin-top: 0; }
.as-panelled { padding: 16px 18px 18px; background: var(--card); border-radius: var(--radius-card); box-shadow: inset 0 0 0 1px var(--border); }
.as-block-head { display: flex; align-items: baseline; gap: 8px; }
.as-page .tabs { margin-top: 10px; }
.as-page .as-panel { padding-top: 16px; }
.as-page .steps > li::before { background: var(--active); }
.as-try { padding: 16px 18px; background: var(--card); border-radius: var(--radius-card); box-shadow: inset 0 0 0 1px var(--border); }
.as-page .as-side { padding: 16px 18px; }
.as-page .can-list svg { color: var(--text); }
.as-page .can-not svg { color: var(--faint); }

/* An agent: its maker's mark, the name it gave itself, and the site its sign-in goes back to. The older one-row-per-agent rule is the prototype's. */
.as-page tr.as-row { display: table-row !important; }
.as-page .as-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.as-name { display: grid; min-width: 0; line-height: 18px; }
.as-name strong { font-weight: 500; line-height: 20px; }
.as-name > * { overflow-wrap: anywhere; }
.as-page .as-numbers { display: inline-flex; align-items: center; cursor: pointer; }
/* On a desktop the column's heading says what the switch is, and has the help, so the words are for screen readers only. */
.as-page .as-numbers-words { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.as-page .as-numbers .tip-btn { display: none; }
.as-off { height: 30px; padding: 0 10px; }
.btn-quiet.btn-danger:hover { background: var(--pill-negative-bg); }

/* Saying yes in the chat: one setting, for the whole workspace */
.as-approve { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; background: var(--card); border-radius: var(--radius-card); box-shadow: inset 0 0 0 1px var(--border); }
.as-approve-copy { display: grid; gap: 2px; min-width: 0; }
.as-approve-title { display: flex; align-items: center; gap: 2px; font-weight: 500; }
.as-approve-title label { cursor: pointer; }

/* The table */
.as-table { width: 100%; margin-top: 6px; border-collapse: collapse; }
.as-table th { height: 32px; padding: 0 12px; color: var(--muted); font-size: var(--fs-small); font-weight: 400; text-align: left; white-space: nowrap; }
.as-table th .with-tip { display: inline-flex; align-items: center; gap: 2px; }
.as-table td { padding: 12px; border-top: 1px solid var(--rule); vertical-align: middle; }
.as-table th:first-child, .as-table td:first-child { padding-left: 0; }
.as-table th:last-child, .as-table td:last-child { padding-right: 0; text-align: right; }
.as-table .as-k { display: none; }
.as-table .as-used, .as-table .as-since { white-space: nowrap; }
.as-table .as-since { color: var(--muted); }
.as-table .as-num-cell { width: 1%; }
.as-table td.as-act { width: 1%; }

@media (max-width: 1180px) {
  .as-page .as-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .as-panelled, .as-try, .as-page .as-side { padding: 14px; }
}
/* On a phone each agent is a few short lines, and the switch has its words and help beside it. */
@media (max-width: 640px) {
  .as-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .as-table thead .tip-btn { display: none; } /* each row has its own help beside its switch */
  .as-table, .as-table tbody { display: block; }
  .as-page .as-table tr.as-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 0; border-top: 1px solid var(--rule); }
  .as-table td { display: block; padding: 0 !important; border: 0; text-align: left !important; }
  .as-table td.as-id { grid-column: 1; grid-row: 1; }
  .as-table td.as-act { grid-column: 2; grid-row: 1; width: auto; }
  .as-table td.as-used, .as-table td.as-since { grid-column: 1 / -1; padding-left: 44px !important; color: var(--muted); font-size: var(--fs-small); line-height: 18px; white-space: normal; }
  .as-table td.as-used { margin-top: 4px; }
  .as-table .as-k { display: inline; }
  .as-table td.as-num-cell { grid-column: 1 / -1; width: auto; padding: 8px 0 0 44px !important; }
  .as-page .as-numbers { display: flex; gap: 4px; width: 100%; }
  .as-page .as-numbers-words { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; }
  .as-page .as-numbers .tip-btn { display: inline-grid; margin-right: auto; }
  .as-page .as-numbers .toggle { margin-left: 8px; }
  .as-approve { align-items: flex-start; }
}

/* Found by pressing everything on five screen sizes, 5 Nov 2026 */
.icon-btn { flex: none; } /* a long dialog title squeezed Close to 18 px wide on phones */
@media (max-width: 900px) { .m-chip { gap: 4px; padding-inline: 4px; } } /* a calendar day is about 90 px wide on an iPad */