/*
 * FlowArticles component CSS - PROPOSED (Prism wireframes, 2026-10-09)
 *
 * This is the only stylesheet the component would ship. Rules:
 *  - Everything is scoped under .fa-root  (no element selectors at the top level, no resets).
 *  - The root is NOT called .fa: Joomla ships Font Awesome, whose own .fa class forces display:inline-block, font-weight 900,
 *    line-height 1 and the icon font onto whatever carries it. That shrink-wrapped the whole page past a phone's width (2b-1 follow-up).
 *  - Typography, link colour and base text colour are INHERITED from the site template
 *    (MWB = Gantry 5). We never set font-family or body colours.
 *  - Colours are derived from currentColor with color-mix so the same CSS works on a light
 *    or dark template. Only status colours are fixed, and they always sit next to a word.
 *  - No position:fixed anywhere (FlowContent's "Article Queue" button owns bottom-right).
 *  - Templates may override any --fa-* token.
 */

.fa-root {
  --fa-gap: 1rem;
  --fa-radius: 8px;
  --fa-line: color-mix(in srgb, currentColor 18%, transparent);
  --fa-line-strong: color-mix(in srgb, currentColor 35%, transparent);
  --fa-tint: color-mix(in srgb, currentColor 5%, transparent);
  --fa-muted: color-mix(in srgb, currentColor 68%, transparent);
  --fa-accent: var(--fa-template-accent, #1f5fbf);
  --fa-on-accent: #fff;
  /* Status colours are mixed with the inherited text colour, so they darken on a light template and lighten on a dark one
     (>= 4.5:1 on both; Prism's visual gate, 2026-10-10). */
  --fa-ok: color-mix(in srgb, #1d7a46 60%, currentColor);
  --fa-warn: color-mix(in srgb, #9a5b00 60%, currentColor);
  --fa-bad: color-mix(in srgb, #b3261e 60%, currentColor);
  --fa-info: color-mix(in srgb, #1f5fbf 60%, currentColor);
  /* Two-tone ring: the white inner ring shows on dark pages, the dark blue outer ring on light ones,
     so one of them is always >= 3:1 against the page (WCAG C40). The old 45% tint measured ~2.1:1 on
     white and ~1.5:1 on a dark template. */
  --fa-focus: 0 0 0 2px #fff, 0 0 0 4px #1a4fa0;
  --fa-tap: 44px;
  /* FlowContent's console is a fixed bar along the bottom (420px, 95vw on phones, ~43px tall).
     Our sticky bars sit ABOVE it and the page gets room to scroll clear of it.
     Keyed on FC's own body class, so nothing changes on pages without the console. */
  --fa-sticky-bottom: 0px;
  max-width: 72rem;
  margin-inline: auto;
}
.fa-root *, .fa-root *::before, .fa-root *::after { box-sizing: border-box; }
/* FlowContent console present: lift sticky bars above its bar, leave scroll room below the content */
body.fc-console-active .fa-root { --fa-sticky-bottom: 52px; padding-bottom: 60px; }

/* ---------- header ---------- */
.fa-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: var(--fa-gap); }
.fa-head h1, .fa-head h2 { margin: 0; flex: 1 1 auto; }
.fa-help { white-space: nowrap; }
.fa-help::before { content: "? "; font-weight: 700; }

/* ---------- buttons ---------- */
.fa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: var(--fa-tap); padding: .5rem 1rem; border-radius: var(--fa-radius);
  border: 1px solid var(--fa-line-strong); background: transparent; color: inherit;
  font: inherit; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.fa-btn:hover { background: var(--fa-tint); }
.fa-btn--primary { background: var(--fa-accent); border-color: var(--fa-accent); color: var(--fa-on-accent); font-weight: 600; }
.fa-btn--primary:hover { filter: brightness(1.08); background: var(--fa-accent); }
.fa-btn--danger { color: var(--fa-bad); border-color: color-mix(in srgb, var(--fa-bad) 50%, transparent); }
.fa-btn--quiet { border-color: transparent; }
.fa-btn--sm { min-height: 36px; padding: .25rem .65rem; font-size: .9em; }
.fa-btn[aria-disabled="true"], .fa-btn:disabled { opacity: .55; cursor: not-allowed; }
.fa-btn[aria-busy="true"]::before {
  content: ""; width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: fa-spin .8s linear infinite;
}
@keyframes fa-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fa-btn[aria-busy="true"]::before { animation: none; } }

.fa-root :focus-visible { outline: none; box-shadow: var(--fa-focus); }
/* Form fields and frames take the ring on plain :focus: a date-time field's own parts (the calendar
   button) and an iframe do not reliably match :focus-visible, and fields always show focus anyway. */
/* A date-time field's calendar button lives inside it: the field matches :focus-within there but NOT :focus (measured in Chromium), so the field takes the ring for both. */
.fa-root input:focus, .fa-root input:focus-within, .fa-root select:focus, .fa-root textarea:focus, .fa-root iframe:focus { outline: none; box-shadow: var(--fa-focus); }
/* When the keyboard is INSIDE a frame, the frame element matches neither :focus nor :focus-within (measured), so fa-frame.js marks it. */
.fa-root iframe.fa-frame-focused { outline: none; box-shadow: var(--fa-focus); }

/* Templates style a:hover (Cassiopeia: a:hover{color:#424077;text-decoration:underline}, specificity 0,1,1),
   which beats .fa-btn on link-buttons: dark text on the blue primary button, underlined buttons. Re-assert. */
.fa-root a.fa-btn:hover, .fa-root a.fa-btn:focus { color: inherit; text-decoration: none; }
.fa-root a.fa-btn--primary:hover, .fa-root a.fa-btn--primary:focus { color: var(--fa-on-accent); }
.fa-root a.fa-btn--danger:hover, .fa-root a.fa-btn--danger:focus { color: var(--fa-bad); }

/* ---------- status pill: shape + word, never colour alone ---------- */
/* A flat label, not a button: no border, no pill, no background. The symbol and the word carry it; the colour only helps (0.3.1 A4). */
.fa-status {
  display: inline-flex; align-items: center; gap: .35rem; padding: 0;
  border: 0; border-radius: 0; background: none; font-size: .85em; font-weight: 600; white-space: nowrap;
}
.fa-status::before { font-size: .9em; }
.fa-status--published { color: var(--fa-ok); }   .fa-status--published::before { content: "\25CF"; }  /* solid dot */
.fa-status--draft     { color: var(--fa-muted); } .fa-status--draft::before     { content: "\25CB"; }  /* hollow dot */
.fa-status--review    { color: var(--fa-info); }  .fa-status--review::before    { content: "\25D4"; }  /* quarter */
.fa-status--scheduled { color: var(--fa-info); }  .fa-status--scheduled::before { content: "\25F7"; }  /* clock */
.fa-status--expired   { color: var(--fa-warn); }  .fa-status--expired::before   { content: "\25A0"; }  /* square */
.fa-status--removal   { color: var(--fa-warn); }  .fa-status--removal::before   { content: "\26A0"; }  /* warning */
.fa-status--trashed   { color: var(--fa-bad); }   .fa-status--trashed::before   { content: "\2715"; }  /* cross */
.fa-status--archived  { color: var(--fa-muted); } .fa-status--archived::before  { content: "\25A4"; }
.fa-status--offline   { color: var(--fa-warn); }  .fa-status--offline::before   { content: "\25D0"; }  /* half dot */

/* The title opens the article; the author name applies the Author filter. */
.fa-root a.fa-title--link { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: var(--fa-line-strong); text-underline-offset: .2em; }
.fa-root a.fa-title--link:hover, .fa-root a.fa-title--link:focus { text-decoration-color: currentColor; }
.fa-author a { color: inherit; }

/* One "Start a new article" control (0.3.1 A6): the summary is the button, the naming box opens under it. */
.fa-start { margin-bottom: var(--fa-gap); }
.fa-start > summary { display: inline-flex; list-style: none; cursor: pointer; }
.fa-start > summary::-webkit-details-marker { display: none; }
.fa-start[open] > summary { margin-bottom: .6rem; }
.fa-start--hero > .fa-card { border-width: 2px; border-color: var(--fa-accent); }

/* ---------- tabs (they are links: GET, shareable, back-button safe) ---------- */
/* contain:inline-size stops a one-line scroller from setting the width of a template's grid column (Cassiopeia): without it the whole
   component lays out 778-1038px wide at 375 (Prism's visual gate F1). */
.fa-tabs { contain: inline-size; display: flex; gap: .25rem; overflow-x: auto; border-bottom: 1px solid var(--fa-line); margin-bottom: var(--fa-gap); scrollbar-width: thin; }
.fa-tabs a {
  display: inline-flex; align-items: center; gap: .4rem; min-height: var(--fa-tap); padding: .5rem .85rem;
  color: inherit; text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap;
}
.fa-tabs a[aria-current="page"] { border-bottom-color: var(--fa-accent); font-weight: 700; }
.fa-count { font-size: .8em; padding: 0 .45rem; border-radius: 999px; background: var(--fa-tint); border: 1px solid var(--fa-line); font-variant-numeric: tabular-nums; }
.fa-tabs .fa-tabs-end { margin-left: auto; color: var(--fa-muted); font-size: .9em; }

/* ---------- toolbar / filters ---------- */
.fa-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin-bottom: .75rem; }
.fa-field { display: flex; flex-direction: column; gap: .2rem; font-size: .9em; }
.fa-field > span { color: var(--fa-muted); }
.fa-input, .fa-select, .fa-textarea {
  min-height: var(--fa-tap); padding: .45rem .7rem; border-radius: var(--fa-radius);
  border: 1px solid var(--fa-line-strong); background: transparent; color: inherit; font: inherit;
}
.fa-search { flex: 1 1 16rem; }
.fa-search .fa-input { width: 100%; }
.fa-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; font-size: .9em; }
.fa-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .3rem .15rem .6rem; border-radius: 999px; border: 1px solid var(--fa-line-strong); }
.fa-chip button { border: 0; background: none; color: inherit; font: inherit; min-width: 28px; min-height: 28px; cursor: pointer; border-radius: 50%; }

/* ---------- bulk bar ---------- */
.fa-bulk {
  position: sticky; bottom: var(--fa-sticky-bottom); z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .6rem .75rem;
  border: 1px solid var(--fa-line-strong); border-radius: var(--fa-radius);
  background: Canvas; margin-top: .5rem;
}
.fa-bulk strong { margin-right: .5rem; }

/* ---------- the list (a real table on wide screens, cards on narrow) ---------- */
.fa-list { width: 100%; border-collapse: collapse; }
.fa-list th { text-align: left; font-size: .85em; font-weight: 600; color: var(--fa-muted); padding: .5rem; border-bottom: 1px solid var(--fa-line-strong); }
.fa-list th a { color: inherit; }
.fa-list td { padding: .65rem .5rem; border-bottom: 1px solid var(--fa-line); vertical-align: top; }
.fa-list tr:hover td { background: var(--fa-tint); }
.fa-list .fa-col-check { width: 2.5rem; }
.fa-list .fa-col-status { width: 10rem; }
.fa-list .fa-col-actions { width: 1%; white-space: nowrap; text-align: right; }
.fa-title { font-weight: 600; display: block; }
.fa-meta { display: block; font-size: .85em; color: var(--fa-muted); margin-top: .15rem; }
.fa-meta > * + *::before { content: "\00B7"; margin: 0 .4em; }
.fa-note { display: block; font-size: .85em; margin-top: .25rem; }
.fa-check { width: 22px; height: 22px; }
.fa-check-hit { display: inline-flex; align-items: center; justify-content: center; min-width: var(--fa-tap); min-height: var(--fa-tap); margin: -.6rem 0; }
.fa-actions { display: inline-flex; gap: .35rem; align-items: center; }

/* "More" menu: native <details>, works without JS, keyboard reachable */
.fa-more { position: relative; display: inline-block; }
.fa-more > summary { list-style: none; }
.fa-more > summary::-webkit-details-marker { display: none; }
.fa-more > summary::after { content: " \25BE"; }
.fa-more-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 3; min-width: 15rem; padding: .35rem;
  border: 1px solid var(--fa-line-strong); border-radius: var(--fa-radius); background: Canvas;
  box-shadow: 0 6px 18px rgba(0,0,0,.18); text-align: left;
  /* The actions cell is nowrap on desktop; without this the "what happens" text runs on one line and
     the right-anchored menu grows off the LEFT edge of the page (re-run 2026-10-10, removal ask). */
  white-space: normal; width: 22rem; max-width: calc(100vw - 2rem);
}
/* Every entry is the same control (0.3.1 B1): same height, padding, alignment, hover and focus, whether it acts at once or opens a dialog. */
.fa-more-menu .fa-menu-item {
  display: flex; width: 100%; min-height: var(--fa-tap); align-items: center; padding: .4rem .7rem; margin: 0;
  border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; border-radius: 6px; cursor: pointer;
}
.fa-more-menu form { margin: 0; }
.fa-more-menu .fa-menu-item:hover, .fa-more-menu .fa-menu-item:focus-visible { background: var(--fa-tint); }
.fa-more-menu .fa-menu-item:focus-visible { box-shadow: var(--fa-focus); }

/* The confirm dialogs (0.3.1 B2): a native modal; the browser traps focus and Escape closes it. */
.fa-dialog { max-width: min(32rem, calc(100vw - 2rem)); width: 100%; padding: 1.1rem 1.25rem; border: 1px solid var(--fa-line-strong); border-radius: 12px; background: Canvas; color: CanvasText; }
.fa-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.fa-dialog-h { margin: 0 0 .25rem; font-size: 1.15em; }
.fa-dialog .fa-textarea, .fa-dialog .fa-select { width: 100%; box-sizing: border-box; }
.fa-dialog-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; margin-top: .9rem; }
.fa-more-menu hr { border: 0; border-top: 1px solid var(--fa-line); margin: .3rem 0; }
.fa-more-menu .fa-danger { color: var(--fa-bad); }
.fa-more-menu .fa-why { display: block; font-size: .8em; color: var(--fa-muted); padding: .1rem .7rem .4rem; }

/* ---------- pager ---------- */
.fa-pager { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; margin-top: 1rem; font-size: .95em; }
.fa-pager nav { display: flex; gap: .4rem; align-items: center; }
.fa-pager .fa-input { width: 4.5rem; text-align: center; }

/* ---------- cards / panels / notices ---------- */
.fa-card { border: 1px solid var(--fa-line-strong); border-radius: 12px; padding: 1.1rem 1.25rem; margin-bottom: var(--fa-gap); }
.fa-card > :first-child { margin-top: 0; }
.fa-card > :last-child { margin-bottom: 0; }
.fa-card--hero { border-width: 2px; border-color: var(--fa-accent); }
.fa-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .75rem; margin-bottom: var(--fa-gap); }
.fa-alert { display: flex; gap: .75rem; align-items: flex-start; border-radius: var(--fa-radius); padding: .75rem 1rem; margin-bottom: var(--fa-gap); border: 1px solid; border-left-width: 5px; }
.fa-alert > b:first-child { white-space: nowrap; }
.fa-alert--info { border-color: var(--fa-info); }
.fa-alert--ok   { border-color: var(--fa-ok); }
.fa-alert--warn { border-color: var(--fa-warn); }
.fa-alert--bad  { border-color: var(--fa-bad); }
.fa-alert p { margin: .2rem 0 0; }
.fa-alert .fa-alert-end { margin-left: auto; }

/* ---------- guided flow ---------- */
.fa-steps { contain: inline-size; display: flex; gap: .25rem; padding: 0; margin: 0 0 1.25rem; list-style: none; counter-reset: fa-step; overflow-x: auto; }
/* Real step tabs (0.3.1 C2): the whole tab is clickable, larger text, a clear current step, a tick on finished steps, hover and focus states. */
.fa-steps li { flex: 1 1 0; min-width: 7rem; counter-increment: fa-step; font-size: 1rem; padding: 0; border-top: 4px solid var(--fa-line); color: var(--fa-muted); }
.fa-steps li[data-done] { border-top-color: var(--fa-ok); color: inherit; }
.fa-steps li[aria-current="step"] { border-top-color: var(--fa-accent); color: inherit; background: var(--fa-tint); font-weight: 700; }
.fa-step-tab { display: flex; align-items: center; gap: .4rem; box-sizing: border-box; width: 100%; min-height: var(--fa-tap); padding: .6rem .7rem; color: inherit; text-decoration: none; }
.fa-step-tab::before { content: counter(fa-step) "."; font-weight: 700; }
.fa-root a.fa-step-tab:hover { background: var(--fa-tint); text-decoration: underline; color: inherit; }
.fa-root a.fa-step-tab:focus-visible { box-shadow: var(--fa-focus); text-decoration: underline; color: inherit; }
.fa-tick { color: var(--fa-ok); font-weight: 700; margin-left: auto; }
.fa-flowbar {
  position: sticky; bottom: var(--fa-sticky-bottom); z-index: 2; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  padding: .75rem; margin-top: 1.25rem;
  border-top: 1px solid var(--fa-line-strong); background: Canvas;
}
/* the Write step: the step bar is part of the page, not stuck over the editor's lower edge and status bar (whichever editor is used) */
.fa-flow--write .fa-flowbar { position: static; }
.fa-flowbar .fa-saved { font-size: .9em; color: var(--fa-muted); margin-right: auto; }
.fa-hint { font-size: .9em; color: var(--fa-muted); margin: .25rem 0 0; }
.fa-label { display: block; font-weight: 600; margin-bottom: .3rem; }
.fa-wide { width: 100%; }
.fa-slug { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .9em; }

/* upload */
.fa-drop { border: 2px dashed var(--fa-line-strong); border-radius: 12px; padding: 1.5rem; text-align: center; }
.fa-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .75rem; margin-top: 1rem; padding: 0; list-style: none; }
.fa-thumbs li { border: 1px solid var(--fa-line); border-radius: var(--fa-radius); padding: .4rem; font-size: .85em; }
.fa-thumb { aspect-ratio: 4 / 3; object-fit: contain; /* the true shape, never stretched or cropped: the writer judges the picture's shape here */ border-radius: 6px; background: var(--fa-tint); display: grid; place-items: center; color: var(--fa-muted); }
.fa-progress { height: 6px; border-radius: 3px; background: var(--fa-tint); overflow: hidden; margin-top: .3rem; }
.fa-progress > i { display: block; height: 100%; background: var(--fa-accent); }

/* featured image crop */
.fa-crop { position: relative; background: repeating-linear-gradient(45deg, var(--fa-tint) 0 10px, transparent 10px 20px); border: 1px solid var(--fa-line-strong); border-radius: 6px; overflow: hidden; }
.fa-crop-box { position: absolute; border: 3px solid var(--fa-accent); box-shadow: 0 0 0 999px rgba(0,0,0,.45); }
.fa-crop-box span { position: absolute; left: .4rem; top: .3rem; background: var(--fa-accent); color: var(--fa-on-accent); font-size: .75em; padding: .05rem .4rem; border-radius: 4px; }
.fa-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: 1rem; }
.fa-compare figure { margin: 0; }
.fa-compare figcaption { font-size: .9em; margin-top: .35rem; }
.fa-dl { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: .5rem 0; font-size: .95em; }
.fa-dl dt { color: var(--fa-muted); }
.fa-dl dd { margin: 0; }

/* checks list */
.fa-checks { list-style: none; padding: 0; margin: 0; }
.fa-checks li { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: .75rem; align-items: start; padding: .7rem 0; border-bottom: 1px solid var(--fa-line); }
.fa-checks .fa-verdict { font-weight: 700; font-size: .85em; }
.fa-verdict--ok::before   { content: "\2713  "; }
.fa-verdict--must::before { content: "\2715  "; }
.fa-verdict--should::before { content: "!  "; }
.fa-verdict--ok { color: var(--fa-ok); } .fa-verdict--must { color: var(--fa-bad); } .fa-verdict--should { color: var(--fa-warn); }

/* choices (publish / schedule / keep) */
.fa-choices { display: grid; gap: .6rem; }
.fa-choice { display: flex; gap: .75rem; align-items: flex-start; border: 1px solid var(--fa-line-strong); border-radius: var(--fa-radius); padding: .8rem 1rem; cursor: pointer; }
.fa-choice input { margin-top: .3rem; width: 20px; height: 20px; }
.fa-choice:has(input:checked) { border-color: var(--fa-accent); box-shadow: inset 0 0 0 1px var(--fa-accent); }

/* dialog (native <dialog>; shown open in the mockups) */
.fa-dialog { border: 1px solid var(--fa-line-strong); border-radius: 12px; padding: 1.25rem 1.4rem; max-width: 34rem; width: 100%; background: Canvas; color: CanvasText; box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.fa-dialog h2 { margin-top: 0; font-size: 1.25em; }
.fa-dialog footer { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; margin-top: 1rem; }

/* agreement */
.fa-terms { max-height: 16rem; overflow: auto; border: 1px solid var(--fa-line-strong); border-radius: var(--fa-radius); padding: .75rem 1rem; background: var(--fa-tint); }
.fa-accept { display: flex; gap: .6rem; align-items: flex-start; margin: 1rem 0; }
.fa-accept input { width: 22px; height: 22px; margin-top: .1rem; }

/* public: UGC notice + tombstone (rendered by the content plugin inside the article) */
.fa-ugc { border-top: 1px solid var(--fa-line-strong); margin-top: 2rem; padding-top: 1rem; font-size: .92em; }
.fa-ugc h2 { font-size: 1em; margin: 0 0 .35rem; }
.fa-ugc p { margin: .25rem 0; }
.fa-ugc .fa-ugc-segments { color: var(--fa-muted); }
.fa-tombstone { border: 1px solid var(--fa-line-strong); border-radius: 12px; padding: 1.5rem; margin: 1rem 0; }
.fa-tombstone h2 { margin-top: 0; }

/* skeleton row for loading */
.fa-skel { display: block; height: .9em; border-radius: 4px; background: var(--fa-tint); }

/* utility */
.fa-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fa-hp { position: absolute; left: -9999px; } /* honeypot */

/* ---------- narrow screens: rows become cards, actions stay labelled ---------- */
@media (max-width: 760px) {
  /* fields and controls may shrink below their intrinsic width */
  .fa-toolbar > .fa-field, .fa-search { flex: 1 1 100%; min-width: 0; }
  .fa-input, .fa-select, .fa-textarea { max-width: 100%; min-width: 0; }
  .fa-head .fa-btn { white-space: normal; }
  .fa-list thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fa-list, .fa-list tbody, .fa-list tr, .fa-list td { display: block; width: 100%; }
  .fa-list tr { position: relative; border-bottom: 1px solid var(--fa-line); padding: .6rem 0 .75rem 2.75rem; }
  .fa-list tr.fa-nocheck { padding-left: 0; }
  .fa-list td { border: 0; padding: .15rem 0; }
  .fa-list td.fa-col-check { position: absolute; left: 0; top: .4rem; width: auto; }
  .fa-list td.fa-col-status { width: auto; }
  .fa-list td.fa-col-actions { width: auto; text-align: left; padding-top: .5rem; white-space: normal; }
  .fa-list .fa-hide-narrow { display: none; }
  /* on phones the menu opens in the page flow (full width), not as a floating popover */
  .fa-actions { display: flex; flex-wrap: wrap; }
  .fa-more[open] { flex-basis: 100%; }
  .fa-more-menu { position: static; min-width: 0; width: 100%; margin-top: .4rem; box-shadow: none; }
  .fa-checks li { grid-template-columns: 1fr; gap: .2rem; }
  .fa-pager { justify-content: center; }
  .fa-flowbar .fa-btn--primary { order: -1; } /* primary first: nearest the thumb, read first */
}

/* report a concern (2b-3) */
.fa-fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
.fa-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: 1rem; margin: 1rem 0; }
.fa-welcome-text > :first-child { margin-top: 0; }

/* draft preview (Prism F10/F11): the sandboxed frame is a labelled box with the same visible focus ring as everything else */
.fa-preview-frame { display: block; width: 100%; min-height: 24em; border: 1px solid var(--fa-line-strong); border-radius: var(--fa-radius); }
.fa-preview-frame:focus-visible { outline: none; box-shadow: var(--fa-focus); }
/* The preview body drawn in the page (0.3.1 C6): no font, size or colour of ours, so the site template's article typography applies. */
.fa-preview-body { margin: 1rem 0; overflow-wrap: anywhere; }
.fa-preview-body img, .fa-preview-body video { max-width: 100%; height: auto; }
.fa-preview-body table { max-width: 100%; }
/* editor review bar (2b-4) */
.fa-review { border: 1px solid var(--fa-line-strong, #c8ccd0); border-radius: var(--fa-radius, 6px); padding: 1rem; margin: 0 0 1rem; background: var(--fa-surface, transparent); }
.fa-review h2 { margin: 0 0 .25rem; font-size: 1.15em; }
.fa-review .fa-dl { margin: .5rem 0; }
.fa-review-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; align-items: flex-start; }
/* One row (0.3.1 C7): a closed Schedule / Return is just a button in the row; opened, it takes the full width for its form. It wraps only when the row is full (narrow screens). */
.fa-review-actions details { flex: 0 0 auto; }
.fa-review-actions details[open] { flex: 1 1 100%; }
.fa-review-actions form { margin: 0; }
/* "See each check" reads as clickable: an arrow that turns when it is open, an underline, a pointer. */
.fa-review #fa-checks > summary { cursor: pointer; text-decoration: underline; text-underline-offset: .2em; display: inline-flex; align-items: center; gap: .35rem; }
.fa-review #fa-checks > summary::after { content: "\25B8"; text-decoration: none; display: inline-block; }
.fa-review #fa-checks[open] > summary::after { content: "\25BE"; }
.fa-review #fa-checks > summary::-webkit-details-marker { display: none; }
.fa-review #fa-checks > summary:hover { text-decoration-thickness: 2px; }
.fa-review-note { width: 100%; }
.fa-review-count { font-size: .9em; opacity: .8; }
.fa-review-other { margin-top: .75rem; }
.fa-review-other form { display: block; margin-top: .4rem; }
.fa-review-other-list { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .5rem; }
.fa-review summary.fa-btn { list-style: none; cursor: pointer; display: inline-flex; }
.fa-review summary.fa-btn::-webkit-details-marker { display: none; }
.fa-review summary.fa-btn::after { content: none; }
.fa-review-done { margin: 0 0 1rem; }

/* image upload (H6): drop zone, one row per file with its own progress and error */
.fa-dropzone { border: 2px dashed var(--fa-line-strong, #8a9097); border-radius: 12px; padding: 1.25rem; text-align: center; cursor: pointer; }
.fa-dropzone:hover, .fa-dropzone:focus-visible, .fa-dropzone--over { border-color: var(--fa-focus-color, currentColor); background: var(--fa-tint, rgba(127, 127, 127, .08)); outline: none; }
.fa-dropzone:focus-visible { box-shadow: var(--fa-focus); }
.fa-uplist { list-style: none; margin: .75rem 0; padding: 0; display: grid; gap: .5rem; }
.fa-uplist li { display: flex; gap: .75rem; align-items: flex-start; border: 1px solid var(--fa-line, #c8ccd0); border-radius: var(--fa-radius, 6px); padding: .5rem; }
.fa-uplist li > div { flex: 1 1 auto; min-width: 0; }
.fa-upthumb { object-fit: contain; border-radius: 4px; flex: 0 0 auto; }
.fa-upbar { width: 100%; }
.fa-upstatus { font-size: .9em; }
.fa-up-bad .fa-upstatus { color: var(--fa-bad, #a40000); font-weight: 600; }
.fa-up-ok .fa-upstatus { color: var(--fa-ok, #1b6e2a); font-weight: 600; }

/* quick feedback on Return to writer (H9): a tick and a few optional words per line; shown to the writer as two short lists */
.fa-fb { margin: .5rem 0; }
.fa-fb .fa-fb-row { display: flex; flex-wrap: wrap; gap: .4rem .75rem; align-items: center; margin: .2rem 0; }
.fa-fb .fa-fb-row .fa-check { flex: 0 1 17rem; }
.fa-fb .fa-fb-row .fa-input { flex: 1 1 12rem; }
.fa-fb-shown { margin-top: .5rem; }
.fa-fb-shown ul { margin: .25rem 0 0; padding-left: 1.25rem; }

/* Live-article actions on the Edit page (0.3.1): real buttons that open dialogs, in one row. */
/* A disclosure that reveals form fields (the concern form): its summary must look clickable. */
.fa-disclose > summary { cursor: pointer; color: var(--fa-link, inherit); text-decoration: underline; }

/* The header button on the Edit page ("Save and go to your articles" / "Back to your articles"): a real button, wrapping on a phone. */
.fa-head .fa-head-btn { flex: 0 0 auto; white-space: normal; }

/* The chip remover (0.3.1): a round, neutral control. It must not take the site template's link colour (red on MWB). */
.fa-root .fa-chip a { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; border-radius: 50%; color: inherit; text-decoration: none; font: inherit; line-height: 1; }
.fa-root .fa-chip a:hover { background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; text-decoration: none; }
.fa-root .fa-chip a:focus-visible { outline: none; background: color-mix(in srgb, currentColor 14%, transparent); box-shadow: var(--fa-focus); }
.fa-root .fa-chips .fa-chips-clear { align-self: center; }

/* The main image step (0.3.1): pick, check the crop, use it - three clearly separate stages. */
.fa-panel { border: 1px solid var(--fa-line); border-radius: var(--fa-radius); padding: .9rem 1rem; margin: 1.1rem 0; }
.fa-panel-h { margin: 0 0 .6rem; font-size: 1.05em; }
.fa-panel--crop { border-color: var(--fa-line-strong); }
.fa-use-row { margin: .8rem 0 .4rem; }
.fa-frame-pos { display: flex; gap: .4rem; flex-wrap: wrap; }

/* How the main image fills the frame (0.4.11): two choice cards and the blurred-background preview. */
.fa-fitcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: .9rem; margin: .6rem 0 .9rem; }
.fa-fitcard { display: grid; gap: .6rem; align-content: start; border: 2px solid var(--fa-line); border-radius: 10px; padding: .75rem; cursor: pointer; position: relative; }
.fa-fitcard:has(input:checked) { border-color: var(--fa-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fa-accent) 18%, transparent); }
.fa-fitcard--off { opacity: .6; cursor: not-allowed; }
.fa-fitcard-t { font-weight: 700; display: flex; align-items: center; gap: .5rem; }
.fa-fitcard-p { font-size: .9em; color: var(--fa-muted); }
.fa-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #111; }
.fa-frame .fa-matte-bg { position: absolute; inset: -12%; width: 124%; height: 124%; max-width: none; object-fit: cover; filter: blur(22px) brightness(.55); }
.fa-frame .fa-matte-mid { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; height: auto; box-shadow: 0 6px 24px rgba(0,0,0,.55); }
.fa-badge { position: absolute; left: .5rem; bottom: .5rem; background: rgba(0,0,0,.65); color: #fff; font-size: .78em; padding: .1rem .55rem; border-radius: 999px; }
.fa-badge--static { position: static; justify-self: start; }
.fa-matte-alt { margin: .8rem 0 0; }
.fa-matte-alt summary { cursor: pointer; color: var(--fa-accent); text-decoration: underline; padding: .4rem 0; }
.fa-matte-alt .fa-frame { max-width: 28rem; margin: .5rem 0; }
.fa-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0; }

/* An image card's "Main image" mark and its insert button (0.3.3). */
.fa-badge-main { display: inline-block; margin-left: .35rem; padding: 0 .45rem; border: 1px solid var(--fa-line-strong); border-radius: 999px; font-size: .8em; font-weight: 600; }
.fa-thumbs form[data-fa-insert] { margin: .4rem 0 .2rem; }

/* Buttons inside an image card wrap inside the card (a long label like "Resize to 800 and put in the text" must not run over the next card); one column on a phone. */
.fa-thumbs li { min-width: 0; }
.fa-thumbs .fa-btn { white-space: normal; max-width: 100%; box-sizing: border-box; text-align: center; height: auto; }
@media (max-width: 480px) { .fa-thumbs { grid-template-columns: 1fr; } }

/* Dialogs sit in the CENTRE of the viewport (0.3.5). The browser centres a modal <dialog> with margin: auto, but a site template or an earlier rule can
   zero one margin (the Import dialog opened at the bottom of the screen on MWB), so the centring is stated here, strongly. */
.fa-root dialog.fa-dialog, dialog.fa-dialog { position: fixed; inset: 0; margin: auto; width: 100%; max-width: min(34rem, calc(100vw - 2rem)); height: fit-content; max-height: calc(100vh - 2rem); overflow: auto; box-sizing: border-box; }

/* 0.3.9: the paste box of the Paste an article dialog: a focusable area, then the paste as it will look in a sandboxed frame. */
.fa-paste-area { border: 2px dashed var(--fa-line-strong, #8a9096); border-radius: var(--fa-radius, 6px); padding: 1.5rem 1rem; text-align: center; cursor: text; min-height: 6rem; display: flex; align-items: center; justify-content: center; }
.fa-paste-area:hover { background: var(--fa-surface, rgba(0, 0, 0, .03)); }
.fa-paste-area:focus-visible { outline: 3px solid var(--fa-focus, #1a56c4); outline-offset: 2px; background: var(--fa-surface, rgba(0, 0, 0, .03)); }
.fa-paste-area--need { border-color: var(--fa-warn, #a05a00); }
.fa-paste-frame { display: block; width: 100%; min-height: 7.5rem; max-height: 26rem; border: 1px solid var(--fa-line-strong, #c8ccd0); border-radius: var(--fa-radius, 6px); background: #fff; resize: vertical; }
.fa-paste-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.fa-paste textarea[hidden], .fa-paste [hidden] { display: none; }

/* 0.4.0: the tags on the Title step - a tick box each, so one can be taken off */
.fa-root .fa-tagpick { display: inline-block; margin: 0 .9rem .35rem 0; min-height: var(--fa-tap); }
.fa-root .fa-tagpick input { width: 1.1rem; height: 1.1rem; vertical-align: middle; }

/* 0.4.6: "Next" waits while chosen images are not added yet, and says why */
.fa-root a.fa-btn--wait { opacity: .55; cursor: not-allowed; }
.fa-nextwhy { margin: .5rem 0; }

/* 0.4.6: the step names are links (to any step), so they look like links */
.fa-root a.fa-step-tab .fa-step-label { text-decoration: underline; text-underline-offset: .2em; }

/* 0.4.6: the main image at the top of both previews */
.fa-preview-main { margin: 0 0 1rem; }
.fa-preview-main img { display: block; max-width: 100%; height: auto; }

/* 0.4.9: the article bar and its panel (docs/mockups/2026-10-23-panel-v2.html). One shared template on the Write view and the Reader view. */
.fa-actionbar { display: grid; gap: .6rem; padding: .6rem .75rem; margin: 0 0 .6rem; border: 1px solid var(--fa-line); border-radius: var(--fa-radius); background: var(--fa-tint); }
.fa-actionbar-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem 1rem; min-width: 0; font-size: .9em; }
.fa-actionbar-state { font-weight: 700; font-size: 1.05em; }
.fa-actionbar-tags, .fa-actionbar-saved { color: var(--fa-muted); }
.fa-actionbar-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.fa-actionbar-end { margin-left: auto; }
.fa-seg { display: inline-flex; border: 1px solid var(--fa-line-strong); border-radius: 6px; overflow: hidden; }
.fa-seg > * { display: inline-flex; align-items: center; min-height: var(--fa-tap); padding: .35rem .9rem; text-decoration: none; color: inherit; }
.fa-seg-on { background: #1d232b; color: #fff; }
.fa-seg-off:hover { background: var(--fa-tint); }
.fa-btn[aria-expanded="true"] { background: #1d232b; color: #fff; border-color: #1d232b; }

.fa-panel { border: 1px solid var(--fa-line); border-radius: var(--fa-radius); margin: 0 0 1rem; }
.fa-panel[hidden], .fa-panel [hidden], .fa-alert[hidden] { display: none; }
.fa-psec { padding: 1rem; border-top: 1px solid var(--fa-line); display: grid; gap: .9rem; }
.fa-psec:first-of-type { border-top: 0; }
.fa-psec-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem .75rem; }
.fa-psec-h h3 { margin: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--fa-muted); }
.fa-psec-h p { margin: 0; font-size: .85rem; color: var(--fa-muted); }

.fa-row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .35rem 1rem; align-items: start; }
.fa-row > label, .fa-row > .fa-lab { font-weight: 600; padding-top: .5rem; }
.fa-field { display: grid; gap: .4rem; min-width: 0; }
.fa-static { margin: 0; padding-top: .5rem; }
.fa-settings { display: grid; gap: 1.1rem; }
.fa-settings datalist { display: none; }
.fa-settings .fa-chips { margin-bottom: 0; font-size: 1em; }
.fa-field > .fa-hint { margin: .15rem 0 0; }
.fa-row + .fa-row { margin-top: .25rem; }
.fa-field select, .fa-field input[type="text"], .fa-field input[type="datetime-local"], .fa-field textarea { width: 100%; }
.fa-inline { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.fa-sub { display: grid; gap: .2rem; flex: 1 1 12rem; min-width: 0; font-size: .85rem; color: var(--fa-muted); }
.fa-opt { display: flex; gap: .5rem; align-items: flex-start; }

.fa-effect { display: inline-flex; align-items: center; gap: .4rem; width: fit-content; font-size: .85rem; padding: .15rem .65rem; border-radius: 999px; background: var(--fa-tint); }
.fa-effect::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.fa-effect--live { background: #e6f4ec; color: #1e7a46; }
.fa-effect--off { background: #fbeae5; color: #a1361f; }
.fa-effect--stay { background: #eceff3; color: #5b6573; }

.fa-chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; border: 1px solid var(--fa-line-strong); border-radius: 6px; padding: .3rem .4rem; min-height: var(--fa-tap); }
.fa-chip { display: inline-flex; align-items: center; gap: .25rem; background: var(--fa-tint); border: 1px solid var(--fa-line); border-radius: 999px; padding: .1rem .25rem .1rem .7rem; }
.fa-chip-x { border: 0; background: transparent; width: 1.75rem; height: 1.75rem; border-radius: 50%; cursor: pointer; color: var(--fa-muted); font-size: 1rem; line-height: 1; }
.fa-chip-x:hover { background: var(--fa-line); }
.fa-chips input[type="text"] { border: 0; flex: 1 1 8rem; min-width: 0; min-height: 2rem; padding: 0 .25rem; background: transparent; }
.fa-chips input[type="text"]:focus { outline: none; box-shadow: none; }

.fa-savebar { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.fa-changes { font-size: .85rem; color: var(--fa-muted); }
.fa-confirm { border: 1px solid #e9c46a; background: #fff6e0; color: #2a2417; border-radius: var(--fa-radius); padding: .9rem; display: grid; gap: .6rem; }
.fa-confirm h4 { margin: 0; font-size: 1rem; }
.fa-confirm ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .25rem; }

.fa-decide { border: 1px solid var(--fa-line); border-radius: var(--fa-radius); padding: .9rem; display: grid; gap: .9rem; background: var(--fa-tint); }
.fa-decide-acts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.fa-ret { border-top: 1px dashed var(--fa-line-strong); padding-top: .8rem; display: grid; gap: .6rem; }
.fa-ticks { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.fa-lab { font-weight: 600; }

.fa-note { border-left: 4px solid #e9c46a; background: #fff6e0; color: #2a2417; padding: .8rem 1rem; border-radius: 0 var(--fa-radius) var(--fa-radius) 0; display: grid; gap: .4rem; }
.fa-note p { margin: 0; }
.fa-note-who { font-size: .85rem; opacity: .8; }
.fa-tagline { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .85rem; }
.fa-tagline span { padding: 0 .6rem; border-radius: 999px; border: 1px solid rgba(0, 0, 0, .2); }

.fa-links { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.fa-links a, .fa-link { color: var(--fa-accent); background: none; border: 0; padding: .35rem 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font: inherit; }
.fa-link.fa-danger, .fa-danger.fa-link { color: var(--fa-bad); }
.fa-btn.fa-danger { color: var(--fa-bad); }
.fa-facts { margin: 0; }
.fa-panel details > summary { cursor: pointer; color: var(--fa-accent); width: fit-content; }
.fa-checks li { grid-template-columns: 5.5rem minmax(0, 1fr) auto; align-items: center; }

/* 0.4.10: the Write step's editor switch */
.fa-editor-switch { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0 0 .75rem; }
.fa-editor-switch-l { font-weight: 600; }
.fa-editor-switch .fa-seg > button { appearance: none; border: 0; background: transparent; font: inherit; cursor: pointer; color: inherit; }
.fa-editor-switch .fa-seg > .fa-seg-on { background: #1d232b; color: #fff; cursor: default; }
.fa-editor-switch .fa-confirm, .fa-editor-switch .fa-alert { flex: 1 1 100%; margin: 0; }
/* nothing in the panel may be wider than the panel: long labels wrap, controls shrink */
.fa-panel, .fa-psec, .fa-psec > *, .fa-decide, .fa-field, .fa-row > * { min-width: 0; }
.fa-panel .fa-btn { max-width: 100%; white-space: normal; text-align: center; }
.fa-opt input[type="checkbox"], .fa-opt input[type="radio"] { width: 1.1rem; height: 1.1rem; flex: none; margin: .2rem 0 0; }
@media (max-width: 40rem) {
  .fa-actionbar .fa-btn, .fa-panel .fa-btn, .fa-seg > * { min-height: 2.75rem; }
  .fa-actionbar-end { margin-left: 0; flex: 1 1 100%; }
  .fa-actionbar-end .fa-btn { width: 100%; justify-content: center; }
  .fa-row { grid-template-columns: minmax(0, 1fr); }
  .fa-row > label, .fa-row > .fa-lab { padding-top: 0; }
  .fa-checks li { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .fa-checks li .fa-fix { grid-column: 2; justify-self: start; }
}

/* Edit requests and the history (0.5.0). The panel section for a live article's changes, the priority pills, the change rows and the timeline. */
.fa-pill { display: inline-block; border-radius: 999px; padding: .05rem .6rem; font-size: .78rem; font-weight: 500; border: 1px solid transparent; }
.fa-pill--urgent { background: color-mix(in srgb, var(--fa-bad) 14%, transparent); color: var(--fa-bad); border-color: color-mix(in srgb, var(--fa-bad) 35%, transparent); }
.fa-pill--normal { background: color-mix(in srgb, var(--fa-accent) 12%, transparent); color: var(--fa-accent); border-color: color-mix(in srgb, var(--fa-accent) 30%, transparent); }
.fa-pill--low { background: var(--fa-tint); color: var(--fa-muted); border-color: var(--fa-line); }
/* the two headings of the ask form are the same size and weight (a legend is bigger than a label by default) */
.fa-cr .fa-lab, .fa-cr legend.fa-lab { font-size: 1rem; font-weight: 700; padding: 0; margin: 0 0 .3rem; float: none; width: auto; }
.fa-cr-kind { display: flex; flex-wrap: wrap; gap: .5rem; }
.fa-cr-kind label { border: 1px solid var(--fa-line); border-radius: 999px; padding: .3rem .8rem; cursor: pointer; display: inline-flex; gap: .4rem; align-items: center; }
.fa-cr-kind label:has(input:checked) { border-color: var(--fa-accent); background: color-mix(in srgb, var(--fa-accent) 10%, transparent); }
.fa-cr-card { border: 1px solid var(--fa-line); border-radius: var(--fa-radius); padding: .9rem; display: grid; gap: .5rem; margin-top: .6rem; }
.fa-cr-ask:has(input[name="fa_cr_kind"][value="remove"]:checked) .fa-cr-edit { display: none; }
.fa-cr-ask:not(:has(input[name="fa_cr_kind"][value="remove"]:checked)) .fa-cr-remove { display: none; }
.fa-cr-rows { display: grid; gap: .6rem; }
.fa-cr-row { display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); gap: .5rem; align-items: start; }
.fa-cr-n { width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--fa-tint); display: grid; place-items: center; font-size: .8rem; color: var(--fa-muted); margin-top: .35rem; }
.fa-cr-two { display: grid; gap: .35rem; }
.fa-cr-prio { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .5rem; }
.fa-cr-prio label { border: 2px solid var(--fa-line); border-radius: var(--fa-radius); padding: .5rem .65rem; cursor: pointer; display: grid; gap: .15rem; }
.fa-cr-prio label:has(input:checked) { border-color: var(--fa-accent); background: color-mix(in srgb, var(--fa-accent) 8%, transparent); }
.fa-cr-prio b { display: flex; gap: .4rem; align-items: center; }
.fa-cr-prio span { font-size: .85em; color: var(--fa-muted); }
.fa-cr-send { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.fa-cr-items { margin: .3rem 0 0; padding-left: 1.3rem; }
.fa-cr-items li { margin: .35rem 0; }
.fa-cr-items--tick { list-style: none; padding-left: 0; }
.fa-cr-items--tick small { margin-left: 1.5rem; }
.fa-cr-items small { display: block; color: var(--fa-muted); }
.fa-cr-items input { margin-right: .4rem; }
.fa-cr-note { margin: .3rem 0; padding: .4rem .7rem; background: var(--fa-tint); border-left: 3px solid var(--fa-line-strong); border-radius: 4px; }
.fa-cr-acts { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; }
.fa-cr-box { flex: 0 1 auto; }
.fa-cr-box[open] { flex: 1 1 100%; }
.fa-root .fa-cr-box > summary.fa-btn--primary, .fa-root .fa-cr-box[open] > summary.fa-btn--primary { color: var(--fa-on-accent); background: var(--fa-accent); }
.fa-cr-box > summary { display: inline-flex; list-style: none; cursor: pointer; }
.fa-cr-box > summary::-webkit-details-marker { display: none; }
.fa-cr-box[open] > summary { margin-bottom: .6rem; }
.fa-cr-box form { display: grid; gap: .5rem; border: 1px solid var(--fa-line); border-radius: var(--fa-radius); padding: .9rem; }
.fa-tl { list-style: none; padding: 0; margin: 0; }
.fa-tl li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .6rem; padding: .5rem 0; border-bottom: 1px dashed var(--fa-line); font-size: .92em; }
.fa-tl li:last-child { border-bottom: 0; }
.fa-tl time { color: var(--fa-muted); font-size: .9em; }
.fa-tl-who { color: var(--fa-muted); }
.fa-tl blockquote { margin: .3rem 0 0; padding: .4rem .7rem; background: var(--fa-tint); border-left: 3px solid var(--fa-line); border-radius: 4px; color: var(--fa-muted); }
.fa-tl-staff blockquote { background: color-mix(in srgb, var(--fa-warn) 10%, transparent); border-left-color: var(--fa-warn); }
.fa-tl-lock { font-size: .75rem; color: var(--fa-warn); border: 1px solid color-mix(in srgb, var(--fa-warn) 40%, transparent); border-radius: 999px; padding: 0 .45rem; margin-left: .3rem; }
.fa-history .fa-psec { border-top: 0; }
@media (max-width: 560px) {
  .fa-tl li { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
}

/* Suggested changes (0.5.1): the editor's list and the writer's. The diff is drawn by the server: red for what goes, green for what comes. */
.fa-sug-item { border: 1px solid var(--fa-line); border-radius: var(--fa-radius); padding: .65rem .8rem; margin-top: .6rem; display: grid; gap: .4rem; }
.fa-sug-item--fixed_now, .fa-sug-item--accepted, .fa-sug-item--reworded { background: color-mix(in srgb, var(--fa-ok) 7%, transparent); border-color: color-mix(in srgb, var(--fa-ok) 35%, transparent); }
.fa-sug-item--kept, .fa-sug-item--todo_done { opacity: .6; }
.fa-sug-item--by_hand { border-color: color-mix(in srgb, var(--fa-warn) 55%, transparent); background: color-mix(in srgb, var(--fa-warn) 7%, transparent); }
.fa-sug-top { display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: center; font-size: .85em; color: var(--fa-muted); }
.fa-sug-tag { border-radius: 999px; padding: 0 .55rem; font-size: .8rem; font-weight: 500; border: 1px solid transparent; }
.fa-sug-tag--mech { background: color-mix(in srgb, var(--fa-ok) 14%, transparent); color: var(--fa-ok); border-color: color-mix(in srgb, var(--fa-ok) 30%, transparent); }
.fa-sug-tag--judg { background: color-mix(in srgb, var(--fa-accent) 12%, transparent); color: var(--fa-accent); border-color: color-mix(in srgb, var(--fa-accent) 30%, transparent); }
.fa-sug-state { font-weight: 600; color: var(--fa-ok); }
.fa-sug-diff { line-height: 1.6; overflow-wrap: anywhere; }
.fa-sug-diff del { background: color-mix(in srgb, var(--fa-bad) 16%, transparent); color: var(--fa-bad); text-decoration: line-through; border-radius: 3px; padding: 0 2px; }
.fa-sug-diff ins { background: color-mix(in srgb, var(--fa-ok) 16%, transparent); color: var(--fa-ok); text-decoration: none; border-radius: 3px; padding: 0 2px; }
.fa-sug-acts { display: flex; flex-wrap: wrap; gap: .4rem; align-items: flex-start; }
.fa-sug-reword { flex: 0 1 auto; }
.fa-sug-reword[open] { flex: 1 1 100%; }
.fa-sug-reword > summary { display: inline-flex; list-style: none; cursor: pointer; }
.fa-sug-reword > summary::-webkit-details-marker { display: none; }
.fa-sug-reword[open] > summary { margin-bottom: .5rem; }
.fa-sug-reword form { display: grid; gap: .5rem; }
.fa-sug-fixed { margin-top: .6rem; }
.fa-sug-fixed > summary { cursor: pointer; color: var(--fa-accent); text-decoration: underline; }
.fa-sug-add input.fa-input, .fa-sug-add select.fa-input { max-width: 100%; }
.fa-sug-ctx { color: var(--fa-muted); }
.fa-sug-drop { color: var(--fa-warn); }
.fa-sug-tag--quill { background: color-mix(in srgb, currentColor 8%, transparent); border-color: color-mix(in srgb, currentColor 25%, transparent); }
.fa-quill-score { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; margin: .2rem 0 .5rem; }
.fa-quill-n b { font-size: 1.25rem; }
.fa-quill-pill { text-transform: none; }
.fa-quill-pill--light_edit { background: color-mix(in srgb, var(--fa-ok) 14%, transparent); color: var(--fa-ok); border-color: color-mix(in srgb, var(--fa-ok) 30%, transparent); }
.fa-quill-pill--revision { background: color-mix(in srgb, var(--fa-warn) 14%, transparent); color: var(--fa-warn); border-color: color-mix(in srgb, var(--fa-warn) 35%, transparent); }
.fa-quill-pill--full_rewrite { background: color-mix(in srgb, var(--fa-bad, #b00020) 12%, transparent); color: var(--fa-bad, #b00020); border-color: color-mix(in srgb, var(--fa-bad, #b00020) 35%, transparent); }
.fa-quill-summary { margin: .2rem 0 .5rem; }
.fa-quill-why { font-size: .85em; color: var(--fa-muted); border-left: 3px solid var(--fa-line); padding-left: .6rem; }