/* Thermal v2 release workspace. Tokens come from site.css.
   Quieter than the marketing site. Clay is for the primary action, active
   states, and audio-derived signals. Approval, warning, and error stay
   semantically distinct, and they are the product's own: --proof, --warn,
   --alert and --alert-text from site.css. This file kept a second palette
   (--ra-ok, --ra-warn, --ra-err) until decision 084 folded it in. */

[hidden] { display: none !important; }

:root {
  /* release-app.js still names this one in an inline style (the failed
     read). An alias, not a colour: it goes when that file is next open. */
  --ra-err-ink: var(--alert-text);
  --ra-side-w: 232px;
  --ra-insp-w: 320px;
  --ra-mono: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
}

.ra-body { margin: 0; background: var(--bg); color: var(--ink); min-height: 100vh; }

.ra-shell {
  display: grid;
  grid-template-columns: var(--ra-side-w) minmax(0, 1fr);
  min-height: 100vh;
}
.ra-shell.has-inspector { grid-template-columns: var(--ra-side-w) minmax(0, 1fr) var(--ra-insp-w); }

/* ---- sidebar ---- */
.ra-side {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  border-right: 1px solid var(--line);
  padding: 18px 14px 24px;
  background: var(--surface);
}
.ra-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 600; letter-spacing: -0.02em; }
.ra-brand .tm-logo { width: 22px; height: 22px; }
.ra-org { font-family: var(--ra-mono); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); margin: 14px 0 12px; }
.ra-nav, .ra-tree nav { display: flex; flex-direction: column; gap: 2px; }
.ra-nav-item, .ra-tree-item {
  display: flex; align-items: center; min-height: 40px; padding: 0 10px;
  border-radius: var(--r-ctl); color: var(--ink-soft); text-decoration: none; font-size: 14.5px;
}
/* Glyphs from the shared set (icons.js), drawn at the size of the text they lead. */
.ic { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ic svg { width: 16px; height: 16px; display: block; }
.ra-nav-item { gap: 10px; }
.ra-nav-item .ic { color: var(--muted); }
.ra-crumb-sep svg { width: 12px; height: 12px; color: var(--muted); }
.ra-nav-item:hover, .ra-tree-item:hover { background: var(--surface-2); color: var(--ink); }
.ra-tree-item[aria-current="page"] { background: transparent; color: var(--ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); border-radius: 0; }
.ra-tree { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.ra-tree-kicker { font-family: var(--ra-mono); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); margin: 0 0 4px; }
.ra-tree-title { margin: 0 0 10px; font-weight: 600; letter-spacing: -0.02em; overflow-wrap: anywhere; }

/* ---- signed out: the public header replaces the workspace chrome ----
   The sidebar keeps only the release's own sections, under the header; the
   global links and the phone bar are member destinations. */
body.ra-guest { --ra-pub-h: 65px; }
body.ra-guest .ra-brand, body.ra-guest .ra-nav, body.ra-guest .ra-tabbar { display: none; }
body.ra-guest .ra-side, body.ra-guest .ra-inspector { top: var(--ra-pub-h); height: calc(100vh - var(--ra-pub-h)); }
body.ra-guest .ra-top { top: var(--ra-pub-h); }
body.ra-guest .ra-org { margin-top: 0; }
body.ra-guest .ra-tree { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---- main column ---- */
.ra-main { display: flex; flex-direction: column; min-width: 0; }
/* The bar wraps rather than crush the title. The actions held their width
   and the crumb gave way: at 1280, with the inspector open, "Dry Season"
   read "Dry Se"; on a phone the crumb went to nothing and the actions ran
   29px past a 320px screen. Now the title takes a line of its own when the
   actions do not fit beside it, and the actions wrap among themselves. */
.ra-top {
  position: sticky; top: 0; z-index: 3;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
  min-height: 56px; padding: 8px 20px; border-bottom: 1px solid var(--line);
  background: var(--glass, var(--bg)); backdrop-filter: blur(8px);
}
.ra-crumb { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ra-crumb a { color: var(--muted); text-decoration: none; }
.ra-crumb a:hover { color: var(--ink); }
.ra-crumb strong { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.ra-top-right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.ra-presence { font-family: var(--ra-mono); font-size: 12px; color: var(--muted); }

.ra-status { min-height: 18px; margin: 0; padding: 6px 20px 0; font-size: 13px; color: var(--muted); }
.ra-status.err { color: var(--alert-text); }
.ra-status.ok { color: var(--proof); }

.ra-canvas { padding: 24px 28px 120px; max-width: 880px; width: 100%; box-sizing: border-box; }
.ra-canvas:focus { outline: none; }

/* ---- type ---- */
.ra-kicker { font-family: var(--ra-mono); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); margin: 0 0 6px; }
.ra-h1 { font-size: clamp(24px, 3.4vw, 34px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 6px; overflow-wrap: anywhere; }
.ra-h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 10px; }
.ra-sub { font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 18px; max-width: 60ch; }
.ra-hint { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 6px 0 0; }
.ra-mono { font-family: var(--ra-mono); font-variant-numeric: tabular-nums; }

/* ---- chips (minimalist typographic indicator instead of bubble) ---- */
.ra-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 2px; min-height: 22px;
  border: 0; border-bottom: 1.5px solid var(--line); border-radius: 0; background: transparent;
  font-family: var(--ra-mono); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-soft);
  white-space: nowrap;
}
.ra-chip[data-tone="approved"], .ra-chip[data-tone="confirmed"], .ra-chip[data-tone="complete"] { border-bottom-color: var(--proof); color: var(--proof); }
.ra-chip[data-tone="review_requested"], .ra-chip[data-tone="changed"], .ra-chip[data-tone="changes_requested"], .ra-chip[data-tone="blocked"] { border-bottom-color: var(--warn); color: var(--warn); }
.ra-chip[data-tone="suggestion"], .ra-chip[data-tone="in_progress"] { border-bottom-color: var(--accent); color: var(--accent-text); }
.ra-chip[data-tone="later"] { opacity: 0.7; }
.ra-chip[data-tone="err"] { border-bottom-color: var(--alert); color: var(--alert-text); }

/* ---- buttons ---- */
.ra-btn, .ra-ghost, .ra-link-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 16px; border-radius: var(--r-ctl); font: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer; text-decoration: none; letter-spacing: 0;
}
.ra-btn { background: var(--accent); color: var(--on-accent, #FBF8F2); border: 1px solid transparent; font-weight: 600; }
.ra-btn:hover { filter: brightness(1.06); }
.ra-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.ra-ghost:hover { border-color: var(--muted); }
.ra-link-btn { background: transparent; border: 0; color: var(--accent-text); padding: 0 6px; min-height: 36px; font-weight: 500; }
.ra-btn:disabled, .ra-ghost:disabled { opacity: 0.55; cursor: default; }
.ra-btn.small, .ra-ghost.small { min-height: 36px; padding: 0 12px; font-size: 13px; }
.ra-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* ---- cards (minimalist open editorial ledger sections) ---- */
.ra-card { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 18px 0; margin: 0 0 10px; }
.ra-card.next { border-top: 1.5px solid var(--accent); }
.ra-card h3 { font-size: 16px; font-weight: 600; margin: 0 0 4px; letter-spacing: -0.02em; }
.ra-card p { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; }
.ra-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px 24px; }
.ra-grid .ra-card { margin: 0; padding: 14px 0; }
.ra-card-title { font-weight: 600; margin: 0 0 2px; }
.ra-card-meta { font-family: var(--ra-mono); font-size: 12px; color: var(--muted); margin: 4px 0 0; }

/* ---- readiness ---- */
.ra-meter { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; }
.ra-meter-bar { flex: 1; height: 4px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.ra-meter-bar > span { display: block; height: 100%; background: var(--accent); }
.ra-meter strong { font-family: var(--ra-mono); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ra-req { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ra-req li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 14px; color: var(--ink-soft); }
.ra-req li b { font-weight: 500; color: var(--ink); }
.ra-req li[data-ok="true"] .ra-dot { background: var(--proof); }
.ra-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: var(--line); }

/* ---- tables ---- */
.ra-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ra-table th { text-align: left; font-family: var(--ra-mono); font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--muted); font-weight: 500; padding: 6px 0; border-bottom: 1px solid var(--line); }
.ra-table td { padding: 12px 8px 12px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ra-table td:last-child { text-align: right; padding-right: 0; }
.ra-table tr:last-child td { border-bottom: 0; }
.ra-table a { color: var(--ink); text-decoration: none; }

/* ---- forms ---- */
.ra-form { display: grid; gap: 14px; }
.ra-field { display: grid; gap: 6px; }
.ra-field label, .ra-label { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.ra-field input, .ra-field textarea, .ra-field select, .ra-input {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface-2); color: var(--ink);
  font: inherit; font-size: 15px;
}
.ra-field textarea { min-height: 120px; line-height: 1.55; resize: vertical; }
.ra-field textarea.tall { min-height: 260px; }
.ra-field input:focus, .ra-field textarea:focus, .ra-field select:focus, .ra-input:focus { outline: none; box-shadow: var(--ring); }
.ra-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ra-seg { display: flex; flex-wrap: wrap; gap: 12px; border-bottom: 1px solid var(--line); }
.ra-seg button { min-height: 40px; padding: 0 4px; border-radius: 0; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font: inherit; font-weight: 500; cursor: pointer; }
.ra-seg button[aria-pressed="true"] { border-bottom-color: var(--accent); color: var(--ink); font-weight: 600; }
.ra-section { margin: 0 0 24px; }
/* Wraps, so a long chip drops under its heading on a phone rather than
   squeezing "Approved voice" onto two lines. */
.ra-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ra-section-head h3 { font-size: 15px; font-weight: 600; margin: 0; }

/* ---- audio read ---- */
.ra-drop { border: 1px dashed var(--line); border-radius: var(--r-card); padding: 18px; background: transparent; }
/* The picker in the app's type, its button a ghost, not the browser's grey. */
.ra-drop input[type="file"] { width: 100%; min-height: 44px; font: inherit; font-size: 14px; color: var(--muted); }
.ra-drop input[type="file"]::file-selector-button {
  min-height: 44px; margin-right: 12px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r-ctl);
  background: transparent; color: var(--ink); font: inherit; font-weight: 500;
}
.ra-drop input[type="file"]:enabled::file-selector-button { cursor: pointer; }
.ra-drop input[type="file"]:enabled::file-selector-button:hover { border-color: var(--muted); }
.ra-drop input[type="file"]:disabled { opacity: 0.55; }
.ra-progress { height: 4px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; margin: 10px 0 6px; }
.ra-progress > span { display: block; height: 100%; background: var(--accent); transition: width 240ms var(--ease, ease); }
.ra-facts { display: flex; flex-wrap: wrap; gap: 16px; margin: 12px 0; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ra-fact { font-family: var(--ra-mono); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; padding: 0 0 0 10px; border-radius: 0; background: transparent; border-left: 2px solid var(--heat-hot, var(--accent)); }
.ra-arc { display: flex; align-items: flex-end; gap: 2px; height: 48px; margin: 8px 0; }
.ra-arc span { flex: 1; background: var(--heat-hot, var(--accent)); border-radius: 2px 2px 0 0; min-height: 3px; opacity: 0.85; }
.ra-tags { display: flex; flex-wrap: wrap; gap: 12px; }
.ra-tag { min-height: 36px; padding: 0 4px; border-radius: 0; border: 0; border-bottom: 1.5px solid var(--line); background: transparent; color: var(--ink-soft); font: inherit; font-size: 13px; cursor: pointer; }
.ra-tag[aria-pressed="true"] { border-bottom-color: var(--accent); color: var(--ink); font-weight: 600; }
.ra-tag.add { border-bottom-style: dashed; }
.ra-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }
.ra-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.ra-legend i.m { background: var(--heat-hot, var(--accent)); }
.ra-legend i.f { border: 1px solid var(--muted); }
.ra-legend i.i { border: 1px dashed var(--muted); }

/* ---- positioning ---- */
.ra-pos-section { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 16px 0; margin-bottom: 12px; background: transparent; }
.ra-pos-section[data-state="approved"] { border-top-color: var(--proof); }
.ra-pos-section[data-state="changed"] { border-top-color: var(--warn); }
.ra-pos-list { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0; }

/* ---- press kit ---- */
.ra-kit { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 22px; }
.ra-kit-nav { display: flex; flex-direction: column; gap: 2px; }
.ra-kit-group { font-family: var(--ra-mono); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); margin: 12px 0 4px; }
.ra-kit-nav button { text-align: left; min-height: 40px; padding: 0 10px; border-radius: 0; border: 0; background: transparent; color: var(--ink-soft); font: inherit; font-size: 14px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.ra-kit-nav button[aria-current="true"] { background: transparent; color: var(--ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); }
.ra-kit-nav small { font-family: var(--ra-mono); font-size: 11px; color: var(--muted); }
.ra-editor-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.ra-mark { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.ra-count { font-family: var(--ra-mono); font-size: 12px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.ra-count.over { color: var(--alert-text); }
.ra-stale { border: 0; border-left: 2px solid var(--warn); border-radius: 0; padding: 8px 14px; color: var(--warn); font-size: 13px; margin-bottom: 10px; }

/* ---- diff ---- */
.ra-diff { font-family: var(--ra-mono); font-size: 12.5px; line-height: 1.55; border: 1px solid var(--line); border-radius: var(--r-ctl); overflow: auto; background: var(--surface-2); margin: 10px 0; }
.ra-diff div { padding: 1px 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ra-diff .add { background: color-mix(in srgb, var(--proof) 22%, transparent); }
.ra-diff .del { background: color-mix(in srgb, var(--alert) 22%, transparent); text-decoration: line-through; opacity: 0.85; }
.ra-diff .same { color: var(--ink-soft); }

/* ---- inspector ---- */
.ra-inspector { position: sticky; top: 0; height: 100vh; overflow-y: auto; border-left: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; }
.ra-tabs { display: flex; gap: 2px; padding: 8px 8px 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
/* The five tabs fit the 320px panel, and their rule meets the top bar's:
   20 + a 40px tab + 1 is the bar's 8 + a 44px button + 8 + 1. */
.ra-inspector .ra-tabs { padding-top: 20px; }
.ra-tab { min-height: 40px; padding: 0 7px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.ra-tab[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.ra-panel { padding: 16px; font-size: 14px; }
.ra-panel h4 { font-size: 13px; margin: 0 0 8px; font-family: var(--ra-mono); letter-spacing: 0; text-transform: none; color: var(--muted); font-weight: 500; }
.ra-src { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ra-src li { border-left: 2px solid var(--line); padding: 2px 0 2px 10px; }
.ra-src li[data-type="audio_measurement"] { border-left-color: var(--heat-hot, var(--accent)); }
.ra-src li[data-type="artist_fact"], .ra-src li[data-type="approved_voice"], .ra-src li[data-type="approved_positioning"] { border-left-color: var(--muted); }
.ra-src li[data-type="inference"] { border-left-style: dashed; }
.ra-src small { display: block; font-family: var(--ra-mono); font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--muted); }
.ra-comment { border-bottom: 1px solid var(--line); padding: 10px 0; }
.ra-comment:last-child { border-bottom: 0; }
.ra-comment .who { font-family: var(--ra-mono); font-size: 12px; color: var(--muted); }
.ra-comment .anchor { font-size: 12.5px; color: var(--muted); border-left: 2px solid var(--line); padding-left: 8px; margin: 4px 0; }
.ra-comment[data-status="resolved"] { opacity: 0.6; }
.ra-version { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.ra-version:last-child { border-bottom: 0; }
.ra-version small { display: block; font-family: var(--ra-mono); font-size: 12px; color: var(--muted); }
.ra-version .ra-row { justify-content: flex-end; }
.ra-activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.ra-activity small { display: block; font-family: var(--ra-mono); font-size: 12px; color: var(--muted); }

/* ---- sticky action bar (phone) ---- */
.ra-sticky { display: none; }

/* ---- bottom tabbar (phone) ---- */
.ra-tabbar { display: none; }

/* ---- sheet ---- */
.ra-sheet { position: fixed; inset: 0; z-index: 30; }
.ra-sheet-back { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.ra-sheet-body { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sheet); padding: 16px 18px 22px; box-shadow: var(--shadow); }
.ra-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ra-sheet-head h2 { font-size: 17px; margin: 0; }
.ra-close { min-height: 40px; }
.ra-people { list-style: none; margin: 0; padding: 0; }
.ra-people li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ra-people li:last-child { border-bottom: 0; }
.ra-people small { font-family: var(--ra-mono); font-size: 12px; color: var(--muted); }
.ra-excludes { font-size: 13px; color: var(--muted); margin: 10px 0 0; }
.ra-linkbox { font-family: var(--ra-mono); font-size: 12px; word-break: break-all; background: var(--surface-2); border-radius: var(--r-ctl); padding: 10px; margin: 8px 0; }

/* ---- create flow ---- */
.ra-steps { font-family: var(--ra-mono); font-size: 12px; color: var(--muted); letter-spacing: 0; text-transform: none; }

/* ---- empty and list ---- */
.ra-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.ra-list li { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 14px 4px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ra-list li a { color: var(--ink); text-decoration: none; font-weight: 600; }
.ra-list-meta { font-family: var(--ra-mono); font-size: 12px; color: var(--muted); }

/* ---- tablet: inspector becomes a drawer ---- */
@media (max-width: 1180px) {
  .ra-shell, .ra-shell.has-inspector { grid-template-columns: var(--ra-side-w) minmax(0, 1fr); }
  .ra-inspector { display: none; }
  .ra-sticky { display: flex; position: fixed; right: 16px; bottom: 16px; gap: 8px; z-index: 5; }
  /* The bar floats over the page, so its ghost is solid: text showed
     through "Ask AI". */
  .ra-sticky .ra-ghost { background: var(--surface); }
}
/* The top bar still carries the primary here; a second copy floated over
   the rows' Open links. Ask AI stays, for the inspector it stands in for. */
@media (min-width: 1024px) and (max-width: 1180px) {
  #raStickyPrimary { display: none; }
}
/* ---- press kit nav: a status stacks under its name in the 180px column ---- */
@media (min-width: 1024px) {
  .ra-kit-nav button { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding-block: 6px; }
}
/* ---- wide: the column sits centred between the rails ---- */
@media (min-width: 1600px) {
  .ra-canvas, .ra-status { width: 100%; max-width: 880px; margin-inline: auto; }
}

/* ---- phone: one pane at a time ---- */
@media (max-width: 1023px) {
  .ra-shell, .ra-shell.has-inspector { grid-template-columns: minmax(0, 1fr); }
  .ra-side { display: none; }
  .ra-canvas { padding: 14px 16px 150px; }
  .ra-top { padding: 8px 14px; }
  /* The sticky bar carries the primary action on a phone. */
  #raPrimary { display: none; }
  .ra-top-right { min-width: 0; }
  /* Thumbs: every target is at least 44px on a phone. */
  .ra-btn.small, .ra-ghost.small, .ra-link-btn, .ra-tag, .ra-tab, .ra-kit-nav button, .ra-nav-item, .ra-tree-item, .ra-seg button { min-height: 44px; }
  .ra-tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; min-height: 58px;
    background: var(--surface); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .ra-tabbar a, .ra-tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; color: var(--ink-soft); text-decoration: none; font: inherit; font-size: 12px; background: transparent; border: 0; }
  .ra-tabbar .ic svg { width: 20px; height: 20px; }
  .ra-tabbar .ra-tabbar-create { color: var(--accent-text); }
  .ra-tabbar .ra-tabbar-create .ic svg { width: 24px; height: 24px; }
  .ra-sticky { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(66px + env(safe-area-inset-bottom)); gap: 8px; z-index: 6; }
  .ra-sticky .ra-btn { flex: 1; }
  .ra-kit { grid-template-columns: 1fr; }
  .ra-kit-nav { flex-direction: row; flex-wrap: wrap; }
  .ra-kit-group { width: 100%; }
  .ra-sheet-body { left: 0; top: auto; bottom: 0; transform: none; width: 100%; max-height: 92vh; border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-sizing: border-box; }
  body.ra-guest { --ra-pub-h: 57px; }
  body.ra-guest .ra-sticky { bottom: calc(12px + env(safe-area-inset-bottom)); }
  .ra-table thead { display: none; }
  .ra-table tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .ra-table td { border: 0; padding: 0; }
  .ra-table td:first-child { font-weight: 600; }
  /* The name over its state, the action in its own column: Open and Start
     line up on every row whatever the width of the chip. */
  .ra-table td:nth-child(2) { grid-column: 1; }
  .ra-table td:last-child { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

@media (max-width: 700px) {
  .ra-chip, .ra-org, .ra-kicker, .ra-tree-kicker, .ra-kit-group, .ra-card-meta, .ra-list-meta, .ra-comment .who, .ra-version small, .ra-activity small, .ra-src small, .ra-kit-nav small, .ra-panel h4, .ra-presence, .ra-count, .ra-steps { font-size: 11px; }
  /* A phone bar: the title and Share on the first line, the status and the
     people under them. As one cluster the three wrapped to three lines at
     320, with Share alone on the last; the ::after is the line break. */
  .ra-top { justify-content: flex-start; row-gap: 0; }
  .ra-top::after { content: ""; order: 1; flex: 0 0 100%; height: 0; }
  .ra-top-right { display: contents; }
  #raShareBtn { order: 1; }
  #raStatusChip, #raPresence { order: 2; margin-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .ra-progress > span { transition: none; }
}