/* The rules editor (usage/rules/): ../usage.css's tokens and components, plus the editor's own parts. Light only, like
   the usage page. No inline style attribute anywhere: the CSP refuses them (../staticwebapp.config.json). The values the
   script writes (--bar-h, a margin card's offset, the head spacer's height) go through the CSSOM, never as style="…".
   The look is row A of the Figma directions, "The rulebook" (Figma ppf9N06t4LZRYaLLpqef8N, 2026-10-16): warm paper, one
   white page in the middle with chapters, tracked words, and a margin of cards beside the lines they are about. Green =
   live, pass and my added words; gold = my draft, a column to check, out of date; red = fail and error; blue = another
   editor only. */

/* ==== 1. tokens (the row's colours that usage.css does not have), and the shared parts this page restyles ==== */
:root {
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ink2: #2E3A33;
  --faint: #8A928D;
  --tint: #EAF2ED;
  --tint2: #D5E6DC;
  --tok: #2C5A44;                 /* a [Column] name */
  --gold-line: #E6D58C;
  --red-line: #E8C3BA;
  --blue-line: #BFD2F2;
  --green-line: #B9D9C6;
  --ol: clamp(212px, 17.5vw, 252px);   /* the outline */
  --mg: clamp(272px, 24vw, 344px);     /* the margin of cards */
  --card-gap: 12px;
  --prose: 16px;
  --prose-lh: 27px;
  --sh-card: 0 1px 2px rgb(18 43 28 / 4%), 0 8px 24px rgb(18 43 28 / 5%);
  --sh-page: 0 1px 2px rgb(18 43 28 / 4%), 0 10px 30px rgb(18 43 28 / 6%);
  --i-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2.5l6 11H2zM8 6.5v3M8 11.5v.01'/%3E%3C/svg%3E");
}
body.rb { background: var(--canvas); }
code { font-family: var(--mono); font-size: 0.92em; background: var(--hover); border-radius: 3px; padding: 0 3px; overflow-wrap: anywhere; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.spacer { flex: 1 1 auto; }
.nowrap { white-space: nowrap; }
.icon { width: 16px; height: 16px; flex: none; vertical-align: -3px; }
.link-btn { text-align: left; }
.cap { margin: 0; color: var(--muted); font: 600 11px/16px var(--font); letter-spacing: 0.06em; text-transform: uppercase; }
.warn { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0; color: var(--gold-text); font-size: 13px; font-weight: 500; line-height: 18px; }
.warn .icon { margin-top: 1px; }
.mcard__text, .summary__text, .band__body, .card__sub, .trycard__reason, .trycard__failed li > span { text-wrap: pretty; }
.dialog__head h2, .mcard__title { text-wrap: balance; }

/* buttons: primary (green, the one next step), quiet (white with a hairline), ghost (green text only) */
.rb .btn { height: 36px; padding: 0 14px; border-radius: 6px; font-size: 14px; box-shadow: 0 1px 2px rgb(0 51 31 / 18%); }
.rb .btn .icon { width: 16px; height: 16px; }
.rb .btn--quiet { background: var(--surface); color: var(--text); border-color: var(--border-strong); box-shadow: none; }
.rb .btn--quiet:hover { background: var(--hover); border-color: var(--border-strong); }
.rb .btn--ghost { background: none; border-color: transparent; color: var(--brand); box-shadow: none; padding: 0 8px; }
.rb .btn--ghost:hover { background: var(--hover); border-color: transparent; }
.rb .btn--small { height: 32px; padding: 0 12px; font-size: 13px; }
.rb .btn--ghost.btn--small { height: 28px; padding: 0 8px; }
.rb .btn[disabled], .rb .btn[disabled]:hover { background: var(--hover); border-color: var(--border); color: var(--muted); box-shadow: none; cursor: not-allowed; }
.rb .btn--danger { background: var(--surface); color: var(--red-text); border-color: var(--red-text); box-shadow: none; }
.rb .btn--danger:hover { background: var(--red-bg); color: var(--red-text); border-color: var(--red-text); }
.rb .btn--redtext { color: var(--red-text); }
.rb .btn[aria-pressed="true"].btn--quiet { background: var(--tint); }
/* the row's chips: small rounded labels in a status colour */
.chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 4px; font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; }
.chip--gold { background: var(--gold-bg); color: var(--gold-text); }
.chip--green { background: var(--green-bg); color: var(--green-text); }
.chip--blue { background: var(--blue-bg); color: var(--blue-text); }
.chip--grey { background: var(--hover); color: var(--muted); }
.chip--small { height: 20px; font-size: 11.5px; }
.tag--changed, .tag--warn, .tag--stale { background: var(--gold-bg); color: var(--gold-text); }
.tag--other { background: var(--blue-bg); color: var(--blue-text); }
.tag--pass, .tag--added { background: var(--green-bg); color: var(--green-text); }
.tag--fail, .tag--dropped { background: var(--red-bg); color: var(--red-text); }
.tag--kind { background: var(--hover); color: var(--text); }
.tag--back { gap: 4px; background: var(--hover); color: var(--text); }
.tag--back .icon { width: 12px; height: 12px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags:empty { display: none; }
/* another editor's initials: blue means another editor, nothing else */
.initials { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--blue-bg); color: var(--blue-text); box-shadow: inset 0 0 0 1px rgb(36 91 184 / 22%); font-size: 9.5px; font-weight: 600; letter-spacing: 0.02em; }
.initials::after { content: attr(data-initials); }
.initials--small { width: 20px; height: 20px; font-size: 8.5px; }
.initials--card { width: 26px; height: 26px; font-size: 10.5px; }
/* a status mark: a green check or a red cross on a filled circle; a gold warning or a blue info as a line icon */
.stmark { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; }
.stmark .icon { width: 11px; height: 11px; stroke-width: 3; }
.stmark--ok { background: var(--green-text); }
.stmark--fail { background: var(--red-text); }
.stmark--warn, .stmark--info { border-radius: 0; }
.stmark--warn { color: var(--gold-text); }
.stmark--info { color: var(--blue-text); }
.stmark--warn .icon, .stmark--info .icon { width: 18px; height: 18px; stroke-width: 1.75; }
.squares { display: inline-flex; flex: none; gap: 5px; }
.sq { width: 12px; height: 12px; border-radius: 2px; background: var(--border); }
.squares--big { gap: 6px; }
.squares--big .sq { width: 14px; height: 14px; }
.sq--ok { background: var(--green-text); }
.sq--fail { background: var(--red-text); }
.sq--stale { background: var(--gold-line); }
.sq--run { background: none; box-shadow: inset 0 0 0 2px var(--border-strong); }

/* ==== 2. the app bar ==== */
.rb .top { position: sticky; top: 0; z-index: 20; }
.rb .top__inner { max-width: none; min-height: 56px; padding: 0 24px; gap: 12px; }
.rb .brand { gap: 16px; flex: none; }
.rb .brand__logo { width: 98px; }
.rb .brand__divider { height: 22px; }
.rb .brand__product { font: 500 15px/1.2 var(--font); letter-spacing: 0; }
.rb .switch { margin: 0 0 0 4px; }
.appbar { display: flex; flex: 1 1 auto; align-items: center; gap: 8px; min-width: 0; }
.appbar__fill { flex: 1 1 auto; }
.savestate { display: inline-flex; align-items: center; gap: 7px; margin: 0 8px 0 0; color: var(--muted); font-size: 13px; white-space: nowrap; }
.savestate::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--green-text); }
.savestate.is-saving::before, .savestate.is-dirty::before { background: var(--gold-text); }
.savestate.is-error { color: var(--red-text); font-weight: 500; }
.savestate.is-error::before { background: var(--red-text); }
.tb { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--text); font: 500 14px/1 var(--font); white-space: nowrap; cursor: pointer; }
.tb--ghost { padding: 0 10px; color: var(--brand); }
.tb--ghost:hover, .tb--ghost[aria-pressed="true"], .tb--ghost[aria-expanded="true"] { background: var(--hover); }
.tb--secondary { background: var(--surface); border-color: var(--border-strong); }
.tb--secondary:hover { background: var(--hover); }
.tb--secondary[aria-disabled="true"] { color: var(--muted); background: var(--surface); }
.tb--primary { background: var(--brand); color: #fff; box-shadow: 0 1px 2px rgb(0 51 31 / 18%); }
.tb--primary:hover { background: var(--brand-hover); }
/* Publish while the gate does not hold: the row's pale green, and the reason in a tip on hover and focus */
.tb--primary[aria-disabled="true"], .tb--primary[aria-disabled="true"]:hover { background: var(--brand); opacity: 0.42; box-shadow: none; }
.tb[aria-disabled="true"] { cursor: not-allowed; }
.tb--icon { width: 36px; padding: 0; color: var(--ink2); }
#btn-outline { display: none; }
.pubwrap { position: relative; display: inline-flex; flex: none; }
.tip { display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: max-content; max-width: 320px; padding: 8px 12px; border-radius: 8px; background: var(--text); color: #fff; font-size: 13px; line-height: 1.35; }
.pubwrap.has-why:hover .tip, .pubwrap.has-why:focus-within .tip { display: block; }
.who { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tint2); color: var(--brand); font-size: 10.5px; font-weight: 600; }
.who::after { content: attr(data-initials); }
.gate { box-shadow: none; }

/* ==== 3. the layout: the outline | the page and its margin; History's sheet at the right ==== */
.rb-app { display: grid; grid-template-columns: var(--ol) minmax(0, 1fr); column-gap: 24px; align-items: start; max-width: 1440px; margin: 0 auto; padding: 24px 24px 64px 20px; }
.docwrap { position: relative; min-width: 0; }
/* the summary card stays in view at the top of the margin: a rail of no height that sticks, so it takes no room */
.summary-rail { position: sticky; top: 64px; z-index: 6; display: grid; grid-template-columns: minmax(0, 1fr) var(--mg); column-gap: 32px; height: 0; pointer-events: none; }
.summary-rail > .summary { grid-column: 2; align-self: start; margin-top: 8px; pointer-events: auto; }
/* the 8 px above the stuck summary hides the cards that pass under it */
.summary-rail > .summary::before { content: ""; position: absolute; left: -2px; right: -2px; bottom: 100%; height: 10px; background: var(--canvas); }
.doc { display: flex; align-items: stretch; gap: 32px; }
.page { flex: 1 1 auto; min-width: 0; padding-bottom: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--sh-page); }
.margin { position: relative; flex: none; width: var(--mg); }
.margin > .mcard { position: absolute; top: 0; left: 0; right: 0; }
.cell { position: relative; min-width: 0; padding: 0 64px 40px 92px; }
/* a cell's own slot for its cards: used below 860 px only */
.notes { display: flex; flex-direction: column; gap: var(--card-gap); min-width: 0; }
.notes:empty { display: none; }

/* ==== 4. the outline ==== */
.outline { position: sticky; top: 56px; display: flex; flex-direction: column; height: calc(100vh - 56px); margin-top: -24px; padding: 34px 0 44px; overflow-y: auto; }
.outline__head { display: flex; align-items: center; justify-content: space-between; min-height: 28px; padding: 0 4px 0 8px; margin-bottom: 4px; }
.outline__findbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.outline__findbtn:hover, .outline__findbtn[aria-expanded="true"] { background: var(--hover); color: var(--brand); }
.outline__findrow { padding: 2px 0 10px; }
.outline__find { width: 100%; height: 34px; font-size: 13.5px; }
.outline__result { margin: 6px 4px 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.outline__result:empty { display: none; }
.ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ol__item { position: relative; display: flex; align-items: center; width: 100%; min-height: 36px; padding: 8px 12px 8px 36px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--ink2); font: 400 13.5px/19px var(--font); text-align: left; cursor: pointer; }
.ol__item:hover { background: rgb(255 255 255 / 70%); }
.ol__item[aria-current="true"] { background: var(--surface); border-color: var(--border); color: var(--text); font-weight: 600; }
.ol__item:focus-visible { outline-offset: -2px; }
.ol__n { position: absolute; left: 12px; color: var(--faint); font: 500 12px/1 var(--font); }
.ol__label { flex: 1 1 auto; min-width: 0; padding-right: 8px; overflow-wrap: anywhere; }
.ol__marks { display: inline-flex; flex: none; align-items: center; gap: 6px; margin-left: auto; }
.ol__dot { width: 8px; height: 8px; border-radius: 50%; }
.ol__dot--gold { background: var(--gold-text); }
.ol__dot--blue { background: var(--blue-text); }
.ol__dot--red { background: var(--red-text); }
.ol__warn, .ol__err { display: inline-flex; }
.ol__warn { color: var(--gold-text); }
.ol__err { color: var(--red-text); }
.ol--fixed { gap: 0; }
.ol--fixed .ol__item { min-height: 32px; padding-top: 6px; padding-bottom: 6px; color: var(--muted); }
.ol__lock { position: absolute; left: 12px; width: 14px; height: 14px; color: var(--faint); }
.outline__fixedcap { margin: 18px 0 6px 8px; }
.outline.is-finding .ol__marks { display: none; }
.ol__item.no-match { color: var(--muted); }
.ol__item[data-count]::after { content: attr(data-count); content: attr(data-count) / ""; flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--gold-bg); color: var(--gold-text); font: 600 12px/20px var(--font); text-align: center; }
.livecard { margin-top: auto; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--sh-card); }
.outline__lists { margin-bottom: 24px; }
.livecard__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.livecard__live { display: inline-flex; align-items: center; gap: 6px; color: var(--green-text); font-size: 11px; font-weight: 500; }
.livecard__live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green-text); }
.livecard__v { margin: 6px 0 4px; font: 700 26px/1.15 var(--display); letter-spacing: -0.015em; }
.livecard__meta { margin: 0 0 8px; color: var(--muted); font-size: 12.5px; }
.livecard__note { margin: 0; color: var(--ink2); font: 500 13px/19px var(--font); overflow-wrap: anywhere; }
.livecard__note.is-note::before { content: "\201C"; }
.livecard__note.is-note::after { content: "\201D"; }

/* ==== 5. the page: its head, the chapters (each written in place), the fixed parts ==== */
.head { padding: 52px 64px 32px; }
.head__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px; }
.head__scope { height: 20px; padding: 0 7px; border-radius: 4px; font-size: 11px; letter-spacing: 0; text-transform: none; }
.head__title { margin: 0 0 10px; font: 700 34px/1.2 var(--display); letter-spacing: -0.015em; }
.head__lede { margin: 0 0 14px; max-width: 560px; color: var(--muted); font-size: 15px; line-height: 23px; }
.head__rule { margin: 20px 0 0; border: 0; border-top: 1px solid var(--border); }
.head--band { padding: 32px 40px 24px; }
/* the how-to line: the warning left, "How to write a rule" right; its body opens under the line */
.howto { position: relative; }
.howto .warn { margin: 0; padding-right: 180px; }
.howto__more > summary { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; gap: 4px; height: 18px; color: var(--brand); font-size: 13px; font-weight: 500; list-style: none; cursor: pointer; white-space: nowrap; }
.howto__more > summary::-webkit-details-marker { display: none; }
.howto__more > summary:hover { text-decoration: underline; }
.howto__chev { width: 14px; height: 14px; }
.howto__more[open] .howto__chev { transform: rotate(180deg); }
.howto__body { margin-top: 12px; padding: 12px 14px; border-radius: 8px; background: var(--canvas); font-size: 13px; line-height: 1.45; }
.howto__body ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 24px; margin: 0; padding: 0; }
.howto__body li { margin-left: 16px; min-width: 0; overflow-wrap: anywhere; }
.howto__example { margin: 8px 0 0; color: var(--muted); }

.ch { scroll-margin-top: 80px; }
.ch__cap { display: none; }
.ch__head { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 28px; margin: 0 0 12px; }
.ch__n { position: absolute; left: -28px; top: 5px; display: inline-flex; color: var(--faint); font: 500 15px/20px var(--font); }
.ch__title { margin: 0; font: 700 21px/28px var(--display); letter-spacing: -0.01em; }
.ch__chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.drafting { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--blue-text); font: 400 12.5px/22px var(--font); cursor: pointer; }
.drafting:hover, .drafting[aria-pressed="true"] { text-decoration: underline; }
/* the chapter in edit: a green bar beside it */
.ch.is-current::before, .ch:focus-within::before { content: ""; position: absolute; left: 40px; top: -6px; bottom: 34px; width: 3px; border-radius: 2px; background: var(--brand); }
.ch--fixed::before, .ch--read::before { display: none; }
/* the text box: a textarea over a mirror of its text. The mirror draws the marks (it has the same font, size, line
   height and wrapping, so each word sits where the textarea has it); the textarea's own text is transparent. */
.ed { position: relative; }
.ed__mirror, .ed__text { font: 400 var(--prose)/var(--prose-lh) var(--font); letter-spacing: 0; word-spacing: 0; white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; tab-size: 4; text-rendering: auto; }
.ed__mirror { min-height: var(--prose-lh); color: var(--text); }
.ed__text { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: transparent; caret-color: var(--text); resize: none; overflow: hidden; outline: none; box-shadow: none; }
.ed__text::selection { background: rgb(0 90 56 / 18%); color: transparent; }
.mk-col { color: var(--tok); }
.mk-add { color: var(--green-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mk-bad { color: var(--red-text); text-decoration: underline wavy var(--red-text) 1px; text-underline-offset: 4px; }
.mk-find { background: var(--gold-bg); box-shadow: inset 0 -2px 0 var(--gold-text); }
.lockchip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; margin: 0 2px; border: 1px dashed var(--border-strong); border-radius: var(--r-pill); background: var(--hover); color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; vertical-align: baseline; }
.lockchip--block { display: flex; width: max-content; max-width: 100%; margin: 6px 0; }
/* the tool line of the chapter in edit: its size, "See what changed", "Columns Atlas can see" (in the room under the text) */
.ch__tools { position: absolute; left: 92px; right: 64px; bottom: 6px; display: flex; align-items: center; gap: 12px; min-height: 28px; color: var(--muted); font-size: 12.5px; }
.ch__tools:empty { display: none; }
.ch__count { font-variant-numeric: tabular-nums; }
.ch__tools .link-btn { font-size: 12.5px; }
.ch__tools .link-btn[aria-pressed="true"] { font-weight: 500; }
.columns { position: relative; }
.columns__summary { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border-radius: 6px; color: var(--brand); font-size: 12.5px; font-weight: 500; list-style: none; white-space: nowrap; cursor: pointer; }
.columns__summary::-webkit-details-marker { display: none; }
.columns__summary:hover, .columns[open] > .columns__summary { background: var(--hover); }
.columns__summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.columns__chev { width: 14px; height: 14px; }
.columns[open] .columns__chev { transform: rotate(180deg); }
.columns__panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 8; display: grid; gap: 8px; width: 380px; max-height: 360px; overflow: auto; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-float); color: var(--text); }
.columns__panel > p { margin: 0; font-size: 12px; line-height: 1.4; }
.columns__find, .columns .select { width: 100%; }
.columns .select[hidden] { display: none; }
.columns__list { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.columns__view { flex: 0 0 100%; margin: 4px 0 0; color: var(--muted); font-size: 12px; font-weight: 500; }
.columns__list > p.muted { margin: 0; font-size: 13px; }
.colbtn { max-width: 100%; height: 28px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: 4px; background: var(--surface); color: var(--text); font: 12px var(--mono); overflow-wrap: anywhere; cursor: pointer; }
.colbtn:hover { background: var(--hover); border-color: var(--brand); }
/* the panels a chapter opens: what changed, another editor's draft; the newer version's words */
.panel { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--canvas); }
.panel__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 8px; }
.panel .diff { margin: 0; padding: 0; border: 0; background: none; }
.diff-legend { margin: 0; color: var(--muted); font-size: 13px; }
.other { border-left: 3px solid var(--blue-text); }
.other__head { margin: 0; min-width: 0; color: var(--blue-text); font-size: 13px; font-weight: 500; }
.other__view button { height: 30px; padding: 0 10px; font-size: 13px; }
.segmented button[aria-pressed="true"] { background: var(--tint); color: var(--brand); }
.theirs { margin-top: 14px; padding: 10px 14px 12px; border: 1px solid var(--blue-line); border-left: 3px solid var(--blue-text); border-radius: 8px; background: #F7FAFE; }
.theirs__head { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--blue-text); font-size: 12.5px; font-weight: 500; }
.theirs__text { margin: 0; font-size: 15px; line-height: 24px; overflow-wrap: anywhere; }
/* read-only text: a fixed part, History, the cover note, the panels */
.readtext { margin: 0; font-size: var(--prose); line-height: var(--prose-lh); white-space: pre-wrap; overflow-wrap: anywhere; }
.coltok { font-family: var(--mono); font-size: 0.86em; color: var(--tok); white-space: nowrap; }
.coltok--warn { text-decoration: underline wavy var(--gold-text) 1px; text-underline-offset: 4px; }
.coltok--error { color: var(--red-text); text-decoration: underline wavy var(--red-text) 1px; text-underline-offset: 4px; }
ins .coltok, del .coltok { color: inherit; }
mark.find-hit { padding: 0 1px; border-radius: 2px; background: var(--gold-bg); color: inherit; box-shadow: inset 0 -2px 0 var(--gold-text); }
.readtext ins, .excerpt ins, .theirs ins, .diff ins, .diff-legend ins, .trycard__field ins { background: none; color: var(--green-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.readtext del, .excerpt del, .theirs del, .diff del, .diff-legend del, .trycard__field del { background: var(--red-bg); color: var(--red-text); text-decoration: line-through; }
ins.is-theirs { color: var(--blue-text); }
.diff { margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--canvas); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 24px; }
.diffs__item { min-width: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.diffs__item + .diffs__item { margin-top: 12px; }
.diffs__title { margin: 0; padding: 8px 12px; background: var(--hover); border-bottom: 1px solid var(--border); border-radius: 7px 7px 0 0; font: 600 13px/1.4 var(--font); overflow-wrap: anywhere; }
.diffs__item .diff { margin: 0; border: 0; border-radius: 0 0 8px 8px; background: var(--surface); }
/* the fixed parts: read only, in muted ink */
.ch--fixed .ch__title { color: var(--muted); }
.ch--fixed .ch__n { top: 6px; }
.ch--fixed .ch__n .icon { width: 16px; height: 16px; }
.ch__fixednote { margin: -4px 0 10px; color: var(--muted); font-size: 13.5px; line-height: 20px; }
.ch--fixed .readtext { color: var(--muted); }
.ch--fixed .readtext strong { color: var(--ink2); }
.safety { list-style: none; margin: 0; padding: 0; color: var(--muted); }
.safety li { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; line-height: 1.5; overflow-wrap: anywhere; }
.safety li > span { min-width: 0; }
.safety .icon { margin-top: 3px; color: var(--faint); }

/* ==== 6. the margin: cards beside their lines ==== */
.mcard { position: relative; min-width: 0; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--sh-card); font-size: 13px; line-height: 19px; overflow-wrap: anywhere; --link: var(--border-strong); --dot: var(--muted); }
.mcard--gold { border-color: var(--gold-line); box-shadow: inset 4px 0 0 var(--gold-text), var(--sh-card); --link: var(--gold-line); --dot: var(--gold-text); }
.mcard--red { border-color: var(--red-line); box-shadow: inset 4px 0 0 var(--red-text), var(--sh-card); --link: var(--red-line); --dot: var(--red-text); }
.mcard--blue { border-color: var(--blue-line); box-shadow: inset 4px 0 0 var(--blue-text), var(--sh-card); --link: var(--blue-line); --dot: var(--blue-text); }
/* the link from a card to its line: a hairline across the gap and a dot at the page's edge */
.mcard.is-linked::before { content: ""; position: absolute; left: -33px; top: 23px; width: 32px; height: 1px; background: var(--link); }
.mcard.is-linked::after { content: ""; position: absolute; left: -36.5px; top: 20px; width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }
.mcard__head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.mcard__head--person { align-items: center; }
.mcard__icon { margin-top: 2px; }
.mcard--gold .mcard__icon { color: var(--gold-text); }
.mcard--red .mcard__icon { color: var(--red-text); }
.mcard__title { flex: 1 1 auto; min-width: 0; margin: 0; font: 600 14px/20px var(--font); }
.mcard__title--soft { font-weight: 500; font-size: 13.5px; }
.mcard__aside { flex: none; color: var(--muted); font-size: 12px; line-height: 20px; white-space: nowrap; }
.mcard__text { margin: 0 0 6px; color: var(--ink2); }
.mcard__sub { margin: 0 0 6px; color: var(--muted); font-size: 12.5px; line-height: 18px; }
.mcard__warn { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 6px; color: var(--gold-text); font-size: 12.5px; font-weight: 500; }
.mcard__warn .icon { width: 14px; height: 14px; margin-top: 2px; }
.mcard__links { display: flex; flex-wrap: wrap; gap: 0 16px; }
.mcard > :last-child { margin-bottom: 0; }
.lint .mcard__text { color: var(--text); font-size: 13.5px; line-height: 21px; }
.lint .btn { margin-top: 6px; }
.mcard--blue .mcard__head--person ~ * { margin-left: 36px; }
.mcard--blue .mcard__head--person ~ .golink { margin-left: 36px; }
.fail .mcard__head ~ * { margin-left: 28px; }
.golink { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0; border: 0; background: none; color: var(--brand); font: 500 13px/1 var(--font); cursor: pointer; }
.golink:hover { text-decoration: underline; }
.golink .icon { width: 14px; height: 14px; }
.golink--plain .icon { display: none; }
.trycard__error { margin: 0 0 8px; color: var(--red-text); font-size: 13px; overflow-wrap: anywhere; }
.trycard__error:empty { display: none; }
/* the summary: my draft, then how far the check got */
.summary__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.summary__title { margin: 0 0 6px; font: 600 16px/22px var(--font); }
.summary__big { display: flex; align-items: baseline; gap: 12px; margin: 2px 0 10px; }
.summary__big strong { font: 700 32px/1.1 var(--display); letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.summary__big span { color: var(--ink2); font-size: 14px; }
.summary .squares--big { margin: 0 0 12px; }
.summary__text { margin: 0; color: var(--muted); }
.summary.is-ready .summary__text { color: var(--green-text); font-weight: 500; }
.summary__squares { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: var(--muted); font-size: 12.5px; }
.summary__label.is-stale { color: var(--gold-text); font-weight: 500; }
.summary__why { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 6px; margin: 10px 0 0; color: var(--red-text); font-weight: 500; }
.summary__why .icon { margin-top: 1px; }
.summary__why .link-btn { color: var(--red-text); }
.summary__links { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12.5px; }
.summary__links .link-btn { font-size: 12.5px; text-decoration: none; }
.summary__links .link-btn:hover { text-decoration: underline; }
.notes__spacer { flex: none; }
/* the requests that planned: one quiet card; "Show" opens the list */
.planned__top { display: flex; align-items: center; gap: 12px; }
.planned__top .squares { gap: 5px; }
.planned__title { flex: 1 1 auto; min-width: 0; margin: 0; font: 500 13.5px/20px var(--font); }
.planned__top .btn { flex: none; white-space: nowrap; }
.planned__list { list-style: none; margin: 12px 0 0; padding: 0; }
.planned__list li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); }
.planned__list .stmark { width: 16px; height: 16px; margin-top: 1px; }
.planned__body { min-width: 0; }
.planned__ask { padding: 0; border: 0; background: none; color: var(--text); font: 500 13px/18px var(--font); text-align: left; cursor: pointer; }
.planned__ask:hover { color: var(--brand); text-decoration: underline; }
.planned__sub { display: block; color: var(--muted); font-size: 12px; line-height: 17px; }

/* ==== 7. bands: a newer publish (gold), the version History shows (green, live; grey, older), the built-in text ==== */
.band { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 12px; padding: 14px 14px 14px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--hover); }
.band--gold { background: var(--gold-bg); border-color: var(--gold-line); }
.band--green { background: var(--green-bg); border-color: var(--green-line); }
.band__icon { width: 18px; height: 18px; margin-top: 1px; color: var(--muted); }
.band--gold .band__icon { color: var(--gold-text); }
.band--green .band__icon { color: var(--green-text); }
.band__text { flex: 1 1 280px; min-width: 0; }
.band__title { margin: 0; color: var(--text); font: 600 14px/20px var(--font); }
.band__body { margin: 2px 0 0; color: var(--ink2); font-size: 13px; line-height: 19px; overflow-wrap: anywhere; }
.band__actions { display: flex; flex-wrap: wrap; align-self: center; gap: 8px; margin-left: auto; }
/* the conflict band: its two buttons go under the text, the main one first */
.band--stack .band__text { flex-basis: calc(100% - 30px); }
.band--stack .band__actions { flex-basis: 100%; margin-left: 30px; }
.band--small { padding: 10px 12px; margin: 0 28px 10px; }
.band--small .band__body { margin: 0; }
.legend-line { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 20px 0 0; color: var(--muted); font-size: 12.5px; }
.legend-line span { display: inline-flex; align-items: center; gap: 8px; }
.legend-line span::before { content: ""; width: 14px; height: 3px; border-radius: 1px; background: var(--green-text); }
.legend-line .legend-line__theirs::before { background: var(--blue-text); }

/* ==== 8. History: the sheet at the right; the page shows the chosen version ==== */
.sheet { position: fixed; top: 56px; right: 0; bottom: 0; z-index: 15; display: flex; flex-direction: column; width: min(440px, 100vw); background: var(--surface); border-left: 1px solid var(--border); box-shadow: 0 0 30px rgb(18 43 28 / 10%); }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 20px 0 28px; }
.sheet__title { margin: 0; font: 700 22px/1.2 var(--display); letter-spacing: -0.01em; }
.sheet__sub { margin: 8px 28px 0; color: var(--muted); font-size: 13px; line-height: 19px; }
.sheet__filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 140px); gap: 8px; padding: 16px 28px 12px; }
.sheet__filter { position: relative; display: block; min-width: 0; }
.sheet__filter .select { width: 100%; height: 36px; font-size: 13.5px; }
.sheet__filter.has-icon .select { padding-left: 34px; }
.sheet__filter .icon { position: absolute; left: 12px; top: 10px; color: var(--faint); pointer-events: none; }
.sheet__count { margin: 0 28px 8px; color: var(--muted); font-size: 12.5px; }
.sheet__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 12px 24px; }
.versions { list-style: none; margin: 0; padding: 0; }
.ver { position: relative; display: flex; align-items: flex-start; gap: 4px; border-radius: 8px; }
.ver + .ver { margin-top: 4px; }
.ver + .ver::before { content: ""; position: absolute; left: 16px; right: 16px; top: -3px; height: 1px; background: var(--border); }
.ver.is-selected, .ver.is-selected + .ver { --sep: transparent; }
.ver.is-selected::before, .ver.is-selected + .ver::before { background: transparent; }
.ver.is-selected { background: var(--tint); box-shadow: inset 3px 0 0 var(--brand); }
.ver__pick { flex: 1 1 auto; display: grid; grid-template-columns: 48px minmax(0, 1fr); min-width: 0; padding: 12px 0 12px 16px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ver__pick:hover { background: var(--hover); }
.ver.is-selected .ver__pick:hover { background: none; }
.ver__v { color: var(--ink2); font: 500 13px/20px var(--mono); }
.ver.is-selected .ver__v { color: var(--brand); }
.ver__main { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.ver__note { color: var(--text); font: 500 14px/20px var(--font); overflow-wrap: anywhere; }
.ver__meta { color: var(--muted); font-size: 12.5px; line-height: 18px; }
.ver__sub { color: var(--muted); font-size: 12px; line-height: 17px; overflow-wrap: anywhere; }
.ver__side { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 8px; padding: 12px 12px 12px 0; }
.ver__side:empty { display: none; }
.ver__side .tag { height: 20px; border-radius: 4px; }
.ver__side .btn--small { height: 28px; padding: 0 10px; font-size: 12.5px; }
.rb-app.is-reading { grid-template-columns: minmax(0, 1fr); padding-right: 464px; }
.rb-app.is-reading .outline, .rb-app.is-reading .summary-rail, .rb-app.is-reading .margin { display: none; }
.rb-app.is-reading .doc { justify-content: center; }
.rb-app.is-reading .page { flex: 0 1 744px; }
.head--reading { padding: 32px 40px 8px; }
.reading { padding-top: 32px; }
.ch--read + .ch--read { margin-top: 40px; }
.ch--read ins { color: var(--brand); font-weight: 500; }

/* ==== 9. the bottom bar (below 860 px), the message line, the drawer's scrim ==== */
.bottombar { display: none; }
.bottombar__inner { display: flex; align-items: center; gap: 12px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
.bottombar__text { flex: 1 1 auto; min-width: 0; }
.bottombar__title { margin: 0; font: 600 14.5px/20px var(--font); }
.bottombar__status { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; overflow: hidden; color: var(--muted); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.bottombar .squares { gap: 3px; }
.bottombar .sq { width: 8px; height: 8px; }
.rb .bottombar__go { flex: none; height: 44px; padding: 0 16px; font-size: 15px; }
.bottombar__go[aria-disabled="true"] { opacity: 0.42; cursor: not-allowed; }
.toast { position: fixed; left: 50%; bottom: calc(var(--bar-h, 0px) + 20px); z-index: 40; display: flex; align-items: center; gap: 12px; max-width: min(560px, calc(100vw - 32px)); padding: 10px 8px 10px 16px; border-radius: 10px; background: var(--text); color: #fff; box-shadow: var(--shadow-float); font-size: 13.5px; line-height: 1.4; transform: translateX(-50%); }
.toast.is-error { background: var(--red-text); }
.toast__text { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.toast .link-btn { color: #fff; font-size: 13.5px; font-weight: 500; }
.toast__x { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: #fff; cursor: pointer; }
.toast__x:hover { background: rgb(255 255 255 / 14%); }
.scrim { position: fixed; inset: 0; z-index: 34; background: rgb(14 26 19 / 30%); }

/* ==== 10. dialogs: the cover note (Publish), Undo and Restore, the merge, Discard, the saved requests ==== */
.dialog { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: 0 4px 10px rgb(14 26 19 / 8%), 0 24px 60px rgb(14 26 19 / 18%); }
.dialog--wide { width: min(1040px, calc(100vw - 32px)); }
.dialog::backdrop { background: rgb(14 26 19 / 38%); }
.dialog[open] { display: flex; flex-direction: column; }
.dialog__head { position: relative; padding: 32px 40px 0; }
.dialog__head .cap { margin-bottom: 4px; }
.dialog__head h2 { margin: 0; padding-right: 40px; font: 700 26px/1.2 var(--display); letter-spacing: -0.015em; overflow-wrap: anywhere; }
.dialog--publish .dialog__head h2 { font-size: 32px; }
.dialog__x { position: absolute; top: 24px; right: 24px; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.dialog__x .icon { width: 20px; height: 20px; }
.dialog__x:hover { background: var(--hover); color: var(--text); }
.sheet__head .dialog__x { position: static; }
.dialog__body { min-height: 0; padding: 12px 40px 24px; overflow: auto; }
.dialog__body > p:first-child { margin-top: 0; }
.dialog__lede { max-width: 620px; margin: 0 0 20px; color: var(--muted); font-size: 14.5px; line-height: 22px; }
.dialog__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; padding: 20px 40px; border-top: 1px solid var(--border); }
.dialog__foot { margin: 0 auto 0 0; color: var(--muted); font-size: 13px; }
.dialog--publish .dialog__actions .btn { height: 40px; padding: 0 16px; font-size: 15px; }
.pub__cap { margin: 0 0 8px; }
.excerpt { padding: 16px 20px 18px; border-radius: 10px; background: var(--canvas); }
.excerpt + .excerpt { margin-top: 10px; }
.excerpt__title { margin: 0 0 8px; color: var(--ink2); font: 600 13px/18px var(--font); }
.excerpt__text { margin: 0; font-size: 15px; line-height: 24px; overflow-wrap: anywhere; }
.evidence { list-style: none; margin: 0; padding: 0; }
.pub__evidence { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 40px; margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid var(--border); }
.evidence__row { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.evidence__row > div { min-width: 0; }
.evidence__row .stmark { margin-top: 1px; }
.evidence__row.is-info, .evidence__row.is-warn { grid-column: 1 / -1; }
.evidence__label { margin: 0; font: 500 14px/20px var(--font); overflow-wrap: anywhere; }
.evidence__sub { margin: 2px 0 0; color: var(--muted); font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
.pub__note { margin-top: 24px; }
.note__label { display: block; margin: 16px 0 8px; font: 600 13px/18px var(--font); }
.pub__note .note__label { margin-top: 0; }
.rb .note { width: 100%; height: 44px; padding: 0 12px; border-radius: 6px; font-size: 15px; }
.note__help { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; color: var(--muted); font-size: 12.5px; line-height: 18px; }
.note__help .icon { width: 14px; height: 14px; margin-top: 2px; color: var(--gold-text); }
.dialog .trycard__error:not(:empty) { margin: 12px 0 0; }
.rollback__sub { margin: 18px 0 4px; }
.rollback__legend { margin: 0 0 8px; }
.rollback__diff { max-height: 40vh; overflow: auto; }
.rollback__diff > p { margin: 0; }
/* the merge: per chapter, two cards side by side, each text marked against the base; the chosen one has a green edge */
.picks { min-width: 0; margin: 16px 0 0; padding: 0; border: 0; }
.picks legend { margin-bottom: 8px; padding: 0; font: 700 15px/1.3 var(--display); }
.picks__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.pick { min-width: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.pick.is-chosen { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.pick__label { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--hover); border-bottom: 1px solid var(--border); border-radius: 7px 7px 0 0; font-weight: 500; cursor: pointer; overflow-wrap: anywhere; }
.pick__label input { flex: none; margin: 0; accent-color: var(--brand); }
.pick.is-chosen .pick__label { background: var(--tint); color: var(--brand); }
.pick .diff { margin: 0; border: 0; border-radius: 0 0 8px 8px; background: var(--surface); max-height: 40vh; overflow: auto; }
.picks ~ p.muted { margin: 12px 0 0; }
.picks ~ p.muted + p.muted { margin-top: 4px; }

/* ==== 11. the saved requests (in a dialog): the results box, one row per request (a list of CI runs); the row body;
   the compare; the list and its editor ==== */
.card { box-shadow: none; }
.card__title { font-size: 18px; }
.results { --try-cols: 16px minmax(0, 1fr) 72px 216px 56px 16px; padding: 0; }
.results__head { display: grid; gap: 2px; padding: 8px 16px 10px; background: var(--hover); border-bottom: 1px solid var(--border); border-radius: 6px 6px 0 0; }
.results__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; }
.results__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; min-width: 0; }
.results__score { margin: 0; min-width: 0; color: var(--muted); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.results__score:empty { display: none; }
.results__score code { font-size: 12px; }
.score__n { color: var(--text); font: 700 18px/1 var(--display); font-variant-numeric: tabular-nums; }
.results__stale { display: flex; align-items: flex-start; gap: 6px; margin: 0; min-width: 0; color: var(--gold-text); font-size: 13px; font-weight: 500; line-height: 1.5; }
.results__stale[hidden] { display: none; }
.results__stale .icon { margin-top: 2px; }
.results__cols { display: grid; grid-template-columns: var(--try-cols); column-gap: 12px; align-items: center; min-height: 28px; padding: 0 16px; background: var(--hover); border-bottom: 1px solid var(--border); color: var(--muted); font-size: 12px; font-weight: 500; }
.results__col-when { text-align: right; }
.cards { display: block; }
.trycard { position: relative; background: var(--surface); scroll-margin-top: 12px; }
.trycard + .trycard { border-top: 1px solid var(--border); }
.trycard__row { position: relative; display: grid; grid-template-columns: var(--try-cols); column-gap: 12px; row-gap: 2px; align-items: start; padding: 10px 16px; }
.trycard__row > * { min-width: 0; }
.trycard__row:hover { background: var(--brand-tint); }
.trycard__icon { display: flex; align-items: center; height: 22px; color: var(--muted); }
.trycard__icon[data-tone="pass"] { color: var(--green-text); }
.trycard__icon[data-tone="fail"] { color: var(--red-text); }
.trycard__icon[data-tone="stale"] { color: var(--gold-text); }
.icon--spin circle { stroke-dasharray: 24 12; }
.trycard__head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0; min-width: 0; }
.trycard__head .tags { gap: 4px; }
.trycard__ask { margin: 0; min-width: 0; font: 500 14px/22px var(--font); overflow-wrap: anywhere; }
.trycard__toggle { padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.trycard__toggle::after { content: ""; position: absolute; inset: 0; }
.trycard__toggle[aria-disabled="true"] { cursor: default; }
.trycard__toggle:focus-visible { outline: none; }
.trycard__toggle:focus-visible::after { outline: 2px solid var(--brand); outline-offset: -2px; }
.trycard__checkcount, .trycard__when { font-size: 13px; line-height: 22px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.trycard__when { color: var(--muted); text-align: right; }
.trycard__cklabel { display: none; }
.ck--met { color: var(--green-text); font-weight: 500; }
.ck--miss { color: var(--red-text); font-weight: 500; }
.trycard__charts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 22px; font-size: 13px; }
.count { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 4px; background: var(--hover); color: var(--muted); font-size: 12px; font-weight: 500; white-space: nowrap; }
.count--changed { background: var(--gold-bg); color: var(--gold-text); }
.count--added { background: var(--green-bg); color: var(--green-text); }
.count--dropped, .count--refused { background: var(--red-bg); color: var(--red-text); }
.trycard__chev { display: flex; align-items: center; justify-content: center; height: 22px; color: var(--muted); }
.trycard.is-open .trycard__chev .icon { transform: rotate(180deg); }
.trycard__line2, .trycard__failed { grid-column: 2 / -1; }
.trycard__line2 p { margin: 0; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.trycard__line2 .link-btn { position: relative; z-index: 1; }
.trycard__progress { color: var(--muted); }
.elapsed { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--text); }
.trycard__reason { margin: 0; color: var(--red-text); font-size: 13px; font-weight: 500; }
.trycard__failed { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; color: var(--red-text); font-size: 13px; line-height: 1.45; }
.trycard__failed li { display: flex; align-items: flex-start; gap: 6px; overflow-wrap: anywhere; }
.trycard__failed li > span { min-width: 0; }
.trycard__failed .icon { width: 14px; height: 14px; margin-top: 2px; }
.trycard__failed .muted { color: var(--muted); }
.trycard__failed .link-btn, .trycard__failed code, .trycard__when { position: relative; z-index: 1; }
.trycard__editcheck { font-weight: 500; white-space: nowrap; }
.tag--running { gap: 6px; background: var(--hover); color: var(--text); }
.tag--running::before { content: ""; flex: none; width: 8px; height: 8px; border: 2px solid var(--border-strong); border-top-color: var(--muted); border-radius: 50%; }
.trycard__body { padding: 12px 16px 16px 44px; background: var(--canvas); border-top: 1px solid var(--border); font-size: 14px; }
.trycard__old { margin: 0 0 12px; padding: 8px 10px; border-radius: 4px; background: var(--hover); color: var(--text); font-size: 13px; font-weight: 500; }
.trycard__body > .trycard__error { margin: 10px 0 0; }
.trycard__counts { margin: 10px 0 6px; color: var(--muted); font-size: 13px; }
.trycard__field { margin: 0 0 6px; font-size: 13px; overflow-wrap: anywhere; }
.trycard__foot { margin: 12px 0 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.checks { margin: 0; font-size: 13px; }
.checks summary { cursor: pointer; }
.checks ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.checks li { overflow-wrap: anywhere; }
.compare { margin-top: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; }
.compare__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--border); }
.compare > .compare__row--head { border-top: 0; background: var(--hover); border-radius: 4px 4px 0 0; }
.compare__row--head .cell { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.compare__same { border-top: 1px solid var(--border); }
.compare__same > summary { padding: 8px 12px; color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer; }
.compare__same > summary:hover { color: var(--text); }
.compare .cell { padding: 10px 12px; min-width: 0; }
.compare .cell--b { border-left: 1px solid var(--border); }
.cell__head { display: flex; flex-wrap: wrap; gap: 6px; }
.cell__title { margin: 6px 0 0; font-weight: 500; overflow-wrap: anywhere; }
.cell--empty p { margin: 6px 0 0; }
.cell__ghost { display: none; }
.cell--refused { background: var(--red-bg); }
.cell--refused p { margin: 6px 0 0; color: var(--red-text); overflow-wrap: anywhere; }
.cell--refused .cell__id { color: var(--muted); }
.compare__more { grid-column: 1 / -1; padding: 0 12px 10px; min-width: 0; }
.side-switch { display: none; margin: 8px; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 8px; }
.chips__label { color: var(--muted); font-size: 12px; }
.chips__group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.chips__kind { color: var(--muted); font-size: 12px; font-weight: 500; }
.chip-sql { display: inline-flex; align-items: center; max-width: 100%; min-height: 22px; padding: 1px 8px; border-radius: var(--r-pill); font: 12px var(--mono); overflow-wrap: anywhere; }
.chip--add { background: var(--green-bg); color: var(--green-text); }
.chip--del { background: var(--red-bg); color: var(--red-text); }
.sql { margin-top: 4px; }
.sql summary { cursor: pointer; color: var(--brand); font-size: 13px; }
.sqldiff { margin: 6px 0 0; padding: 8px 10px; border-radius: 4px; background: var(--canvas); font: 12px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.sql__line { display: block; text-decoration: none; }
ins.sql__line { background: var(--green-bg); color: var(--green-text); text-decoration: none; }
del.sql__line { background: var(--red-bg); color: var(--red-text); text-decoration: none; }
.results__adhoc { display: grid; gap: 6px; padding: 12px 16px; border-top: 1px solid var(--border); }
.results__adhoc-label { font-size: 13px; font-weight: 500; }
.results__adhoc-row { display: flex; gap: 8px; max-width: 640px; min-width: 0; }
.results__adhoc-row .input { flex: 1 1 auto; height: 32px; }
.results__adhoc p, .results__foot p { margin: 0; }
.results__foot { display: grid; gap: 2px; padding: 10px 16px 12px; border-top: 1px solid var(--border); font-size: 12px; }
.golden { padding: 16px; }
.golden > .card__head { align-items: center; margin: -16px -16px 12px; padding: 10px 16px; background: var(--hover); border-bottom: 1px solid var(--border); border-radius: 5px 5px 0 0; }
.golden__rule { margin: 0; font-size: 13px; }
.golden__list { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 8px; }
.golden__list li { padding-left: 4px; }
.golden__ask { display: block; font-weight: 500; overflow-wrap: anywhere; }
.golden__checks { display: block; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.golden__verb { font-weight: 500; }
.golden__history { margin-top: 12px; color: var(--muted); font-size: 13px; }
.golden__history summary { cursor: pointer; color: var(--brand); }
.golden__history ul { margin: 6px 0 0; padding-left: 20px; }
.golden .warn { margin-top: 10px; }
.golden__edit { margin: 10px 0 0; padding-left: 22px; display: grid; gap: 8px; }
.golden__row { display: flex; gap: 8px; align-items: center; }
.golden__askinput { flex: 1 1 auto; }
.golden__checkgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 16px; margin-top: 2px; }
.golden__checkcol { display: grid; gap: 4px; align-content: start; justify-items: start; min-width: 0; }
.golden__checkcol .input { width: 100%; height: 32px; font: 13px var(--mono); }
.golden__checkcol [hidden] { display: none; }
.golden__label { color: var(--muted); font-size: 12px; font-weight: 500; }
.golden__addcheck { font-size: 13px; }
.golden__note { display: flex; align-items: flex-start; gap: 6px; margin: 12px 0 0; color: var(--gold-text); font-size: 13px; font-weight: 500; }
.golden__note .icon { margin-top: 2px; }
.golden__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }

/* ==== 12. motion: only with no reduced-motion preference ==== */
@keyframes rb-card-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
@keyframes rules-flash { from { background-color: var(--gold-bg); } to { background-color: transparent; } }
@keyframes rules-fresh-pass { from { background-color: var(--green-bg); } to { background-color: var(--surface); } }
@keyframes rules-fresh-fail { from { background-color: var(--red-bg); } to { background-color: var(--surface); } }
@keyframes rules-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: no-preference) {
  .mcard.is-new { animation: rb-card-in 240ms ease-out; }
  .is-flash { animation: rules-flash 1.2s ease-out; }
  .howto__chev, .columns__chev { transition: transform 180ms ease-out; }
  .savestate.is-saving::before, .savestate.is-dirty::before, .sq--run { animation: rules-pulse 1.2s ease-in-out infinite; }
  .icon--spin, .tag--running::before { animation: spin 0.9s linear infinite; }
  .trycard__chev .icon { transition: transform 180ms ease-out; }
  .trycard.is-fresh--pass { animation: rules-fresh-pass 900ms ease-out; }
  .trycard.is-fresh--fail { animation: rules-fresh-fail 900ms ease-out; }
  .outline { transition: transform 200ms ease-out, visibility 200ms; }
}
@media (prefers-reduced-motion: reduce) {
  .is-flash { outline: 2px solid var(--gold-text); outline-offset: 2px; }
}

/* ==== 13. widths: 1280 (the save state as a dot), 1180 (the outline as a drawer), 1024 (icon buttons), 860 (one
   column, the cards under their paragraph, the bar at the bottom), 600 (the saved requests' rows and compare stack) ==== */
@media (max-width: 1279px) {
  .savestate { font-size: 0; gap: 0; margin: 0 4px; }
}
@media (max-width: 1179px) {
  .rb .brand__divider, .rb .brand__product { display: none; }
  #btn-outline { display: inline-flex; }
  .rb-app { grid-template-columns: minmax(0, 1fr); padding-left: 24px; }
  .outline { position: fixed; top: 0; left: 0; bottom: 0; z-index: 35; width: min(300px, 86vw); height: auto; margin: 0; padding: 24px 16px; background: var(--canvas); border-right: 1px solid var(--border); box-shadow: var(--shadow-float); transform: translateX(-105%); visibility: hidden; }
  /* it is visible at once when it opens (so it can take the focus), and hidden only after it slides out */
  .rb-app.is-outline-open .outline { transform: none; visibility: visible; transition: transform 200ms ease-out, visibility 0s; }
  .rb-app.is-reading { padding-right: 24px; }
  .sheet { box-shadow: var(--shadow-float); }
}
@media (min-width: 1180px) { .scrim { display: none; } }
@media (max-width: 1023px) {
  #btn-check .tb__label, #btn-history .tb__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #btn-check, #btn-history { width: 36px; padding: 0; }
  .cell { padding-left: 76px; padding-right: 40px; }
  .ch__tools { left: 76px; right: 40px; }
  .ch.is-current::before, .ch:focus-within::before { left: 28px; }
  .head { padding-left: 48px; padding-right: 40px; }
  .howto__body ul { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 859px) {
  body.rb { background: var(--surface); }
  .rb .top { position: static; }
  .rb .top__inner { flex-wrap: wrap; gap: 0 12px; padding: 0 16px; }
  .rb .brand { order: 1; min-height: 52px; }
  .who { order: 2; margin-left: auto; }
  /* the switch is its own row of two equal tabs, edge to edge (usage.css does this at 720 px with its own gutter) */
  .rb .switch { order: 3; flex: 0 0 calc(100% + 32px); margin: 0 -16px; padding: 0 16px; border-top: 1px solid var(--border); gap: 0; }
  .rb .switch__link { flex: 1 1 0; justify-content: center; height: 44px; }
  .appbar { order: 4; flex: 0 0 calc(100% + 32px); min-height: 48px; margin: 0 -16px; padding: 0 12px 0 16px; border-top: 1px solid var(--border); gap: 4px; }
  .appbar .savestate, #btn-check, .appbar .pubwrap { display: none; }
  #btn-history { color: var(--ink2); }
  .rb-app { display: block; padding: 0; }
  .summary-rail, .margin { display: none; }
  .doc { display: block; }
  .page { padding-bottom: 0; border: 0; border-radius: 0; box-shadow: none; }
  .cell { padding: 24px 20px; }
  .cell > .notes { margin-top: 16px; }
  .head { padding: 20px 20px 4px; }
  .head__title { font-size: 26px; }
  .head__rule { display: none; }
  .howto .warn { padding-right: 0; }
  .howto__more > summary { position: static; margin-top: 6px; }
  .ch { border-top: 1px solid var(--border); scroll-margin-top: 16px; }
  .ch__n { display: none; }
  .ch__cap { display: block; margin: 0 0 4px; }
  .ch__title { font-size: 23px; }
  /* the bar runs beside the text only (the cards under it are not the text) */
  .ch.is-current::before, .ch:focus-within::before { display: none; }
  .ch__body { position: relative; }
  .ch.is-current .ch__body::before, .ch:focus-within .ch__body::before { content: ""; position: absolute; left: -12px; top: 0; bottom: 0; width: 3px; border-radius: 2px; background: var(--brand); }
  .ch--fixed .ch__head { padding-left: 24px; }
  .ch--fixed .ch__n { display: inline-flex; left: 0; top: 6px; }
  .ch__tools { position: static; flex-wrap: wrap; margin-top: 10px; }
  :root { --prose: 15px; --prose-lh: 25px; }
  .mcard.is-linked::before, .mcard.is-linked::after { display: none; }
  .bottombar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 12; background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgb(18 43 28 / 8%); }
  body.has-bar { padding-bottom: var(--bar-h, 88px); }
  .sheet { top: 0; z-index: 36; width: 100vw; border-left: 0; }
  .rb-app.is-reading { padding: 0; }
  .head--reading { padding: 16px 16px 0; }
  .reading { padding: 20px; }
  .band__actions { width: 100%; margin-left: 0; }
  .band--small { margin: 0 20px 10px; }
  .sheet__head { padding: 16px 12px 0 20px; }
  .sheet__sub, .sheet__count { margin-left: 20px; margin-right: 20px; }
  .sheet__filters { padding: 12px 20px; }
  .pub__evidence { grid-template-columns: minmax(0, 1fr); }
  .picks__cols { grid-template-columns: minmax(0, 1fr); }
  .columns[open] { flex: 1 1 100%; }
  .columns__panel { position: static; width: auto; max-height: none; margin-top: 8px; box-shadow: none; }
  /* the saved requests' rows: no column heads; a row is the tags, the request, line 2, the failed lines, then one meta line */
  .results__cols { display: none; }
  .trycard__row { grid-template-columns: 20px auto minmax(0, 1fr) auto; column-gap: 8px; row-gap: 4px; }
  .trycard__icon { grid-row: 1; grid-column: 1; margin-right: 4px; }
  .trycard__head { order: 1; grid-row: 1; grid-column: 2 / -1; flex-direction: column-reverse; align-items: flex-start; gap: 4px; }
  .trycard__head .tags { padding-right: 64px; }
  .trycard__when { order: 1; grid-row: 1; grid-column: 4; }
  .trycard__when.is-none { display: none; }
  .trycard__line2, .trycard__failed { order: 2; grid-column: 2 / -1; }
  .trycard__checkcount { order: 4; grid-column: 2; }
  .trycard__cklabel { display: inline; color: var(--muted); }
  .trycard__charts { order: 5; grid-column: 3; }
  .trycard__chev { order: 7; grid-column: 4; justify-self: end; }
  .trycard__body { padding: 12px 16px 16px; }
}
@media (max-width: 600px) {
  .rb .top__inner { gap: 0 8px; }
  /* 16 px in every field: iOS zooms in on a field under 16 px when it gets the focus */
  #app input:not([type="radio"]):not([type="checkbox"]), #app select, .dialog input:not([type="radio"]):not([type="checkbox"]), .dialog textarea, .sheet select { font-size: 16px; }
  .ed__text { font-size: var(--prose); }
  .dialog, .dialog--wide { width: calc(100vw - 16px); max-width: none; max-height: calc(100vh - 16px); }
  .dialog__head { padding: 20px 20px 0; }
  .dialog__head h2, .dialog--publish .dialog__head h2 { font-size: 24px; }
  .dialog__x { top: 12px; right: 12px; }
  .dialog__body { padding: 10px 20px 16px; }
  .dialog__actions { padding: 14px 20px; }
  .dialog__foot { flex-basis: 100%; }
  .dialog__actions .btn { flex: 1 1 auto; }
  .results__head { padding: 8px 12px 12px; }
  .results__adhoc-row { max-width: none; }
  .golden__checkgrid { grid-template-columns: minmax(0, 1fr); }
  .side-switch { display: inline-flex; }
  .side-switch + .compare__row--head { border-top: 1px solid var(--border); border-radius: 0; }
  .compare__row { grid-template-columns: minmax(0, 1fr); }
  .compare .cell--b { border-left: 0; }
  .compare[data-side="draft"] .cell--a, .compare[data-side="current"] .cell--b { display: none; }
  .cell__ghost { display: block; margin-top: 4px; color: var(--muted); font-weight: 500; overflow-wrap: anywhere; }
}