/* release.clawee.org — the one stylesheet for every page the manage service
   renders: the public install/downloads/verify/platforms/docs pages, the
   login and verification-code pages, and the operator console.

   The visual decisions are clawee.org's, not this file's. The token block
   below is copied VERBATIM from the brand site's web/style.css (its token block, as of
   2026-08-26, commit dc9fb65) and the base rules that follow it — type, glow,
   header, footer, buttons, code — mirror that sheet's so the two sites read as
   one product. A clawee.org change is a deliberate re-copy here (and in
   theme_test.go's claweeOrgRoot); there is no runtime link to clawee.org, so
   this host renders exactly the same with clawee.org down.

   Self-contained: system monospace stack, no webfonts, no CDNs, no url(). */

/* ---------- tokens: web/style.css, verbatim ---------- */
:root {
  --bg:        #0b1120;          /* a touch deeper than the icon's #0F172A */
  --bg-panel:  #0f172a;          /* the icon slate — panels/cards */
  --bg-bar:    #0a0f1d;          /* terminal title bar */
  --ink:       #f7f8ff;          /* near-white text */
  --muted:     #9fb0c9;          /* secondary text */
  --dim:       #71839f;          /* tertiary / comments (4.89:1 on --bg — WCAG AA) */
  --accent:    #4ade80;          /* terminal green */
  --accent-2:  #34d399;          /* deeper green */
  --warn:      #fbbf24;
  --line:      rgba(247, 248, 255, 0.09);
  --line-soft: rgba(247, 248, 255, 0.05);
  --glow:      rgba(74, 222, 128, 0.16);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code",
          "Roboto Mono", Menlo, Monaco, "Liberation Mono", monospace;
  --frame: 1440px;                /* header + docs three-column outer width (VitePress pair) */
  --maxw: 1152px;                 /* home sections + footer — always narrower than --frame */
  --r: 4px;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--mono);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* atmosphere: the two soft green glows only — clawee.org dropped its grid and
   grain overlays 2026-08-26 for readability behind dense text, and this site
   is nothing but dense text */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(900px 480px at 78% -8%, var(--glow), transparent 60%),
    radial-gradient(700px 520px at 0% 100%, rgba(52, 211, 153, 0.06), transparent 60%);
}

a { color: var(--accent); text-decoration: none; }

.wrap  { max-width: var(--maxw);  margin: 0 auto; padding: 0 24px; width: 100%; }
.frame { max-width: var(--frame); margin: 0 auto; padding: 0 24px; width: 100%; }

main { flex: 1; padding: 36px 0 48px; }

h1, h2, h3 { color: var(--ink); line-height: 1.2; }
h1 { font-size: clamp(24px, 3.4vw, 32px); letter-spacing: -0.02em; margin: 0 0 10px; font-weight: 700; }
h2 { font-size: clamp(20px, 3vw, 26px); letter-spacing: -0.01em; margin: 0 0 12px; }
h3 { font-size: 17px; margin: 0 0 8px; letter-spacing: 0.01em; }
p { color: var(--muted); margin: 0 0 14px; }
p strong, li strong { color: var(--ink); font-weight: 600; }

code { font-family: var(--mono); }
p code, li code, td code, .field code {
  background: var(--bg-panel); border: 1px solid var(--line-soft); border-radius: 4px;
  padding: 1px 6px; color: var(--accent); font-size: 0.92em;
}

.muted { color: var(--muted); }
.dim   { color: var(--dim); }
.stamp { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }

/* ---------- header / nav (clawee.org's) ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 64px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.brand .mark { width: 28px; height: 28px; display: block; flex: none; }
.brand .dot { color: var(--accent); }
.nav .spacer, .foot .spacer { flex: 1; }
.nav a.link { color: var(--muted); font-size: 14px; letter-spacing: 0.02em; }
.nav a.link:hover { color: var(--ink); }
.nav a.link.active { color: var(--ink); }
.nav a.cta {
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  padding: 6px 13px;
  border-radius: 4px;
  font-size: 13px;
  margin-left: 6px;
}
.nav a.cta:hover { background: var(--glow); }

/* narrow: the nav wraps under the brand instead of overflowing */
@media (max-width: 720px) {
  .nav { flex-wrap: wrap; height: auto; padding: 12px 0; gap: 10px 14px; }
  .nav .brand { flex-basis: 100%; }
  .nav .spacer { display: none; }
  .nav a.cta { margin-left: auto; }
}

/* ---------- the console: top bar, left navigation, main column ---------- */
/* Feature 02 (2026-09-05): the information architecture of the reference
   console — nav groups on the left, the current page marked, account + sign-out
   on top — on the same tokens as everything else on this sheet. */
.topbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px;
  padding: 10px 0; margin: -36px 0 24px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px; color: var(--dim);
}
.topbar .eyebrow { margin: 0; }
.topbar .spacer { flex: 1; }
.topbar form { display: inline; margin: 0; }

.console { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: start; }
.console-nav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 18px; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group-h { color: var(--dim); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; padding: 0 10px 6px; }
.nav-item { color: var(--muted); font-size: 14px; padding: 6px 10px; border-radius: 4px; }
.nav-item:hover { color: var(--ink); background: var(--bg-panel); }
.nav-item[aria-current="page"] { color: var(--accent); background: var(--bg-panel); }
.console-main { min-width: 0; }

/* the tab row above a releases page: the channel pair on the left, the
   component switch pushed to the right, and the two told apart by colour —
   the channel reads green (the environment), the component reads ink. */
.tabrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 20px; }
.tabrow .tabs { margin: 0; }
.tabrow .comp-tabs { margin-left: auto; }
.channel-tabs a[aria-current="page"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--bg-panel)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent) inset; }
/* The two channels are told apart by colour, not only by position: Production
   is the site's green, Beta is amber — on the selected tab and, dimmer, on
   the unselected one, so the pair reads as two things at a glance. */
.channel-tabs a[data-channel="beta"] { color: var(--warn); opacity: 0.75; }
.channel-tabs a[data-channel="beta"][aria-current="page"], .channel-tabs a[data-channel="beta"]:hover { opacity: 1; }
.channel-tabs a[data-channel="beta"]:hover { color: var(--warn); }
.channel-tabs a[data-channel="beta"][aria-current="page"] { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, var(--bg-panel)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--warn) 45%, transparent) inset; }
.comp-tabs { border-color: color-mix(in srgb, var(--ink) 18%, transparent); }
.comp-tabs a { text-transform: none; }
.comp-tabs a[aria-current="page"] { color: var(--ink); background: color-mix(in srgb, var(--ink) 10%, var(--bg-panel)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 30%, transparent) inset; }

/* a status bar: one release summarised on a line, its actions at the end */
.bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.bar b { color: var(--ink); font-size: 16px; }
.bar .spacer { flex: 1; }
.bar .links a { margin-right: 10px; font-size: 13px; }
.unpromoted {
  border: 1px dashed var(--line); border-radius: var(--r);
  padding: 14px 20px; margin: 0 0 18px;
  background: color-mix(in srgb, var(--bg-panel) 60%, transparent);
}
.unpromoted .k { color: var(--accent); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.unpromoted p { margin: 8px 0 0; font-size: 13px; }
.panel.current .bar { margin-bottom: 14px; }
table.artifacts td { white-space: normal; }

/* a hash: truncated in the cell, the full digest on hover and behind copy */
.cmd.sha { display: inline-flex; padding: 2px 4px 2px 8px; margin: 0; font-size: 12.5px; gap: 8px; }
.cmd.sha code { color: var(--muted); }

@media (max-width: 1024px) {
  .console { grid-template-columns: 1fr; gap: 20px; }
  .console-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 14px 28px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
  .nav-group { flex-direction: row; align-items: center; gap: 2px; }
  .nav-group-h { padding: 0 8px 0 0; }
  .nav-item { border-bottom: 2px solid transparent; border-radius: 4px 4px 0 0; }
  .nav-item[aria-current="page"] { border-bottom-color: var(--accent); }
}
@media (max-width: 720px) {
  .topbar { margin-top: -20px; }
  .bar .spacer { display: none; }
  .bar .actions { width: 100%; }
}

/* ---------- page head ---------- */
.eyebrow {
  color: var(--accent);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.eyebrow::before { content: "❯ "; opacity: 0.7; }
.page-h { margin: 0 0 24px; }
.page-h p { max-width: 70ch; }

.section-h {
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dim); margin: 30px 0 14px; display: flex; align-items: center; gap: 10px;
}
.section-h::before { content: ""; width: 18px; height: 1px; background: var(--accent); }
.section-h:first-child { margin-top: 0; }

/* ---------- tab bar ---------- */
.tabs {
  display: inline-flex; gap: 2px; padding: 3px;
  border: 1px solid var(--line); border-radius: 4px; background: var(--bg-bar);
  margin: 0 0 20px;
}
.tabs a {
  color: var(--muted); font-size: 13px; padding: 5px 14px; border-radius: 4px;
}
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--accent); background: var(--bg-panel); box-shadow: 0 0 0 1px var(--line) inset; }

/* ---------- panel / card ---------- */
.panel {
  border: 1px solid var(--line); border-radius: var(--r);
  background: linear-gradient(180deg, var(--bg-panel), color-mix(in srgb, var(--bg-panel) 70%, var(--bg)));
  padding: 20px;
  margin: 0 0 18px;
  min-width: 0;
}
.panel > :last-child { margin-bottom: 0; }
.panel h3 { margin: 0 0 12px; }
.panel .k { color: var(--accent); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.cards { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0 0 18px; }
@media (min-width: 860px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cards .panel { margin: 0; }
.row { border-top: 1px solid var(--line-soft); padding-top: 12px; margin-top: 12px; }
.row .k { display: block; margin-bottom: 4px; }
.row .actions { margin-top: 10px; }

/* ---------- table (always inside a .scroll, inside a panel) ---------- */
.scroll { overflow-x: auto; max-width: 100%; margin: 0 0 14px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; white-space: nowrap; }
th { color: var(--dim); font-weight: 600; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
td { color: var(--muted); }
td:first-child, td b { color: var(--ink); }
tr:last-child td { border-bottom: 0; }
td.yes { color: var(--accent); }
td.stamp { font-size: 13px; }
tr.state-expired td, tr.expired td { color: var(--dim); text-decoration: line-through; text-decoration-color: var(--line); }
tr.state-expired td .state, tr.expired td .state, tr.expired td a { text-decoration: none; }

/* ---------- status pill — one per catalog row state ---------- */
.state {
  display: inline-block; vertical-align: middle;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; line-height: 1.6;
  color: var(--muted);
}
.state-staged  { color: var(--dim);    border-color: var(--line); }
.state-public  { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.state-yanked  { color: var(--warn);   border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.state-expired { color: var(--dim);    border-style: dashed; text-decoration: line-through; }
.state-current { color: var(--ink);    border-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.state-beta    { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 45%, transparent); }

/* version badge beside an install line */
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 12px; font-size: 12px; color: var(--muted); margin: 0 8px 10px 0;
}
.badge b { color: var(--ink); font-weight: 600; }
.badge.beta b { color: var(--accent-2); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 4px;
  font-family: var(--mono); font-size: 13px; font-weight: 600; line-height: 1.4;
  cursor: pointer; border: 1px solid var(--line); letter-spacing: 0.01em;
  background: transparent; color: var(--ink);
}
.btn:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: var(--accent); }
.btn.primary { background: var(--accent); color: #06210f; border-color: transparent; }
.btn.primary:hover { background: #62e993; color: #06210f; }
.btn.danger { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.btn.danger:hover { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); }
.btn:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.actions form { display: inline; margin: 0; }

/* inline confirm: the first POST's answer, swapped in for the button by the
   page script or shown as a page without it (confirm.go) */
.confirm-strip {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 4px;
  padding: 8px 12px; font-size: 13px; color: var(--muted);
}
.confirm-strip.danger { border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.confirm-strip p { margin: 0; color: var(--muted); }
.confirm-strip code { color: var(--ink); }
/* The buttons sit at the RIGHT end of the strip (operator layout 2026-09-07),
   the same margin-left:auto the invites head bar uses for its own button. The
   strip wraps, so when the question is long enough to take the row on its own
   the buttons take the next row's free space and land under the right edge —
   where the eye already is after reading the stamp. */
.confirm-strip form { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 0 auto; }
.confirm-strip .cancel { color: var(--muted); }

/* promote progress: the step rail lit by the page script as log lines
   arrive, the streamed log itself, and the result line under it */
.rail { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 16px; }
.rail .step {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dim); border: 1px solid var(--line); border-radius: 999px; padding: 2px 12px;
}
.rail .step::before { content: "○ "; }
.rail .step.active { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.rail .step.active::before { content: "◔ "; color: var(--accent); }
.rail .step.done { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.rail .step.done::before { content: "● "; }
.rail .step.failed { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.rail .step.failed::before { content: "✗ "; }
.log {
  list-style: none; padding: 12px 16px; margin: 0;
  background: var(--bg-bar); border: 1px solid var(--line); border-radius: 4px;
  font-size: 13px; line-height: 1.7; color: var(--muted); max-height: 60vh; overflow: auto;
}
.log .ev-start { color: var(--dim); }
.log .ev-ok { color: var(--muted); }
.log .ev-done { color: var(--accent); }
.log .ev-error { color: var(--warn); }
.checks { list-style: none; padding: 0; margin: 0 0 6px; }
.checks .check { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.checks .check:last-child { border-bottom: 0; }
.checks .check b { color: var(--ink); }
.checks .check .detail { color: var(--muted); flex: 1 1 auto; overflow-wrap: anywhere; }
.checks .check .mark { width: 1.2em; }
.checks .check.ok .mark { color: var(--accent); }
.checks .check.fail .mark, .checks .check.fail .detail { color: var(--warn); }
/* the same panel run inline under a row's bar, or under the history table
   (chrome.html, inlineHost) */
.inline-run { margin: 12px 0 0; }
.inline-run .panel.progress { margin: 0; }
.result { margin: 14px 0 0; font-size: 14px; }
.result.ok { color: var(--accent); }
.result.error { color: var(--warn); }
.result.error b { color: var(--ink); }

/* the invite just minted, above the audit listing */
.panel.minted { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.panel.minted p b { color: var(--ink); }

/* ---------- code block with copy ---------- */
.cmd {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 12px 12px 12px 16px;
  font-size: 13.5px;
  margin: 0 0 12px;
  max-width: 100%;
}
.cmd .label { flex: none; color: var(--accent); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.cmd code { color: var(--ink); white-space: nowrap; overflow-x: auto; flex: 1; min-width: 0; }
.cmd .copy {
  flex: none;
  background: transparent; color: var(--muted);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 4px 10px; font-family: var(--mono); font-size: 12px; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.cmd .copy:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.cmd .copy.copied { color: var(--accent); border-color: var(--accent); }
.cmd.stack { flex-direction: column; align-items: stretch; gap: 8px; }
.cmd.stack code { white-space: pre; }

pre {
  background: var(--bg-panel); border: 1px solid var(--line); border-radius: 4px;
  padding: 15px 16px; overflow-x: auto; margin: 0 0 18px; font-size: 13.5px; line-height: 1.6;
  font-family: var(--mono); color: var(--ink);
}
pre .p { color: var(--accent); }
pre .mut { color: var(--dim); }

/* ---------- forms ---------- */
.field { display: block; margin: 0 0 16px; }
.field span { display: block; color: var(--muted); font-size: 13px; margin: 0 0 6px; }
.field input {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--bg-bar); border: 1px solid var(--line); border-radius: 4px;
  padding: 9px 12px;
}
.field input:focus { border-color: color-mix(in srgb, var(--accent) 60%, transparent); outline: none; }
.field input::placeholder { color: var(--dim); }

/* ---------- flash ---------- */
.flash {
  border: 1px solid var(--line); border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  padding: 12px 16px; border-radius: 0 4px 4px 0; margin: 0 0 18px;
  color: var(--muted); font-size: 14px;
}
.flash strong { color: var(--ink); }
.flash.error { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, transparent); color: var(--ink); }
.flash.notice strong { color: var(--accent); }
.flash .secret { color: var(--ink); overflow-wrap: anywhere; margin: 8px 0 0; }

/* ---------- login / TOTP: one centred panel on the glow ---------- */
.auth { max-width: 420px; margin: 40px auto 0; text-align: center; }
.auth .mark { width: 56px; height: 56px; margin: 0 auto 18px; display: block; }
.auth .panel { text-align: left; }
.auth h1 { font-size: 22px; margin: 0 0 18px; }
.auth .actions { margin-top: 6px; }
.auth .btn { width: 100%; justify-content: center; }
.auth p.dim { font-size: 13px; margin: 16px 0 0; }

/* ---------- lists ---------- */
ul.links { list-style: none; padding: 0; margin: 0 0 14px; }
ul.links li { padding: 8px 0; border-bottom: 1px solid var(--line-soft); color: var(--muted); }
ul.links li:last-child { border-bottom: 0; }
ul.links .what { color: var(--muted); font-size: 14px; }

/* ---------- footer (clawee.org's) ---------- */
footer { border-top: 1px solid var(--line); margin-top: 40px; padding: 30px 0 44px; }
.foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; color: var(--dim); font-size: 13px; }
.foot .brand { gap: 9px; font-size: 14px; }
.foot .brand .mark { width: 20px; height: 20px; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--accent); }
.foot .brand:hover { color: var(--ink); }

/* The beta-invite panel under the component's table: the burrowee console's
   shape — a heading with the rule, the mint button on the right, then the
   audit list one line per mint. */
/* The heading row carries the mint button at its right edge; the one-line
   explanation sits under the heading, never beside the button. */
.panel.invites .bar.head { align-items: center; flex-wrap: nowrap; margin-bottom: 4px; }
.panel.invites .bar.head .k { margin: 0; }
.panel.invites .bar.head .actions, .panel.invites .bar.head form { margin-left: auto; }
.panel.invites .lead { margin: 0 0 12px; font-size: 13px; }
/* where the mint's confirm strip is injected (chrome.html), in the body and
   never in the head bar; empty and hidden until the button is pressed */
.panel.invites .confirm-slot { margin: 0 0 14px; }
.panel.invites .minted { margin: 0 0 14px; padding: 12px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 4px; }
.panel.invites .minted p { margin: 8px 0 0; font-size: 13px; }
/* the manual retention re-run (retention_page.go): the same head bar as the
   invites panel, and a preview that lists every key it would delete */
.panel.retention .bar.head { align-items: center; flex-wrap: nowrap; margin-bottom: 4px; }
.panel.retention .bar.head .k { margin: 0; }
.panel.retention .bar.head .actions { margin-left: auto; }
.panel.retention .lead { margin: 0 0 12px; font-size: 13px; }
.panel.retention .confirm-slot { margin: 0 0 14px; }
.retention-plan { flex-basis: 100%; }
.retention-plan p { margin: 6px 0 2px; }
.retention-rows, .retention-keys { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.retention-keys code { overflow-wrap: anywhere; }
.invite-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.invite-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 4px 0; color: var(--muted); }
.invite-list li .stamp { color: var(--ink); font-size: 13px; }
.invite-list li .dot { color: var(--dim); }
.invite-list li .live { color: var(--accent-2); }
.invite-list li.expired .stamp { color: var(--muted); }
.invite-list .cmd.inline { display: inline-flex; padding: 0; margin: 0; background: none; border: 0; }
.invite-list .cmd.inline .copy { font-size: 11px; padding: 1px 6px; }