/* Components. Only tokens from theme.css; no raw values. See docs/UI.md. */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: var(--weight-normal) var(--text-md)/var(--leading) var(--font-body);
  color: var(--color-text);
  background: var(--color-page);
}
a { color: var(--color-link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; font-weight: var(--weight-strong); }
h1 { font-size: var(--text-xl); letter-spacing: -0.01em; }
h2 { font-size: var(--text-md); }
h3 { font-size: var(--text-md); }
code { font-family: var(--font-body); background: var(--color-bg-alt); padding: 0 var(--space-1); border-radius: var(--radius-small); user-select: all; }
.muted { color: var(--color-muted); }
.zero, .none { color: var(--color-faint); }
.seen { color: var(--color-faint); }
.text { white-space: pre-wrap; max-width: var(--text-measure); }
.text.raw { font-family: var(--font-mono); font-size: var(--text-sm); }
.inline { display: inline; }

/* layout */
.layout { display: grid; grid-template-columns: var(--nav-width) 1fr; min-height: 100vh; }
.main { padding: var(--space-5) var(--space-6); max-width: var(--content-max); min-width: 0; }

/* nav */
/* the work list's rail in a sidebar: dark, the same tokens as /work */
.nav { background: var(--color-nav-bg); color: var(--color-nav-text); padding: var(--space-4) 0 0; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.nav-brand { font-weight: var(--weight-strong); font-size: var(--text-lg); color: var(--color-on-accent); padding: 0 var(--space-4) var(--space-3); }
.nav a, .nav-off { display: block; margin: 1px var(--space-2); padding: 6px var(--space-2); border-radius: var(--radius); color: var(--color-nav-text); font-weight: var(--weight-medium); font-size: var(--text-sm); }
.nav a:hover { background: var(--color-nav-hover); color: var(--color-on-accent); text-decoration: none; }
.nav a.active { background: var(--color-nav-active); color: var(--color-on-accent); }
.nav-off { color: var(--color-nav-muted); cursor: default; }
.nav-group { margin: var(--space-4) var(--space-2) var(--space-1); padding: 0 var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-strong); color: var(--color-nav-muted); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.nav a.nav-indent, .nav .nav-off.nav-indent { padding-left: var(--space-4); }
.nav-gap { height: var(--space-5); }
.section-tabs { margin-top: calc(-1 * var(--space-2)); }
.nav .badge { margin-left: var(--space-1); }
.user-block { margin-top: auto; border-top: 1px solid var(--color-nav-hover); padding: var(--space-3) var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); }
.user-name { color: var(--color-nav-muted); }
.user-block a, .user-block button { color: var(--color-nav-text); background: transparent; border-color: transparent; box-shadow: none; }

/* page header */
.crumbs { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-1); }
.crumbs a { color: var(--color-muted); }
.header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); min-height: var(--control-height); flex-wrap: wrap; }
.header-meta { color: var(--color-muted); display: flex; gap: var(--space-2); align-items: center; font-size: var(--text-sm); }
.header-actions { margin-left: auto; display: flex; gap: var(--space-2); align-items: center; }

/* tabs */
.tabs { display: flex; gap: var(--space-4); border-bottom: var(--border); margin-bottom: var(--space-4); font-size: var(--text-sm); font-weight: var(--weight-medium); overflow-x: auto; }
.tabs a { color: var(--color-muted); padding: var(--space-2) 0; margin-bottom: -1px; border-bottom: var(--tab-underline) solid transparent; display: flex; gap: var(--space-1); align-items: baseline; }
.tabs a:hover { color: var(--color-text); text-decoration: none; }
.tabs a.active { color: var(--color-text); font-weight: var(--weight-medium); border-bottom-color: var(--color-accent); }
.tabs .count { color: var(--color-faint); font-weight: var(--weight-normal); }
.tabs .tab-off { color: var(--color-faint); padding: var(--space-2) 0; cursor: default; }

/* sections and cards */
.card { background: var(--color-bg); border: var(--border); border-radius: var(--radius-card); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); }
.card > h2 { font-size: var(--text-md); margin-bottom: var(--space-2); display: flex; gap: var(--space-2); align-items: baseline; }
.card > h2 .count { color: var(--color-faint); font-weight: var(--weight-normal); }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--column-min), 1fr)); gap: var(--space-4); }

/* facts: label and value pairs */
.facts { display: grid; grid-template-columns: var(--facts-key) 1fr; gap: var(--space-1) var(--space-4); margin: 0; }
.facts dt { color: var(--color-muted); font-size: var(--text-sm); padding-top: var(--space-1); display: flex; gap: var(--space-1); align-items: baseline; justify-content: space-between; }
.facts dd { margin: 0; padding-top: var(--space-1); overflow-wrap: anywhere; min-width: 0; }
.facts dd a.quiet { color: var(--color-text); }
.facts dd > * + *, .table td > * + * { margin-left: var(--space-2); }
.facts .group { font-size: var(--text-xs); color: var(--color-faint); }

/* stats */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--stat-min), 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.stat { background: var(--color-bg); border: var(--border); border-radius: var(--radius-card); padding: var(--space-3) var(--space-4); display: block; }
a.stat:hover { background: var(--color-bg-hover); text-decoration: none; }
.stat-value { font-size: var(--text-xl); font-weight: var(--weight-strong); }
.stat-label { color: var(--color-muted); font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* table: every cell on one line. The one flexible text column (.grow)
   takes the remaining width and truncates with an ellipsis, full text in
   its title; numbers, dates, badges and actions keep their natural width. */
.table { width: 100%; border-collapse: collapse; font-family: var(--font-data); table-layout: auto; }
.table th { text-align: left; font-weight: var(--weight-strong); color: var(--color-faint); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); border-bottom: var(--border); padding: var(--space-2) var(--space-3) var(--space-2) 0; white-space: nowrap; vertical-align: middle; }
.table th .help { text-transform: none; letter-spacing: 0; }
.table td { border-bottom: var(--border); padding: 7px var(--space-3) 7px 0; height: 40px; vertical-align: middle; white-space: nowrap; }
.table td.grow, .table th.grow { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Two flexible columns (a pair of stories) share the width. */
.table td.grow.half, .table th.grow.half { width: 50%; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table td.muted { color: var(--color-muted); }
.table td.zero { color: var(--color-faint); }
.table td.indent { padding-left: var(--space-4); }
.table tbody tr:hover td { background: var(--color-bg-hover); }
.table tr:last-child td { border-bottom: none; }
.table button, .table .button { font-size: var(--text-xs); padding: 0 10px; height: var(--row-button-height); box-shadow: none; }
.table form.inline { display: inline-block; vertical-align: middle; }

/* item table: fixed date column, one line titles */
.table.items { table-layout: fixed; }
.table.items col.date { width: var(--date-col); }
.table.items col.num { width: var(--num-col); }
.table.items col.sources { width: var(--sources-col); }
.table.items col.host { width: var(--host-col); }
.table.items col.kind { width: var(--kind-col); }
.table.items td { overflow: hidden; text-overflow: ellipsis; }

/* link list */
.links { list-style: none; margin: 0; padding: 0; }
.links li { padding: var(--space-1) 0; display: flex; gap: var(--space-2); align-items: center; }
.links .meta { color: var(--color-muted); }

/* badge */
.badge { display: inline-block; font-size: var(--text-xs); font-weight: var(--weight-medium); padding: 1px 7px; border: var(--border); border-radius: var(--radius-small); color: var(--color-muted); background: var(--color-bg-alt); white-space: nowrap; line-height: var(--leading); vertical-align: middle; }
.badge { border-color: transparent; }
.badge.strong { color: var(--color-text); border-color: var(--color-line); background: var(--color-bg); }
.badge.hue-grey, .badge { color: var(--hue-grey-fg); background: var(--hue-grey-bg); }
.badge.hue-blue { color: var(--hue-blue-fg); background: var(--hue-blue-bg); }
.badge.hue-teal { color: var(--hue-teal-fg); background: var(--hue-teal-bg); }
.badge.hue-violet { color: var(--hue-violet-fg); background: var(--hue-violet-bg); }
.badge.hue-amber, .badge.warn { color: var(--hue-amber-fg); background: var(--hue-amber-bg); }
.badge.hue-green, .badge.ok { color: var(--hue-green-fg); background: var(--hue-green-bg); }
.badge.hue-red, .badge.error { color: var(--hue-red-fg); background: var(--hue-red-bg); }

/* button */
/* buttons: primary (ink), secondary (the default: white with a line),
   quiet (no line), danger; one height (32, 28 in table rows); an icon
   before the label with .icon; disabled is faded and inert. */
.button, button { font: inherit; font-size: var(--text-sm); font-weight: var(--weight-strong); height: var(--button-height); padding: 0 14px; border: var(--border-strong); border-radius: var(--radius); background: var(--color-bg); color: var(--color-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1; white-space: nowrap; box-shadow: var(--shadow-faint); vertical-align: middle; }
.button:hover, button:hover { background: var(--color-bg-hover); border-color: var(--color-text); text-decoration: none; }
.button.primary, button.primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.button.primary:hover, button.primary:hover { background: var(--color-accent-hover); }
.button.ghost, button.ghost, .button.quiet, button.quiet { border-color: transparent; background: transparent; box-shadow: none; color: var(--color-muted); padding: 0 var(--space-2); }
.button.ghost:hover, button.ghost:hover, .button.quiet:hover, button.quiet:hover { color: var(--color-text); background: var(--color-bg-alt); border-color: transparent; }
.button.danger, button.danger { color: var(--color-danger); }
.button.danger:hover, button.danger:hover { border-color: var(--color-danger); background: var(--hue-red-bg); }
.button svg, button svg { width: 14px; height: 14px; flex: none; }
.button[aria-disabled=true], button:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.button:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* form */
/* A label column of at most --form-label (labels wrap), the fields beside
   it at full width; anything that is not a label or a field (a hint, an
   error, a row of checkboxes) sits under the field, never in the label
   column, so it can never squeeze the fields. A form inside a card (half
   a page, a side panel) puts labels above full width fields. */
.form { display: grid; grid-template-columns: minmax(0, var(--form-label)) minmax(0, var(--form-width)); gap: var(--space-3) var(--space-4); align-items: start; }
.form > :not(label) { grid-column: 2; min-width: 0; }
.card .form, .form.stacked { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.card .form > :not(label), .card .form > label, .form.stacked > :not(label), .form.stacked > label { grid-column: 1; }
.card .form label, .form.stacked label { padding-top: var(--space-2); }
.form label { color: var(--color-muted); font-size: var(--text-sm); font-weight: var(--weight-medium); padding-top: 9px; }
.login-form input[type=text], .login-form input[type=password], .form input[type=text], .form input[type=url], .form input[type=password], .form input[type=number], .form input[type=datetime-local], .form input[type=date], .form input[type=email], .followers-form input[type=number], .followers-form input[type=datetime-local], .form textarea, .form select, .filter input, .filter select {
  font: inherit; height: var(--control-height); padding: 0 var(--space-3); border: var(--border-strong); border-radius: var(--radius); width: 100%; background: var(--color-bg); color: var(--color-text); box-shadow: var(--shadow-faint);
}
.form textarea { min-height: var(--textarea-min); height: auto; padding: var(--space-2) var(--space-3); }
/* a page's own form sits on a white card like the rest */
.main > form.form { background: var(--color-bg); border: var(--border); border-radius: var(--radius-card); padding: var(--space-5); max-width: calc(var(--form-width) + 220px); }
select, .form select { appearance: none; -webkit-appearance: none; background: var(--color-bg) var(--chevron) no-repeat right 10px center; padding-right: 30px; cursor: pointer; }
input[type=checkbox], input[type=radio] { accent-color: var(--color-accent); width: 16px; height: 16px; vertical-align: middle; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--color-accent); }
.form-actions { display: flex; gap: var(--space-2); }
.errors { color: var(--color-error); background: var(--color-error-bg); border-radius: var(--radius); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.filter { display: flex; gap: var(--space-2); margin: var(--space-3) 0; align-items: center; flex-wrap: wrap; }
.filter input { width: var(--filter-width); }
.filter select { width: auto; }
.error-banner { color: var(--color-error); background: var(--color-error-bg); border-radius: var(--radius); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-4); }

/* history */
.history { font-size: var(--text-sm); }
.history .change { border-bottom: var(--border); padding: var(--space-2) 0; }
.history .change:last-child { border-bottom: none; }
.history .who { display: flex; gap: var(--space-2); align-items: center; }
.history .when { color: var(--color-muted); margin-left: auto; white-space: nowrap; }
.diff { width: 100%; border-collapse: collapse; margin-top: var(--space-1); }
.diff td { padding: 0 var(--space-3) 0 0; vertical-align: top; overflow-wrap: anywhere; }
.diff td.field { color: var(--color-muted); white-space: nowrap; width: 1%; }
.diff .old { background: var(--color-removed); }
.diff .new { background: var(--color-added); }

/* pagination and empty */
.pagination { margin-top: var(--space-2); display: flex; gap: var(--space-3); color: var(--color-muted); font-size: var(--text-sm); }
.empty { color: var(--color-faint); padding: var(--space-2) 0; }

/* chart: inline SVG, soft */
.chart { display: block; width: 100%; height: auto; }
.chart .bar { fill: var(--color-chart-1); }
.chart .bar.s2 { fill: var(--color-chart-2); }
.chart .bar.s3 { fill: var(--color-chart-3); }
.chart .bar.s4 { fill: var(--color-chart-4); }
.chart .axis { stroke: var(--color-line); }
.chart .grid { stroke: var(--color-chart-grid); }
.chart text { fill: var(--color-faint); font-size: var(--text-xs); font-family: var(--font-body); }
.chart-legend { display: flex; gap: var(--space-3); font-size: var(--text-xs); color: var(--color-muted); }
.chart-legend i { display: inline-block; width: var(--swatch); height: var(--swatch); margin-right: var(--space-1); border-radius: var(--radius-small); }
.chart-legend .s1 { background: var(--color-chart-1); }
.chart-legend .s2 { background: var(--color-chart-2); }
.chart-legend .s3 { background: var(--color-chart-3); }
.chart-legend .s4 { background: var(--color-chart-4); }
.chart-few { display: flex; gap: var(--space-5); }
.chart-few .stat-value { font-size: var(--text-lg); }

/* login: one centred card on the page (Rene, 8 October 2026) */
.login-page { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; margin: 0; padding: var(--space-4); box-sizing: border-box; background: var(--color-page); font-family: var(--font-body); }
.login-card { width: 100%; max-width: var(--login-width); background: var(--color-bg); border: var(--border); border-radius: 10px; padding: var(--space-6) var(--space-5); box-sizing: border-box; box-shadow: 0 1px 2px rgba(20, 21, 23, 0.04); }
.login-mark { font-size: var(--text-xl); font-weight: var(--weight-strong); letter-spacing: -0.01em; margin-bottom: var(--space-5); color: var(--color-text); }
.login-form { display: flex; flex-direction: column; gap: var(--space-2); }
.login-form label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-muted); margin-top: var(--space-2); }
.login-form input[type=text], .login-form input[type=password] { box-sizing: border-box; font-size: var(--text-lg); height: 44px; }
.login-password { position: relative; }
.login-password input { padding-right: 64px; }
.login-show { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--color-muted); font-size: var(--text-sm); padding: 4px 8px; cursor: pointer; }
.login-show:hover { color: var(--color-text); }
.login-submit { width: 100%; margin-top: var(--space-4); padding: 11px; font-size: var(--text-md); }
.login-error { background: var(--color-error-bg); color: var(--color-error); border-radius: 6px; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); margin-bottom: var(--space-2); }

/* favicon: 16px, centred on the text line, never taller than a row */
.favicon { width: var(--favicon); height: var(--favicon); vertical-align: middle; margin-right: var(--space-1); border-radius: var(--radius-small); object-fit: contain; }

.check { display: inline-flex; gap: var(--space-1); align-items: center; margin-right: var(--space-3); color: var(--color-text); }
.sub { font-size: var(--text-sm); color: var(--color-muted); font-weight: var(--weight-medium); margin: 0 0 var(--space-2); }
.spark { width: 1%; }
.chart.spark { width: auto; display: inline-block; vertical-align: middle; }
.note { border-bottom: var(--border); padding: var(--space-2) 0; }
.note .who { display: flex; gap: var(--space-2); align-items: center; font-size: var(--text-sm); }
.note-form { margin-top: var(--space-3); }

/* enrichment: a percentage and one dot per step, filled when met */
.enrich { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.enrich-pct { min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
.dots { display: inline-flex; gap: 3px; }
.dot { display: inline-block; width: var(--dot); height: var(--dot); border-radius: 50%; border: var(--border-strong); box-sizing: border-box; vertical-align: middle; }
.dot.on { background: var(--hue-green-fg); border-color: var(--hue-green-fg); }

.actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-3) 0; }

.header-actions form.inline { display: inline-flex; align-items: center; gap: var(--space-1); }
.header-actions button, .header-actions .button { white-space: nowrap; }
.text-form textarea { width: 100%; max-width: var(--text-measure); font: inherit; padding: var(--space-2); border: var(--border-strong); border-radius: var(--radius); box-sizing: border-box; }
.text-form p { margin: var(--space-2) 0; }

/* Label */
.label-story h2 { font-size: var(--text-lg); margin: var(--space-2) 0; }
.label-form { margin-top: var(--space-4); }
.label-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-3) 0; }
.label-row .reason { flex: 1; min-width: 16rem; padding: var(--space-2); border: var(--border-strong); border-radius: var(--radius); font: inherit; }
.choice { display: inline-flex; align-items: center; gap: var(--space-1); }
.chip { border: var(--border-strong); background: var(--color-bg); border-radius: var(--radius); padding: var(--space-1) var(--space-2); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.chip.primary-pick { background: var(--hue-blue-bg); color: var(--hue-blue-fg); border-color: var(--hue-blue-fg); font-weight: var(--weight-medium); }
.chip.secondary-pick { background: var(--hue-grey-bg); color: var(--hue-grey-fg); border-color: var(--hue-grey-fg); }
kbd { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); border: var(--border); border-radius: var(--radius-small); padding: 0 3px; }
.compare td:first-child { color: var(--color-muted); }
.help { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; padding: 0; border-radius: 50%; border: var(--border-strong); background: var(--color-bg); box-shadow: none; color: var(--color-muted); font: inherit; font-size: 10px; font-weight: var(--weight-medium); line-height: 1; cursor: pointer; margin-left: 2px; vertical-align: 1px; }
.help:hover, .help:focus, .help[aria-expanded=true] { color: var(--color-text); border-color: var(--color-text); outline: none; }

/* combobox (views.Combobox, static/combobox.js) */
.combo { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); min-width: 18rem; }
.form .combo { display: flex; width: 100%; }
.combo-input { font: inherit; padding: var(--space-1) var(--space-2); border: var(--border); border-radius: var(--radius); background: var(--color-bg); color: var(--color-text); box-shadow: var(--shadow-faint); flex: 1; min-width: 0; }
.combo.invalid .combo-input { border-color: var(--color-error); }
.combo-chosen { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-faint); }
.combo-chosen:empty { display: none; }
.combo-list { position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 20; margin: 0; padding: var(--space-1) 0; list-style: none; background: var(--color-bg); border: var(--border); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0, 0, 0, .08); max-height: 20rem; overflow-y: auto; }
.combo-option { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) var(--space-2); cursor: pointer; }
.combo-option.active, .combo-option:hover { background: var(--color-bg-alt); }
.combo-hint { color: var(--color-muted); font-size: var(--text-sm); white-space: nowrap; }
.combo-create { color: var(--color-muted); font-style: italic; }
.combo-empty { padding: var(--space-1) var(--space-2); color: var(--color-muted); }

/* story action bar (views storyActions, static/actionbar.js) */
.action-bar { position: relative; display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.action-bar > button, .action-bar > .button { height: 32px; display: inline-flex; align-items: center; gap: var(--space-2); }
.action-bar > button.open { box-shadow: var(--focus-ring); }
.action-bar kbd { opacity: .7; }
.action-bar > button.primary kbd { color: var(--color-on-accent); border-color: rgba(255, 255, 255, .4); }
.action-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 15; width: 26rem; max-width: calc(100vw - 32px); display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); background: var(--color-bg); border: var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .10); }
.action-panel[hidden] { display: none; }
.action-panel label { color: var(--color-muted); font-size: var(--text-sm); }
.action-panel .combo { width: 100%; }
.reason-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.field { font: inherit; padding: var(--space-1) var(--space-2); border: var(--border); border-radius: var(--radius); background: var(--color-bg); color: var(--color-text); box-shadow: var(--shadow-faint); width: 100%; }
.field:focus, .combo-input:focus { outline: none; border-color: var(--color-line-strong); box-shadow: var(--focus-ring); }
.panel-actions { display: flex; gap: var(--space-2); justify-content: flex-end; }

/* listing suggestions (views StorySuggestions) */
.card h2 .help { margin-left: var(--space-1); }
.table .quote { font-size: var(--text-sm); margin-top: 2px; }
.candidate { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; margin-top: var(--space-1); }
.candidate .muted { font-size: var(--text-sm); }
.check { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); color: var(--color-muted); margin-right: var(--space-2); }
.table td.actions { white-space: nowrap; text-align: right; }

/* find feeds (views FindFeedsForm) */
.find-feeds { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.find-feeds .field { flex: 2; min-width: 16rem; width: auto; }
.find-feeds .combo { flex: 1; }
.form-heading { font-size: var(--text-md); margin: var(--space-4) 0 var(--space-2); }

/* tooltips (views Help and Tip, static/tooltip.js) */
.tip { cursor: pointer; border-radius: var(--radius); }
.tip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tip-bubble { position: fixed; z-index: 1000; max-width: 280px; width: max-content; padding: var(--space-2) var(--space-3); border-radius: var(--radius);
  background: var(--color-accent); color: var(--color-on-accent); font-size: var(--text-sm); font-weight: normal; line-height: 1.45; text-align: left;
  white-space: pre-line; overflow-wrap: anywhere; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); text-transform: none; letter-spacing: normal; }
.tip-bubble[hidden] { display: none; }

/* ask for details (views askPanel, StoryAsks) */
.action-panel.ask-panel { width: 36rem; }
.action-panel textarea.field { resize: vertical; font: inherit; }
.ask { border-top: var(--border); padding-top: var(--space-3); margin-top: var(--space-3); }
.ask:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.ask-email { white-space: pre-wrap; font-family: var(--font-body); font-size: var(--text-sm); background: var(--color-bg-alt); border-radius: var(--radius); padding: var(--space-3); }

/* The writer's checks, spelled out on the article card. */
.article-marks { margin: 0 0 12px; padding: 10px 14px 10px 28px; background: var(--hue-amber-bg); color: var(--hue-amber-fg); border-radius: 6px; font-size: 13px; }
.article-marks li + li { margin-top: 4px; }

/* Company links queue: four readable columns and the buttons in view. */
.links-table { table-layout: fixed; width: 100%; }
.links-table td, .links-table th { white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
.links-table th:nth-child(1) { width: 30%; }
.links-table th:nth-child(2) { width: 15%; }
.links-table th:nth-child(3) { width: 14%; }
.links-table th:nth-child(5) { width: 150px; }
.links-table td:last-child form { display: inline-block; margin: 0 4px 4px 0; }
.links-table td > * + * { margin-left: 0; }

/* Article images on the article card. */
.article-images { border-top: var(--border); margin-top: 16px; padding-top: 12px; }
.article-images h3 { font-size: var(--text-sm); margin: 0 0 8px; }
.image-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.image-choice { margin: 0; width: 220px; border: var(--border); border-radius: 6px; padding: 6px; font-size: 12px; }
.image-choice img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; display: block; }
.image-choice.chosen { border-color: var(--color-text, #111); }
.image-choice.rejected { opacity: .5; }
.image-choice figcaption { margin-top: 6px; }

/* The edition body: editor and live preview side by side. */
.edition-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 12px; align-items: start; }
.edition-preview { border: var(--border); border-radius: 6px; padding: 16px 20px; font-size: 15px; line-height: 1.6; max-height: 900px; overflow: auto; background: #fff; }
.edition-preview h2 { font-size: 17px; margin: 18px 0 6px; }
.edition-preview a { text-decoration: underline; }
.edition-articles { margin: 0 0 10px; padding-left: 18px; }
@media (max-width: 1100px) { .edition-grid { grid-template-columns: 1fr; } }
/* Priority: one segmented control, 0 1 2 low to high, joined edge to edge,
   rounded only on the outer corners. Height comes from the row's buttons. */
.priority-setter { display: inline-flex; vertical-align: middle; white-space: nowrap; }
.priority-setter form.inline { display: contents; }
.priority-setter button { display: inline-flex; align-items: center; justify-content: center; width: 28px; padding: 0; line-height: 1; margin: 0; border-radius: 0; box-shadow: none; position: relative; }
.priority-setter:not(.table *) button { height: 22px; font-size: var(--text-xs); }
.article-meta { margin: 0 0 var(--space-3); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.priority-setter form + form button { margin-left: -1px; }
.priority-setter form:first-child button { border-radius: var(--radius) 0 0 var(--radius); }
.priority-setter form:last-child button { border-radius: 0 var(--radius) var(--radius) 0; }
.priority-setter button:hover { z-index: 1; }
.priority-setter button.on { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); z-index: 2; }
.priority-setter button:focus-visible { z-index: 3; }

/* Today screen. */
.today-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.today-list { margin: 0; padding-left: 18px; }
.today-list li { margin: 2px 0; }
.today-list li.indent { list-style: none; margin-left: 12px; font-size: var(--text-sm); }
@media (max-width: 1000px) { .today-grid { grid-template-columns: 1fr; } }

/* The work list: one decision per card, phone first. */
.work { max-width: 880px; }
.work-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.work-head h1 { margin: 0; font-size: 22px; }
.work-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0 16px; }
.work-filters .chip { border: var(--border); border-radius: 999px; padding: 4px 12px; font-size: var(--text-sm); text-decoration: none; color: inherit; }
.work-filters .chip.on { background: var(--color-text, #111); color: #fff; border-color: transparent; }
.work-keys { font-size: 12px; margin-left: auto; }
.work-empty { padding: 40px 0; color: var(--color-muted); }
.work-cards { display: grid; gap: 12px; }
.work-card { border: var(--border); border-radius: 10px; padding: 14px 16px; background: #fff; outline: none; }
.work-card:focus { box-shadow: 0 0 0 2px var(--color-text, #111); }
.work-card.overdue { border-color: #d64545; }
.work-card.alert { border: 2px solid #d64545; background: #fff5f5; }
.work-card.claimed { opacity: .6; }
.work-card header { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 12px; color: var(--color-muted); }
.work-kind { font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text, #111); }
.work-card.overdue .work-due, .work-card.alert .work-due { color: #c03030; font-weight: 600; }
.work-claim { background: #fff3cd; color: #7a5a00; border-radius: 4px; padding: 0 6px; }
.work-card[data-held]::after { content: attr(data-held); display: block; margin-top: 6px; font-size: 12px; color: #7a5a00; }
.work-card h2 { font-size: 17px; line-height: 1.35; margin: 6px 0; }
.work-card h2 a { color: inherit; }
.work-summary { margin: 0 0 8px; color: var(--color-muted); white-space: pre-wrap; max-height: 9em; overflow: auto; }
.work-evidence { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 0 0 10px; font-size: var(--text-sm); }
.work-evidence dt { color: var(--color-muted); }
.work-evidence dd { margin: 0; }
.work-evidence dd.warn { color: #9a5b00; }
.work-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.work-form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0; }
.work-form input[type=url], .work-form input[type=text] { min-width: 240px; }
.work-actions button, .work-actions .button { min-height: 40px; padding: 0 14px; }
@media (max-width: 700px) {
  .work-keys { display: none; }
  .work-evidence { grid-template-columns: 1fr; }
  .work-evidence dt { margin-top: 4px; }
  .work-actions { flex-direction: column; align-items: stretch; }
  .work-form { flex-direction: column; align-items: stretch; }
  .work-form input[type=url], .work-form input[type=text] { min-width: 0; }
  .work-actions button, .work-actions .button { width: 100%; min-height: 44px; }
}
.work-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.work-chips-label { font-size: 12px; font-weight: 600; color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; min-width: 40px; }
.chip-button { border-radius: 999px; }
@media (max-width: 700px) {
  .work-chips { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .work-chips-label { grid-column: 1 / -1; }
}

/* Phones (Rene does the work list from his phone): the menu folds into a
   button; the page takes the full width. */
.nav-toggle { display: none; }
@media (max-width: 800px) {
  .layout { grid-template-columns: 1fr; align-content: start; }
  .nav-toggle { display: flex; justify-content: flex-start; position: sticky; top: 0; z-index: 20; width: 100%; height: 48px; padding: 0 16px; border: 0; border-radius: 0; background: var(--color-nav-bg); color: var(--color-on-accent); font-weight: var(--weight-strong); box-shadow: none; }
  .nav-toggle:hover { background: var(--color-nav-bg); border-color: transparent; }
  .nav { display: none; position: static; height: auto; border-right: 0; border-bottom: var(--border); padding-bottom: var(--space-3); }
  .nav.open { display: flex; }
  .main { padding: var(--space-3) 16px; }
  /* tables scroll inside their card; the flexible column keeps a width */
  .card { padding: var(--space-3) var(--space-3); overflow-x: auto; }
  .table td.grow, .table th.grow { min-width: 160px; max-width: 240px; }
  .table.items { min-width: 720px; }
  .form { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .form > :not(label), .form > label { grid-column: 1; }
  .form label { padding-top: var(--space-2); }
  .main > form.form { padding: var(--space-3); }
}

/* Follower history on a social profile. */
.followers-now { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.followers-value { font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.followers-change { font-size: var(--text-sm); color: var(--color-muted); }
.followers-change.up { color: var(--hue-green-fg); }
.followers-change.down { color: var(--hue-red-fg, #b42318); }
.followers-chart { margin: var(--space-3) 0 0; }
.followers-chart svg { width: 100%; height: 140px; display: block; color: var(--color-text); background: var(--color-bg-alt); border-radius: var(--radius); }
.followers-chart figcaption { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--text-xs); margin-top: 4px; }
.followers-form { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.followers-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-sm); }
.followers-form label.check { flex-direction: row; align-items: center; }
.notice { background: var(--hue-green-bg); color: var(--hue-green-fg); border-radius: var(--radius); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.hint { margin: 4px 0 0; font-size: var(--text-xs); color: var(--color-muted); }

/* The system's duplicate warning on a story page (it never merges). */
.dup-banner { background: var(--hue-amber-bg); color: var(--hue-amber-fg); border-radius: var(--radius); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3); display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm); }
.dup-banner a { color: inherit; text-decoration: underline; }

/* The filter bar (views/filterbar.templ): every control 36px, one radius
   and border; search with a magnifier and a clear button; segment filters
   as pills with counts (five options or fewer) or a styled dropdown. */
.filterbar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0 0 var(--space-3); }
.fb-search { position: relative; flex: 0 1 320px; min-width: 200px; }
.fb-search input { width: 100%; height: var(--control-height); padding: 0 32px 0 34px; border: var(--border-strong); border-radius: var(--radius); background: var(--color-bg) var(--magnifier) no-repeat 11px center; font: inherit; color: var(--color-text); box-shadow: var(--shadow-faint); }
.fb-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.fb-search input:focus-visible { outline: none; border-color: var(--color-accent); box-shadow: var(--focus-ring); }
.fb-clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--color-muted); font-size: 18px; font-weight: var(--weight-normal); }
.fb-clear:hover { background: var(--color-bg-alt); border-color: transparent; }
.fb-search input:placeholder-shown + .fb-clear { display: none; }
.fb-select { height: var(--control-height); padding: 0 32px 0 var(--space-3); border: var(--border-strong); border-radius: var(--radius); font: inherit; color: var(--color-text); box-shadow: var(--shadow-faint); max-width: 280px; }
.fb-pills { display: inline-flex; gap: 2px; padding: 3px; height: var(--control-height); border: var(--border-strong); border-radius: var(--radius); background: var(--color-bg); align-items: center; box-shadow: var(--shadow-faint); }
.fb-pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 6px; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-muted); cursor: pointer; white-space: nowrap; }
.fb-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.fb-pill:hover { color: var(--color-text); background: var(--color-bg-alt); }
.fb-pill.on, .fb-pill:has(input:checked) { background: var(--color-accent); color: var(--color-on-accent); }
.fb-pill:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.fb-pill.off { opacity: .45; cursor: not-allowed; }
.fb-count { font-size: var(--text-xs); opacity: .7; font-variant-numeric: tabular-nums; }
.fb-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0 0 var(--space-3); }
.fb-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 10px; border-radius: var(--radius-pill); background: var(--color-bg-alt); color: var(--color-text); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.fb-chip span { color: var(--color-muted); font-size: 15px; padding: 0 4px; }
.fb-chip:hover { text-decoration: none; background: var(--color-line); }
.fb-clear-all { font-size: var(--text-sm); color: var(--color-muted); }
.htmx-request .fb-results, .fb-results.htmx-swapping { opacity: .6; transition: opacity .1s; }
@media (max-width: 800px) {
  .fb-search { flex: 1 1 100%; }
  .fb-pills { max-width: 100%; overflow-x: auto; }
  .fb-select { flex: 1 1 auto; max-width: none; }
}

/* An agent's read only session (#399): the page looks as a person sees it
   (screenshots show the real layout), but forms and actions do nothing;
   the server refuses every write anyway. */
body[data-readonly] form[method="post"],
body[data-readonly] [hx-post],
body[data-readonly] button[type="submit"] { pointer-events: none; cursor: not-allowed; }
.readonly-banner { margin: 0 0 12px; padding: 8px 12px; border-radius: 6px; background: var(--color-warn-bg); color: var(--color-warn); font-size: 13px; }
/* An empty preview says what it will show. */
.edition-preview:empty::before { content: "The preview shows here as you write: the email as a reader sees it."; color: var(--color-faint); font-size: var(--text-sm); }

/* After publishing: where readers find it and what comes next (flame's launch audit, #420). */
.published-next { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; margin: 10px 0; padding: 10px 14px; border: var(--border); border-radius: 6px; background: var(--color-bg); }
.published-next a { text-decoration: underline; }

.scheduled { font-weight: 600; }

/* The priority chip: 0 light, 1 medium, 2 dark; the default is dashed. */
.pchip-form { display: inline; }
.pchip { width: 22px; height: 22px; padding: 0; border-radius: 4px; border: 1px solid transparent; font: 600 12px/20px var(--font-body); text-align: center; cursor: pointer; vertical-align: middle; }
.pchip.p0 { background: #eef0f3; color: #62666b; }
.pchip.p1 { background: #c9ced6; color: #141517; }
.pchip.p2 { background: #141517; color: #fff; }
.pchip.default { border: 1px dashed #62666b; background: transparent; color: #62666b; }
.pchip.failed { outline: 2px solid var(--color-danger); }
.pchip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }

/* The /news overview (Rene's main screen): one dense row per story.
   Filled is done, hollow is missing, amber needs a person. */
.news-overview .table.dense { table-layout: fixed; width: 100%; }
.news-overview .table.dense td, .news-overview .table.dense th { padding: 6px 6px; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-overview .table.dense th { font-size: 11px; letter-spacing: .02em; }
.news-overview .table.dense td.grow { max-width: none; width: auto; }
.news-overview col.w-date { width: 54px; } .news-overview col.w-p { width: 34px; } .news-overview col.w-src { width: 58px; }
.news-overview col.w-verdict { width: 112px; } .news-overview col.w-co { width: 58px; } .news-overview col.w-cat { width: 92px; }
.news-overview col.w-art { width: 92px; } .news-overview col.w-ed { width: 58px; } .news-overview col.w-soc { width: 54px; } .news-overview col.w-img { width: 50px; }
.news-overview .table.dense td.grow { white-space: normal; line-height: 1.3; }
.news-overview .table.dense td.grow .story-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-overview .nowrap { white-space: nowrap; }
.news-overview .story-title { color: var(--color-text); text-decoration: none; }
.news-overview .story-title b { font-weight: 650; }
.news-overview a { text-decoration: none; }
.news-overview .hollow { color: var(--color-faint); }
.news-overview .filled { color: var(--color-text); }
.news-overview .amber, .news-overview .src-count.amber { color: #a15c07; }
.news-overview .pdot { color: var(--color-ok); margin-left: 2px; }
.vchip { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 12px; background: var(--color-bg-alt); color: var(--color-muted); }
.vchip.quiet { background: transparent; color: var(--color-muted); padding: 1px 0; }
.vchip.loud { background: #fdf3e2; color: #a15c07; font-weight: 600; }
.sdot, .idot, .mdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--color-faint); margin-right: 3px; vertical-align: middle; }
.sdot.on, .mdot.on { background: var(--color-text); border-color: var(--color-text); }
.sdot.amber, .mdot.amber { background: #e3a440; border-color: #e3a440; }
.idot { border: none; }
.idot.img-press { background: #7c3aed; } .idot.img-licensed { background: #2563eb; } .idot.img-own { background: #16a34a; } .idot.img-generated { background: #ea580c; }
.news-overview .row-dots { display: none; }
.pager { display: flex; justify-content: space-between; align-items: center; padding: 12px 8px 4px; font-size: 13.5px; }
.pager nav { display: flex; gap: 4px; }
.pager nav a, .pager nav span { min-width: 28px; text-align: center; padding: 3px 6px; border-radius: 4px; }
.pager nav a { border: var(--border); color: var(--color-text); text-decoration: none; }
.pager nav .current { background: var(--color-text); color: #fff; }
@media (max-width: 720px) {
  .news-overview thead, .news-overview colgroup, .news-overview td:not(:nth-child(2)):not(:nth-child(3)) { display: none; }
  .news-overview .table.dense { table-layout: auto; }
  .news-overview .table.dense td.grow { white-space: normal; max-width: none; }
  .news-overview .row-dots { display: block; margin-top: 4px; }
}
.news-overview .table.dense th .tip { border-bottom: 1px dotted currentColor; cursor: help; }
.news-overview .proposed-name { text-decoration: underline dashed #a15c07; text-underline-offset: 3px; }

/* The edition on one screen (the edition redesign): top bar, the reader's
   view on the left, what is in it, the checks and the history on the right. */
.edition-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.edition-top .et-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.edition-top .et-when { font-weight: 600; }
.edition-top .et-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.warning-inline { color: #a15c07; }
.edition-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-4, 16px); align-items: start; }
.reader-tabs > input { position: absolute; opacity: 0; pointer-events: none; }
.reader-tabs > label { display: inline-block; padding: 6px 14px; border-bottom: 2px solid transparent; cursor: pointer; color: var(--color-muted); font-weight: 600; }
.reader-tabs > input:checked + label { color: var(--color-text); border-bottom-color: var(--color-text); }
.reader-tabs > input:focus-visible + label { outline: 2px solid var(--color-accent); }
.reader-pane { display: none; margin-top: 10px; }
.reader-tabs > input:nth-of-type(1):checked ~ .reader-pane.web, .reader-tabs > input:nth-of-type(2):checked ~ .reader-pane.email { display: block; }
.reader-subject { font-weight: 650; font-size: 17px; margin: 0 0 8px; }
.email-frame { width: 100%; height: 900px; border: var(--border); border-radius: 6px; background: #fff; }
.edition-editor { margin-top: 14px; }
.edition-editor summary { cursor: pointer; font-weight: 600; }
.edition-side .card { margin-bottom: var(--space-4, 16px); }
.ed-items { list-style: none; padding: 0; margin: 0 0 8px; }
.ed-items li, .ed-out { display: flex; align-items: center; gap: 8px; padding: 5px 0; margin: 0; border-bottom: var(--border); }
.ed-order { display: inline-block; min-width: 22px; text-align: center; font-weight: 700; font-size: 12px; border-radius: 4px; background: var(--color-text); color: #fff; padding: 1px 4px; }
.ed-order.out { background: var(--color-bg-alt); color: var(--color-muted); font-weight: 600; }
.ed-checks { list-style: none; padding: 0; margin: 0; }
.ed-checks li { display: grid; grid-template-columns: 18px 130px 1fr; gap: 6px; padding: 5px 0; border-bottom: var(--border); }
.ed-checks li.ok .mark { color: var(--color-ok); }
.ed-checks li.warn .mark, .ed-checks li.warn span:last-child { color: #a15c07; }
.ed-history { list-style: none; padding: 0; margin: 0; font-size: 13.5px; }
.ed-history li { padding: 4px 0; display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 900px) { .edition-cols { grid-template-columns: 1fr; } .ed-checks li { grid-template-columns: 18px 1fr; } .ed-checks li span:last-child { grid-column: 2; } }
.ed-checks .hollow { color: var(--color-faint); }

/* The story page v1 (midnight, 8 October 2026): proposals and material on
   the left, placements, notes and history on the right. */
.story-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-4, 16px); align-items: start; }
.story-side .card, .story-main .card { margin-bottom: var(--space-4, 16px); }
.judge-call { font-size: 15.5px; margin: 0 0 12px; }
.proposals { margin: 0 0 12px; }
.proposals > div, .placements > div { display: grid; grid-template-columns: 110px 1fr; gap: 8px; padding: 7px 0; border-bottom: var(--border); align-items: center; }
.proposals dt, .placements dt { color: var(--color-muted); font-size: 13.5px; }
.proposals dd, .placements dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pchip-name { display: inline-block; padding: 2px 9px; border-radius: 12px; font-size: 13px; text-decoration: none; color: var(--color-text); }
.pchip-name.confirmed { background: var(--color-bg-alt); font-weight: 650; }
.pchip-name.proposed { border: 1px dashed #a15c07; color: #a15c07; }
.create-co { display: inline-block; vertical-align: top; }
.create-co > summary { list-style: none; cursor: pointer; display: inline-block; padding: 1px 8px; font-size: 12px; font-weight: 600; border: 1px solid var(--color-border, #d6d6d0); border-radius: 6px; background: #fff; }
.create-co > summary::-webkit-details-marker { display: none; }
.create-co[open] { display: block; margin: 6px 0 10px; }
.create-co-body { border: 1px solid var(--color-border, #e3e3df); border-radius: 8px; padding: 10px 12px; margin-top: 6px; max-width: 420px; }
.create-co-form label { display: block; font-size: 13px; margin: 6px 0 2px; }
.create-co-form input { width: 100%; box-sizing: border-box; }
.create-co .proposed-note { font-size: 12px; margin: 2px 0 6px; overflow-wrap: anywhere; }
button.mini { padding: 1px 8px; font-size: 12px; min-height: 0; }
a.change, summary.change { font-size: 12.5px; color: var(--color-muted); text-decoration: underline; cursor: pointer; list-style: none; }
.tag-picker { width: 100%; }
.tag-picker[open] summary { margin-bottom: 6px; }
.tp-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 4px 0; }
.tp-dim { width: 90px; color: var(--color-muted); font-size: 12.5px; }
button.pill { padding: 2px 10px; border-radius: 12px; font-size: 12.5px; min-height: 0; background: var(--color-bg); border: var(--border); }
button.pill.on { background: var(--color-text); color: #fff; border-color: var(--color-text); }
.mline { padding: 9px 0; border-bottom: var(--border); }
.mline.weak .mhead a { color: var(--color-muted); }
.mhead { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.mhead .micon svg { width: 16px; height: 16px; vertical-align: middle; }
.mmeta { color: var(--color-muted); font-size: 13px; margin: 2px 0 0 24px; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.mmeta .held { color: var(--color-ok); }
.mexcerpt { margin: 4px 0 0 24px; font-size: 13.5px; color: var(--color-text); }
.note-line { margin: 0 0 6px; font-size: 13.5px; }
.note-form { display: flex; gap: 6px; }
.note-form input { flex: 1; min-width: 0; }
@media (max-width: 900px) { .story-cols { grid-template-columns: 1fr; } .proposals > div, .placements > div { grid-template-columns: 1fr; } }
/* On a phone the tabs wrap: a tab bar never hides a tab (midnight, 8 October 2026). */
@media (max-width: 720px) { .tabs { flex-wrap: wrap; overflow-x: visible; row-gap: 0; column-gap: var(--space-3, 12px); } }
@media (max-width: 720px) { .fb-pills { flex-wrap: wrap; overflow-x: visible; max-width: 100%; height: auto; } }
.story-side .ed-history li { display: grid; grid-template-columns: 44px 1fr; gap: 8px; }

/* The Papers tab of /news: one dense row per paper. */
.papers-overview col.w-journal { width: 118px; } .papers-overview col.w-pco { width: 150px; } .papers-overview col.w-pcat { width: 200px; } .papers-overview col.w-state { width: 150px; }
.papers-overview td.state { white-space: normal; }
.papers-overview td.state form { display: block; margin-top: 4px; }
.papers-overview td.state button.quiet { padding: 1px 6px; margin-left: -6px; color: var(--color-muted); text-decoration: underline; text-decoration-color: var(--color-faint); text-underline-offset: 3px; }
.papers-overview td.state button.quiet:hover { color: var(--color-text); text-decoration-color: currentColor; }
.papers-overview td.chips { white-space: normal; line-height: 1.9; text-overflow: clip; }
.papers-overview .chipwrap { display: flex; flex-wrap: wrap; gap: 4px; }
.papers-overview .chipwrap .vchip { white-space: normal; line-height: 1.35; max-width: 100%; }
.vchip.ok { background: #e6f4ea; color: #1e6b34; }
.papers-overview .row-meta { display: none; }
@media (max-width: 720px) {
  .papers-overview td:not(:nth-child(2)) { display: none; }
  .papers-overview .row-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 4px; font-size: 12.5px; color: var(--color-muted); }
}