/*
 * geezer.io: the site's only stylesheet (plus sections.css for agent-made sections).
 * Mostly black and white with one lime accent; compact cards on a faint green-grey canvas.
 * Light or dark follows the system, or the viewer's pick: tokens that differ are light-dark() pairs, so rules
 * use tokens, never literal colors (--ink is light in dark mode; text on an ink fill is --on-ink).
 *
 * Order: tokens, base elements, page frame, components, then page styles that predate the
 * components (they use the same tokens; they shrink as pages move onto components).
 * Pages add no CSS of their own and no inline styles: a page that needs something new gets a
 * component here. /dev/components (dev mode only) shows every component.
 *
 * Template conventions:
 *   - One <h1> per page; <h2> for sections, <h3> below that.
 *   - Forms: <label for> above its control, then optional <small> help, then <small class="error">.
 *     A bare <button> is the primary action; <button class="secondary"> a secondary one;
 *     <button class="link"> reads as a text link. Links that look like buttons: <a class="btn">
 *     (add .primary, .accent, .ghost, .danger, .sm, .icon).
 *   - Messages: <p class="notice"> (info), <p class="error" role="alert"> (a form-level error).
 *   - Small grey meta text: .details. Tables go in <div class="table-card"> (cells with data-l stack on phones).
 */

:root {
    --canvas: light-dark(#f3f4f0, #0f110e);      /* page ground: a faint green-grey, so white cards read without shadows */
    --surface: light-dark(#ffffff, #181b16);
    --sunk: light-dark(#f6f7f3, #20241e);        /* hover fills, table heads */
    --line: light-dark(#e1e4dc, #2c3128);
    --line-2: light-dark(#c8ccc2, #3f4539);      /* control borders */
    --ink: light-dark(#141613, #eceee8);
    --ink-2: light-dark(#454a42, #c3c8bc);       /* body copy on cards */
    --ink-3: light-dark(#676c62, #979d8f);       /* meta text: 5.3:1 on white */
    --accent: #a3ef1f;      /* lime: the one accent */
    --accent-2: #8ed10f;
    --accent-soft: light-dark(#eefad8, #1f2a10);
    --accent-line: light-dark(#cdeb98, #3d5a14);
    --accent-ink: light-dark(#3f7d00, #b5f04a);  /* lime dark enough for text on white (about 5:1) */
    --danger: light-dark(#b3261e, #ff8a80);
    --danger-soft: light-dark(#fdecea, #341816);
    --danger-line: light-dark(#f2b8b5, #6e2b26);
    --warn: light-dark(#7a5200, #f2c75c);
    --warn-soft: light-dark(#fff3d1, #2b2310);
    --warn-line: light-dark(#efd48a, #67531f);
    --focus: light-dark(rgba(163, 239, 31, 0.5), rgba(163, 239, 31, 0.4));
    --selection: light-dark(rgba(163, 239, 31, 0.55), rgba(163, 239, 31, 0.35));
    --field: light-dark(#ffffff, #121410);       /* text inputs */
    --placeholder: light-dark(#8a8f84, #6f756a);
    --line-3: light-dark(#aeb3a7, #5a6153);      /* control borders on hover */
    --faded: light-dark(#fcfcfa, #151813);       /* removed posts, done and skipped rows */
    --visited: light-dark(#5b5f57, #a4a99c);
    --quiet-icon: light-dark(#9da296, #6f756a);  /* idle vote arrows */
    --quieter-icon: light-dark(#b5b9ae, #4f554a);
    --avatar-soft: light-dark(#dfe3d8, #2c3128);
    --on-ink: light-dark(#ffffff, #141613);      /* text on an ink fill: primary buttons, pressed toggles, done steps */
    --ink-hover: light-dark(#2d302a, #d4d8ce);
    --on-accent: #141613;   /* text on lime, which stays dark in both themes */
    --accent-hover: #b2f441;
    --danger-ink: light-dark(#7d1a14, #ffb4ab);  /* error text on --danger-soft */
    --tile: light-dark(#141613, #262b22);        /* the channel mark and bot avatars: a dark tile with a lime initial */
    --hero: light-dark(#141613, #20251c);        /* always dark: the signed-out intro, video cards */
    --hero-hover: light-dark(#2d302a, #2c3227);
    --hero-ink: #f2f4ee;
    --hero-2: #c9cec2;
    --shadow: light-dark(rgba(20, 22, 19, 0.14), rgba(0, 0, 0, 0.5));

    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --r: 8px;               /* cards and panels */
    --r-sm: 6px;            /* controls */
    --shell: 1120px;
    --rail: 300px;
    --field-width: 38rem;   /* max width of text inputs and textareas */
    --text-width: 46rem;    /* max width of running text */
}

/* Light or dark: the system's, unless the viewer picked one (Account.theme, as data-theme on <html>).
   Colors that differ are light-dark() pairs above, which follow color-scheme. */
:root { color-scheme: light dark; }
:root[data-theme=light] { color-scheme: light; }
:root[data-theme=dark] { color-scheme: dark; }

/* ---- Base elements ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 14px/1.45 var(--font); }
@media (max-width: 620px) { body { font-size: 15px; } }
img, svg, video { max-width: 100%; }
a { color: var(--ink); text-underline-offset: 2px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
::selection { background: var(--selection); }

h1, h2, h3, h4 { margin: 0; line-height: 1.2; text-wrap: balance; }
h1 { font-size: 22px; font-weight: 800; letter-spacing: -0.3px; margin: 4px 0 10px; }
h2 { font-size: 17px; font-weight: 800; letter-spacing: -0.2px; margin: 22px 0 8px; }
h3 { font-size: 15px; font-weight: 700; margin: 16px 0 6px; }
p, ul, ol, dl, blockquote, pre, table, form, fieldset, details { margin: 0 0 12px; }
ul, ol { padding-left: 1.4em; }
li { margin-bottom: 3px; }
small { font-size: 12px; }
strong, b { font-weight: 700; }
code, pre { font-family: var(--mono); font-size: 0.9em; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; }
blockquote { margin-left: 0; padding: 4px 12px; border-left: 3px solid var(--line-2); color: var(--ink-2); max-width: var(--field-width); }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; }
dt { color: var(--ink-3); }
dd { margin: 0; }
article { margin: 0 0 12px; }

table { border-collapse: collapse; width: 100%; font-size: 13px; }
th { text-align: left; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child > td { border-bottom: 0; }

details > summary { cursor: pointer; }
details:not(.menu) > summary { color: var(--ink-2); font-weight: 600; }

/* Forms */
label { display: block; font-size: 13px; font-weight: 700; margin: 0 0 5px; }
form label:not(:first-child) { margin-top: 14px; }
form > input[type=hidden]:first-child + label, form > input[type=hidden] + input[type=hidden] + label { margin-top: 0; }
input:not([type=checkbox], [type=radio], [type=hidden], [type=submit], [type=button]), select, textarea {
    display: block; width: 100%; max-width: var(--field-width); height: 36px; padding: 0 10px; margin: 0 0 4px;
    border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--field); color: var(--ink); font: 14px/1.4 var(--font);
}
textarea { height: auto; min-height: 84px; padding: 8px 10px; resize: vertical; line-height: 1.45; }
select { width: auto; min-width: 12rem; padding-right: 28px; }
input[type=number] { width: 7rem; }
:is(input, select, textarea):focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--focus); }
:is(input, select, textarea):disabled { background: var(--sunk); color: var(--ink-3); }
::placeholder { color: var(--placeholder); }
input[type=checkbox], input[type=radio] { accent-color: var(--ink); width: 15px; height: 15px; margin: 0 6px 0 0; vertical-align: -2px; }
label:has(> input[type=checkbox], > input[type=radio]) { font-weight: 400; font-size: 14px; margin: 4px 0 !important; }
form small, label + small { display: block; color: var(--ink-3); max-width: var(--field-width); margin: 0 0 4px; }
small.error, form small.error { color: var(--danger); }
fieldset { border: 1px solid var(--line); border-radius: var(--r); padding: 8px 14px 12px; margin: 12px 0 0; max-width: calc(var(--field-width) + 30px); background: var(--surface); }
legend { font-weight: 700; padding: 0 4px; }
form.narrow { --field-width: 22rem; }
form.stack > :is(button, .actions) { margin-top: 14px; }
form:not(.inline, .arrows, .flags, .thumbs) > :is(input:not([type=hidden]), select, textarea, small, fieldset, label, .row) ~ :is(button, .actions) { margin-top: 14px; }

/* Buttons. A bare <button> is the primary action. :where() keeps these weak, so components win. */
:where(button, input[type=submit], input[type=button], a[role=button]) {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px;
    border: 1px solid var(--ink); border-radius: var(--r-sm); background: var(--ink); color: var(--on-ink);
    font: 600 13px/1 var(--font); cursor: pointer; white-space: nowrap; text-decoration: none; vertical-align: middle;
}
:where(button, input[type=submit], input[type=button], a[role=button]):hover { background: var(--ink-hover); color: var(--on-ink); }
:where(button, a[role=button]).secondary { background: var(--surface); border-color: var(--line-2); color: var(--ink); }
:where(button, a[role=button]).secondary:hover { background: var(--sunk); border-color: var(--line-3); }
:where(button, input[type=submit]):disabled { opacity: 0.45; cursor: not-allowed; }
/* A button waiting on its request (busy.js and the setup forms set aria-busy). */
button[aria-busy=true]::before { content: ""; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
/* A button that reads as a text link (remove, meh, off-topic). */
button.link { display: inline; height: auto; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
button.link:hover { background: none; color: var(--ink); }
button.link.on { color: var(--accent-ink); font-weight: 700; }

/* ---- Page frame: top bar, content shell with an optional right rail, footer ---- */
.bar { background: var(--surface); border-bottom: 3px solid var(--accent); position: sticky; top: 0; z-index: 20; }
.bar-in { max-width: var(--shell); margin: 0 auto; height: 52px; padding: 0 16px; display: flex; align-items: center; gap: 12px; }
.logo { font-weight: 900; font-size: 20px; letter-spacing: -0.6px; text-decoration: none; white-space: nowrap; }
.logo:hover { text-decoration: none; }
.sp { flex: 1 1 0; min-width: 0; }
.bar-in > * { flex-shrink: 0; }
.bar-in > .switch { flex-shrink: 1; min-width: 0; }
.switch > summary { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 5px; border: 1px solid var(--line); border-radius: var(--r-sm); min-width: 210px; max-width: 320px; font-weight: 600; }
.switch > summary:hover { border-color: var(--line-2); }
.switch > summary .lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me > summary { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 6px; border-radius: var(--r-sm); font-weight: 600; }
.me > summary:hover { background: var(--sunk); }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--on-ink); display: grid; place-items: center; font-weight: 800; font-size: 12px; flex: none; text-transform: lowercase; }

.flash-row { max-width: var(--shell); margin: 0 auto; padding: 16px 16px 0; }
.flash-row > .notice { margin: 0; max-width: none; }
.shell { max-width: var(--shell); margin: 0 auto; padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr) var(--rail); gap: 20px; align-items: start; }
.shell.solo { grid-template-columns: minmax(0, 1fr); }
.shell > main { min-width: 0; }
.shell > main > :first-child { margin-top: 0; }
.rail { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 72px; min-width: 0; }
/* A rail taller than the window (the nav, About, widgets, Mod tools) scrolls with the page instead of sticking, or its
   bottom would stay out of reach until the end of the feed. ui.js measures it and sets .tall. */
.rail.tall { position: static; }
.site-foot { max-width: var(--shell); margin: 8px auto 0; padding: 12px 16px 20px; color: var(--ink-3); font-size: 12px; text-align: right; }

@media (max-width: 900px) {
    .shell { grid-template-columns: minmax(0, 1fr); }
    .rail { position: static; }
}
@media (max-width: 620px) {
    .bar-in { padding: 0 12px; gap: 8px; height: 50px; }
    .logo { font-size: 17px; }
    .switch > summary { min-width: 0; max-width: none; }
    .bar-in > .sp { display: none; }
    .bar-in > .switch { margin-right: auto; }
    .bar .txt { display: none; }
    .bar .btn.accent { width: 34px; padding: 0; }
    .shell { padding: 10px; gap: 10px; }
    .site-foot { padding: 10px 12px 16px; }
}

/* ---- Components ---- */

/* Icons: inline SVG from views/ui/_icon.jte, sized to the text. */
.i { width: 16px; height: 16px; flex: none; vertical-align: -3px; }

/* Menus: a <details class="menu"> with a <summary> trigger and a .pop panel. public/js/ui.js closes
   the others when one opens, and closes them on an outside click or Escape. */
.menu { position: relative; margin: 0; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.pop { position: absolute; top: calc(100% + 6px); left: 0; min-width: 250px; max-width: calc(100vw - 24px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 10px 28px var(--shadow); padding: 6px; z-index: 30; }
.pop.right { left: auto; right: 0; }
.mi { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 6px; background: none; color: var(--ink); font: 14px/1.3 var(--font); text-align: left; text-decoration: none; cursor: pointer; height: auto; }
.mi:hover { background: var(--sunk); color: var(--ink); text-decoration: none; }
.mi .end { margin-left: auto; padding-left: 12px; color: var(--ink-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12rem; }
.mi.on { font-weight: 700; }
.mi.danger { color: var(--danger); }
.pop form { margin: 0; }
.ml { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); padding: 8px 10px 4px; }
.ml .who { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ink); }
.msep { height: 1px; background: var(--line); margin: 6px 4px; }
/* The account menu's theme switch (ui/_me_menu): its label, then System / Light / Dark. */
.pop form.theme-pick { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-right: 4px; }
.theme-pick .ml { padding-top: 4px; padding-bottom: 4px; }
.theme-pick .seg > button { padding: 4px 9px; font-size: 12px; }

/* Buttons for links and new markup */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: 600 13px/1 var(--font); cursor: pointer; white-space: nowrap; text-decoration: none; vertical-align: middle; }
.btn:hover { background: var(--sunk); border-color: var(--line-3); color: var(--ink); text-decoration: none; }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.btn.primary:hover { background: var(--ink-hover); }
.btn.accent { background: var(--accent); border-color: var(--accent-2); color: var(--on-accent); }
.btn.accent:hover { background: var(--accent-hover); }
.btn.ghost { border-color: transparent; background: none; }
.btn.ghost:hover { background: var(--sunk); }
.btn.danger { color: var(--danger); border-color: var(--danger-line); }
.btn.sm { height: 26px; padding: 0 9px; font-size: 12px; }
.btn.lg { height: 38px; padding: 0 16px; font-size: 14px; }
.btn.icon { width: 32px; padding: 0; }
.btn.sm.icon { width: 26px; }
.btn:disabled, .btn[aria-disabled=true] { opacity: 0.45; cursor: not-allowed; }

/* Panels: rail boxes and form cards */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); min-width: 0; margin: 0 0 12px; }
.rail .panel { margin: 0; }
/* The channel nav as the rail's first panel (layout/main): wide screens only, where it replaces the switcher.
   It scrolls on its own past 45vh so a long channel list can't push the rail's other panels below the fold.
   The skip link lets keyboard users reach it without tabbing through the page first. */
.rail-nav .panel-b { padding: 6px; max-height: 45vh; overflow-y: auto; }
.skip-nav { position: absolute; left: -9999px; }
@media (width > 900px) {
    body.has-nav .bar-in > .switch { display: none; }
    body.has-nav .skip-nav:focus { position: static; padding: 6px 10px; border-radius: var(--r-sm); background: var(--accent); color: var(--on-accent); font-weight: 700; }
}
@media (width <= 900px) { .rail-nav, .skip-nav { display: none; } }
.panel-h { margin: 0; padding: 12px 14px 0; font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.panel-b { padding: 10px 14px 14px; }
.panel-b > :last-child { margin-bottom: 0; }
.panel-b.pad { padding: 16px; }
.links { display: flex; flex-direction: column; margin: -4px -8px; }
.links a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 6px; text-decoration: none; }
.links a:hover { background: var(--sunk); }
.links .end { margin-left: auto; }
.links .end + .count { margin-left: 4px; }
.count { display: inline-block; font-size: 11px; font-weight: 800; line-height: 1.5; background: var(--accent); color: var(--on-accent); padding: 0 7px; border-radius: 99px; font-variant-numeric: tabular-nums; }
.count.quiet { background: var(--sunk); color: var(--ink-3); border: 1px solid var(--line); }

/* Page header: a title with actions beside it and an optional subtitle */
.pagehead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.pagehead h1 { margin: 0; }
.pagehead .sub { flex: 0 0 100%; margin: 0; color: var(--ink-3); padding-right: max(0px, calc(100% - var(--text-width))); }
/* /submit's "which channel?" list (submit/pick) */
.pick-list { display: flex; flex-direction: column; margin: -4px -8px; }
.pick-list .ml:first-child { padding-top: 0; }
.pick { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 6px; color: var(--ink); text-decoration: none; }
.pick:hover { background: var(--sunk); color: var(--ink); text-decoration: none; }
.pick .grow { display: flex; flex-direction: column; gap: 2px; }
.pick .grow .details { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick .end { flex: none; }

/* Channel mark: a black tile with a lime initial, the channel's only "logo" */
.mark { width: 40px; height: 40px; border-radius: 9px; background: var(--tile); color: var(--accent); display: inline-grid; place-items: center; font-weight: 900; font-size: 20px; line-height: 1; flex: none; text-transform: uppercase; }
.mark.sm { width: 24px; height: 24px; border-radius: 6px; font-size: 13px; }
.mark.xs { width: 18px; height: 18px; border-radius: 5px; font-size: 11px; }
.mark.home { background: var(--accent); color: var(--on-accent); }
.mark.tinted { background: var(--mark); color: var(--mark-ink); box-shadow: inset 0 0 0 1px light-dark(rgb(0 0 0 / .08), rgb(255 255 255 / .14)); }
.mark .i { width: 60%; height: 60%; vertical-align: 0; }

/* Tabs switch sections; the segmented control switches a sort */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; margin: 0 0 14px; }
.tab { display: inline-flex; align-items: center; gap: 6px; height: auto; padding: 9px 10px 8px; font: 600 13px/1 var(--font); color: var(--ink-3); border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; background: none; white-space: nowrap; cursor: pointer; text-decoration: none; border-radius: 0; }
.tab:hover { color: var(--ink); background: none; text-decoration: none; }
.tab[aria-current=page], .tab[aria-selected=true], .tab.on { color: var(--ink); border-bottom-color: var(--accent); }
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 2px; gap: 2px; }
.seg > :is(a, button) { height: auto; border: 0; background: none; padding: 5px 11px; border-radius: 6px; font: 600 13px/1.2 var(--font); color: var(--ink-3); text-decoration: none; cursor: pointer; }
.seg > :is(a, button):hover { background: var(--sunk); color: var(--ink); }
.seg > [aria-pressed=true], .seg > [aria-current=page] { background: var(--ink); color: var(--on-ink); }
.seg > [aria-pressed=true]:hover, .seg > [aria-current=page]:hover { background: var(--ink); color: var(--on-ink); }

/* Chips: labels and states. Written for people: "Waiting for approval", never PENDING. */
.chip { display: inline-flex; align-items: center; gap: 4px; height: 19px; padding: 0 6px; border-radius: 5px; font-size: 11px; font-weight: 700; line-height: 1; border: 1px solid var(--line-2); color: var(--ink-2); background: var(--surface); white-space: nowrap; vertical-align: 2px; }
.chip .i { width: 12px; height: 12px; vertical-align: 0; }
.chip.bot { background: var(--sunk); color: var(--ink); }
.chip.wild { background: var(--accent); border-color: var(--accent-2); color: var(--on-accent); }
.chip.breaking { background: var(--danger); border-color: var(--danger); color: light-dark(#fff, #1d0d0b); }
.chip.assist, .chip.ok { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }
.chip.removed, .chip.bad { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }
.chip.warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.chip.off { background: var(--sunk); color: var(--ink-3); }
.chip.draft { border-style: dashed; color: var(--ink-3); }
.chip.admin { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

/* Notices: info, ok, error, and a working state with a spinner */
.notice, .note, .error:is(p, div), .working {
    display: block; padding: 10px 12px; border-radius: var(--r-sm); font-size: 13px; max-width: var(--text-width);
    background: var(--surface); border: 1px solid var(--line); margin: 0 0 12px;
}
.note { display: flex; gap: 10px; align-items: flex-start; }
.note.ok, .notice.ok { background: var(--accent-soft); border-color: var(--accent-line); }
.note.warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.note.draft-problems { flex-direction: column; gap: 4px; }
.note.draft-problems ul { margin: 0; padding-left: 18px; }
.error { color: var(--danger); }
.error:is(p, div), .note.err { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-ink); }
.working { border-color: var(--accent-line); background: var(--accent-soft); }
.working::before, .spin { content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 8px; vertical-align: -2px; border: 2px solid var(--ink-3); border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; flex: none; }
.spin { margin: 2px 0 0; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .working::before, .spin, button[aria-busy=true]::before { animation-duration: 2.4s; } }
/* A form waiting on a model call (public/js/busy.js): its status line; .elapsed is the running m:ss clock. */
form.is-busy > :not(.busy-status) { display: none; }
.busy-status { margin: 12px 0; padding: 14px 16px; font-size: 14px; }
html { scroll-padding-top: 72px; }   /* anchors and busy.js return targets land clear of the sticky bar */
.elapsed { font-variant-numeric: tabular-nums; }

/* Stepper for multi-step flows: <ol class="steps"><li class="done">..</li><li aria-current="step">..</li><li>..</li></ol> */
ol.steps { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 14px; counter-reset: step; }
ol.steps > li { display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 11px 4px 4px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); font-size: 13px; font-weight: 600; color: var(--ink-3); counter-increment: step; }
ol.steps > li::before { content: counter(step); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--sunk); color: var(--ink-3); }
ol.steps > li.done { color: var(--ink); }
ol.steps > li.done::before { content: "\2713"; background: var(--ink); color: var(--on-ink); }
ol.steps > li[aria-current=step] { color: var(--ink); border-color: var(--ink); }
ol.steps > li[aria-current=step]::before { background: var(--accent); color: var(--on-accent); }
ol.steps a { color: inherit; text-decoration: none; }
ol.steps a:hover { text-decoration: underline; }
.progress { height: 6px; background: var(--sunk); border: 1px solid var(--line); border-radius: 99px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--accent-2); }

/* Data tables in a card; they stack into rows on phones (label cells with data-l="Kind"). */
.table-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin: 0 0 12px; }
.table-card table { margin: 0; }
.table-card th { background: var(--sunk); padding: 9px 12px; }
.table-card td { padding: 10px 12px; vertical-align: middle; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
/* A share-of-total bar in a table cell, with its percent */
.table-card td.share { white-space: nowrap; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.table-card td.share .progress { display: inline-block; vertical-align: middle; width: 64px; margin-right: 4px; }
@media (max-width: 620px) {
    .table-card thead { display: none; }
    .table-card :is(table, tbody) { display: block; }
    .table-card tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px; border-bottom: 1px solid var(--line); }
    .table-card tr:last-child { border-bottom: 0; }
    .table-card td { padding: 0; border: 0; order: 2; }
    .table-card td:first-child { flex: 1 1 calc(100% - 50px); order: 0; }
    .table-card td.act { order: 1; }
    .table-card td[data-l]::before { content: attr(data-l) " "; color: var(--ink-3); font-size: 12px; }
    .table-card td.num { text-align: left; }
}

/* Fields built from views/ui/_field.jte; .fields lays several side by side */
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; margin: 0 0 14px; }
.field > label { margin: 0 !important; }
.field > :is(input, select, textarea) { margin: 0; }
.field .help { font-size: 12px; color: var(--ink-3); max-width: var(--field-width); }
.fields { display: flex; flex-wrap: wrap; gap: 0 12px; }
.fields > .field { flex: 1 1 170px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.actions > form { margin: 0; }

/* Empty states: a designed "nothing here yet" with the next step */
.empty-state { text-align: center; padding: 28px 16px; color: var(--ink-3); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.empty-state b { color: var(--ink); font-size: 15px; }
.empty-state > * { margin: 0; }

/* Byline pieces */
.handle { font-weight: 600; color: var(--ink-2); }
.ctag { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); text-decoration: none; }

/* Feeds of post cards, with a toolbar (sort, counts) above and a pager below */
.feed { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 10px; }
.toolbar > h1, .toolbar > h2 { margin: 0; }
.section-h { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin: 18px 0 8px; }
.toolbar > .section-h { margin: 0; }
.pager { display: flex; justify-content: center; gap: 8px; margin: 4px 0 16px; }
.back { display: inline-block; font-size: 12px; color: var(--ink-3); text-decoration: none; margin: 0 0 8px; }
.back:hover { color: var(--ink); text-decoration: underline; }
.grow { flex: 1; min-width: 0; }

/* Post card: the vote control, the meta line, title and summary, and an action row.
   Desktop puts the vote control in its own column; phones move it into the action row. */
.post { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "vote main" "vote acts"; padding: 10px 14px 4px 2px; }
.post:hover { border-color: var(--line-2); }
.post.removed { background: var(--faded); }
.post.removed .ptitle a { color: var(--ink-3); }
.post > .vote { grid-area: vote; }
.post-main { grid-area: main; min-width: 0; }
/* A link's thumbnail (app.enrich.Thumbnails), beside the title and summary. */
.post.has-thumb { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "vote main thumb" "vote acts thumb"; }
.pthumb { grid-area: thumb; align-self: start; width: 112px; aspect-ratio: 16 / 10; margin: 3px 0 6px 14px; border-radius: var(--r-sm); overflow: hidden; background: var(--sunk); }
.pthumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post.detail .pthumb { width: 160px; }
/* On a mixed feed, the channel's signature color as a thin stripe down the card's left edge. */
.post.striped { box-shadow: inset 3px 0 0 var(--mark); }
.pacts { grid-area: acts; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 4px 0 0 -8px; }
.pmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 12px; color: var(--ink-3); }
.pmeta a { color: inherit; text-decoration: none; }
.pmeta a:hover { color: var(--ink); text-decoration: underline; }
.pmeta .handle, .pmeta .ctag { color: var(--ink-2); }
.pmeta .ctag { color: var(--ink); }
.ptitle { font-size: 16px; font-weight: 650; line-height: 1.3; letter-spacing: -0.1px; margin: 3px 0 0; overflow-wrap: anywhere; }
.ptitle > a { text-decoration: none; }
.ptitle > a:hover { text-decoration: underline; }
.ptitle > a:visited { color: var(--visited); }
.ptitle .chip { margin-left: 4px; }
.psum { margin: 3px 0 0; font-size: 13px; color: var(--ink-2); max-width: 72ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.post.detail { padding-top: 14px; padding-bottom: 8px; margin: 0 0 12px; }
.post.detail .ptitle { font-size: 21px; letter-spacing: -0.3px; }
.post.detail .psum { display: block; -webkit-line-clamp: unset; overflow: visible; font-size: 14px; margin-top: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.psum.md, .post.detail .psum.md { white-space: normal; }  /* the markup's own line breaks aren't text */
.psum.md > :first-child { margin-top: 0; }
.psum.md p, .psum.md ul, .psum.md ol, .psum.md blockquote, .psum.md pre { margin: 0 0 10px; }
.psum.md :is(h2, h3, h4, h5, h6) { margin: 16px 0 6px; font-size: 15px; font-weight: 700; color: var(--ink); }
.psum.md :is(ul, ol) { padding-left: 22px; }
.psum.md li + li { margin-top: 3px; }
.psum.md a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.psum.md blockquote { padding-left: 12px; border-left: 3px solid var(--line); color: var(--ink-2); }
/* Video cards (Markdown.videoCards): a play button that loads the video site's player only when clicked (ui.js). */
.video-card { margin: 0 0 12px; max-width: 36rem; }
.video-card .video-play { flex-direction: column; gap: 10px; width: 100%; height: auto; aspect-ratio: 16 / 9; padding: 16px; border: 0; border-radius: var(--r-sm); white-space: normal; text-align: center; font-weight: 400; background: var(--hero); border-color: var(--hero); color: var(--hero-ink); }
.video-card .video-play:hover { background: var(--hero-hover); color: var(--hero-ink); }
.video-icon { position: relative; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); flex: none; }
.video-icon::after { content: ""; position: absolute; left: 22px; top: 17px; border-left: 18px solid var(--on-accent); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.video-card .video-play:hover .video-icon { background: var(--accent-hover); }
.video-text { display: flex; flex-direction: column; gap: 4px; max-width: 28rem; }
.video-title { font-size: 15px; font-weight: 700; line-height: 1.3; }
.video-site { font-size: 12px; color: var(--hero-2); }
.video-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-sm); background: #000; }
.video-note { margin: 4px 0 0; font-size: 12px; color: var(--ink-3); }
.psum.md .video-note a { color: var(--ink-3); }
li > .video-card { margin: 6px 0; }

/* Two or more together: one slim line each until played, then that one opens into the player. */
.video-list { display: grid; gap: 6px; max-width: 36rem; margin: 0 0 12px; }
ul.video-list, ol.video-list { list-style: none; padding-left: 0; }
.psum.md .video-list li + li { margin-top: 0; }
.video-list .video-card { margin: 0; }
.video-list .video-card .video-play { flex-direction: row; justify-content: flex-start; aspect-ratio: auto; min-height: 48px; padding: 8px 12px; gap: 12px; text-align: left; }
.video-list .video-icon { width: 32px; height: 32px; }
.video-list .video-icon::after { left: 12px; top: 9px; border-left-width: 11px; border-top-width: 7px; border-bottom-width: 7px; }
.video-list .video-text { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; max-width: none; }
.video-list .video-title { font-size: 14px; }
.video-list .video-card:not(.playing) .video-note { display: none; }
.psum.md code { font-size: 12.5px; background: var(--sunk); padding: 1px 4px; border-radius: 4px; }
.psum.md pre { overflow-x: auto; background: var(--sunk); padding: 8px 10px; border-radius: 6px; }
.psum.md pre code { background: none; padding: 0; }
.psum.md hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.post.detail .plead { margin: 8px 0 0; font-size: 15px; font-weight: 600; color: var(--ink); max-width: 72ch; overflow-wrap: anywhere; }
.post.detail .generated-section.hero { margin: 10px 0 4px; }
.draft-preview .feed-line { margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* The draft preview's phone check (sections.js): a hidden 360px copy of each section, a note on one that
   scrolls sideways or shows nothing, and "Phone width", which draws the preview at 390px. */
.preview-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.preview-head .section-h { margin: 0; }
.draft-preview { margin-bottom: 12px; }
.draft-preview .preview-head { margin-bottom: 10px; }
.generated-section-probe { position: absolute; left: -10000px; top: 0; width: 360px; height: 900px; border: 0; visibility: hidden; }
.section-check { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 0; padding: 8px 12px; border: 1px solid var(--warn-line); border-radius: var(--r-sm); background: var(--warn-soft); color: var(--warn); font-size: 13px; font-weight: 600; }
.section-check form { margin: 0; }
[data-phone-toggle][aria-pressed=true] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.draft-preview.phone > .post, .draft-preview.phone > .generated-section, .draft-preview.phone > .feed-line { max-width: 390px; margin-left: auto; margin-right: auto; }
.act { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border: 0; border-radius: 6px; background: none; color: var(--ink-3); font: 600 12px/1 var(--font); cursor: pointer; text-decoration: none; white-space: nowrap; }
.act:hover { background: var(--sunk); color: var(--ink); text-decoration: none; }
.act[aria-pressed=true] { background: var(--sunk); color: var(--ink); }
.act .i { width: 15px; height: 15px; }
form.flags { display: inline-flex; gap: 2px; margin: 0; }
.pacts > .menu.more { margin-left: auto; }
.pacts form { margin: 0; }

/* The vote control: up, score, down */
.vote { display: flex; flex-direction: column; align-items: center; margin: 0; }
.vote button, .vote a { display: grid; place-items: center; width: 30px; height: 26px; padding: 0; margin: 0; border: 0; border-radius: 6px; background: none; color: var(--quiet-icon); cursor: pointer; text-decoration: none; }
.vote button:hover, .vote a:hover { background: var(--sunk); color: var(--ink); }
.vote .up.on { color: var(--accent-ink); }
.vote .down.on { color: var(--ink); }
.vote .score { font-size: 13px; font-weight: 800; line-height: 1.2; min-width: 2ch; text-align: center; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.vote .score.up { color: var(--accent-ink); }

/* Channel header */
.chead { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; margin: 0 0 12px; }
.chead h1 { font-size: 24px; margin: 0; letter-spacing: -0.4px; }
.chead .meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.chead-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.chead .blurb { grid-column: 2 / -1; margin: 0; color: var(--ink-2); max-width: 68ch; }
form.join { display: inline-flex; margin: 0; }
.btn.joined .will { display: none; }
.btn.joined:hover { border-color: var(--danger-line); color: var(--danger); }
.btn.joined:hover .is, .btn.joined:hover .i { display: none; }
.btn.joined:hover .will { display: inline; }
.mark.draft { background: var(--surface); color: var(--ink-3); border: 1px dashed var(--line-2); }
dl.facts { font-size: 13px; margin: 0; }

/* Directory cards */
.cgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.ccard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; align-content: start; margin: 0; }
.ccard h3 { font-size: 16px; font-weight: 800; letter-spacing: -0.2px; margin: 0; }
.ccard h3 a { text-decoration: none; }
.ccard h3 a:hover { text-decoration: underline; }
.ccard .blurb { grid-column: 1 / -1; margin: 0; color: var(--ink-2); font-size: 13px; }
.ccard .wide { grid-column: 1 / -1; }
.ccard .foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); }
.ccard .foot > :nth-child(2) { margin-left: auto; }
.ccard.new { border-style: dashed; background: transparent; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-decoration: none; }
.ccard.new:hover { border-color: var(--ink-3); }

/* Signed-out intro */
.intro { background: var(--hero); color: var(--hero-ink); border-radius: var(--r); padding: 18px; margin: 0 0 14px; }
.intro h1 { color: #fff; font-size: 22px; font-weight: 900; margin: 0 0 6px; }
.intro h1 span { color: var(--accent); }
.intro p { color: var(--hero-2); max-width: 62ch; }
.intro .actions { margin: 0; color: var(--hero-2); font-size: 13px; }
.home-h { margin: 0; }

/* Comments: nested <details>; the header folds the thread */
.panel.comments > .panel-b { padding: 12px 16px 6px; }
details.comment { margin: 0 0 6px; }
details.comment > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; color: var(--ink-3); padding: 3px 0; font-weight: 400; }
details.comment > summary::-webkit-details-marker { display: none; }
details.comment > summary a { color: inherit; text-decoration: none; }
details.comment > summary .handle { color: var(--ink); }
details.comment > summary .folded { display: none; }
details.comment:not([open]) > summary .folded { display: inline; }
.comment-in { margin-left: 10px; padding-left: 18px; border-left: 2px solid var(--line); }
.comment-in:hover { border-left-color: var(--line-2); }
.comment-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; max-width: var(--text-width); margin: 0 0 2px; }
.comment-body.deleted { color: var(--ink-3); font-style: italic; }
details.reply { margin: 0 0 6px; }
details.reply > summary { display: inline-block; list-style: none; font-size: 12px; color: var(--ink-3); font-weight: 600; padding: 2px 0; }
details.reply > summary::-webkit-details-marker { display: none; }
details.reply > summary:hover { color: var(--ink); }
details.reply form { margin: 6px 0 0; }
.avatar.sm { width: 20px; height: 20px; font-size: 11px; background: var(--avatar-soft); color: var(--ink); }
.avatar.bot { border-radius: 6px; background: var(--tile); color: var(--accent); }
.avatar .i { width: 70%; height: 70%; vertical-align: 0; }
.links .avatar { flex: none; }

@media (max-width: 620px) {
    .flash-row { padding: 10px 10px 0; }
    .post { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "main main" "vote acts"; padding: 10px 12px 4px; }
    .post.has-thumb { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "main main thumb" "vote acts acts"; }
    .pthumb, .post.detail .pthumb { width: 84px; margin-left: 10px; }
    .post > .vote { flex-direction: row; align-self: center; border: 1px solid var(--line); border-radius: 99px; margin-top: 4px; }
    .post > .vote button, .post > .vote a { width: 28px; border-radius: 99px; }
    .pacts { margin-left: 4px; }
    .post form.flags, .act .wide { display: none; }
    .ptitle { font-size: 15px; }
    .post.detail .ptitle { font-size: 19px; }
    .chead { grid-template-columns: auto minmax(0, 1fr); padding: 14px; }
    .chead h1 { font-size: 20px; }
    .chead-acts, .chead .blurb { grid-column: 1 / -1; }
    .cgrid { grid-template-columns: minmax(0, 1fr); }
    .comment-in { margin-left: 6px; padding-left: 10px; }
}
@media (min-width: 621px) {
    .pacts .menu.more .pop form:first-child { display: none; }   /* meh and off-topic are in the row itself */
}

/* Slow runs: the progress panel (views/ui/_task.jte) and the top bar's pill (views/ui/_running.jte) */
.task { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: grid; gap: 12px; margin: 0 0 12px; }
.task > * { margin: 0; }
.task-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.task-h b { font-size: 15px; }
.task-clock { margin-left: auto; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
ol.stages { list-style: none; padding: 0; display: grid; gap: 8px; }
ol.stages > li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; margin: 0; font-size: 13px; color: var(--ink-3); }
ol.stages .dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; }
ol.stages .dot .i { width: 11px; height: 11px; vertical-align: 0; }
ol.stages > li.done { color: var(--ink-2); }
ol.stages > li.done .dot { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
ol.stages > li.now { color: var(--ink); font-weight: 700; }
ol.stages > li.now .dot { border-color: var(--accent-2); border-right-color: transparent; animation: spin 0.9s linear infinite; }
ol.stages > li.fail .dot { border-color: var(--danger); background: var(--danger-soft); }
ol.stages .n { font-weight: 400; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.activity { font: 12px/1.5 var(--mono); color: var(--ink-2); background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; display: grid; gap: 2px; }
.activity span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity span:last-child { color: var(--ink); }
.busy-pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--sunk); color: var(--ink); font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; max-width: 280px; }
.busy-pill:hover { border-color: var(--line-2); text-decoration: none; color: var(--ink); }
.busy-pill .txt { overflow: hidden; text-overflow: ellipsis; }
.busy-pill .spin { margin: 0; width: 12px; height: 12px; }
.busy-pill .elapsed, .busy-pill .waiting { color: var(--ink-3); font-weight: 400; }
.busy-pill.ready { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }
@media (prefers-reduced-motion: reduce) { ol.stages > li.now .dot { animation-duration: 2.4s; } }
details.raw-error { margin: -4px 0 12px; }
details.raw-error pre { font-size: 12px; max-height: 12rem; overflow: auto; margin: 6px 0 0; }
/* A request that failed (public/js/ui.js puts this where the htmx target or busy form was). */
.request-error { margin: 8px 0; }

/* ---- Page styles that predate the components. Same tokens; they go as pages move over. ---- */

.lead { color: var(--ink-2); max-width: var(--text-width); }
.details, .details a { font-size: 12px; color: var(--ink-3); }
.details a { text-decoration: none; }
.details a:hover { text-decoration: underline; color: var(--ink); }
.details .details { font-size: inherit; }
.details button.link { color: var(--ink-3); text-decoration: none; }
.details button.link:hover { color: var(--ink); text-decoration: underline; }
.details button.link.on { color: var(--accent-ink); }
.empty { color: var(--ink-3); }
form.inline, form.flags { display: inline; margin: 0; }
form.inline input:not([type=hidden], [type=checkbox], [type=radio]) { display: inline-block; width: 5rem; height: 28px; margin: 0 4px 0 0; padding: 0 6px; vertical-align: middle; }
form.inline :where(button):not(.link) { height: 26px; padding: 0 9px; font-size: 12px; }

/* Badges and labels: the old names for chips */
.badge, .label { display: inline-flex; align-items: center; height: 18px; padding: 0 5px; border-radius: 5px; font-size: 11px; font-weight: 700; line-height: 1; vertical-align: 1px; border: 1px solid var(--line-2); color: var(--ink-2); background: var(--surface); white-space: nowrap; text-transform: lowercase; }
.badge.agent { background: var(--sunk); color: var(--ink); }
.badge.admin { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.badge.banned, .label.removed { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }
.label.wildcard { background: var(--accent); border-color: var(--accent-2); color: var(--on-accent); }
.label.draft { border-style: dashed; color: var(--ink-3); }
h1 .badge, h2 .badge, h1 .label, h2 .label { vertical-align: 3px; }

/* Messages from the account pages */
.flash { max-width: var(--text-width); }

/* A link's domain beside its title */
.domain { font-size: 12px; font-weight: 400; color: var(--ink-3); }

/* The add-source form shows only the fieldset of the chosen kind (browsers without :has() show all). */
form.source-form:has(option[value=RSS]:checked) fieldset:not(.kind-RSS),
form.source-form:has(option[value=HN]:checked) fieldset:not(.kind-HN),
form.source-form:has(option[value=REDDIT]:checked) fieldset:not(.kind-REDDIT) { display: none; }
/* Channel settings: the dark-mode section colors show only while their box is ticked. */
form:has(input[name=dark]:not(:checked)) .colors-dark { display: none; }

.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }
.htmx-request.working.htmx-indicator { display: block; }

/* Channel setup: rounds, dropped sources. A round's sample articles sit beside its sources on wide screens. */
.round { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem); gap: 0 24px; align-items: start; }
.round > aside { border-left: 1px solid var(--line); padding-left: 14px; }
blockquote.description { white-space: pre-line; color: var(--ink-2); }
details.dropped { margin: 8px 0; font-size: 13px; }
details.dropped > summary { display: inline; list-style: none; color: var(--ink-3); text-decoration: underline; }
details.dropped > summary::-webkit-details-marker { display: none; }
details.dropped[open] > summary { display: block; margin-bottom: 4px; }
details.dropped li { margin: 3px 0; overflow-wrap: anywhere; }

/* Seed labeling's thumbs (the list itself is in the phase 4 section) */
form.thumbs { display: flex; gap: 4px; flex-shrink: 0; margin: 0; }
form.thumbs button { width: 32px; height: 30px; padding: 0; font-size: 16px; line-height: 1; background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r-sm); filter: grayscale(1); opacity: 0.7; }
form.thumbs button:hover, form.thumbs button.on { filter: none; opacity: 1; background: var(--surface); color: var(--ink); }
form.thumbs button.up.on { border-color: var(--accent-ink); background: var(--accent-soft); }
form.thumbs button.down.on { border-color: var(--ink-2); }


@media (max-width: 800px) {
    .round { grid-template-columns: minmax(0, 1fr); }
    .round > aside { border-left: 0; padding-left: 0; }
}
@media (max-width: 620px) {
    :is(input:not([type=checkbox], [type=radio], [type=hidden]), select, textarea) { max-width: none; }
    select { width: 100%; }
    dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
    dd { margin-bottom: 6px; }
}

/* ---- Phase 4: manage area, setup, accounts ---- */

/* Read by screen readers, not shown */
.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; }
.code, .config { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
.config { color: var(--ink-3); }
.actions.center { justify-content: center; }
.toolbar > p { margin: 0; max-width: var(--text-width); }
.toolbar form, .toolbar .actions { margin: 0; }
:is(button, .btn).wide { width: 100%; height: 38px; margin-top: 4px; }
.avatar.lg { width: 44px; height: 44px; font-size: 19px; }
.avatar.lg.bot { border-radius: 9px; }
ul.plain-list { padding-left: 1.2em; margin: 0 0 12px; }
.panel-b > .section-h:first-child { margin-top: 0; }
details.panel.disclosure > summary { padding: 12px 14px; }
details.panel.disclosure[open] > summary { padding-bottom: 0; }

/* Manage header: the channel's mark and name, a way back to it, then the tabs (views/ui/_manage_head.jte) */
.mhead { margin-bottom: 10px; }
.mhead h1 { font-size: 20px; min-width: 0; overflow-wrap: anywhere; }
.tab .count { margin-left: 2px; }

/* Rows in a table card: a two-line name cell, an actions cell, dimmed dropped rows. The card lets an
   actions menu hang out of it, so its header row rounds its own corners. */
.table-card:has(details.menu) { overflow: visible; }
.table-card thead th:first-child { border-top-left-radius: calc(var(--r) - 1px); }
.table-card thead th:last-child { border-top-right-radius: calc(var(--r) - 1px); }
.table-card td.src a { text-decoration: none; }
.table-card td.src a:hover b { text-decoration: underline; }
.table-card td.src b { display: block; }
.table-card td.src .config { display: block; max-width: 360px; }
.table-card tr.dropped td { color: var(--ink-3); }
/* td.act holds a row's actions; undo the post card's .act button look on the cell itself */
.table-card td.act { display: table-cell; width: 1%; height: auto; padding: 10px 12px; border-radius: 0; background: none; color: inherit; font: inherit; text-align: right; white-space: nowrap; cursor: auto; }
.table-card td.act:hover { background: none; }
.table-card td.act > form { display: inline-flex; margin: 0 0 0 4px; }
/* An inline confirm in a row's actions: the summary is the button, and opening it shows what happens and the real one. */
details.confirm { display: inline-block; margin: 0 0 0 4px; text-align: left; }
details.confirm > summary { list-style: none; color: var(--ink); font-weight: 600; }
details.confirm > summary::-webkit-details-marker { display: none; }
details.confirm[open] > summary { background: var(--sunk); }
details.confirm > form { display: block; max-width: 260px; margin: 8px 0 0; white-space: normal; }
details.confirm > form p { margin: 0 0 8px; }
.table-card td.act .pop { text-align: left; }
#add-source { scroll-margin-top: 72px; }

/* Admin: the invite tree, indented by depth */
.table-card td.account { padding-left: calc(12px + var(--d, 0) * 1.4em); }
.table-card td.account .chip { margin-left: 4px; }
.table-card tr.banned td.account a { color: var(--ink-3); }
.depth-1 { --d: 1; } .depth-2 { --d: 2; } .depth-3 { --d: 3; } .depth-4 { --d: 4; }
.depth-5 { --d: 5; } .depth-6 { --d: 6; } .depth-7 { --d: 7; } .depth-8 { --d: 8; }

/* A read-only field with a Copy button (public/js/ui.js handles [data-copy]) */
.copy { display: flex; gap: 6px; align-items: center; max-width: 34rem; }
.copy input { margin: 0; height: 32px; font-family: var(--mono); font-size: 12.5px; }
.copy button { flex: none; }
.table-card td.link-cell { width: 60%; }

/* A row of counts: "12 labeled so far · 23 waiting" */
.stat-row { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 12px; font-size: 13px; color: var(--ink-3); }
.stat-row strong { color: var(--ink); font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; margin-right: 2px; }

/* Label stories: a card per story, thumbs first, styled like post cards */
ol.review { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
ol.review > li { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
ol.review > li:hover { border-color: var(--line-2); }
ol.review > li.done { background: var(--faded); }
ol.review > li.done .review-body { opacity: 0.65; }
ol.review .review-body { min-width: 0; flex: 1; }
ol.review .ptitle { font-size: 15px; }
ol.review .pmeta .chip { margin-left: 2px; }

/* Bot approvals: one panel per bot */
.bot-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 0; }
.bot-head h2 { font-size: 16px; margin: 0; overflow-wrap: anywhere; }
.bot-head h2 a { text-decoration: none; }
.bot-head h2 a:hover { text-decoration: underline; }
.bot-head h2 .chip { margin-left: 4px; }
.bot-head > .chip { align-self: flex-start; margin-top: 4px; }
.bot-head .avatar.bot { width: 36px; height: 36px; border-radius: 8px; }
.bot-request .section-h { margin: 14px 0 6px; }
pre.bot-prompt { max-height: 22rem; overflow: auto; margin: 0 0 12px; font-size: 12.5px; }
.bot-request form.actions { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }

/* Setup: the round list, a round's samples and source checklist, and the preview's picks */
.rounds { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 12px; }
.round-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); font-size: 13px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
a.round-chip:hover { border-color: var(--line-2); color: var(--ink); }
.round-chip[aria-current] { border-color: var(--ink); color: var(--ink); }
.round-chip .details { font-weight: 400; }
.round-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 6px; }
.round-h .details { font-weight: 400; }
details.used-prompt { margin: 0 0 12px; }
details.used-prompt > summary { font-weight: 400; }
.round > section, .round > aside { min-width: 0; }
ol.samples { list-style: none; padding: 0; margin: 0 0 12px; }
ol.samples > li { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
ol.samples > li:last-child { border-bottom: 0; }
.sample-title { font-weight: 650; text-decoration: none; }
.sample-title:hover { text-decoration: underline; }
.sample-title:visited { color: var(--visited); }
ul.picklist { list-style: none; padding: 0; margin: 0 0 8px; }
ul.picklist > li { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
ul.picklist > li:last-child { border-bottom: 0; }
ul.picklist > li.excluded .pick-body { opacity: 0.55; }
ul.picklist .pick-body { min-width: 0; overflow-wrap: anywhere; }
ul.picklist .pick-body > strong { display: block; }
ul.picklist form.include { margin: 0; }
ul.picklist form.include input[type=checkbox] { margin: 2px 0 0; }
ul.picklist .own { width: 15px; flex: none; text-align: center; color: var(--ink-3); }
.topic-tally { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.tally-bar { display: inline-flex; flex: none; width: 56px; height: 6px; border-radius: 3px; overflow: hidden; background: var(--sunk); }
.tally-bar .on { background: var(--accent); }
.tally-bar .unsure { background: var(--warn-line); }
.tally-bar .off { background: var(--line-2); }
ol.samples > li.off-topic .sample-title, ul.headlines > li.off-topic a { color: var(--ink-3); font-weight: 500; }
ol.samples .chip, ul.headlines .chip { margin-left: 4px; }
/* A finished round's one decision, above it (views/channels/_round_next.jte): "Looks good?" and Next beside "Not quite right?",
   a note and the button that runs the next round with it. Stacked on phones. A New chip marks what a refinement found. */
.decide .panel-b { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: 14px 24px; padding: 14px; }
.decide .good { border-right: 1px solid var(--line); padding-right: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.decide .good p, .decide .fix p, .decide form { margin: 0; }
.decide .fix label { font-size: 14px; }
.decide .fix textarea { min-height: 0; }
.decide .fix .actions { margin: 8px 0 6px; }
.decide .fix .alt { margin: 0; gap: 6px; }
@media (max-width: 700px) {
    .decide .panel-b { grid-template-columns: minmax(0, 1fr); }
    .decide .good { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
}
.chip.new { background: var(--accent); border-color: var(--accent-2); color: var(--on-accent); }
/* What a round changed in the prompt from the founder's note, with the new wording as a word diff. */
.changed { max-width: none; }
.changed b { display: block; margin-bottom: 2px; }
.changed details { margin: 6px 0 0; }
.changed details > summary { cursor: pointer; font-size: 12px; color: var(--ink-3); }
.word-diff { white-space: pre-line; overflow-wrap: anywhere; font-size: 13px; line-height: 1.55; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; margin: 6px 0 0; color: var(--ink-2); }
.word-diff ins { text-decoration: none; background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 -1px 0 var(--accent-line); }
.word-diff del { color: var(--danger); background: var(--danger-soft); }
/* Settings, Prompt: "Change the prompt for me" and the proposed prompt as a diff. */
.prompt-change { display: grid; gap: 6px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.prompt-change label { font-weight: 600; }
.prompt-proposal { margin-top: 8px; padding: 12px; border: 1px solid var(--accent-line); border-radius: var(--r-sm); background: var(--accent-soft); }
.prompt-proposal h3 { margin: 0 0 4px; font-size: 14px; }
.prompt-proposal .word-diff { background: var(--surface); }
.prompt-proposal .actions { margin-top: 10px; }
.center-form { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0 0 8px; text-align: center; }
ol.preview-feed { list-style: none; padding: 0; counter-reset: pick; }
ol.preview-feed > li.pick { counter-increment: pick; display: grid; grid-template-columns: 36px minmax(0, 1fr); margin: 0; padding: 10px 14px 10px 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
ol.preview-feed > li.pick:hover { border-color: var(--line-2); }
.pick-n::before { content: counter(pick); display: block; padding-top: 1px; text-align: center; font-size: 13px; font-weight: 800; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pick-main { min-width: 0; }
li.pick.skipped { background: var(--faded); }
li.pick.skipped .ptitle, li.pick.skipped .ptitle a { color: var(--ink-3); }
li.pick .pmeta strong { color: var(--ink-2); font-weight: 600; }
li.pick .why { margin: 4px 0 0; }
details.held-back { margin-top: 16px; }
ul.held-list { list-style: none; padding: 0; margin: 10px 0 0; }
ul.held-list > li { margin: 0; padding: 10px 0; border-top: 1px solid var(--line); }
ul.held-list .ptitle { font-size: 15px; }
ul.held-list .ptitle a, ul.held-list .ptitle { color: var(--ink-2); }
ul.held-list .why, ol.review .why { margin: 4px 0 0; }

/* Profile: a header like a channel's, tabs, and lists of comments */
.profile-head h1 .chip { margin-left: 4px; vertical-align: 4px; }
.profile-head .meta a { color: inherit; }
.rows { list-style: none; padding: 0; margin: 0; }
.rows > li { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.rows > li:last-child { border-bottom: 0; }
.comment-body.clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin: 4px 0 0; }
.ccard .avatar.lg { width: 40px; height: 40px; }

/* Log in, join and first-run setup: a centered card with what the site is beside it */
.auth { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 32px; max-width: 900px; margin: 12px auto 0; align-items: start; }
.auth-card { margin: 0; }
.auth-card h1 { margin: 0 0 14px; }
.auth-card form { margin: 0; }
.auth-card :is(input, select, textarea) { max-width: none; }
.auth-card .flash { margin-bottom: 12px; }
.auth-about { color: var(--ink-2); padding-top: 6px; max-width: 34rem; }
.auth-about h2 { font-size: 15px; margin: 0 0 6px; color: var(--ink); }
.auth-about p + h2 { margin-top: 20px; }

@media (max-width: 800px) {
    .round > aside { border-top: 1px solid var(--line); padding-top: 12px; }
    .auth { grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 440px; margin-top: 0; }
}
@media (max-width: 620px) {
    .mhead h1 { font-size: 18px; }
    .mhead + .tabs .tab { padding-left: 6px; padding-right: 6px; }
    .mhead + .tabs .tab > .i, .mhead + .tabs .tab > .count.quiet { display: none; }   /* so all five tabs fit */
    .table-card td.act { width: auto; padding: 0; text-align: left; }
    .table-card td.account { padding-left: calc(var(--d, 0) * 0.9em); }
    .table-card td.link-cell { width: auto; }
    .copy { max-width: none; }
    ol.review > li { padding: 10px 12px; gap: 10px; }
    ol.preview-feed > li.pick { grid-template-columns: 28px minmax(0, 1fr); padding: 10px 12px 10px 2px; }
    .bot-head { flex-wrap: wrap; padding: 12px 12px 0; }
    .rows > li { padding: 10px 12px; }
}

/* ---- Phase 3: composer, agent drafts, bots ---- */

/* Shared bits */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a.go { font-weight: 700; white-space: nowrap; }
.panel-h .chip { text-transform: none; letter-spacing: 0; }
.avatar.lg { width: 40px; height: 40px; font-size: 18px; }
.avatar.bot.lg { border-radius: 9px; }
.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.prose { white-space: pre-line; overflow-wrap: anywhere; max-width: var(--text-width); }
ul.rules { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: 13px; color: var(--ink-2); }
ul.rules li { margin: 0; }
.pagehead > .avatar { align-self: center; }

/* Composer: "Post to", then tabs, then the chosen tab's form. On the Link tab the discussion form is on the
   page too (.alt), shown when the URL's fragment is #discussion, as the New menu links it. */
.compose-to { margin: 0 0 6px; }
.compose-to-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.compose-to-row select { margin: 0; }
.compose-panel { margin: 0; }
.compose-panel.alt { display: none; }
.compose-panel.alt:target { display: block; }
.compose:has(.compose-panel.alt:target) .compose-panel.main { display: none; }
.compose:has(.compose-panel.alt:target) .compose-tabs .tab[aria-current=page] { color: var(--ink-3); border-bottom-color: transparent; }
.compose:has(.compose-panel.alt:target) .compose-tabs .to-discussion { color: var(--ink); border-bottom-color: var(--accent); }
.compose .actions .details { margin-left: 4px; }
/* The link's preview under Title (submit/_preview.jte): its share title and the thumbnail the post will have. */
.link-preview:empty { display: none; }
.link-preview { margin: 0 0 14px; }
.link-preview > p { margin: 0; }
.link-card { display: flex; gap: 14px; align-items: flex-start; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.link-card .pthumb { flex: none; width: 160px; margin: 0; }
.link-card-b { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.link-card-b strong { overflow-wrap: anywhere; }
#link-preview-busy { margin: -6px 0 10px; }
.htmx-request#link-preview-busy { display: block; }
.drafts { display: flex; flex-direction: column; gap: 8px; }
.drafts > .note { margin: 0; max-width: none; }
.draft-row .chip { margin-left: 4px; }
.draft-row .details { margin-top: 2px; }
.draft-row > .i { margin-top: 1px; }

/* An agent draft's page: the request, the status, the preview drawn as the post, revisions in the rail */
blockquote.draft-request { white-space: pre-line; overflow-wrap: anywhere; margin: 0 0 12px; max-width: var(--text-width); }
dl.answers { display: block; margin: 0 0 8px; font-size: 13px; }
dl.answers dt { font-weight: 700; margin-top: 8px; }
dl.answers dt:first-child { margin-top: 0; }
dl.answers dd { margin: 2px 0 0; color: var(--ink-2); overflow-wrap: anywhere; }
input[type=color] { width: 64px; height: 34px; padding: 2px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; }
input[type=color]:disabled { cursor: default; }
.swatches { display: flex; gap: 6px; margin: 0 0 8px; }
.swatches input[type=color] { width: 36px; height: 28px; }
.draft-preview { margin: 0 0 12px; }
.draft-preview > .section-h { margin-top: 4px; }
.draft-preview .vote > span:not(.score) { display: grid; place-items: center; width: 30px; height: 26px; color: var(--quieter-icon); }
.draft-preview .ptitle .chip { margin-left: 4px; }
.error:is(p, div) > p { margin: 0 0 8px; }
.error:is(p, div) > form.actions { margin: 0; color: var(--danger-ink); }
.panel.is-waiting { opacity: 0.6; }
ol.revs { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; }
ol.revs > li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 7px 0; margin: 0; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; }
ol.revs > li:last-child { border-bottom: 0; }
ol.revs > li.on { color: var(--ink); }
ol.revs .note-text { flex: 0 0 100%; font-weight: 400; font-size: 12px; color: var(--ink-3); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Bot and scheduled post setup: a page per step, its content in a panel */
.panel.step { margin: 0 0 12px; }
/* Turn on and the overview: each part of the setup in a line, with a link to its step */
ul.setup-summary { list-style: none; margin: 0 0 12px; padding: 0; }
ul.setup-summary > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 8px 0; margin: 0; border-bottom: 1px solid var(--line); font-size: 14px; }
ul.setup-summary > li > span { flex: 1 1 240px; }
.panel.step .panel-h { justify-content: flex-start; }
.panel.step .table-card { margin: 8px 0 12px; }
.table-card td.act form { margin: 0; }
.table-card td.act { text-align: right; white-space: nowrap; }
fieldset.checks { border: 0; padding: 0; margin: 4px 0 8px; background: none; }
fieldset.checks legend { padding: 0; margin: 0 0 4px; font-size: 13px; }
label.confirm { margin: 10px 0 0 !important; font-weight: 600 !important; }
.panel.step .prose.clamp { color: var(--ink-2); margin: 0 0 8px; }
details.edit-step { margin: 0; }
details.edit-step[open] > summary { margin-bottom: 10px; }
details.add-trigger { margin: 4px 0 0; }
details.add-trigger > summary { list-style: none; display: inline-flex; margin-left: -8px; }
details.add-trigger > summary::-webkit-details-marker { display: none; }
details.add-trigger[open] > summary { margin-bottom: 8px; }
form.trigger-form { border: 1px dashed var(--line-2); border-radius: var(--r); padding: 14px 14px 2px; }
form.trigger-form:has(select[name=kind] option[value=THRESHOLD]:not(:checked)) .only-threshold,
form.trigger-form:has(select[name=kind] option[value=SCHEDULE]:not(:checked)) .only-schedule,
form.trigger-form:has(select[name=kind] option[value=AT_TIME]:not(:checked)):has(select[name=kind] option[value=PLAN]:not(:checked)) .only-at-time { display: none; }
form.trigger-form fieldset.checks label.day { display: inline-block; margin: 4px 14px 4px 0 !important; }
.runs { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; }
.runs > .panel { margin: 0; }
.bot-run .run-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--ink-3); margin: 0 0 6px; }
.bot-run .run-h b { color: var(--ink); }
.bot-run h3 { margin: 6px 0 4px; }
ul.planned { margin: 4px 0 8px; padding-left: 18px; font-size: 14px; }
ul.planned li { margin: 2px 0; }
/* A part of a set-up bot or scheduled post (ui/_part): a titled card whose own buttons say what they change
   (Edit prompt, Edit schedule). Edit opens its form in place of the part's view (ui.js, data-edit); the form says
   what saving does in a .note.warn. A table row's settings open in the row below it (tr.edit-row). */
.panel.part { margin: 0 0 12px; }
.part-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px 0; }
.part-h h2 { margin: 0; font-size: 15px; }
.part-h .sp { flex: 1 1 0; }
.part-h form { margin: 0; }
.panel.part.editing { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.part .part-edit .actions { margin-top: 4px; }
.part dl { margin: 10px 0 0; font-size: 13px; }
.part .prose { margin: 0 0 4px; }
.part .prose.clamp { color: var(--ink-2); }
.part .quiet-h { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 14px 0 4px; }
.part .table-card { margin: 4px 0 0; }
tr.edit-row > td { background: var(--sunk); }
tr.edit-row .trigger-form { background: var(--surface); margin: 2px 0 4px; }
.table-card td .chip + .details, .table-card td > .details.sub { display: block; margin-top: 2px; }
.table-card .working.mini { display: inline-block; padding: 3px 8px; margin: 0; font-size: 12px; }
.table-card .working.mini::before { width: 10px; height: 10px; margin-right: 6px; }
/* A section heading with its action beside it: "Scheduled posts ... New scheduled post". */
.headrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 8px; }
.headrow h2 { margin: 0; }
.headrow .sp { flex: 1 1 0; }
/* Scheduled posts: the table keeps the schedule readable and a row's "Drafting it 0:42" on one line; a run's "More"
   keeps a long error inside its cell. Its "New scheduled post" form is a .panel.reveal (the Bots block below). */
.table-card td.when { min-width: 12rem; }
.table-card .working.mini { white-space: nowrap; }
.table-card details.task-note pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; max-height: 12rem; overflow: auto; margin: 6px 0 0; }
/* Bots: the lists' "Where, and when it acts" (each trigger's channel over its sentence) and last run (when over
   what it acted on); a lead line beside a step's button; and a "New …" button's form, shown when the button's link
   targets it (href="#id") or from the start while the list is empty (.open). Shared with Scheduled posts. */
.table-card td.where > :is(.ctag, .details, .line) { display: flex; }
.table-card td.where > .details { margin: 1px 0 6px; }
.table-card td.where > .details:last-child { margin-bottom: 0; }
.table-card td.last > .details { display: block; margin-top: 2px; }
.headrow > p { margin: 0; }
.panel.reveal:not(:target):not(.open) { display: none; }

/* The draft's suggested triggers: each in words, with a button that adds it. */
.suggested { margin: 8px 0 12px; }
.suggested ul { list-style: none; margin: 4px 0 0; padding: 0; }
.suggested li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.suggested li > span { flex: 1 1 240px; }
.suggested form { display: flex; gap: 8px; align-items: center; }
.run-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; max-width: var(--text-width); margin: 0 0 8px; }
details.run-error { font-size: 13px; margin: 0 0 8px; }
details.run-error p { margin: 4px 0 0; color: var(--ink-2); overflow-wrap: anywhere; }

@media (max-width: 620px) {
    .compose .panel-b.pad { padding: 12px; }
    .compose-to-row select { flex: 1 1 auto; width: auto; }
    .link-card .pthumb { width: 96px; }
    .pagehead > .avatar.lg { width: 32px; height: 32px; }
    form.trigger-form { padding: 12px 12px 2px; }
    .panel.step .table-card td:first-child { flex: 1 1 0; }
}

/* Manage, Skills */
.skill-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.skill-row .grow { min-width: 12rem; }
.skill-row .details { display: block; }
.try-row { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: 12px; }
.trial { margin-top: 12px; }
.trial .code { margin: 0 0 6px; }
pre.trial-body { max-height: 26rem; overflow: auto; font-size: 12px; margin: 0; }
textarea.code { font-size: 12.5px; }
ul.notes > li { padding-left: 0; padding-right: 0; }
ul.trials > li { margin: 0 0 6px; overflow-wrap: anywhere; }
ul.trials .code { margin: 0 4px; }
.pre-line { white-space: pre-line; }
ul.notes .prose { margin: 0 0 8px; }
ul.notes .actions { margin: 0; }
@media (max-width: 620px) {
    .try-row { grid-template-columns: minmax(0, 1fr); }
}

/* Skills, Try it: the agent's answer to a question, then the direct tool call tucked below it. */
.prose-md { max-width: var(--text-width); overflow-wrap: anywhere; }
.prose-md > :first-child { margin-top: 0; }
.prose-md p { margin: 0 0 8px; }
details.direct { margin-top: 14px; }
details.direct > summary { cursor: pointer; font-size: 13px; color: var(--ink-2); }
details.direct[open] > summary { margin-bottom: 8px; }

/* Skills, the plain page: what it's for, Try it with example questions, a card per data tool, and for an
   improvement, what changed (tools marked, the instructions as a line diff). */
.skill-head h1 { margin: 0; overflow-wrap: anywhere; }
.skill-head .section-h:first-child { margin-top: 0; }
.skill-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.skill-title .actions { margin: 0; }
.skill-desc { font-size: 15px; color: var(--ink-2); max-width: var(--text-width); margin: 8px 0; }
.examples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; }
.examples .btn.example { height: auto; min-height: 26px; padding: 4px 9px; white-space: normal; text-align: left; line-height: 1.3; font-weight: 500; }
.ask-form textarea { width: 100%; max-width: var(--field-width); }
.ask-form .actions { align-items: center; }
.htmx-request .htmx-indicator.details, .htmx-request.htmx-indicator.details { display: inline-flex; align-items: center; }
ul.tool-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 10px; }
.tool-card { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; min-width: 0; }
.tool-card.new { border-color: var(--accent-line); background: var(--accent-soft); }
.tool-card.changed { border-color: var(--warn-line); }
.tool-card.removed { border-style: dashed; color: var(--ink-3); }
.tool-card.removed b { text-decoration: line-through; }
.tool-top { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.tool-host { margin-left: auto; font: 11px var(--mono); color: var(--ink-3); overflow-wrap: anywhere; }
.tool-summary { margin: 6px 0; color: var(--ink-2); overflow-wrap: anywhere; }
.tool-inputs { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tool-inputs .details { margin-right: 2px; }
.tool-inputs .opt { font-weight: 400; color: var(--ink-3); }
details.tool-more { margin-top: 6px; }
details.tool-more > summary { cursor: pointer; font-size: 12px; color: var(--ink-3); }
details.tool-more .details { overflow-wrap: anywhere; }
details.instructions > summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }
.desc-change p { margin: 0 0 4px; padding: 4px 8px; border-radius: var(--r-sm); max-width: var(--text-width); }
.desc-change p.details { padding: 0; }
.desc-change .del, .diff-line.del { background: var(--danger-soft); color: var(--danger); }
.desc-change .del { text-decoration: line-through; }
.desc-change .add, .diff-line.add { background: var(--accent-soft); color: var(--accent-ink); }
.diff { font: 12.5px/1.5 var(--mono); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: auto; max-height: 36rem; }
.diff-line { display: flex; min-width: 0; }
.diff-mark { flex: none; width: 1.6em; text-align: center; user-select: none; }
.diff-text { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; padding-right: 8px; }
.diff-line.skip { color: var(--ink-3); background: var(--sunk); font-style: italic; }

/* Manage, Layouts: each layout drawn in the sandbox (the index, its page, a draft to review), its invented samples,
   and the requests behind a draft. A layout's text version is the same line for every layout, so it's hidden. */
.layout-card h2 { margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.layout-card .details { margin: 4px 0 0; }
.layout-preview .generated-section-fallback { display: none; }
.layout-preview .generated-section { margin: 8px 0 0; }
.samples { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 0 12px; }
details.layout-before { margin: 0 0 12px; }
details.layout-before > summary { cursor: pointer; font-size: 13px; color: var(--ink-2); }
ol.asks { margin: 0; padding-left: 1.3em; }
ol.asks > li { margin: 0 0 4px; }
.keep-layout { flex-wrap: wrap; gap: 6px; margin: 0; }
.keep-layout form { margin: 0; }

/* Channel widgets (ui/_widgets): live panels in the rail, each its title over a sandboxed frame that fills the panel,
   and when its data was looked up. On narrow screens widgets.js moves them above the feed, behind the toolbar's toggle.
   The same panel draws them in Manage → Widgets, at the rail's width. */
.widgets { display: flex; flex-direction: column; gap: 12px; }
.widgets[hidden], .widgets-toggle[hidden] { display: none; }
.widgets-toggle[aria-expanded=true] { background: var(--sunk); border-color: var(--ink-3); }
.panel.widget { overflow: hidden; }
.widget > .panel-h { padding-bottom: 8px; }
.widget .generated-section { margin: 0; }
.widget .generated-section-frame { border: 0; border-radius: 0; }
.widget .generated-section-fallback { display: none; }
.widget-foot { margin: 0; padding: 6px 14px 10px; font-size: 12px; color: var(--ink-3); }
.widgets-slot > .widgets { margin: 0 0 12px; }
.widget-preview .panel.widget, .widget-card .panel.widget { max-width: var(--rail); margin: 8px 0 0; }
.widget-compare { display: flex; flex-wrap: wrap; gap: 0 24px; align-items: flex-start; }
.widget-compare > .widget-preview { flex: 0 1 var(--rail); min-width: 0; }
/* The wizard's last steps: Review's "or ask for changes" under its Next, and Save's form beside the preview. */
form.wizard-or { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.widget-save { display: grid; grid-template-columns: minmax(0, 28rem) var(--rail); gap: 0 24px; align-items: start; }
@media (max-width: 760px) { .widget-save { grid-template-columns: minmax(0, 1fr); } }
/* Light / Dark over widget previews (widgets/_modes); the frames and panels below it follow the pick. */
.mode-preview > [data-mode-switch] { margin: 0 0 10px; }
.mode-preview > [data-mode-switch][hidden] { display: none; }
.widget-card h2 { margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.widget-card form { margin: 0; }
.widget-card p { margin: 6px 0 0; }

/* Manage, Sources, Find new sources: a found source's latest headlines */
ul.picklist > li > input[type=checkbox] { flex: none; margin: 2px 0 0; }
ul.picklist ul.headlines { margin: 4px 0 0; padding-left: 16px; }
ul.picklist ul.headlines > li { margin: 0; color: var(--ink-3); }
ul.picklist ul.headlines a { color: var(--ink-2); text-decoration: none; }
ul.picklist ul.headlines a:hover { text-decoration: underline; }

/* Label stories: which sources' stories to show */
.review-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; }
.review-filter form { margin: 0; }
.review-filter select { max-width: min(100%, 22rem); }