/* rs-shell: the Riverside-style shared layer (rs-wire, Parker 2026-10-18).
   Ported from .orch/qa/flow-design/riverside-review/rs.css + brand.html (type 20/15/13/12, weights 400/500,
   12px inside panels, 16px between panels and to the page edge) and shared/tokens.css (Volare colours only).
   Loaded last. Owns: the tokens and rs-* component classes below, the sidebar, the top bar, the phone drawer,
   tooltips and the shell background. Page agents use these; they never edit this file (see .orch/qa/rs-wire/SHELL.md). */

@font-face { font-family: Inter; src: url(../assets/inter-latin.woff2) format('woff2'); font-weight: 400 600; font-display: swap; }

/* ================================================================ *
 * TOKENS
 * ================================================================ */
:root {
  /* type: four sizes, two weights */
  --rs-fs-title: 20px; --rs-fs-sec: 15px; --rs-fs-body: 13px; --rs-fs-cap: 12px;
  --rs-w-reg: 400; --rs-w-med: 500;
  --rs-ls: .16px;
  --rs-font: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  /* spacing: only these */
  --rs-s4: 4px; --rs-s8: 8px; --rs-s12: 12px; --rs-s16: 16px; --rs-s24: 24px; --rs-s32: 32px;
  --rs-pad: 12px;   /* inside a panel */
  --rs-gap: 16px;   /* between panels, and panel to page edge */
  /* radii */
  --rs-r-panel: 14px; --rs-r-inner: 10px; --rs-r-sm: 8px; --rs-r-xs: 6px; --rs-r-pill: 999px;
  /* surfaces and ink (Volare / Stage colours) */
  --rs-canvas: var(--s-canvas, var(--dk-b-f3f2ed, #F3F2ED));
  --rs-panel: var(--dk-paper, #FFFFFF); --rs-inset: var(--dk-b-f7f6f2, #F7F6F2); --rs-raise: var(--dk-b-eceae4, #ECEAE4);
  --rs-tx: var(--dk-ink, #1F1F21); --rs-tx-2: var(--dk-t-636366, #636366); --rs-tx-3: var(--dk-t-1f1f21a64, rgba(31,31,33,.64));
  --rs-line: var(--dk-l-1f1f21a8, rgba(31,31,33,.08)); --rs-line-2: var(--dk-l-1f1f21a13, rgba(31,31,33,.13));
  --rs-sel: rgba(135,153,195,.18);
  --rs-peri: #8799C3; --rs-peri-deep: #4C5F92; --rs-peri-deep-hover: #42548A; --rs-peri-light: var(--dk-b-c3cce1, #C3CCE1); --rs-peri-soft: rgba(135,153,195,.16);
  --rs-pos: #3A7350; --rs-pos-soft: var(--dk-b-e4f0e8, #E4F0E8); --rs-neg: #9A3B33; --rs-neg-soft: var(--dk-b-fae9e6, #FAE9E6);
  --rs-shadow: 0 1px 2px rgba(31,31,33,.04), 0 4px 12px rgba(31,31,33,.05);
  --rs-pop-shadow: 0 2px 6px rgba(31,31,33,.06), 0 12px 32px rgba(31,31,33,.12);
  --rs-ring: inset 0 0 0 1px var(--rs-peri), 0 0 0 3px var(--rs-peri-soft);
  --rs-ease: cubic-bezier(.2,.7,.2,1); --rs-t: 140ms;
  /* shell geometry */
  --rs-side-w: 236px; --rs-rail-w: 72px; --rs-top-h: 56px;
}

/* ================================================================ *
 * TYPE HELPERS
 * ================================================================ */
.rs-h1 { font: var(--rs-w-med) var(--rs-fs-title)/1.3 var(--rs-font); letter-spacing: -.01em; color: var(--rs-tx); margin: 0; }
.rs-h2 { font: var(--rs-w-med) var(--rs-fs-sec)/1.4 var(--rs-font); letter-spacing: -.005em; color: var(--rs-tx); margin: 0; }
.rs-h3 { font: var(--rs-w-med) var(--rs-fs-body)/1.4 var(--rs-font); color: var(--rs-tx); margin: 0; }
.rs-body { font: var(--rs-w-reg) var(--rs-fs-body)/1.5 var(--rs-font); letter-spacing: var(--rs-ls); color: var(--rs-tx); }
.rs-cap { font: var(--rs-w-reg) var(--rs-fs-cap)/1.45 var(--rs-font); color: var(--rs-tx-2); }
.rs-faint { color: var(--rs-tx-3); }
.rs-num { font-variant-numeric: tabular-nums; }

/* ================================================================ *
 * PANELS
 * ================================================================ */
.rs-panel { background: var(--rs-panel); border-radius: var(--rs-r-panel); box-shadow: inset 0 0 0 1px var(--rs-line), var(--rs-shadow); padding: var(--rs-pad); min-width: 0; }
.rs-panel--flush { padding: 0; }
.rs-inset { background: var(--rs-inset); border-radius: var(--rs-r-inner); box-shadow: inset 0 0 0 1px var(--rs-line); }
.rs-stack { display: grid; gap: var(--rs-gap); min-width: 0; }
.rs-rule { border: 0; border-top: 1px solid var(--rs-line); margin: var(--rs-s12) 0; }

/* ================================================================ *
 * SEGMENTED CONTROL — the selected option is a white thumb on an inset pill
 * <div class="rs-seg" role="tablist"><button aria-selected="true">Look</button>...</div>
 * selected = aria-selected | aria-checked | aria-pressed = "true", or .is-on
 * ================================================================ */
.rs-seg { display: inline-flex; align-items: center; gap: 0; padding: 3px; border-radius: var(--rs-r-pill); background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); max-width: 100%; min-width: 0; }
.rs-seg--fill { display: flex; width: 100%; }
.rs-seg--fill > button { flex: 1 1 0; }
.rs-seg > button, .rs-seg > a { height: 30px; padding: 0 14px; border: 0; border-radius: var(--rs-r-pill); background: none; font: var(--rs-w-med) var(--rs-fs-body)/1 var(--rs-font); letter-spacing: var(--rs-ls); color: var(--rs-tx-2); white-space: nowrap; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: color var(--rs-t), background var(--rs-t), box-shadow var(--rs-t); }
.rs-seg > button:hover, .rs-seg > a:hover { color: var(--rs-tx); }
.rs-seg > [aria-selected="true"], .rs-seg > [aria-checked="true"], .rs-seg > [aria-pressed="true"], .rs-seg > .is-on { background: var(--dk-paper, #fff); color: var(--rs-tx); box-shadow: 0 1px 2px rgba(31,31,33,.1), 0 0 0 1px var(--rs-line); }
.rs-seg--sm > button, .rs-seg--sm > a { height: 26px; padding: 0 10px; font-size: var(--rs-fs-cap); }

/* ================================================================ *
 * CHIPS AND TAGS
 * ================================================================ */
.rs-chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 12px; border: 0; border-radius: var(--rs-r-pill); background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); font: var(--rs-w-reg) var(--rs-fs-cap)/1 var(--rs-font); letter-spacing: var(--rs-ls); color: var(--rs-tx-2); white-space: nowrap; text-decoration: none; cursor: default; }
a.rs-chip, button.rs-chip { cursor: pointer; }
a.rs-chip:hover, button.rs-chip:hover { color: var(--rs-tx); box-shadow: inset 0 0 0 1px var(--rs-line-2); }
.rs-chip.is-on, .rs-chip[aria-pressed="true"], .rs-chip[aria-selected="true"] { background: var(--rs-sel); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); box-shadow: none; }
.rs-chip svg { width: 12px; height: 12px; flex: none; }
.rs-tag { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: var(--rs-r-xs); background: var(--rs-sel); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); font: var(--rs-w-med) var(--rs-fs-cap)/1 var(--rs-font); white-space: nowrap; }
.rs-tag--pos { background: var(--rs-pos-soft); color: var(--dk-tx-rs-pos, var(--rs-pos)); }
.rs-tag--neg { background: var(--rs-neg-soft); color: var(--dk-tx-rs-neg, var(--rs-neg)); }
.rs-tag--quiet { background: var(--rs-inset); color: var(--rs-tx-2); }

/* ================================================================ *
 * BUTTONS
 * .rs-btn = secondary (white pill, hairline); .rs-btn--primary = the one periwinkle-deep action per view;
 * .rs-btn--sm = 32px; .rs-btn--icon = round icon-only (give it data-tip); .rs-tbtn = text button
 * ================================================================ */
.rs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 16px; border: 0; border-radius: var(--rs-r-pill); background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line-2); color: var(--rs-tx); font: var(--rs-w-med) var(--rs-fs-body)/1 var(--rs-font); letter-spacing: var(--rs-ls); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background var(--rs-t), box-shadow var(--rs-t), color var(--rs-t); }
.rs-btn:hover { background: var(--rs-inset); box-shadow: inset 0 0 0 1px rgba(31,31,33,.18); }
.rs-btn svg { width: 16px; height: 16px; flex: none; }
.rs-btn--primary { background: var(--rs-peri-deep); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 8px rgba(76,95,146,.25); }
.rs-btn--primary:hover { background: var(--rs-peri-deep-hover); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 8px rgba(76,95,146,.25); }
.rs-btn--quiet { background: none; box-shadow: none; color: var(--rs-tx-2); }
.rs-btn--quiet:hover { background: var(--rs-inset); box-shadow: none; color: var(--rs-tx); }
.rs-btn--danger { color: var(--dk-tx-rs-neg, var(--rs-neg)); }
.rs-btn--sm { height: 32px; padding: 0 12px; }
.rs-btn--icon { width: 36px; padding: 0; }
.rs-btn--icon.rs-btn--sm { width: 32px; }
.rs-btn[disabled], .rs-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.rs-tbtn { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px; border: 0; border-radius: var(--rs-r-xs); background: none; font: var(--rs-w-med) var(--rs-fs-cap)/1.4 var(--rs-font); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); white-space: nowrap; text-decoration: none; cursor: pointer; }
.rs-tbtn:hover { background: var(--rs-sel); }

/* ================================================================ *
 * INPUTS
 * ================================================================ */
.rs-field { display: grid; gap: 4px; min-width: 0; align-content: start; }
.rs-label { font: var(--rs-w-med) var(--rs-fs-body)/1.4 var(--rs-font); color: var(--rs-tx); }
.rs-hint { font: var(--rs-w-reg) var(--rs-fs-cap)/1.45 var(--rs-font); color: var(--rs-tx-2); }
.rs-err { font: var(--rs-w-reg) var(--rs-fs-cap)/1.45 var(--rs-font); color: var(--dk-tx-rs-neg, var(--rs-neg)); }
.rs-in { display: block; width: 100%; min-width: 0; height: 36px; margin: 0; border: 0; border-radius: var(--rs-r-inner); background: var(--dk-paper, #fff); box-shadow: inset 0 0 0 1px var(--rs-line-2); padding: 0 12px; font: var(--rs-w-reg) var(--rs-fs-body)/1.3 var(--rs-font); letter-spacing: var(--rs-ls); color: var(--rs-tx); outline: none; transition: box-shadow var(--rs-t); }
.rs-in::placeholder { color: var(--rs-tx-3); }
.rs-in:focus { box-shadow: var(--rs-ring); }
.rs-in[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--rs-neg); }
textarea.rs-in { height: auto; min-height: 36px; padding: 8px 12px; line-height: 1.5; resize: vertical; font-family: inherit; }
select.rs-in { appearance: none; -webkit-appearance: none; padding-right: 32px; background: var(--dk-paper, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23636366' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center no-repeat; }
.rs-pill-in { border-radius: var(--rs-r-pill); padding: 0 16px; }

/* ================================================================ *
 * TOOLTIPS — any element with data-tip="Label" gets one (js/router.js showTip draws .tip)
 * ================================================================ */
html[data-look] .tip { padding: 4px 8px; border-radius: var(--rs-r-xs); background: var(--rs-tx); color: var(--dk-oninv, #fff); font: var(--rs-w-reg) var(--rs-fs-cap)/16px var(--rs-font); letter-spacing: 0; white-space: nowrap; box-shadow: none; pointer-events: none; }

/* ================================================================ *
 * SHELL BACKGROUND — light canvas, no art behind anything (empty-state art is untouched)
 * ================================================================ */
html[data-look] body.app { background: var(--rs-canvas); }
html[data-look] body.app .main { background: none; }
html[data-look] body.app .shell > .atmos-slot,
html[data-look] body.app .shell > canvas.atmos-halftone,
html[data-look] body.app .sidebar .atmos-slot { display: none !important; }
/* the stage art box (Home, Create, Processing, Brand, Help, Insights, Onboarding .art-box): its halftone, glints, glow and sweep
   go; the box keeps its flat colour until its page agent turns it into an rs-panel. Art inside empty states
   (.estate-art, .nu-ill, .nu-plate, .inv-card, Videos' placeholder boards) is not an .art-box child and stays. */
html[data-look] body.app .art-box > canvas.fs-art,
html[data-look] body.app .art-box > .art-layer > canvas.fs-art,
html[data-look] body.app .art-box > .glow,
html[data-look] body.app .art-box > .glints,
html[data-look] body.app .art-box > .sweep { display: none !important; }

/* ================================================================ *
 * SIDEBAR — white column, hairline edge; 34px rows, active = periwinkle tint; Create = periwinkle-deep pill
 * ================================================================ */
@media (min-width: 1020px) {
  html[data-look] body.app .shell { grid-template-columns: var(--rs-side-w) minmax(0, 1fr); }
  :root[data-look][data-sidebar="collapsed"] body.app .shell { grid-template-columns: var(--rs-rail-w) minmax(0, 1fr); }
}
html[data-look] body.app .sidebar { background: var(--rs-panel); border-right: 0; box-shadow: inset -1px 0 0 var(--rs-line); }
html[data-look] body.app .sidebar-inner { padding: 10px 12px 12px; gap: 0; }
html[data-look] body.app .sidebar .logo { height: 36px; gap: 10px; padding: 0 4px; margin: 0; color: var(--rs-tx); text-decoration: none; }
html[data-look] body.app .sidebar .logo .logo-mark { width: 28px; height: 28px; margin: 0; object-fit: contain; }
html[data-look] body.app .sidebar .logo span.side-label { font: var(--rs-w-med) 16px/1 var(--rs-font); letter-spacing: 0; color: var(--rs-tx); }
html[data-look] body.app .side-create { margin: 16px 0; padding: 0; }
html[data-look] body.app .side-create .btn--create {
  width: 100%; height: 36px; padding: 0 16px; gap: 8px; justify-content: flex-start; border-radius: var(--rs-r-pill);
  background: var(--rs-peri-deep); color: #fff; font: var(--rs-w-med) var(--rs-fs-body)/1 var(--rs-font); letter-spacing: var(--rs-ls);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 8px rgba(76,95,146,.25); transition: background var(--rs-t);
}
html[data-look] body.app .side-create .btn--create:hover,
html[data-look] body.app .side-create .btn--create:active { background: var(--rs-peri-deep-hover); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 8px rgba(76,95,146,.25); }
html[data-look] body.app .side-create .btn--create .i { width: 14px; height: 14px; }
html[data-look] body.app .sidebar .nav,
html[data-look] body.app .sheet-panel .nav { gap: 2px; margin: 0; }
html[data-look] body.app .sidebar .nav-item,
html[data-look] body.app .sheet-panel .nav-item {
  height: 34px; min-height: 0; padding: 0 10px; gap: 10px; border-radius: var(--rs-r-sm); box-shadow: none;
  font: var(--rs-w-reg) var(--rs-fs-body)/1 var(--rs-font); letter-spacing: var(--rs-ls); color: var(--rs-tx-2); text-decoration: none;
  transition: background var(--rs-t), color var(--rs-t);
}
html[data-look] body.app .sidebar .nav-item:hover,
html[data-look] body.app .sheet-panel .nav-item:hover { background: var(--rs-inset); color: var(--rs-tx); }
html[data-look] body.app .sidebar .nav-item.is-active,
html[data-look] body.app .sheet-panel .nav-item.is-active { background: var(--rs-sel); color: var(--rs-tx); font-weight: var(--rs-w-med); box-shadow: none; }
html[data-look] body.app .sidebar .nav-item > svg,
html[data-look] body.app .sheet-panel .nav-item > svg { width: 18px; height: 18px; flex: none; color: var(--rs-tx-3); }
html[data-look] body.app .sidebar .nav-item.is-active > svg,
html[data-look] body.app .sheet-panel .nav-item.is-active > svg { color: var(--rs-tx-2); }
html[data-look] body.app .sidebar .nav-count,
html[data-look] body.app .sheet-panel .nav-count {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: var(--rs-r-pill);
  background: var(--rs-sel); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); font: var(--rs-w-med) var(--rs-fs-cap)/1 var(--rs-font); box-shadow: none;
}
html[data-look] body.app .sidebar .nav-count:empty,
html[data-look] body.app .sheet-panel .nav-count:empty { display: none; }
html[data-look] body.app .side-toggle.side-toggle--vs {
  margin-top: auto; align-self: flex-start; height: 32px; padding: 0 10px; gap: 10px; border-radius: var(--rs-r-sm);
  font: var(--rs-w-reg) var(--rs-fs-cap)/1 var(--rs-font); letter-spacing: var(--rs-ls); color: var(--rs-tx-3);
}
html[data-look] body.app .side-toggle.side-toggle--vs:hover { background: var(--rs-inset); color: var(--rs-tx-2); }
html[data-look] body.app .side-toggle--vs .vs-ic { width: 16px; height: 16px; }
html[data-look] body.app .side-toggle--vs .vs-ic svg { width: 16px; height: 16px; }
html[data-look] body.app .sidebar a:focus-visible,
html[data-look] body.app .sidebar button:focus-visible { outline: 2px solid var(--rs-peri); outline-offset: 1px; box-shadow: none; }

/* the rail (collapsed by choice at >= 1020px, automatic at 681-1019px): one centre line at x = 36, 36px squares */
@media (min-width: 1020px) {
  :root[data-sidebar="collapsed"] body.app .sidebar .logo { padding: 0 10px; justify-content: flex-start; }
  :root[data-sidebar="collapsed"] body.app .side-create .btn--create { width: 36px; padding: 0; margin-left: 6px; justify-content: center; gap: 0; }
  :root[data-sidebar="collapsed"] body.app .sidebar .nav-item { position: relative; width: 36px; height: 36px; padding: 0 9px; margin-left: 6px; justify-content: flex-start; overflow: visible; }
  :root[data-sidebar="collapsed"] body.app .side-toggle.side-toggle--vs { width: 36px; height: 36px; padding: 0 10px; margin-left: 6px; align-self: flex-start; }
  :root[data-sidebar="collapsed"] body.app .sidebar .nav-count { position: absolute; top: -3px; right: -5px; margin: 0; min-width: 18px; height: 18px; padding: 0 5px; background: var(--rs-peri-deep); color: #fff; box-shadow: 0 0 0 2px var(--rs-panel); }
}
@media (min-width: 681px) and (max-width: 1019px) {
  html[data-look] body.app .sidebar .logo { padding: 0 10px; justify-content: flex-start; }
  html[data-look] body.app .side-create .btn--create { width: 36px; padding: 0; margin-left: 6px; justify-content: center; gap: 0; }
  html[data-look] body.app .sidebar .nav-item { width: 36px; height: 36px; padding: 0 9px; margin-left: 6px; justify-content: flex-start; }
}

/* ================================================================ *
 * TOP BAR — 56px on the canvas: pill search, bare bell, white avatar disc
 * ================================================================ */
html[data-look] { --page-gutter: var(--rs-gap); }
/* 16px to the page edge; a page block that still bleeds by the old 32px gutter is clipped at the column, not scrolled sideways */
html[data-look] body.app .main { padding-left: var(--rs-gap); padding-right: var(--rs-gap); overflow-x: clip; }
html[data-look] body.app .main > .topbar,
html[data-look] body.app .topbar {
  position: sticky; top: 0; z-index: 30; height: var(--rs-top-h); margin: 0 calc(-1 * var(--rs-gap)) 0; padding: 0 var(--rs-gap); width: auto; max-width: none;
  gap: 8px; justify-content: flex-start; background: var(--rs-canvas); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
html[data-look] body.app .outlet { gap: var(--rs-gap); }
html[data-look] body.app .gsearch { flex: 0 1 360px; margin-right: auto; }
html[data-look] body.app .gsearch .search {
  width: 100%; height: 36px; padding: 0 16px 0 14px; gap: 8px; border: 0; border-radius: var(--rs-r-pill);
  background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line); color: var(--rs-tx-3);
}
html[data-look] body.app .gsearch .search > svg { display: block; width: 15px; height: 15px; flex: none; color: var(--rs-tx-3); }
html[data-look] body.app .gsearch .search::after { display: none; }
html[data-look] body.app .gsearch .search:focus-within { box-shadow: var(--rs-ring); }
html[data-look] body.app .search input { font: var(--rs-w-reg) var(--rs-fs-body)/1 var(--rs-font); letter-spacing: var(--rs-ls); color: var(--rs-tx); }
html[data-look] body.app .search input::placeholder { color: var(--rs-tx-3); }
html[data-look] body.app .topbar > .pop:not(.is-empty) { display: flex; align-items: center; }
/* bell and avatar always sit at the right, whether or not the page shows the search or the bell */
html[data-look] body.app .topbar > #bellWrap,
html[data-look] body.app .topbar > #bellWrap.is-empty + .pop { margin-left: auto; }
html[data-look] body.app .topbar #bellBtn { width: 36px; height: 36px; border-radius: 50%; color: var(--rs-tx-2); background: none; box-shadow: none; }
html[data-look] body.app .topbar #bellBtn:hover { background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line); color: var(--rs-tx); }
html[data-look] body.app .topbar #bellBtn svg { width: 18px; height: 18px; }
html[data-look] body.app #bellBtn:has(.bell-dot:not([hidden]))::after { top: 8px; right: 9px; width: 7px; height: 7px; background: var(--rs-peri-deep); box-shadow: 0 0 0 2px var(--rs-canvas); }
html[data-look] body.app .topbar .avatar { width: 36px; height: 36px; margin: 0; border: 0; border-radius: 50%; background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); font: var(--rs-w-med) var(--rs-fs-body)/1 var(--rs-font); }
html[data-look] body.app .topbar .avatar:hover { box-shadow: inset 0 0 0 1px var(--rs-line-2); filter: none; }
/* the default profile picture: the head-and-shoulders (Parker 2026-10-17), now quiet: periwinkle figure on the white disc, no halftone */
html[data-look] body.app .topbar .avatar:has(.avatar-pfp) { position: relative; overflow: hidden; color: transparent; background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line); }
html[data-look] body.app .topbar .avatar .avatar-pfp { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--rs-peri); filter: none; }
html[data-look] body.app .topbar .avatar .avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
html[data-look] body.app .topbar .popover,
html[data-look] body.app .gsearch-panel { border-radius: var(--rs-r-panel); box-shadow: inset 0 0 0 1px var(--rs-line), var(--rs-pop-shadow); }

/* phones: menu button, bird + Volare, bell, avatar; the drawer is the sidebar at phone size */
html[data-look] body.app .topbar-brand { display: none; }
@media (max-width: 760px) {
  html[data-look] body.app .topbar-brand { display: flex; align-items: center; gap: 8px; margin-right: auto; color: var(--rs-tx); text-decoration: none; font: var(--rs-w-med) 16px/1 var(--rs-font); }
  html[data-look] body.app .topbar-brand img { width: 24px; height: 24px; }
  html[data-look] body.app .gsearch { display: none; }
}
html[data-look] body.app .topbar #sheetBtn { width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; box-shadow: none; color: var(--rs-tx); }
html[data-look] body.app .topbar #sheetBtn:hover { background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line); }
html[data-look] body.app .sheet-panel { width: 280px; max-width: 86vw; padding: 10px 12px 12px; gap: 0; background: var(--rs-panel); box-shadow: var(--rs-pop-shadow); border-radius: 0 var(--rs-r-panel) var(--rs-r-panel) 0; }
html[data-look] body.app .sheet-panel .sheet-head { height: 36px; padding: 0 4px; margin: 0; }
html[data-look] body.app .sheet-panel .sheet-title { display: flex; align-items: center; gap: 10px; font: var(--rs-w-med) 16px/1 var(--rs-font); letter-spacing: 0; color: var(--rs-tx); }
html[data-look] body.app .sheet-panel .sheet-mark { width: 24px; height: 24px; }
html[data-look] body.app .sheet-panel .side-create .btn--create { justify-content: center; height: 40px; }
html[data-look] body.app .sheet-panel .nav-item { height: 40px; min-height: 40px; }

/* ================================================================ *
 * SIDEBAR-LESS ROUTES — onboarding (#/welcome) has no sidebar or top bar: one column, its own padding, no clip
 * ================================================================ */
html[data-look] body.app[data-route="welcome"] .shell,
:root[data-look][data-sidebar] body.app[data-route="welcome"] .shell { grid-template-columns: minmax(0, 1fr); }
html[data-look] body.app[data-route="welcome"] .main { padding: 0 0 40px; overflow-x: visible; }

/* full-height video pages (Review, Processing, the steps after): a 16px foot, not the 72px one the scrolling pages keep */
html[data-look] body.app[data-route="workspace"] .main { padding-bottom: var(--rs-gap); }

/* ================================================================ *
 * DIALOG PRIMARY — the shell's confirm and Shell.dialog main button is the periwinkle-deep primary
 * ================================================================ */
html[data-look] body .btn.rs-btn--primary { background: var(--rs-peri-deep); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 8px rgba(76,95,146,.25); }
html[data-look] body .btn.rs-btn--primary:hover,
html[data-look] body .btn.rs-btn--primary:active { background: var(--rs-peri-deep-hover); color: #fff; }
html[data-look] body .btn.rs-btn--primary[disabled] { background: var(--rs-peri-deep); color: #fff; opacity: .45; }

/* ================================================================ *
 * STEP SHEET — the progress pill's panel (js/flow-progress.js; it moves onto <body> while open), the mockup sheet
 * ================================================================ */
html[data-look] body .prog-panel { width: 380px; padding: 12px 8px 8px; border: 0; border-radius: var(--rs-r-panel); background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line), var(--rs-pop-shadow); }
html[data-look] body .prog-panel-head { align-items: baseline; padding: 0 8px 8px; font: var(--rs-w-med) var(--rs-fs-sec)/1.4 var(--rs-font); color: var(--rs-tx); }
html[data-look] body .prog-panel-head > .faint { font: var(--rs-w-reg) var(--rs-fs-cap)/1.4 var(--rs-font); color: var(--rs-tx-3); }
html[data-look] body .prog-panel .prog-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
html[data-look] body .prog-panel .prog-list li + li::before { display: none; }
html[data-look] body .prog-panel .prow { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; padding: 8px; border-radius: var(--rs-r-inner); color: var(--rs-tx); box-shadow: none; }
html[data-look] body .prog-panel a.prow:hover,
html[data-look] body .prog-panel .prow:focus-visible { background: var(--rs-inset); }
html[data-look] body .prog-panel .prow.now { background: var(--rs-sel); }
html[data-look] body .prog-panel .prow.is-viewing { box-shadow: inset 0 0 0 1.5px var(--rs-peri-deep); }
html[data-look] body .prog-panel .prow .pi { width: 32px; height: 32px; border-radius: 50%; color: var(--rs-tx-3); background: none; box-shadow: inset 0 0 0 1px var(--rs-line-2); }
html[data-look] body .prog-panel .prow .pi svg { width: 15px; height: 15px; }
html[data-look] body .prog-panel .prow.done .pi { background: var(--rs-sel); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); box-shadow: none; }
html[data-look] body .prog-panel .prow.now .pi { background: var(--rs-peri-deep); color: #fff; box-shadow: none; }
html[data-look] body .prog-panel .prow .pn { font: var(--rs-w-med) var(--rs-fs-body)/18px var(--rs-font); color: var(--rs-tx); }
html[data-look] body .prog-panel .prow .pd { font: var(--rs-w-reg) var(--rs-fs-cap)/16px var(--rs-font); color: var(--rs-tx-2); }
html[data-look] body .prog-panel .prow.later .pn { color: var(--rs-tx-2); font-weight: var(--rs-w-med); }
html[data-look] body .prog-panel .prow.later .pd { color: var(--rs-tx-2); }
html[data-look] body .prog-panel .prow .ps { font: var(--rs-w-reg) var(--rs-fs-cap)/1 var(--rs-font); color: var(--rs-tx-3); }
html[data-look] body .prog-panel .prow.now .ps { color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); font-weight: var(--rs-w-med); }
html[data-look] body .prog-panel .prog-empty { padding: 8px; font: var(--rs-w-reg) var(--rs-fs-cap)/1.45 var(--rs-font); color: var(--rs-tx-2); }
html[data-look] body .prog-scrim { background: var(--dk-s-1f1f21a32, rgba(31,31,33,.32)); }
@media (max-width: 760px) {
  html[data-look] body .prog-panel { width: auto; max-height: 82vh; overflow-y: auto; padding: 8px 16px 24px; border-radius: 16px 16px 0 0; }
  html[data-look] body .prog-panel-head { padding: 4px 0 8px; }
}

/* ================================================================ *
 * DIALOG SURFACE — Shell.dialog (.sdlg), the confirm (.modal) and every page dialog built on them: a white rs panel with
 * a hairline and the pop shadow; no frosted glass. The full-screen phone sheet (shell-ui.css, <600px) keeps its square edge.
 * Any older .btn--primary inside a dialog, popover or menu is the periwinkle-deep primary, not ink.
 * ================================================================ */
html[data-look] body .sdlg,
html[data-look] body .modal { border: 0; border-radius: var(--rs-r-panel); background: var(--rs-panel); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px var(--rs-line), var(--rs-pop-shadow); font-family: var(--rs-font); letter-spacing: var(--rs-ls); color: var(--rs-tx); }
html[data-look] body .sdlg-head { padding: var(--rs-s16) var(--rs-s12) var(--rs-s4) var(--rs-s16); }
html[data-look] body :is(.sdlg-title, .modal h2) { font: var(--rs-w-med) var(--rs-fs-sec)/1.4 var(--rs-font); letter-spacing: 0; color: var(--rs-tx); }
html[data-look] body .sdlg-body { padding: var(--rs-s8) var(--rs-s16) var(--rs-s16); font-size: var(--rs-fs-body); }
html[data-look] body :is(.sdlg-body p, .modal-body) { font-size: var(--rs-fs-body); color: var(--rs-tx-2); }
html[data-look] body .sdlg-actions { padding: var(--rs-s12) var(--rs-s16); border-top-color: var(--rs-line); }
html[data-look] body :is(.sdlg-scrim, .modal-scrim) { -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 599px) {
  html[data-look] body .sdlg { border-radius: 0; box-shadow: none; }
}
html[data-look] body :is(.sdlg, .modal, [role="dialog"], [role="alertdialog"], [role="menu"], .smenu) .btn--primary:not(.btn--danger) { background: var(--rs-peri-deep); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 8px rgba(76,95,146,.25); }
html[data-look] body :is(.sdlg, .modal, [role="dialog"], [role="alertdialog"], [role="menu"], .smenu) .btn--primary:not(.btn--danger):is(:hover, :active) { background: var(--rs-peri-deep-hover); color: #fff; }

/* ================================================================ *
 * ASK VOLARE — the chat (js/assistant.js): the drawer (.ask-drawer) and Home's composer popup (.composer .answers).
 * Both carry .rs-chat: a white panel with a hairline, head (bird, title, caption, close), the message list, the foot.
 * ================================================================ */
html[data-look] body .rs-chat[hidden] { display: none; }
html[data-look] body .rs-chat:not([hidden]) { display: flex; flex-direction: column; min-height: 0; padding: 0; border: 0; border-radius: var(--rs-r-panel); background: var(--rs-panel); color: var(--rs-tx); box-shadow: inset 0 0 0 1px var(--rs-line), var(--rs-pop-shadow); overflow: hidden; font: var(--rs-w-reg) var(--rs-fs-body)/1.5 var(--rs-font); letter-spacing: var(--rs-ls); }
html[data-look] body .rs-chat .ask-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--rs-line); }
html[data-look] body .rs-chat .ask-mark { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--rs-sel); }
html[data-look] body .rs-chat .ask-mark img { width: 20px; height: 20px; object-fit: contain; display: block; }
html[data-look] body .rs-chat .ask-head-t { flex: 1; min-width: 0; }
html[data-look] body .rs-chat .ask-title { margin: 0; font: var(--rs-w-med) var(--rs-fs-sec)/1.3 var(--rs-font); letter-spacing: -.005em; color: var(--rs-tx); }
html[data-look] body .rs-chat .ask-cap { margin: 2px 0 0; font: var(--rs-w-reg) var(--rs-fs-cap)/1.4 var(--rs-font); color: var(--rs-tx-2); }
html[data-look] body .rs-chat .ask-close { flex: none; width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--rs-tx-2); cursor: pointer; font-size: 0; }
html[data-look] body .rs-chat .ask-close:hover { background: var(--rs-inset); color: var(--rs-tx); }
html[data-look] body .rs-chat .ask-body,
html[data-look] body .rs-chat .ask-widget { display: flex; flex-direction: column; flex: 1; min-height: 0; border: 0; margin: 0; background: none; }
html[data-look] body .rs-chat .ask-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 16px; background: none; border-radius: 0; scrollbar-width: thin; scrollbar-color: var(--rs-line-2) transparent; }

/* empty state: the bird, one line, three example asks */
html[data-look] body .rs-chat .ask-empty { margin: auto 0; padding: 16px 8px; display: grid; justify-items: center; gap: 8px; text-align: center; color: var(--rs-tx-2); }
html[data-look] body .rs-chat .ask-bird { width: 28px; height: 28px; object-fit: contain; opacity: .9; }
html[data-look] body .rs-chat .ask-intro { margin: 0; max-width: 32ch; font: var(--rs-w-reg) var(--rs-fs-body)/1.5 var(--rs-font); color: var(--rs-tx-2); }
html[data-look] body .rs-chat .ask-sugs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
html[data-look] body .rs-chat .ask-sug { height: auto; min-height: 28px; padding: 6px 12px; white-space: normal; text-align: left; line-height: 1.3; }

/* messages: you on the right in the selection tint, Volare on the left in the soft well */
html[data-look] body .rs-chat .ask-msg { max-width: 88%; margin: 0; padding: 8px 12px; border: 0; box-shadow: none; font: var(--rs-w-reg) var(--rs-fs-body)/1.5 var(--rs-font); overflow-wrap: anywhere; animation: rs-chat-row 220ms var(--rs-ease) both; }
html[data-look] body .rs-chat .ask-msg p { margin: 0; padding: 0; width: auto; max-width: none; background: none; border-radius: 0; font: inherit; color: inherit; white-space: pre-wrap; }
html[data-look] body .rs-chat .ask-msg--me { align-self: flex-end; border-radius: 12px 12px 4px 12px; background: var(--rs-sel); color: var(--rs-tx); }
html[data-look] body .rs-chat .ask-msg--volare { align-self: flex-start; border-radius: 12px 12px 12px 4px; background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); color: var(--rs-tx); }
html[data-look] body .rs-chat .ask-sources { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 12px; font: var(--rs-w-reg) var(--rs-fs-cap)/1.45 var(--rs-font); color: var(--rs-tx-2); }
html[data-look] body .rs-chat .ask-sources li + li { margin: 0; }
html[data-look] body .rs-chat .ask-sources .link { font: var(--rs-w-med) var(--rs-fs-cap)/1.45 var(--rs-font); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); text-decoration: none; }
html[data-look] body .rs-chat .ask-sources .link:hover { text-decoration: underline; }
html[data-look] body .rs-chat .ask-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
html[data-look] body .rs-chat .ask-actions .btn { height: 32px; min-height: 0; padding: 0 12px; border-radius: var(--rs-r-pill); background: var(--rs-panel); color: var(--rs-tx); box-shadow: inset 0 0 0 1px var(--rs-line-2); font: var(--rs-w-med) var(--rs-fs-cap)/1 var(--rs-font); }
html[data-look] body .rs-chat .ask-actions .btn--primary { background: var(--rs-peri-deep); color: #fff; box-shadow: none; }
html[data-look] body .rs-chat .ask-failure,
html[data-look] body .rs-chat .ask-confirm { margin-top: 8px; padding: 8px 12px; border-radius: var(--rs-r-inner); background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line); font: var(--rs-w-reg) var(--rs-fs-cap)/1.45 var(--rs-font); }
html[data-look] body .rs-chat .ask-wait,
html[data-look] body .rs-chat .estate { margin: 0; align-self: flex-start; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }

/* the composer: the mockup's compose box, periwinkle-deep send */
html[data-look] body .rs-chat .ask-form { flex: none; display: flex; align-items: flex-end; gap: 8px; margin: 0 12px; padding: 4px 4px 4px 12px; border: 0; border-radius: 12px; background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); }
html[data-look] body .rs-chat .ask-form:focus-within { background: var(--dk-paper, #fff); box-shadow: var(--rs-ring); }
html[data-look] body .rs-chat .ask-form textarea { flex: 1; min-width: 0; min-height: 32px; max-height: 120px; margin: 0; padding: 6px 0; border: 0; border-radius: 0; background: none; box-shadow: none; outline: none; resize: none; font: var(--rs-w-reg) var(--rs-fs-body)/20px var(--rs-font); letter-spacing: var(--rs-ls); color: var(--rs-tx); field-sizing: content; }
html[data-look] body .rs-chat .ask-form textarea::placeholder { color: var(--rs-tx-3); }
html[data-look] body .rs-chat .ask-form textarea:focus,
html[data-look] body .rs-chat .ask-form textarea:focus-visible { outline: none; box-shadow: none; }
html[data-look] body .rs-chat .ask-send { flex: none; width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 9px; background: var(--rs-peri-deep); color: #fff; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 6px rgba(76,95,146,.22); transition: background var(--rs-t), opacity var(--rs-t); }
html[data-look] body .rs-chat .ask-send:hover { background: var(--rs-peri-deep-hover); }
html[data-look] body .rs-chat .ask-send:disabled { opacity: .45; cursor: default; }
html[data-look] body .rs-chat .ask-foot { flex: none; margin: 0; padding: 8px 16px 12px; background: none; font: var(--rs-w-reg) var(--rs-fs-cap)/1.45 var(--rs-font); color: var(--rs-tx-3); }
html[data-look] body .rs-chat .ask-foot p { margin: 0; padding: 0; background: none; border-radius: 0; font: inherit; color: inherit; }
html[data-look] body .rs-chat .ask-foot .link { padding: 0; border: 0; background: none; font: var(--rs-w-med) var(--rs-fs-cap)/1.45 var(--rs-font); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); text-decoration: none; cursor: pointer; }
html[data-look] body .rs-chat .ask-foot .link:hover { text-decoration: underline; }
html[data-look] body .rs-chat :focus-visible { outline: 2px solid var(--rs-peri); outline-offset: 2px; }
@keyframes rs-chat-row { from { opacity: 0; transform: translateY(4px); } }
@keyframes rs-chat-in { from { opacity: 0; transform: translateY(8px) scale(.99); } }

/* the drawer: under the top bar on the right, 16px from the edges, over a light scrim */
html[data-look] body .ask-drawer.rs-chat:not([hidden]) { position: fixed; top: calc(var(--rs-top-h) + 8px); right: var(--rs-gap); bottom: var(--rs-gap); left: auto; z-index: 61; width: min(400px, calc(100vw - 2 * var(--rs-gap))); height: min(720px, calc(100vh - var(--rs-top-h) - 8px - var(--rs-gap))); bottom: auto; max-height: none; animation: rs-chat-in 220ms var(--rs-ease) both; }
html[data-look] body .ask-scrim { background: var(--dk-s-1f1f21a24, rgba(31,31,33,.24)); }
html[data-look] body:has(.ask-drawer:not([hidden]))::before { display: none; }
html[data-look] body .ask-drawer.rs-chat .ask-foot { padding-top: 8px; }

/* Home's composer: the popup opens upward from the bar it belongs to, as wide as the bar */
html[data-look] body .composer .answers.rs-chat { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 2; max-height: min(480px, calc(100vh - var(--rs-top-h) - 120px)); visibility: hidden; transition: opacity 220ms var(--rs-ease), transform 220ms var(--rs-ease), visibility 0s linear 220ms; }
html[data-look] body .composer.open .answers.rs-chat { visibility: visible; transition-delay: 0s; }
html[data-look] body .composer .answers.rs-chat .ask-list { padding-bottom: 8px; }
html[data-look] body .composer .answers.rs-chat .ask-foot { border-top: 1px solid var(--rs-line); padding-top: 8px; }

/* phones: the drawer is a bottom sheet; the composer popup keeps to the screen */
@media (max-width: 760px) {
  html[data-look] body .ask-drawer.rs-chat:not([hidden]) { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: min(640px, 86vh); border-radius: 16px 16px 0 0; box-shadow: 0 -1px 0 var(--rs-line), var(--rs-pop-shadow); animation-name: rs-chat-up; }
  html[data-look] body .ask-drawer.rs-chat .ask-head::before { content: ""; position: absolute; left: 50%; top: 6px; width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: var(--rs-line-2); }
  html[data-look] body .ask-drawer.rs-chat .ask-head { position: relative; padding-top: 16px; }
  html[data-look] body .ask-drawer.rs-chat .ask-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  html[data-look] body .composer .answers.rs-chat { max-height: min(440px, 62vh); }
  html[data-look] body .rs-chat .ask-form textarea { font-size: 16px; }   /* no zoom on focus */
}
@keyframes rs-chat-up { from { transform: translateY(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html[data-look] body .rs-chat, html[data-look] body .rs-chat * { animation: none !important; transition: none !important; }
}

/* sticky top bar: anything scrolled into view (focus, anchors, find) lands below the bar, not under it */
html[data-look]:has(body.app) { scroll-padding-top: calc(var(--rs-top-h) + var(--rs-s8)); }

/* ================================================================ *
 * SEND BUTTONS — a flex centre on a square; the arrow's ink sits on the centre (drawer and Home's composer)
 * ================================================================ */
html[data-look] body .rs-chat .ask-send { display: flex; align-items: center; justify-content: center; line-height: 0; }
html[data-look] body .rs-chat .ask-send svg { display: block; flex: none; width: 16px; height: 16px; margin: 0; }
html[data-look] body .composer .send { display: flex; align-items: center; justify-content: center; line-height: 0; padding: 0; }
html[data-look] body .composer .send::before { display: block; flex: none; margin: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19.5V6M6.75 11.25 12 6l5.25 5.25'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19.5V6M6.75 11.25 12 6l5.25 5.25'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ================================================================ *
 * BELL — always in the bar; its empty panel: a soft sky over a hairline horizon, three birds drifting across
 * ================================================================ */
html[data-look] body.app .topbar > #bellWrap,
html[data-look] body.app .topbar > #bellWrap.is-empty { display: flex; align-items: center; margin-left: auto; }
html[data-look] body.app .topbar > #bellWrap + .pop { margin-left: 0; }
html[data-look] body .popover--bell { border-radius: var(--rs-r-panel); }
html[data-look] body .popover--bell .bell-empty { padding: 8px 12px 16px; text-align: center; }
html[data-look] body .popover--bell .bell-sky { position: relative; height: 76px; margin: 0 0 12px; border-radius: var(--rs-r-inner); overflow: hidden; container-type: inline-size;
  background: linear-gradient(to bottom, var(--dk-b-c3cce1a42, rgba(195,204,225,.42)), var(--dk-b-c3cce1a12, rgba(195,204,225,.12)) 70%, var(--dk-b-ffffffa0, rgba(255,255,255,0))); }
html[data-look] body .popover--bell .bell-horizon { position: absolute; left: 12px; right: 12px; bottom: 16px; height: 1px; background: var(--rs-line-2); }
html[data-look] body .popover--bell .bell-bird { position: absolute; left: 0; top: var(--y); width: var(--w); line-height: 0; color: var(--c); opacity: var(--o, 1);
  animation: rs-bell-drift var(--d) linear var(--dl) infinite; will-change: transform; }
html[data-look] body .popover--bell .bell-wing { display: block; transform-origin: 50% 60%; animation: rs-bell-beat var(--b) ease-in-out infinite alternate; }
html[data-look] body .popover--bell .bell-wing svg { display: block; width: 100%; height: auto; fill: currentColor; }
html[data-look] body .popover--bell .bell-bird--1 { --y: 18px; --w: 18px; --c: var(--rs-peri-deep); --d: 26s; --dl: -4s; --b: .55s; --p: .26; }
html[data-look] body .popover--bell .bell-bird--2 { --y: 30px; --w: 13px; --c: var(--rs-peri); --d: 31s; --dl: -15s; --b: .5s; --p: .58; }
html[data-look] body .popover--bell .bell-bird--3 { --y: 12px; --w: 11px; --c: var(--rs-peri-deep); --o: .6; --d: 36s; --dl: -27s; --b: .62s; --p: .8; }
html[data-look] body .popover--bell .bell-sky.is-paused .bell-bird,
html[data-look] body .popover--bell .bell-sky.is-paused .bell-wing { animation-play-state: paused; }
@keyframes rs-bell-drift { from { transform: translate(-24px, 0); } 50% { transform: translate(calc(50cqw - 12px), -4px); } to { transform: translate(calc(100cqw + 24px), 0); } }
@keyframes rs-bell-beat { from { transform: scaleY(1); } to { transform: scaleY(.35); } }
@media (prefers-reduced-motion: reduce) {
  html[data-look] body .popover--bell .bell-bird { animation: none !important; transform: translateX(calc(var(--p) * 100cqw)); }
  html[data-look] body .popover--bell .bell-wing { animation: none !important; transform: none; }
}
html[data-look] body .popover--bell .be-t { margin: 0; font: var(--rs-w-med) var(--rs-fs-body)/1.4 var(--rs-font); color: var(--rs-tx); }
html[data-look] body .popover--bell .be-s { margin: 4px 0 0; font: var(--rs-w-reg) var(--rs-fs-cap)/1.45 var(--rs-font); color: var(--rs-tx-2); }
@media (max-width: 680px) { html[data-look] body.app .topbar .popover--bell { left: var(--rs-gap); right: var(--rs-gap); width: auto; max-width: none; } }
/* the bell's rows when something is waiting: a status disc, the title, then the status and when (unread = tinted disc) */
html[data-look] body .popover--bell .bell-row { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center;
  margin: 0 4px; padding: 8px; border-radius: var(--rs-r-inner); color: var(--rs-tx); text-decoration: none; transition: background var(--rs-t); }
html[data-look] body .popover--bell .bell-row:first-of-type { margin-top: 4px; }
html[data-look] body .popover--bell .bell-row:last-child { margin-bottom: 8px; }
html[data-look] body .popover--bell .bell-row::before { display: none; }
html[data-look] body .popover--bell .bell-row:hover,
html[data-look] body .popover--bell .bell-row:focus-visible { background: var(--rs-inset); }
html[data-look] body .popover--bell .bell-row .ng { grid-row: 1 / span 2; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--rs-sel); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
html[data-look] body .popover--bell .bell-row .ng svg { display: block; width: 16px; height: 16px; }
html[data-look] body .popover--bell .bell-row.is-read .ng { background: var(--rs-inset); color: var(--rs-tx-3); box-shadow: inset 0 0 0 1px var(--rs-line); }
html[data-look] body .popover--bell .bell-row .t { grid-column: 2; min-width: 0; font: var(--rs-w-med) var(--rs-fs-body)/1.35 var(--rs-font); color: var(--rs-tx); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
html[data-look] body .popover--bell .bell-row .s { grid-column: 2; min-width: 0; font: var(--rs-w-reg) var(--rs-fs-cap)/1.4 var(--rs-font); color: var(--rs-tx-2); white-space: normal; text-align: left; }
html[data-look] body .popover--bell .bell-row.is-read .t { font-weight: var(--rs-w-reg); color: var(--rs-tx-2); }

/* clip batch (rs-wire/clip/REPORT.md, shell): the search panel hangs from the field's left edge and never past the
   page column; the bell panel scrolls its own list instead of cutting rows; a row's status line wraps inside its column */
html[data-look] body.app .gsearch-panel { left: 0; right: auto; width: max(100%, 460px); max-width: calc(100vw - var(--rs-side-w) - 2 * var(--rs-gap)); }
html[data-look] body .popover--bell { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; max-height: min(34rem, calc(100dvh - var(--rs-top-h) - 2 * var(--rs-gap))); }
html[data-look] body .popover--bell .pop-head { position: sticky; top: 0; z-index: 1; background: var(--rs-panel); }
html[data-look] body .popover--bell .bell-row .s,
html[data-look] body .popover--bell .bell-row .t { justify-self: stretch; max-width: 100%; overflow-wrap: anywhere; }
html[data-look] body .popover--bell .bell-row .s { white-space: normal; }