/* Autonoma — hand-written stylesheet. No build step, no node_modules.
 *
 * Styled after nxtlevel-tech.com (ink, lime, paper; tight Helvetica headings;
 * spaced capital labels), in three themes chosen per browser: dark (default),
 * light, and system (follows the device).
 */

/* ------------------------------------------------------------------ themes */

:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #151918;
  --panel: #1b201f;
  --panel-2: #222826;
  --panel-3: #2a312e;
  --ink: #f4f5ee;
  --ink-2: #d0d6ce;
  --ink-3: #9ba59d;
  --line: #2c3430;
  --line-strong: #3b4540;
  --accent: #c7f464;            /* fills: buttons, toggles, dots */
  --accent-ink: #151918;        /* text on a lime fill */
  --accent-text: #c7f464;       /* links and highlighted text */
  --accent-soft: rgba(199, 244, 100, .10);
  --accent-ring: rgba(199, 244, 100, .28);
  --ok: #8fe3a6;
  --ok-soft: rgba(143, 227, 166, .11);
  --warn: #f2c14e;
  --warn-soft: rgba(242, 193, 78, .12);
  --err: #ff8a7d;
  --err-soft: rgba(255, 138, 125, .12);
  --input: #131716;
  --header: rgba(21, 25, 24, .82);
  --shadow: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, .5);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f5ee;
  --panel: #ffffff;
  --panel-2: #f1f3eb;
  --panel-3: #e7eadf;
  --ink: #151918;
  --ink-2: #3b433e;
  --ink-3: #69726b;
  --line: #e2e5db;
  --line-strong: #cdd2c5;
  --accent: #c7f464;
  --accent-ink: #151918;
  --accent-text: #4b7a00;
  --accent-soft: rgba(140, 190, 30, .14);
  --accent-ring: rgba(140, 190, 30, .38);
  --ok: #2e7d32;
  --ok-soft: rgba(46, 125, 50, .10);
  --warn: #946200;
  --warn-soft: rgba(214, 150, 0, .13);
  --err: #bf3a2b;
  --err-soft: rgba(191, 58, 43, .09);
  --input: #ffffff;
  --header: rgba(244, 245, 238, .84);
  --shadow: 0 1px 2px rgba(21, 25, 24, .05), 0 6px 18px rgba(21, 25, 24, .05);
  --shadow-lg: 0 18px 48px rgba(21, 25, 24, .14);
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    color-scheme: light;
    --bg: #f4f5ee;
    --panel: #ffffff;
    --panel-2: #f1f3eb;
    --panel-3: #e7eadf;
    --ink: #151918;
    --ink-2: #3b433e;
    --ink-3: #69726b;
    --line: #e2e5db;
    --line-strong: #cdd2c5;
    --accent: #c7f464;
    --accent-ink: #151918;
    --accent-text: #4b7a00;
    --accent-soft: rgba(140, 190, 30, .14);
    --accent-ring: rgba(140, 190, 30, .38);
    --ok: #2e7d32;
    --ok-soft: rgba(46, 125, 50, .10);
    --warn: #946200;
    --warn-soft: rgba(214, 150, 0, .13);
    --err: #bf3a2b;
    --err-soft: rgba(191, 58, 43, .09);
    --input: #ffffff;
    --header: rgba(244, 245, 238, .84);
    --shadow: 0 1px 2px rgba(21, 25, 24, .05), 0 6px 18px rgba(21, 25, 24, .05);
    --shadow-lg: 0 18px 48px rgba(21, 25, 24, .14);
  }
}

:root {
  --radius: 12px;
  --radius-sm: 8px;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: var(--sans);
}

/* ------------------------------------------------------------------ base */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: var(--accent-ink); }

a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3 { font-family: var(--sans); font-weight: 500; margin: 0 0 .45em; color: var(--ink); }
h1 { font-size: 32px; line-height: 1.06; letter-spacing: -0.045em; }
h2 { font-size: 20px; line-height: 1.2; letter-spacing: -0.03em; }
h3 { font-size: 15.5px; line-height: 1.3; letter-spacing: -0.015em; font-weight: 600; }

.mono { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

/* Spaced capitals, as in "SOFTWARE & AUTOMATION STUDIO". */
.label {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-3);
}
a.label:hover { color: var(--accent-text); text-decoration: none; }
p.label::before, .eyebrow::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); margin-right: 10px; vertical-align: 2px;
}

.muted { color: var(--ink-3); }
.small { font-size: 13px; }
.center { text-align: center; }
.stack > * + * { margin-top: 10px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
details summary { cursor: pointer; }

/* ------------------------------------------------------------------ chrome */

.topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--header);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  position: sticky; top: 0; z-index: 20;
  flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px;
  background: var(--accent); color: var(--accent-ink); font-size: 15px; font-weight: 800; letter-spacing: -0.04em;
}
.topbar nav { display: flex; gap: 6px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.topbar nav > a:not(.btn) {
  color: var(--ink-2); font-size: 13.5px; padding: 6px 10px; border-radius: 8px;
}
.topbar nav > a:not(.btn):hover { background: var(--panel-2); color: var(--ink); text-decoration: none; }
.topbar nav > a.active { color: var(--ink); font-weight: 600; background: var(--panel-2); }

.working-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; margin-right: 4px;
  border-radius: 999px; background: var(--accent-soft); color: var(--accent-text);
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.working-pill[hidden] { display: none; }

.wrap { max-width: 1560px; margin: 0 auto; padding: 24px; }
.grid { display: grid; grid-template-columns: 300px minmax(0, 1fr) 420px; gap: 18px; align-items: start; }
@media (max-width: 1360px) { .grid { grid-template-columns: 280px minmax(0, 1fr) 380px; } }
@media (max-width: 1100px) { .grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ cards */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.card > h2, .card > h3 { margin-top: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.card-head h2, .card-head h3 { margin: 0; }

.status {
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--panel-2);
}
.status .row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 4px 0; color: var(--ink-2); }
.status .row + .row { border-top: 1px dashed var(--line); }
.status .row b { color: var(--ink); font-family: var(--mono); font-weight: 600; font-size: 12px; }

/* Segmented control: autonomy modes. */
.modes {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; margin-bottom: 12px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
}
.modes button {
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em;
  padding: 6px 11px; border: 0; background: transparent; color: var(--ink-3); border-radius: 7px; cursor: pointer;
}
.modes button:hover { color: var(--ink); }
.modes button.on { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow); }

/* ------------------------------------------------------------------ tasks */

.task {
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  margin-bottom: 8px; background: var(--panel-2);
  transition: border-color .15s ease;
}
.task:hover { border-color: var(--line-strong); }
.task.running { border-color: var(--accent-ring); box-shadow: 0 0 0 3px var(--accent-soft); }
.task h4 { margin: 0 0 4px; font-size: 14.5px; font-family: var(--sans); font-weight: 600; letter-spacing: -0.01em; display: flex; gap: 8px; align-items: center; }
.task h4 a, .list-item > a, .widget-row strong { color: var(--ink); }
.task h4 a:hover, .list-item > a:hover { color: var(--accent-text); }
.task p { margin: 0 0 8px; color: var(--ink-2); font-size: 13px; }
.task .meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.badge {
  display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; background: var(--panel-3); color: var(--ink-2); line-height: 1.5;
}
.badge.running { background: var(--accent-soft); color: var(--accent-text); }
.badge.done, .badge.approved { background: var(--ok-soft); color: var(--ok); }
.badge.failed, .badge.blocked { background: var(--err-soft); color: var(--err); }
.badge.needs_approval, .badge.pending { background: var(--warn-soft); color: var(--warn); }
.badge.auto, .badge.night { background: var(--accent-soft); color: var(--accent-text); }

.lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 800px) { .lanes { grid-template-columns: 1fr; } }
.lane-head {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 12px;
}

/* ------------------------------------------------------------------ forms */

label {
  display: block; font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); margin: 14px 0 6px;
}
input[type=text], input[type=search], input[type=email], input[type=password], input[type=url],
input[type=number], input[type=datetime-local], select, textarea {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 14px;
  background: var(--input); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 3px var(--accent-ring); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--sans); font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em;
  padding: 10px 16px; border-radius: var(--radius-sm); cursor: pointer; line-height: 1.2;
  border: 1px solid var(--ink); background: var(--ink); color: var(--bg);
  transition: opacity .15s ease, background .15s ease, border-color .15s ease, transform .05s ease;
}
.btn:hover { text-decoration: none; opacity: .9; }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--ink-2); border-color: var(--line-strong); }
.btn.ghost:hover { background: var(--panel-2); color: var(--ink); opacity: 1; }
.btn.accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.sm { padding: 6px 11px; font-size: 12.5px; border-radius: 7px; }
.btn[disabled] { opacity: .45; cursor: default; }

/* Anything the server is working on shows a spinner until the page moves on. */
.is-busy { pointer-events: none; opacity: .8; }
.is-busy::before {
  content: ""; display: inline-block; width: .95em; height: .95em; flex-shrink: 0;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.row-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
form.inline { display: inline; }
.linklike { background: none; border: 0; font: inherit; cursor: pointer; color: var(--accent-text); padding: 0; }

.notice {
  padding: 11px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 13.5px;
  border: 1px solid transparent;
}
.notice.ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-soft); }
.notice.err { background: var(--err-soft); color: var(--err); border-color: var(--err-soft); }

.list-item { padding: 11px 0; border-bottom: 1px solid var(--line); }
.list-item:last-child { border-bottom: 0; }
.when { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.when.overdue { color: var(--err); }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left; font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); padding: 8px 10px; border-bottom: 1px solid var(--line);
}
td { padding: 10px; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; }

.field-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.field-row > div { flex: 1; min-width: 150px; }
.field-row label { margin-top: 8px; }

.addr { display: flex; align-items: center; gap: 6px; }
.addr input { flex: 1; min-width: 0; }
.addr span { font-family: var(--mono); font-size: 13px; white-space: nowrap; }

.integration-note {
  border-left: 3px solid var(--warn); background: var(--warn-soft);
  padding: 9px 12px; font-size: 12.5px; margin: 10px 0 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

pre.log {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px;
  max-height: 320px; overflow: auto; margin: 10px 0 0;
}

/* ------------------------------------------------------------------ chat */

.chat { max-height: 480px; overflow-y: auto; padding-right: 2px; margin-bottom: 12px; scroll-behavior: smooth; }
.msg { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 10px; }
.msg.user { justify-content: flex-end; }
.msg-avatar { flex-shrink: 0; line-height: 0; }
.bubble {
  padding: 10px 13px; border-radius: 14px; font-size: 13.5px; max-width: 88%; overflow-wrap: anywhere;
}
.bubble.user { background: var(--ink); color: var(--bg); border-bottom-right-radius: 4px; }
.bubble.user a { color: inherit; text-decoration: underline; }
.bubble.agent { background: var(--panel-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.bubble .label { display: inline-block; margin-top: 6px; }
.bubble.thinking { color: var(--ink-3); display: inline-flex; align-items: center; gap: 8px; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-text); opacity: .3; animation: dot 1.2s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 30% { opacity: 1; transform: translateY(-3px); } 60% { opacity: .3; transform: none; } }
.chat-form textarea { min-height: 64px; }
.chat-hint { margin: 8px 0 0; font-size: 12px; color: var(--ink-3); }

/* ------------------------------------------------------------------ the bot */

.bot { display: inline-block; flex-shrink: 0; overflow: visible; color: var(--ink-3); }
.bot .bot-eyes { transform-box: fill-box; transform-origin: center; animation: bot-blink 6s infinite; }
.bot.bot-resting .bot-eyes, .bot.bot-stuck .bot-eyes { animation: none; }
.bot.is-thinking { animation: bot-bob 1.5s ease-in-out infinite; }
.bot.is-thinking .bot-signal { animation: bot-signal 1s ease-in-out infinite; }
.bot.is-thinking .bot-signal-late { animation-delay: .5s; }
.bot .bot-z { animation: bot-z 2.4s ease-in-out infinite; }
@keyframes bot-blink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes bot-bob { 50% { transform: translateY(-2px); } }
@keyframes bot-signal { 50% { opacity: .25; } }
@keyframes bot-z { 0%, 100% { opacity: .2; transform: translateY(1px); } 50% { opacity: 1; transform: translateY(-2px); } }

.agent-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.agent-head h2 { margin: 0 0 2px; }
.mood { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); }
.mood-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex-shrink: 0; }
.mood-dot.focused { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.mood-dot.ready { background: var(--ok); }
.mood-dot.waiting { background: var(--warn); }
.mood-dot.stuck { background: var(--err); }
.mood-detail { font-size: 12.5px; color: var(--ink-3); margin: 0 0 12px; }

@media (prefers-reduced-motion: reduce) {
  .bot, .bot *, .dots i, .is-busy::before { animation: none !important; }
}

/* ------------------------------------------------------------------ menus, tabs */

.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
  min-width: 230px; max-width: calc(100vw - 32px); padding: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.menu-panel a, .menu-panel .linklike {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px; border-radius: 7px;
  color: var(--ink-2); font-size: 13.5px; text-align: left;
}
.menu-panel a:hover, .menu-panel .linklike:hover { background: var(--panel-2); color: var(--ink); text-decoration: none; }
.menu-panel form { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--line); }
.menu-panel .menu-label { padding: 8px 10px 4px; }
.topbar nav .menu-panel a { color: var(--ink-2); }

.theme-switch { display: flex; gap: 2px; padding: 3px; margin: 0 6px 6px; background: var(--panel-2); border-radius: 9px; }
.theme-switch button {
  flex: 1; border: 0; background: transparent; color: var(--ink-3); font: inherit; font-size: 12px; font-weight: 600;
  padding: 5px 6px; border-radius: 6px; cursor: pointer;
}
.theme-switch button:hover { color: var(--ink); }
.theme-switch button.on { background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 6px 0 18px; }
.tabs a {
  padding: 9px 14px; margin-bottom: -1px; color: var(--ink-3); font-size: 13.5px;
  border-bottom: 2px solid transparent;
}
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a.on { color: var(--ink); border-bottom-color: var(--accent-text); font-weight: 600; }

.subnav {
  display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: 22px; padding: 3px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; width: fit-content; max-width: 100%;
}
.subnav a {
  font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 7px; color: var(--ink-3);
}
.subnav a:hover { color: var(--ink); text-decoration: none; }
.subnav a.on { background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }

/* ------------------------------------------------------------------ pages */

.doc-body { font-size: 15.5px; line-height: 1.75; white-space: pre-wrap; color: var(--ink-2); }

.auth-page { max-width: 420px; margin: 8vh auto; padding: 0 20px; }

.cap {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.cap:last-child { border-bottom: 0; }
.cap p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-3); }

.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.plan { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; background: var(--panel); box-shadow: var(--shadow); }
.plan.current { border-color: var(--accent-text); box-shadow: 0 0 0 3px var(--accent-soft); }
.plan .price { font-size: 30px; font-weight: 500; letter-spacing: -0.04em; }
.plan ul { padding-left: 18px; margin: 10px 0 0; font-size: 13.5px; color: var(--ink-2); }

.hero { max-width: 760px; margin: 12vh auto; padding: 0 22px; }
.hero h1 { font-size: 58px; line-height: 1.02; letter-spacing: -0.058em; }
.hero p.lead { font-size: 19px; color: var(--ink-2); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }

.widget { margin-bottom: 16px; }
.widget h3 { font-size: 15px; }

.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px; }
@media (max-width: 700px) { .choice-grid { grid-template-columns: 1fr; } }
.choice {
  display: block; padding: 22px; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.choice:hover { border-color: var(--accent-text); text-decoration: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.choice h2 { margin: 6px 0 8px; }
.choice.disabled { opacity: .5; pointer-events: none; }

details.card.danger { border-color: var(--err-soft); }
details.card.danger[open] { border-color: var(--err); }

.widget-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.widget-row:last-child { border-bottom: 0; }
.widget-row-text { display: flex; flex-direction: column; min-width: 0; }
.widget-row:not(.on) strong { color: var(--ink-3); }
.widget-row .btn[disabled] { opacity: .35; cursor: default; }
.section-label { margin: 18px 0 2px; }
.section-label:first-of-type { margin-top: 4px; }

.toggle {
  font-family: var(--sans); font-size: 11.5px; font-weight: 700; min-width: 52px;
  padding: 5px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--panel-2); color: var(--ink-3);
}
.toggle.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: var(--panel-2); flex-shrink: 0; }
.segmented button {
  font-family: var(--sans); font-size: 11.5px; font-weight: 700;
  border: 0; background: transparent; color: var(--ink-3); padding: 5px 12px; border-radius: 999px; cursor: pointer;
}
.segmented button.on { background: var(--accent); color: var(--accent-ink); }
.segmented button:not(.on):hover { color: var(--ink); }

.background-choices { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.background-choices form { margin: 0; }
.background-choice {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 170px; padding: 10px;
  font: inherit; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--ink-2); text-align: left;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; margin: 0;
}
.background-choice.on { border-color: var(--accent-text); box-shadow: 0 0 0 3px var(--accent-soft); color: var(--ink); }
.background-choice[disabled] { cursor: default; }
.swatch {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 84px; border-radius: var(--radius-sm);
  background: var(--panel-2) center / cover no-repeat; border: 1px solid var(--line); color: var(--ink-3); font-size: 26px;
}
.swatch.none { background: repeating-linear-gradient(45deg, var(--panel-2), var(--panel-2) 8px, var(--panel) 8px, var(--panel) 16px); }

body.has-background { background: var(--bg) var(--dashboard-background) center / cover fixed no-repeat; }
body.has-background .wrap > .notice { box-shadow: var(--shadow); }

.dns-connect {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin: 12px 0 4px; padding: 12px 14px; border: 1px solid var(--accent-ring); border-radius: var(--radius);
  background: var(--accent-soft);
}

.dns-steps { margin: 12px 0 2px; padding-left: 20px; font-size: 13.5px; color: var(--ink-2); }
.dns-steps > li { margin-bottom: 12px; padding-left: 4px; }
.dns-steps > li::marker { font-family: var(--mono); color: var(--accent-text); }
.dns-steps .btn { margin-left: 6px; vertical-align: middle; }
.dns-steps .table-scroll { margin-top: 8px; }
.dns-records td { vertical-align: middle; white-space: nowrap; }
.dns-records .mono { font-size: 12.5px; color: var(--ink); }
button.copy {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  margin-left: 6px; padding: 3px 7px; border-radius: 5px; border: 1px solid var(--line-strong);
  background: transparent; color: var(--ink-3);
}
button.copy:hover { color: var(--accent-text); border-color: var(--accent-ring); }

/* Page links under long lists. */
.pager { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0 4px; }
.pager .pages { display: flex; gap: 4px; flex-wrap: wrap; }
.pager .pages a, .pager .pages span {
  min-width: 30px; height: 30px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px; font-family: var(--mono); font-size: 12px; color: var(--ink-2); border: 1px solid transparent;
}
.pager .pages a:hover { background: var(--panel-2); color: var(--ink); text-decoration: none; }
.pager .pages .current { border-color: var(--accent-ring); background: var(--accent-soft); color: var(--accent-text); }
.pager .pages .gap { color: var(--ink-3); }
.pager .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.pager .count { margin-left: auto; font-size: 12px; color: var(--ink-3); }

.agent-live { border-color: var(--accent-ring); }
.agent-live .card-head { justify-content: flex-start; }
.agent-live .card-head .badge { margin-left: auto; }

.empty-lane { display: flex; align-items: center; gap: 12px; padding: 6px 0; color: var(--ink-3); font-size: 13px; }

/* ------------------------------------------------------------------ small screens */

@media (max-width: 600px) {
  .wrap { padding: 16px; }
  .topbar { padding: 10px 16px; gap: 10px; }
  .topbar nav { margin-left: 0; }
  .hero h1 { font-size: 36px; }
  h1 { font-size: 27px; }
}

/* ------------------------------------------------------------------ task lane (compact) */

/* A running task: the bot, the title, and a four-step track. */
.now {
  display: flex; gap: 12px; align-items: center; padding: 10px 12px; margin-bottom: 10px;
  border-radius: 12px; color: var(--ink);
  background: linear-gradient(90deg, var(--accent-soft), transparent 70%);
  border: 1px solid var(--accent-ring);
}
.now:hover { text-decoration: none; border-color: var(--accent-text); }
.now-bot { line-height: 0; flex-shrink: 0; }
.now-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.now-title { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track { display: flex; gap: 4px; }
.track .step {
  flex: 1; position: relative; padding-top: 7px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.track .step::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 3px; background: var(--line-strong);
}
.track .step.done { color: var(--ink-2); }
.track .step.done::before { background: var(--accent-text); }
.track .step.current { color: var(--accent-text); }
.track .step.current::before { background: var(--accent); animation: step-pulse 1.4s ease-in-out infinite; }
@keyframes step-pulse { 50% { opacity: .35; } }

/* Waiting tasks: one line each. */
.task-rows { list-style: none; margin: 0; padding: 0; }
.task-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-radius: 8px;
  border-bottom: 1px solid var(--line);
}
.task-row:last-child { border-bottom: 0; }
.task-row:hover { background: var(--panel-2); }
.task-row-title {
  flex: 1; min-width: 0; color: var(--ink); font-size: 13.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.task-row-title:hover { color: var(--accent-text); text-decoration: none; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--line-strong); }
.status-dot.queued { background: var(--accent); }
.status-dot.attention { background: var(--warn); }
.status-dot.problem { background: var(--err); }
.chip {
  flex-shrink: 0; font-size: 10.5px; color: var(--ink-3); padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--line-strong); text-transform: lowercase;
}
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 7px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink-2);
  font-size: 10px; font-weight: 700; cursor: pointer; line-height: 1;
}
.icon-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); text-decoration: none; }
.icon-btn.muted { cursor: default; border-color: transparent; color: var(--ink-3); }
.icon-btn.muted:hover { background: transparent; color: var(--ink-3); }
.icon-btn.is-busy::before { width: 10px; height: 10px; }
.icon-btn.is-busy { font-size: 0; }

/* The bot's activity badge pops gently; the reading dots take turns. */
.bot .bot-badge { transform-box: fill-box; transform-origin: center; animation: bot-badge 2.4s ease-in-out infinite; }
.bot .bot-dot { animation: bot-dot 1.2s infinite; }
.bot .bot-dot + .bot-dot { animation-delay: .2s; }
.bot .bot-dot + .bot-dot + .bot-dot { animation-delay: .4s; }
@keyframes bot-badge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes bot-dot { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .track .step.current::before, .bot .bot-badge, .bot .bot-dot { animation: none !important; } }

/* ------------------------------------------------------------------ scrollbars */

/* Slim, theme-coloured scrollbars everywhere; none at all inside panels that
   scroll on their own (log, chat, menus, modals). */
html { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; border: 2px solid var(--bg); }
.chat, .menu-panel, .modal-scroll, .switcher, #bell-list, .doc-tabs { scrollbar-width: none; -ms-overflow-style: none; }
.chat::-webkit-scrollbar, .menu-panel::-webkit-scrollbar, .switcher::-webkit-scrollbar,
.modal-scroll::-webkit-scrollbar, #bell-list::-webkit-scrollbar, .doc-tabs::-webkit-scrollbar { display: none; }

/* ------------------------------------------------------------------ live log */

.log-card { padding-bottom: 12px; }
.log {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.7; color: var(--ink-2);
  height: 190px; overflow-y: auto; margin: 0 -6px; padding: 0 6px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
}
.log > div { display: flex; gap: 8px; padding: 1px 0; }
.log > div > time { flex-shrink: 0; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.log > div > span { min-width: 0; overflow-wrap: anywhere; }
.log .success > span { color: var(--accent-text); }
.log .warning > span { color: var(--warn); }
.log .error > span { color: var(--err); }
.log .log-empty { color: var(--ink-3); padding-top: 40px; justify-content: center; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: live 2s infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 var(--accent-ring); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.lane-note { margin: 8px 0 0; font-size: 11.5px; color: var(--ink-3); }
.line-no { font-family: var(--mono); font-size: 10.5px; }

.bubble-meta { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.bubble-meta time { font-size: 10.5px; color: var(--ink-3); }
.bubble.user .bubble-meta { justify-content: flex-end; }
.bubble.user .bubble-meta time { color: inherit; opacity: .6; }
.bubble .bubble-meta .label { margin-top: 0; }

/* ------------------------------------------------------------------ bell */

.bell > summary.bell-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 32px; border-radius: 8px; cursor: pointer; color: var(--ink-2);
}
.bell > summary.bell-btn:hover, .bell[open] > summary.bell-btn { background: var(--panel-2); color: var(--ink); }
.bell-count {
  position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
}
.bell-count[hidden] { display: none; }
.menu-panel.bell-panel { width: 360px; padding: 0; overflow: hidden; }
.bell-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.menu-panel .bell-head form { margin: 0; padding: 0; border: 0; }
.menu-panel .bell-head .linklike { width: auto; padding: 0; font-size: 12px; color: var(--accent-text); }
#bell-list { max-height: 380px; overflow-y: auto; padding: 4px; }
.bell-empty { margin: 0; padding: 22px 14px; color: var(--ink-3); font-size: 13px; text-align: center; }
.menu-panel a.bell-all { justify-content: center; border-top: 1px solid var(--line); border-radius: 0; font-size: 12.5px; color: var(--accent-text); padding: 10px; }

a.notice-item, .menu-panel a.notice-item { display: flex; gap: 10px; align-items: flex-start; justify-content: flex-start; padding: 10px; border-radius: 9px; color: var(--ink-2); }
a.notice-item:hover { background: var(--panel-2); text-decoration: none; }
.notice-icon { flex-shrink: 0; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.notice-item.unread .notice-icon { box-shadow: none; background: var(--accent); }
.notice-item.unread.kind-task_failed .notice-icon, .notice-item.unread.kind-task_waiting .notice-icon { background: var(--err); }
.notice-item.unread.kind-task_review .notice-icon { background: var(--warn); }
.notice-item.unread.kind-admin .notice-icon { background: var(--ink); }
.notice-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.notice-text strong { color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.35; }
.notice-item:not(.unread) .notice-text strong { font-weight: 500; color: var(--ink-2); }
.notice-text > span { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.notice-text time { font-size: 11px; color: var(--ink-3); }
.notice-page { padding: 6px; }
.notice-page .notice-item { border-bottom: 1px solid var(--line); border-radius: 0; }
.notice-page .notice-item:last-child { border-bottom: 0; }

.toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 60; width: min(360px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 12px 16px;
  background: var(--panel); color: var(--ink-2); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 10px; box-shadow: var(--shadow-lg); font-size: 12.5px;
  animation: toast-in .25s ease-out; transition: opacity .5s, transform .5s;
}
.toast strong { color: var(--ink); font-size: 13.5px; }
.toast:hover { text-decoration: none; border-color: var(--accent-ring); }
.toast.kind-task_failed, .toast.kind-task_waiting { border-left-color: var(--err); }
.toast.kind-task_review { border-left-color: var(--warn); }
.toast.out { opacity: 0; transform: translateY(8px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

/* ------------------------------------------------------------------ company switcher */

.switcher { display: flex; flex-direction: column; gap: 1px; max-height: 300px; overflow-y: auto; }
.menu-panel .switcher form { margin: 0; padding: 0; border: 0; }
.switch-item {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink-2); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer;
}
.switch-item:hover { background: var(--panel-2); color: var(--ink); }
.switch-item.on { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.switch-item > span:first-of-type { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.switch-item .bot { flex-shrink: 0; }
.switch-check { color: var(--accent-text); font-size: 12px; }
.menu-panel a.switch-new { color: var(--accent-text); font-size: 12.5px; }
.menu-rule { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }

/* ------------------------------------------------------------------ modals */

dialog.modal {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0;
  border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--ink);
  box-shadow: var(--shadow-lg);
}
dialog.modal-wide { width: min(720px, calc(100vw - 32px)); }
dialog.modal::backdrop { background: rgba(8, 10, 9, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
dialog.modal[open] { animation: modal-in .18s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.99); } }
.modal-body { display: flex; flex-direction: column; padding: 22px 24px; max-height: calc(100vh - 50px); overflow-y: auto; scrollbar-width: none; }
.modal-body::-webkit-scrollbar { display: none; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.modal-close {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0;
  border: 0; border-radius: 8px; background: var(--panel-2); color: var(--ink-2); font-size: 20px; line-height: 1; cursor: pointer;
}
.modal-close:hover { background: var(--panel-3); color: var(--ink); text-decoration: none; }
.modal-scroll { overflow-y: auto; margin: 0 -24px; padding: 0 24px; flex: 1; min-height: 0; }
.modal-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.modal-foot form { margin: 0; }

/* Credit packs: tiles, not a dropdown. */
.packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px 8px; padding-top: 8px; }
.pack {
  position: relative; display: flex; flex-direction: column; gap: 1px; padding: 12px 12px 10px; margin: 0;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); cursor: pointer;
  text-transform: none; letter-spacing: 0; font-family: var(--sans); color: var(--ink);
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.pack:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.pack input { position: absolute; opacity: 0; pointer-events: none; }
.pack:has(input:checked) { border-color: var(--accent-text); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--panel); }
.pack:has(input:focus-visible) { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.pack-credits { font-size: 20px; font-weight: 600; letter-spacing: -0.03em; }
.pack-price { font-size: 14px; color: var(--ink-2); }
.pack-per { font-size: 10.5px; color: var(--ink-3); }
.pack-flag {
  position: absolute; top: -8px; right: 8px; padding: 1px 7px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}

/* ------------------------------------------------------------------ billing */

.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }

.wallet {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 22px 24px; margin-bottom: 18px; border-radius: 16px; border: 1px solid var(--accent-ring);
  background: radial-gradient(120% 140% at 0% 0%, var(--accent-soft), transparent 60%), var(--panel);
}
.wallet-balance { font-size: 46px; font-weight: 500; letter-spacing: -0.05em; line-height: 1.05; margin: 2px 0 6px; }
.wallet-balance small { font-size: 14px; letter-spacing: 0; color: var(--ink-3); margin-left: 8px; font-weight: 400; }
.wallet-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.wallet-actions form { margin: 0; }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.plan-card {
  position: relative; display: flex; flex-direction: column; padding: 22px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow);
}
.plan-card.current { border-color: var(--accent-text); box-shadow: 0 0 0 3px var(--accent-soft); }
.plan-card h2 { margin: 0 0 2px; }
.plan-flag {
  position: absolute; top: 16px; right: 16px; padding: 2px 8px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.plan-flag.soft { background: var(--warn-soft); color: var(--warn); }
.plan-tagline { margin: 0 0 12px; color: var(--ink-3); font-size: 13px; }
.plan-price { font-size: 38px; font-weight: 500; letter-spacing: -0.05em; line-height: 1; margin-bottom: 14px; }
.plan-price small { font-size: 13px; letter-spacing: 0; color: var(--ink-3); margin-left: 4px; }
.plan-features { list-style: none; padding: 0; margin: 0 0 18px; flex: 1; font-size: 13.5px; }
.plan-features li { position: relative; padding: 6px 0 6px 22px; border-top: 1px solid var(--line); color: var(--ink-2); }
.plan-features li::before { content: "\2713"; position: absolute; left: 2px; color: var(--accent-text); font-weight: 700; }
.plan-features li.off { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.plan-features li.off::before { content: "\2013"; color: var(--ink-3); }
.plan-btn { width: 100%; justify-content: center; }
.plan-card form { margin: 0; }
span.plan-btn[aria-disabled="true"] { opacity: .6; cursor: default; }

.plans + p + .grid-2 { margin-top: 20px; }
.price-list { list-style: none; padding: 0; margin: 0 0 10px; font-size: 13.5px; }
.price-list li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.price-list li:first-child { border-top: 0; }
.price-list b { color: var(--ink); white-space: nowrap; font-weight: 600; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.plus { color: var(--ok); }
td.minus { color: var(--ink-2); }

.price-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 18px; }
.price-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0; text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: 13px; color: var(--ink-2); }
.price-row input { width: 76px; }

/* ------------------------------------------------------------------ documents */

.doc-search { margin: 0; }
.doc-search input { width: 240px; max-width: 100%; }
.doc-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; margin-bottom: 10px; }
.doc-tabs a {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); font-size: 13px;
}
.doc-tabs a:hover { border-color: var(--line-strong); color: var(--ink); text-decoration: none; }
.doc-tabs a.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.doc-tabs a span { font-family: var(--mono); font-size: 11px; opacity: .7; }
.doc-status { display: flex; gap: 14px; margin: 0 0 14px 4px; font-size: 12.5px; flex-wrap: wrap; }
.doc-status a { color: var(--ink-3); }
.doc-status a.on { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--accent-text); }
.count-pill { display: inline-block; min-width: 16px; padding: 0 5px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-size: 10.5px; font-weight: 700; text-align: center; }

.doc-list { padding: 6px 8px; }
.doc-row { display: flex; align-items: center; gap: 12px; padding: 10px; border-bottom: 1px solid var(--line); }
.doc-row:last-child { border-bottom: 0; }
.doc-row:hover { background: var(--panel-2); border-radius: 10px; }
.doc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.doc-title { color: var(--ink); font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-title:hover { color: var(--accent-text); text-decoration: none; }
.doc-sub { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-sub a { color: var(--ink-3); }
.doc-actions { display: flex; gap: 6px; flex-shrink: 0; }
.doc-actions form { margin: 0; }
@media (max-width: 700px) { .doc-row { flex-wrap: wrap; } .doc-actions { width: 100%; } }

/* One colour per type, on the tabs and the rows. */
.kind-tag {
  flex-shrink: 0; width: 124px; padding: 3px 8px; border-radius: 6px; text-align: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: color-mix(in srgb, var(--kind, #9ba59d) 16%, transparent);
  color: color-mix(in srgb, var(--kind, #9ba59d) 70%, var(--ink));
}
.kind-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--kind, var(--ink-3)); }
.kind-report { --kind: #4fa8f0; }
.kind-strategy { --kind: #a877f0; }
.kind-draft { --kind: #8c968e; }
.kind-post { --kind: #e86aa8; }
.kind-email { --kind: #e5a23a; }
.kind-spec { --kind: #3fb8a0; }
.kind-change { --kind: #86b820; }
.kind-patch { --kind: #e5604f; }
.doc-tabs a.on .kind-dot { box-shadow: 0 0 0 2px var(--bg); }
@media (max-width: 700px) { .kind-tag { width: auto; } }

/* ------------------------------------------------------------------ priority */

.prio-tag {
  flex-shrink: 0; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: var(--panel-3); color: var(--ink-3);
}
.prio-tag.prio-urgent { background: var(--err-soft); color: var(--err); }
.prio-tag.prio-high { background: var(--warn-soft); color: var(--warn); }
.prio-tag.prio-normal { background: var(--panel-3); color: var(--ink-2); }
.prio-tag.prio-low { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-strong); }
.line-no-tag { font-family: var(--mono); font-size: 11px; color: var(--accent-text); margin-right: 2px; }
.prio-form select { width: auto; padding: 3px 8px; font-size: 12px; border-radius: 7px; }

/* New task form */
.new-task label { margin-top: 10px; }
.new-task textarea { resize: vertical; }
.prio-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.prio-option {
  position: relative; margin: 0; padding: 9px 6px; border-radius: 10px; text-align: center; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-2);
  font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none;
}
.prio-option input { position: absolute; opacity: 0; pointer-events: none; }
.prio-option:hover { border-color: var(--line-strong); color: var(--ink); }
.prio-option:has(input:focus-visible) { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.prio-option.prio-urgent:has(input:checked) { border-color: var(--err); background: var(--err-soft); color: var(--err); }
.prio-option.prio-high:has(input:checked) { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.prio-option.prio-normal:has(input:checked) { border-color: var(--accent-text); background: var(--accent-soft); color: var(--ink); }
.prio-option.prio-low:has(input:checked) { border-color: var(--line-strong); background: var(--panel); color: var(--ink); }
.check-row {
  display: flex; align-items: center; gap: 8px; margin: 14px 0 0; cursor: pointer;
  font-family: var(--sans); font-size: 13.5px; letter-spacing: 0; text-transform: none; color: var(--ink-2);
}
.check-row input { width: auto; margin: 0; accent-color: var(--accent); }
@media (max-width: 480px) { .prio-pick { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------------------------ public site (signed-out pages) */

body.pub { font-size: 15px; }
.pub-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.pub-skip { position: absolute; left: -9999px; }
.pub-skip:focus { left: 12px; top: 12px; z-index: 50; background: var(--accent); color: var(--accent-ink); padding: 10px 14px; border-radius: 8px; }

.pub-top { position: sticky; top: 0; z-index: 20; background: var(--header); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.pub-top-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.pub-nav { display: flex; align-items: center; gap: 22px; }
.pub-nav > a:not(.btn) { color: var(--ink-2); font-size: 14px; }
.pub-nav > a:not(.btn):hover { color: var(--ink); text-decoration: none; }

.pub-hero { padding: 76px 0 64px; }
.pub-hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; }
.pub-hero h1 { font-size: clamp(42px, 6.2vw, 70px); line-height: 1.01; letter-spacing: -0.058em; margin: 10px 0 20px; max-width: 12ch; }
.pub-lead { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 54ch; margin: 0; }
.pub-cta { margin-top: 30px; gap: 10px; }
.pub-proof { margin: 24px 0 0; font-size: 13.5px; color: var(--ink-3); }
.pub-proof strong { color: var(--ink); font-weight: 600; }

.pub-demo {
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 18px;
  box-shadow: var(--shadow-lg);
}
.pub-demo-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pub-demo-head .badge { margin-left: auto; }
.pub-queue { list-style: none; margin: 0; padding: 0; }
.pub-queue li {
  display: grid; grid-template-columns: 10px 1fr auto; gap: 12px; align-items: center;
  padding: 12px 13px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 11px;
  background: var(--panel-2); font-size: 13.5px; color: var(--ink-2); line-height: 1.35;
}
.pub-queue li:first-child { border-color: var(--accent-ring); color: var(--ink); }
.pub-dot { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--ink-3); }
.pub-dot.run { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); animation: pub-pulse 1.8s ease-in-out infinite; }
.pub-dot.done { border-color: var(--ok); background: var(--ok); }
@keyframes pub-pulse { 50% { box-shadow: 0 0 0 7px transparent; } }
@media (prefers-reduced-motion: reduce) { .pub-dot.run { animation: none; } }
.pub-demo-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; font-family: var(--mono); font-size: 11.5px; }

.pub-section { padding: 88px 0; }
.pub-alt { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pub-h2 { font-size: clamp(28px, 3.7vw, 42px); line-height: 1.07; letter-spacing: -0.048em; font-weight: 500; max-width: 22ch; margin: 8px 0 32px; }
.pub-sub { color: var(--ink-2); max-width: 62ch; margin: -14px 0 30px; font-size: 16px; }
.pub-narrow { max-width: 800px; }

.pub-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; }
.pub-step { border: 1px solid var(--line); border-radius: 16px; padding: 26px; background: var(--panel); }
.pub-step p, .pub-feature p { color: var(--ink-2); margin: 0; font-size: 14.5px; }
.pub-step h3, .pub-feature h3 { font-size: 17px; margin: 0 0 8px; }
.pub-step-n {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px;
  background: var(--accent); color: var(--accent-ink); font-weight: 800; margin-bottom: 18px;
}

.pub-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pub-feature { border: 1px solid var(--line); border-radius: 16px; padding: 26px; background: var(--bg); }
.pub-feature h3::before { content: ""; display: block; width: 22px; height: 3px; border-radius: 2px; background: var(--accent); margin-bottom: 16px; }

.pub-showcase { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; }
.pub-case {
  display: flex; flex-direction: column; gap: 8px; padding: 24px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--panel); color: var(--ink-2); font-size: 14px; transition: border-color .15s;
}
.pub-case strong { color: var(--ink); font-size: 18px; letter-spacing: -0.02em; }
.pub-case .mono { color: var(--accent-text); margin-top: auto; padding-top: 6px; }
.pub-case:hover { border-color: var(--accent-ring); text-decoration: none; }

#pricing .plan-card { background: var(--bg); }
.pub-alt#pricing .plan-card { background: var(--bg); }
#pricing .plan-btn { text-align: center; }

.pub-trust { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; }
.pub-checks { list-style: none; margin: 8px 0 0; padding: 0; }
.pub-checks li { position: relative; padding: 0 0 16px 32px; color: var(--ink-2); font-size: 15.5px; }
.pub-checks li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent-soft) center / 11px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.5l4.5-5' fill='none' stroke='%23c7f464' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  border: 1px solid var(--accent-ring);
}

.pub-faq { border-bottom: 1px solid var(--line); }
.pub-faq summary { cursor: pointer; padding: 18px 0; font-size: 16.5px; font-weight: 600; letter-spacing: -0.015em; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.pub-faq summary::-webkit-details-marker { display: none; }
.pub-faq summary::after { content: "+"; color: var(--accent-text); font-weight: 400; font-size: 20px; line-height: 1; }
.pub-faq[open] summary::after { content: "–"; }
.pub-faq p { margin: -4px 0 18px; color: var(--ink-2); max-width: 68ch; }

.pub-final { padding: 104px 0; }
.pub-final .pub-h2 { margin-left: auto; margin-right: auto; }

.pub-foot { border-top: 1px solid var(--line); padding: 52px 0 30px; }
.pub-foot-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 28px; }
.pub-foot-grid a:not(.brand) { display: block; color: var(--ink-2); font-size: 13.5px; margin: 7px 0; }
.pub-foot-grid a:not(.brand):hover { color: var(--ink); }
.pub-legal { margin: 34px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }

@media (max-width: 920px) {
  .pub-hero-grid, .pub-trust { grid-template-columns: 1fr; gap: 40px; }
  .pub-steps, .pub-features { grid-template-columns: 1fr 1fr; }
  .pub-foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .pub-wrap { padding: 0 16px; }
  .pub-hide-sm { display: none; }
  .pub-nav { gap: 14px; }
  .pub-hero { padding: 44px 0 40px; }
  .pub-lead { font-size: 17px; }
  .pub-section { padding: 60px 0; }
  .pub-steps, .pub-features, .pub-foot-grid { grid-template-columns: 1fr; }
  .pub-queue li { grid-template-columns: 10px 1fr; }
  .pub-queue li .badge { grid-column: 2; justify-self: start; }
}

/* ------------------------------------------------------------------ chat, roomier (p7) */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.chat { position: relative; min-height: 360px; max-height: min(70vh, 760px); }
.chat-new-badge {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; vertical-align: middle;
  background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; letter-spacing: 0;
}
.chat-day {
  display: flex; align-items: center; gap: 10px; margin: 14px 0 10px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.chat-day::before, .chat-day::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.chat-new-line {
  display: flex; align-items: center; gap: 10px; margin: 12px 0 10px;
  font-size: 11px; font-weight: 700; color: var(--accent-text);
}
.chat-new-line::after { content: ""; flex: 1; height: 1px; background: var(--accent-ring); }
.msg.new .bubble.agent { border-color: var(--accent-ring); box-shadow: 0 0 0 3px var(--accent-soft); }
.chat-older {
  display: block; margin: 0 auto 12px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink-2); font: inherit; font-size: 12.5px;
}
.chat-older:hover { color: var(--ink); border-color: var(--accent-ring); }
.bubble-text p { margin: 0 0 .55em; }
.bubble-text p:last-child { margin-bottom: 0; }
.bubble-text ul, .bubble-text ol { margin: .3em 0 .55em; padding-left: 1.2em; }
.bubble-text code { font-family: var(--mono); font-size: 12px; background: var(--panel-3); padding: 1px 4px; border-radius: 4px; }
.bubble.user .bubble-text code { background: rgba(127, 127, 127, .25); }
.bubble-text pre { overflow-x: auto; background: var(--panel-3); padding: 8px 10px; border-radius: 8px; }
.bubble-text h1, .bubble-text h2, .bubble-text h3 { font-size: 14px; font-weight: 700; margin: .4em 0 .3em; }
.bubble-meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 11px; color: var(--ink-3); }
.bubble.user .bubble-meta { color: inherit; opacity: .7; }
.bubble-meta .label { margin-top: 0; }
.bubble-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bubble-image img { display: block; max-width: 220px; max-height: 160px; border-radius: 8px; border: 1px solid var(--line); }
.file-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 8px; border-radius: 8px;
  border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); font-size: 12px;
}
.file-chip:hover { text-decoration: none; border-color: var(--accent-ring); }
.file-kind { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; color: var(--accent-text); }
.file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.file-size { color: var(--ink-3); font-size: 11px; }
.file-remove { border: 0; background: none; color: var(--ink-3); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.file-remove:hover { color: var(--err); }
.chat-files { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chat-tools { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.chat-tools .chat-hint { margin: 0 0 0 auto; }
.chat-tool { width: 32px; height: 32px; cursor: pointer; }
.chat-tool.on { background: var(--err); border-color: var(--err); color: #fff; animation: step-pulse 1.4s ease-in-out infinite; }
@media (max-width: 640px) { .chat-tools .chat-hint { display: none; } }

/* ------------------------------------------------------------------ tasks, roomier (p7) */

.task-row { align-items: center; padding: 11px 6px; }
.task-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.task-row-meta { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-row-meta .prio-tag { margin: 0; }
.task-state.state-attention { color: var(--warn); }
.task-state.state-problem { color: var(--err); }
.task-state.state-queued { color: var(--accent-text); }
.now { padding: 13px 14px; margin-bottom: 12px; }
/* The task list grows with the page instead of scrolling inside it. */

/* ------------------------------------------------------------------ credits widget */

.credit-balance { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 12px; }
.credit-balance strong { font-size: 30px; font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.credit-month { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; }
.credit-month > div { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; background: var(--panel-2); }
.credit-month .label { display: block; font-size: 9.5px; margin-bottom: 2px; }
.credit-month b { font-family: var(--mono); font-size: 14px; color: var(--ink); }
.credit-lines { list-style: none; margin: 12px 0 0; padding: 0; }
.credit-lines li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.credit-lines li:last-child { border-bottom: 0; }
.credit-reason { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.credit-lines time { font-size: 11px; color: var(--ink-3); }
.credit-lines b { font-family: var(--mono); font-size: 12.5px; }
.credit-lines b.minus { color: var(--ink-2); }
.credit-lines b.plus { color: var(--ok); }
.credits-body { min-height: 200px; }

/* hidden always wins over a display rule (badges, file lists, the mic button). */
[hidden] { display: none !important; }

/* ------------------------------------------------------------------ company names */
.name-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.name-head .btn { margin-bottom: 5px; }
.name-ideas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; font-size: 12.5px; color: var(--ink-3); }
.name-idea { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--panel-2); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.name-idea:hover { border-color: var(--accent-ring); }
.name-idea.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ------------------------------------------------------------------ task rows and the task modal (p8) */

.task-row { align-items: flex-start; }
.task-row .status-dot { margin-top: 6px; }
.task-row-title { display: block; font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
.task-row-title .prio-tag { margin: 0 6px 0 0; vertical-align: 1px; }
.task-row-about {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 12.5px; line-height: 1.45; color: var(--ink-3);
}
.icon-btn.attention { border-color: var(--warn); color: var(--warn); }

.task-nav { display: flex; align-items: center; gap: 6px; }
.task-nav .icon-btn { width: 30px; height: 30px; font-size: 16px; }
.task-nav .icon-btn:disabled { opacity: .35; cursor: default; background: transparent; border-color: var(--line-strong); color: var(--ink-3); }
.task-nav .label { margin-left: 6px; }
.task-panel-body { min-height: 240px; }
.task-panel-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.task-panel-meta .prio-tag { margin: 0; }
.task-panel-title { font-size: 22px; margin: 4px 0 10px; }
.task-panel-text { font-size: 14px; color: var(--ink-2); }
.task-panel-text p { margin: 0 0 .6em; }
.task-edit textarea { min-height: 0; }
.task-steps { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.task-step { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink-3); }
.task-step.ok { color: var(--ok); border-color: var(--ok); background: var(--ok-soft); }
.task-step.current { color: var(--accent-text); border-color: var(--accent-ring); background: var(--accent-soft); }
.task-step.bad { color: var(--err); border-color: var(--err); background: var(--err-soft); }
.task-doc { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.task-doc:last-child { border-bottom: 0; }
.task-panel-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.task-full-link { margin-left: auto; }

/* ------------------------------------------------------------------ content plan */

.content-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.content-main { flex: 1; min-width: 220px; }
.content-preview { color: var(--ink-3); margin: 6px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.content-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.content-when { display: flex; align-items: center; gap: 6px; }
.content-when input { width: 190px; padding: 6px 8px; font-size: 12.5px; }
.channel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-top: 10px; }
.channel-tile { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--panel-2); }
.notice-item.kind-content .notice-icon, .toast.kind-content strong { color: var(--accent-text); }

/* ------------------------------------------------------------------ round 12: tasks, live log, rollback */

.log { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.log::-webkit-scrollbar { display: block; width: 6px; }
.log-card { position: relative; }
.log-jump {
  position: absolute; right: 16px; bottom: 16px; font: inherit; font-size: 11.5px; cursor: pointer;
  padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.type-tag {
  display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; margin-right: 4px; vertical-align: 1px;
}
.now-meta { display: block; font-size: 11.5px; color: var(--ink-3); margin: 2px 0 4px; }

.task-saved { margin-left: 4px; color: var(--ink-3); }
.task-saved.ok { color: var(--accent-text); }
.task-saved.err { color: var(--err); }

.agent-steps { margin-top: 4px; }
.agent-step { display: flex; gap: 8px; font-size: 12.5px; padding: 2px 0; }
.agent-step time { flex-shrink: 0; color: var(--ink-3); font-family: var(--mono); font-size: 11.5px; }
.agent-step .mono { font-family: var(--mono); font-size: 11.5px; }

.run-details { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 10px; }
.run-details summary { cursor: pointer; }
.run-row { display: flex; flex-direction: column; gap: 2px; font-size: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.run-row .muted { color: var(--ink-3); font-family: var(--mono); font-size: 11px; overflow-wrap: anywhere; }
.run-error { color: var(--err); }

.rollback-progress { border-left: 3px solid var(--accent); }
.rollback-progress.ok { border-left-color: var(--accent-text); }
.rollback-progress.bad { border-left-color: var(--err); }
.rollback-row { display: flex; align-items: center; gap: 10px; }
.spinner {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--line-strong); border-top-color: var(--accent); animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* ---------------------------------------------------------------- company mailbox (/mail) */
.mailbox-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.mailbox-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mailbox { display: grid; grid-template-columns: minmax(260px, 34%) minmax(0, 1fr); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); min-height: 560px; }
.mailbox-list { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; background: var(--panel-2); }
.mailbox-list-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.mailbox-tabs { display: flex; gap: 4px; }
.mailbox-tabs a { padding: 5px 11px; border-radius: 6px; color: var(--ink-3); font-size: 13px; }
.mailbox-tabs a[aria-current] { background: var(--panel-3); color: var(--ink); font-weight: 600; }
.mailbox-filter { padding: 8px 14px; border-bottom: 1px solid var(--line); }
.mailbox-filter input { margin: 0; font-size: 12.5px; padding: 7px 9px; }
.mailbox-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 2px 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); color: var(--ink-2); text-decoration: none; }
.mailbox-item:hover { background: var(--panel-3); }
.mailbox-item.active { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.mailbox-item[hidden] { display: none; }
.mailbox-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--panel-3); color: var(--accent-text); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; grid-row: span 2; }
.mailbox-avatar.big { width: 40px; height: 40px; font-size: 16px; flex-shrink: 0; }
.mailbox-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mailbox-when { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); white-space: nowrap; text-align: right; }
.mailbox-subject { grid-column: 2 / 4; font-size: 12.5px; color: var(--ink-3); display: flex; gap: 6px; min-width: 0; }
.mailbox-subject span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mailbox-item.unread .mailbox-name { color: var(--ink); font-weight: 700; }
.mailbox-item.unread .mailbox-subject { color: var(--ink-2); }
.mailbox-item.unread .mailbox-when { color: var(--accent-text); }
.mailbox-pager { display: flex; justify-content: space-between; padding: 12px 14px; margin-top: auto; font-size: 12px; }
.mailbox-empty { padding: 32px 20px; color: var(--ink-3); margin: 0; }
.mailbox-reader { padding: 22px 26px; min-width: 0; overflow-wrap: anywhere; }
.mailbox-reader-head { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.mailbox-reader-head h2 { margin: 0; font-size: 20px; line-height: 1.35; flex: 1; min-width: 200px; }
.mailbox-from { display: flex; gap: 12px; align-items: center; margin: 16px 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.mailbox-files { display: grid; gap: 8px; margin-bottom: 18px; }
.mailbox-file { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--line); background: var(--panel-2); border-radius: 9px; padding: 9px 12px; }
.mailbox-kind { font: 700 10px var(--mono); letter-spacing: 1px; background: var(--accent); color: var(--accent-ink); border-radius: 5px; padding: 4px 6px; }
.mailbox-kind.other { background: var(--ink-3); }
.mailbox-file-name { flex: 1; min-width: 140px; font-size: 13px; }
.mailbox-body { white-space: pre-wrap; font-family: inherit; font-size: 14px; line-height: 1.75; margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.mailbox-body a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.mailbox-compose { max-width: 900px; }
.mailbox-compose textarea { min-height: 280px; line-height: 1.65; }
.mailbox-copies { margin-top: 10px; }
.mailbox-copies summary { cursor: pointer; color: var(--accent-text); }
.mailbox-send { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.mailbox-dns { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.65; }
.mailbox-dns li.ok { color: var(--ok); }
.mailbox-dns li.bad { color: var(--err); }
@media (max-width: 900px) {
  .mailbox { grid-template-columns: 1fr; min-height: 0; }
  .mailbox-list { border-right: 0; border-bottom: 1px solid var(--line); }
  .mailbox.has-message .mailbox-reader { order: -1; border-bottom: 1px solid var(--line); }
  .mailbox-reader { padding: 18px; }
}
.mailbox-switch { display: flex; gap: 6px; flex-wrap: wrap; margin: -4px 0 14px; }
.mailbox-switch a { padding: 5px 11px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 12.5px; color: var(--ink-2); text-decoration: none; font-family: var(--mono); }
.mailbox-switch a[aria-current] { background: var(--accent-soft); border-color: var(--accent-text); color: var(--ink); }
.mailbox-switch .badge { font-family: inherit; margin-left: 4px; }
.mailbox-address { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; }
.mailbox-address .badge { margin-left: 6px; }
.mailbox-more { grid-column: 1 / -1; }
.mailbox-more summary { cursor: pointer; color: var(--accent-text); }
.mailbox-domain { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: var(--panel-2); }
.mailbox-records td { font-size: 12px; vertical-align: top; }
.mailbox-local { display: flex; align-items: center; gap: 6px; }
.mailbox-local input { flex: 1; min-width: 80px; }
.notice.warn { background: var(--warn-soft); color: var(--ink); border-color: var(--warn); }

/* ---------------------------------------------------------------- ads (/ads) */
.ads-totals { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.ads-total { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.ads-total strong { font-size: 20px; font-family: var(--mono); color: var(--ink); }

/* ------------------------------------------------------ sending limit (/mail) */
.mail-meter { height: 8px; border-radius: 999px; background: var(--panel-3); overflow: hidden; }
.mail-meter span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.mail-meter.high span { background: var(--warn); }
.mail-meter.full span { background: var(--err); }
.mailbox-limit { margin: 2px 0 0; }

/* ------------------------------------------ dashboard: channels two to a row */
.widget-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; align-content: start; }
.widget-grid > * { grid-column: 1 / -1; }
.widget-grid > .channel-widget { grid-column: auto; }
@media (max-width: 700px) { .widget-grid > .channel-widget { grid-column: 1 / -1; } }
.channel-widget.soon { opacity: .75; }
.channel-widget.soon .badge { background: var(--warn-soft); color: var(--ink-2); }
.task-more {
  display: block; width: 100%; margin-top: 8px; padding: 8px 10px; border: 1px dashed var(--line-strong); border-radius: 8px;
  background: none; color: var(--accent-text); font: inherit; font-size: 13px; text-align: center; cursor: pointer;
}
.task-more:hover { background: var(--panel-2); }

/* ------------------------------------------ chat: loaded after the page, sent in place */
.chat-loading { margin: 14px 4px; }
.chat-error { margin: 6px 0 2px; font-size: 12.5px; color: var(--err); text-align: right; }

/* ---------------------------------------------- round 23: steadier dashboard */
/* The chat fills the window's height on wide screens and stays in view while
   the page scrolls; the conversation scrolls inside it. It is held exactly where
   it starts, the page's 24px under the header (--topbar-h, measured by the
   layout), so scrolling never nudges it; without a bottom margin, the end of the
   page cannot push it up under the header either. */
@media (min-width: 1101px) {
  .grid > div:last-child { align-self: stretch; }
  .chat-card {
    position: sticky; top: calc(var(--topbar-h, 59px) + 24px); display: flex; flex-direction: column;
    height: calc(100vh - var(--topbar-h, 59px) - 48px); min-height: 460px; margin-bottom: 0;
  }
  .chat-card .chat { flex: 1 1 auto; min-height: 0; max-height: none; }
}
.chat-tools > * { margin: 0; }
.chat-tools .btn { height: 32px; display: inline-flex; align-items: center; }
.chat-tools .chat-tool svg { display: block; }

/* A modal holds the page still behind it. */
html:has(dialog[open]) { overflow: hidden; }

/* The live log: a line where the day changes. */
.log .log-day {
  display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; font-family: var(--sans, inherit);
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.log .log-day::before, .log .log-day::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.log-jump { z-index: 2; }

/* Chat replies read better with a little structure. */
.bubble.agent ul, .bubble.agent ol { margin: 6px 0; padding-left: 20px; }
.bubble.agent li + li { margin-top: 3px; }
.bubble.agent p { margin: 0 0 6px; }
.bubble.agent p:last-child { margin-bottom: 0; }

/* One scroller per modal: the dialog clips, a list inside (.modal-scroll) scrolls,
   and the heading and buttons stay put. */
dialog.modal { overflow: hidden; }
.modal-body { max-height: calc(100vh - 48px); }
.modal-body:has(.modal-scroll) { overflow: hidden; }

/* A banner over the dashboard (a paused company) spans the two widget columns;
   the chat column starts at the top beside it instead of being pushed down. */
/* Wide screens only: on a phone the grid is one column and the banner simply comes first. */
.grid > .grid-banner { margin: 0; }
@media (min-width: 1101px) {
  .grid > .grid-banner { grid-column: 1 / 3; grid-row: 1; }
  .grid.has-banner > [data-region="col-left"] { grid-column: 1; grid-row: 2; }
  .grid.has-banner > [data-region="col-middle"] { grid-column: 2; grid-row: 2; }
  .grid.has-banner > div:last-child { grid-column: 3; grid-row: 1 / span 2; }
}

/* On the dashboard, the message after an action floats just under the header
   instead of pushing the page (and the chat) down; it fades on its own. */
.floating-notices > [data-region="flash"] {
  position: fixed; top: calc(var(--topbar-h, 64px) + 10px); left: 50%; transform: translateX(-50%); z-index: 50;
  width: min(560px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.floating-notices > [data-region="flash"] .notice {
  margin: 0; pointer-events: auto; cursor: pointer; box-shadow: var(--shadow-lg);
  animation: toast-in .25s ease-out; transition: opacity .5s, transform .5s;
}
.floating-notices > [data-region="flash"] .notice.ok { background: linear-gradient(var(--ok-soft), var(--ok-soft)), var(--panel); border-color: var(--ok); }
.floating-notices > [data-region="flash"] .notice.err { background: linear-gradient(var(--err-soft), var(--err-soft)), var(--panel); border-color: var(--err); }
.floating-notices > [data-region="flash"] .notice.out { opacity: 0; transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) {
  .floating-notices > [data-region="flash"] .notice { animation: none; transition: none; }
}

/* ---------------------------------------------- round 27: documents and the foundation */
/* The Documents widget: the foundation first, then the latest of the rest, one line each. */
.doc-view-all { background: none; border: 0; padding: 0; cursor: pointer; }
.doc-view-all:hover { color: var(--accent-text); }
.doc-section {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 14px 0 2px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.doc-widget .card-head + .doc-section { margin-top: 0; }
.doc-section span { font-family: var(--mono); font-weight: 500; letter-spacing: 0; text-transform: none; }
.doc-section span.ok { color: var(--ok); }
.doc-lines { list-style: none; margin: 0; padding: 0; }
.doc-line { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.doc-line:last-child { border-bottom: 0; }
.doc-line[hidden] { display: none; }
.doc-line form { margin: 0; }
.doc-ico {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px;
  background: color-mix(in srgb, var(--kind, #9ba59d) 15%, transparent); color: color-mix(in srgb, var(--kind, #9ba59d) 80%, var(--ink));
}
.doc-ico.empty { background: none; border: 1px dashed var(--line-strong); color: var(--ink-3); }
.doc-line-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; color: var(--ink); }
a.doc-line-title:hover { color: var(--accent-text); text-decoration: none; }
.doc-line-title strong { font-weight: 600; }
.doc-line-title strong + span { color: var(--ink-3); margin-left: 4px; }
.doc-line-meta { flex-shrink: 0; font-family: var(--mono); font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.doc-line-meta a { color: var(--accent-text); }
.doc-line.state-working .doc-line-meta { color: var(--accent-text); }
.doc-line-empty { color: var(--ink-3); font-size: 13px; }
.doc-update { opacity: .55; }
.doc-line:hover .doc-update, .doc-update:focus-visible { opacity: 1; }
@media (hover: none) { .doc-update { opacity: 1; } }
.doc-write { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 2px; }
.doc-write .small { flex: 1; min-width: 180px; }

/* "View all": the tabs stay at the top while the list scrolls under them. */
.doc-all-tabs { position: sticky; top: 0; z-index: 1; background: var(--panel); padding: 2px 0 10px; margin-bottom: 0; }
.doc-tabs button {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer;
}
.doc-tabs button:hover { border-color: var(--line-strong); color: var(--ink); }
.doc-tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.doc-tabs button span { font-family: var(--mono); font-size: 11px; opacity: .7; }
.doc-all .doc-lines { margin-bottom: 8px; }

/* Writing or editing a document. */
.doc-edit { display: flex; flex-direction: column; gap: 8px; }
.doc-edit label { margin-top: 6px; }
.doc-edit textarea { min-height: 420px; font-family: var(--mono); font-size: 13px; line-height: 1.55; }
.doc-edit .row-actions { margin-top: 8px; }

/* ---------------------------------------------- round 28: switching on company email */
/* The administrator's checklist: numbered steps, done ones ticked, the next one marked. */
.setup-steps { list-style: none; counter-reset: step; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.setup-steps > li {
  counter-increment: step; position: relative; padding: 12px 14px 12px 46px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2);
}
.setup-steps > li::before {
  content: counter(step); position: absolute; left: 14px; top: 11px; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
  background: var(--panel); border: 1px solid var(--line-strong); color: var(--ink-2);
}
.setup-steps > li.done::before { content: "✓"; background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.setup-steps > li.current { border-color: var(--accent-ring); }
.setup-steps > li.current::before { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.setup-step-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.setup-steps form { margin: 0; }

/* ---------------------------------------------- round 30: terms of service */
/* The sign-up tick box, and the terms page: a readable column of plain text. */
.terms-check {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 16px;
  text-transform: none; letter-spacing: 0; font-family: inherit; font-size: 13.5px; font-weight: 400; line-height: 1.5; color: var(--ink-2);
}
.terms-check input { width: auto; margin: 3px 0 0; flex-shrink: 0; }
.pub-legal-doc { max-width: 760px; }
.pub-legal-doc h2 { font-size: 18px; margin: 30px 0 8px; }
.pub-legal-doc p, .pub-legal-doc li { color: var(--ink-2); line-height: 1.65; }
.pub-legal-doc ul { padding-left: 20px; }
.pub-legal-doc li + li { margin-top: 6px; }

/* Monthly or yearly: which set of plan cards shows (billing page, public pricing). */
.interval-switch { display: flex; justify-content: center; margin: 4px 0 16px; }
.interval-switch .segmented button { font-size: 12.5px; padding: 7px 16px; }
.interval-switch .save { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-size: 10.5px; }
.interval-switch button.on .save { background: rgba(0, 0, 0, .12); color: inherit; }
.plan-saving { margin: -8px 0 14px; color: var(--ink-3); font-size: 12.5px; }

/* ------------------------------------------------------ round 36: video ads */
/* The Ads page's videos, and the player on a video's document page: vertical, like the phone they are for. */
.video-form textarea { min-height: 72px; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 14px; }
.video-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel-2); min-width: 0; }
.video-still-link { display: block; }
.video-still { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--panel-3); }
.video-still-empty { display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 12.5px; }
.video-meta { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px 10px; min-width: 0; }
.video-meta strong { font-size: 13px; overflow-wrap: anywhere; }
.video-player { display: block; width: 100%; max-width: 340px; aspect-ratio: 9 / 16; max-height: 72vh; background: #000; border-radius: 12px; }
.video-panel { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.video-panel .video-facts { flex: 1; min-width: 220px; }

/* ------------------------------------------------ round 37: Reels ads on Meta */
/* The Ads page: the form that runs a finished video as a Reels ad, and each ad with its state. */
.placement-new > summary { list-style: none; display: inline-flex; cursor: pointer; }
.placement-new > summary::-webkit-details-marker { display: none; }
.placement-form { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.placements { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.placement { border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: 10px; padding: 10px 12px; background: var(--panel-2); min-width: 0; }
.placement.active { border-left-color: var(--accent); }
.placement.failed { border-left-color: var(--err); }
.placement-head { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.placement-head strong { overflow-wrap: anywhere; }
.placement-start { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.placement-start .check-row { flex: 1; min-width: 240px; font-size: 13px; }

/* The cookie question for the Meta Pixel: public pages only, until the visitor answers. */
.consent { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60; max-width: 560px; margin: 0 auto;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 14px 16px; }
.consent p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.consent .row-actions { gap: 8px; }

/* ------------------------------------- round 38: posting to Facebook and Instagram */
/* A planned post's picture and button, and a video's "Post as a Reel". */
.content-meta { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.content-meta select { width: auto; max-width: 180px; }
.content-picture { display: inline-flex; gap: 6px; align-items: center; margin: 0; text-transform: none; letter-spacing: 0; }
.content-picture input[type="file"] { max-width: 210px; font-size: 12px; padding: 4px; }
.reel-post { margin-top: 12px; }
.reel-post > summary { list-style: none; display: inline-flex; cursor: pointer; }
.reel-post > summary::-webkit-details-marker { display: none; }
.reel-posted { margin: 10px 0 0; padding-left: 18px; }

/* ------------------------- round 39: Google Business, YouTube, TikTok, Admin › Marketing */
/* A Google Business post's location, button and its address; the Media widget's videos. */
.content-google input[type="url"] { width: auto; min-width: 0; max-width: 220px; font-size: 13px; }
.media-row { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.media-row a { min-width: 0; overflow-wrap: anywhere; }
.reel-post .field-row { margin-top: 6px; }

/* ------------------------------------------------- round 42: header and menus */
/* The company name, top left, opens the company switcher; the menu holds the rest. Either panel
   scrolls when it is taller than the screen, so nothing is cut off. */
.company-menu > summary.brand { cursor: pointer; border-radius: 10px; padding: 4px 8px 4px 4px; margin-left: -4px; }
.company-menu > summary.brand:hover, .company-menu[open] > summary.brand { background: var(--panel-2); }
.brand-name { max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-caret { color: var(--ink-3); flex-shrink: 0; }
.menu-panel.company-panel { left: 0; right: auto; width: 270px; }
.menu-panel.company-panel .switcher { max-height: none; }
.menu-panel.company-panel, .menu-panel.main-panel {
  max-height: calc(100vh - var(--topbar-h, 64px) - 16px); max-height: calc(100dvh - var(--topbar-h, 64px) - 16px);
  overflow-y: auto; overscroll-behavior: contain;
}
/* The notifications list leaves room for the panel's head and foot on a short screen. */
#bell-list { max-height: min(380px, calc(100vh - var(--topbar-h, 64px) - 110px)); max-height: min(380px, calc(100dvh - var(--topbar-h, 64px) - 110px)); }
@media (max-width: 560px) { .brand-name { max-width: 150px; } }
/* On a phone the header wraps and a menu button can land anywhere in it: the header's panels
   then open under the whole header, edge to edge, instead of from the button. */
@media (max-width: 600px) {
  .topbar .menu { position: static; }
  .topbar .menu-panel, .topbar .menu-panel.company-panel, .topbar .menu-panel.bell-panel { left: 12px; right: 12px; top: calc(100% + 4px); width: auto; min-width: 0; max-width: none; }
}

/* ------------------------------------------------- round 44: growth */
/* The growth view at the top of the dashboard (widgets/growth, public/js/growth.js). */
:root, :root[data-theme="dark"] {
  --g-stage: #121615; --g-core: #1b201f; --g-core-ink: #c7f464; --g-accent: #c7f464; --g-site: #c7f464; --g-post: #8fe3a6;
  --g-email: #9cc2ff; --g-research: #7fd6c2; --g-ads: #f2c14e; --g-bloom: #ff8a7d; --g-fly: #f3ffd0;
  --g-branch: rgba(208, 214, 206, .30); --g-ring: rgba(208, 214, 206, .12); --g-light: rgba(199, 244, 100, .09); --g-down: #f2c14e;
}
:root[data-theme="light"] {
  --g-stage: #fbfcf7; --g-core: #ffffff; --g-core-ink: #4b7a00; --g-accent: #5f9200; --g-site: #5f9200; --g-post: #2f8a52;
  --g-email: #3a6fc0; --g-research: #16806f; --g-ads: #b57400; --g-bloom: #cf4b3c; --g-fly: #7aa81e;
  --g-branch: rgba(59, 67, 62, .48); --g-ring: rgba(59, 67, 62, .22); --g-light: rgba(199, 244, 100, .22); --g-down: #946200;
}
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    --g-stage: #fbfcf7; --g-core: #ffffff; --g-core-ink: #4b7a00; --g-accent: #5f9200; --g-site: #5f9200; --g-post: #2f8a52;
    --g-email: #3a6fc0; --g-research: #16806f; --g-ads: #b57400; --g-bloom: #cf4b3c; --g-fly: #7aa81e;
    --g-branch: rgba(59, 67, 62, .48); --g-ring: rgba(59, 67, 62, .22); --g-light: rgba(199, 244, 100, .22); --g-down: #946200;
  }
}

.growth { display: flex; flex-wrap: wrap; gap: 24px 28px; align-items: flex-start; margin: 0 0 24px; }
.growth-stage {
  flex: 1.5 1 520px; min-width: 0; max-width: 780px;
  border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  background: radial-gradient(circle at 50% 42%, var(--g-light), transparent 60%), var(--g-stage);
}
.growth-art { position: relative; }
.growth-art svg { display: block; width: 100%; height: auto; font-family: var(--sans); }
.growth-art a { cursor: pointer; }
.growth-scaled { transform-origin: 500px 500px; transition: transform .35s linear; }
.growth-pop { transform: scale(0); transition-property: transform; transition-timing-function: cubic-bezier(.2, .9, .3, 1.3); }
.growth-link {
  stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0;
  transition-property: stroke-dashoffset, opacity, stroke, stroke-width;
  transition-timing-function: cubic-bezier(.3, .7, .2, 1), linear, ease, ease;
}
.growth-fade { opacity: 0; transition: opacity .6s ease; }
.growth-tip {
  position: absolute; transform: translate(-50%, calc(-100% - 18px)); pointer-events: none; z-index: 2;
  width: max-content; max-width: 240px; padding: 9px 12px;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel-2); color: var(--ink); box-shadow: var(--shadow-lg);
}
.growth-tip[hidden] { display: none; }
.growth-tip-kind { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.growth-tip-title { font-size: 14px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; margin-top: 4px; }
.growth-tip-when { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.growth-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 4px 20px 12px; }
.growth-replay {
  display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); font: 600 13px var(--sans); cursor: pointer;
}
.growth-replay:hover { border-color: var(--accent-ring); }
.growth-scrub { display: flex; align-items: center; flex: 1 1 180px; min-width: 0; }
.growth-scrub input { flex: 1; min-width: 0; margin: 0; height: 40px; accent-color: var(--accent); cursor: pointer; }
.growth-day { font: 600 12px var(--mono); color: var(--ink-2); min-width: 140px; text-align: right; font-variant-numeric: tabular-nums; }
.growth-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0 20px 18px; font-size: 12px; color: var(--ink-3); }
.growth-legend span { display: inline-flex; align-items: center; gap: 7px; }
.growth-panel { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 22px; padding-top: 4px; }
.growth-head { display: flex; flex-direction: column; gap: 8px; }
.growth-head .label { margin: 0; }
.growth-hello { margin: 0; font-size: 38px; line-height: 1.04; letter-spacing: -.045em; text-wrap: balance; }
.growth-lede { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: 56ch; }
.growth-label { margin: 0 0 6px; }
.growth-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.growth-list a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; margin: 0 -10px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.growth-list a:hover { background: var(--panel-2); }
.growth-list svg { flex-shrink: 0; overflow: visible; }
.growth-item { display: flex; flex-direction: column; min-width: 0; }
.growth-item-title { font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.growth-item-meta { font-size: 12.5px; color: var(--ink-3); }
.growth-more { margin: 6px 0 0; }
.growth-now { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--panel); }
.growth-now-head { display: flex; align-items: center; gap: 8px; }
.growth-now-head .growth-label { margin: 0; color: var(--accent-text); }
.growth-now-title { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.growth-now-title a { color: var(--ink); }
.growth-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.growth-step { padding: 3px 9px; border-radius: 999px; border: 1px dashed var(--line-strong); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.growth-step.done { border-style: solid; }
.growth-step.current { border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.growth-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.growth-tile { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.growth-tile .label { margin: 0; }
.growth-number { font-size: 30px; font-weight: 500; letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.growth-note { font-size: 12px; color: var(--ink-3); }
.growth-note.down { color: var(--g-down); }
.growth-spark { display: block; width: 100%; height: 32px; margin-top: 6px; }
.growth-milestone { display: flex; flex-direction: column; gap: 8px; }
.growth-milestone-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.growth-milestone-head .growth-label { margin: 0; }
.growth-milestone-title { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.015em; }
.growth-bar { height: 8px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.growth-bar span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .growth-pop, .growth-link, .growth-fade, .growth-scaled { transition: none !important; }
}
@media (max-width: 600px) {
  .growth-hello { font-size: 30px; }
  .growth-day { min-width: 0; text-align: left; }
}

/* ------------------------------------------------- round 45: the living home page */
/* The hero grows the example company with the dashboard's own growth view (public/js/growth.js). */
.pub-living { position: relative; padding: 60px 0 52px; overflow: hidden; }
.pub-living .pub-hero-grid { grid-template-columns: 1fr 1.08fr; gap: 32px; }
.pub-living h1 { font-size: clamp(46px, 6.6vw, 84px); line-height: .98; letter-spacing: -0.06em; max-width: 10.5ch; margin: 12px 0 22px; }
.pub-say span { color: var(--accent-text); letter-spacing: .08em; text-transform: none; font-family: var(--mono); font-weight: 600; }
.pub-organism { position: relative; margin: 0; }
.pub-organism::before {
  content: ""; position: absolute; inset: 4% 4% 12%; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, var(--g-light) 0%, transparent 66%);
}
.pub-organism .growth-art { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.pub-organism-caption {
  position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 14px; margin-top: 2px; font-size: 13px; color: var(--ink-3);
}
.pub-organism-caption strong { color: var(--ink); font-weight: 600; }
.pub-organism-caption .brand-mark { width: 22px; height: 22px; border-radius: 6px; font-size: 12px; }
.pub-organism-caption .growth-day { min-width: 0; text-align: left; }
.pub-organism-caption .growth-replay { height: 34px; padding: 0 13px; font-size: 12.5px; gap: 7px; }

.pub-name .label { margin-bottom: 18px; }
.pub-word { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 30px; margin: 0 0 34px; }
.pub-word-part { flex: 1 1 260px; min-width: 0; }
.pub-word-big { display: block; font-size: clamp(76px, 13vw, 176px); font-weight: 600; line-height: .86; letter-spacing: -0.07em; color: var(--ink); }
.pub-word-part:first-child .pub-word-big { color: var(--accent-text); }
.pub-word-part p { margin: 18px 0 0; max-width: 34ch; font-size: 16px; color: var(--ink-2); }
.pub-word-part p strong { color: var(--ink); }
.pub-word-plus { align-self: flex-start; padding-top: clamp(12px, 3vw, 44px); font-size: clamp(36px, 5vw, 64px); font-weight: 300; line-height: 1; color: var(--ink-3); }
.pub-name-sum { margin: 0; max-width: 26ch; font-size: clamp(24px, 3vw, 36px); line-height: 1.15; letter-spacing: -0.035em; font-weight: 500; }
.pub-name-sum span { display: block; margin-top: 14px; max-width: 62ch; font-size: 15px; line-height: 1.6; letter-spacing: 0; font-weight: 400; color: var(--ink-3); }

.pub-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.pub-stage { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.pub-stage-art { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: radial-gradient(circle at 50% 50%, var(--g-light), transparent 62%), var(--g-stage); }
.pub-stage figcaption { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.pub-stage figcaption strong { color: var(--ink); }

.pub-feature.has-mark h3 { display: flex; align-items: center; gap: 12px; }
.pub-feature.has-mark h3::before { display: none; }
.pub-mark { width: 26px; height: 26px; flex-shrink: 0; overflow: visible; }

.pub-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 0 0 34px; }
.pub-mode { padding: 24px 26px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.pub-alt .pub-mode { background: var(--bg); }
.pub-mode h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 20px; letter-spacing: -0.025em; }
.pub-mode p { margin: 0; color: var(--ink-2); font-size: 15px; }
.pub-mode-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink-3); }
.pub-mode-dot.live { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); animation: pub-pulse 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .pub-mode-dot.live { animation: none; } }

@media (max-width: 920px) {
  .pub-living .pub-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .pub-living h1 { max-width: 12ch; }
  .pub-organism .growth-art { max-width: 520px; }
  .pub-stages { grid-template-columns: 1fr; max-width: 440px; }
}
@media (max-width: 640px) {
  .pub-living { padding: 36px 0 32px; }
  .pub-modes { grid-template-columns: 1fr; }
  .pub-word-plus { display: none; }
}

/* ------------------------------------------------- round 47: readable documents */
.doc-body.prose { white-space: normal; max-width: 76ch; }
.doc-body.prose > :first-child { margin-top: 0; }
.doc-body.prose > :last-child { margin-bottom: 0; }
.doc-body.prose p { margin: 0 0 1em; }
.doc-body.prose h1, .doc-body.prose h2, .doc-body.prose h3, .doc-body.prose h4 { color: var(--ink); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; text-wrap: balance; }
.doc-body.prose h1 { font-size: 24px; margin: 1.4em 0 .5em; }
.doc-body.prose h2 { font-size: 20px; margin: 1.5em 0 .5em; padding-top: .9em; border-top: 1px solid var(--line); }
.doc-body.prose > h2:first-child { padding-top: 0; border-top: 0; }
.doc-body.prose h3 { font-size: 17px; margin: 1.3em 0 .4em; }
.doc-body.prose h4 { font-size: 15.5px; margin: 1.2em 0 .3em; }
.doc-body.prose ul, .doc-body.prose ol { margin: 0 0 1em; padding-left: 1.4em; }
.doc-body.prose li { margin: .25em 0; }
.doc-body.prose li > ul, .doc-body.prose li > ol { margin: .25em 0 0; }
.doc-body.prose strong { color: var(--ink); font-weight: 600; }
.doc-body.prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.doc-body.prose blockquote { margin: 0 0 1em; padding: .1em 0 .1em 1em; border-left: 3px solid var(--line-strong); color: var(--ink-3); }
.doc-body.prose hr { border: 0; border-top: 1px solid var(--line); margin: 1.6em 0; }
.doc-body.prose code { font-family: var(--mono); font-size: .86em; background: var(--panel-3); padding: 1px 5px; border-radius: 4px; }
.doc-body.prose pre { overflow-x: auto; margin: 0 0 1em; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); line-height: 1.5; }
.doc-body.prose pre code { padding: 0; background: none; font-size: 13px; }
/* A wide table scrolls inside the document, never the page. */
.doc-body.prose table { display: block; width: auto; max-width: 100%; overflow-x: auto; margin: 0 0 1.2em; font-size: 14px; line-height: 1.5; }
.doc-body.prose th, .doc-body.prose td { padding: 7px 10px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.doc-body.prose th { background: var(--panel-2); color: var(--ink); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 13.5px; }
.doc-body.prose img { max-width: 100%; border-radius: 8px; }
.doc-body.prose input[type="checkbox"] { margin: 0 6px 0 0; }

/* ------------------------------------------------- round 48: a document opens with its summary */
.doc-summary { border-color: var(--accent-ring); background: linear-gradient(180deg, var(--accent-soft), transparent 75%), var(--panel); }
.doc-summary-title { margin: 0 0 12px; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; }
.doc-summary .doc-body.prose p { margin: 0 0 .75em; }
.doc-summary-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.doc-summary-status span { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
/* The full text, its sources, its versions and its review: each a click away. */
details.doc-part > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 600; color: var(--ink); }
details.doc-part > summary::-webkit-details-marker { display: none; }
details.doc-part > summary::before { content: ""; flex-shrink: 0; width: 7px; height: 7px; margin: 0 2px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(-45deg); transition: transform .15s ease; }
details.doc-part[open] > summary::before { transform: rotate(45deg); }
details.doc-part[open] > summary { margin-bottom: 14px; }
details.doc-part > summary:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 4px; border-radius: 4px; }
.doc-part-count { font-size: 12.5px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.doc-review > summary .badge { font-weight: 600; }
.doc-versions { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.doc-versions li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; }
.doc-versions time { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { details.doc-part > summary::before { transition: none; } }

/* The word to type to confirm, as it must be typed: labels are set in capitals, it is not. */
label .confirm-word { padding: 1px 6px; border-radius: 4px; background: var(--panel-3); color: var(--ink); font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }

/* ------------------------------------------------- round 49: the dashboard's reading order */
/* Today (widgets/today): Needs you, Working now, Recently completed, Up next. */
.today { padding: 0; overflow: hidden; }
.today-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.today-name { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.today-fact { font-size: 13.5px; color: var(--ink-2); }
.today-all { margin-left: auto; font-size: 13px; }
.today-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.today-part { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 20px 18px; }
.today-part + .today-part { border-left: 1px solid var(--line); }
.today-head { margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.today-needs.has-needs { background: var(--warn-soft); }
.today-needs.has-needs .today-head { color: var(--warn); }
.today-item { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.today-item:last-child { padding-bottom: 0; border-bottom: 0; }
.today-item p, .today-item form { margin: 0; }
.today-item > p:first-child { font-size: 14px; line-height: 1.45; color: var(--ink); }
.today-title { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.today-step { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--ink-2); }
.today-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); animation: pub-pulse 1.8s ease-in-out infinite; }
.today-then, .today-meta { margin: 0; }
.today-meta { color: var(--ink-3); }
.today-calm, .today-note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 1100px) {
  .today-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .today-part:nth-child(3) { border-left: 0; }
  .today-part:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .today-grid { grid-template-columns: minmax(0, 1fr); }
  .today-part + .today-part { border-left: 0; border-top: 1px solid var(--line); }
  .today-all { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .today-dot { animation: none; } }

/* The growth view, compact at first: the drawing small beside what is new; View growth shows all. */
.growth.compact { gap: 18px 24px; }
.growth.compact .growth-stage { flex: 0 1 280px; max-width: 280px; border-radius: 16px; }
.growth.compact .growth-controls, .growth.compact .growth-legend, .growth.compact .growth-now,
.growth.compact .growth-stats, .growth.compact .growth-milestone, .growth.compact .growth-more { display: none; }
.growth.compact .growth-list li:nth-child(n+4) { display: none; }
.growth.compact .growth-hello { font-size: 30px; }
.growth.compact .growth-panel { gap: 16px; }
.growth-toggle { align-self: flex-start; }
@media (max-width: 640px) { .growth.compact .growth-stage { flex-basis: 100%; max-width: 240px; margin: 0 auto; } }

/* Activity: the live log's full history (activity.blade.php). */
.activity-list { padding: 6px 20px 14px; }
.activity-day { margin: 16px 0 4px; }
.activity-line { display: flex; align-items: baseline; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.activity-line:last-child { border-bottom: 0; }
.activity-line time { flex-shrink: 0; min-width: 42px; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.activity-line span { flex: 1; min-width: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.activity-line.success span { color: var(--accent-text); }
.activity-line.warning span { color: var(--warn); }
.activity-line.error span { color: var(--err); }

/* A number that is not measured says so, in words, never as 0. */
.status .row b .metric-none { font-family: var(--sans); font-weight: 500; color: var(--ink-3); }
@media (max-width: 900px) { .hide-narrow { display: none; } }

/* ------------------------------------------------- round 50: onboarding and one set of statuses */
/* Today: the one first step (the business plan, with its price), then its progress. */
.today-start { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 18px 20px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, var(--accent-soft), transparent 80%); }
.today-start-text { flex: 1 1 360px; min-width: 0; }
.today-start-text h3 { margin: 4px 0 6px; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.today-start-text p { margin: 0; max-width: 70ch; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.today-start form { margin: 0; }
.today-plan { padding: 14px 20px 16px; border-bottom: 1px solid var(--line); }
.plan-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; counter-reset: plan; }
.plan-step { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.plan-step .plan-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.plan-step.ready .plan-dot { background: var(--accent); }
.plan-step.working .plan-dot, .plan-step.review .plan-dot { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.plan-name { font-size: 14px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.plan-words { font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 900px) { .plan-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Adding an existing business: what it wants help with. */
.goal-choice { display: grid; gap: 10px; margin: 0 0 4px; padding: 0; border: 0; }
.goal-choice legend { margin: 0 0 10px; padding: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.goal-option { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); }
.goal-option:has(input:checked) { border-color: var(--accent-ring); background: var(--accent-soft); }
.goal-option input { margin-top: 3px; }
.goal-option strong { display: block; font-weight: 600; }
.goal-option .small { display: block; margin-top: 2px; line-height: 1.45; }

/* A task's panel: why it is here, what it costs, what it waits for, its result. */
.task-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 14px 0 0; font-size: 13.5px; }
.task-facts dt { color: var(--ink-3); }
.task-facts dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
@media (max-width: 520px) { .task-facts { grid-template-columns: minmax(0, 1fr); } .task-facts dd { margin-bottom: 6px; } }

/* ------------------------------------------------- round 51: connections that say who can use them, and clear publishing */
/* Connected accounts: the account a connection reaches, first. */
.account-name { margin: 8px 0 0; font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
.account-name strong { color: var(--ink); }

/* Admin › Platform integrations: where each provider app stands, and how to set it up. */
.stage-form { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.stage-form select { width: auto; max-width: 100%; }
.setup-steps { margin: 12px 0 0; }
.setup-steps ol { margin: 8px 0; padding-left: 20px; color: var(--ink-2); line-height: 1.55; }
.setup-steps li { margin: 0 0 4px; overflow-wrap: anywhere; }

/* The content plan's four steps: drafting, checking, ready to post, published. */
.content-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 0 18px; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
.content-flow li { min-width: 0; border-left: 1px solid var(--line); }
.content-flow li:first-child { border-left: 0; }
.content-flow a { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; color: var(--ink-2); }
.content-flow a:hover { background: var(--panel-2); text-decoration: none; }
.content-flow span { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.content-flow strong { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.content-flow li.on { background: var(--accent-soft); }
.content-flow li.on span { color: var(--accent-text); }
@media (max-width: 640px) { .content-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .content-flow li:nth-child(3) { border-left: 0; } .content-flow li:nth-child(n+3) { border-top: 1px solid var(--line); } }
/* Posting by hand, where one press exists: tucked away, still there. */
.post-yourself { flex-basis: 100%; }
.post-yourself summary { cursor: pointer; color: var(--ink-3); width: max-content; }
.post-yourself .row-actions { margin-top: 8px; }
.content-when label { margin: 0; font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--ink-3); }

/* A video's places, each with its account, and the line that says where it goes. */
.reel-place { align-items: flex-start; }
.reel-place span { line-height: 1.45; }
.reel-summary { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--panel-2); color: var(--ink-2); overflow-wrap: anywhere; }

/* Ads: making a video (credits) and running it as an ad (paid at Meta), side by side and never mixed. */
.cost-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.cost-part { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.cost-part strong { font-size: 16px; font-weight: 600; color: var(--ink); }
@media (max-width: 640px) { .cost-split { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------- round 52: a stable menu, the website, the business plan, a demo */
/* The main menu: the same five places on every page. On a narrower screen it takes a row of its own under the header. */
.topbar nav.primary-nav { margin-left: 6px; gap: 2px; flex-wrap: nowrap; }
.topbar nav.primary-nav a { white-space: nowrap; }
.topbar nav.actions-nav { margin-left: auto; }
@media (max-width: 1100px) {
  .topbar nav.primary-nav { order: 3; flex-basis: 100%; margin: 0 -10px; overflow-x: auto; scrollbar-width: none; }
  .topbar nav.primary-nav::-webkit-scrollbar { display: none; }
}
@media (max-width: 600px) { .topbar nav.actions-nav { margin-left: auto; } }
@media (max-width: 480px) { .topbar nav.primary-nav { margin: 0 -8px; gap: 0; } .topbar nav.primary-nav a { padding: 6px 7px; font-size: 13px; } }
/* Administration, set apart from the company's and the account's own things. */
.menu-panel .menu-admin { margin: 6px 0 2px; padding: 2px 4px 4px; border: 1px dashed var(--line-strong); border-radius: 9px; }

/* Website: what an owner does with it, first (website/index). */
.website-page { max-width: 880px; }
.site-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
.site-action { display: flex; flex-direction: column; gap: 3px; min-width: 0; margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); text-align: left; }
.site-action:hover { border-color: var(--line-strong); text-decoration: none; }
.site-action strong { font-size: 14.5px; font-weight: 600; }
.site-action span { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
.site-action.primary { border-color: var(--accent-ring); background: var(--accent-soft); }
.site-action.primary strong { color: var(--accent-text); }
.site-action.off { opacity: .65; }
form.site-action { padding: 0; }
form.site-action button { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 14px 16px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
@media (max-width: 760px) { .site-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card-title-link { color: inherit; }
.card-title-link:hover { color: var(--accent-text); text-decoration: none; }

/* Business plan: the four documents everything builds on (plan). */
.plan-write { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.plan-parts { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.plan-part { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.plan-part-head { display: flex; align-items: flex-start; gap: 12px; }
.plan-part-head > div { flex: 1; min-width: 0; }
.plan-part-head h3 { margin: 0; }
.plan-n { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-strong); font-size: 12.5px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.plan-part.state-ready .plan-n { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.plan-rec { margin: 10px 0 10px 38px; max-width: 72ch; color: var(--ink-2); line-height: 1.5; }
.plan-part .row-actions, .plan-part > p.small { margin-left: 38px; }
@media (max-width: 520px) { .plan-rec, .plan-part .row-actions, .plan-part > p.small { margin-left: 0; } }

/* See a demo: the product's screens for the made-up bakery, said to be made up first. */
.demo-head { padding-bottom: 24px; }
.demo-flag { display: inline-block; max-width: 72ch; margin: 0 0 22px; padding: 10px 14px; border: 1px solid var(--warn); border-radius: 10px; background: var(--warn-soft); color: var(--ink); font-size: 14px; line-height: 1.5; }
.demo-block { padding: 40px 0; }
.demo-block .label { margin-bottom: 10px; }
.demo-screen { margin: 0; }
.demo-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.demo-two > div { min-width: 0; }
@media (max-width: 900px) { .demo-two { grid-template-columns: minmax(0, 1fr); } }
.demo-inert { pointer-events: none; cursor: default; }
.demo-note { margin: 10px 0 0; max-width: 72ch; }
.demo-flow li { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; }
.demo-summary p { margin: 0 0 8px; line-height: 1.5; color: var(--ink-2); }
.demo-summary p strong { color: var(--ink); }
.demo-channels { margin: 0; padding-left: 18px; color: var(--ink-2); line-height: 1.7; }
.demo-actions { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ------------------------------------------------- round 53: the mark, early access */
/* Vivonoma's mark (partials/logo): two leaves that make a V, growing from one point. */
.logo-mark { display: block; flex-shrink: 0; }

/* Early access: the public form, and Admin › Early access. */
.early-access .pub-sub { margin-bottom: 22px; }
.early-access-form { max-width: 640px; margin: 0; padding: 22px 24px; }
.early-access-form textarea { min-height: 84px; }
/* The honeypot: out of sight and out of the tab order for people; robots fill it in. */
.ea-trap { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.ea-list { padding: 4px 18px; }
.ea-row { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-start; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ea-row:last-child { border-bottom: 0; }
.ea-main { flex: 1 1 360px; min-width: 0; }
.ea-wants { margin: 6px 0 0; max-width: 72ch; color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; }
.ea-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ea-tester-form { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 4px 10px; border: 1px solid var(--line); border-radius: 10px; }
.ea-testers { gap: 6px 12px; align-items: baseline; margin: 6px 0; }
.ea-testers .mono { overflow-wrap: anywhere; }
.ea-tester-form .check-row { display: inline-flex; width: auto; gap: 6px; }

/* ------------------------------------------------- round 54: the overview */
/* The dashboard opens with one main scene (widgets/scene): the company growing,
   and beside it what needs you, what runs now and what comes next. Under it, the
   summaries (website, results, ready to publish) and what was done recently. The
   chat is docked at the bottom right (partials/chat-dock). The classic layout
   (one a company saved before) keeps its rules above. */
.overview { display: flex; flex-direction: column; gap: 18px; }
.overview > .today, .overview > .growth { margin: 0; }
.overview-offer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  margin: 0 0 18px; padding: 14px 18px; border: 1px solid var(--accent-ring); border-radius: var(--radius);
  background: linear-gradient(90deg, var(--accent-soft), transparent 85%), var(--panel); font-size: 14px; color: var(--ink-2);
}
.overview-offer[hidden] { display: none; }
.overview-offer > div:first-child { flex: 1 1 420px; min-width: 0; }
.overview-offer strong { color: var(--ink); }
.overview-offer form { margin: 0; }

.scene { border: 1px solid var(--line); border-radius: 20px; background: var(--panel); overflow: hidden; box-shadow: var(--shadow); }
.scene-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.scene-name { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; overflow-wrap: anywhere; }
.scene-state {
  display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 9px; border-radius: 999px;
  border: 1px solid var(--line-strong); font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap;
}
.scene-state-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex-shrink: 0; }
.scene-state.state-working { color: var(--accent-text); border-color: var(--accent-ring); }
.scene-state.state-working .scene-state-dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); animation: pub-pulse 1.8s ease-in-out infinite; }
.scene-state.state-ready .scene-state-dot { background: var(--ok); }
.scene-state.state-needs, .scene-state.state-waiting { color: var(--warn); border-color: var(--warn); }
.scene-state.state-needs .scene-state-dot, .scene-state.state-waiting .scene-state-dot { background: var(--warn); }
.scene-modes { margin: 0; }
.scene-fact { font-size: 13.5px; color: var(--ink-2); white-space: nowrap; }
a.scene-needs-count { color: var(--warn); font-weight: 600; }
.scene-all { margin-left: auto; font-size: 13px; white-space: nowrap; }

/* The drawing takes most of the width; the answers sit beside it. The scene fits the
   first screen: its height follows the window, between 400 and 600 pixels. */
.scene-main { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); }
.scene-stage {
  position: relative; margin: 0; min-width: 0; min-height: clamp(400px, calc(100vh - var(--topbar-h, 62px) - 150px), 600px);
  background: radial-gradient(circle at 64% 48%, var(--g-light), transparent 56%), var(--g-stage);
  border-right: 1px solid var(--line); overflow: hidden;
}
.scene-art { position: absolute; top: 0; bottom: 0; right: 3%; height: 100%; aspect-ratio: 1 / 1; max-width: 72%; }
.scene-art svg { width: 100%; height: 100%; }
.scene-hello { position: absolute; z-index: 1; top: 20px; left: 22px; max-width: min(34ch, 44%); display: flex; flex-direction: column; gap: 6px; }
.scene-hello .label { margin: 0; }
.scene-greeting { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -.035em; line-height: 1.08; text-wrap: balance; }
.scene-lede { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.scene-foot {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 10px 16px; padding: 28px 20px 16px;
  background: linear-gradient(to bottom, transparent, var(--g-stage) 55%);
}
.scene-milestones { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; min-width: 0; }
.scene-milestones li {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 8px; border-radius: 999px;
  border: 1px dashed var(--line-strong); background: var(--g-stage); font-size: 12px; color: var(--ink-3);
}
.scene-milestones li.done { border-style: solid; border-color: var(--accent-ring); color: var(--ink); }
.scene-check { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid currentColor; flex-shrink: 0; }
.scene-milestones li.done .scene-check { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 2px var(--g-stage); }
.scene-replay { display: inline-flex; align-items: center; gap: 10px; }
.scene-replay .growth-day { min-width: 0; }

.scene-side { display: flex; flex-direction: column; min-width: 0; }
.scene-block { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.scene-block:last-child { border-bottom: 0; flex: 1 1 auto; }
.scene-head { margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.scene-needs { background: var(--warn-soft); }
.scene-needs .scene-head { color: var(--warn); }
.scene-need { display: flex; flex-direction: column; gap: 6px; }
.scene-need + .scene-need, .scene-more .scene-need { padding-top: 10px; border-top: 1px solid var(--line); }
.scene-need p { margin: 0; }
.scene-need-text { font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.scene-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.scene-actions form, .scene-block > form, .scene-step > form { margin: 0; }
.scene-more > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2); list-style-position: inside; }
.scene-more[open] > summary { margin-bottom: 10px; }
.scene-title { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.scene-title a { color: var(--ink); }
.scene-title a:hover { color: var(--accent-text); }
.scene-note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.scene-last { margin: 0; line-height: 1.45; }
.scene-step { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.scene-step p { margin: 0; }
.scene-step + .scene-step { padding-top: 12px; border-top: 1px solid var(--line); }
.scene-count { margin-left: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.scene-plan-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: 100%; max-width: 280px; margin: 2px 0; padding: 0; list-style: none; }
.scene-plan-bar li { height: 6px; border-radius: 3px; background: var(--line-strong); }
.scene-plan-bar li.state-ready { background: var(--accent); }
/* Written: full. Being checked, or being written right now: half. Waiting in line (or paused): only an outline. */
.scene-plan-bar li.state-review, .scene-plan-bar li.state-working.running { background: linear-gradient(90deg, var(--accent) 50%, var(--line-strong) 50%); }
.scene-plan-bar li.state-working:not(.running) { background: transparent; box-shadow: inset 0 0 0 1px var(--accent-ring); }
.scene-parts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.scene-parts li { display: flex; justify-content: space-between; gap: 12px; }
.scene-parts li.state-ready > :first-child { color: var(--ink); }
.scene-link { margin-top: auto; padding-top: 4px; }

@media (max-width: 1100px) {
  .scene-main { grid-template-columns: minmax(0, 1fr); }
  .scene-stage { border-right: 0; border-bottom: 1px solid var(--line); }
}
/* A narrow screen: the greeting above the drawing, the drawing as wide as the screen, the steps below. */
@media (max-width: 700px) {
  .scene-bar { padding: 12px 16px; gap: 8px 10px; }
  .scene-all { margin-left: 0; }
  .scene-stage { min-height: 0; display: flex; flex-direction: column; }
  .scene-hello { position: static; max-width: none; padding: 16px 16px 0; }
  .scene-greeting { font-size: 24px; }
  .scene-art { position: relative; right: auto; width: min(100%, 420px); height: auto; max-width: none; margin: 0 auto; }
  .scene-foot { position: static; padding: 0 16px 16px; background: none; }
  .scene-block { padding: 14px 16px; }
}

/* Under the scene: the summaries, three to a row on a wide screen, each as tall as its row. */
.overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.overview-cell { min-width: 0; display: flex; flex-direction: column; }
.overview-cell > * { flex: 1 1 auto; }
.overview-cell.wide { grid-column: 1 / -1; }
.overview-cell > .card { margin: 0; }
@media (max-width: 1100px) { .overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .overview-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
.summary-card { display: flex; flex-direction: column; }
.summary-card > .btn { align-self: flex-start; }
a.scene-state:hover { text-decoration: none; filter: brightness(1.1); }
/* Room under the last row for the chat's button, which floats over the page. */
.overview { padding-bottom: 56px; }
.site-latest { margin: 0 0 10px; line-height: 1.45; overflow-wrap: anywhere; }
.ready-post { display: flex; flex-direction: column; gap: 6px; }
.ready-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; }
.ready-title a { color: var(--ink); }
.ready-preview { margin: 0 0 4px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); padding-left: 10px; border-left: 2px solid var(--line-strong); overflow-wrap: anywhere; }
.ready-counts { margin: 12px 0 0; }
.channel-summary { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.channel-summary li { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.channel-summary-name { overflow-wrap: anywhere; }

.recent { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 14px 20px; }
.recent-head { margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.recent-list { list-style: none; margin: 0; padding: 0; flex: 1 1 520px; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 18px; }
.recent-list a { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 8px; margin: -6px -8px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.recent-list a:hover { background: var(--panel-2); }
.recent-list .growth-mark { flex-shrink: 0; overflow: visible; }
.recent-text { display: flex; flex-direction: column; min-width: 0; }
.recent-title { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-meta { font-size: 12px; color: var(--ink-3); }
.recent-links { display: inline-flex; gap: 16px; }
@media (max-width: 900px) { .recent-list { grid-template-columns: minmax(0, 1fr); } }

/* Ask Vivonoma, docked: a button at the bottom right; open, a panel over the page; pinned,
   a column beside the overview on a wide screen. */
.chat-dock-button {
  position: fixed; z-index: 60; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 16px 7px 8px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); box-shadow: var(--shadow-lg);
  font: 600 14px var(--sans); cursor: pointer;
}
.chat-dock-button:hover { border-color: var(--accent-ring); }
.chat-dock-button .chat-new-badge { margin-left: 0; }
.chat-dock.open .chat-dock-button { display: none; }
.chat-dock-panel {
  position: fixed; z-index: 61; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  width: min(420px, calc(100vw - 32px)); height: min(660px, calc(100vh - var(--topbar-h, 62px) - 40px));
  display: flex; flex-direction: column;
}
.chat-dock-panel[hidden] { display: none; }
.chat-dock-panel .chat-card {
  position: static; flex: 1 1 auto; display: flex; flex-direction: column; height: auto; min-height: 0; margin: 0; box-shadow: var(--shadow-lg);
}
.chat-dock-panel .chat { flex: 1 1 auto; min-height: 0; max-height: none; }
.chat-dock-tools { display: inline-flex; gap: 6px; }
.chat-pin[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
@media (min-width: 1280px) {
  body.chat-pinned .overview { margin-right: 438px; }
  .chat-dock.pinned .chat-dock-panel { top: calc(var(--topbar-h, 62px) + 24px); bottom: 24px; right: max(24px, calc((100vw - 1560px) / 2 + 24px)); height: auto; width: 414px; }
  .chat-dock.pinned .chat-dock-panel .chat-card { box-shadow: var(--shadow); }
}
@media (max-width: 1279px) { .chat-pin { display: none; } }
@media (max-width: 700px) {
  .chat-dock-panel { inset: var(--topbar-h, 56px) 0 0 0; width: auto; height: auto; }
  .chat-dock-panel .chat-card { border-radius: 0; border-left: 0; border-right: 0; }
  .chat-dock-button { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .scene-state.state-working .scene-state-dot { animation: none; } }

/* A pressed mark: its tip stays, with the way to the result (public/js/growth.js). */
.growth-tip.pinned { pointer-events: auto; }
.growth-tip-open { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600; }
.growth-tip-open[hidden] { display: none; }

/* ------------------------------------------------- round 55: one meaning everywhere */
/* Tasks: why a task cannot start yet, said once, in the same words as on the overview (TaskReadiness). */
.task-waits { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 2px 0 8px; font-size: 13px; color: var(--ink-3); }
.task-waits svg { flex-shrink: 0; align-self: center; }
.lane-counts { margin: -4px 0 12px; }
/* The demo's overview is a picture of the real one: nothing on it can be pressed. */
.demo-screen.scene .segmented button[disabled] { cursor: default; opacity: 1; }
.demo-screen.scene .scene-name { margin: 0; }

/* ------------------------------------------------- round 56: the other screens */
/* Keyboard focus is always visible. */
a:focus-visible, button:focus-visible, summary:focus-visible, .btn:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: 4px;
}
/* A phone: the header keeps to two short rows; Credits is in the Menu too. */
@media (max-width: 480px) { .topbar-credits { display: none; } }

/* The marketing workspace, said beside its name; Admin › Marketing asks for its posts. */
.brand-workspace { margin-left: 6px; font-size: 10px; }
.marketing-ask { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.marketing-ask .btn + .small { margin-left: 10px; }

/* Platform admin: said once above its tabs, with the way back to the company in view. */
.admin-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin: 0 0 10px; }
.admin-bar-title { margin: 0; font-size: 13px; color: var(--ink-3); }
.admin-bar-title .badge { margin-right: 6px; }
.admin-bar-back { font-size: 13px; }

/* A task opens as a readable overview; Edit, and type and priority further in. */
.task-edit-box { margin: 14px 0 4px; }
.task-edit-box > summary { list-style: none; display: inline-flex; }
.task-edit-box > summary::-webkit-details-marker { display: none; }
.task-edit-box[open] > summary { margin-bottom: 8px; }
.task-advanced { margin-top: 12px; }
.task-advanced > summary { cursor: pointer; color: var(--ink-2); }
.task-error-full { margin-top: 6px; }
.task-error-full > summary { cursor: pointer; font-size: 12.5px; }

/* Content with nothing written yet: one first step. */
.first-post { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; padding: 14px 16px; border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.first-post p { flex: 1 1 360px; min-width: 0; }

/* Website versions: the change in words first; its code only in the details. */
.version-summary { display: block; font-weight: 600; line-height: 1.4; }
.version-details > summary { cursor: pointer; margin-top: 2px; }

/* The business profile, in parts. */
.profile-form fieldset { margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
/* A floated legend leaves the fieldset's border alone; the line between parts is the legend's own. */
.profile-form legend { float: left; width: 100%; margin: 0 0 4px; padding: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.profile-form fieldset + fieldset > legend { padding-top: 16px; border-top: 1px solid var(--line); }
.profile-form legend + * { clear: both; }

/* ------------------------------------------------- round 57: a calmer overview, company logos, Tasks in tabs */
/* A company's logo (partials/company-logo): its own colours and proportions in a neutral holder, or its
   initial. A logo made for dark backgrounds takes its place in the dark theme. */
:root { --logo-holder: #fbfbf7; }
.co-logo {
  display: inline-grid; place-items: center; flex-shrink: 0; overflow: hidden; line-height: 1;
  font-weight: 800; letter-spacing: -0.04em; border-radius: 8px;
}
.co-logo.is-initial { background: var(--accent); color: var(--accent-ink); }
.co-logo.has-logo { background: var(--logo-holder); box-shadow: inset 0 0 0 1px var(--line); }
/* The holder's own room around the logo: a share of the holder (a padding in % would follow the parent's width). */
.co-logo-img { display: block; width: 78%; height: 78%; object-fit: contain; }
.co-logo-on-dark { display: none; }
:root[data-theme="dark"] .co-logo.has-dark { background: var(--panel-3); }
:root[data-theme="dark"] .co-logo.has-dark .co-logo-img { display: none; }
:root[data-theme="dark"] .co-logo.has-dark .co-logo-on-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .co-logo.has-dark { background: var(--panel-3); }
  :root[data-theme="system"] .co-logo.has-dark .co-logo-img { display: none; }
  :root[data-theme="system"] .co-logo.has-dark .co-logo-on-dark { display: block; }
}
.co-logo-xs { width: 22px; height: 22px; border-radius: 6px; font-size: 11px; }
.co-logo-sm { width: 30px; height: 30px; border-radius: 8px; font-size: 15px; }
.co-logo-md { width: 36px; height: 36px; border-radius: 9px; font-size: 16px; }
.co-logo-lg { width: 72px; height: 72px; border-radius: 16px; font-size: 30px; }
/* Business profile: the logo, sent apart from the profile. */
.logo-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 24px; }
.logo-form { flex: 1 1 320px; min-width: 0; }
.logo-form label:first-of-type { margin-top: 0; }
.logo-form input[type=file] { display: block; max-width: 100%; font-size: 13px; }
.logo-form .small { margin: 10px 0 12px; max-width: 64ch; }
.logo-remove { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.label-optional { text-transform: none; letter-spacing: 0; font-weight: 500; }

/* The overview's scene, calmer: the name only in the header, a quieter greeting, about a fifth shorter,
   and what comes next directly under what it follows. */
.scene-stage { min-height: clamp(360px, calc(100vh - var(--topbar-h, 62px) - 290px), 480px); }
.scene-hello { top: 18px; left: 20px; max-width: min(40ch, 42%); gap: 4px; }
.scene-greeting { font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-lede { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.scene-state.state-yours { color: var(--accent-text); border-color: var(--accent-ring); }
.scene-state.state-yours .scene-state-dot { background: var(--accent-text); }
.scene-state.state-idle .scene-state-dot { background: var(--line-strong); }
.scene-next.is-yours > .scene-head { color: var(--accent-text); }
.scene-link { margin-top: 2px; padding-top: 0; }
.scene-sub { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.scene-after .scene-title a { color: var(--ink-2); }
.scene-purpose { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.scene-plan-bar li { cursor: default; }
/* Milestones open where they are; pointed at, their marks light up in the drawing. */
.scene-milestones li { padding: 0; transition: border-color .15s ease; }
.scene-milestones li:has(> a):hover, .scene-milestones li:focus-within { border-color: var(--accent-ring); }
.scene-milestones a, .scene-milestone { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 8px; border-radius: 999px; color: inherit; }
.scene-milestones a:hover, .scene-milestones a:focus-visible { text-decoration: none; color: var(--ink); background: var(--panel-2); }
.scene-out { margin-left: -2px; font-size: 11px; color: var(--ink-3); }
/* Replay, a quiet second control; the day once, beside it. */
.scene-replay { gap: 4px; }
.scene-replay .growth-day { min-width: 0; font-size: 11px; color: var(--ink-3); }
.scene-replay .growth-replay { height: 28px; gap: 6px; padding: 0 10px; border-color: transparent; background: transparent; color: var(--ink-3); font-size: 12px; }
.scene-replay .growth-replay:hover, .scene-replay .growth-replay[aria-pressed="true"] { border-color: var(--line-strong); color: var(--ink); }
/* What the page points at lights up in the drawing; the rest steps back. */
.growth-node { transition: opacity .2s ease; }
.growth-focus .growth-node:not(.lit) { opacity: .22; }
.growth-focus .growth-link:not(.lit) { stroke-opacity: .28; }
/* Website: "live" opens it. */
a.badge-link:hover { text-decoration: none; filter: brightness(1.08); }
@media (max-width: 700px) {
  .scene-stage { min-height: 0; }
  .scene-hello { max-width: none; }
  .scene-greeting { font-size: 18px; white-space: normal; }
}

/* Tasks in three tabs: plain rows on the panel, one action each, colour only for where a task stands. */
.task-tabs { margin-top: 18px; overflow-x: auto; }
.task-tabs a { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.tab-count { padding: 1px 7px; border-radius: 999px; background: var(--panel-3); color: var(--ink-2); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tab-count.warn { background: var(--warn-soft); color: var(--warn); }
.task-panel[hidden] { display: none; }
.trow-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 22px 0 8px; font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; }
.task-panel > .trow-group:first-child { margin-top: 2px; }
.trow-group-note { font-size: 12.5px; font-weight: 400; letter-spacing: 0; color: var(--ink-3); }
.trows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.trow { display: flex; align-items: center; gap: 10px 18px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.trow:last-child { border-bottom: 0; border-radius: 0 0 var(--radius) var(--radius); }
.trow:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.trow:only-child { border-radius: var(--radius); }
.trow-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.trow-title { margin: 0; display: flex; align-items: baseline; gap: 8px; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; overflow-wrap: anywhere; }
.trow-title a { color: var(--ink); }
.trow-title a:hover { color: var(--accent-text); }
.trow-sub { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.trow-sub > span { min-width: 0; }
.trow-waits { color: var(--ink-3); }
.trow-waits svg { flex-shrink: 0; align-self: center; }
.trow-meta { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--ink-3); }
.trow-meta > span + span::before { content: "·"; margin: 0 7px; color: var(--ink-3); }
.trow-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.trow-actions form { margin: 0; }
/* Where it stands: a small dot in a restrained colour beside the word. */
.st { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink-2); }
.st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); flex-shrink: 0; }
.st-running::before { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.st-queued::before { background: var(--accent-text); }
.st-done::before { background: var(--ok); }
.st-failed { color: var(--err); }
.st-failed::before { background: var(--err); }
.st-blocked, .st-needs_approval { color: var(--warn); }
.st-blocked::before, .st-needs_approval::before { background: var(--warn); }
.st-cancelled { font-weight: 500; color: var(--ink-3); }
.trow-running { background: linear-gradient(90deg, var(--accent-soft), transparent 55%); }
.trow-failed { box-shadow: inset 3px 0 0 var(--err); }
.trow-cancelled .trow-title a { color: var(--ink-2); }
.trow-more .menu-panel { min-width: 250px; }
.menu-panel form.trow-prio { margin: 4px 0; padding: 4px 10px 10px; }
.trow-prio .menu-label { padding: 4px 0 6px; }
.trow-prio .segmented button { padding: 4px 10px; }
.menu-panel .linklike.trow-cancel { color: var(--err); }
@media (max-width: 640px) {
  .trow { flex-wrap: wrap; padding: 12px; }
  .trow-actions { width: 100%; }
  .trow-more .menu-panel { left: 0; right: auto; }
}

/* ------------------------------------------------- round 58: hosting places, Google's clock */
/* Admin › Overview: each website holding a hosting place; a deleted company's can be freed. */
.hosting-places { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.hosting-places li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 6px 0; border-top: 1px solid var(--line); }
.hosting-places li:first-child { border-top: 0; padding-top: 0; }
.hosting-places form { margin: 0; }
/* Admin › Platform integrations: when Google's 60 days are up. */
.google-clock { text-align: right; font-weight: 500; }

/* ------------------------------------------------- round 59: Admin › Resources */
/* What to do, most urgent first: a coloured dot, the finding, and the command where there is one. */
.advice { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.advice-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.advice-dot { width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.advice-warn .advice-dot { background: var(--warn); }
.advice-err { border-color: var(--err); background: linear-gradient(90deg, var(--err-soft), transparent 70%), var(--panel); }
.advice-err .advice-dot { background: var(--err); }
.advice-body { min-width: 0; }
.advice-body p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.advice-command { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.advice-command code { padding: 3px 8px; border-radius: 6px; background: var(--panel-3); font-family: var(--mono); font-size: 12.5px; color: var(--ink); overflow-wrap: anywhere; }
.resource-tiles { margin-bottom: 18px; }
.resource-tiles .price small { font-size: 14px; color: var(--ink-3); font-weight: 400; }
.resource-bar { height: 6px; border-radius: 3px; background: var(--panel-3); overflow: hidden; margin: 8px 0 4px; }
.resource-bar span { display: block; height: 100%; border-radius: 3px; background: var(--accent-text); }
.resource-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.resource-table .resource-cell { width: 34%; min-width: 120px; }
.resource-table .resource-bar { margin: 0; }
.upgrade-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.upgrade-steps strong { color: var(--ink); }
.upgrade-steps .advice-command { margin: 6px 0 0; }
/* The homepage headline says what it is in more words than before: wider, a little smaller, three lines. */
.pub-living h1 { max-width: 14ch; font-size: clamp(42px, 5.8vw, 76px); }