/* ═══════════════════════════════════════════════════════════════════════════
   Pondros theme — Airtable's look, app-wide (2026-09-22)
   ───────────────────────────────────────────────────────────────────────────
   Loaded LAST, after foundation.css, by base.html (server-rendered pages) and
   board/pondros_app.html (the board SPA), so every page gets it. Every
   selector is scoped to html.pondros, so the Amazon-ops product is untouched.
   Remove the two <link>s to revert the whole pass.

   Measured off airtable.com Home:
     • UI text in the system face at 13px; headings in Inter Display 675;
     • ink #1D1F25, secondary #616670;
     • 6px corners on buttons, cards and fields; 3-4px on nav rows;
     • cards have NO border, only a soft ring shadow (--ring-shadow);
     • white sidebar, 15px/500 rows, the active row #F2F4F8;
     • primary #166EE1; the search field is a white pill.

   Colour lives in tokens.css. This file only uses var()s, plus color-mix()
   of a token for focus rings. Nothing here invents a colour.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Type ─────────────────────────────────────────────────────────────────── */
html.pondros body { font-size: 13px; color: var(--ink); }
html.pondros h1, html.pondros h2, html.pondros h3,
html.pondros .ui-pagehead h1,
html.pondros .prail-brand .t {
  font-family: var(--font-heading);
  letter-spacing: -0.006em;
  color: var(--ink);
}
html.pondros h1, html.pondros .ui-pagehead h1 { font-weight: 675; }
html.pondros .ui-pagehead h1 { font-size: 27px; line-height: 1.2; }
html.pondros h2, html.pondros h3 { font-weight: 600; }
html.pondros .ui-pagehead .sub { color: var(--ink-3); font-size: 13px; }
html.pondros a { text-underline-offset: 2px; }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
html.pondros .prail {
  background: var(--side);
  border-right: 1px solid var(--line);
  padding: 14px 12px;
}
html.pondros .prail-brand .t { font-size: 19px; font-weight: 700; }
html.pondros .prail-nav { gap: 2px; }
html.pondros .prail-nav a {
  min-height: 36px; padding: 0 12px; gap: 10px;
  border-radius: var(--radius-sm);
  font-size: 15px; line-height: 20px; font-weight: 500;
  color: var(--ink);
}
html.pondros .prail-nav a svg { width: 18px; height: 18px; color: var(--ink-2); }
html.pondros .prail-nav a:hover { background: var(--accent-2); }
html.pondros .prail-nav a.on { background: var(--well); color: var(--ink); font-weight: 500; }
html.pondros .prail-nav a.on svg { color: var(--ink); }
/* Section labels, Airtable-style: quiet, small, above a group of rows. */
html.pondros .prail-sec {
  margin: 14px 0 4px; padding: 0 12px;
  font-size: 12px; font-weight: 500; color: var(--ink-3);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
html.pondros .btn,
html.pondros .ui-btn,
html.pondros .pbtn,
html.pondros .qbtn {
  border-radius: var(--radius);
  font-size: 13px; font-weight: 500;
  min-height: 32px;
}
/* Primary: Airtable blue with its ring shadow. */
html.pondros .ui-btn:not(.ui-btn--ghost):not(.ui-btn--quiet):not(.ui-btn--danger),
html.pondros .btn-primary, html.pondros .btn.primary,
html.pondros .pbtn {
  background: var(--accent); color: var(--on-accent); border-color: transparent;
  box-shadow: var(--ring-shadow);
}
html.pondros .ui-btn:not(.ui-btn--ghost):not(.ui-btn--quiet):not(.ui-btn--danger):hover,
html.pondros .btn-primary:hover, html.pondros .btn.primary:hover,
html.pondros .pbtn:hover { background: var(--brand-700); }
/* Secondary: white, no border, the ring shadow does the edge. */
html.pondros .btn:not(.btn-primary):not(.primary):not(.btn-ghost):not(.ghost):not(.btn-plain):not(.btn-danger):not(.danger),
html.pondros .ui-btn--ghost,
html.pondros .qbtn {
  background: var(--panel); color: var(--ink); border-color: transparent;
  box-shadow: var(--ring-shadow);
}
html.pondros .ui-btn--ghost:hover,
html.pondros .qbtn:hover { background: var(--bg-2); }

/* ── Cards: ring shadow instead of a border ──────────────────────────────── */
html.pondros .card,
html.pondros .ui-card:not(.ui-card--flat),
html.pondros .setupcard,
html.pondros .tgcard {
  border-color: transparent;
  border-radius: var(--radius);
  box-shadow: var(--ring-shadow);
  background: var(--panel);
}

/* ── Fields ──────────────────────────────────────────────────────────────── */
html.pondros input[type="text"],
html.pondros input[type="email"],
html.pondros input[type="password"],
html.pondros input[type="number"],
html.pondros input[type="search"],
html.pondros input[type="url"],
html.pondros input[type="tel"],
html.pondros input[type="date"],
html.pondros select,
html.pondros textarea {
  font-size: 13px;
  border-radius: var(--radius);
  border-color: var(--line-2);
}
html.pondros input:focus,
html.pondros select:focus,
html.pondros textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);
}
/* Search is a white pill with the ring shadow, top-centre like Airtable's. */
html.pondros .ui-search,
html.pondros .topsearch {
  border-radius: var(--radius-pill);
  border-color: transparent;
  background: var(--panel);
  box-shadow: var(--ring-shadow);
}

/* ── Chips, badges, tabs ─────────────────────────────────────────────────── */
html.pondros .ui-chip, html.pondros .chip, html.pondros .pill, html.pondros .status-pill {
  font-weight: 500;
}
html.pondros .ui-seg-item { font-size: 13px; font-weight: 500; color: var(--ink-3); border-radius: var(--radius); }
html.pondros .ui-seg-item[aria-selected="true"],
html.pondros .ui-seg-item.on,
html.pondros .ui-seg-item.active {
  background: var(--chip); color: var(--ink); box-shadow: none;
}
html.pondros .ui-sectionhead { font-size: 13px; font-weight: 600; color: var(--ink); }

/* ── "Run Pondros from Claude", the dashboard's lead card ────────────────────
   Airtable's banner treatment: the info wash, the ring shadow, 6px corners,
   with two white connect tiles inside (lemlist's layout, which the user asked
   for). */
html.pondros .dash-ai {
  margin: 0 0 28px; padding: 20px 24px;
  background: var(--panel); border-radius: var(--radius); box-shadow: var(--ring-shadow);
}
html.pondros .dash-ai-head h2 { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--ink); }
html.pondros .dash-ai-head p { margin: 0 0 14px; font-size: 13px; color: var(--ink-3); }
html.pondros .dash-ai-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
html.pondros .dash-ai-tile {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: var(--panel); border-radius: var(--radius); box-shadow: var(--ring-shadow);
  text-decoration: none; color: var(--ink);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
html.pondros .dash-ai-tile:hover { box-shadow: var(--ring-shadow-hover); }
html.pondros .dash-ai-logo {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: var(--radius); background: var(--chip); color: var(--ink-2);
}
html.pondros .dash-ai-logo img { width: 22px; height: 22px; }
html.pondros .dash-ai-logo--term { color: var(--ink); }
html.pondros .dash-ai-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.pondros .dash-ai-txt strong { font-size: 13px; font-weight: 600; }
html.pondros .dash-ai-txt span { font-size: 12.5px; color: var(--ink-3); }
html.pondros .dash-ai-go { flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 500; color: var(--accent-ink); }
@media (max-width: 760px) { html.pondros .dash-ai-tiles { grid-template-columns: 1fr; } }

/* ── Home: the upgrade banner (Airtable's, down to the dark pill) ─────────── */
html.pondros .dash-up {
  position: relative; margin: 0 0 20px; padding: 24px 32px;
  background: var(--brand-soft); border-radius: var(--radius); box-shadow: var(--ring-shadow);
}
html.pondros .dash-up[hidden] { display: none; }
html.pondros .dash-up h2 { margin: 0 0 6px; font-size: 19px; font-weight: 600; letter-spacing: -0.006em; }
html.pondros .dash-up h2 span { color: var(--accent-ink); }
html.pondros .dash-up p { margin: 0 0 16px; font-size: 13px; color: var(--ink); }
html.pondros .dash-up-act { display: flex; align-items: center; gap: 20px; }
html.pondros .dash-up-go {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 28px;
  border-radius: var(--radius-pill); background: var(--dark-btn); color: var(--on-dark-btn);
  font-size: 15px; font-weight: 400; text-decoration: none;
}
html.pondros .dash-up-go:hover { background: var(--dark-btn-hover); }
html.pondros .dash-up-cmp { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink-3); text-decoration: none; }
html.pondros .dash-up-cmp:hover { color: var(--ink); }
html.pondros .dash-up-x {
  position: absolute; top: 14px; right: 14px; display: grid; place-items: center;
  width: 28px; height: 28px; border: none; border-radius: var(--radius); cursor: pointer;
  background: transparent; color: var(--ink-3);
}
html.pondros .dash-up-x:hover { background: var(--accent-2); color: var(--ink); }

/* ── App header + invite banner (_partials/topbar.html) ─────────────────────
   Airtable's chrome: a white 56px header across the full width (hamburger,
   wordmark, centred search pill, Help, bell, avatar), an info-wash banner above
   it, and the sidebar starting underneath. --chrome-h is their combined height.
   Everything that moves down reads it, so the banner's dismissal reflows the
   whole shell in one step. */
html.pondros { --ptop-h: 56px; --pbanner-h: 0px; --chrome-h: calc(var(--ptop-h) + var(--pbanner-h)); }
html.pondros.has-pbanner { --pbanner-h: 40px; }

html.pondros .pbanner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 61; height: 40px;
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 48px;
  background: var(--brand-soft); color: var(--ink); font-size: 13px;
  border-bottom: 1px solid var(--line);
}
html.pondros .pbanner[hidden] { display: none; }
html.pondros .pbanner a { color: var(--ink); text-decoration: underline; }
html.pondros .pbanner-ic { display: inline-grid; color: var(--accent-ink); }
html.pondros .pbanner-x {
  position: absolute; right: 12px; top: 6px; width: 28px; height: 28px; display: grid; place-items: center;
  border: none; border-radius: var(--radius); background: transparent; color: var(--ink); cursor: pointer;
}
html.pondros .pbanner-x:hover { background: var(--accent-2); }

html.pondros .ptop {
  position: fixed; top: var(--pbanner-h); left: 0; right: 0; z-index: 60; height: var(--ptop-h);
  display: flex; align-items: center; gap: 12px; padding: 0 16px 0 12px;
  background: var(--chrome); border-bottom: 1px solid var(--line);
}
html.pondros .ptop-burger {
  display: grid; place-items: center; width: 36px; height: 36px; border: none; border-radius: var(--radius);
  background: transparent; color: var(--ink-3); cursor: pointer;
}
html.pondros .ptop-burger:hover { background: var(--accent-2); color: var(--ink); }
html.pondros .ptop-brand { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
html.pondros .ptop-search {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; width: min(354px, 36vw); height: 32px; padding: 0 16px;
  border: none; border-radius: var(--radius-pill); background: var(--panel); box-shadow: var(--ring-shadow);
  font: inherit; font-size: 13px; color: var(--ink-3); cursor: pointer; text-align: left;
}
html.pondros .ptop-search span { flex: 1 1 auto; }
html.pondros .ptop-search kbd { font: inherit; font-size: 12px; color: var(--ink-3); }
html.pondros .ptop-search:hover { box-shadow: var(--ring-shadow-hover); }
html.pondros .ptop-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
html.pondros .ptop-help {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px; border-radius: var(--radius);
  font-size: 13px; color: var(--ink); text-decoration: none;
}
html.pondros .ptop-help:hover { background: var(--accent-2); }
html.pondros .ptop-pop { position: relative; }
html.pondros .ptop-bell {
  position: relative; display: grid; place-items: center; width: 32px; height: 32px;
  border: none; border-radius: 50%; background: var(--panel); box-shadow: var(--ring-shadow);
  color: var(--ink); cursor: pointer;
}
html.pondros .ptop-dot {
  position: absolute; top: 3px; right: 4px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--crit); box-shadow: 0 0 0 2px var(--chrome);
}
html.pondros .ptop-dot[hidden] { display: none; }
html.pondros .ptop-av {
  display: grid; place-items: center; width: 32px; height: 32px; border: none; border-radius: 50%;
  background: var(--dash-orange); color: var(--on-accent); font-size: 14px; font-weight: 500; cursor: pointer;
}
html.pondros .ptop-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
  background: var(--panel); border-radius: var(--radius);
  box-shadow: var(--pop-shadow);
}
html.pondros .ptop-menu[hidden] { display: none; }

/* Notifications: Airtable's Unread / Read panel. */
html.pondros .ptop-notif { width: 480px; max-width: calc(100vw - 24px); padding: 16px 16px 8px; }
html.pondros .pn-head { display: flex; align-items: center; justify-content: space-between; padding: 0 0 12px; border-bottom: 1px solid var(--line); }
html.pondros .pn-head > span { font-size: 15px; font-weight: 500; }
html.pondros .pn-tabs { display: flex; gap: 4px; }
html.pondros .pn-tabs button {
  height: 32px; padding: 0 10px; border: none; border-radius: var(--radius); background: transparent;
  font: inherit; font-size: 15px; color: var(--ink); cursor: pointer;
}
html.pondros .pn-tabs button.on { background: var(--chip); }
html.pondros .pn-search {
  display: flex; align-items: center; gap: 8px; margin: 12px 0; height: 40px; padding: 0 12px;
  border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-3);
}
html.pondros .pn-search:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
html.pondros .pn-search input { flex: 1; border: none !important; box-shadow: none !important; padding: 0 !important; background: transparent; font-size: 15px; }
html.pondros .pn-list { max-height: 420px; overflow-y: auto; margin: 0 -8px; }
html.pondros .pn-empty { margin: 0; padding: 36px 0 48px; text-align: center; font-size: 15px; color: var(--ink-3); }
html.pondros .pn-row { display: flex; gap: 10px; padding: 10px 8px; border-radius: var(--radius); text-decoration: none; color: var(--ink); }
html.pondros .pn-row:hover { background: var(--accent-2); }
html.pondros .pn-av {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--c, var(--dash-gray)); color: var(--dash-on); font-size: 11px; font-weight: 600;
}
html.pondros .pn-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.pondros .pn-t { font-size: 13px; line-height: 1.4; }
html.pondros .pn-t b { font-weight: 600; }
html.pondros .pn-q { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.pondros .pn-when { font-size: 12px; color: var(--ink-4); }

/* Account: Airtable's avatar menu. */
html.pondros .ptop-acct { width: 360px; padding: 8px 16px 12px; }
html.pondros .pa-head { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px 14px; font-size: 15px; }
html.pondros .pa-head strong { font-weight: 500; }
html.pondros .pa-head span { color: var(--ink); }
html.pondros .pa-sep { height: 1px; margin: 6px 10px; background: var(--line); }
/* Section caption in the account menu, mirroring `.amcap` in shell.css so the two
   account menus read the same. Added for the Workspace section: with a single
   workspace there are no switch rows to render, and without a caption the section
   showed nothing at all — which is how workspace switching became unfindable. */
html.pondros .pa-cap { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 600; padding: 6px 12px 4px; display: flex; align-items: center; gap: 6px; }
html.pondros .pa-cap b { color: var(--ink); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.pondros .pa-form { margin: 0; }
html.pondros .pa-opt {
  display: flex; align-items: center; gap: 12px; width: 100%; height: 40px; padding: 0 10px;
  border: none; border-radius: var(--radius); background: transparent; cursor: pointer;
  font: inherit; font-size: 15px; color: var(--ink); text-decoration: none; text-align: left;
}
html.pondros .pa-opt:hover, html.pondros .pa-opt:focus-visible { background: var(--accent-2); outline: none; }
html.pondros .pa-opt svg { flex: none; color: var(--ink); }
html.pondros .pa-opt span { flex: 1 1 auto; }
html.pondros .pa-opt em { font-style: normal; font-size: 13px; color: var(--ink-3); }

/* The shell moves under the header, and the rail sheds what the header now
   carries: its brand row, collapse button and account row. */
html.pondros:has(.ptop) .app { padding-top: var(--chrome-h); }
html.pondros:has(.ptop) .prail--fixed { top: var(--chrome-h); height: calc(100vh - var(--chrome-h)); }
html.pondros:has(.ptop) .body { height: calc(100vh - var(--chrome-h)); }
html.pondros:has(.ptop) .prail-head,
html.pondros:has(.ptop) .prail-acctwrap,
html.pondros:has(.ptop) #prailReveal,
html.pondros:has(.ptop) #railReveal { display: none !important; }
html.pondros:has(.ptop) .prail { padding-top: 12px; }

@media (max-width: 720px) {
  html.pondros .ptop-search { position: static; transform: none; width: auto; flex: 1 1 auto; }
  html.pondros .ptop-search kbd, html.pondros .ptop-help span { display: none; }
  html.pondros .pbanner { font-size: 12px; padding: 0 40px 0 12px; }
}

/* One search field (house rule). The board SPA has its own live search in its
   title row (.topsearch, results drop down under it). On the board that box
   moves up into the header's slot and the header pill stands down, so there is
   one field in Airtable's position, still wired to the board's search. */
html.pondros .app:has(> .body) .ptop-search { visibility: hidden; }
html.pondros:has(.ptop) .htop .topsearch {
  position: fixed; z-index: 62; top: calc(var(--pbanner-h) + 12px); left: 50%;
  transform: translateX(-50%); width: min(354px, 36vw); margin: 0;
}
html.pondros .prail-tasks[hidden] { display: none !important; }
/* Board cards: Airtable's base cards title at 13px. */
html.pondros .card .tt { font-size: 13px; }
/* The rail's plan card is gone (user's call, 2026-09-22): upgrading lives in
   the Home banner and the account menu, as in Airtable. Hidden rather than
   deleted, because pondros.js and the rail script still hydrate it. */
html.pondros .prail-plan { display: none !important; }
/* The banner's illustration (img/home-upgrade.svg), bottom-right like Airtable's. */
html.pondros .dash-up { overflow: hidden; }
html.pondros .dash-up-art { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); height: 150px; width: auto; pointer-events: none; }
html.pondros .dash-up h2, html.pondros .dash-up p, html.pondros .dash-up-act { position: relative; max-width: calc(100% - 460px); }
/* Sized by the BANNER's own width, not the window's (2026-09-23): with the
   sidebar open a 1200px window leaves an ~830px banner, and the 460px the art
   reserved squeezed the buttons into two- and three-line wraps. */
html.pondros .dash-up { container-type: inline-size; }
@container (max-width: 980px) {
  html.pondros .dash-up-art { display: none; }
  html.pondros .dash-up h2, html.pondros .dash-up p, html.pondros .dash-up-act { max-width: none; }
}
html.pondros .dash-up-act { flex-wrap: wrap; row-gap: 10px; }
html.pondros .dash-up-go, html.pondros .dash-up-cmp { white-space: nowrap; flex: none; }
@container (max-width: 400px) {
  html.pondros .dash-up-act { flex-direction: column; align-items: stretch; }
  html.pondros .dash-up-go { justify-content: center; padding: 0 20px; }
  html.pondros .dash-up-cmp { justify-content: center; }
}

/* ── Search, Airtable's panel (both surfaces: the ⌘K palette on server pages,
   .psm, and the board's header dropdown, .topsearch-pop; search.js draws the
   same .psm-* rows into both). The panel hangs from the top edge with no dark
   scrim, a large input, sentence-case section captions, 40px neutral tiles, a
   grey selected row, and the "Press ⌘K any time" footer. */
html.pondros .psm-scrim { background: transparent; padding: 4px 16px 16px; }
html[data-theme=dark].pondros .psm-scrim { background: transparent; }
html.pondros .psm {
  max-width: 616px; border: none; border-radius: var(--radius);
  box-shadow: var(--pop-shadow);
}
html.pondros .psm-top { padding: 18px 24px; gap: 16px; border-bottom: 1px solid var(--line); }
html.pondros .psm-top > svg { width: 24px; height: 24px; color: var(--ink); }
html.pondros .psm-top input, html.pondros .psm-top input::placeholder { font-size: 19px; }
html.pondros .psm-res { padding: 8px 12px; }
html.pondros .psm-cap {
  padding: 12px 12px 8px; font-size: 13px; font-weight: 400;
  text-transform: none; letter-spacing: 0; color: var(--ink-3);
}
html.pondros .psm-item {
  min-height: 56px; padding: 8px 12px; gap: 12px; border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px transparent;
}
html.pondros .psm-item.act { background: var(--chip); box-shadow: inset 0 0 0 1px var(--line-2); }
html.pondros .psm-ico { width: 40px; height: 40px; border-radius: var(--radius); background: var(--chip); color: var(--ink-2); }
html.pondros .psm-item.act .psm-ico { background: var(--panel); }
html.pondros .psm-ico svg { width: 18px; height: 18px; }
html.pondros .psm-l { font-size: 14px; font-weight: 500; color: var(--ink); }
html.pondros .psm-t { font-size: 12px; color: var(--ink-3); }
html.pondros .psm-empty { padding: 28px 16px; font-size: 13px; color: var(--ink-3); }
html.pondros .psm::after,
html.pondros .topsearch-pop::after {
  content: "Press ⌘ K any time to search";
  display: block; padding: 14px 24px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-3);
}
/* The board's dropdown: Airtable's width, centred under the header pill. */
html.pondros .topsearch-pop {
  left: 50%; right: auto; width: 616px; max-width: calc(100vw - 32px);
  transform: translateX(-50%); border: none; border-radius: var(--radius);
  background: var(--panel); box-shadow: var(--pop-shadow); padding: 4px 0 0;
}
html.pondros .topsearch-pop.on { transform: translateX(-50%); }
html.pondros .topsearch-pop .psm-res { padding: 4px 12px 8px; }

/* ── Scale: base sizes, 1:1 (2026-09-22) ─────────────────────────────────────
   Was .9, judged on a local tab sitting at Chrome's 110% (effective .99); on
   prod at 100% the same page read 10% small, and the user asked for the local
   ratio. The knob stays: one CSS zoom on the root, and anything that must fill
   the viewport reads --vh (viewport / zoom) instead of 100vh. Change the scale
   here and in --ui-zoom together. */
html.pondros { zoom: 1; --ui-zoom: 1; --vh: calc(100vh / var(--ui-zoom)); }
html.pondros .prail--fixed { height: var(--vh); }
html.pondros .body { height: var(--vh); }
html.pondros .app:has(> .body) { height: var(--vh); }
html.pondros:has(.ptop) .prail--fixed { height: calc(var(--vh) - var(--chrome-h)); }
html.pondros:has(.ptop) .body { height: calc(var(--vh) - var(--chrome-h)); }
html.pondros .pchat { height: calc(var(--vh) - var(--chrome-h) - 32px); }

/* Big external monitors (2026-09-23): at 1x on a 4K screen the whole app read
   at a fifth of the width, tiny text in a narrow strip. Step the same knob up
   with the window so a wide display looks like a normal laptop. Breakpoints
   read the real viewport (the root zoom doesn't move them); --vh follows. */
@media (min-width: 1920px) { html.pondros { zoom: 1.1;  --ui-zoom: 1.1; } }
@media (min-width: 2400px) { html.pondros { zoom: 1.3;  --ui-zoom: 1.3; } }
@media (min-width: 2880px) { html.pondros { zoom: 1.55; --ui-zoom: 1.55; } }
@media (min-width: 3400px) { html.pondros { zoom: 1.85; --ui-zoom: 1.85; } }

/* ── Collapsed rail = Airtable's icon strip, not gone ────────────────────────
   The hamburger used to slide the rail off-screen. Collapsed now keeps a 56px
   column of the nav icons (labels hidden, each still a link). Server pages
   collapse with html.rail-collapsed; the board SPA with .body.rail-collapsed. */
html.pondros { --rail-mini: 56px; }
html.pondros.rail-collapsed .prail--fixed { transform: none !important; width: var(--rail-mini); }
html.pondros.rail-collapsed .app { padding-left: var(--rail-mini) !important; }
html.pondros .body.rail-collapsed { grid-template-columns: var(--rail-mini) 1fr; }
html.pondros .body.rail-collapsed .prail { display: flex !important; }
html.pondros.rail-collapsed .prail--fixed,
html.pondros .body.rail-collapsed .prail { padding-left: 8px; padding-right: 8px; overflow: hidden; }
html.pondros.rail-collapsed .prail--fixed .prail-nav a,
html.pondros .body.rail-collapsed .prail-nav a {
  font-size: 0; gap: 0; justify-content: center; padding: 0; min-height: 40px;
}
html.pondros.rail-collapsed .prail--fixed .prail-nav a svg,
html.pondros .body.rail-collapsed .prail-nav a svg { width: 20px; height: 20px; }
html.pondros.rail-collapsed .prail--fixed .prail-sec,
html.pondros .body.rail-collapsed .prail-sec,
html.pondros .body.rail-collapsed .prail-tasks { display: none !important; }

/* ── Live cursors on the board (Figma-style; pondros.js liveCursors) ──────── */
html.pondros .lcur-layer { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 30; pointer-events: none; }
html.pondros .lcur {
  position: absolute; left: 0; top: 0; display: flex; align-items: flex-start; gap: 2px;
  transition: transform 90ms linear, opacity .4s ease; will-change: transform;
  --c: var(--dash-blue);
}
html.pondros .lcur svg { fill: var(--c); stroke: var(--dash-on); stroke-width: 1.2; filter: drop-shadow(var(--cursor-shadow)); }
html.pondros .lcur span {
  margin-top: 14px; padding: 2px 8px; border-radius: 9px; white-space: nowrap;
  background: var(--c); color: var(--dash-on); font-size: 12px; font-weight: 500; line-height: 16px;
}
html.pondros .lcur.idle { opacity: .35; }
html.pondros .lcur--green  { --c: var(--dash-green); }
html.pondros .lcur--orange { --c: var(--dash-orange); }
html.pondros .lcur--purple { --c: var(--dash-purple); }
html.pondros .lcur--pink   { --c: var(--dash-pink); }
html.pondros .lcur--teal   { --c: var(--dash-teal); }
html.pondros .lcur--indigo { --c: var(--dash-indigo); }
html.pondros .lcur--red    { --c: var(--dash-red); }
@media (prefers-reduced-motion: reduce) { html.pondros .lcur { transition: none; } }
/* Cursors replace the "On this board" list; the avatar pill stays. */
html.pondros #presenceMenu { display: none !important; }

/* ══ The board, as an Airtable base ═══════════════════════════════════════════
   Scoped to the board SPA (.app > .body). Server pages keep the full header.
   Airtable's base screen:
     • no global header: a 56px icon strip on the left, the product mark on
       top, and Help, notifications and the avatar at the bottom;
     • a white base bar: an icon square, "Team board ▾", the views as tabs
       centred with an underline, and Share on the right;
     • a toolbar band under it (Filter, Sort, Group…), then the canvas. */
/* Custom properties resolve where they are declared, so --chrome-h (defined on
   <html> from the header + banner heights) must be zeroed at the root for the
   board, not on .app. */
html.pondros:has(.app > .body) { --pbanner-h: 0px; --ptop-h: 0px; --chrome-h: 0px; }
html.pondros .app:has(> .body) { padding-top: 0 !important; }
html.pondros .app:has(> .body) .pbanner { display: none !important; }
html.pondros .app:has(> .body) .ptop {
  top: auto; bottom: 0; right: auto; width: var(--rail-mini); height: auto;
  flex-direction: column; align-items: center; gap: 10px; padding: 12px 0 16px;
  background: transparent; border: none; z-index: 70;
}
html.pondros .app:has(> .body) .ptop-burger,
html.pondros .app:has(> .body) .ptop-brand,
html.pondros .app:has(> .body) .ptop-search { display: none; }
html.pondros .app:has(> .body) .ptop-right { margin: 0; flex-direction: column; gap: 10px; }
html.pondros .app:has(> .body) .ptop-help { width: 32px; height: 32px; padding: 0; justify-content: center; }
html.pondros .app:has(> .body) .ptop-help span { display: none; }
html.pondros .app:has(> .body) .ptop-bell { box-shadow: none; background: transparent; }
html.pondros .app:has(> .body) .ptop-menu { top: auto; bottom: 0; right: auto; left: calc(100% + 8px); }

/* The strip: always the mini rail here, with the mark on top. */
html.pondros .app:has(> .body) .body { grid-template-columns: var(--rail-mini) 1fr; height: var(--vh); }
html.pondros .app:has(> .body) .prail {
  display: flex !important; padding: 12px 8px 140px; overflow: hidden; border-right: 1px solid var(--line);
}
html.pondros .app:has(> .body) .prail .prail-p {
  display: grid; place-items: center; flex: none; align-self: center; overflow: hidden;
  width: 36px; height: 36px; margin: 2px 0 12px; border-radius: 8px;
  background: transparent; color: var(--ink);
}
html.pondros .app:has(> .body) .prail-nav a { font-size: 0; gap: 0; justify-content: center; padding: 0; min-height: 40px; }
html.pondros .app:has(> .body) .prail-nav a svg { width: 20px; height: 20px; }
html.pondros .app:has(> .body) .prail-sec,
html.pondros .app:has(> .body) .prail-tasks,
html.pondros .app:has(> .body) #railCollapse,
html.pondros .app:has(> .body) #railReveal { display: none !important; }

/* The base bar. */
html.pondros .app:has(> .body) .main { position: relative; background: var(--bg); }
html.pondros .app:has(> .body) .head {
  padding: 0 16px 0 20px; height: 56px; display: flex; align-items: center;
  background: var(--chrome); border-bottom: 1px solid var(--line);
}
html.pondros .app:has(> .body) .htop { width: 100%; gap: 10px; }
html.pondros .app:has(> .body) .head h1 {
  font-family: var(--font-heading); font-size: 19px; font-weight: 675; letter-spacing: -0.006em; gap: 6px;
}
html.pondros .app:has(> .body) .head h1::before {
  content: ""; flex: none; width: 32px; height: 32px; margin-right: 6px; border-radius: 8px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8'%3E%3Crect x='3' y='3' width='7' height='9' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1.5'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1.5'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1.5'/%3E%3C/svg%3E") center / 18px no-repeat,
    var(--accent);
}
/* Search sits in the base bar, right of centre, as a compact pill. */
html.pondros .app:has(> .body) .htop .topsearch {
  position: static; transform: none; margin: 0 0 0 auto; width: 240px; flex: none; height: 32px;
}
html.pondros .app:has(> .body) #topShare { height: 32px; }

/* The views: Airtable's centred tabs with an underline. */
html.pondros .app:has(> .body) .tabs {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  height: 56px; padding: 0; gap: 18px; align-items: stretch; z-index: 5;
}
html.pondros .app:has(> .body) .tabs button {
  height: auto; padding: 0 2px; border-radius: 0; background: transparent; box-shadow: none;
  font-size: 14px; font-weight: 500; color: var(--ink-3); border-bottom: 2px solid transparent;
}
html.pondros .app:has(> .body) .tabs button svg { display: none; }
html.pondros .app:has(> .body) .tabs button.on { color: var(--ink); background: transparent; box-shadow: none; border-bottom-color: var(--accent); }
html.pondros .app:has(> .body) .tabs button:hover:not(.on) { color: var(--ink); }
/* Presence avatars sit just after the tabs, not inside them. (The tab row is
   transformed, so position:fixed would pin to it rather than the window.) */
html.pondros .app:has(> .body) .tabs .presence-pill { position: absolute; left: calc(100% + 16px); top: 50%; transform: translateY(-50%); }

/* The toolbar band. */
html.pondros .app:has(> .body) .toolbar {
  padding: 0 16px 0 20px; min-height: 44px; gap: 6px;
  background: var(--chrome); border-bottom: 1px solid var(--line);
}
html.pondros .app:has(> .body) .toolbar .lk,
html.pondros .app:has(> .body) .toolbar .projsel,
html.pondros .app:has(> .body) .toolbar button:not(.pbtn) {
  height: 30px; padding: 0 8px; border: none; border-radius: var(--radius); background: transparent; box-shadow: none;
  font-size: 13px; font-weight: 400; color: var(--ink-2);
}
html.pondros .app:has(> .body) .toolbar .lk:hover,
html.pondros .app:has(> .body) .toolbar .projsel:hover,
html.pondros .app:has(> .body) .toolbar button:not(.pbtn):hover { background: var(--accent-2); color: var(--ink); }
html.pondros .app:has(> .body) .toolbar .pbtn { height: 30px; padding: 0 12px; font-size: 13px; }
html.pondros .app:has(> .body) .content { padding-top: 16px; }

/* ══ Pondros Agent in focus mode (Airtable's Omni screen) ═══════════════════
   No global header or banner; the rail becomes the icon strip with the mark on
   top and Help / notifications / avatar at the bottom (same treatment as the
   board); a soft animated backdrop; a close button top-right. */
html.pondros:has(.pfocus) { --pbanner-h: 0px; --ptop-h: 0px; --chrome-h: 0px; }
html.pondros:has(.pfocus) .pbanner { display: none !important; }
html.pondros:has(.pfocus) .app { padding-top: 0 !important; padding-left: var(--rail-mini) !important; }
html.pondros:has(.pfocus) .prail--fixed {
  top: 0 !important; height: var(--vh) !important; width: var(--rail-mini); transform: none !important;
  padding: 12px 8px 140px; background: var(--chrome);
}
html.pondros:has(.pfocus) .prail--fixed .prail-p {
  display: grid; place-items: center; flex: none; align-self: center; overflow: hidden;
  width: 36px; height: 36px; margin: 2px 0 12px; border-radius: 8px;
  background: transparent; color: var(--ink);
}
html.pondros:has(.pfocus) .prail-nav a { font-size: 0; gap: 0; justify-content: center; padding: 0; min-height: 40px; }
html.pondros:has(.pfocus) .prail-nav a svg { width: 20px; height: 20px; }
html.pondros:has(.pfocus) .prail-sec { display: none !important; }
html.pondros:has(.pfocus) .ptop {
  top: auto; bottom: 0; right: auto; width: var(--rail-mini); height: auto;
  flex-direction: column; align-items: center; gap: 10px; padding: 12px 0 16px;
  background: transparent; border: none; z-index: 70;
}
html.pondros:has(.pfocus) .ptop-burger,
html.pondros:has(.pfocus) .ptop-brand,
html.pondros:has(.pfocus) .ptop-search { display: none; }
html.pondros:has(.pfocus) .ptop-right { margin: 0; flex-direction: column; gap: 10px; }
html.pondros:has(.pfocus) .ptop-help { width: 32px; height: 32px; padding: 0; justify-content: center; }
html.pondros:has(.pfocus) .ptop-help span { display: none; }
html.pondros:has(.pfocus) .ptop-bell { box-shadow: none; background: transparent; }
html.pondros:has(.pfocus) .ptop-menu { top: auto; bottom: 0; right: auto; left: calc(100% + 8px); }
html.pondros:has(.pfocus) .pchat { height: calc(var(--vh) - 32px); position: relative; z-index: 1; }
html.pondros:has(.pfocus) .pchat.is-empty { height: auto; }

.pchat-close {
  position: fixed; top: 16px; right: 20px; z-index: 5; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: var(--radius); color: var(--ink-2);
}
.pchat-close:hover { background: var(--accent-2); color: var(--ink); }

/* The backdrop: two slow light washes in the brand's blue and violet, and a
   field of rounded squares drifting on the right, as on Airtable's page. */
.pchat-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--agent-bg, var(--bg)); }
.pchat-bg::before, .pchat-bg::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55;
}
.pchat-bg::before {
  width: 58vw; height: 58vw; left: -14vw; top: 22vh;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent), transparent 65%);
  animation: pchat-wash-a 26s ease-in-out infinite alternate;
}
.pchat-bg::after {
  width: 50vw; height: 50vw; right: -12vw; top: -14vh;
  background: radial-gradient(circle, color-mix(in srgb, var(--dash-purple) 14%, transparent), transparent 65%);
  animation: pchat-wash-b 30s ease-in-out infinite alternate;
}
.pchat-bg i {
  position: absolute; right: -4vw; top: 0; width: 44vw; height: 100%;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Crect x='14' y='10' width='26' height='26' rx='7' transform='rotate(18 27 23)' fill='black'/%3E%3C/svg%3E") 0 0 / 64px 64px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Crect x='14' y='10' width='26' height='26' rx='7' transform='rotate(18 27 23)' fill='black'/%3E%3C/svg%3E") 0 0 / 64px 64px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Crect x='14' y='10' width='26' height='26' rx='7' transform='rotate(18 27 23)' fill='black'/%3E%3C/svg%3E"), linear-gradient(to left, black 10%, transparent 75%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Crect x='14' y='10' width='26' height='26' rx='7' transform='rotate(18 27 23)' fill='black'/%3E%3C/svg%3E"), linear-gradient(to left, black 10%, transparent 75%);
  -webkit-mask-size: 64px 64px, 100% 100%; mask-size: 64px 64px, 100% 100%;
  animation: pchat-drift 40s linear infinite;
}
@keyframes pchat-wash-a { to { transform: translate(8vw, -6vh) scale(1.08); } }
@keyframes pchat-wash-b { to { transform: translate(-6vw, 8vh) scale(1.12); } }
@keyframes pchat-drift { to { -webkit-mask-position: 0 -640px, 0 0; mask-position: 0 -640px, 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .pchat-bg::before, .pchat-bg::after, .pchat-bg i { animation: none; }
}
/* The exit confirm (Airtable's). */
.pchat-exit { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: color-mix(in srgb, var(--ink) 18%, transparent); }
.pchat-exit[hidden] { display: none; }
.pchat-exit-card { position: relative; width: min(420px, calc(100vw - 32px)); padding: 28px 28px 24px; border-radius: 10px; background: var(--panel); box-shadow: var(--pop-shadow); }
html.pondros .pchat-exit-card h2 { margin: 0 0 12px; font-size: 22px; font-weight: 675; }
.pchat-exit-card p { margin: 0 0 22px; font-size: 13px; color: var(--ink); }
.pchat-exit-act { display: flex; justify-content: flex-end; gap: 8px; }
.pchat-exit-x { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 28px; height: 28px; border: none; border-radius: var(--radius); background: transparent; color: var(--ink-3); cursor: pointer; }
.pchat-exit-x:hover { background: var(--accent-2); color: var(--ink); }
html.pondros:has(.pfocus) .beta-pill { display: none !important; }

/* Base bar: no search bar (the user's call). The field stays in the page,
   invisible and focusable, so ⌘K still opens it: then, and only then, it shows
   as a pill at the top right with its results anchored under it. */
html.pondros .app:has(> .body) .htop .topsearch:not(:focus-within) {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
  overflow: hidden; opacity: 0; pointer-events: none; box-shadow: none;
}
html.pondros .app:has(> .body) .htop .topsearch:focus-within {
  position: absolute !important; top: 12px; right: 16px; z-index: 80; margin: 0;
  width: 320px; height: 32px; padding: 0 12px; background: var(--panel); box-shadow: var(--pop-shadow);
}
html.pondros .app:has(> .body) .htop .topsearch-pop {
  left: auto; right: 0; transform: none; width: 480px; max-width: calc(100vw - 88px);
}
html.pondros .app:has(> .body) .htop .topsearch-pop.on { transform: none; }
html.pondros .trial-pill {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: var(--radius-pill);
  background: var(--chip); color: var(--ink); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
html.pondros .trial-pill:hover { background: var(--accent-2); }
html.pondros .app:has(> .body) .htop #pageTitle { margin-right: auto; }

/* The board's invite-link popover (Airtable's), beside Share. */
html.pondros .blink-wrap { position: relative; }
html.pondros .blink-btn {
  display: grid; place-items: center; width: 32px; height: 32px; border: none; border-radius: var(--radius);
  background: var(--panel); box-shadow: var(--ring-shadow); color: var(--ink); cursor: pointer;
}
html.pondros .blink-btn:hover { background: var(--accent-2); }
html.pondros .blink-btn svg { width: 16px; height: 16px; }
html.pondros .blink-pop {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 90; width: 460px; max-width: calc(100vw - 88px);
  padding: 18px 20px; border-radius: 10px; background: var(--panel); box-shadow: var(--pop-shadow);
}
html.pondros .blink-pop[hidden] { display: none; }
html.pondros .blink-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; font-size: 15px; font-weight: 500; }
html.pondros .blink-x { display: grid; place-items: center; width: 30px; height: 30px; border: none; border-radius: var(--radius); background: transparent; color: var(--ink-2); cursor: pointer; }
html.pondros .blink-x:hover { background: var(--accent-2); }
html.pondros .blink-x svg { width: 16px; height: 16px; }
html.pondros .blink-row { display: flex; gap: 8px; margin: 0 0 12px; }
html.pondros .blink-url {
  flex: 1; min-width: 0; height: 36px; padding: 0 10px !important; border: none !important; border-radius: var(--radius) !important;
  background: var(--chip) !important; box-shadow: none !important; font-size: 13px !important; color: var(--ink);
}
html.pondros .blink-copy {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border: none; border-radius: var(--radius);
  background: var(--dark-btn); color: var(--on-dark-btn); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
html.pondros .blink-copy:hover { background: var(--dark-btn-hover); }
html.pondros .blink-copy svg { width: 15px; height: 15px; }
html.pondros .blink-note { margin: 0; font-size: 13px; color: var(--ink-3); }
html.pondros .blink-manage { border: none; background: none; padding: 0; font: inherit; color: var(--accent-ink); cursor: pointer; }
html.pondros .blink-manage:hover { text-decoration: underline; }

/* The board-name menu, Airtable's base menu. */
html.pondros .bmenu.bmenu--base { min-width: 380px; padding: 16px; border: none; border-radius: 10px; box-shadow: var(--pop-shadow); background: var(--panel); }
html.pondros .bmenu-top { display: flex; align-items: center; gap: 8px; padding: 0 0 14px; margin: 0 0 6px; border-bottom: 1px solid var(--line); }
html.pondros .bmenu-name {
  flex: 1; min-width: 0; height: 42px; padding: 0 12px !important; border: 1px solid transparent !important;
  border-radius: var(--radius) !important; background: transparent !important; box-shadow: none !important;
  font-family: var(--font-heading); font-size: 22px !important; font-weight: 500; color: var(--ink);
}
html.pondros .bmenu-name:hover { background: var(--bg) !important; }
html.pondros .bmenu-name:focus { background: var(--chip) !important; border-color: color-mix(in srgb, var(--accent) 45%, transparent) !important; }
html.pondros .bmenu-more { display: grid; place-items: center; width: 32px; height: 32px; border: none; border-radius: var(--radius); background: transparent; color: var(--ink); cursor: pointer; }
html.pondros .bmenu-more:hover { background: var(--accent-2); }
html.pondros .bmenu-more svg { width: 18px; height: 18px; }
html.pondros .bmenu-sec { padding: 6px 0; border-bottom: 1px solid var(--line); }
html.pondros .bmenu-sec summary {
  display: flex; align-items: center; gap: 8px; padding: 8px 4px; list-style: none; cursor: pointer;
  font-size: 17px; font-weight: 500; color: var(--ink);
}
html.pondros .bmenu-sec summary::-webkit-details-marker { display: none; }
html.pondros .bmenu-sec summary svg { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); }
html.pondros .bmenu-sec[open] summary svg { transform: rotate(90deg); }
html.pondros .bmenu--base .bmenu-new { margin-top: 8px; border-radius: var(--radius); }

/* "Add or import" (Airtable's menu). */
html.pondros .aimp-wrap { position: relative; }
html.pondros .aimp-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 90; width: 320px; padding: 8px;
  border-radius: 10px; background: var(--panel); box-shadow: var(--pop-shadow);
}
html.pondros .aimp-menu[hidden] { display: none; }
html.pondros .aimp-cap { margin: 0; padding: 8px 10px 4px; font-size: 12px; color: var(--ink-3); }
html.pondros .aimp-sep { height: 1px; margin: 6px 10px; background: var(--line); }
html.pondros .aimp-form { margin: 0; }
html.pondros .aimp-opt {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 10px;
  border: none; border-radius: var(--radius); background: transparent; text-align: left; text-decoration: none;
  font: inherit; font-size: 14px; color: var(--ink); cursor: pointer;
}
html.pondros .aimp-opt:hover { background: var(--accent-2); }
html.pondros .aimp-opt img, html.pondros .aimp-opt svg { flex: none; width: 16px; height: 16px; object-fit: contain; }
html.pondros .aimp-tag {
  margin-left: auto; padding: 1px 8px; border-radius: var(--radius-pill);
  background: var(--brand-soft); color: var(--accent-ink); font-size: 12px; font-weight: 500;
}

/* No "who's on the board" avatars (the user's call); live cursors show it. */
html.pondros .presence-pill { display: none !important; }

/* The "…" menu, Airtable's: roomy rows, ink icons, a red Delete. */
html.pondros .ctxmenu { padding: 8px; border: none; border-radius: 10px; background: var(--panel); box-shadow: var(--pop-shadow); min-width: 240px; }
html.pondros .ctxopt { min-height: 36px; padding: 0 12px; gap: 12px; border-radius: var(--radius); font-size: 14px; color: var(--ink); }
html.pondros .ctxopt svg { width: 17px; height: 17px; color: var(--ink); }
html.pondros .ctxopt:hover:not(:disabled) { background: var(--accent-2); }
html.pondros .ctxopt.danger, html.pondros .ctxopt.danger svg { color: var(--crit); }
html.pondros .ctxsep { margin: 6px 4px; background: var(--line); }
html.pondros .ctxopt:disabled, html.pondros .ctxopt:disabled svg { opacity: .45; cursor: default; }

/* Collapsed rail: hovering the icon strip slides the full rail out over the
   page (Airtable's flyout); leaving it slides back. Server pages only; the
   board's base strip stays a strip. */
html.pondros.rail-collapsed:not(:has(.pfocus)) .prail--fixed { transition: width 160ms var(--ease-out), box-shadow 160ms var(--ease-out); }
html.pondros.rail-collapsed:not(:has(.pfocus)) .prail--fixed:hover {
  width: var(--rail-w); z-index: 65; box-shadow: var(--pop-shadow);
  padding-left: 12px; padding-right: 12px;
}
html.pondros.rail-collapsed:not(:has(.pfocus)) .prail--fixed:hover .prail-nav a {
  font-size: 15px; gap: 10px; justify-content: flex-start; padding: 0 12px;
}
html.pondros.rail-collapsed:not(:has(.pfocus)) .prail--fixed:hover .prail-nav a svg { width: 18px; height: 18px; }

/* ── Board Appearance (Airtable's Color / Icon) ──────────────────────────────
   The title tile is a real element now (#boardTile), painted from the board's
   color/icon keys; the old ::before mark is retired where the tile exists. */
html.pondros .app:has(> .body) .head h1:has(.btile)::before { content: none; }
html.pondros .btile {
  flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; margin-right: 6px;
  border-radius: 8px; background: var(--base-blue); color: var(--dash-on);
}
html.pondros .btile svg { width: 18px; height: 18px; }
html.pondros .btile-ini { font-size: 13px; font-weight: 600; letter-spacing: 0; line-height: 1; }
.bappr { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 6px; }
.bappr-h {
  display: flex; align-items: center; gap: 6px; width: 100%; height: 34px; padding: 0 8px; border: none;
  background: transparent; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; border-radius: var(--radius);
}
.bappr-h:hover { background: var(--accent-2); }
.bappr-h svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-out); }
.bappr-h.shut svg { transform: rotate(-90deg); }
.bappr-b { padding: 4px 8px 8px; }
.bappr-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--line); margin: 0 0 12px; }
.bappr-tabs button {
  height: 32px; padding: 0; border: none; background: none; font: inherit; font-size: 13.5px; color: var(--ink-3); cursor: pointer;
  box-shadow: inset 0 -2px 0 transparent;
}
.bappr-tabs button.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.bappr-colors { display: grid; grid-template-columns: repeat(5, 32px); gap: 10px; }
.bappr-sw { width: 32px; height: 32px; border: none; border-radius: 8px; cursor: pointer; }
.bappr-sw.on { box-shadow: 0 0 0 2px var(--chrome), 0 0 0 4px var(--ink); }
.bappr-search { display: flex; align-items: center; gap: 6px; height: 30px; margin: 0 0 8px; color: var(--ink-4); }
.bappr-search svg { width: 15px; height: 15px; flex: none; }
html.pondros .bappr-search input { flex: 1; min-width: 0; height: 28px; border: none !important; box-shadow: none !important; background: transparent; padding: 0 !important; font-size: 13.5px; outline: none; }
.bappr-icons { display: grid; grid-template-columns: repeat(8, 32px); gap: 4px; max-height: 176px; overflow-y: auto; }
.bappr-ic {
  display: grid; place-items: center; width: 32px; height: 32px; border: none; border-radius: 6px;
  background: transparent; color: var(--ink-2); cursor: pointer;
}
.bappr-ic:hover { background: var(--accent-2); }
.bappr-ic.on { color: var(--dash-on); }
.bappr-ic svg { width: 18px; height: 18px; }
.bappr-ic .btile-ini { font-size: 12px; font-weight: 600; }
.bappr-none { grid-column: 1 / -1; margin: 8px 0; font-size: 13px; color: var(--ink-3); }

/* Setup (/chief-of-staff) lives in the Agent's focus shell too: same backdrop,
   icon rail and close, so Chat | Setup read as one page (user, 2026-09-22).
   .pfocus is the shell switch; .pchat keeps its own chat sizing. */
.pfocus-page { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; padding: 8px 4px 48px; }

/* The board's title is the rename control (Airtable's base name). */
html.pondros #pageTitle.is-board { cursor: pointer; border-radius: 8px; }
html.pondros #pageTitle.is-board #pageTitleText { border-radius: 6px; padding: 2px 4px; margin: -2px -4px; }
html.pondros #pageTitle.is-board:hover #pageTitleText { background: var(--accent-2); }

/* Inside a board the side strip is only the P mark (Airtable's base view:
   logo up top, account at the bottom). The mark goes Home; Home carries the
   rest of the app's navigation. */
html.pondros .app:has(> .body) .prail .prail-nav,
html.pondros .app:has(> .body) .prail .prail-sec { display: none !important; }

/* Help menu: the account menu's surface, grouped with grey captions. */
html.pondros button.ptop-help { border: none; background: transparent; font: inherit; cursor: pointer; }
html.pondros .ptop-helpm { min-width: 240px; right: 0; }
html.pondros .pa-cap { margin: 6px 10px 4px; font-size: 12px; font-weight: 500; color: var(--ink-3); }

/* Trial card under the base bar's trial pill (Airtable's). */
html.pondros .trial-wrap { position: relative; }
html.pondros button.trial-pill { border: none; font: inherit; cursor: pointer; }
html.pondros .trial-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 70; width: 300px; padding: 18px;
  border-radius: 10px; background: var(--panel); box-shadow: var(--pop-shadow); text-align: left;
}
html.pondros .trial-pop h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--ink); }
html.pondros .trial-pop p { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
html.pondros .trial-go {
  display: flex; align-items: center; justify-content: center; height: 34px; border-radius: var(--radius);
  background: var(--accent); color: var(--on-accent); font-size: 13.5px; font-weight: 500; text-decoration: none;
}
html.pondros .trial-go:hover { background: var(--brand-700); }
html.pondros .trial-cmp { display: block; margin-top: 10px; text-align: center; font-size: 13px; color: var(--accent-ink); text-decoration: none; }
html.pondros .trial-cmp:hover { text-decoration: underline; }

/* The P mark is a real link Home (it was a ::before, so clicking did nothing). */
html.pondros .prail-p { display: none; }
html.pondros .app:has(> .body) .prail .prail-p,
html.pondros:has(.pfocus) .prail--fixed .prail-p { text-decoration: none; cursor: pointer; }
html.pondros .app:has(> .body) .prail .prail-p:hover,
html.pondros:has(.pfocus) .prail--fixed .prail-p:hover { background: var(--bg-2); }
/* The rail's logo is the P glyph (2026-09-23), not a lettered tile: drop the
   mark's black square and draw the glyph in ink, so dark mode flips it. The
   drawing fills ~40% of its box, hence the oversized svg clipped by the link. */
html.pondros .prail-p { position: relative; }
html.pondros .prail-p .brand-mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 68px !important; height: 68px !important; box-shadow: none !important; }
html.pondros .prail-p .brand-mark rect { fill: none; }
html.pondros .prail-p .brand-mark path { fill: currentColor; }

/* Slack-first empty state (Chat and Setup), Airtable's Forms empty state. */
.sfirst { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; min-height: calc(var(--vh) - 160px); }
.sfirst-copy h1 { margin: 0 0 16px; font-family: var(--font-heading); font-size: 44px; line-height: 1.1; font-weight: 675; letter-spacing: -0.015em; color: var(--ink); }
.sfirst-copy p { margin: 0 0 28px; max-width: 460px; font-size: 17px; line-height: 1.55; color: var(--ink-3); }
.sfirst-act { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sfirst-go {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: var(--radius);
  background: var(--dark-btn); color: var(--on-dark-btn); font-size: 14.5px; font-weight: 500; text-decoration: none;
}
.sfirst-go:hover { background: var(--dark-btn-hover); }
.sfirst-more { height: 40px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: var(--radius); background: var(--panel); box-shadow: var(--ring-shadow); color: var(--ink); font-size: 14.5px; text-decoration: none; }
.sfirst-more:hover { box-shadow: var(--ring-shadow-hover); }
.sfirst-art { display: grid; place-items: center; padding: 40px 24px; border-radius: 12px; background: var(--chip); }
.sfirst-art img { width: 100%; max-width: 460px; height: auto; }
@media (max-width: 900px) { .sfirst { grid-template-columns: 1fr; min-height: 0; padding-top: 24px; } .sfirst-copy h1 { font-size: 32px; } }

/* Setup in the Agent's focus shell is one thing: which Slack channels Pondros
   watches (the user's call, 2026-09-22). Everything else on the page stays in
   the markup, so the form still posts its other fields unchanged. */
.pfocus-page .cos .cos-stats,
.pfocus-page .cos .card:not(.cos-setup),
.pfocus-page .cos .cos-setup .cos-toggle,
.pfocus-page .cos .cos-setup .cos-auto,
.pfocus-page .cos .cos-setup .cos-sources { display: none !important; }
.cos-focus-h { margin: 24px 0 20px; }
.cos-focus-h h1 { margin: 0 0 6px; font-family: var(--font-heading); font-size: 24px; font-weight: 675; color: var(--ink); }
.cos-focus-h p { margin: 0; font-size: 14px; color: var(--ink-3); }

/* Board → Automations view: tasks Pondros can take a pass at, by capability. */
html.pondros .autov { max-width: 1040px; margin: 8px auto 48px; padding: 0 8px; }
html.pondros .autov-h h2 { margin: 8px 0 4px; font-family: var(--font-heading); font-size: 20px; font-weight: 650; color: var(--ink); }
html.pondros .autov-h p { margin: 0 0 20px; font-size: 13.5px; color: var(--ink-3); }
html.pondros .autov-empty { margin: 0; padding: 20px; border-radius: var(--radius); background: var(--panel); box-shadow: var(--ring-shadow); font-size: 13.5px; color: var(--ink-3); }
html.pondros .autov-g { margin: 0 0 18px; border-radius: var(--radius); background: var(--panel); box-shadow: var(--ring-shadow); overflow: hidden; }
html.pondros .autov-gh { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
html.pondros .autov-gh b { font-size: 14px; color: var(--ink); }
html.pondros .autov-gh span { font-size: 12.5px; color: var(--ink-3); }
html.pondros .autov-gh i { margin-left: auto; font-style: normal; font-size: 12.5px; color: var(--ink-4); }
html.pondros .autov-row { display: grid; grid-template-columns: 1fr auto 96px auto; align-items: center; gap: 14px; min-height: 48px; padding: 6px 16px; cursor: pointer; }
html.pondros .autov-row + .autov-row { border-top: 1px solid var(--line); }
html.pondros .autov-row:hover { background: var(--bg); }
html.pondros .autov-t { font-size: 13.5px; color: var(--ink); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.pondros .autov-go {
  height: 28px; padding: 0 12px; border: none; border-radius: var(--radius); cursor: pointer; white-space: nowrap;
  background: var(--accent); color: var(--on-accent); font: inherit; font-size: 12.5px; font-weight: 500;
}
html.pondros .autov-go:hover { background: var(--brand-700); }
html.pondros .autov-go:disabled { background: var(--chip); color: var(--ink-3); cursor: default; }
@media (max-width: 700px) { html.pondros .autov-row { grid-template-columns: 1fr auto; } html.pondros .autov-asg, html.pondros .autov-due { display: none; } }

/* Icon-strip tooltip (topbar.js): a dark pill to the right of the icon. */
.p-tip {
  position: fixed; z-index: 200; transform: translateY(-50%); pointer-events: none;
  padding: 6px 12px; border-radius: var(--radius-pill); background: var(--dark-btn); color: var(--on-dark-btn);
  font-size: 13px; font-weight: 500; white-space: nowrap; box-shadow: var(--pop-shadow);
  opacity: 0; transition: opacity 120ms var(--ease-out);
}
.p-tip.on { opacity: 1; }
@media (hover: none) { .p-tip { display: none; } }
html.pondros .tab-new {
  display: inline-flex; align-items: center; align-self: flex-start; height: 14px; margin: -6px 0 0 3px; padding: 0 5px;
  border-radius: var(--radius-pill); background: var(--dark-btn); color: var(--on-dark-btn);
  font-size: 9px; font-weight: 700; letter-spacing: .02em; line-height: 1; vertical-align: super;
}

/* Tidy up review panel. */
html.pondros .tidy-scrim { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, var(--ink) 34%, transparent); }
html.pondros .tidy { position: relative; width: min(640px, 100%); max-height: min(80vh, 760px); overflow-y: auto; padding: 22px 24px; border-radius: 14px; background: var(--panel); box-shadow: var(--pop-shadow); }
html.pondros .tidy h2 { margin: 0 0 12px; font-family: var(--font-heading); font-size: 20px; font-weight: 650; }
html.pondros .tidy h3 { margin: 16px 0 6px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
html.pondros .tidy-x { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border: none; border-radius: var(--radius); background: transparent; font-size: 20px; color: var(--ink-3); cursor: pointer; }
html.pondros .tidy-x:hover { background: var(--accent-2); color: var(--ink); }
html.pondros .tidy-r { display: flex; gap: 10px; align-items: flex-start; padding: 10px 8px; border-radius: 8px; cursor: pointer; }
html.pondros .tidy-r:hover { background: var(--bg); }
html.pondros .tidy-r input { margin-top: 3px; accent-color: var(--accent); }
html.pondros .tidy-r b { display: block; font-size: 13.5px; font-weight: 500; color: var(--ink); }
html.pondros .tidy-r em { display: block; margin-top: 2px; font-style: normal; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
html.pondros .tidy-r.ok b { text-decoration: line-through; color: var(--ink-3); }
html.pondros .tidy-r.bad em { color: var(--crit); }
html.pondros .tidy-f { position: sticky; bottom: -22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px -24px -22px; padding: 14px 24px; border-top: 1px solid var(--line); background: var(--panel); font-size: 12.5px; color: var(--ink-3); }
html.pondros .tidy-go { height: 34px; padding: 0 16px; border: none; border-radius: var(--radius); background: var(--accent); color: var(--on-accent); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; }
html.pondros .tidy-go:disabled { opacity: .7; cursor: default; }
html.pondros .tidy-wait { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: 14px; color: var(--ink-2); }
html.pondros .tidy-spin { width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: tidy-rot .7s linear infinite; }
@keyframes tidy-rot { to { transform: rotate(360deg); } }

/* Tidy up: the one AI button on the toolbar, in the brand gradient — gradient
   text and sparkle inside a thin gradient ring, a soft glow on hover. */
html.pondros .tidy-btn {
  position: relative; border: 1px solid transparent !important; border-radius: var(--radius-pill) !important;
  padding: 0 12px !important;
  background: linear-gradient(var(--panel), var(--panel)) padding-box, var(--brand-grad) border-box !important;
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
html.pondros .tidy-btn, html.pondros .tidy-btn svg {
  -webkit-background-clip: padding-box, border-box; background-clip: padding-box, border-box;
}
html.pondros .tidy-btn .tidy-lbl {
  background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600;
}
html.pondros .tidy-btn svg { stroke: url(#tidyGrad); }
html.pondros .tidy-btn:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent), 0 4px 14px -4px color-mix(in srgb, var(--accent) 45%, transparent); }
html.pondros .tab-new { align-self: auto; margin: 0 0 0 2px; position: relative; top: -7px; vertical-align: baseline; }

html.pondros .autov-view { height: 28px; padding: 0 12px; border: none; border-radius: var(--radius); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand-soft); color: var(--accent-ink); font: inherit; font-size: 12.5px; font-weight: 500; }
html.pondros .autov-view.done { background: var(--chip); color: var(--ink-2); }
html.pondros .autov-view.error { background: var(--chip); color: var(--crit); }
html.pondros .autov-st { font-size: 12.5px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
html.pondros .autov-st.working { color: var(--accent-ink); }
html.pondros .autov-st.error { color: var(--crit); }
html.pondros .autov-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: autov-pulse 1.2s ease-in-out infinite; }
@keyframes autov-pulse { 50% { opacity: .3; } }
html.pondros .autov-live { box-shadow: var(--ring-shadow), 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); }

html.pondros .autov-live .autov-row { grid-template-columns: 1fr auto auto auto; }
html.pondros .autov-close { height: 28px; padding: 0 12px; border: none; border-radius: var(--radius); background: var(--accent); color: var(--on-accent); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap; }
html.pondros .autov-close:disabled { opacity: .6; }

/* In-page delete confirm (_partials/confirm_delete.html), never the browser's pop-up */
.pcf { border: 1px solid var(--line); border-radius: 14px; padding: 0; width: min(420px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); box-shadow: var(--pop-shadow); }
.pcf::backdrop { background: color-mix(in srgb, var(--ink) 35%, transparent); backdrop-filter: blur(2px); }
.pcf-body { padding: 20px 20px 8px; }
.pcf h2 { margin: 0 0 6px; font-size: 16px; font-weight: 650; }
.pcf p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.pcf-name { margin-top: 10px; padding: 8px 10px; border-radius: 8px; font-size: 13px; background: var(--bg-2); color: var(--ink-2); }
.pcf-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px 18px; }
.pcf-cancel, .pcf-danger { border-radius: 8px; padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.pcf-cancel { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
.pcf-cancel:hover { background: var(--bg-2); }
.pcf-danger { background: var(--crit); color: var(--white); border: 0; }
.pcf-danger:hover { filter: brightness(.92); }
.pcf[open] { animation: pcf-pop .14s ease-out; }
@keyframes pcf-pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pcf[open] { animation: none; } }
/* A name we could not link to a person still gets a circle in the Automations
   rows (initials only, full name on hover), neutral so it reads as unlinked. */
html.pondros .autov-asg .av.avlabel { background: var(--chip); color: var(--ink-2); }


/* ── Phone widths (2026-09-23): the full sidebar stayed open at 390px, took
   250px and pushed every page off-screen. Below 760px it is an overlay: hidden
   until ☰ opens it (html.rail-open, topbar.js), over the page, closed by a tap
   outside or Escape. The board and the Agent pages keep their 56px icon strip,
   which already fits a phone and is their only way around. */
@media (max-width: 760px) {
  html.pondros:not(:has(.pfocus)) .app:not(:has(> .body)) { padding-left: 0 !important; }
  html.pondros:not(:has(.pfocus)) .prail--fixed { transform: translateX(-100%); transition: transform .2s ease; z-index: 70; }
  html.pondros.rail-open:not(:has(.pfocus)) .prail--fixed { transform: none; box-shadow: var(--shadow-drawer); }
  html.pondros.rail-open:not(:has(.pfocus))::after { content: ""; position: fixed; inset: 0; z-index: 65; background: color-mix(in srgb, var(--ink) 28%, transparent); }
  html.pondros:not(:has(.pfocus)) #prailReveal { display: none !important; }
  /* The header's search becomes an icon; the palette still opens on tap. */
  html.pondros .ptop-search { width: 40px; min-width: 40px; padding: 0; justify-content: center; flex: none; }
  html.pondros .ptop-search span, html.pondros .ptop-search kbd { display: none; }
  html.pondros .ptop-help span { display: none; }
}

/* ── The board's colour, Airtable-style (2026-09-23): the chosen colour fills
   Share and washes the toolbar band under the title — light in light mode, a
   dark tint in dark. --board-c (the full-strength --base-v-*) is set from the
   board's appearance in pondros.js paintBoardTile; blue until a board loads. */
html.pondros .app:has(> .body) .toolbar {
  background: color-mix(in srgb, var(--board-c, var(--base-v-blue)) 7%, var(--chrome));
  border-bottom: 1px solid var(--line);
}
html.pondros[data-theme="dark"] .app:has(> .body) .toolbar {
  background: color-mix(in srgb, var(--board-c, var(--base-v-blue)) 20%, var(--bg));
}
html.pondros #topShare { background: var(--board-c, var(--accent)); color: var(--white); border-color: transparent; }
html.pondros #topShare:hover { background: color-mix(in srgb, var(--board-c, var(--accent)) 86%, black); }
/* The Unassigned count: its fill is the text colour, so its number must be the page's. */
html.pondros .lk .c { color: var(--paper); }

/* ── The Agent's one sidebar (2026-09-23, ChatGPT's model) ──────────────────
   On the Agent pages it REPLACES the app rail: collapsed it is a 56px icon
   strip, open (html.agent-open) the full 264px panel. The header's Help / bell
   / avatar (.ptop, already a column at the bottom-left on focus pages) stay at
   its foot: a column when collapsed, a row when open. */
html.pondros { --agent-side-w: 264px; }
html.pondros:has(.pagent-side) .prail--fixed { display: none !important; }
html.pondros .pagent-side {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: var(--rail-mini);
  display: flex; flex-direction: column; gap: 2px; padding: 12px 8px 150px; overflow-x: hidden; overflow-y: auto;
  background: var(--chrome); border-right: 1px solid var(--line); transition: width .18s var(--ease-out, ease);
}
html.pondros.agent-open .pagent-side { width: var(--agent-side-w); padding: 12px 10px 76px; }
html.pondros:has(.pagent-side) .app { padding-left: var(--rail-mini) !important; transition: padding-left .18s var(--ease-out, ease); }
html.pondros.agent-open:has(.pagent-side) .app { padding-left: var(--agent-side-w) !important; }
html.pondros:has(.pagent-side) .ag-tabs { display: none; }
@media (prefers-reduced-motion: reduce) { html.pondros .pagent-side, html.pondros:has(.pagent-side) .app { transition: none; } }

html.pondros .pas-top { display: flex; align-items: center; justify-content: space-between; min-height: 40px; margin-bottom: 8px; }
html.pondros .pas-logo { position: relative; display: block; width: 36px; height: 36px; overflow: hidden; border-radius: 8px; color: var(--ink); flex: none; }
html.pondros .pas-logo .brand-mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 68px !important; height: 68px !important; box-shadow: none !important; }
html.pondros .pas-logo .brand-mark rect { fill: none; }
html.pondros .pas-logo .brand-mark path { fill: currentColor; }
html.pondros .pas-toggle { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); cursor: pointer; flex: none; }
html.pondros .pas-toggle:hover, html.pondros .pas-logo:hover { background: var(--bg-2); color: var(--ink); }
/* Collapsed: the toggle takes the logo's place (ChatGPT's "Open sidebar"). */
html.pondros:not(.agent-open) .pas-top { justify-content: center; }
html.pondros:not(.agent-open) .pas-logo { display: none; }

html.pondros .pas-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 38px; padding: 0 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink-2); font: inherit; font-size: 14px; text-decoration: none; cursor: pointer; white-space: nowrap; text-align: left;
}
html.pondros .pas-row svg { flex: none; }
html.pondros .pas-row:hover { background: var(--bg-2); color: var(--ink); }
html.pondros .pas-row.on { background: var(--bg-2); color: var(--ink); font-weight: 500; }
html.pondros .pas-row[hidden] { display: none; }
html.pondros .pas-new { color: var(--ink); font-weight: 500; }
html.pondros:not(.agent-open) .pas-row { justify-content: center; padding: 0; }
html.pondros:not(.agent-open) .pas-row span { display: none; }
html.pondros .pas-search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border-radius: 8px; background: var(--bg-2); color: var(--ink-3); }
html.pondros .pas-search[hidden] { display: none; }
html.pondros .pas-search input { flex: 1; min-width: 0; border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; height: auto !important; font: inherit; font-size: 14px; color: var(--ink); outline: none; }
html.pondros .pas-nav, html.pondros .pas-app { display: flex; flex-direction: column; gap: 1px; margin-top: 10px; }
html.pondros .pas-app { padding-top: 10px; border-top: 1px solid var(--line); }
html.pondros.agent-open .pas-app .pas-row { min-height: 32px; font-size: 13px; color: var(--ink-3); }
html.pondros .pas-recent { margin-top: 14px; min-height: 0; }
html.pondros:not(.agent-open) .pas-recent { display: none; }
html.pondros .pas-h { padding: 0 10px 6px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
html.pondros .pas-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
html.pondros .pas-item { position: relative; }
html.pondros .pas-item a { display: block; padding: 0 30px 0 10px; line-height: 34px; border-radius: 8px; color: var(--ink-2); font-size: 14px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.pondros .pas-item a:hover { background: var(--bg-2); color: var(--ink); }
html.pondros .pas-item.on a { background: var(--bg-2); color: var(--ink); font-weight: 500; }
html.pondros .pas-del { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-3); font-size: 16px; cursor: pointer; opacity: 0; }
html.pondros .pas-item:hover .pas-del, html.pondros .pas-del:focus-visible { opacity: 1; }
html.pondros .pas-del:hover { background: var(--line); color: var(--ink); }
html.pondros .pas-empty { padding: 6px 10px; font-size: 13px; color: var(--ink-3); }
/* The header's controls at the sidebar's foot: a row across the open panel. */
html.pondros:has(.pagent-side) .ptop { z-index: 61; }
html.pondros.agent-open:has(.pagent-side) .ptop { width: var(--agent-side-w); flex-direction: row; justify-content: flex-start; padding: 12px 14px 16px; background: var(--chrome); border-top: 1px solid var(--line); }
html.pondros.agent-open:has(.pagent-side) .ptop-right { flex-direction: row; }
@media (max-width: 900px) {
  html.pondros.agent-open .pagent-side { width: var(--rail-mini); }
  html.pondros.agent-open:has(.pagent-side) .app { padding-left: var(--rail-mini) !important; }
}

/* The app's pages as one compact icon row under the logo (2026-09-23), so Home /
   Board / Library / From other teams don't split the Agent's own list. */
html.pondros .pas-apps { display: flex; gap: 4px; margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid var(--line); }
html.pondros .pas-app-ic { display: grid; place-items: center; width: 38px; height: 34px; border-radius: 8px; color: var(--ink-3); text-decoration: none; }
html.pondros .pas-app-ic:hover { background: var(--bg-2); color: var(--ink); }
html.pondros:not(.agent-open) .pas-apps { flex-direction: column; align-items: center; }