/*
 * The workspace chrome.
 *
 * Three columns: the nine pieces, the work, the settings. Deliberately quiet, and
 * deliberately not XYZ's palette, because the only thing on screen that should look like
 * xyzstorage.com is the page inside the frame. One accent, used only for state.
 *
 * The centre column switches between renderings of the same draft: the page, the text a
 * model would ingest, the client facts behind it, the HTML, the brief. Everything that is a
 * setting rather than content lives on the right, so the middle is only ever the work.
 */

:root {
  /* So the browser's own furniture, scrollbars above all, matches the theme. */
  color-scheme: dark;
  --bg: #0E0E11; --panel: #131317; --card: #191920; --line: #22222A; --line-2: #2E2E38;
  --text: #F2F2F5; --dim: #A6A6B2; --faint: #74747F; --ghost: #4A4A54;
  --accent: #F5D93F; --ok: #5FC98B; --warn: #E8B84B; --bad: #E06C6C;
  --link-c: #7EB0F0;
  --hover: #17171C; --hair: #1D1D24; --panel-2: #101013; --stage: #08080A;
  --pick: #1C1C14; --ok-bg: #14251C; --warn-bg: #1F1A0C; --bad-bg: #1F1212;
  --shadow: rgba(0, 0, 0, .5);
  /* the overview runs lighter than the rest of the app in either theme */
  --home-bg: #2E2E39; --home-card: #3A3A47; --home-card-h: #42424F;
  --home-line: #4A4A59; --home-line-h: #5C5C6C;
  --home-text: #D2D2DA; --home-dim: #B4B4C0; --home-faint: #ABABB6;
  --f: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --m: ui-monospace, SFMono-Regular, Menlo, monospace;
  --pieces: 262px; --ins: 330px;
}
/*
 * Light mode, in the company palette: the cream paper base and the gold-brown from
 * tailwind.config.ts in the-prompt-group, not the retired cognac from the brand-kit PDF.
 * Every colour in this file resolves through a token, so the theme is this block and
 * nothing else. The document view is already paper and deliberately does not change.
 */
:root[data-theme='light'] {
  color-scheme: light;
  --bg: #F6F1E7; --panel: #FBF5EA; --card: #F3ECDD;
  --line: rgba(36, 26, 16, .10); --line-2: rgba(36, 26, 16, .20);
  --text: #241A10; --dim: rgba(36, 26, 16, .74); --faint: rgba(36, 26, 16, .56);
  --ghost: rgba(36, 26, 16, .38);
  --accent: #996311; --link-c: #2B62D9;
  --ok: #2F6B45; --warn: #8A5A0B; --bad: #A3382F;
  --hover: #F0E8D8; --hair: rgba(36, 26, 16, .09); --panel-2: #F1EADB; --stage: #E8E0CE;
  --pick: #F5E9C8; --ok-bg: #E8F0E7; --warn-bg: #F7EEDC; --bad-bg: #F7E6E2;
  --shadow: rgba(36, 26, 16, .18);
  --home-bg: #EFE7D6; --home-card: #FBF5EA; --home-card-h: #FFFCF4;
  --home-line: rgba(36, 26, 16, .14); --home-line-h: rgba(36, 26, 16, .26);
  --home-text: #241A10; --home-dim: rgba(36, 26, 16, .68); --home-faint: rgba(36, 26, 16, .52);
}

* { box-sizing: border-box }
html, body { height: 100% }
/*
 * Three columns, and every panel is pinned to one of them.
 *
 * Hiding a panel with `display: none` used to drop it out of the grid, which slid `main` into
 * the rail's 262px column and squeezed the whole page into a gutter. Collapsing a width to
 * zero cannot do that, so panels close by going to 0 and clipping rather than disappearing.
 */
body {
  margin: 0; display: grid; grid-template-columns: var(--pieces) minmax(0, 1fr) var(--ins);
  background: var(--bg); color: var(--text); font-family: var(--f); font-size: 13px;
  line-height: 1.6; -webkit-font-smoothing: antialiased; overflow: hidden;
  transition: grid-template-columns .18s ease;
}
.pieces { grid-column: 1 }
main { grid-column: 2 }
.inspector { grid-column: 3 }
body.folded { --pieces: 0px }
body.no-ins { --ins: 0px }
body.at-home { --pieces: 0px; --ins: 0px }
::selection { background: var(--pick); color: var(--text) }
input, textarea, select, button { font-family: inherit }

/* ============ pieces ============ */
.pieces { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; overflow: hidden }
body.folded .pieces { border-right: 0 }
.pieces > *, .inspector > * { min-width: 0 }
.pieces header { display: flex; align-items: center; gap: 10px; padding: 16px 14px 13px }
.brand { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; white-space: nowrap }
.mark { display: inline-flex; gap: 1px; flex: none }
.mark i { width: 0; height: 0; border-left: 7px solid var(--accent); border-top: 6px solid transparent; border-bottom: 6px solid transparent }
.mark i + i { border-left-color: var(--text) }
#list { flex: 1; overflow-y: auto; padding: 4px 8px 12px }

.row { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 9px; align-items: start; padding: 8px 10px; cursor: pointer; border-radius: 6px; border: 1px solid transparent }
.row:hover { background: var(--hover) }
.row.on { background: var(--card); border-color: var(--line-2) }
.row .n { font-family: var(--m); font-size: 10.5px; color: var(--ghost); padding-top: 2px; text-align: right }
.row.on .n { color: var(--accent) }
.row h3 { margin: 0; font-size: 12.5px; font-weight: 450; line-height: 1.4; color: var(--dim) }
.row.on h3 { color: var(--text); font-weight: 500 }
.row .meta { margin: 4px 0 0; font-size: 10px; color: var(--ghost); font-family: var(--m); display: flex; gap: 8px; flex-wrap: wrap }
.row .meta .warn { color: var(--warn) }
.dot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; vertical-align: 1.5px; margin-right: 5px }
.dot.drafted { background: var(--ok) } .dot.skeleton { background: var(--ghost) }
.pieces footer { padding: 12px 16px; border-top: 1px solid var(--line); font-size: 10.5px; color: var(--faint); font-family: var(--m); line-height: 1.8; white-space: nowrap }
.pieces footer .warn { color: var(--warn) }

/* the fold buttons */
.collapse, .expand { flex: none; width: 24px; height: 24px; border: 1px solid var(--line); background: var(--panel); border-radius: 5px; cursor: pointer; position: relative; padding: 0 }
.collapse:hover, .expand:hover { border-color: var(--faint) }
.collapse::before, .expand::before { content: ''; position: absolute; inset: 0; margin: auto; width: 7px; height: 7px; border-left: 1.5px solid var(--dim); border-bottom: 1.5px solid var(--dim) }
.collapse::before { transform: rotate(45deg) translate(1px, -1px) }
.expand::before { transform: rotate(-135deg) translate(1px, -1px) }
.collapse { margin-left: auto }
.expand { display: none; margin-right: 4px }
body.folded .expand { display: block }

/* ============ main ============ */
main { display: flex; flex-direction: column; min-width: 0; min-height: 0 }
.bar { display: flex; align-items: center; gap: 16px; padding: 11px 20px; border-bottom: 1px solid var(--line); background: var(--panel); flex: none }
.who { min-width: 0; flex: 1 }
.eyebrow { margin: 0; font-family: var(--m); font-size: 10px; color: var(--faint); letter-spacing: .05em; text-transform: uppercase }
.eyebrow .sep { color: var(--ghost); margin: 0 6px }
.who h1 { margin: 2px 0 0; font-size: 15px; font-weight: 600; letter-spacing: -.018em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

.views { display: flex; gap: 2px; background: var(--bg); padding: 3px; border-radius: 6px; flex: none }
.views button { background: none; border: 0; color: var(--faint); font: inherit; font-size: 12px; padding: 6px 13px; border-radius: 4px; cursor: pointer }
.views button:hover { color: var(--dim) }
.views button.on { background: var(--line); color: var(--text) }

.view { flex: 1; min-height: 0; display: flex; overflow: hidden }
.view.hide { display: none }

/* the page */
.stage { flex: 1; display: flex; justify-content: center; overflow: auto; background: var(--stage); padding: 0 }
.stage.tablet, .stage.mobile { padding: 20px }
#frame { width: 100%; height: 100%; border: 0; background: #F1F1F1; transition: width .18s ease }
.stage.tablet #frame { width: 820px; border-radius: 8px } .stage.mobile #frame { width: 414px; border-radius: 8px }

/* ---- reading panes ---- */
.reading { flex: 1; overflow-y: auto; padding: 26px 30px 60px; max-width: 860px }
.reading.wide { max-width: none }

/* ---- the document ----------------------------------------------------------
 * A light surface, deliberately. Everything else here is chrome; this is the
 * thing being made, and a document reads as a document when it looks like paper.
 * Measure, scale and rhythm are set for reading, not for filling the pane.
 * -------------------------------------------------------------------------- */
.paper-wrap { flex: 1; overflow-y: auto; background: #FAFAF8; display: flex; justify-content: center; color-scheme: light }
.paper {
  width: 100%; max-width: 47rem; padding: 68px 62px 140px; color: #232326;
  font-size: 16px; line-height: 1.68; letter-spacing: -.003em;
  /*
   * The document is paper in both themes, so it declares its own ink and never reads a theme
   * token. It used to colour every heading, bold run and lead paragraph with --panel-2, which
   * is near-black in dark mode and cream in light mode: in light mode the whole document went
   * cream on cream and the headings disappeared.
   */
  --ink: #17171B;
}
.paper h1 {
  margin: 0 0 6px; font-size: 38px; line-height: 1.16; font-weight: 700;
  letter-spacing: -.028em; color: var(--ink);
}
.paper h2 {
  margin: 46px 0 10px; font-size: 23px; line-height: 1.28; font-weight: 650;
  letter-spacing: -.019em; color: var(--ink);
}
.paper h3 { margin: 30px 0 6px; font-size: 17.5px; font-weight: 650; letter-spacing: -.012em; color: var(--ink) }
.paper h4 { margin: 22px 0 4px; font-size: 15.5px; font-weight: 650; color: var(--ink) }
.paper p { margin: 0 0 15px }
.paper > :first-child { margin-top: 0 }
.paper strong, .paper b { font-weight: 650; color: var(--ink) }
.paper em { font-style: italic }

.paper a { color: #232326; text-decoration: underline; text-decoration-color: #C9C9C2; text-underline-offset: 2.5px; text-decoration-thickness: 1px }
.paper a:hover { text-decoration-color: var(--ink) }
.paper a[data-cluster] { text-decoration-color: #E3C63A; text-decoration-thickness: 2px }
.paper a[data-cluster]::after { content: attr(data-cluster); font-size: 9.5px; font-weight: 600; vertical-align: super; color: #A3A399; margin-left: 2px }
.paper a[data-money]::after { content: '↗'; font-size: 9px; vertical-align: super; color: #B5B5AC; margin-left: 1px }

.paper ul, .paper ol { margin: 0 0 15px; padding-left: 26px }
.paper li { margin-bottom: 5px }
.paper li::marker { color: #A3A399 }

/* the answer box, which is the block written to be quoted */
.paper .answer {
  margin: 0 0 26px; padding: 18px 22px; background: #fff; border: 1px solid #E8E8E2;
  border-left: 3px solid #E3C63A; border-radius: 3px;
}
.paper .answer .lead { font-size: 17px; font-weight: 550; color: var(--ink); line-height: 1.55 }
.paper .answer p:last-child { margin-bottom: 0 }

/* Tables, kept as tables.
 * A wide table breaks out of the text measure rather than being squeezed into it, which is
 * what a document editor does with a full-width block, and it scrolls once it runs out of
 * room instead of wrapping a phone number over three lines. */
.paper .table-scroll {
  margin: 0 -38px 26px; overflow-x: auto; border: 1px solid #E8E8E2;
  border-radius: 3px; background: #fff; -webkit-overflow-scrolling: touch;
}
.paper table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 14px; line-height: 1.5 }
.paper td a[href^="tel"], .paper td a[href^="mailto"] { white-space: nowrap }
.paper caption { caption-side: bottom; text-align: left; font-size: 12.5px; color: #8A8A80; padding: 10px 14px 12px; border-top: 1px solid #F0F0EA }
.paper th, .paper td { text-align: left; padding: 9px 14px; border-bottom: 1px solid #F0F0EA; vertical-align: top }
.paper thead th { font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: #6E6E64; background: #FCFCFA; white-space: nowrap }
.paper tbody th { font-weight: 600; color: var(--ink); white-space: nowrap }
.paper tbody tr:last-child th, .paper tbody tr:last-child td { border-bottom: 0 }
.paper table a { text-decoration-color: #D8D8D0 }

/* images, with their captions */
.paper figure { margin: 0 0 26px }
.paper figure img, .paper .img-wrap img { width: 100%; border-radius: 3px; display: block }
.paper figcaption { font-size: 12.5px; color: #8A8A80; margin-top: 9px; line-height: 1.55 }

/* the per-site cards keep their shape, lightened for paper */
.paper .sites { display: grid; gap: 14px; margin: 0 -38px 26px }
.paper .site-card { background: #fff; border: 1px solid #E8E8E2; border-radius: 3px; display: grid; grid-template-columns: 180px minmax(0, 1fr); overflow: hidden }
.paper .site-card > .shot { margin: 0 }
.paper .site-card > .shot img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 }
.paper .site-card .body { padding: 15px 18px }
.paper .site-card h3 { margin: 0 0 3px; font-size: 16px }
.paper .site-card .addr { font-size: 13px; color: #6E6E64; margin: 0 0 10px }
.paper .site-card dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 14px; margin: 0; font-size: 13px }
.paper .site-card dt { color: #8A8A80 }
.paper .site-card dd { margin: 0; font-weight: 550 }
.paper .site-card .note { font-size: 12px; color: #8A8A80; margin: 10px 0 0; line-height: 1.5 }
.paper .site-card .note img { max-width: 180px; border-radius: 2px; margin-top: 5px }
.paper .badge { display: inline-block; background: #F5D93F; color: #17171B; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 2px; vertical-align: middle; margin-left: 7px }

/* FAQ blocks */
.paper .faq { margin: 0 0 10px; padding: 15px 20px; background: #fff; border: 1px solid #E8E8E2; border-radius: 3px }
.paper .faq h3 { margin: 0 0 5px; font-size: 15.5px }
.paper .faq p:last-child { margin-bottom: 0 }

.paper .reviewed { margin: 44px 0 0; padding-top: 18px; border-top: 1px solid #E8E8E2; font-size: 12.5px; color: #8A8A80; line-height: 1.6 }

/* a cited fact, shown where it lands */
.paper mark { background: #FBEFA8; color: inherit; padding: 1px 2px; border-radius: 2px; box-shadow: 0 0 0 1px #F0DE7A }
.paper mark.at { background: #F5D93F; box-shadow: 0 0 0 2px #E3C63A }

.mark-bar {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; background: var(--panel-2); color: var(--dim);
  border: 1px solid var(--line-2); border-radius: 7px; padding: 8px 12px; font-size: 11.5px;
  box-shadow: 0 6px 22px var(--shadow); z-index: 5;
}
.mark-bar.hide { display: none }
.mark-bar b { color: var(--accent); font-family: var(--m); font-weight: 400 }
#v-doc { position: relative }

/* the draft editor */
#f-body { flex: 1; font-family: var(--m); font-size: 12.5px; line-height: 1.75; background: var(--bg); border: 0; color: var(--dim); padding: 22px 30px; resize: none }
#f-body:focus { outline: 0; color: var(--text) }

/* ============ facts ==========================================================
 * A reference ledger, not a dashboard. Hairline rules instead of boxes, mono only
 * where a value is an identifier, colour only where it carries meaning, and one
 * line of explanation per section rather than a paragraph under every heading.
 * ========================================================================== */
.fx { flex: 1; overflow-y: auto; padding: 0 0 80px }
.fx-inner { max-width: 1000px; padding: 30px 34px 0 }

.fx-top { display: flex; align-items: flex-end; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line-2); margin-bottom: 26px }
.fx-top h2 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.02em; flex: 1 }
.fx-count { font-family: var(--m); font-size: 12px; color: var(--dim); white-space: nowrap }
.fx-count b { color: var(--text); font-weight: 500 }
.fx-count i { font-style: normal; color: var(--ghost) }
.fx-find { background: var(--bg); border: 1px solid var(--line-2); border-radius: 5px; padding: 6px 10px; font-size: 12px; color: var(--text); width: 190px }
.fx-find:focus { outline: 0; border-color: var(--faint) }

.fx-lead { margin: -12px 0 26px; font-size: 12.5px; color: var(--faint); line-height: 1.65; max-width: 78ch }

/* section heads: a rule with a label sitting on it */
.fx-h { display: flex; align-items: baseline; gap: 12px; margin: 34px 0 2px }
.fx-h:first-child { margin-top: 0 }
.fx-h h3 { margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: -.008em; color: var(--text) }
.fx-h .rule { flex: 1; height: 1px; background: var(--line) }
.fx-h .num { font-family: var(--m); font-size: 11px; color: var(--ghost) }
.fx-note { margin: 0 0 12px; font-size: 11.5px; color: var(--ghost); max-width: 80ch }

/* the ledger */
.led { width: 100%; border-collapse: collapse; font-size: 12.5px }
.led th, .led td { text-align: left; padding: 7px 12px 7px 0; vertical-align: baseline }
.led thead th { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--ghost); font-weight: 500; padding-bottom: 6px; border-bottom: 1px solid var(--line) }
.led tbody tr { border-bottom: 1px solid var(--hair); cursor: pointer }
.led tbody tr:hover { background: var(--hover) }
.led tbody tr.at { background: var(--pick) }
.led .id { font-family: var(--m); font-size: 10.5px; color: var(--faint); white-space: nowrap; width: 1%; padding-right: 18px }
.led .id em { display: block; font-style: normal; font-size: 9.5px; color: var(--ghost); margin-top: 2px }
.led tbody tr:hover .id, .led tbody tr.at .id { color: var(--accent) }
.led .site { color: var(--dim); white-space: nowrap; width: 1%; padding-right: 16px }
.led .attr { color: var(--faint); width: 26%; padding-right: 16px }
.led .val { color: var(--text); padding-right: 0 }
.led tbody tr.dead { cursor: default }
.led tbody tr.dead:hover { background: none }
.led tbody tr.dead:hover .id { color: var(--faint) }

/* ---- disagreements -----------------------------------------------------------
 * Set as an adjudication: an index, the question, the two claims facing each other
 * across a rule, and a ruling. No card box, no badge, no coloured dot standing in
 * for a word. The outcome is stated in words because that is what a reader needs.
 * -------------------------------------------------------------------------- */
.dis {
  display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 0 18px;
  padding: 22px 0 24px; border-top: 1px solid var(--line);
}
.dis:first-of-type { border-top: 0; padding-top: 4px }

.dis-no {
  grid-row: 1 / span 5; font-family: var(--m); font-size: 19px; font-weight: 400;
  color: var(--ghost); line-height: 1; font-variant-numeric: tabular-nums; padding-top: 3px;
}
.dis.bad .dis-no { color: color-mix(in srgb, var(--bad) 42%, var(--bg)) }
.dis.warn .dis-no { color: color-mix(in srgb, var(--warn) 42%, var(--bg)) }
.dis.ok .dis-no { color: color-mix(in srgb, var(--ok) 42%, var(--bg)) }

.dis-q { display: flex; align-items: baseline; gap: 16px; margin: 0 0 14px }
.dis-q h4 {
  margin: 0; font-size: 15.5px; font-weight: 550; letter-spacing: -.014em;
  line-height: 1.35; color: var(--text); flex: 1;
}
.dis-out-tag {
  font-size: 9.5px; letter-spacing: .11em; text-transform: uppercase; white-space: nowrap;
  color: var(--faint); padding-top: 3px;
}
.dis.bad .dis-out-tag { color: var(--bad) }
.dis.warn .dis-out-tag { color: var(--warn) }
.dis.ok .dis-out-tag { color: var(--ok) }

/* the two claims, facing each other across a hairline */
.dis-sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0 30px; margin: 0 0 15px; position: relative }
.dis-side { position: relative; padding-bottom: 2px }
.dis-side + .dis-side::before {
  content: ''; position: absolute; left: -15px; top: 2px; bottom: 2px; width: 1px; background: var(--line);
}
.dis-side .who {
  margin: 0 0 6px; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
.dis-side .said { margin: 0 0 5px; font-size: 13px; color: var(--text); line-height: 1.55 }
.dis-side .said::before { content: '\201C'; color: var(--ghost) }
.dis-side .said::after { content: '\201D'; color: var(--ghost) }
.dis-side .said.plain::before, .dis-side .said.plain::after { content: none }
.dis-side .from { margin: 0; font-family: var(--m); font-size: 10px; color: var(--ghost) }

.dis-why { margin: 0 0 14px; font-size: 12.5px; color: var(--dim); line-height: 1.6; max-width: 82ch }

/* the ruling */
.dis-out { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: baseline; padding-left: 13px; border-left: 2px solid var(--line-2) }
.dis.bad .dis-out { border-left-color: color-mix(in srgb, var(--bad) 48%, var(--bg)) }
.dis.warn .dis-out { border-left-color: color-mix(in srgb, var(--warn) 50%, var(--bg)) }
.dis.ok .dis-out { border-left-color: color-mix(in srgb, var(--ok) 45%, var(--bg)) }
.dis-out dt { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint) }
.dis-out dd { margin: 0; font-size: 13px; color: var(--text); line-height: 1.6 }

.fx-fold { margin-top: 34px; border-top: 1px solid var(--line); padding-top: 6px }
.fx-fold summary { cursor: pointer; font-size: 12px; color: var(--faint); padding: 8px 0; list-style: none }
.fx-fold summary::-webkit-details-marker { display: none }
.fx-fold summary::before { content: '+'; font-family: var(--m); color: var(--ghost); margin-right: 8px }
.fx-fold[open] summary::before { content: '\2013' }
.fx-fold summary:hover { color: var(--dim) }
.fx-sub-h { margin: 18px 0 4px; font-size: 11px; font-weight: 600; color: var(--dim); display: flex; align-items: baseline; gap: 9px }
.fx-sub-h .rule { flex: 1; height: 1px; background: var(--hair) }
.fx-sub-h .num { font-family: var(--m); font-size: 10px; color: var(--ghost) }
.fx-empty { font-size: 12.5px; color: var(--faint); padding: 8px 0 }

/* ============ inspector ============ */
.inspector { background: var(--panel); border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; overflow: hidden }
body.no-ins .inspector, body.at-home .inspector { border-left: 0 }
.ins-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); flex: none }
.ins-head .mini { margin-left: auto }
.ins-scroll { flex: 1; overflow-y: auto; padding: 4px 0 40px }

.ins { padding: 14px 16px; border-bottom: 1px solid var(--line) }
.ins h3 { margin: 0 0 9px; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); display: flex; align-items: baseline; gap: 7px }
.ins .n { font-family: var(--m); font-size: 9.5px; letter-spacing: 0; text-transform: none; color: var(--faint); font-weight: 400; margin-left: auto }
.ins .n.ok { color: var(--ok) } .ins .n.warn { color: var(--warn) } .ins .n.bad { color: var(--bad) }
.ins input, .ins textarea, .ins select {
  width: 100%; font-size: 12px; background: var(--bg); color: var(--text);
  border: 1px solid var(--line-2); border-radius: 5px; padding: 7px 9px; resize: vertical;
}
.ins input:focus, .ins textarea:focus, .ins select:focus { outline: 0; border-color: var(--faint) }
.lil { display: block; margin-top: 9px; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ghost) }
.lil input, .lil textarea, .lil select { margin-top: 4px; text-transform: none; letter-spacing: 0 }

/* the status ledger: rows of figures, hairline separated. No tiles, no boxes. */
.ledger { display: grid; gap: 0 }
.ledger div { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--hair); font-size: 12px }
.ledger div:last-child { border-bottom: 0 }
.ledger .l { color: var(--faint) }
.ledger .v { margin-left: auto; font-family: var(--m); font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums }
.ledger .v.ok { color: var(--ok) } .ledger .v.warn { color: var(--warn) } .ledger .v.bad { color: var(--bad) }
.ledger .v small { color: var(--ghost); font-size: 10.5px }

/* the slug read: one summary line, then only what needs looking at */
.slug-sum { margin: 8px 0 0; font-size: 10.5px; color: var(--ghost); line-height: 1.5 }
.slug-read { margin-top: 8px }
.slug-read p { display: flex; gap: 7px; margin: 0 0 4px; font-size: 11px; line-height: 1.5; color: var(--dim) }
.slug-read p i { flex: none; width: 4px; height: 4px; border-radius: 50%; margin-top: 6px; background: var(--warn) }
.slug-read p.bad i { background: var(--bad) }
.slug-swap { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--hair); display: flex; flex-direction: column; gap: 6px; align-items: flex-start }
.slug-swap code { font-family: var(--m); font-size: 10.5px; color: var(--link-c); word-break: break-all; line-height: 1.5 }
.slug-swap button { background: none; border: 1px solid var(--line-2); color: var(--dim); font: inherit; font-size: 10.5px; padding: 4px 9px; border-radius: 4px; cursor: pointer }
.slug-swap button:hover { border-color: var(--accent); color: var(--accent) }

.mini { background: none; border: 1px solid var(--line-2); color: var(--dim); font: inherit; font-size: 11px; padding: 5px 11px; border-radius: 5px; cursor: pointer; text-decoration: none; white-space: nowrap }
.mini:hover { border-color: var(--faint); color: var(--text) }
.mini:disabled { border-color: var(--line); color: var(--ghost); cursor: default }
.mini.live { border-color: var(--accent); color: var(--accent) }
.mini.full { width: 100%; margin-top: 9px; text-align: center }

.serp { margin: 8px 0 0; font-size: 12px; color: var(--link-c); line-height: 1.4; word-break: break-word }
.serp.mono { font-family: var(--m); font-size: 10px; color: var(--ghost); margin-top: 6px }
.bar-meter { height: 3px; background: var(--line); border-radius: 2px; margin-top: 8px; overflow: hidden }
.bar-meter i { display: block; height: 100%; background: var(--ok); width: 0; transition: width .15s ease }
.bar-meter i.bad { background: var(--bad) }

.tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px }
.tag { font-family: var(--m); font-size: 10px; padding: 3px 7px; border-radius: 4px; border: 1px solid var(--line-2); color: var(--faint); background: var(--bg) }
.tag b { color: var(--accent); font-weight: 600; margin-left: 4px }
.tag.new { border-color: color-mix(in srgb, var(--warn) 42%, var(--bg)); color: var(--warn) }
details summary { cursor: pointer; font-size: 11px; color: var(--faint); padding: 3px 0 }
details summary:hover { color: var(--dim) }
.code { font-family: var(--m); font-size: 10px; line-height: 1.55; color: var(--dim); background: var(--bg); border: 1px solid var(--line); border-radius: 5px; padding: 10px; max-height: 260px; overflow: auto; margin: 7px 0 0; white-space: pre }

.thumb { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--line) }
.thumb:last-of-type { border-bottom: 0 }
.thumb img { width: 52px; height: 38px; object-fit: cover; border-radius: 3px; background: var(--line) }
.thumb .t-id { font-family: var(--m); font-size: 9.5px; color: var(--accent) }
.thumb .t-cap { font-size: 10.5px; color: var(--faint); line-height: 1.45; margin: 2px 0 0 }
.thumb.primary .t-id { color: var(--warn) }

.q { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--dim); line-height: 1.45 }
.q:last-child { border-bottom: 0 }
.q i { font-style: normal; color: var(--ghost); font-family: var(--m); font-size: 9.5px; margin-right: 6px }

/*
 * Only the path itself is coloured, in a link blue, so it reads as the hyperlink it will
 * become. The panel around it stays neutral like every other section.
 */
.lk { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 11.5px }
.lk:last-child { border-bottom: 0 }
.lk code { font-family: var(--m); font-size: 10.5px; color: var(--link-c); word-break: break-all }
.lk .g { margin-left: auto; flex: none }
.lk a { color: var(--ghost); text-decoration: none; font-size: 10px }
.lk a:hover { color: var(--link-c) }
.pill { font-family: var(--m); font-size: 9px; padding: 2px 6px; border-radius: 3px; border: 1px solid var(--line-2); color: var(--faint); white-space: nowrap }
.pill.on { border-color: color-mix(in srgb, var(--ok) 38%, var(--bg)); color: var(--ok) }
.pill.pending { border-color: color-mix(in srgb, var(--warn) 42%, var(--bg)); color: var(--warn) }
.pill.cluster { border-color: color-mix(in srgb, var(--accent) 40%, var(--bg)); color: var(--accent) }

.cta-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 11px }
.cta-row:last-of-type { border-bottom: 0 }
.cta-row .lab { color: var(--text) }
.cta-row code { grid-column: 1 / -1; font-family: var(--m); font-size: 9.5px; color: var(--ghost); word-break: break-all }
.flag-note { padding: 8px 10px; border-radius: 5px; margin-top: 9px; font-size: 11px; line-height: 1.5 }
.flag-note.warn { background: var(--warn-bg); color: var(--warn) }
.flag-note.bad { background: var(--bad-bg); color: var(--bad) }

.exports { display: grid; gap: 6px }
.ex { display: flex; align-items: baseline; gap: 9px; background: var(--card); border: 1px solid var(--line); border-radius: 5px; padding: 8px 10px; text-decoration: none; color: inherit; font-size: 11.5px }
.ex:hover { border-color: var(--accent) }
.ex .fmt { font-family: var(--m); font-size: 9.5px; color: var(--accent); flex: none; width: 38px }
.ex span.d { color: var(--faint); font-size: 10px; margin-left: auto; text-align: right }

/* ============ brief ============ */
/* Scoped to #brief rather than .reading: the text and facts panes share that class, and a
 * label style leaking onto a conflict question turned it into a shouted heading. */
#brief .lead { color: var(--text); font-size: 14.5px; margin: 0 0 16px; line-height: 1.6 }
#brief h4 { margin: 22px 0 9px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 500 }
#brief p { margin: 0 0 11px; color: var(--dim) }
#brief ul { margin: 0 0 14px; padding-left: 18px; color: var(--dim) }
#brief li { margin-bottom: 7px }

@media (max-width: 1240px) { body { --ins: 300px } }
@media (max-width: 1080px) { body { --pieces: 0px } .expand { display: block } }
@media (max-width: 860px) { body { --ins: 0px } }

/* ============ the port-ready markup view ============ */
.mk { flex: 1; overflow-y: auto }
.mk-inner { max-width: 900px; padding: 28px 34px 90px }
.mk-block { margin-bottom: 34px }
.mk-head { display: flex; align-items: baseline; gap: 12px; padding-bottom: 9px; border-bottom: 1px solid var(--line-2); margin-bottom: 10px }
.mk-head h3 { margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: -.008em; color: var(--text) }
.mk-meta { font-family: var(--m); font-size: 10.5px; color: var(--ghost); flex: 1 }
.mk-say { margin: 0 0 12px; font-size: 11.5px; color: var(--faint); line-height: 1.6; max-width: 82ch }
.mk-say code { font-family: var(--m); font-size: 11px; color: var(--dim) }
.mk-code {
  font-family: var(--m); font-size: 11.5px; line-height: 1.62; color: var(--dim);
  background: var(--card); border: 1px solid var(--line); border-radius: 5px;
  padding: 15px 17px; margin: 0; max-height: 480px; overflow: auto; white-space: pre;
}
.mk-block #f-body {
  width: 100%; height: 420px; font-family: var(--m); font-size: 11.5px; line-height: 1.7;
  background: var(--card); border: 1px solid var(--line); border-radius: 5px;
  color: var(--dim); padding: 15px 17px; resize: vertical;
}
.mk-block #f-body:focus { outline: 0; border-color: var(--line-2); color: var(--text) }
.copy { background: none; border: 1px solid var(--line-2); color: var(--dim); font: inherit; font-size: 10.5px; padding: 4px 10px; border-radius: 4px; cursor: pointer; white-space: nowrap }
.copy:hover { border-color: var(--accent); color: var(--accent) }
.copy.done { border-color: var(--ok); color: var(--ok) }

/* ============ export dropdown ============ */
.drop { position: relative; flex: none }
.drop-btn { background: none; border: 1px solid var(--line-2); color: var(--dim); font: inherit; font-size: 12px; padding: 6px 13px 6px 12px; border-radius: 6px; cursor: pointer }
.drop-btn::after { content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 8px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; transform: rotate(45deg) translateY(-2px) }
.drop-btn:hover { border-color: var(--faint); color: var(--text) }
.drop.open .drop-btn { border-color: var(--accent); color: var(--accent) }
.drop-menu {
  position: absolute; right: 0; top: calc(100% + 7px); min-width: 268px; z-index: 40;
  background: var(--hover); border: 1px solid var(--line-2); border-radius: 7px; padding: 5px;
  box-shadow: 0 12px 34px var(--shadow); display: none;
}
.drop.open .drop-menu { display: block }
.drop-menu a { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 8px 9px; border-radius: 5px; text-decoration: none; color: var(--dim) }
.drop-menu a:hover { background: var(--hover); color: var(--text) }
.drop-menu .fmt { font-family: var(--m); font-size: 10px; color: var(--accent) }
.drop-menu b { font-size: 12px; font-weight: 500; display: block }
.drop-menu span { display: block; font-size: 10.5px; color: var(--ghost); line-height: 1.45; margin-top: 1px }
.drop-menu hr { border: 0; border-top: 1px solid var(--line); margin: 5px 4px }

/* the title, edited where it is shown */
.who h1[contenteditable] { outline: 0; border-radius: 4px; padding: 1px 4px; margin-left: -4px }
.who h1[contenteditable]:hover { background: var(--hover) }
.who h1[contenteditable]:focus { background: var(--hover); box-shadow: inset 0 0 0 1px var(--line-2) }

/* ---- table of contents, in the document view ---- */
.paper .toc { margin: 0 0 30px; padding: 20px 24px 22px; background: #fff; border: 1px solid #E8E8E2; border-radius: 3px }
.paper .toc-title { margin: 0 0 12px; font-size: 10.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: #8A8A80 }
.paper .toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc }
.paper .toc li { counter-increment: toc; position: relative; padding: 5px 0 5px 30px; border-top: 1px solid #F3F3EE; margin: 0 }
.paper .toc li:first-child { border-top: 0; padding-top: 0 }
.paper .toc li:last-child { padding-bottom: 0 }
.paper .toc li::marker { content: none }
.paper .toc li::before { content: counter(toc, decimal-leading-zero); position: absolute; left: 0; top: 5px; font-size: 11px; font-variant-numeric: tabular-nums; color: #BCBCB4; font-weight: 650 }
.paper .toc li:first-child::before { top: 0 }
.paper .toc a { color: #232326; text-decoration: none; font-size: 15px; line-height: 1.45; border-bottom: 1px solid transparent }
.paper .toc a:hover { border-bottom-color: #232326 }
.paper .toc a::after { content: none }
.paper h2[id], .paper h3[id] { scroll-margin-top: 24px }
.paper h2:target::before { content: ''; position: absolute; left: -16px; top: .2em; bottom: .2em; width: 3px; background: #E3C63A; border-radius: 2px }
.paper h2[id] { position: relative }

/* ============ the overview =====================================================
 * Two panels, because there are two halves. Kept plain on purpose: the only thing
 * this page has to do is tell you which half you are working on and let you in.
 * ========================================================================== */
/*
 * Lighter than the rest of the app on purpose. This is the one screen you land on rather than
 * work in, and a near-black panel on a near-black page gave it nothing to stand on.
 */
.home { flex: 1; overflow-y: auto; display: flex; justify-content: center; background: var(--home-bg) }
.home-in { width: 100%; max-width: 800px; padding: 76px 34px 90px }
.home-eyebrow { margin: 0 0 7px; font-family: var(--m); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--home-faint) }
.home-h { margin: 0 0 10px; font-size: 22px; font-weight: 600; letter-spacing: -.022em; color: var(--home-text) }
.home-say { margin: 0 0 30px; font-size: 13px; color: var(--home-dim); line-height: 1.6; max-width: 62ch }
.home-say b { color: var(--home-text); font-weight: 550 }

.halves { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px }
.half {
  display: block; background: var(--home-card); border: 1px solid var(--home-line); border-radius: 8px;
  padding: 22px 24px 20px; text-decoration: none; color: inherit;
  transition: border-color .12s ease, background .12s ease;
}
.half:hover { background: var(--home-card-h); border-color: var(--home-line-h) }
.half-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 5px }
.half-top h3 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.018em; color: var(--home-text); flex: 1 }
.half-n { font-family: var(--m); font-size: 11.5px; color: var(--dim); font-variant-numeric: tabular-nums }
.half-say { margin: 0 0 14px; font-size: 11.5px; color: var(--home-dim); line-height: 1.5 }
.half-rows { display: grid; gap: 0 }
.half-rows div { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-top: 1px solid var(--home-line); font-size: 11.5px }
.half-rows .l { color: var(--home-text) }
.half-rows .v { margin-left: auto; font-family: var(--m); color: var(--home-text); font-variant-numeric: tabular-nums; display: flex; gap: 7px; align-items: baseline }
.half-rows .v em { font-style: normal; color: var(--home-faint); font-size: 10px }

/* the rail knows which half it is showing */
.rail-where { margin: 0; padding: 0 16px 10px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ghost) }
a.brand { text-decoration: none; color: inherit }
a.brand:hover .wm { color: var(--accent) }
.row.place .n { font-size: 9.5px }
.row .kindtag { font-family: var(--m); font-size: 9.5px; color: var(--ghost) }

/* placement detail, plain */
.pl-top { display: flex; align-items: baseline; gap: 14px; padding-bottom: 13px; border-bottom: 1px solid var(--line-2); margin-bottom: 20px }
.pl-top h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.02em; flex: 1; line-height: 1.3 }
.pl-ctl { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--faint) }
.pl-ctl.ours { color: var(--ok) } .pl-ctl.ask { color: var(--warn) } .pl-ctl.community { color: var(--link-c) }
.pl-rows { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 9px 16px; margin: 0 0 22px; font-size: 12.5px }
.pl-rows dt { font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ghost); padding-top: 3px }
.pl-rows dd { margin: 0; color: var(--text); line-height: 1.6 }
.pl-rows dd a { color: var(--link-c); text-decoration: none; word-break: break-all }
.pl-rows dd a:hover { text-decoration: underline }
.pl-h { margin: 0 0 8px; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint) }
.pl-say { margin: 0 0 22px; font-size: 13px; color: var(--dim); line-height: 1.7; max-width: 80ch }
.pl-list { margin: 0 0 22px; padding-left: 17px; font-size: 12.5px; color: var(--dim); line-height: 1.7 }
.pl-list li { margin-bottom: 3px }
.pl-note { margin: 0; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-left: 2px solid var(--line-2); border-radius: 4px; font-size: 12.5px; color: var(--dim); line-height: 1.7 }

body.at-home { background: var(--home-bg) }
/* the overview names itself, so the bar has nothing left to say */
body.at-home .bar { display: none }

/* ============ section index ===================================================
 * A real table, because that is what this is: one row per item, fixed columns, and
 * a summary strip above it. The previous version used a CSS grid per row, which
 * collapsed the title column to nothing on a narrow window and wrapped every word
 * onto its own line. A table sizes itself from its own content and cannot do that.
 * ========================================================================== */
.idx { flex: 1; overflow-y: auto }
.idx-in { max-width: 1140px; padding: 34px 38px 90px; min-width: 0 }

.idx-head { display: flex; align-items: flex-start; gap: 24px; margin-bottom: 24px }
.idx-kicker { margin: 0 0 6px; font-family: var(--m); font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--faint) }
.idx-head h2 { margin: 0 0 8px; font-size: 22px; font-weight: 600; letter-spacing: -.024em }
.idx-say { margin: 0; font-size: 13px; color: var(--dim); line-height: 1.6; max-width: 68ch }

/* the summary strip */
.sum { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 7px; overflow: hidden; margin-bottom: 30px }
.sum-cell { background: var(--card); padding: 13px 16px 12px }
.sum-cell b { display: block; font-size: 21px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--text) }
.sum-cell span { display: block; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); margin-top: 4px }
.sum-cell.nil b { color: var(--ghost) }
.sum-cell.nil span { color: var(--ghost) }
b.st-review { color: var(--link-c) } b.st-approved { color: var(--ok) } b.st-changes { color: var(--warn) }

/* the table */
table.grid { width: 100%; border-collapse: collapse; margin-bottom: 30px; table-layout: auto }
table.grid thead th {
  text-align: left; font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 500; color: var(--faint); padding: 0 14px 9px 0; border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}
table.grid thead th.c-no { color: var(--ghost); font-family: var(--m); letter-spacing: 0; text-transform: none; font-size: 11px }
table.grid tbody tr { border-bottom: 1px solid var(--hair); cursor: pointer }
table.grid tbody tr:hover { background: var(--hover) }
table.grid td { padding: 11px 14px 11px 0; vertical-align: top }

.c-no { width: 30px; font-family: var(--m); font-size: 11px; color: var(--ghost); text-align: right; padding-right: 16px !important; white-space: nowrap }
.c-main b { display: block; font-size: 13.5px; font-weight: 450; color: var(--text); line-height: 1.4 }
.c-main span { display: block; font-family: var(--m); font-size: 10.5px; color: var(--ghost); margin-top: 3px }
.c-cat { width: 20%; font-size: 12px; color: var(--faint); line-height: 1.45 }
.c-quiet { font-size: 11.5px }
.c-num { width: 74px; text-align: right; font-family: var(--m); font-size: 11.5px; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap }
.c-num i { font-style: normal; color: var(--ghost); font-size: 10.5px }
.c-st { width: 150px; white-space: nowrap }
.c-act { width: 64px; text-align: right; padding-right: 0 !important }
.c-act a { font-size: 11.5px; color: var(--faint); text-decoration: none; border-bottom: 1px solid transparent; white-space: nowrap }
.c-act a:hover { color: var(--accent); border-bottom-color: var(--accent) }
table.grid tbody tr:hover .c-act a { color: var(--dim) }

/* state, as a word with a mark in front of it */
.st { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--faint); display: inline-flex; align-items: center; gap: 7px }
.st::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ghost); flex: none }
.st.review::before { background: var(--link-c) } .st.review { color: var(--link-c) }
.st.approved::before { background: var(--ok) } .st.approved { color: var(--ok) }
.st.changes::before { background: var(--warn) } .st.changes { color: var(--warn) }

@media (max-width: 900px) {
  .c-cat, .c-num { display: none }
  .idx-in { padding: 26px 20px 80px }
  .sum { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

/* ============ approval =======================================================
 * The one screen a client uses. Read the piece, then either approve it or say what
 * to change. Nothing else on it.
 * ========================================================================== */
.rv { flex: 1; overflow-y: auto }
.rv-in { max-width: 720px; padding: 30px 34px 90px }
.rv-state { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 7px; background: var(--card); border: 1px solid var(--line); margin-bottom: 22px }
.rv-state .st { font-size: 11px }
.rv-state p { margin: 0; font-size: 11.5px; color: var(--faint); margin-left: auto; text-align: right }

.rv-h { margin: 0 0 9px; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint) }

.rv-do { display: grid; gap: 14px; margin-bottom: 30px }
.rv-f { display: grid; gap: 6px }
.rv-f > span { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); display: flex; gap: 9px; align-items: baseline }
.rv-f > span em { font-style: normal; letter-spacing: 0; text-transform: none; font-size: 10.5px; color: var(--ghost) }
.rv-f input { width: 100%; font: inherit; font-size: 13px; background: var(--bg); color: var(--text); border: 1px solid var(--line-2); border-radius: 6px; padding: 9px 11px }
.rv-f input:focus { outline: 0; border-color: var(--faint) }
.rv-do textarea { width: 100%; font-size: 13px; line-height: 1.6; background: var(--bg); color: var(--text); border: 1px solid var(--line-2); border-radius: 6px; padding: 11px 12px; resize: vertical; min-height: 92px }
.rv-do textarea:focus { outline: 0; border-color: var(--faint) }
.rv-btns { display: flex; gap: 9px; flex-wrap: wrap }
.rv-btn { font: inherit; font-size: 12.5px; padding: 9px 16px; border-radius: 6px; cursor: pointer; border: 1px solid var(--line-2); background: none; color: var(--dim) }
.rv-btn:hover { border-color: var(--faint); color: var(--text) }
.rv-btn.go { border-color: color-mix(in srgb, var(--ok) 45%, var(--bg)); background: var(--ok-bg); color: var(--ok) }
.rv-btn.go:hover { border-color: var(--ok); background: var(--ok-bg) }
.rv-btn.hold { border-color: color-mix(in srgb, var(--warn) 50%, var(--bg)); background: var(--warn-bg); color: var(--warn) }
.rv-btn.hold:hover { border-color: var(--warn) }
.rv-btn:disabled { opacity: .45; cursor: default }
.rv-err { margin: 0; font-size: 11.5px; color: var(--bad) }
/* The shared copy cannot write, and says so where the buttons are. */
.rv-static { margin: 0; font-size: 12px; line-height: 1.6; color: var(--faint); border-left: 2px solid var(--line-2); padding-left: 11px }

.rv-log { display: grid; gap: 0 }
.rv-item { padding: 13px 0; border-top: 1px solid var(--line) }
.rv-item:first-child { border-top: 0 }
.rv-item .meta { display: flex; align-items: baseline; gap: 10px; font-size: 11px; margin-bottom: 5px }
.rv-item .meta b { font-weight: 500; color: var(--text); font-size: 12px }
.rv-item .meta .act { color: var(--faint) }
.rv-item .meta time { margin-left: auto; font-family: var(--m); font-size: 10px; color: var(--ghost) }
.rv-item .said { margin: 0; font-size: 13px; color: var(--dim); line-height: 1.65; white-space: pre-wrap }
.rv-empty { font-size: 12.5px; color: var(--faint) }

.rail-where a { color: inherit; text-decoration: none }
.rail-where a:hover { color: var(--accent) }

/* ---- theme toggle ---- */
.theme { background: none; border: 1px solid var(--line-2); color: var(--faint); font: inherit; font-size: 11px; padding: 5px 11px; border-radius: 6px; cursor: pointer; flex: none }
.theme:hover { border-color: var(--faint); color: var(--text) }
.home-theme { position: absolute; top: 26px; right: 30px; border-color: var(--home-line); color: var(--home-dim) }
.home-theme:hover { border-color: var(--home-line-h); color: var(--home-text) }
#v-home { position: relative }

/* ---- blog categories: theirs, ticked not typed ---- */
.cat { display: grid; grid-template-columns: 15px minmax(0, 1fr) auto; gap: 4px 9px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--hair); cursor: pointer }
.cat:last-of-type { border-bottom: 0 }
.cat input { width: auto; accent-color: var(--accent); margin: 0 }
.cn { font-size: 11.5px; color: var(--faint); line-height: 1.35 }
.cat.on .cn { color: var(--text) }
.cs { grid-column: 2; font-family: var(--m); font-size: 9.5px; color: var(--ghost) }
.cp { grid-row: 1; grid-column: 3; font-family: var(--m); font-size: 9.5px; color: var(--ghost); font-variant-numeric: tabular-nums }
.mk-code.tall { max-height: 560px }

/* ============ third-party destination previews ================================
 *
 * Each destination in its own idiom, because that is the point: a Reddit reply, a
 * LinkedIn article and an Instagram caption are different jobs and should not look
 * alike.
 *
 * Every preview follows the app's theme rather than being pinned light. Reddit,
 * Google, LinkedIn and Instagram all follow the reader's theme, so a white card in a
 * dark workspace reads as a screenshot of somebody else's screen instead of as the
 * page. Each platform therefore carries its own palette in `--p-*` variables, set
 * twice: once here for dark, once under [data-theme='light']. Nothing inside a
 * preview uses an app token, and nothing outside one uses a --p- token, which is
 * what keeps the two from bleeding into each other.
 *
 * The one exception is `.ch-bar`, the strip that names the destination. That is ours,
 * so it is in app tokens.
 * ========================================================================== */
.ch {
  --p-f: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--p-bg); color: var(--p-text); margin-bottom: 20px; font-family: var(--p-f);
}
.ch-bar { display: flex; align-items: center; gap: 9px; padding: 9px 14px; font-size: 12px; border-bottom: 1px solid var(--line); background: var(--panel); color: var(--dim); font-family: var(--f) }
.ch-bar b { font-weight: 600; color: var(--text) }
.ch-logo { width: 17px; height: 17px; flex: none; display: block }
.ch-logo svg { width: 100%; height: 100%; display: block }
.ch-chip { margin-left: auto; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--line-2); border-radius: 3px; padding: 2px 7px }
.ch-h { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--p-dim); margin: 0 0 9px; font-weight: 600 }
.ch-await { border: 1px dashed var(--p-line); border-radius: 8px; padding: 13px 15px }
.ch-await p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--p-dim) }
.ci { width: 16px; height: 16px; fill: currentColor; flex: none; display: block }

/* ---- Reddit ---------------------------------------------------------------- */
.ch-rd { --p-bg: #0E1113; --p-card: #181C1F; --p-text: #D7DADC; --p-dim: #818384; --p-line: #2A2E31; --p-accent: #FF4500; --p-link: #4FBCFF; --p-chip: #24282B }
:root[data-theme='light'] .ch-rd { --p-bg: #fff; --p-card: #F6F7F8; --p-text: #1A1A1B; --p-dim: #787C7E; --p-line: #E9EBED; --p-accent: #FF4500; --p-link: #0079D3; --p-chip: #F2F3F5 }
.rd-page { padding: 14px 16px 18px }
.rd-post { max-width: 700px }
.rd-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 12px }
.rd-round { width: 30px; height: 30px; border-radius: 50%; background: var(--p-chip); display: grid; place-items: center; color: var(--p-text); flex: none }
.rd-round.quiet { margin-left: 0; color: var(--p-dim) }
.rd-snoo { width: 30px; height: 30px; flex: none }
.rd-snoo svg { width: 100%; height: 100% }
.rd-crumb { min-width: 0; line-height: 1.25 }
.rd-crumb b { font-size: 13px; font-weight: 700 }
.rd-crumb span { font-size: 12px; color: var(--p-dim); margin-left: 5px }
.rd-op { margin: 1px 0 0; font-size: 11.5px; color: var(--p-dim) }
.rd-join { margin-left: auto; background: var(--p-link); color: #fff; font-size: 12.5px; font-weight: 700; padding: 6px 15px; border-radius: 999px; flex: none }
:root[data-theme='light'] .rd-join { background: #0079D3 }
.rd-title { margin: 0 0 10px; font-size: 21px; font-weight: 500; line-height: 1.28; letter-spacing: -.01em }
.rd-slugnote { margin: -6px 0 10px; font-size: 11px; color: var(--p-dim) }
.rd-body { margin-bottom: 14px }
.rd-actions { display: flex; align-items: center; gap: 8px; padding-bottom: 14px }
.rd-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--p-chip); border-radius: 999px; padding: 7px 13px; font-size: 12px; color: var(--p-text) }
.rd-pill em { font-style: normal; color: var(--p-dim); font-size: 11.5px }
.rd-pill .ci { width: 15px; height: 15px }
.rd-open { margin-left: auto; font-size: 12px; color: var(--p-link); text-decoration: none }
.rd-open:hover { text-decoration: underline }
.rd-sort { display: flex; align-items: center; gap: 16px; border-top: 1px solid var(--p-line); padding: 12px 0; font-size: 12.5px; color: var(--p-dim) }
.rd-sort b { color: var(--p-text); font-weight: 600 }
.rd-search { margin-left: 0; background: var(--p-chip); border-radius: 999px; padding: 6px 14px; font-size: 12px }
.rd-reply { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding-top: 6px }
.rd-av { width: 28px; height: 28px; border-radius: 50%; overflow: hidden }
.rd-av svg { width: 100%; height: 100% }
.rd-who { display: flex; align-items: center; gap: 7px; margin: 4px 0 8px; font-size: 12px; color: var(--p-dim); flex-wrap: wrap }
.rd-who b { color: var(--p-text); font-weight: 600 }
.rd-tag { background: var(--p-chip); color: var(--p-dim); font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 3px }

/* ---- Reddit: the community we run, and the posts inside it ---- */
.rd-comm { border: 1px solid var(--p-line); border-radius: 8px; overflow: hidden }
.rd-banner { height: 62px; background: linear-gradient(100deg, #FF4500, #FF8717) }
.rd-commhead { display: flex; align-items: center; gap: 12px; padding: 0 16px 14px; margin-top: -18px }
.rd-commicon { width: 62px; height: 62px; border-radius: 50%; border: 4px solid var(--p-bg); background: var(--p-bg); flex: none; overflow: hidden }
.rd-commicon svg { width: 100%; height: 100%; display: block }
.rd-commid { padding-top: 20px; min-width: 0; flex: 1 }
.rd-commid h3 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.01em }
.rd-commid p { margin: 1px 0 0; font-size: 12.5px; color: var(--p-dim) }
.rd-commhead .rd-join, .rd-commhead .rd-round { margin-top: 20px }
.rd-commtabs { display: flex; gap: 22px; padding: 0 16px; border-bottom: 1px solid var(--p-line); font-size: 13px; color: var(--p-dim) }
.rd-commtabs span { padding: 9px 0 10px }
.rd-commtabs .on { color: var(--p-text); box-shadow: inset 0 -2px 0 var(--p-text) }
.rd-commbody { display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: 16px; padding: 14px 16px 16px }
.rd-newpost { display: flex; align-items: center; gap: 10px; border: 1px solid var(--p-line); border-radius: 6px; padding: 9px 12px; margin-bottom: 12px }
.rd-newbox { flex: 1; background: var(--p-chip); border-radius: 5px; padding: 7px 12px; font-size: 12.5px; color: var(--p-dim) }
.rd-av.sm { width: 26px; height: 26px }
.rd-side { border: 1px solid var(--p-line); border-radius: 6px; padding: 13px 14px; align-self: start }
.rd-sideh { margin: 0 0 7px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--p-dim); font-weight: 700 }
.rd-sideh + .rd-sideh, .rd-stats + .rd-sideh, .rd-rules + .rd-sideh { margin-top: 15px }
.rd-sidep { margin: 0 0 13px; font-size: 12.5px; line-height: 1.55; color: var(--p-text) }
.rd-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-bottom: 4px }
.rd-stats b { display: block; font-size: 15px; font-weight: 600 }
.rd-stats span { font-size: 11.5px; color: var(--p-dim) }
.rd-rules { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.5; color: var(--p-text) }
.rd-rules li { margin-bottom: 5px }
.rd-flairs { display: flex; flex-wrap: wrap; gap: 5px }
.rd-flairs span { font-size: 11px; background: var(--p-chip); border-radius: 999px; padding: 3px 9px; color: var(--p-dim) }
.rd-flair { display: inline-block; font-size: 11px; font-weight: 600; background: var(--p-accent); color: #fff; border-radius: 3px; padding: 2px 8px; margin-bottom: 8px }
.rd-plan { border: 1px solid var(--p-line); border-radius: 6px; padding: 12px 14px; margin-bottom: 14px }
.rd-plan ul { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; color: var(--p-text) }
@media (max-width: 900px) { .rd-commbody { grid-template-columns: minmax(0, 1fr) } }

/* ---- LinkedIn: the Pulse article ------------------------------------------- */
.ch-li { --p-bg: #1B1F23; --p-card: #1D2226; --p-text: rgba(255,255,255,.9); --p-dim: rgba(255,255,255,.6); --p-line: #38434F; --p-link: #71B7FB; --p-chip: #293138 }
:root[data-theme='light'] .ch-li { --p-bg: #F4F2EE; --p-card: #fff; --p-text: rgba(0,0,0,.9); --p-dim: rgba(0,0,0,.6); --p-line: #E2E0DC; --p-link: #0A66C2; --p-chip: #F3F2EF }
.li-page { padding: 18px }
.li-art { max-width: 680px; margin: 0 auto; background: var(--p-card); border: 1px solid var(--p-line); border-radius: 8px; overflow: hidden }
.li-cover { height: 150px; background: var(--p-chip); display: grid; place-items: center; border-bottom: 1px solid var(--p-line) }
.li-cover span { font-size: 11.5px; color: var(--p-dim) }
.li-artin { padding: 22px 26px 6px }
.li-h1 { margin: 0 0 18px; font-size: 27px; line-height: 1.24; font-weight: 600; letter-spacing: -.015em }
.li-by { display: flex; align-items: center; gap: 11px; margin-bottom: 18px }
.li-av { width: 46px; height: 46px; border-radius: 3px; background: #2B2E33; color: #F5D93F; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 700 }
.li-byid { min-width: 0; flex: 1 }
.li-name { margin: 0; font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 5px }
.li-vf { display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--p-link); color: #fff }
.li-vf .ci { width: 10px; height: 10px }
.li-sub, .li-when { margin: 1px 0 0; font-size: 12px; color: var(--p-dim) }
.li-follow { font-size: 13px; font-weight: 600; color: var(--p-link); border: 1px solid var(--p-link); border-radius: 999px; padding: 5px 15px; flex: none }
.li-foot { border-top: 1px solid var(--p-line); margin: 20px 26px 0; padding: 12px 0 14px }
.li-react { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--p-dim); margin-bottom: 8px }
.li-react span { width: 16px; height: 16px; border-radius: 50%; display: inline-block }
.li-r1 { background: #0A66C2 } .li-r2 { background: #DF704D; margin-left: -9px }
.li-react em { font-style: normal; margin-left: 5px }
.li-acts { display: flex; gap: 24px }
.li-acts span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--p-dim) }

/* ---- Instagram ------------------------------------------------------------- */
.ch-ig { --p-bg: #000; --p-card: #000; --p-text: #F5F5F5; --p-dim: #A8A8A8; --p-line: #262626; --p-link: #0095F6; --p-chip: #1A1A1A }
:root[data-theme='light'] .ch-ig { --p-bg: #fff; --p-card: #fff; --p-text: #262626; --p-dim: #737373; --p-line: #DBDBDB; --p-link: #0095F6; --p-chip: #FAFAFA }
.ig-page { padding: 20px }
.ig-prof { max-width: 620px; margin: 0 auto }
/* A feed post is 470px wide on the web, and at any other width it stops reading as one. */
.ig-post { max-width: 470px; margin: 0 auto }
.ig-head { display: flex; gap: 26px; align-items: flex-start }
.ig-ring { width: 88px; height: 88px; border-radius: 50%; padding: 3px; flex: none; background: conic-gradient(from 20deg, #FFD521, #F50000, #B900B4, #4C68D7, #FFD521) }
.ig-av { width: 100%; height: 100%; border-radius: 50%; background: var(--p-chip); display: grid; place-items: center; font-size: 15px; font-weight: 700; color: var(--p-text); box-shadow: 0 0 0 3px var(--p-bg) inset }
.ig-av.sm { width: 34px; height: 34px; font-size: 10px; flex: none; box-shadow: none }
.ig-id { min-width: 0; flex: 1 }
.ig-handle { margin: 0 0 14px; font-size: 19px; display: flex; align-items: center; gap: 14px }
.ig-handle b { font-weight: 400 }
.ig-btn { font-size: 13px; font-weight: 600; background: var(--p-chip); border: 1px solid var(--p-line); border-radius: 8px; padding: 6px 14px }
.ig-stats { margin: 0 0 12px; display: flex; gap: 26px; font-size: 14px; color: var(--p-text) }
.ig-stats b { font-weight: 600 }
.ig-name { margin: 0 0 10px; font-size: 14px; font-weight: 600 }
.ig-tabs { display: flex; justify-content: center; gap: 46px; border-top: 1px solid var(--p-line); margin-top: 26px }
.ig-tabs span { display: inline-flex; align-items: center; gap: 7px; padding: 15px 0; font-size: 11px; letter-spacing: .09em; font-weight: 600; color: var(--p-dim) }
.ig-tabs .on { color: var(--p-text); box-shadow: inset 0 2px 0 var(--p-text) }
.ig-tabs .ci { width: 12px; height: 12px }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px }
.ig-grid span { aspect-ratio: 1; background: var(--p-chip); border: 1px solid var(--p-line) }
.ig-pbar { display: flex; align-items: center; gap: 11px; padding-bottom: 12px }
.ig-phandle { margin: 0; font-size: 13.5px; font-weight: 600 }
.ig-ploc { margin: 0; font-size: 11.5px; color: var(--p-dim) }
.ig-dots { margin-left: auto; color: var(--p-dim) }
.ig-frame { aspect-ratio: 1; background: var(--p-chip); border: 1px solid var(--p-line); display: grid; place-items: center }
.ig-frame span { font-size: 12px; color: var(--p-dim) }
.ig-acts { display: flex; align-items: center; gap: 16px; padding: 12px 0 6px; color: var(--p-text) }
.ig-acts .ci { width: 22px; height: 22px }
.ig-acts .sp { flex: 1 }
.ig-caph { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5 }
.ig-caph b { font-weight: 600 }

/* ---- Google Business Profile, manager view --------------------------------- */
.ch-g { --p-bg: #202124; --p-card: #303134; --p-text: #E8EAED; --p-dim: #9AA0A6; --p-line: #3C4043; --p-link: #8AB4F8; --p-star: #FDD663; --p-green: #81C995; --p-chip: #303134 }
:root[data-theme='light'] .ch-g { --p-bg: #fff; --p-card: #fff; --p-text: #202124; --p-dim: #70757A; --p-line: #DADCE0; --p-link: #1A73E8; --p-star: #FBBC04; --p-green: #188038; --p-chip: #F1F3F4 }
.g-page { padding: 14px 18px 18px }
.g-top { display: flex; align-items: center; gap: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--p-line); margin-bottom: 16px }
.g-glogo { font-size: 21px; font-weight: 500; letter-spacing: -.02em; color: var(--p-text) }
.g-searchbox { flex: 1; max-width: 520px; border: 1px solid var(--p-line); border-radius: 999px; padding: 8px 18px; font-size: 14px; color: var(--p-text); background: var(--p-chip) }
.g-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 26px; align-items: start }
.g-mgr { display: flex; align-items: center; gap: 11px; margin-bottom: 14px }
.g-mgr-av { width: 30px; height: 30px; border-radius: 50%; background: var(--p-chip); border: 1px solid var(--p-line); display: grid; place-items: center; font-size: 9px; font-weight: 700; flex: none }
.g-mgr-h { margin: 0; font-size: 15px; font-weight: 500 }
.g-mgr-n { margin: 1px 0 0; display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--p-link) }
.g-mgr-n .ci { width: 12px; height: 12px }
.g-strength { margin-left: auto; text-align: right }
.g-strength p { margin: 0; font-size: 12.5px; color: var(--p-dim); display: flex; align-items: center; gap: 7px; justify-content: flex-end }
.g-ring { width: 15px; height: 15px; border-radius: 50%; border: 2.5px solid var(--p-green) }
.g-strong { font-size: 11.5px; color: var(--p-dim) }
.g-mgr-acts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px 2px; margin-bottom: 8px }
.g-act { display: grid; justify-items: center; gap: 5px; padding: 8px 2px; border-radius: 8px; color: var(--p-link); text-align: center }
.g-act .ci { width: 18px; height: 18px }
.g-act em { font-style: normal; font-size: 9.5px; color: var(--p-text); line-height: 1.2; overflow-wrap: anywhere }
.g-only { margin: 0 0 18px; font-size: 10.5px; color: var(--p-dim) }
.g-res { border-top: 1px solid var(--p-line); padding-top: 16px }
.g-crumb { display: flex; align-items: center; gap: 10px; margin: 0 0 5px }
.g-fav { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--p-line); padding: 4px; flex: none }
.g-fav svg { width: 100%; height: 100%; display: block }
.g-crumb b { display: block; font-size: 12.5px; font-weight: 400; color: var(--p-text) }
.g-crumb em { font-style: normal; display: block; font-size: 11.5px; color: var(--p-dim) }
.g-restitle { margin: 0 0 4px; font-size: 19px; font-weight: 400; line-height: 1.3; color: var(--p-link) }
.g-snip { margin: 0 0 12px; font-size: 13.5px; line-height: 1.58; color: var(--p-dim) }
.g-sitelink { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 11px 0; border-top: 1px solid var(--p-line); font-size: 14px; color: var(--p-link) }
.g-sitelink i { font-style: normal; color: var(--p-dim) }
.g-none, .g-unknown { margin: 0; font-size: 12px; color: var(--p-dim); line-height: 1.55 }
.g-panel { border: 1px solid var(--p-line); border-radius: 10px; overflow: hidden; background: var(--p-card) }
.g-photos { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 58px 58px; gap: 2px }
.g-photos span { background: linear-gradient(135deg, var(--p-chip), var(--p-line)) }
.g-photos .big { grid-row: span 2 }
.g-pad { padding: 14px 16px 16px }
.g-name { margin: 0 0 4px; font-size: 20px; font-weight: 400; letter-spacing: -.01em; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap }
.g-rate { margin: 0 0 3px; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--p-dim) }
.g-rate b { font-weight: 400; color: var(--p-text) }
.g-stars { color: var(--p-star); letter-spacing: -.5px; font-size: 12px }
.g-rate a { color: var(--p-link) }
.g-cat { margin: 0 0 8px; font-size: 13px; color: var(--p-dim) }
.g-owned { margin: 0 0 12px; display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--p-text) }
.g-vf { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--p-link); color: var(--p-bg); flex: none }
.g-vf .ci { width: 11px; height: 11px }
.g-btns { display: flex; gap: 7px; padding-bottom: 14px; border-bottom: 1px solid var(--p-line) }
.g-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--p-line); border-radius: 999px; padding: 6px 13px; font-size: 12.5px; color: var(--p-link) }
.g-btn .ci { width: 14px; height: 14px }
.g-btn.plus { color: var(--p-dim) }
.g-rows { padding: 12px 0 6px }
.g-line { margin: 0 0 9px; font-size: 13px; line-height: 1.5; color: var(--p-text) }
.g-line b { font-weight: 500 }
.g-line a { color: var(--p-link) }
.g-line.quiet, .g-line.quiet b { color: var(--p-dim) }
.g-open { font-style: normal; color: var(--p-green) }
.g-edit { margin: 4px 0 0; font-size: 13px; color: var(--p-link) }
.g-sec { border-top: 1px solid var(--p-line); margin-top: 14px; padding-top: 12px }
.g-sec h4 { margin: 0 0 8px; font-size: 15px; font-weight: 400; color: var(--p-text) }
.g-prods { display: flex; gap: 7px; flex-wrap: wrap }
.g-prods span { border: 1px solid var(--p-line); border-radius: 7px; padding: 7px 10px; font-size: 11.5px; color: var(--p-dim) }
.g-webr { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.g-webr a { font-size: 11.5px; color: var(--p-link); line-height: 1.4; display: block }
.g-webr p { margin: 3px 0 0; font-size: 15px; color: var(--p-text) }
.g-webc { font-size: 11px !important; color: var(--p-dim) !important }
.g-note { margin: 14px 0 0; font-size: 12px; line-height: 1.6; color: var(--p-dim); border-top: 1px solid var(--p-line); padding-top: 12px }
.g-note.quiet { border-top: 0; padding-top: 4px; margin-top: 6px; font-size: 11px }

/*
 * Where the profile and the client's site sheet disagree, marked in place. A flag next
 * to the field beats a note at the bottom, because the person reading is looking at the
 * field.
 */
.g-flag {
  font-family: var(--m); font-size: 9.5px; letter-spacing: .02em; color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); border-radius: 3px;
  padding: 1px 6px; vertical-align: 2px; line-height: 1.5;
}
/* In a panel row the flag needs its own line: the sheet value is a sentence, not a token. */
.g-line .g-flag, .g-subflag .g-flag { display: block; width: fit-content; max-width: 100%; margin-top: 5px; white-space: normal }
.g-name .g-flag { white-space: nowrap }
.g-subflag { margin: -4px 0 9px }
.g-ok { font-family: var(--m); font-size: 9.5px; color: var(--ok); margin-left: 8px }

/* ---- a directory listing --------------------------------------------------- */
.ch-d { --p-bg: var(--panel); --p-card: var(--card); --p-text: var(--text); --p-dim: var(--faint); --p-line: var(--line-2); --p-link: var(--link-c); --p-chip: var(--card) }
.d-shell { padding: 14px 16px 16px }
.d-listing { display: flex; gap: 13px; align-items: flex-start; border: 1px solid var(--p-line); border-radius: 7px; padding: 13px 15px; margin-bottom: 16px }
.d-shot { width: 72px; height: 52px; border-radius: 4px; background: var(--p-chip); border: 1px solid var(--p-line); flex: none }
.d-name { font-size: 15px; font-weight: 600; margin: 0 }
.d-claim { font-size: 10px; font-weight: 600; color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); border-radius: 3px; padding: 1px 6px; margin-left: 7px; vertical-align: 2px }
.d-sub { font-size: 12px; color: var(--p-dim); margin: 3px 0 5px }
.d-rate { font-size: 13px; font-weight: 600; margin: 0 }
.d-rate span { font-size: 10.5px; font-weight: 400; color: var(--p-dim); margin-left: 6px }

/* ============ third-party: the channel flow ===================================
 *
 * Deliberately not the first-party grid. The nine pages are one kind of thing measured the
 * same way, so a table with a words column suits them. Third-party is five different jobs on
 * five platforms, and in a shared table every row looked like a page with its word count
 * missing. The channel is the unit instead: five cards carrying the platform's own mark, then
 * a page per platform rendered in the shape that platform's work actually has.
 * ========================================================================== */
.chan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 14px; margin-bottom: 34px }
.chan {
  display: grid; gap: 10px; padding: 20px; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  align-content: start; transition: border-color .12s ease, background .12s ease;
}
.chan:hover { border-color: var(--line-2); background: var(--hover) }
.chan-logo { width: 34px; height: 34px; display: block }
.chan-logo svg { width: 100%; height: 100%; display: block }
.chan-logo.big { width: 44px; height: 44px; flex: none }
.chan-top { display: flex; align-items: baseline; gap: 10px }
.chan-top h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em }
.chan-n { margin-left: auto; font-family: var(--m); font-size: 10.5px; color: var(--faint); white-space: nowrap }
.chan-what { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--dim) }
.chan-foot { display: flex; align-items: center; gap: 12px; margin-top: 4px }
.chan-done { font-size: 10.5px; color: var(--ok) }
.chan-go { margin-left: auto; font-size: 11.5px; color: var(--faint) }
.chan:hover .chan-go { color: var(--accent) }

.chan-head { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 18px; flex-wrap: wrap }
.chan-head h2 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.02em }
.chan-head .pv-ctl { margin-left: auto }
.chan-back { flex-basis: 100%; font-size: 11.5px; color: var(--faint); text-decoration: none }
.chan-back:hover { color: var(--accent) }
.chan-back::before { content: '\2190\00a0' }
.chan-note { margin: 0 0 16px; font-size: 12.5px; line-height: 1.7; color: var(--faint); max-width: 82ch }
.chan-lead { margin: 0 0 20px; font-size: 13.5px; line-height: 1.7; color: var(--dim); max-width: 78ch }

/* one action, in the channel's own shape */
.acts { display: grid; gap: 10px; padding-bottom: 60px }
.act {
  display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 16px 18px;
}
.act:hover { border-color: var(--line-2); background: var(--card) }
.act-rail { display: grid; justify-items: center }
.act-no {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--m); font-size: 12px; color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.act-ref { font-family: var(--m); font-size: 10.5px; color: var(--faint) }
.act-top { display: flex; align-items: baseline; gap: 12px; margin-bottom: 3px }
.act-top h3 { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.4; letter-spacing: -.01em }
.act-top .st { margin-left: auto; flex: none }
.act-where { margin: 0 0 9px; font-size: 11.5px; color: var(--faint) }
.act-angle { margin: 0 0 10px; font-size: 13px; line-height: 1.68; color: var(--dim); max-width: 84ch }
.act-none { margin: 0 0 10px; font-size: 12px; color: var(--ghost); line-height: 1.6 }
.act-covers { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 4px; max-width: 84ch }
.act-covers li { font-size: 11.5px; color: var(--faint); line-height: 1.55; padding-left: 13px; position: relative }
.act-covers li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 3px; height: 3px; border-radius: 50%; background: var(--ghost) }
.act-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap }
.act-metric { font-size: 11px; color: var(--dim); border-left: 1px solid var(--line-2); padding-left: 11px }
.act-metric:first-child { border-left: 0; padding-left: 0 }
.act-open { margin-left: auto; font-size: 11.5px; color: var(--faint) }
.act:hover .act-open { color: var(--accent) }

/* ============ the third-party workspace ======================================
 * One column, because a destination preview wants the width. What used to be a
 * settings rail is now a single strip above the preview, and the strip is ours: the
 * reference, what it takes, our own measurement, the state. The switcher beside it
 * picks which destination is on screen, since a Reddit action covers several threads
 * and a Google action covers seven profiles.
 * ========================================================================== */
.pv-wrap { flex: 1; min-height: 0; display: flex }
.pv-main { flex: 1; overflow-y: auto; padding: 22px 30px 80px; max-width: 1100px; margin: 0 auto; width: 100% }

.pv-strip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 18px }
.pv-ref { font-family: var(--m); font-size: 11px; color: var(--accent) }
.pv-ctl { font-size: 11.5px; font-weight: 550; color: var(--faint) }
.pv-ctl.ours { color: var(--ok) } .pv-ctl.ask { color: var(--warn) } .pv-ctl.community { color: var(--link-c) }
.pv-where { font-size: 11.5px; color: var(--faint) }
.pv-metric { font-size: 11.5px; color: var(--dim); border-left: 1px solid var(--line-2); padding-left: 12px }
.pv-sp { flex: 1 }
/* Sequence and provenance: what has to happen first, and which page this came out of. */
.pv-after { font-size: 10.5px; color: var(--faint); border: 1px solid var(--line); border-radius: 4px; padding: 3px 8px }
/* The decision controls wrap as one group, so the button never ends up alone on a line. */
.pv-right { display: inline-flex; align-items: center; gap: 12px; flex: none }
.pv-link { font-family: var(--m); font-size: 10.5px; color: var(--link-c); text-decoration: none }
.pv-link:hover { text-decoration: underline }
.pv-act { font-size: 11.5px; color: var(--dim); text-decoration: none; border: 1px solid var(--line-2); border-radius: 6px; padding: 6px 12px }
.pv-act:hover { border-color: var(--faint); color: var(--text) }

.pv-does { margin-bottom: 14px; max-width: 78ch }
.pv-does h3 { margin: 0 0 6px; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint) }
.pv-does p { margin: 0; font-size: 13px; line-height: 1.68; color: var(--dim) }
.pv-covers { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 4px; max-width: 78ch }
.pv-covers li { font-size: 11.5px; color: var(--faint); line-height: 1.55; padding-left: 13px; position: relative }
.pv-covers li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 3px; height: 3px; border-radius: 50%; background: var(--ghost) }
.pv-none { margin: 0 0 18px; font-size: 12px; color: var(--ghost); line-height: 1.6 }

.pv-tabs { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-bottom: 14px }
.pv-tl { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); margin-right: 5px }
.pv-tabs button {
  font: inherit; font-size: 11.5px; background: none; color: var(--faint); cursor: pointer;
  border: 1px solid var(--line); border-radius: 6px; padding: 5px 10px;
  display: inline-flex; align-items: baseline; gap: 7px;
}
.pv-tabs button:hover { border-color: var(--line-2); color: var(--text) }
.pv-tabs button.on { border-color: var(--accent); color: var(--text) }
.pv-tabs button em { font-style: normal; font-family: var(--m); font-size: 9.5px; color: var(--ghost) }
.pv-tabs button i { font-style: normal; font-family: var(--m); font-size: 9.5px; color: var(--ghost); font-variant-numeric: tabular-nums }
.pv-tabs button.on i { color: var(--dim) }
.pv-tabs button.on em { color: var(--accent) }

.ch-note { font-size: 11.5px; color: var(--ghost); line-height: 1.6; margin: 0; max-width: 70ch }

@media (max-width: 1080px) {
  .g-cols { grid-template-columns: minmax(0, 1fr) }
  .g-mgr-acts { grid-template-columns: repeat(4, minmax(0, 1fr)) }
}

/* which side of a disagreement the drafts actually took */
.dis-side.took { position: relative }
.dis-side.left { opacity: .58 }
.took-tag {
  display: inline-block; font-size: 9px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 40%, var(--bg));
  border-radius: 3px; padding: 1px 6px; margin-bottom: 6px;
}

/* ============================================================================
   Written third-party copy
   ----------------------------------------------------------------------------
   Added 2026-08-24, when the LinkedIn articles, the Reddit programme and the
   Google seeding pass stopped being angles and became copy.

   Two things had to stay true. The destination's own type and colour still own
   the page, because that is the point of previewing in the destination. And
   anything that is OURS rather than the destination's is marked as ours: the
   green "written and ready" strip, the word count, the week numbers, the
   before-and-after on a Google field. A client should never wonder whether they
   are looking at Reddit's furniture or our annotation.
   ========================================================================== */

/* the "this is finished" strip. Ours, so it uses the app's font, not the
   destination's, and it sits above the copy rather than inside it. */
.ch-ready {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
  font-family: var(--f); font-size: 10.5px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ok);
}
.ch-ready em {
  font-style: normal; margin-left: auto; letter-spacing: .04em;
  color: var(--p-dim); font-weight: 500; text-transform: none; font-size: 11px;
}
.ch-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none }

/* shared body type for a written block, in the destination's colours */
.rd-md, .li-body {
  font-size: 14px; line-height: 1.62; color: var(--p-text);
}
.rd-md > :first-child, .li-body > :first-child { margin-top: 0 }
.rd-md p, .li-body p { margin: 0 0 13px }
.rd-md h2, .rd-md h3, .rd-md h4, .li-body h2 {
  margin: 22px 0 10px; font-size: 17px; font-weight: 600; line-height: 1.3;
  letter-spacing: -.01em; color: var(--p-text);
}
.li-body h2 { font-size: 19px; margin: 28px 0 11px }
.rd-md ul, .rd-md ol, .li-body ul, .li-body ol { margin: 0 0 13px; padding-left: 20px }
.rd-md li, .li-body li { margin-bottom: 6px }
.rd-md b, .li-body b { font-weight: 600; color: var(--p-text) }
.li-body .lead, .rd-md .lead { font-size: 16px; line-height: 1.55 }

/* ---- LinkedIn ---- */
.li-cover.briefed { background: var(--p-chip); border-bottom: 1px solid var(--p-line) }
.li-cover.briefed span {
  max-width: 420px; text-align: center; line-height: 1.5; font-size: 11.5px;
  color: var(--p-dim); font-style: italic;
}
.li-deck {
  border-left: 3px solid var(--p-link); padding: 2px 0 2px 14px; margin: 0 0 20px;
}
.li-deck p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--p-dim) }
.li-body { padding-bottom: 8px }
.li-body p.lead { font-size: 17px; line-height: 1.5; color: var(--p-text); margin-bottom: 16px }

/* ---- Reddit: a written post ---- */
.rd-body.written { margin-bottom: 16px }
.rd-md { background: var(--p-card); border: 1px solid var(--p-line); border-radius: 8px; padding: 15px 17px }
.rd-md h3 { font-size: 15px; margin: 18px 0 8px }

/* the feed: several written posts at once */
.rd-feed { max-width: 740px }
.rd-feednote {
  margin: -4px 0 16px; font-size: 12.5px; line-height: 1.55; color: var(--p-dim);
  font-family: var(--f);
}
.rd-card { border: 1px solid var(--p-line); border-radius: 8px; padding: 14px 16px 4px; margin-bottom: 12px }
.rd-cardhead {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 9px;
  font-family: var(--f); font-size: 11px; color: var(--p-dim);
}
/* An order number, not a date. The series runs through the month rather than
   on a weekly slot, so the badge says which one it is and nothing about when. */
.rd-seq {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  flex: none; font-weight: 700; font-size: 11px; font-family: var(--f);
  color: var(--p-bg); background: var(--p-text);
}
.rd-flair.sm { margin-bottom: 0; font-size: 10px; padding: 2px 7px }
.rd-cardfrom { color: var(--p-dim) }
.rd-cardwc { margin-left: auto }
.rd-cardtitle { margin: 0 0 11px; font-size: 17px; font-weight: 500; line-height: 1.3; color: var(--p-text) }
.rd-card .rd-md { background: transparent; border: 0; padding: 0 0 12px }

/* the AMA, which is three things in sequence */
.rd-stage { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px }
.rd-stage:first-of-type { margin-top: 4px }
.rd-stagen {
  width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--p-accent); color: #fff; font-size: 11px; font-weight: 700; font-family: var(--f);
}
.rd-stage p { margin: 0; font-size: 12px; color: var(--p-dim); font-family: var(--f) }
.rd-feed .rd-post { border: 1px solid var(--p-line); border-radius: 8px; padding: 14px 16px 0; max-width: none }
.rd-feed .rd-actions { padding-bottom: 12px }

/* a comment by us, nested */
.rd-comment { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; border-top: 1px solid var(--p-line); padding: 13px 0 14px }
.rd-cav { width: 26px; height: 26px; border-radius: 50%; overflow: hidden }
.rd-cav svg { width: 100%; height: 100% }
.rd-cmeta { display: flex; align-items: center; gap: 7px; margin: 3px 0 8px; font-size: 12px; color: var(--p-dim) }
.rd-cmeta b { color: var(--p-text); font-weight: 600 }
.rd-cflair { font-size: 10px; font-weight: 700; background: var(--p-accent); color: #fff; border-radius: 3px; padding: 2px 6px }
.rd-comment .rd-md { background: transparent; border: 0; padding: 0 }

/* the setup fields, and the modmail message */
.rd-setup { border: 1px solid var(--p-line); border-radius: 8px; padding: 14px 16px }
.rd-fields { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 14px }
.rd-fields th {
  text-align: left; font-weight: 500; color: var(--p-dim); padding: 7px 14px 7px 0;
  white-space: nowrap; vertical-align: top; width: 1%; border-bottom: 1px solid var(--p-line);
  font-family: var(--f); font-size: 11.5px;
}
.rd-fields td { padding: 7px 0; color: var(--p-text); border-bottom: 1px solid var(--p-line); line-height: 1.5 }
.rd-fields tr:last-child th, .rd-fields tr:last-child td { border-bottom: 0 }
.rd-rules.full { list-style: none; padding-left: 0; counter-reset: rd }
.rd-rules.full li { counter-increment: rd; margin-bottom: 10px; padding-left: 20px; position: relative }
.rd-rules.full li::before {
  content: counter(rd) '.'; position: absolute; left: 0; top: 0; color: var(--p-dim); font-weight: 600;
}
.rd-rules.full b { display: block; font-weight: 600; margin-bottom: 2px }
.rd-rules.full span { color: var(--p-dim); line-height: 1.5 }
.rd-dm { border: 1px solid var(--p-line); border-radius: 8px; padding: 0 }
.rd-dmhead {
  display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 15px;
  border-bottom: 1px solid var(--p-line); font-size: 11px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--p-dim); font-family: var(--f);
}
.rd-dmhead .ci { width: 14px; height: 14px }
.rd-dm .rd-md { border: 0; background: transparent; padding: 15px 17px }

/* the growth snippets: five surfaces, each with its exact words */
.rd-snip { border: 1px solid var(--p-line); border-radius: 8px; padding: 13px 15px; margin-bottom: 10px }
.rd-snipwhere { margin: 0; font-size: 13px; font-weight: 600; color: var(--p-text); font-family: var(--f) }
.rd-snipwhat { margin: 2px 0 10px; font-size: 11.5px; color: var(--p-dim); font-family: var(--f) }
.rd-sniptext {
  margin: 0; background: var(--p-chip); border-radius: 6px; padding: 12px 14px;
  font-family: var(--m); font-size: 12.5px; line-height: 1.6; color: var(--p-text);
  white-space: pre-wrap; word-break: break-word;
}

/* ---- Google: the dashboard editor, above the profile ---- */
.g-editor { padding: 14px 16px 4px; border-bottom: 1px solid var(--p-line) }
.g-editnote { margin: -4px 0 13px; font-size: 12.5px; line-height: 1.55; color: var(--p-dim); font-family: var(--f) }
.g-edit-card { border: 1px solid var(--p-line); border-radius: 8px; padding: 13px 15px; margin-bottom: 10px }
.g-edit-where { margin: 0; font-size: 13px; font-weight: 600; color: var(--p-text) }
.g-edit-field {
  margin: 2px 0 11px; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--p-dim); font-family: var(--f); font-weight: 600;
}
.g-ba { display: grid; grid-template-columns: minmax(0,1fr) 22px minmax(0,1fr); align-items: center; gap: 10px }
.g-before, .g-after { border-radius: 6px; padding: 10px 12px; min-width: 0 }
.g-before { background: var(--p-chip) }
.g-after { background: color-mix(in srgb, var(--ok) 13%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent) }
.g-before span, .g-after span {
  display: block; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; margin-bottom: 4px; font-family: var(--f);
}
.g-before span { color: var(--p-dim) }
.g-after span { color: var(--ok) }
.g-before p, .g-after p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--p-text) }
.g-arrow { text-align: center; color: var(--p-dim); font-size: 15px }
.g-edit-why { margin: 11px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--p-dim) }
.g-edit-card.add { border-style: dashed }
.g-unchanged { margin: 4px 0 12px; font-size: 11.5px; line-height: 1.6; color: var(--p-dim) }
.g-unchanged b { color: var(--p-text); font-weight: 600 }
.g-seeded { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ok) }

.g-seed { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; padding-bottom: 12px }
.g-seedh {
  margin: 0 0 9px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--p-dim); font-weight: 700; font-family: var(--f);
}
.g-seedcol > .g-seedh ~ .g-seedh { margin-top: 18px }
.g-qa-item { border-left: 2px solid var(--p-line); padding: 0 0 0 12px; margin-bottom: 13px }
.g-q { margin: 0 0 4px; font-size: 13.5px; font-weight: 600; color: var(--p-text); line-height: 1.4 }
.g-a { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--p-dim) }
.g-prod-item { border: 1px solid var(--p-line); border-radius: 6px; padding: 9px 12px; margin-bottom: 7px }
.g-prod-t { margin: 0; font-size: 13px; font-weight: 600; color: var(--p-text) }
.g-prod-d { margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: var(--p-dim) }
.g-post-item { border: 1px solid var(--p-line); border-radius: 6px; padding: 11px 13px; margin-bottom: 8px }
.g-post-type {
  margin: 0 0 5px; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--p-dim); font-weight: 700; font-family: var(--f);
}
.g-post-t { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--p-text) }
.g-post-x { margin: 0 0 9px; font-size: 12.5px; line-height: 1.55; color: var(--p-dim) }
.g-post-btn {
  display: inline-block; font-size: 12px; font-weight: 500; color: var(--p-link);
  border: 1px solid var(--p-line); border-radius: 999px; padding: 4px 13px;
}

@media (max-width: 900px) {
  .g-seed { grid-template-columns: minmax(0,1fr) }
  .g-ba { grid-template-columns: minmax(0,1fr); gap: 6px }
  .g-arrow { display: none }
}

/* ---- "written" signals in the app's own furniture ------------------------- */
.chan-written {
  display: inline-flex; align-items: baseline; gap: 7px; font-size: 11px; font-weight: 600;
  color: var(--ok); background: var(--ok-bg); border-radius: 999px; padding: 3px 10px;
}
.chan-written em { font-style: normal; font-weight: 400; color: var(--dim); font-size: 10.5px }
.chan-unwritten {
  font-size: 11px; color: var(--faint); border: 1px dashed var(--line-2);
  border-radius: 999px; padding: 3px 10px;
}
.act-written {
  margin-left: auto; display: inline-flex; align-items: baseline; gap: 6px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ok); background: var(--ok-bg); border-radius: 3px; padding: 3px 8px;
}
.act-written em { font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--dim) }
.act-top .st { margin-left: 8px }
.pv-written {
  font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ok); background: var(--ok-bg); border-radius: 3px; padding: 3px 8px;
}

/* ---- the XYZ mark, wherever a platform shows a profile picture -------------
   Every one of these used to be a yellow square with "XYZ" in it, which read as
   a placeholder because it was one. The real mark carries its own two colours,
   so each avatar gets a white ground: the previews run in five different
   palettes and a transparent mark would change shade in each of them. */
.li-av, .ig-av, .g-mgr-av, .rd-commicon, .rd-cav, .rd-av.sm {
  background: #fff; overflow: hidden;
}
.li-av svg, .ig-av svg, .g-mgr-av svg, .rd-commicon svg, .rd-cav svg, .rd-av.sm svg {
  width: 100%; height: 100%; display: block;
}
.li-av { padding: 0 }
.ig-av { border-radius: 50% }
.g-mgr-av { display: block }