/* Copyright © 2026 Falcontext. All rights reserved. Not open source: see LICENSE. */
:root {
      --bg: #0e2019;
      --bg-rgb: 14, 32, 25;
      --surface: #081712;
      --surface-rgb: 8, 23, 18;
      --surface-alt: #1c3229;
      --tab-hover: #16281f;
      --border: #1c3229;
      --border-input: #25402f;
      --text: #ffffff;
      --text-dim: #8fa89b;
      --heading: #f2ede0;
      --accent: #22c55e;
      --accent-hover: #2ddb70;
      --accent-rgb: 34, 197, 94;
      --accent-contrast: #081712;
      --danger: #e05555;
      --danger-hover: #ef6f6f;
      --danger-text: #e05555; /* small red text: darker on the light themes */
      /* Sizes, corners, gaps, status colours and fonts: tokens.css. */
      color-scheme: dark; /* native checkboxes, menus and scrollbars match */
    }
    body {
      width: 100%;
      max-width: 380px;
      min-width: 300px;
      padding: 0 var(--sp-xl) 110px var(--sp-xl);
      background-color: var(--bg);
      color: var(--text);
      font-family: var(--font-ui);
      margin: 0 auto;
      box-sizing: border-box;
    }
    /* Every link in the panel gets the house style unless its class gives
       it one of its own: a link added anywhere is never the browser's blue
       (the owner's rule, asked many times). Container rules further down
       (.pa-thresholds a, ...) come later and win where they differ. */
    a:not([class]) { color: var(--heading); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent);
      text-decoration-thickness: 1px; text-underline-offset: 2px; }
    a:not([class]):hover { text-decoration-color: currentColor; }
    a:not([class]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-s); }
    /* Every link with a class shows where the keyboard is with the house
       ring, never the browser's own black box (tests/link-styles.test.js). */
    .info-icon:focus-visible, .unlock-link:focus-visible, .ad-link:focus-visible,
    .sprint-action-btn:focus-visible, .pa-learn:focus-visible, .pa-ignore-check:focus-visible,
    .analysis-upsell-btn:focus-visible, .badge-claim-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .top-row {
      display: flex;
      align-items: stretch;
      gap: var(--sp-m);
      margin-bottom: var(--sp-xl);
      position: sticky;
      top: 0;
      z-index: 15;
      background-color: var(--bg);
      padding: var(--sp-l) 0 var(--sp-m) 0;
    }
    .top-row .toggle-container {
      flex: 1;
      margin-bottom: 0;
    }
    .settings-btn {
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text-dim);
      font-size: var(--fs-xl);
      cursor: pointer;
      padding: 0 var(--sp-l);
      line-height: 1;
      border-radius: var(--r-s);
      flex-shrink: 0;
    }
    .settings-btn:hover {
      color: var(--heading);
      background: var(--surface-alt);
    }
    /* ---------- Overflow menu (Manuscripts / Achievements / Settings) ----------
       These three used to be separate icon buttons crowding the top row
       alongside the WRITING/EDITING/TOOLS toggle. They're the same buttons
       (same ids, same click handlers elsewhere in popup.js) just moved
       into a single dropdown behind one trigger, so the top row only ever
       shows two controls. */
    .menu-wrap {
      position: relative;
      flex-shrink: 0;
      display: flex;
    }
    #btnMoreMenu {
      width: 36px;
      flex-shrink: 0;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .more-menu {
      display: none;
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      min-width: 190px;
      background: var(--surface);
      border: 1px solid var(--border-input);
      border-radius: var(--r-m);
      box-shadow: 0 8px 20px var(--shade-4);
      padding: var(--sp-xs);
      z-index: 25;
    }
    .more-menu.open {
      display: block;
    }
    .more-menu-item {
      display: flex;
      align-items: center;
      gap: var(--sp-l);
      width: 100%;
      box-sizing: border-box;
      background: none;
      border: none;
      color: var(--heading);
      font-size: var(--fs-s);
      font-weight: bold;
      text-align: left;
      padding: var(--sp-m) var(--sp-l);
      border-radius: var(--r-s);
      cursor: pointer;
    }
    .more-menu-item:hover {
      background: var(--surface-alt);
    }
    .more-menu-icon {
      position: relative;
      display: inline-flex;
      width: 18px;
      flex-shrink: 0;
      font-size: var(--fs-l);
      justify-content: center;
    }
    .more-menu-item.has-new .more-menu-icon::after {
      content: '';
      position: absolute;
      top: -2px;
      right: 0;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
    }
    .toggle-container {
      display: flex;
      margin-bottom: var(--sp-xl);
      background: var(--surface);
      padding: var(--sp-xs);
      border-radius: var(--r-s);
      border: 1px solid var(--border);
    }
    .toggle-btn {
      flex: 1;
      background: transparent;
      border: none;
      color: var(--text-dim);
      padding: var(--sp-s) 0;
      cursor: pointer;
      font-size: var(--fs-s);
      font-weight: bold;
      border-radius: var(--r-s);
      transition: all 0.2s;
    }
    .toggle-btn.active {
      background: var(--surface-alt);
      color: var(--heading);
    }
    .toggle-btn:not(.active):hover {
      background: var(--tab-hover);
      color: var(--heading);
    }
    #synonymResults {
      display: flex;
      flex-wrap: wrap;
      gap: var(--sp-s);
    }
    .synonym-pill {
      color: var(--heading);
    }
    .synonym-pill:hover {
      background: var(--border-input);
      border-color: var(--accent);
    }
    .field, .analysis-flag {
      margin-bottom: var(--sp-xl);
    }
    label {
      display: block;
      font-size: var(--fs-xs);
      color: var(--text-dim);
      margin-bottom: var(--sp-s);
      text-transform: none;
    }
    .auto-value-display {
      width: 100%;
      padding: var(--sp-m);
      background-color: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-s);
      color: var(--heading);
      font-size: var(--fs-m);
      font-weight: bold;
      box-sizing: border-box;
      min-height: 33px;
    }
    input {
      width: 100%;
      padding: var(--sp-m);
      background-color: var(--surface);
      border: 1px solid var(--border-input);
      border-radius: var(--r-s);
      color: var(--text);
      box-sizing: border-box;
      font-size: var(--fs-m);
    }
    input:focus {
      outline: none;
      border-color: var(--accent);
    }
    .graph-box {
      margin: var(--sp-2xl) 0;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-s);
      padding: var(--sp-l);
    }
    /* Groups Current Streak, Estimated Completion, and the Recent Trend
       graph under one "Stats" heading within the Writing/Editing tabs,
       instead of them just being three separate loose graph-boxes. */
    .stats-section {
      margin: var(--sp-2xl) 0;
    }
    .stats-section-title {
      font-size: var(--fs-xs);
      color: var(--text-dim);
      text-transform: none;
      letter-spacing: 0.5px;
      font-weight: bold;
      margin-bottom: var(--sp-l);
    }
    .stats-section .graph-box {
      margin: 0 0 var(--sp-xl) 0;
    }
    .stats-section .graph-box:last-child {
      margin-bottom: 0;
    }
    .mini-label {
      font-size: var(--fs-xs);
      color: var(--text-dim);
      text-transform: none;
      letter-spacing: 0.5px;
      text-align: center;
      margin-bottom: var(--sp-m);
    }
    /* "Started today at ..." is Writing-tab only; empty, its accent bar
       would show on its own. */
    #lblBaseline:empty {
      display: none;
    }
    /* The Editing tab's save, at the bottom of Today's Progress. */
    .card-save-edit {
      margin: var(--sp-l) 0 0;
    }
    .progress-bar-bg {
      fill: var(--surface-alt);
    }
    .progress-bar-fill {
      fill: var(--accent);
      transition: width 0.3s ease;
    }
    .marker-text {
      fill: var(--text-dim);
      font-size: var(--fs-2xs);
    }
    .results {
      background: var(--surface);
      border-radius: var(--r-s);
      padding: var(--sp-l);
      border: 1px solid var(--border);
      margin-bottom: var(--sp-2xl);
    }
    .percent-display {
      font-size: 28px;
      font-weight: bold;
      color: var(--heading);
      margin: var(--sp-2xs) 0;
      text-align: center;
    }
    .secondary-percent {
      font-size: var(--fs-xl);
      font-weight: bold;
      color: var(--heading);
      margin: var(--sp-xs) 0 0 0;
      text-align: center;
    }
    .insights {
      font-size: var(--fs-xs);
      color: var(--text-dim);
      margin-top: var(--sp-s);
      line-height: 1.4;
    }
    .jump-ask { margin-top: var(--sp-m); }
    /* A card folded to its title (popup.js, applyFolds). */
    .card-title { cursor: pointer; }
    .card-fold { background: none; border: 0; padding: 0 var(--sp-xs) 0 0; margin: 0; font: inherit; line-height: 1; color: var(--text-dim); cursor: pointer; border-radius: var(--r-s); }
    .card-fold:hover { color: var(--heading); }
    .card-fold:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .card-folded > :not(.card-head):not(.card-title):not(.card-keep), .card-folded .card-head > :not(.card-head):not(.card-title):not(.card-keep) { display: none !important; }
    /* Kept when folded: Bird's Eye's Scan button (a folded card is still scanned from). */
    .card-folded > .card-keep { margin-top: var(--sp-m); }
    .card-folded .card-title, .card-folded .card-head { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
    .ad-link {
      color: var(--heading);
      text-decoration: underline;
      font-weight: bold;
    }
    .trend-empty {
      font-size: var(--fs-xs);
      color: var(--text-dim);
      text-align: center;
      line-height: 1.4;
    }
    /* Key for the Recent Trend bars: the bright top slice of each bar is
       what was added that day (the dimmer rest is the running total). */
    /* On its own line under the title, small, so it never runs into the
       title or the share button on a phone. */
    .trend-legend {
      display: block;
      margin-top: var(--sp-xs);
      font-family: var(--font-ui);
      font-size: var(--fs-xs);
      color: var(--text-dim);
    }
    /* Titles with a share button in the corner keep clear of it. */
    .share-icon-btn + .mini-label {
      padding-right: var(--sp-4xl);
    }
    .trend-swatch {
      display: inline-block;
      width: 8px;
      height: 8px;
      margin-right: var(--sp-xs);
      border-radius: 2px;
      vertical-align: -0.5px;
    }
    .trend-swatch-added {
      background: var(--accent);
    }
    .trend-bar {
      cursor: default;
    }
    .trend-bar:hover rect:not([fill="transparent"]) {
      filter: brightness(1.2);
    }
    /* Hover card for a Recent Trend bar (see showTrendTooltip). */
    .trend-tooltip {
      position: absolute;
      top: 2px;
      pointer-events: none;
      z-index: 2;
      padding: var(--sp-xs) var(--sp-m);
      font-size: var(--fs-xs);
      line-height: 1.35;
      white-space: nowrap;
      color: var(--text);
      background: var(--bg);
      border: 1px solid var(--border-input);
      border-radius: var(--r-s);
      box-shadow: 0 2px 6px var(--shade-3);
    }
    .trend-tooltip-date {
      color: var(--text-dim);
    }
    /* The blurred graph + upsell overlay live in their own wrapper, not
       directly on #trendBox – #trendBox also contains the "Recent Trend"
       header label above them, and the overlay's `inset: 0` used to be
       relative to the whole box (header included), which centered the
       lock icon right on top of the header text instead of over the
       graph it's actually locking. */
    .trend-graph-wrap {
      position: relative;
      overflow: hidden;
    }
    /* The overlay's content (icon + two-line blurb + button) needs more
       vertical room than the bare 60px graph does – #trendBox.pro-locked
       #trendSvg etc. below only blur/dim the graph, they don't resize
       the wrapper, so without this the overlay just got clipped to the
       graph's own height instead of growing to fit its own content. */
    #trendBox.pro-locked .trend-graph-wrap {
      min-height: 125px;
    }
    /* Free users see the real trend graph rendered underneath, but
       blurred/dimmed, with an upsell overlaid on top – the graph itself
       is the hook, not just a locked placeholder. */
    #trendBox.pro-locked #trendSvg,
    #trendBox.pro-locked .trend-empty {
      filter: blur(3px);
      opacity: 0.45;
      pointer-events: none;
      user-select: none;
    }
    .trend-upsell {
      display: none;
      position: absolute;
      inset: 0;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--sp-s);
      text-align: center;
      padding: var(--sp-l);
      /* Stops are in px, not %, anchored to the graph's fixed 60px
         height – not the box's own height, which now varies (see
         #trendBox.pro-locked .trend-graph-wrap above). A %-based stop
         here meant "55% of the box", so when the box grew taller to fit
         the unlock text, that 55% mark moved well past the graph itself,
         leaving most of the graph under the near-transparent top of the
         gradient and letting the blurred trend line show through as a
         much more visible streak than the faint peek this is meant to be. */
      background: linear-gradient(180deg, rgba(var(--surface-rgb), 0.15), rgba(var(--surface-rgb), 0.85) 55px, rgba(var(--surface-rgb), 0.85) 100%);
    }
    #trendBox.pro-locked .trend-upsell {
      display: flex;
    }
    .trend-upsell .lock-icon {
      font-size: var(--fs-xl);
    }
    .trend-upsell p {
      margin: 0;
      font-size: var(--fs-xs);
      color: var(--heading);
      line-height: 1.4;
      max-width: 220px;
    }
    /* "Unlock with Pro": links to the pricing page, styled as buttons by
       each upsell's own rule (and .analysis-upsell-btn / .badge-claim-btn). */
    .unlock-link {
      display: inline-block;
      text-decoration: none;
    }
    .trend-upsell .unlock-link {
      margin-top: var(--sp-2xs);
    }
    .trend-upsell .unlock-link:hover, .settings-save-btn:hover, .sprint-action-btn:hover {
      background: var(--accent-hover);
    }
    /* ---------- Tools Pro lock ----------
       Same "blurred real content behind an upsell" pattern as the trend
       graph above, just wrapping the whole Tools tab instead of one
       graph-box – free users see Sprint Mode/Synonym Checker/Prose
       Analysis/Focus Mode/Reminders are there and functional-looking,
       just not usable, rather than an empty locked placeholder. */
    /* Focus Mode is now the only Tools-tab feature still fully Pro-gated
       (Sprint Mode and Writing Reminders moved to free; Synonym Checker
       and Prose Analysis have their own partial-lock treatment below) –
       so the lock/blur/upsell pattern that used to wrap the WHOLE Tools
       tab now scopes to just #focusModeWrap instead of #toolsSection. */
    .tools-content-wrap {
      position: relative;
    }
    #focusModeWrap.pro-locked {
      min-height: 110px;
    }
    /* "Hide Pro previews" (Ad-Free): the card goes, instead of teasing. */
    #focusModeWrap.upsell-hidden {
      display: none;
    }
    #focusModeWrap.pro-locked .focus-content {
      filter: blur(3px);
      opacity: 0.4;
      pointer-events: none;
      user-select: none;
    }
    .tools-upsell {
      display: none;
      position: absolute;
      inset: 0;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--sp-s);
      text-align: center;
      padding: var(--sp-xl) var(--sp-l);
      background: linear-gradient(180deg, rgba(var(--surface-rgb), 0.2), rgba(var(--surface-rgb), 0.9) 60px, rgba(var(--surface-rgb), 0.94) 100%);
    }
    #focusModeWrap.pro-locked .tools-upsell {
      display: flex;
    }
    .tools-upsell .lock-icon {
      font-size: var(--fs-xl);
    }
    .tools-upsell p {
      margin: 0;
      font-size: var(--fs-s);
      color: var(--heading);
      line-height: 1.4;
      max-width: 260px;
    }
    .tools-upsell .unlock-link {
      margin-top: var(--sp-2xs);
    }
    .tools-upsell .unlock-link:hover {
      background: var(--accent-hover);
    }

    /* ---------- Prose Analysis partial Pro lock ----------
       Same blurred-content-behind-an-overlay pattern as Focus Mode above,
       but scoped to just the Pro-only checks (Filter words, Clichés,
       Repeated words nearby) within the analysis report – Adverb overuse
       and Passive voice stay free and render normally above this. */
    .analysis-locked-wrap {
      position: relative;
      margin-top: var(--sp-xs);
      min-height: 100px;
    }
    .analysis-locked-content {
      filter: blur(3px);
      opacity: 0.4;
      pointer-events: none;
      user-select: none;
    }
    .analysis-upsell {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--sp-s);
      text-align: center;
      padding: var(--sp-xl) var(--sp-l);
      background: linear-gradient(180deg, rgba(var(--surface-rgb), 0.15), rgba(var(--surface-rgb), 0.9) 40px, rgba(var(--surface-rgb), 0.94) 100%);
    }
    .analysis-upsell .lock-icon {
      font-size: var(--fs-xl);
    }
    .analysis-upsell p {
      margin: 0;
      font-size: var(--fs-xs);
      color: var(--heading);
      line-height: 1.4;
      max-width: 220px;
    }
    .analysis-upsell-btn {
      margin-top: var(--sp-2xs);
    }
    .analysis-upsell-btn:hover {
      background: var(--accent-hover);
    }
    .refresh-link {
      display: block;
      text-align: center;
      background: none;
      border: none;
      color: var(--text-dim);
      font-size: var(--fs-2xs);
      text-transform: none;
      letter-spacing: 0.5px;
      cursor: pointer;
      margin: calc(var(--sp-xs) * -1) 0 var(--sp-l) 0;
      text-decoration: underline;
      text-decoration-color: rgba(var(--accent-rgb), 0.6);
      text-underline-offset: 2px;
    }
    .refresh-link:hover, .settings-close:hover {
      color: var(--heading);
    }
    .refresh-link:hover { text-decoration-color: var(--accent); }
    .refresh-link:focus-visible { color: var(--heading); outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-s); }
    /* "Already have a key?" under each "Unlock with Pro": opens Settings at the key field. */
    .refresh-link.have-key { margin: 0; font-size: var(--fs-xs); }

    /* ---------- Info tooltip ----------
       Small (i) icon next to a feature's mini-label header, for
       explanatory copy that describes what the feature IS/does – as
       opposed to in-the-moment "how to use it right now" hints, which
       stay inline near the relevant control.

       The tooltip text is position:fixed, NOT absolute: several icons sit
       inside containers that clip or sit at the edge of the viewport (the
       Settings panel has overflow-y:auto, and Sprint Mode is the first
       box on the Tools tab, so an upward tooltip opens above the top of
       the viewport). A fixed box escapes the panel's overflow clipping,
       and initInfoTooltips() in popup.js computes its top/left on open –
       clamped horizontally into the viewport, and flipped below the icon
       when there's no room above.

       The tooltip is `display: none` until `.is-open` is set (rather than
       visibility:hidden) so it isn't laid out while closed – a
       visibility:hidden box still counted toward the page's scrollable
       width, which caused a permanent phantom horizontal scrollbar.

       Caveat: position:fixed is relative to the nearest ancestor with a
       filter/transform instead of the viewport. Don't put either on a
       wrapper around an info icon (the blurred .focus-content is fine
       only because it's non-interactive while locked). */
    .info-tooltip[hidden] { display: none; }
    .info-tooltip {
      position: relative;
      display: inline-flex;
      vertical-align: middle;
      margin-left: var(--sp-s);
      cursor: help;
    }
    .info-tooltip .info-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--surface-alt);
      color: var(--text-dim);
      border: 1px solid var(--border-input);
      font-size: var(--fs-2xs);
      font-weight: bold;
      font-style: italic;
      line-height: 1;
      font-family: var(--font-serif);
      text-transform: none;
    }
    .info-tooltip:hover .info-icon,
    .info-tooltip:focus .info-icon,
    .info-tooltip:focus-within .info-icon,
    .info-tooltip.is-open .info-icon {
      color: var(--heading);
      border-color: var(--accent);
    }
    .info-tooltip .info-tooltip-text {
      display: none;
      position: fixed;   /* placed by initInfoTooltips() in popup.js */
      top: 0;
      left: 0;
      z-index: 30;
      width: 210px;
      max-width: calc(100vw - 16px);
      background: var(--surface);
      color: var(--text);
      border: 1px solid var(--border-input);
      border-radius: var(--r-m);
      padding: var(--sp-m) var(--sp-l);
      font-size: var(--fs-xs);
      line-height: 1.4;
      text-transform: none;
      font-weight: normal;
      letter-spacing: normal;
      text-align: left;
      box-shadow: 0 4px 14px var(--shade-4);
      pointer-events: none;
    }
    .info-tooltip a.info-icon { text-decoration: none; cursor: pointer; }
    /* An invisible margin makes the 16 px icon a 26 px target to tap or
       click (WCAG 2.2's 24 px minimum), without changing how it looks. */
    .info-tooltip a.info-icon { position: relative; }
    .info-tooltip a.info-icon::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; }
    .info-tooltip-text .info-more { display: block; margin-top: var(--sp-s); font-weight: 600; }
    .info-tooltip.is-open .info-tooltip-text {
      display: block;
    }

    select {
      width: 100%;
      padding: var(--sp-m);
      background-color: var(--surface);
      border: 1px solid var(--border-input);
      border-radius: var(--r-s);
      color: var(--text);
      box-sizing: border-box;
      font-size: var(--fs-m);
    }
    select:focus { outline: none; border-color: var(--accent); }

    .share-targets {
      display: flex;
      flex-wrap: wrap;
      gap: var(--sp-s);
    }

    .settings-btn.has-new {
      border-color: var(--accent);
      color: var(--accent);
    }

    /* ---------- Achievements ---------- */
    .badge-summary-bar {
      height: 8px;
      border-radius: var(--r-s);
      background: var(--surface-alt);
      overflow: hidden;
      margin: var(--sp-s) 0 var(--sp-xl) 0;
    }
    #achievementsSummaryFill {
      height: 100%;
      width: 0;
      background: var(--accent);
      transition: width 0.3s ease;
    }
    .badge-section-title {
      font-size: var(--fs-xs);
      color: var(--text-dim);
      text-transform: none;
      letter-spacing: 0.5px;
      font-weight: bold;
      margin: var(--sp-xl) 0 var(--sp-s) 0;
    }
    .badge-card {
      display: flex;
      gap: var(--sp-l);
      align-items: flex-start;
      padding: var(--sp-l);
      margin-bottom: var(--sp-m);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-m);
    }
    .badge-card.earned {
      border-color: var(--accent);
    }
    .badge-emoji {
      font-size: 26px;
      line-height: 1;
      flex-shrink: 0;
      width: 32px;
      text-align: center;
    }
    .badge-card.locked .badge-emoji {
      filter: grayscale(1);
      opacity: 0.45;
    }
    .badge-info {
      flex: 1;
      min-width: 0;
    }
    .badge-name {
      font-size: var(--fs-m);
      font-weight: bold;
      color: var(--heading);
    }
    .badge-desc {
      font-size: var(--fs-xs);
      color: var(--text-dim);
      line-height: 1.4;
      margin: var(--sp-2xs) 0 var(--sp-s) 0;
    }
    .badge-tag {
      display: inline-block;
      margin-left: var(--sp-s);
      vertical-align: middle;
      background: var(--surface-alt);
      color: var(--heading);
      border: 1px solid var(--border-input);
    }
    .badge-tag.new {
      background: var(--accent);
      color: var(--accent-contrast);
      border-color: var(--accent);
    }
    .badge-progress {
      height: 5px;
      border-radius: var(--r-s);
      background: var(--surface-alt);
      overflow: hidden;
    }
    .badge-progress-fill {
      height: 100%;
      background: var(--accent);
    }
    .badge-meta {
      font-size: var(--fs-2xs);
      color: var(--text-dim);
      margin-top: var(--sp-xs);
    }
    .badge-claim-btn {
      margin-top: var(--sp-s);
    }
    .badge-claim-btn:hover { background: var(--accent-hover); }
    .badge-share-btn {
      background: var(--surface-alt);
      color: var(--heading);
      border: 1px solid var(--border-input);
    }
    .badge-share-btn:hover { background: var(--border-input); }

    .graph-box, .results { position: relative; }
    /* The share icon sits in the box's top-right corner; on the Overall
       Progress / % of Final Goal box the bar used to run underneath it.
       Pushing the bar down clears the icon (same box serves both the
       Writing and Editing tabs). */
    #overallBox > svg { margin-top: var(--sp-xl); }
    #overallBox .share-icon-btn svg { margin: 0; }
    .share-icon-btn {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 26px;
      height: 26px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: none;
      color: var(--text-dim);
      border: 0;
      border-radius: var(--r-s);
      cursor: pointer;
      padding: 0;
      z-index: 2;
    }
    .share-icon-btn:hover, .share-icon-btn:focus-visible { color: var(--accent); outline: none; }
    .share-icon-inline {
      display: inline-flex;
      vertical-align: middle;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      margin-left: var(--sp-s);
      background: none;
      border: 1px solid var(--border-input);
      border-radius: 50%;
      color: var(--text-dim);
      cursor: pointer;
      padding: 0;
    }
    .share-icon-inline:hover { color: var(--heading); border-color: var(--accent); }
    .badge-card { position: relative; }
    .badge-card.earned .badge-info { padding-right: var(--sp-4xl); }

    /* ---------- Record celebration ---------- */
    .celebration {
      margin: 0 0 var(--sp-l) 0;
      padding: var(--sp-l) var(--sp-l);
      border: 1px solid var(--accent);
      border-radius: var(--r-m);
      background: var(--surface);
      animation: falconCelebrationGlow 2s ease-in-out 3;
    }
    @keyframes falconCelebrationGlow {
      0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.5); }
      50% { box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0.12); }
    }
    .celebration-title {
      font-size: var(--fs-s);
      font-weight: bold;
      color: var(--accent);
      text-transform: none;
      letter-spacing: 0.5px;
    }
    .celebration-body {
      font-size: var(--fs-s);
      color: var(--heading);
      line-height: 1.4;
      margin: var(--sp-xs) 0 var(--sp-m) 0;
    }
    .celebration-actions {
      display: flex;
      align-items: center;
      gap: var(--sp-l);
    }
    .celebration-share {
    }
    .celebration-share:hover { background: var(--accent-hover); }
    .celebration-dismiss {
      background: none;
      border: none;
      color: var(--text-dim);
      font-size: var(--fs-xs);
      text-decoration: underline;
      cursor: pointer;
    }
    .celebration-dismiss:hover { color: var(--heading); }
    .confetti-piece {
      position: fixed;
      top: -14px;
      width: 8px;
      height: 12px;
      z-index: 40;
      pointer-events: none;
      animation: falconConfettiFall var(--dur) ease-in forwards;
    }
    @keyframes falconConfettiFall {
      to { transform: translate3d(var(--dx), 110vh, 0) rotate(var(--rot)); }
    }
    @media (prefers-reduced-motion: reduce) {
      .confetti-piece { display: none; }
      .celebration { animation: none; }
    }

    /* ---------- Settings panel ---------- */
    .settings-panel {
      position: fixed;
      top: 0;
      right: -100%;
      width: 85%;
      max-width: 340px;
      height: 100%;
      background: var(--bg);
      border-left: 1px solid var(--border);
      box-shadow: -8px 0 20px var(--shade-4);
      padding: var(--sp-xl);
      box-sizing: border-box;
      transition: right 0.25s ease;
      z-index: 20;
      overflow-y: auto;
    }
    .settings-panel.open {
      right: 0;
    }
    /* While one of these panels is open, the page behind it holds still:
       its scroll bar sat under the panel's at the right edge, and Firefox
       sent the wheel and the drag to either (the license key out of reach
       until the right one showed). Body too, for Safari's popup, where
       the body is what scrolls. */
    html:has(.settings-panel.open),
    html:has(.settings-panel.open) body {
      overflow: hidden;
    }
    .settings-panel {
      overscroll-behavior: contain;
    }
    .settings-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--sp-xl);
      color: var(--heading);
      font-weight: bold;
      text-transform: none;
      font-size: var(--fs-m);
    }
    .settings-close {
    }
    .settings-sub-label {
      font-size: var(--fs-xs);
      color: var(--text-dim);
      margin: calc(var(--sp-2xs) * -1) 0 var(--sp-s) 0;
      text-transform: none;
    }
    /* "Enjoying Falcontext? Rate it…", under the Save button. */
    .settings-sub-label.settings-rate { margin: var(--sp-xl) 0 0 0; }
    .settings-sub-label.settings-version { margin: var(--sp-m) 0 0 0; }
    .heading-level-row {
      display: flex;
      flex-direction: column;
      gap: var(--sp-xs);
      font-size: var(--fs-xs);
      color: var(--text-dim);
      padding: var(--sp-xs) 0;
    }
    .heading-level-row select,
    .heading-level-row input[type="text"] {
      width: 100%;
      box-sizing: border-box;
    }
    .checkbox-row {
      text-transform: none;
      font-size: var(--fs-s);
      display: flex;
      align-items: center;
      gap: var(--sp-s);
      color: var(--heading);
      margin-top: var(--sp-xs);
      cursor: pointer;
    }
    .checkbox-row input {
      /* Native checkboxes otherwise render in whatever color the OS/
         browser defaults to (usually a plain gray or system blue),
         regardless of which of the five theme accents is active –
         accent-color re-tints the native checkbox fill/check to match,
         same as every other accent-colored control in the panel. */
      accent-color: var(--accent);
      width: 15px;
      height: 15px;
      cursor: pointer;
      flex-shrink: 0;
    }

    /* ---------- Collapsible settings groups ----------
       Sync and Data each stack several full-width buttons, which made the
       panel read as one long uniform list. Folding them behind a summary
       (same disclosure pattern already used for a manuscript's document
       list, see .doc-details) keeps them one tap away without permanently
       occupying the space. */
    .settings-group {
      margin-bottom: var(--sp-xl);
      border-top: 1px solid var(--border);
      padding-top: var(--sp-l);
    }
    .settings-group summary {
      list-style: none;
      cursor: pointer;
      font-size: var(--fs-xs);
      color: var(--text-dim);
      text-transform: none;
      font-weight: bold;
      display: flex;
      align-items: center;
      margin-bottom: var(--sp-m);
    }
    .settings-group summary::-webkit-details-marker {
      display: none;
    }
    .settings-group summary::before {
      content: '\25B8';
      display: inline-block;
      margin-right: var(--sp-m);
      font-size: var(--fs-l);
      color: var(--text-dim);
      transition: transform 0.15s ease;
    }
    .settings-group[open] summary::before {
      transform: rotate(90deg);
    }
    .settings-group summary:hover {
      color: var(--heading);
    }

    .settings-save-btn {
      display: block;
      margin-top: var(--sp-2xl);
    }
    /* Settings specifically (not the Writing/Editing forms, which already
       fit their fields tightly on purpose) gets extra room between each
       field/section so it doesn't read as one dense block of text. */
    #settingsPanel .field {
      margin-bottom: var(--sp-4xl);
    }
    #settingsPanel .checkbox-row {
      margin-top: var(--sp-m);
    }
    #settingsPanel .checkbox-row:first-of-type {
      margin-top: var(--sp-s);
    }
    #settingsPanel .settings-sub-label {
      margin-bottom: var(--sp-l);
    }
    #lblLicenseStatus {
      margin-top: var(--sp-l);
    }

    /* ---------- Data (export/import) buttons ----------
       Same pill shape as settings-save-btn/sprint-action-btn, but three
       stack together here, so each just needs a small top margin rather
       than that lone button's big 20px separation from the field above. */
    .data-btn {
      display: block;
      width: 100%;
      box-sizing: border-box;
      margin-top: var(--sp-m);
      border-radius: var(--r-s);
      padding: var(--sp-m) var(--sp-xl);
      font-size: var(--fs-s);
      font-weight: bold;
      text-transform: none;
      cursor: pointer;
    }
    /* The display above would beat the hidden attribute, which Settings
       uses to hide Sign In to Google Again, the Drive and Chrome sync
       Turn Off buttons and others. */
    .data-btn[hidden] {
      display: none;
    }
    /* Drive sync stopped (signed out of Google): in red, not to be missed. */
    #lblDriveStatus.sync-stopped {
      color: var(--danger-text);
    }
    .data-btn.primary {
      border: none;
      background: var(--accent);
      color: var(--accent-contrast);
    }
    .data-btn.primary:hover {
      background: var(--accent-hover);
    }
    .data-btn.secondary {
    }

    /* ---------- Color scheme picker ---------- */
    .theme-swatches {
      display: flex;
      flex-wrap: wrap;
      gap: var(--sp-l);
    }
    .theme-swatch {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      padding: 0;
      cursor: pointer;
      border: 2px solid var(--border);
      background: linear-gradient(135deg, var(--swatch-bg) 50%, var(--swatch-accent) 50%);
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    .theme-swatch:hover {
      transform: scale(1.1);
    }
    .theme-swatch.active {
      border-color: var(--swatch-accent);
      box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--swatch-accent);
    }

    /* Sprint Mode – reuses the same full-width pill-button look as the
       Settings Save button, so a "stop" variant just needs a color swap. */
    .sprint-action-btn {
      display: block;
    }
    .sprint-timer {
      font-family: var(--font-mono);
      font-size: 36px;
      font-weight: bold;
      color: var(--heading);
      text-align: center;
      margin: var(--sp-xs) 0 var(--sp-m) 0;
    }
    .sprint-words {
      text-align: center;
      margin-bottom: var(--sp-l);
    }
    .sprint-result {
      text-align: center;
      margin-bottom: var(--sp-l);
      line-height: 1.5;
    }

    .analysis-stats {
      font-size: var(--fs-xs);
      color: var(--text-dim);
      margin-bottom: var(--sp-l);
      line-height: 1.5;
    }
    .analysis-flag-title {
      font-size: var(--fs-s);
      font-weight: bold;
      color: var(--heading);
      margin-bottom: var(--sp-2xs);
    }
    .analysis-flag-title.clear {
      color: var(--accent);
    }
    .analysis-flag-detail {
      font-size: var(--fs-xs);
      color: var(--text-dim);
      line-height: 1.4;
    }

    /* Cross-links between Prose Analysis and Bird's Eye ("See this broken
       down by chapter →"). Styled like the other quiet text links
       (.refresh-link) instead of the browser's default blue. */
    .deep-dive-row {
      margin-top: var(--sp-s);
    }
    .deep-dive-link {
      font-size: var(--fs-xs);
      color: var(--text-dim);
      text-decoration: underline;
      text-decoration-color: rgba(var(--accent-rgb), 0.5);
      text-underline-offset: 2px;
    }
    .deep-dive-link:visited {
      color: var(--text-dim);
    }
    .deep-dive-link:hover, .deep-dive-link:focus-visible {
      color: var(--heading);
      text-decoration-color: var(--accent);
    }

    .reminder-row {
      display: flex;
      align-items: center;
      gap: var(--sp-m);
      margin-bottom: var(--sp-m);
    }
    .reminder-row input[type="time"] {
      flex: 1;
    }
    .reminder-remove {
      font-size: var(--fs-xl);
      flex-shrink: 0;
    }
    .reminder-empty {
      font-size: var(--fs-xs);
      color: var(--text-dim);
      margin-bottom: var(--sp-m);
    }

    /* ---------- Chapter/Scene Markers ----------
       Same row/list pattern as Writing Reminders above – markers are
       stored per tracked document (see chapterMarkers in popup.js), each
       one bookmarking a word-count position with a label ("Chapter 4",
       "Ballroom scene"). This is deliberately a free-tier feature (unlike the trend graph
       itself) since it's the data foundation the future Outline/Beat
       Sheet tool will read from – gating it behind Pro would mean free
       users lose that history if they upgrade later. */
    .marker-add-row {
      display: flex;
      gap: var(--sp-m);
      margin-bottom: var(--sp-m);
    }
    .marker-add-row select {
      flex: 0 0 108px;
    }
    .marker-add-row input {
      flex: 1;
      min-width: 0;
    }
    .marker-row {
      display: flex;
      align-items: flex-start;
      gap: var(--sp-m);
      padding: var(--sp-m) var(--sp-l);
      margin-bottom: var(--sp-s);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-m);
    }
    .marker-type-badge {
      flex-shrink: 0;
      margin-top: 1px;
      background: var(--surface-alt);
      color: var(--accent);
      border: 1px solid var(--border-input);
    }
    .marker-type-badge.scene {
      color: var(--text-dim);
    }
    .marker-info {
      flex: 1;
      min-width: 0;
    }
    .marker-label {
      font-size: var(--fs-s);
      font-weight: bold;
      color: var(--heading);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .marker-meta {
      font-size: var(--fs-2xs);
      color: var(--text-dim);
      margin-top: 1px;
    }
    .marker-remove {
      font-size: var(--fs-xl);
      flex-shrink: 0;
    }
    .marker-edit {
      background: none;
      border: none;
      color: var(--text-dim);
      cursor: pointer;
      padding: var(--sp-2xs) var(--sp-xs);
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
    }
    .marker-edit:hover {
      color: var(--accent);
    }
    .marker-row-editing {
      flex-direction: column;
      align-items: stretch;
      gap: var(--sp-s);
    }
    .marker-edit-row {
      display: flex;
      gap: var(--sp-s);
    }
    .marker-edit-row select {
      flex: 0 0 100px;
    }
    .marker-edit-row input {
      flex: 1;
      min-width: 0;
    }
    .marker-edit-actions {
      display: flex;
      gap: var(--sp-m);
      justify-content: flex-end;
    }
    .marker-edit-save {
      padding: var(--sp-s) var(--sp-xl);
      font-size: var(--fs-s);
    }
    .marker-edit-cancel {
      background: none;
      border: none;
      color: var(--text-dim);
      font-size: var(--fs-s);
      cursor: pointer;
      padding: var(--sp-s) var(--sp-xs);
    }
    .marker-edit-cancel:hover {
      color: var(--heading);
    }
    .marker-empty {
      font-size: var(--fs-xs);
      color: var(--text-dim);
    }
    .marker-list-scroll {
      max-height: 220px;
      overflow-y: auto;
    }

    /* Outline & Beat Sheet panel: each chapter is a row built from the
       word-count gap between one Chapter marker and the next, with its
       Scene markers nested underneath. */
    .outline-chapter {
      padding: var(--sp-l) 0;
      border-bottom: 1px solid var(--border);
    }
    .outline-chapter:last-child {
      border-bottom: none;
      padding-bottom: var(--sp-2xs);
    }
    .outline-chapter:first-child {
      padding-top: 0;
    }
    .outline-chapter-header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--sp-m);
    }
    .outline-chapter-label {
      font-size: var(--fs-s);
      font-weight: bold;
      color: var(--heading);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .outline-chapter-count {
      font-size: var(--fs-xs);
      color: var(--text-dim);
      white-space: nowrap;
      flex-shrink: 0;
    }
    .outline-bar {
      height: 6px;
      background: var(--surface-alt);
      border-radius: var(--r-pill);
      overflow: hidden;
      margin: var(--sp-s) 0 0 0;
    }
    .outline-bar-fill {
      height: 100%;
      background: var(--accent);
      border-radius: var(--r-pill);
    }
    .outline-bar-fill.over-target {
      background: var(--streak-color);
    }
    .outline-about {
      font-style: italic;
    }
    .outline-reading-time {
      font-size: var(--fs-xs);
      color: var(--text-dim);
      margin-bottom: var(--sp-m);
    }
    .outline-chapter-note {
      font-size: var(--fs-2xs);
      color: var(--text-dim);
      margin-top: var(--sp-xs);
    }
    .outline-scene-list {
      margin: var(--sp-m) 0 0 var(--sp-xs);
      padding-left: var(--sp-l);
      border-left: 2px solid var(--border);
    }
    .outline-scene {
      font-size: var(--fs-xs);
      color: var(--text-dim);
      padding: var(--sp-2xs) 0;
    }
    .outline-scene-count {
      color: var(--text-dim);
      opacity: 0.8;
    }
    .outline-scene-note {
      font-size: var(--fs-2xs);
      color: var(--streak-color);
      margin-top: 1px;
    }
    .outline-insights-heading {
      font-size: var(--fs-xs);
      font-weight: bold;
      color: var(--heading);
      margin-top: var(--sp-l);
      margin-bottom: var(--sp-xs);
    }
    .outline-insights-heading:first-child {
      margin-top: 0;
    }
    .outline-insights-line {
      font-size: var(--fs-xs);
      color: var(--text-dim);
      padding: var(--sp-2xs) 0;
    }
    /* Collapsible <details> wrapper used throughout Bird's Eye - both the
       Pro insight dropdowns (Length outliers, Dialogue vs. narrative,
       etc.) and the plain content lists (Markers, Chapters & scenes,
       Candidate names). Native <details>/<summary> needs no JS to
       toggle; this just re-skins the disclosure triangle to match the
       rest of the extension instead of the browser default. */
    .outline-insights-section {
      margin-top: var(--sp-m);
    }
    .outline-insights-section:first-child {
      margin-top: 0;
    }
    .outline-insights-section summary {
      font-size: var(--fs-xs);
      font-weight: bold;
      color: var(--heading);
      cursor: pointer;
      padding: var(--sp-xs) 0;
      list-style: none;
    }
    .outline-insights-section summary::-webkit-details-marker {
      display: none;
    }
    .outline-insights-section summary::before {
      content: '\25b8';
      display: inline-block;
      width: 1em;
      margin-right: var(--sp-xs);
      transition: transform 0.15s;
    }
    .outline-insights-section[open] summary::before {
      transform: rotate(90deg);
    }
    .outline-insights-section .outline-insights-body {
      padding-left: var(--sp-xl);
    }

    /* Character Tracker: candidate checklist + presence matrix */
    .char-candidate-list {
      max-height: 160px;
      overflow-y: auto;
      border: 1px solid var(--border);
      border-radius: var(--r-m);
      padding: var(--sp-xs) var(--sp-m);
    }
    .char-candidate-row {
      display: flex;
      align-items: center;
      gap: var(--sp-m);
      padding: var(--sp-xs) 0;
      font-size: var(--fs-s);
    }
    .char-candidate-row label {
      display: flex;
      align-items: center;
      gap: var(--sp-s);
      flex: 1;
      cursor: pointer;
      color: var(--heading);
    }
    .char-candidate-row input {
      /* Undo the full-width text-input styling: WebKit (the desktop app's
         window) stretches a checkbox to it, pushing the name over the count. */
      accent-color: var(--accent);
      width: 15px;
      height: 15px;
      padding: 0;
      margin: 0;
      cursor: pointer;
      flex-shrink: 0;
    }
    .char-candidate-count {
      color: var(--text-dim);
      font-size: var(--fs-xs);
      flex-shrink: 0;
    }
    .char-matrix-wrap {
      overflow-x: auto;
      max-width: 100%;
    }
    table.char-matrix {
      border-collapse: collapse;
      font-size: var(--fs-xs);
      white-space: nowrap;
    }
    .char-matrix th, .char-matrix td {
      padding: var(--sp-s) var(--sp-m);
      border-bottom: 1px solid var(--border);
      text-align: center;
    }
    .char-matrix th {
      color: var(--text-dim);
      font-weight: normal;
      max-width: 70px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .char-matrix td.char-name-cell, .char-matrix th.char-name-th {
      position: sticky;
      left: 0;
      background: var(--surface);
      text-align: left;
      font-weight: bold;
      color: var(--heading);
      max-width: 90px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .char-matrix .char-present {
      color: var(--accent);
    }
    .char-matrix .char-absent {
      color: var(--border-input);
    }
    .char-matrix .char-pov {
      color: var(--streak-color);
      font-weight: bold;
      font-size: var(--fs-m);
    }
    /* A dot or star that shows where they are in that part. */
    .char-matrix .char-jump { cursor: pointer; border-radius: var(--r-s); }
    .char-matrix .char-jump:hover { background: var(--tint); }
    .char-matrix .char-jump:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
    /* Character deaths: dagger on the death segment, shaded cells after
       it (not flagged as absences), and a dagger after the name. */
    .char-matrix .char-death {
      color: var(--heading);
      font-weight: bold;
      font-size: var(--fs-m);
    }
    .char-matrix .char-deceased {
      background: repeating-linear-gradient(135deg,
        rgba(var(--surface-rgb), 0.9) 0 3px,
        var(--surface-alt) 3px 6px);
      color: var(--text-dim);
    }
    .char-matrix .char-death-mark {
      color: var(--text-dim);
      font-weight: normal;
    }
    .char-deaths {
      margin-top: var(--sp-l);
    }
    .char-death-row {
      display: flex;
      align-items: center;
      gap: var(--sp-m);
      padding: var(--sp-xs) 0;
      font-size: var(--fs-s);
    }
    .char-death-name {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--heading);
    }
    .char-death-suggest {
      margin: 0 0 var(--sp-s);
      padding: var(--sp-xs) var(--sp-m);
      border-left: 3px solid var(--accent);
      font-size: var(--fs-xs);
      color: var(--text-dim);
    }
    .char-death-suggest .inline-link { font-size: var(--fs-xs); }
    .char-death-controls {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: var(--sp-xs);
      max-width: 60%;
    }
    select.char-death-select {
      width: auto;
      max-width: 100%;
      padding: var(--sp-xs) var(--sp-s);
      font-size: var(--fs-xs);
    }
    .char-matrix .char-return {
      text-decoration: underline;
      text-decoration-style: dotted;
      text-underline-offset: 2px;
    }
    .pa-final {
      display: inline-flex;
      align-items: center;
      gap: var(--sp-xs);
      font-size: var(--fs-s);
      color: var(--text-dim);
      cursor: pointer;
      margin-left: auto;
      white-space: nowrap;
    }
    .track-word-form {
      display: flex;
      gap: var(--sp-s);
      margin-top: var(--sp-l);
    }
    .track-word-form input {
      flex: 1;
      min-width: 0;
      font: inherit;
      font-size: var(--fs-s);
      padding: var(--sp-s) var(--sp-m);
      border: 1px solid var(--border);
      border-radius: var(--r-s);
      background: var(--surface);
      color: var(--text);
    }
    /* Focus: the house ring, never the browser's (found testing Test 160). */
    .track-word-form input:focus { border-color: var(--accent); outline: none; }
    .outline-insights-section summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-s); }
    .checkbox-row input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    /* Character sheets (roadmap #39): the arrow by a tracked name opens
       what the book says about their looks, under the matrix. */
    .cs-arrow { display: inline-flex; align-items: center; gap: var(--sp-xs); margin: 0; padding: 0 var(--sp-2xs) 0 0; font: inherit; text-align: left;
      border: 0; border-radius: var(--r-s); background: none; color: inherit; cursor: pointer; }
    .cs-arrow-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: var(--text-dim); }
    .cs-arrow svg { transition: transform .15s; }
    .cs-arrow[aria-expanded="true"] .cs-arrow-icon { color: var(--accent); }
    .cs-arrow[aria-expanded="true"] svg { transform: rotate(90deg); }
    .cs-arrow:hover .cs-arrow-icon { color: var(--accent); }
    .cs-arrow:hover .cs-arrow-name { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 2px; }
    .cs-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
    .cs-arrow:focus-visible .cs-arrow-icon { color: var(--accent); }
    @media (pointer: coarse) { .cs-arrow { min-height: 32px; padding-right: var(--sp-s); } }
    .char-sheet { margin-top: var(--sp-l); padding: var(--sp-l) var(--sp-xl) var(--sp-l); border: 1px solid var(--border-input); border-radius: var(--r-l); background: var(--surface-alt); }
    .cs-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-xs) var(--sp-m); font-size: var(--fs-l); font-weight: bold; color: var(--heading); margin-bottom: var(--sp-l); }
    /* He, she or they: what the checks take the character's pronouns as. */
    .cs-gender select { width: auto; max-width: 100%; padding: var(--sp-2xs) var(--sp-xs); font-size: var(--fs-xs); font-weight: normal; cursor: pointer; border-color: transparent; background-color: transparent; color: var(--text-dim); }
    .cs-gender select:hover { border-color: var(--accent); }
    .cs-gender select:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
    .cs-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2xs) var(--sp-l); margin: 0 0 var(--sp-m); }
    .cs-label { flex: 0 0 66px; font-size: var(--fs-xs); color: var(--text-dim); }
    .cs-values { flex: 1 1 160px; min-width: 0; }
    .cs-chip .cs-dot { display: inline-block; width: 8px; height: 8px; margin-right: var(--sp-s); border-radius: 50%; box-shadow: 0 0 0 1px var(--tint); vertical-align: 0; }
    .pa-chip.cs-chip-slip { border-color: var(--warn); } /* past .pa-chip, which comes later */
    .cs-slip { color: var(--warn); font-size: var(--fs-s); margin-left: var(--sp-2xs); }
    .cs-where { flex: 1 0 100%; padding-left: 76px; font-size: var(--fs-xs); color: var(--text-dim); margin-bottom: var(--sp-xs); }
    .cs-empty { font-size: var(--fs-s); color: var(--text-dim); }
    /* Also called: the names the writer gave, the book's links offered, and a box for another. */
    .cs-aka .cs-values { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-xs) var(--sp-s); }
    .cs-aka-chip { display: inline-flex; align-items: center; gap: var(--sp-2xs); color: var(--heading); }
    .cs-aka-new { display: inline-flex; align-items: center; gap: var(--sp-s); }
    input.cs-aka-input { width: 130px; padding: var(--sp-xs) var(--sp-s); font-size: var(--fs-xs); }
    input.cs-aka-input:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
    .cs-aka .inline-link { font-size: var(--fs-xs); }
    .cs-sub { margin: var(--sp-l) 0 var(--sp-s); padding-top: var(--sp-l); border-top: 1px solid var(--border-input); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); }
    .cs-fact { font-size: var(--fs-s); line-height: 1.45; color: var(--text); }
    /* + add, and the quiet actions on a suggested death: dim words, no box. */
    .cs-add { padding: 1px var(--sp-2xs); border: 0; background: none; font: inherit; font-size: var(--fs-xs); color: var(--text-dim); cursor: pointer; border-radius: var(--r-s); }
    .cs-add:hover { color: var(--heading); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 2px; }
    .cs-add:focus-visible { color: var(--heading); outline: 2px solid var(--accent); outline-offset: 1px; }
    .cs-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2xs) var(--sp-l); margin-top: var(--sp-xs); }
    /* What the book suggests: dashed, a question until it's added. */
    .cs-suggest { display: inline-flex; align-items: center; gap: 1px; padding: 0 var(--sp-2xs) 0 0; border: 1px dashed var(--border-input); border-radius: var(--r-l); }
    .cs-suggest-add { padding: 1px var(--sp-xs) 1px var(--sp-m); border: 0; background: none; font: inherit; font-size: var(--fs-xs); color: var(--text-dim); cursor: pointer; border-radius: var(--r-l); }
    .cs-suggest-add:last-child { padding-right: var(--sp-m); }
    .cs-suggest-add:hover { color: var(--heading); }
    .cs-suggest-add:focus-visible { color: var(--heading); outline: 2px solid var(--accent); outline-offset: 1px; }
    .cs-suggest:hover { border-color: var(--accent); }
    .cs-suggest-label { font-size: var(--fs-xs); font-style: italic; color: var(--text-dim); }
    .cs-hint { margin: var(--sp-2xs) 0 0; font-size: var(--fs-xs); line-height: 1.4; color: var(--text-dim); }
    .cs-down { margin-top: var(--sp-l); padding-top: var(--sp-m); border-top: 1px solid var(--border-input); font-size: var(--fs-xs); color: var(--text-dim); }
    .cs-down-item { display: inline-flex; align-items: center; gap: var(--sp-2xs); margin-right: var(--sp-l); white-space: nowrap; }
    .cs-down .pa-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: var(--r-s); }
    /* A finger needs room: the × apart from its chip, and big enough to aim at. */
    .cs-suggest .pa-x, .cs-aka-chip .pa-x, .cs-down .pa-x { margin-left: var(--sp-2xs); }
    @media (pointer: coarse) {
      .cs-suggest .pa-x, .cs-aka-chip .pa-x, .cs-down .pa-x { min-width: 32px; min-height: 32px; margin-left: var(--sp-s); font-size: var(--fs-xl); }
      .cs-suggest-add { padding: var(--sp-m) var(--sp-s) var(--sp-m) var(--sp-l); }
      .cs-aka .cs-values { gap: var(--sp-m); }
    }
    .cs-suggest .pa-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: var(--r-s); }
    .cs-dim { color: var(--text-dim); }
    .cs-fam-offer { display: inline-flex; align-items: center; gap: var(--sp-2xs); }
    .cs-fam-offer .pa-x:focus-visible,
    .cs-aka-chip .pa-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: var(--r-s); }
    .char-legend {
      font-size: var(--fs-2xs);
      color: var(--text-dim);
      margin-top: var(--sp-s);
      text-align: left;
    }
    /* Characters gone too long: their gaps past the line shaded in the
       matrix (the warning's amber, see through), and listed one line
       each under it and in the Structure pass, there with a strip of the
       whole book; red (the traffic light's) past the red line. */
    .char-matrix td.char-gap,
    .char-gaps-key {
      background: var(--streak-tint);
    }
    .char-gaps-box {
      margin-top: var(--sp-l);
    }
    details.char-gaps-box .char-gaps-head {
      margin-top: var(--sp-xs);
    }
    /* Not the folded sections' "first one, no space above". */
    #charGapsWrap > details.char-gaps-box {
      margin-top: var(--sp-l);
    }
    .char-gaps-none {
      margin-top: var(--sp-l);
      font-size: var(--fs-s);
      color: var(--text-dim);
    }
    .char-gaps-none::first-letter {
      color: var(--accent);
      font-weight: bold;
    }
    /* The slider for how long counts as gone too long. */
    .gap-line-row {
      margin-top: var(--sp-l);
      font-size: var(--fs-s);
    }
    .gap-line-row label {
      display: block;
      color: var(--text-dim);
    }
    #lblGapLine {
      color: var(--heading);
      font-weight: bold;
    }
    /* Drawn here, not left to the browser (Safari's track doesn't fill,
       its tick hardly shows): a track filled with the accent up to the
       handle (--fill, 0 to 1, set by popup.js), a round handle, and the
       15,000 mark under it. The handle is 18px: its centre runs from 9px
       to 100% - 9px, and the fill and the mark follow that. */
    #rngGapLine {
      --fill: 0.25;
      --at: calc(9px + (100% - 18px) * var(--fill));
      -webkit-appearance: none;
      appearance: none;
      display: block;
      width: 100%;
      height: 22px;
      margin: var(--sp-xs) 0 0;
      /* Not the text boxes' padding and border (input, above): the track
         must run the full width, as the 15,000 mark does. */
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      cursor: pointer;
    }
    #rngGapLine::-webkit-slider-runnable-track {
      height: 6px;
      border-radius: var(--r-s);
      background: linear-gradient(to right, var(--accent) var(--at), var(--border-input) var(--at));
    }
    #rngGapLine::-moz-range-track {
      height: 6px;
      border-radius: var(--r-s);
      background: linear-gradient(to right, var(--accent) var(--at), var(--border-input) var(--at));
    }
    #rngGapLine::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 18px;
      height: 18px;
      margin-top: calc(var(--sp-s) * -1);
      border-radius: 50%;
      background: var(--accent);
      border: 3px solid var(--surface);
      box-shadow: 0 0 0 1px var(--accent);
    }
    #rngGapLine::-moz-range-thumb {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--accent);
      border: 3px solid var(--surface);
      box-shadow: 0 0 0 1px var(--accent);
    }
    #rngGapLine:focus {
      outline: none;
    }
    #rngGapLine:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
      border-radius: var(--r-s);
    }
    .gap-line-ends {
      position: relative;
      display: flex;
      justify-content: space-between;
      font-size: var(--fs-2xs);
      color: var(--text-dim);
    }
    /* The default (15,000) sits a quarter of the way along (5,000 to
       45,000), with a tick up to the track; it says the default line for
       the book that's open (popup.js). */
    .gap-line-mark {
      position: absolute;
      left: calc(9px + (100% - 18px) * 0.25);
      transform: translateX(-50%);
      padding-top: var(--sp-s);
      color: var(--heading);
    }
    .gap-line-mark::before {
      content: '';
      position: absolute;
      top: -3px;
      left: 50%;
      width: 2px;
      height: 7px;
      margin-left: -1px;
      border-radius: 1px;
      background: var(--heading);
    }
    .char-gaps-head {
      font-size: var(--fs-xs);
      color: var(--text-dim);
      display: flex;
      align-items: center;
      gap: var(--sp-s);
    }
    .char-gaps-key {
      display: inline-block;
      width: 14px;
      height: 10px;
      border-radius: 2px;
    }
    ul.char-gaps {
      list-style: none;
      margin: var(--sp-s) 0 0;
      padding: 0;
    }
    .char-gap-item {
      padding: var(--sp-s) 0;
      border-top: 1px solid var(--border);
    }
    .char-gap-item:first-child {
      border-top: none;
    }
    .char-gap-line {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: var(--sp-2xs) var(--sp-m);
      font-size: var(--fs-s);
    }
    .char-gap-name {
      font-weight: bold;
      color: var(--heading);
    }
    .char-gap-len {
      color: var(--streak-color);
      font-weight: bold;
    }
    .char-gap-len.red {
      color: var(--bad);
    }
    .char-gap-where {
      color: var(--text-dim);
      margin-left: auto;
    }
    .char-gap-strip {
      display: flex;
      gap: var(--sp-2xs);
      height: 8px;
      margin-top: var(--sp-s);
    }
    .char-gap-strip.dense {
      gap: 0;
    }
    .char-gap-strip span {
      flex: 1 1 0;
      min-width: 1px;
      border-radius: 1px;
      background: var(--border);
    }
    .char-gap-strip .s-p {
      background: var(--accent);
    }
    .char-gap-strip .s-g {
      background: var(--streak-color);
    }
    .char-gap-strip .s-d {
      background: transparent;
      box-shadow: inset 0 0 0 1px var(--border);
    }

    /* Briefly pulses around a field to draw the eye to it – used when a
       copied API key gets dropped in automatically, so it's obvious both
       that something happened and exactly where it landed. */
    .field-highlight {
      border-color: var(--accent) !important;
      animation: falconFieldPulse 1.3s ease-in-out 2;
    }
    @keyframes falconFieldPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55); }
      50% { box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0.15); }
    }

    /* ---------- Multi-document dashboard (Pro) ----------
       A slide-in panel (same .settings-panel shell as Settings/Share/
       Achievements) listing every tracked manuscript as a card. Free users
       see the real cards blurred underneath an upsell – same pattern as
       Focus Mode's lock – and the content is made `inert` in popup.js so
       it can't be tabbed into or clicked while locked. */
    .top-row .settings-btn {
      /* Four controls now share this row, so the icon buttons give back a
         little width to the WRITING / EDITING / TOOLS toggle. */
      padding: 0 var(--sp-m);
    }
    .docs-locked-wrap {
      position: relative;
    }
    .docs-locked-wrap.pro-locked {
      /* Caps the locked preview so the upsell (centered in the wrapper)
         always lands on screen, however many manuscripts there are. */
      max-height: 440px;
      overflow: hidden;
    }
    .docs-locked-wrap.pro-locked .docs-content {
      filter: blur(3px);
      opacity: 0.4;
      pointer-events: none;
      user-select: none;
    }
    .docs-upsell {
      display: none;
      position: absolute;
      inset: 0;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--sp-s);
      text-align: center;
      padding: var(--sp-xl) var(--sp-l);
      background: linear-gradient(180deg, rgba(var(--surface-rgb), 0.2), rgba(var(--surface-rgb), 0.9) 60px, rgba(var(--surface-rgb), 0.94) 100%);
    }
    .docs-locked-wrap.pro-locked .docs-upsell {
      display: flex;
    }
    .docs-upsell .lock-icon {
      font-size: var(--fs-xl);
    }
    .docs-upsell p {
      margin: 0;
      font-size: var(--fs-s);
      color: var(--heading);
      line-height: 1.4;
      max-width: 260px;
    }
    .docs-upsell .unlock-link {
      margin-top: var(--sp-2xs);
    }
    .docs-upsell .unlock-link:hover {
      background: var(--accent-hover);
    }
    .docs-summary {
      margin: 0 0 var(--sp-l) 0;
    }
    .docs-summary strong {
      color: var(--heading);
    }
    .docs-toolbar {
      margin-bottom: var(--sp-l);
    }
    .doc-card {
      padding: var(--sp-l);
      margin-bottom: var(--sp-m);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-m);
    }
    .doc-card.current {
      border-color: var(--accent);
    }
    .doc-head {
      display: flex;
      align-items: center;
      gap: var(--sp-s);
    }
    .doc-title {
      flex: 1;
      min-width: 0;
      font-size: var(--fs-m);
      font-weight: bold;
      color: var(--heading);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .doc-badge {
      flex-shrink: 0;
      background: var(--accent);
      color: var(--accent-contrast);
    }
    .doc-meta {
      font-size: var(--fs-2xs);
      color: var(--text-dim);
      margin: var(--sp-2xs) 0 var(--sp-m) 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .doc-bar {
      height: 6px;
      border-radius: var(--r-s);
      background: var(--surface-alt);
      overflow: hidden;
    }
    .doc-bar-fill {
      height: 100%;
      background: var(--accent);
    }
    .doc-bar-label {
      display: flex;
      justify-content: space-between;
      font-size: var(--fs-xs);
      color: var(--text-dim);
      margin: var(--sp-xs) 0 var(--sp-m) 0;
    }
    .doc-bar-label strong {
      color: var(--heading);
    }
    .doc-stats {
      display: flex;
      gap: var(--sp-s);
      margin-bottom: var(--sp-m);
    }
    .doc-stat {
      flex: 1;
      text-align: center;
      padding: var(--sp-s) var(--sp-xs);
      background: var(--surface-alt);
      border-radius: var(--r-s);
    }
    .doc-stat-value {
      font-size: var(--fs-m);
      font-weight: bold;
      color: var(--heading);
    }
    .doc-stat-label {
      font-size: var(--fs-2xs);
      text-transform: none;
      letter-spacing: 0.5px;
      color: var(--text-dim);
    }
    .doc-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-m);
    }
    .doc-est {
      flex: 1;
      font-size: var(--fs-xs);
      line-height: 1.4;
      color: var(--text-dim);
    }
    .doc-spark {
      flex-shrink: 0;
    }
    .doc-actions {
      display: flex;
      gap: var(--sp-m);
      margin-top: var(--sp-m);
    }
    .data-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .doc-action-btn.danger:hover {
      border-color: var(--danger);
      color: var(--danger);
    }
    .doc-row {
      display: flex;
      align-items: center;
      gap: var(--sp-m);
      padding: var(--sp-m) var(--sp-l);
      margin-bottom: var(--sp-s);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-m);
    }
    .doc-row-info {
      flex: 1;
      min-width: 0;
    }
    .doc-row .doc-meta {
      margin: 1px 0 0 0;
    }

    .doc-details {
      margin-bottom: var(--sp-xs);
    }
    .doc-details summary {
      font-size: var(--fs-xs);
      font-weight: bold;
      color: var(--text-dim);
      text-transform: none;
      letter-spacing: 0.5px;
      cursor: pointer;
      margin: var(--sp-2xs) 0 var(--sp-m) 0;
    }
    .doc-details summary:hover {
      color: var(--heading);
    }
    .doc-details .doc-row {
      background: var(--surface-alt);
      border-color: var(--border-input);
    }
    .ms-doc-picker {
      max-height: 240px;
      overflow-y: auto;
      padding: var(--sp-s) var(--sp-m);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-m);
    }
    .doc-pick-row {
      padding: var(--sp-s) 0;
      margin: 0;
      border-bottom: 1px solid var(--border);
    }
    .doc-pick-row:last-child {
      border-bottom: none;
    }
    .doc-pick-row .doc-meta {
      margin: 1px 0 0 0;
    }

    /* ---------- Cross-device license status ---------- */
    .license-devices { margin-top: var(--sp-3xl); }
    .lic-title {
      font-size: var(--fs-xs); color: var(--text-dim); text-transform: none;
      letter-spacing: 0.5px; font-weight: bold; margin-bottom: var(--sp-l);
    }
    .lic-row {
      display: flex; align-items: center; gap: var(--sp-m); padding: var(--sp-s) var(--sp-m); margin-bottom: var(--sp-xs);
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-m);
    }
    .lic-dot {
      width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
      background: var(--border-input);
    }
    .lic-dot.on { background: var(--accent); }
    .lic-info { flex: 1; min-width: 0; }
    .lic-remove { flex: none; align-self: center; font-size: var(--fs-xl); }
    .lic-name { font-size: var(--fs-s); font-weight: bold; color: var(--heading); text-transform: none; }
    .lic-me { margin-left: var(--sp-xs); vertical-align: middle;
      background: var(--surface-alt); color: var(--accent); border: 1px solid var(--border-input);
    }
    .lic-meta { font-size: var(--fs-2xs); color: var(--text-dim); text-transform: none; }
    .lic-note {
      font-size: var(--fs-xs); line-height: 1.4; color: var(--heading); text-transform: none;
      margin-top: var(--sp-s); padding: var(--sp-m); border: 1px solid var(--accent); border-radius: var(--r-m);
    }

    /* ---------- Color schemes ----------
       Each scheme below only lists the variables that differ from the
       :root defaults (the "Forest" dark theme) – swapping schemes is a
       matter of overriding a handful of custom properties rather than
       duplicating every rule in the stylesheet like the old single
       "bright theme" override block used to. */
    body.theme-parchment {
      color-scheme: light;
      --danger-text: #b3261e;
      --bg: #f2ede0;
      --bg-rgb: 242, 237, 224;
      --surface: #ffffff;
      --surface-rgb: 255, 255, 255;
      --surface-alt: #e4ddc9;
      --tab-hover: #ece6d5;
      --border: #d9d2c0;
      --border-input: #d9d2c0;
      --text: #0e2019;
      --text-dim: #6b7d72;
      --heading: #0e2019;
      --accent: #22c55e;
      --accent-hover: #2ddb70;
      --accent-rgb: 34, 197, 94;
      --accent-contrast: #081712;
    }
    /* The page's own scrollbar follows the root, not body: light too. */
    :root:has(> body.theme-parchment), :root:has(> body.theme-slate) { color-scheme: light; }
    body.theme-midnight {
      --bg: #0a1220;
      --bg-rgb: 10, 18, 32;
      --surface: #060c16;
      --surface-rgb: 6, 12, 22;
      --surface-alt: #16233a;
      --tab-hover: #101b2f;
      --border: #16233a;
      --border-input: #1e2f4d;
      --text: #ffffff;
      --text-dim: #82a0c9;
      --heading: #eef3fb;
      --accent: #3b82f6;
      --accent-hover: #60a5fa;
      --accent-rgb: 59, 130, 246;
      --accent-contrast: #ffffff;
    }
    body.theme-plum {
      --bg: #1a0e1f;
      --bg-rgb: 26, 14, 31;
      --surface: #120a16;
      --surface-rgb: 18, 10, 22;
      --surface-alt: #2e1a35;
      --tab-hover: #241329;
      --border: #2e1a35;
      --border-input: #3d2247;
      --text: #ffffff;
      --text-dim: #b89bc4;
      --heading: #f6eaf9;
      --accent: #d946ef;
      --accent-hover: #e879f9;
      --accent-rgb: 217, 70, 239;
      --accent-contrast: #ffffff;
    }
    body.theme-slate {
      color-scheme: light;
      --danger-text: #b3261e;
      --bg: #eef1f6;
      --bg-rgb: 238, 241, 246;
      --surface: #ffffff;
      --surface-rgb: 255, 255, 255;
      --surface-alt: #dde3ec;
      --tab-hover: #e5e9f1;
      --border: #d7dee8;
      --border-input: #c9d2df;
      --text: #1b2430;
      --text-dim: #64748b;
      --heading: #1b2430;
      --accent: #6366f1;
      --accent-hover: #818cf8;
      --accent-rgb: 99, 102, 241;
      --accent-contrast: #ffffff;
    }

    /* ---------- Editorial restyle ----------
       One consistent language applied across every panel: a serif
       headline for each section's title (matching the falcontext.com
       card), sentence-case labels instead of tracked-out caps, hairline
       dividers under headers instead of boxed "card kit" chrome, fully
       rounded progress bars, and left-accent note callouts. Uses the
       existing theme variables throughout, so it holds under every
       color scheme, not just Parchment. */
    :root {
      --streak-color: #b7791f;
      --streak-tint: rgba(183, 121, 31, 0.3); /* the streak colour, faint */
    }
    .inline-goal-input {
      font: inherit;
      font-weight: bold;
      color: var(--heading);
      background: transparent;
      border: none;
      border-bottom: 1px dashed var(--border-input);
      /* JS sizes this to the goal's digits (sizeGoalInput in popup.js); a
         fixed 5.5ch cut off six-digit goals. */
      width: 5.5ch;
      box-sizing: content-box;
      text-align: right;
      padding: 0 1px;
    }
    .inline-goal-input::-webkit-outer-spin-button,
    .inline-goal-input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    .inline-goal-input:hover,
    .inline-goal-input:focus {
      border-bottom-color: var(--accent);
      outline: none;
    }
    .streak-flame {
      color: var(--streak-color);
      vertical-align: -3px;
      margin-right: var(--sp-xs);
    }
    .mini-label {
      font-family: var(--font-serif);
      font-weight: normal;
      font-size: var(--fs-l);
      letter-spacing: 0;
      text-transform: none;
      text-align: left;
      color: var(--heading);
      padding-bottom: var(--sp-l);
      margin-bottom: var(--sp-xl);
      border-bottom: 1px solid var(--border);
    }
    .results .mini-label {
      padding-bottom: 0;
      margin-bottom: 0;
      border-bottom: none;
    }
    label,
    .stats-section-title,
    .badge-section-title,
    .lic-title,
    .settings-group summary,
    .doc-stat-label {
      text-transform: none;
      letter-spacing: 0;
    }
    .card-header-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--sp-l);
      padding: 0 var(--sp-4xl) var(--sp-l) 0;
      margin-bottom: var(--sp-xl);
      border-bottom: 1px solid var(--border);
    }
    .card-doc-label {
      font-size: var(--fs-m);
      color: var(--text-dim);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 42%;
    }
    .stat-row {
      display: flex;
      flex-wrap: wrap; /* very long numbers drop under the label instead of being clipped */
      align-items: baseline;
      justify-content: space-between;
      column-gap: var(--sp-m);
      margin-bottom: var(--sp-m);
    }
    /* Today's Editing (the Edit tab): today's words revised, removed and new. */
    .edit-stats { display: flex; gap: var(--sp-m); margin: var(--sp-2xs) 0 var(--sp-l); }
    .edit-stats[hidden] { display: none; }
    .stat-row[hidden] { display: none; }
    /* Time today (a daily time goal): under the words, a little smaller. */
    .stat-row.time-row { margin-top: calc(var(--sp-xs) * -1); }
    .stat-row.time-row .stat-row-value { font-size: var(--fs-l); }
    /* "+ Add a time goal", under Words today, at the numbers' side. */
    .refresh-link.time-goal-add { margin: calc(var(--sp-s) * -1) 0 var(--sp-m) auto; font-size: var(--fs-xs); }
    .refresh-link.time-goal-add[hidden] { display: none; }
    /* Settings → Daily time goal. */
    .time-count-label { margin-top: var(--sp-l); }
    .edit-stat { flex: 1; min-width: 0; text-align: center; }
    .edit-stat-n { display: block; font-size: 24px; font-weight: bold; line-height: 1.2; color: var(--heading); overflow-wrap: anywhere; }
    .edit-stat-l { display: block; font-size: var(--fs-s); color: var(--text-dim); }
    .stat-row-label {
      font-size: var(--fs-m);
      color: var(--text-dim);
    }
    .stat-row-value {
      margin-left: auto;
      white-space: nowrap;
      font-size: var(--fs-2xl);
      font-weight: bold;
      color: var(--heading);
    }
    .results .percent-display,
    .results .secondary-percent {
      font-size: var(--fs-s);
      font-weight: normal;
      color: var(--text-dim);
      text-align: right;
      margin: var(--sp-xs) 0 0 0;
    }
    .streak-body {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-l);
    }
    .card-subsection {
      position: relative;
      margin: var(--sp-xl) calc(var(--sp-l) * -1) 0 calc(var(--sp-l) * -1);
      padding: var(--sp-l) var(--sp-l) 0 var(--sp-l);
      border-top: 1px solid var(--border);
    }
    /* "Words Written Today" is now shown in the Today's Progress card
       itself, so hide the old standalone readout. #fieldVariableInput
       stays functional (its display is still toggled by JS) because it
       also carries hintSelectText, the Editing-mode selection hint. */
    #lblVariableInput, #divVariableInput {
      display: none !important;
    }
    #streakSpark svg {
      display: block;
    }
    .insights {
      border-left: 3px solid var(--accent);
      padding: 1px 0 1px var(--sp-l);
    }
    .results, .graph-box, .badge-card, .doc-card, .marker-row, .doc-row, .lic-row {
      border-radius: var(--r-l);
    }
    .data-btn, .doc-action-btn {
      border-radius: var(--r-s);
    }
    .doc-bar, .doc-bar-fill, .badge-progress, .badge-progress-fill, .badge-summary-bar, #achievementsSummaryFill {
      border-radius: var(--r-pill);
    }
/* ---------- Bird's Eye ----------
   Loaded after popup.css. Keeps Bird's Eye's own layout rules in one
   place: nested sub-panels, the grouped marker list, and chapter
   dividers in the character presence matrix. */

/* Outline & Pacing and Character Tracker are parts OF Bird's Eye, so
   they render as inset panels with a smaller, sans-serif title instead
   of repeating the serif section-header style of Bird's Eye itself. */
.card-subsection.birds-eye-sub {
  margin: var(--sp-xl) 0 0 0;
  padding: var(--sp-l);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  background: rgba(var(--bg-rgb), 0.5);
}
.birds-eye-sub > .mini-label {
  font-family: inherit;
  font-size: var(--fs-s);
  font-weight: bold;
  color: var(--heading);
  padding: 0 0 0 var(--sp-m);
  margin-bottom: var(--sp-l);
  border-bottom: none;
  border-left: 3px solid var(--accent);
  line-height: 1.3;
}

/* Marker list: scenes indented under the chapter they belong to. */
.marker-row-nested {
  margin-left: var(--sp-2xl);
  padding-top: var(--sp-s);
  padding-bottom: var(--sp-s);
}

/* Presence matrix: vertical line at the start of each chapter. */
.char-matrix th.char-chapter-start,
.char-matrix td.char-chapter-start {
  border-left: 2px solid var(--border-input);
}
.char-matrix th.char-chapter-th {
  color: var(--heading);
  font-weight: bold;
}

    /* ---------- Prose Analysis: the whole manuscript (roadmap #47) ---------- */
    .msc-box { margin-top: var(--sp-xl); }
    .msc-box[hidden] { display: none; }
    .msc-order { list-style: none; margin: var(--sp-m) 0 var(--sp-l); padding: 0; border: 1px solid var(--border-input); border-radius: var(--r-l); max-height: 260px; overflow-y: auto; }
    .msc-doc { display: flex; align-items: center; gap: var(--sp-s); padding: var(--sp-s) var(--sp-m); font-size: var(--fs-s); border-top: 1px solid var(--border-input); }
    .msc-doc:first-child { border-top: 0; }
    .msc-doc label { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: flex-start; gap: var(--sp-m); margin: 0;
      font-size: var(--fs-s); color: var(--text); text-align: left; overflow-wrap: break-word; cursor: pointer; }
    .msc-doc input[type="checkbox"] { flex: none; width: auto; margin: 0; }
    .msc-doc label span { flex: 1 1 auto; min-width: 0; }
    .msc-doc.msc-skip label span { color: var(--text-dim); text-decoration: line-through; }
    .msc-move { flex: none; display: inline-flex; gap: var(--sp-2xs); }
    .msc-done { margin: var(--sp-l) 0 var(--sp-s); font-size: var(--fs-s); }
    .msc-checks { list-style: none; margin: var(--sp-s) 0 var(--sp-l); padding: 0; border: 1px solid var(--border-input); border-radius: var(--r-l); overflow: hidden; }
    .msc-check { border-top: 1px solid var(--border-input); }
    .msc-check:first-child { border-top: 0; }
    .msc-where { padding: 0 var(--sp-l) var(--sp-m) var(--sp-4xl); font-size: var(--fs-xs); color: var(--text-dim); line-height: 1.5; }
    .msc-where .pa-dot { width: 7px; height: 7px; }
    .msc-docs-label { margin: var(--sp-xs) 0 0; font-size: var(--fs-s); font-weight: 600; color: var(--heading); }
    .msc-docs-wrap { overflow-x: auto; margin: var(--sp-s) 0; }
    .msc-docs { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
    .msc-docs th, .msc-docs td { padding: var(--sp-xs) var(--sp-s); text-align: right; border-top: 1px solid var(--border-input); vertical-align: top; }
    .msc-docs th { font-weight: 600; color: var(--text-dim); border-top: 0; }
    .msc-docs th:first-child, .msc-docs td:first-child { text-align: left; overflow-wrap: break-word; min-width: 70px; }
    .msc-vs { color: var(--text-dim); white-space: nowrap; }
    .msc-vs.msc-far { color: var(--bad); font-weight: 600; }

    /* ---------- Prose Analysis: traffic lights and ignores ---------- */
    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .pa-overview { list-style: none; margin: var(--sp-l) 0 var(--sp-l); padding: 0; border: 1px solid var(--border-input); border-radius: var(--r-l); overflow: hidden; }
    .pa-row { display: flex; align-items: center; gap: var(--sp-m); padding: var(--sp-m) var(--sp-l); font-size: var(--fs-s); }
    .pa-item { border-top: 1px solid var(--border-input); }
    .pa-item:first-child { border-top: 0; }
    /* A group's heading over its checks, with its worst light */
    .pa-group { display: flex; align-items: center; gap: var(--sp-m); padding: var(--sp-m) var(--sp-l); font-size: var(--fs-l); font-weight: 600; cursor: pointer;
      color: var(--text-dim); background: var(--surface-alt); border-top: 1px solid var(--border-input); }
    .pa-group:first-child { border-top: 0; }
    .pa-group:hover, .pa-group:focus-visible { color: var(--text); outline: none; }
    .pa-group .pa-verdict { font-weight: 400; }
    .pa-group:not(.closed) .pa-chevron { transform: rotate(180deg); } /* like a check: up when open */
    .pa-chevron { flex: none; color: var(--text-dim); transition: transform .15s; }
    .pa-item.open .pa-chevron { transform: rotate(180deg); }
    .pa-item.open > .pa-row { background: var(--surface-alt); }
    .pa-detail { padding: var(--sp-l) var(--sp-l) var(--sp-l) var(--sp-4xl); font-size: var(--fs-s); line-height: 1.45; }
    .pa-detail-foot { margin-top: var(--sp-m); text-align: right; }
    /* A combined row's parts: each under its own small heading */
    .pa-part { margin-top: var(--sp-l); padding-top: var(--sp-m); border-top: 1px solid var(--border-input); }
    .pa-part-head { display: flex; align-items: center; gap: var(--sp-m); margin: 0 0 var(--sp-s) calc(var(--sp-2xl) * -1); font-weight: 600; }
    .pa-part-head .pa-verdict { font-weight: 400; }
    .pa-thresholds { margin-top: var(--sp-l); font-size: var(--fs-xs); line-height: 1.45; color: var(--text-dim); }
    .pa-detail-foot .pa-ignore-check { margin: 0; }
    .pa-locked-note { display: flex; align-items: center; justify-content: center; gap: var(--sp-s); margin: calc(var(--sp-xs) * -1) 0 var(--sp-l); font-size: var(--fs-xs); color: var(--text-dim); }
    .pa-locked-note svg { width: 11px; height: 11px; }
    /* What Pro found here, at the top of the checks (roadmap #71). */
    .pa-pro-total { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--sp-s); margin: 0 0 var(--sp-l); padding: var(--sp-m) var(--sp-l); border: 1px solid var(--accent); border-radius: var(--r-m); font-size: var(--fs-s); color: var(--heading); text-align: center; }
    .pa-pro-total svg { width: 12px; height: 12px; }
    .pa-rating-note { margin: calc(var(--sp-xs) * -1) 0 var(--sp-l); font-size: var(--fs-xs); color: var(--text-dim); text-align: center; }
    .pa-pro-total a, .pa-locked-note a, .pr-intro-ok, .pa-elsewhere a, .pa-thresholds a, .pa-none a { color: var(--heading); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
    .pa-pro-total a:hover, .pa-locked-note a:hover, .pr-intro-ok:hover, .pa-elsewhere a:hover, .pa-thresholds a:hover, .pa-none a:hover { text-decoration-color: currentColor; }
    .pa-actions { display: flex; align-items: center; gap: var(--sp-m); flex-wrap: wrap; }
    .pa-reader-btn { padding: var(--sp-m) var(--sp-xl); font: inherit; font-size: var(--fs-m); font-weight: 600; cursor: pointer; border-radius: 2px;
      border: 1.5px solid var(--accent); background: transparent; color: var(--heading); }
    .pa-reader-btn:hover, .pa-reader-btn:focus-visible { background: rgba(var(--accent-rgb), .12); outline: none; }
    .pa-reader-btn[hidden] { display: none; }
    .pa-dialog-backdrop { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: var(--sp-xl); background: var(--shade-4); }
    .pa-dialog-backdrop[hidden] { display: none; }
    .pa-dialog { position: relative; max-width: 300px; padding: var(--sp-2xl) var(--sp-xl) var(--sp-xl); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--border-input); text-align: center; }
    .pa-dialog h3 { margin: var(--sp-s) 0 var(--sp-s); font-size: var(--fs-l); color: var(--heading); }
    .pa-dialog p { margin: 0 0 var(--sp-l); font-size: var(--fs-s); line-height: 1.5; color: var(--text); }
    .pa-dialog .pr-close { position: absolute; top: 6px; right: 8px; }
    .pa-dialog .analysis-upsell-btn { display: inline-block; text-decoration: none; }
    /* Its key line under the button, centred (a block button doesn't follow text-align). */
    .pa-dialog .have-key { margin: var(--sp-m) auto 0; }
    .pa-dialog p.pa-dialog-learn { margin-top: calc(var(--sp-s) * -1); }
    .pr-intro { display: flex; flex-direction: column; gap: var(--sp-s); margin: var(--sp-l) var(--sp-xl) 0; padding: var(--sp-l) var(--sp-l); border-radius: var(--r-m); background: var(--surface-alt); font-size: var(--fs-s); line-height: 1.5; }
    .pr-intro[hidden] { display: none; }
    .pr-intro-ok { align-self: flex-end; border: 0; background: none; font-size: var(--fs-xs); cursor: pointer; padding: 0; }
    .pa-row-link { cursor: pointer; }
    .pa-row-link:hover, .pa-row-link:focus-visible { background: var(--surface-alt); outline: none; }
    .pa-row-ignored { opacity: .6; }
    .pa-verdict a { color: inherit; text-decoration: underline; }
    /* The name keeps at least 45% of the row and wraps at word breaks; the verdict takes the rest and wraps too */
    .pa-name { flex: 1 1 45%; min-width: 0; overflow-wrap: break-word; }
    .pa-verdict { flex: 0 1 auto; max-width: 52%; color: var(--text-dim); text-align: right; font-size: var(--fs-xs); line-height: 1.3; }
    .pa-lock { display: inline-flex; width: 12px; height: 12px; color: var(--text-dim); }
    .pa-lock svg { width: 12px; height: 12px; }
    .pa-dot { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: -1px; }
    .pa-green { background: var(--ok); }
    .pa-orange { background: var(--warn); }
    .pa-red { background: var(--bad); }
    .pa-none { background: transparent; border: 1.5px solid var(--text-dim); box-sizing: border-box; }
    /* A shape as well as a colour, for eyes that can't tell them apart:
       green a circle, orange a triangle, red a square. */
    .pa-dot.pa-orange { border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); transform: scale(1.2); }
    .pa-dot.pa-red { border-radius: 1px; transform: scale(.9); }
    div.pa-none { border: 0; width: auto; height: auto; color: var(--text-dim); font-size: var(--fs-s); margin-bottom: var(--sp-xs); }
    .pa-card .analysis-flag-title { display: flex; align-items: center; gap: var(--sp-s); flex-wrap: wrap; }
    .pa-ignore-check { margin-left: auto; font-size: var(--fs-xs); font-weight: 400; color: var(--text-dim); }
    .pa-note { font-size: var(--fs-s); margin: var(--sp-2xs) 0 var(--sp-m); }
    .pa-chip { display: inline-block; margin: 0 var(--sp-xs) var(--sp-xs) 0; font: inherit; color: inherit; }
    .pa-chip:hover, .pa-chip:focus-visible { border-color: var(--accent); outline: none; }
    .pa-chip .pa-n { margin-left: var(--sp-s); opacity: .65; font-variant-numeric: tabular-nums; }
    .pa-more { display: inline-block; margin: var(--sp-2xs) 0 var(--sp-xs); padding: var(--sp-xs) var(--sp-xs); font: inherit; font-size: var(--fs-s); background: none; border: none; color: var(--accent); cursor: pointer; text-decoration: underline; }
    .pa-chip-plain { cursor: default; }
    .pa-chip-plain:hover { border-color: var(--border-input); }
    .pa-jump { display: inline; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
      text-decoration: underline dotted var(--text-dim); text-underline-offset: 2px; }
    .pa-jump:hover, .pa-jump:focus-visible { text-decoration-color: var(--accent); outline: none; }
    .pa-fix { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-xs); margin: 0 0 var(--sp-xs); }
    .pa-fix .pa-chip { margin: 0 var(--sp-xs) 0 0; }
    .pa-fix-btn { padding: var(--sp-2xs) var(--sp-m); font: inherit; font-size: var(--fs-xs); cursor: pointer; border-radius: var(--r-l);
      border: 1px solid var(--accent); background: transparent; color: var(--heading); }
    .pa-fix-btn:hover, .pa-fix-btn:focus-visible { background: rgba(var(--accent-rgb), .15); outline: none; }
    .pa-explain { margin: 0 0 var(--sp-m); font-size: var(--fs-s); line-height: 1.45; color: var(--text-dim); }
    .pa-explain .pa-learn, .pa-learn-line .pa-learn { color: var(--heading); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; white-space: nowrap; } /* the house style, as every other link */
    .pa-explain .pa-learn:hover, .pa-learn-line .pa-learn:hover { text-decoration-color: currentColor; }
    /* A check's page, after what it found (its description is there, not here). */
    .pa-learn-line { margin-top: var(--sp-l); font-size: var(--fs-s); }
    /* A phone (Perch on a small screen): more room between what's in an open check. */
    @media (max-width: 760px) {
      .pa-detail { padding: var(--sp-l) var(--sp-xl) var(--sp-xl) var(--sp-4xl); }
      .pa-note { margin-bottom: var(--sp-l); }
      .pa-thresholds { margin-top: var(--sp-l); }
      .pa-chip { margin: 0 var(--sp-s) var(--sp-s) 0; }
      .pa-learn-line { margin-top: var(--sp-xl); }
      .pa-detail-foot { margin-top: var(--sp-l); }
    }
    .pr-body mark.pr-jump { outline: 2px solid var(--warn); outline-offset: 1px; margin: 0 var(--sp-xs); } /* room, so the outline doesn't cover a full stop beside it */
    .pa-x { font-size: var(--fs-m); }
    .pa-list { margin: var(--sp-xs) 0; padding-left: var(--sp-xl); font-size: var(--fs-s); }
    .pa-list li { margin: var(--sp-xs) 0; }
    .pa-list li .pa-x { margin-left: var(--sp-xs); }
    /* A chip in a list (a repeated paragraph): one line, cut short with "…"
       (the whole of it on hover), its count and × beside it (STYLE.md). */
    .pa-list li:has(> .pa-chip) { display: flex; align-items: center; }
    .pa-list li > .pa-chip { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; margin-bottom: 0; }
    .pa-list li > .pa-chip .pa-chip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pa-list li > .pa-chip .pa-n { flex: none; }
    /* One line per quoted place (popup.js lines()): the bold lead, then the words cut to the line. */
    .pa-lines { list-style: none; margin: var(--sp-2xs) 0 var(--sp-m); padding: 0; font-size: var(--fs-s); }
    .pa-lines li { display: flex; align-items: center; gap: var(--sp-xs); margin: 0; }
    .pa-line { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: var(--sp-m); padding: var(--sp-xs) var(--sp-xs); border: 0; border-radius: var(--r-s);
      background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
    .pa-line:hover { background: var(--surface-alt); }
    .pa-line:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
    .pa-lead { flex: none; min-width: 64px; font-weight: 600; font-variant-numeric: tabular-nums; }
    .pa-q { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text-dim); }
    .pa-line:hover .pa-q, .pa-line:focus-visible .pa-q { color: inherit; }
    .pa-ignored { margin-top: var(--sp-s); font-size: var(--fs-xs); color: var(--text-dim); }
    .pa-ignored span { margin-right: var(--sp-s); white-space: nowrap; }
    .pa-senses { display: grid; gap: var(--sp-xs); font-size: var(--fs-s); }
    .pa-sense { display: grid; grid-template-columns: 48px 1fr 36px; align-items: center; gap: var(--sp-s); }
    .pa-bar { height: 6px; border-radius: var(--r-s); background: var(--surface-alt); overflow: hidden; }
    .pa-bar span { display: block; height: 100%; background: var(--accent); }
    .pa-table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); margin-bottom: var(--sp-s); }
    .pa-table th, .pa-table td { text-align: left; padding: var(--sp-xs) var(--sp-xs); border-bottom: 1px solid var(--border-input); }
    .pa-table td:not(:first-child), .pa-table th:not(:first-child) { text-align: right; }
    .pa-table tr.pa-out td { font-weight: 600; }
    .pa-table td { font-variant-numeric: tabular-nums; }
    .pa-table .pa-ch { max-width: 110px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .pa-table.pa-why td:last-child { text-align: left; }
    .pa-since { margin: var(--sp-l) 0 var(--sp-s); padding: var(--sp-m) var(--sp-l); border-radius: var(--r-m); background: var(--surface-alt); font-size: var(--fs-s); line-height: 1.5; }
    .pa-full-done .refresh-link { display: inline; margin-left: var(--sp-xs); font-size: var(--fs-s); }
    .pa-detail .refresh-link { display: block; margin: var(--sp-2xs) 0 var(--sp-s); font-size: var(--fs-s); }
    .pa-upsell { position: static; inset: auto; margin-top: var(--sp-l); border-radius: var(--r-l); background: var(--surface-alt); }

    /* ---------- Prose Analysis: highlighting (eye) and the reader view ---------- */
    .pa-eye { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0;
      border: 1px solid var(--border-input); border-radius: var(--r-m); background: none; color: var(--text-dim); cursor: pointer; }
    .pa-eye svg { width: 14px; height: 14px; }
    .pa-eye:hover, .pa-eye:focus-visible { color: var(--text); border-color: var(--eye, var(--accent)); outline: none; }
    .pa-eye-none, .pa-eye-none:hover { opacity: .4; cursor: default; color: var(--text-dim); border-color: var(--border-input); }
    .pa-eye.on { color: var(--on-light); background: var(--eye, var(--accent)); border-color: var(--eye, var(--accent)); }
    /* Stepping through what a check found, at the foot of the panel (popup.js showFindingBar). */
    #findingBar {
      position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 1001; /* above the reader view */
      display: flex; align-items: center; gap: var(--sp-xs); padding: var(--sp-s) var(--sp-s) var(--sp-s) var(--sp-l);
      border: 1px solid var(--border-input); border-radius: var(--r-l); background: var(--surface-alt); color: var(--text);
      box-shadow: 0 4px 18px var(--shade-3); font-size: var(--fs-m); line-height: 1.3;
    }
    #findingBar .fb-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
    #findingBar .fb-title { font-size: var(--fs-xs); color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #findingBar .fb-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #findingBar .fb-count { font-size: var(--fs-s); color: var(--text-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
    #findingBar button {
      flex: none; min-width: 32px; height: 32px; border: 0; border-radius: var(--r-m); background: var(--bg);
      color: inherit; font: inherit; font-size: var(--fs-2xl); line-height: 1; cursor: pointer;
    }
    #findingBar button:hover { color: var(--accent); }
    #findingBar .fb-close { background: none; font-size: var(--fs-2xl); }
    #findingBar .fb-note { font-size: var(--fs-s); color: var(--text-dim); }
    #findingBar .fb-fix { font-size: var(--fs-m); font-weight: 600; padding: 0 var(--sp-l); background: var(--ok); color: var(--on-color); }
    #findingBar .fb-undo, #findingBar .fb-ignore { font-size: var(--fs-m); padding: 0 var(--sp-l); }
    #findingBar [hidden] { display: none; }
    .pa-fix-note { margin: 0 0 var(--sp-m); padding: var(--sp-s) var(--sp-l); border-radius: var(--r-m); background: rgba(var(--accent-rgb), .1); font-size: var(--fs-s); }
    .pa-fix-note .pa-fix-btn { margin-left: var(--sp-s); }
    .pa-fixed .pa-chip { opacity: .7; text-decoration: line-through; }
    .pa-fixed-done { font-size: var(--fs-xs); color: var(--text-dim); margin-right: var(--sp-2xs); }
    .has-finding-bar .pr-body { padding-bottom: var(--finding-bar-room, 80px); scroll-padding-bottom: var(--finding-bar-room, 80px); }
    #proseReader { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: var(--bg); color: var(--text); }
    #proseReader[hidden] { display: none; }
    .pr-head { display: flex; align-items: flex-start; gap: var(--sp-m); flex-wrap: wrap; padding: var(--sp-l) var(--sp-xl); border-bottom: 1px solid var(--border-input); background: var(--surface); }
    .pr-head strong { color: var(--heading); line-height: 24px; }
    .pr-legend { flex: 1; display: flex; flex-wrap: wrap; gap: var(--sp-xs); min-width: 0; }
    .pr-key { display: inline-flex; align-items: center; gap: var(--sp-s); padding: var(--sp-2xs) var(--sp-m); font-size: var(--fs-xs); border: 1px solid var(--border-input);
      border-radius: var(--r-pill); background: var(--surface-alt); color: var(--text); cursor: pointer; }
    .pr-key span { display: inline-block; width: 10px; height: 10px; border-radius: var(--r-s); }
    .pr-hint { font-size: var(--fs-s); color: var(--text-dim); line-height: 24px; }
    .pr-back { display: inline-flex; align-items: center; gap: var(--sp-2xs); height: 24px; padding: 0 var(--sp-m) 0 var(--sp-xs); font: inherit; font-size: var(--fs-s); font-weight: 600;
      border: 1px solid var(--border-input); border-radius: var(--r-m); background: var(--surface-alt); color: var(--heading); cursor: pointer; }
    .pr-back:hover, .pr-back:focus-visible { border-color: var(--accent); outline: none; }
    .pr-body { flex: 1; overflow-y: auto; padding: var(--sp-l) var(--sp-xl) var(--sp-5xl); font-family: var(--font-serif); font-size: var(--fs-m); line-height: 1.6; }
    .pr-body p { margin: 0 0 .8em; padding-left: var(--sp-m); border-left: 3px solid transparent; }
    .pr-body p:empty { display: none; }
    .pr-body mark { color: var(--on-light); border-radius: 2px; padding: 0 1px; }
    .pr-body p.pr-flagged { border-left-color: var(--warn); }

    /* ---------- November challenge (challenge.js) ---------- */
    .challenge-intro { font-size: var(--fs-s); color: var(--heading); line-height: 1.5; margin: 0 0 var(--sp-xl) 0; }
    .challenge-wide { width: 100%; margin-top: var(--sp-m); }
    a.challenge-link { display: block; box-sizing: border-box; text-align: center; text-decoration: none; margin-bottom: var(--sp-s); }
    .challenge-msg { color: var(--danger); margin-top: var(--sp-s); min-height: 0; }
    .challenge-msg:empty { display: none; }
    .challenge-privacy { margin-top: var(--sp-xl); }
    .challenge-line { font-size: var(--fs-s); line-height: 1.5; color: var(--heading); margin-bottom: var(--sp-xs); }
    .challenge-line strong { font-size: var(--fs-l); }
    #challengeBody a:not(.challenge-link) { color: var(--accent); }
    .challenge-head { font-size: var(--fs-xs); font-weight: bold; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin: var(--sp-xl) 0 var(--sp-s) 0; }
    .challenge-items { list-style: none; padding: 0; margin: 0 0 var(--sp-m) 0; }
    .challenge-items li { border-bottom: 1px solid var(--border); }
    .challenge-item { display: flex; align-items: center; gap: var(--sp-m); padding: var(--sp-s) 0; margin: 0; font-size: var(--fs-s); }
    .challenge-item-name { flex: 1; min-width: 0; color: var(--heading); overflow-wrap: anywhere; }
    .challenge-item-sub { color: var(--text-dim); font-size: var(--fs-xs); }
    .challenge-item-total { flex-shrink: 0; font-weight: bold; color: var(--heading); font-variant-numeric: tabular-nums; }
    .challenge-stop { margin-top: var(--sp-l); }

    /* ---------- Write and Edit tabs (roadmap #27) ----------
       Both tabs share #trackerSection; a card of the other tab is off. */
    #trackerSection > .tab-off { display: none !important; }
    /* 6.0's parts (roadmap #58), until sixOn(): off, wherever they are. */
    .six-off { display: none !important; }
    /* Notes to self (roadmap #59). */
    .notes-chapter { margin-top: var(--sp-m); font-size: var(--fs-s); font-weight: bold; color: var(--heading); }
    .notes-list { margin-top: var(--sp-2xs); padding-left: 0; list-style: none; }
    .notes-where { color: var(--text-dim); font-size: var(--fs-xs); }
    .notes-comment { border-left: 3px solid var(--info); text-align: left; }
    .pa-chip.notes-comment:disabled { cursor: default; opacity: .7; }
    /* Places (roadmap #61). */
    .places-grid { display: grid; gap: var(--sp-2xs) var(--sp-s); align-items: center; font-size: var(--fs-s); overflow-x: auto; }
    .places-grid .pa-chip { margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .places-head { color: var(--text-dim); font-size: var(--fs-2xs); text-align: center; font-variant-numeric: tabular-nums; }
    .places-dot { text-align: center; color: var(--accent); }
    .places-none { text-align: center; color: var(--border-input); }
    .places-x { font: inherit; }
    /* A finger needs more than the × itself: a larger, unseen tap area
       around it on a touch screen (it looks the same). */
    @media (pointer: coarse) {
      .places-x, .pa-x { position: relative; }
      .places-x::after, .pa-x::after { content: ''; position: absolute; inset: -8px -12px; }
    }
    /* Pattern "pair list" (STYLE.md): a row a chapter, its value on the
       right (here the place, as the dropdown that changes it). */
    .pair-list { display: grid; grid-template-columns: minmax(0, 1fr) fit-content(50%); align-items: stretch; margin-top: var(--sp-xs); font-size: var(--fs-s); }
    .pair-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: var(--sp-xs) var(--sp-m) var(--sp-xs) 0; line-height: 18px; color: var(--heading); font-weight: bold; border-top: 1px solid var(--border); }
    .place-set { width: auto; max-width: 100%; margin: 0; padding: var(--sp-xs) var(--sp-xs); height: auto; font-size: var(--fs-s); font-weight: normal; text-align: right; text-overflow: ellipsis; cursor: pointer; border: 1px solid transparent; border-radius: var(--r-s); background-color: transparent; color: var(--text); }
    .pair-list > .place-set { width: 100%; border-top: 1px solid var(--border); border-radius: 0; }
    .place-set-guess { color: var(--text-dim); font-style: italic; }
    .place-set-none { color: var(--text-dim); }
    .place-set-yours { color: var(--accent); }
    .place-set option { color: var(--text); font-style: normal; background: var(--surface); }
    .pair-list > .place-set:hover { border-color: var(--accent); border-radius: var(--r-s); }
    .pair-list > .place-set:focus-visible, .place-set:focus-visible { border-color: var(--accent); border-radius: var(--r-s); outline: 2px solid var(--accent); outline-offset: 1px; }
    .pair-key { margin-top: var(--sp-xs); font-size: var(--fs-xs); color: var(--text-dim); }
    /* Inside and other names: one place a row. */
    .place-detail { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-xs) var(--sp-m); padding: var(--sp-s) 0; border-top: 1px solid var(--border); }
    .place-detail-name { grid-column: 1 / -1; font-size: var(--fs-s); font-weight: bold; color: var(--heading); }
    .place-detail-field { display: flex; flex-direction: column; gap: var(--sp-2xs); font-size: var(--fs-xs); color: var(--text-dim); min-width: 0; }
    .place-detail-field input, .place-detail-field select { font: inherit; font-size: var(--fs-s); height: auto; margin: 0; padding: var(--sp-xs) var(--sp-s); border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface); color: var(--text); min-width: 0; width: 100%; box-sizing: border-box; }
    .place-detail-field input:focus-visible, .place-detail-field select:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
    /* Your plan (roadmap #67): over the whole panel. */
    .plan-view { position: fixed; inset: 0; z-index: 1000; overflow: auto; background: var(--bg); color: var(--text); padding: var(--sp-l) var(--sp-xl) 60px; box-sizing: border-box; }
    .plan-view[hidden] { display: none; }
    body.plan-open { overflow: hidden; }
    .plan-view-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-s); }
    .plan-view-title { margin: 0; font-size: var(--fs-xl); color: var(--heading); }
    .plan-view-title:focus { outline: none; }
    .plan-open-btn { display: inline-block; margin-top: var(--sp-m); padding: var(--sp-s) var(--sp-l); font-size: var(--fs-s); }
    .plan-line { font-size: var(--fs-s); margin: var(--sp-2xs) 0; }
    .plan-next { font-size: var(--fs-s); margin-top: var(--sp-m); padding-top: var(--sp-s); border-top: 1px solid var(--border-input); }
    .plan-next-label { color: var(--text-dim); }
    .plan-next-notes { color: var(--text-dim); margin-top: var(--sp-2xs); white-space: pre-line; }
    .plan-card { font-size: var(--fs-s); border-top: 1px solid var(--border-input); }
    .plan-card > summary { display: flex; justify-content: space-between; gap: var(--sp-m); padding: var(--sp-m) var(--sp-2xs); cursor: pointer; border-radius: var(--r-s); }
    .plan-card > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
    .plan-n { color: var(--text-dim); }
    .plan-done { color: var(--accent); white-space: nowrap; }
    .plan-off { color: var(--danger-text); white-space: nowrap; font-weight: bold; }
    .plan-says { margin: var(--sp-2xs) 0 var(--sp-s); padding-left: var(--sp-2xl); color: var(--heading); }
    .plan-says li { margin: var(--sp-xs) 0; }
    .plan-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-s) var(--sp-m); margin: var(--sp-xs) 0 var(--sp-s); }
    .plan-field { display: flex; flex-direction: column; gap: var(--sp-2xs); font-size: var(--fs-xs); color: var(--text-dim); min-width: 0; }
    .plan-field input, .plan-field select { font: inherit; font-size: var(--fs-s); padding: var(--sp-s) var(--sp-s); border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface); color: var(--text); min-width: 0; }
    .plan-field input:focus-visible, .plan-field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
    .plan-notes { grid-column: 1 / -1; }
    .plan-sample { font-size: var(--fs-xs); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-s); padding: var(--sp-s) var(--sp-m); white-space: pre-wrap; color: var(--text); }
    .plan-file { position: relative; cursor: pointer; }
    .plan-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
    .plan-file:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: var(--r-s); }
    .refresh-link[disabled] { opacity: .4; cursor: default; }
    /* Writing days (roadmap #64): five weeks, Monday first. */
    .days-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-xs); font-size: var(--fs-xs); }
    .days-head { text-align: center; color: var(--text-dim); }
    .days-cell { display: flex; align-items: center; justify-content: center; height: 26px; border-radius: var(--r-s); color: var(--text-dim); border: 1px solid var(--border-input); background: none; font: inherit; padding: 0; }
    .days-before { opacity: .4; border-style: dashed; }
    button.days-cell { cursor: pointer; color: var(--heading); font-weight: bold; }
    .days-l1 { background: color-mix(in srgb, var(--accent) 25%, transparent); }
    .days-l2 { background: color-mix(in srgb, var(--accent) 55%, transparent); }
    .days-l3 { background: var(--accent); color: var(--accent-contrast); }
    button.days-cell:hover, button.days-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
    .days-picked { box-shadow: inset 0 0 0 2px var(--heading); }
    /* The Field Guide (roadmap #66). */
    .bible-buttons { display: flex; flex-wrap: wrap; gap: var(--sp-m); margin: var(--sp-m) 0 var(--sp-xs); }
    .bible-buttons .sprint-action-btn { display: inline-block; }
    /* A glossary of invented words (roadmap #65). */
    .glossary-word { font-size: var(--fs-s); border-top: 1px solid var(--border-input); }
    .glossary-word > summary { display: flex; justify-content: space-between; gap: var(--sp-m); padding: var(--sp-s) var(--sp-2xs); cursor: pointer; border-radius: var(--r-s); }
    .glossary-word > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
    .glossary-word-name { font-weight: bold; color: var(--heading); }
    .glossary-state { color: var(--text-dim); white-space: nowrap; }
    .glossary-state.glossary-accepted { color: var(--accent); }
    .glossary-def { display: block; box-sizing: border-box; width: 100%; font: inherit; font-size: var(--fs-s); padding: var(--sp-s) var(--sp-m); margin: var(--sp-xs) 0;
      border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface); color: var(--text); resize: vertical; }
    .glossary-def:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
    .glossary-from { color: var(--text-dim); margin: var(--sp-2xs) 0 var(--sp-xs); }
    .glossary-actions { display: flex; flex-wrap: wrap; gap: var(--sp-xs) var(--sp-l); align-items: center; margin-bottom: var(--sp-m); }
    .glossary-actions .sprint-action-btn, .glossary-paste-btn { display: inline-block; }
    .glossary-list { margin: var(--sp-xs) 0 var(--sp-m); padding-left: var(--sp-2xl); font-size: var(--fs-s); }
    .glossary-list li { margin: var(--sp-xs) 0; }
    /* Dropped threads (roadmap #62), under the characters' grid. */
    .threads-box { margin-top: var(--sp-l); font-size: var(--fs-s); }
    .threads-list { margin: var(--sp-xs) 0 var(--sp-s); padding-left: var(--sp-2xl); }
    .threads-list li { margin: var(--sp-xs) 0; line-height: 1.45; }
    /* Did it pay off? set apart from the dropped ones above it. */
    .threads-box .char-gaps-head + .char-legend { margin-top: var(--sp-2xs); }
    .threads-box .char-gaps-head:not(:first-child) { margin-top: var(--sp-l); }
    .threads-list em { color: var(--text-dim); }
    /* Pattern "found list" (STYLE.md): a block a thing to decide on: its
       name, where, the sentence as a quote, then the choices as buttons. */
    .found-list { margin: var(--sp-s) 0; padding: 0; list-style: none; }
    .found-item { padding: var(--sp-m) 0; border-top: 1px solid var(--border); line-height: 1.4; }
    .found-item:first-child { border-top: 0; padding-top: var(--sp-2xs); }
    .found-head b { color: var(--heading); }
    .found-count { margin-left: var(--sp-xs); font-size: var(--fs-xs); color: var(--text-dim); }
    .found-where { margin-top: 1px; }
    .found-quote { margin: var(--sp-xs) 0 0; padding: 1px 0 1px var(--sp-m); border-left: 2px solid var(--border-input); font-style: italic; color: var(--text-dim);
      display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .found-actions { display: flex; flex-wrap: wrap; gap: var(--sp-s); margin-top: var(--sp-s); }
    .found-btn { display: inline-block; }
    @media (max-width: 760px) { .found-btn { } }
    .threads-off { color: var(--heading); }
    .threads-form { flex-wrap: wrap; gap: var(--sp-s); margin-top: var(--sp-s); }
    .threads-form input[type="text"] { flex: 1 1 100%; min-width: 0; }
    .threads-pick { display: flex; flex: 1 1 100%; align-items: center; gap: var(--sp-s); font-size: var(--fs-s); color: var(--text-dim); }
    .threads-pick > span { min-width: 72px; }
    .threads-pick select { flex: 1; min-width: 0; }
    /* Your structure (roadmap #63). */
    .structure-pick { display: flex; align-items: center; gap: var(--sp-m); margin-top: var(--sp-m); font-size: var(--fs-s); font-weight: bold; color: var(--heading); }
    .structure-pick select { flex: 1; min-width: 0; }
    .structure-beat { font-size: var(--fs-s); border-top: 1px solid var(--border-input); }
    .structure-bar { position: relative; display: flex; height: 14px; margin: var(--sp-xl) 0 var(--sp-2xs); border-radius: var(--r-s); background: var(--surface-alt); }
    .structure-ch { height: 100%; background: color-mix(in srgb, var(--accent) 55%, transparent); }
    .structure-ch-alt { background: color-mix(in srgb, var(--accent) 35%, transparent); }
    .structure-q { position: absolute; top: -3px; bottom: -3px; border-left: 1px dashed var(--text-dim); }
    .structure-pt { position: absolute; top: -9px; width: 0; height: 0; margin-left: calc(var(--sp-s) * -1); border: 5px solid transparent; border-top-color: var(--heading); }
    .structure-pt-marked { border-top-color: var(--accent); }
    .structure-bar-key { display: flex; justify-content: space-between; font-size: var(--fs-2xs); color: var(--text-dim); margin-bottom: var(--sp-s); }
    .structure-beat:last-child { border-bottom: 1px solid var(--border-input); }
    .structure-beat-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-m); padding: var(--sp-s) var(--sp-2xs); cursor: pointer; list-style: none; border-radius: var(--r-s); }
    .structure-beat-head::-webkit-details-marker { display: none; }
    .structure-beat-head::before { content: '\25B8'; color: var(--text-dim); margin-right: var(--sp-2xs); }
    .structure-beat[open] > .structure-beat-head::before { content: '\25BE'; }
    .structure-beat-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
    .structure-beat-name { flex: 1; font-weight: bold; color: var(--heading); }
    .structure-where { font-weight: normal; color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
    .structure-mark { color: var(--text-dim); text-align: right; min-width: 0; overflow-wrap: anywhere; }
    .structure-marked { color: var(--heading); }
    .structure-beat select { width: 100%; margin: 0 0 var(--sp-xs); font-size: var(--fs-s); }
    .structure-said { color: var(--text-dim); margin: 0 0 var(--sp-m); }
    .structure-late { border-left: 3px solid var(--warn); padding-left: var(--sp-m); margin: var(--sp-s) 0; font-size: var(--fs-s); }
    .quick-box { padding: var(--sp-m); }
    .quick-bar { display: flex; gap: var(--sp-m); }
    .quick-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-xs); min-height: 44px; padding: var(--sp-m) var(--sp-xs);
      background: var(--surface); border: 1px solid var(--border-input); border-radius: var(--r-m); color: var(--heading);
      font: inherit; font-size: var(--fs-s); font-weight: 700; cursor: pointer; }
    .quick-btn:hover, .quick-btn:focus-visible { border-color: var(--accent); outline: none; }
    .quick-btn.active { border-color: var(--accent); background: var(--surface-alt); }
    .quick-btn[hidden] { display: none; }
    .quick-btn > span { display: inline-flex; align-items: center; gap: var(--sp-xs); font-variant-numeric: tabular-nums; }
    .quick-lock { color: var(--text-dim); }
    .quick-panel { margin-top: var(--sp-l); padding-top: var(--sp-l); border-top: 1px solid var(--border); }
    .quick-panel[hidden] { display: none !important; }
    .sprint-presets { display: flex; gap: var(--sp-s); margin: calc(var(--sp-xs) * -1) 0 var(--sp-l) 0; }
    .sprint-preset { flex: 1; }
    .sprint-preset.active { border-color: var(--accent); color: var(--accent); }
    .youre-in-chapter { font-size: var(--fs-m); font-weight: 700; color: var(--heading); margin-top: var(--sp-2xs); }
    .youre-in-of { display: block; font-size: var(--fs-xs); color: var(--text-dim); margin: var(--sp-2xs) 0 var(--sp-s) 0; }
    .youre-in-target { color: var(--text-dim); font-weight: 400; }
    .youre-in-bar { height: 8px; margin-top: var(--sp-s); border-radius: var(--r-s); background: var(--surface-alt); overflow: hidden; }
    .youre-in-fill { height: 100%; background: var(--accent); }
    #remindersField .reminder-row, #reminderList { margin-bottom: var(--sp-xs); }
    /* Customize layout (Pro): a hidden card goes once arranging is done, and
       is dimmed (with its Show button) while arranging. */
    #trackerSection > .layout-hidden { display: none !important; }
    #trackerSection > .layout-hidden-editing > :not(.layout-move-bar) { opacity: 0.4; }
    .layout-move-bar { display: flex; justify-content: flex-start; gap: var(--sp-xs); margin: 0 0 var(--sp-s) 0; }

    /* ---------- Edit tab: passes and scope (roadmap #27, step 2) ---------- */
    /* What's checked: Scene | Chapter | Book, then ‹ which one › (one height, one look). */
    .pa-scope { display: flex; align-items: center; gap: var(--sp-m); margin: var(--sp-2xs) 0 var(--sp-m) 0; }
    .pa-scope-label { font-size: var(--fs-s); color: var(--text-dim); flex: none; }
    .pa-seg { flex: 1; display: flex; padding: var(--sp-xs); gap: var(--sp-2xs); background: var(--surface); border: 1px solid var(--border-input); border-radius: var(--r-m); }
    .pa-seg-btn { flex: 1; height: 28px; padding: 0 var(--sp-xs); background: none; border: 0; border-radius: var(--r-s); color: var(--text-dim);
      font: inherit; font-size: var(--fs-s); font-weight: 700; cursor: pointer; }
    .pa-seg-btn:hover, .pa-seg-btn:focus-visible { color: var(--heading); outline: none; }
    .pa-seg-btn.on { background: var(--surface-alt); color: var(--heading); box-shadow: inset 0 0 0 1px var(--accent); }
    .pa-scope-at { display: flex; align-items: stretch; gap: var(--sp-xs); margin: 0 0 var(--sp-l) 0; }
    .pa-step { flex: none; width: 34px; height: 34px; padding: 0; background: var(--surface); border: 1px solid var(--border-input); border-radius: var(--r-m);
      color: var(--heading); font: inherit; font-size: var(--fs-xl); line-height: 1; cursor: pointer; }
    .pa-step:hover, .pa-step:focus-visible { border-color: var(--accent); outline: none; }
    .pa-select { flex: 1; min-width: 0; height: 34px; margin: 0; padding: 0 var(--sp-4xl) 0 var(--sp-l); -webkit-appearance: none; appearance: none;
      background-color: var(--surface); color: var(--heading); border: 1px solid var(--border-input); border-radius: var(--r-m);
      font: inherit; font-size: var(--fs-m); font-weight: 600; text-overflow: ellipsis; cursor: pointer;
      background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
      background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
    .pa-select:hover, .pa-select:focus-visible { border-color: var(--accent); outline: none; }
    .pa-scope-note { font-size: var(--fs-s); color: var(--text-dim); margin: 0 0 var(--sp-l) 0; line-height: 1.45; }
    .pa-passes { display: flex; gap: var(--sp-xs); align-items: stretch; margin: 0 0 var(--sp-s) 0; }
    .pa-pass { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-s); min-height: 34px; padding: var(--sp-xs) 0;
      background: var(--surface); border: 1px solid var(--border-input); border-radius: var(--r-s); color: var(--heading);
      font: inherit; font-size: var(--fs-m); font-weight: 700; cursor: pointer; }
    .pa-pass:hover, .pa-pass:focus-visible { border-color: var(--accent); outline: none; }
    .pa-pass.on { background: var(--surface-alt); border-color: var(--accent); }
    .pa-pass-full { flex: 2.4; font-size: var(--fs-s); }
    .pa-pass-sep { width: 1px; background: var(--border-input); margin: var(--sp-xs) var(--sp-2xs); }
    .pa-pass-title { font-size: var(--fs-s); font-weight: 700; color: var(--heading); margin: var(--sp-s) 0 var(--sp-m) 0; }
    .pa-pass-nav { display: flex; justify-content: space-between; margin: var(--sp-l) 0 var(--sp-2xs) 0; }
    .pa-pass-step { background: none; border: 0; padding: var(--sp-s) 0; font: inherit; font-size: var(--fs-s); font-weight: 700; color: var(--accent); cursor: pointer; }
    .pa-pass-step:hover, .pa-pass-step:focus-visible { text-decoration: underline; outline: none; }
    .pa-elsewhere { margin: var(--sp-m) 0; padding: var(--sp-m); border: 1px dashed var(--border-input); border-radius: var(--r-s); font-size: var(--fs-s); color: var(--text); line-height: 1.45; }
    .pa-elsewhere-actions { display: flex; flex-wrap: wrap; gap: var(--sp-s); margin-top: var(--sp-s); }

    /* ---------- Write tab: slips as you write ---------- */
    .slip-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-s); padding: var(--sp-s) 0; font-size: var(--fs-m); border-bottom: 1px solid var(--border); }
    .slip-row:last-child { border-bottom: 0; }
    .slip-name { flex: 1 1 auto; color: var(--heading); }
    .slip-none { font-size: var(--fs-s); color: var(--text-dim); }
    .slip-count { font-size: var(--fs-s); color: var(--heading); font-weight: 600; margin-right: var(--sp-s); }
    /* The Pro slips' counts added up (roadmap #71). */
    .slips-pro-total { margin-top: var(--sp-s); font-size: var(--fs-s); color: var(--heading); }
    .slips-pro-total svg { width: 11px; height: 11px; vertical-align: -1px; }
    .slip-chips { display: flex; flex-wrap: wrap; gap: var(--sp-xs); justify-content: flex-end; }
    .slip-pro { font: inherit; font-size: var(--fs-2xs); font-weight: 700; padding: var(--sp-2xs) var(--sp-m); border-radius: var(--r-m); border: 0; background: var(--surface-alt); color: var(--text-dim); cursor: pointer; }
    .slip-pro:hover, .slip-pro:focus-visible { color: var(--heading); outline: none; }
    .slips-foot { margin-top: var(--sp-m); }

    /* ---------- Edit tab: chapters, scenes and passes (roadmap #27, step 3) ---------- */
    .grid { margin: var(--sp-m) 0 var(--sp-xs) 0; }
    .grid-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(5, 46px); gap: var(--sp-xs); align-items: center; padding: var(--sp-2xs) 0; }
    .grid-head { position: sticky; top: 0; }
    .grid-col { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: var(--sp-xs) 0; min-height: 34px; background: var(--surface);
      border: 1px solid var(--border-input); border-radius: var(--r-s); color: var(--heading); font: inherit; cursor: pointer; }
    .grid-col:hover, .grid-col:focus-visible { border-color: var(--accent); outline: none; }
    .grid-col.on { border-color: var(--accent); background: var(--surface-alt); }
    .grid-col-n { display: inline-flex; align-items: center; gap: var(--sp-xs); font-size: var(--fs-s); font-weight: 700; }
    .grid-col-n .pa-dot { width: 7px; height: 7px; }
    .grid-col-name { font-size: var(--fs-2xs); letter-spacing: -0.2px; color: var(--text-dim); white-space: nowrap; }
    .grid-name { display: flex; align-items: flex-start; gap: var(--sp-xs); min-width: 0; padding: 0; background: none; border: 0; text-align: left;
      color: var(--heading); font: inherit; font-size: var(--fs-s); }
    button.grid-name { cursor: pointer; }
    button.grid-name:hover .grid-label, button.grid-name:focus-visible .grid-label { text-decoration: underline; }
    button.grid-name:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-radius: var(--r-s); }
    .grid-arrow { width: 10px; flex: none; color: var(--text-dim); }
    .grid-label { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
    .grid-label small { font-size: var(--fs-2xs); color: var(--text-dim); }
    /* Worked on today (a filled dot) or last time (a ring), after the name. */
    .grid-worked { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-left: var(--sp-s); vertical-align: middle; box-sizing: border-box; }
    .grid-worked.today { background: var(--accent); }
    .grid-worked.last { border: 1.5px solid var(--accent); }
    .slips-day { display: flex; margin: 0 0 var(--sp-m); }
    .slips-today { font-size: var(--fs-s); color: var(--text-dim); line-height: 1.45; margin: 0 0 var(--sp-m); }
    .grid-sc .grid-name { padding-left: var(--sp-xl); font-size: var(--fs-xs); color: var(--text); }
    .grid-cell { height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: var(--surface);
      border: 1px solid var(--border-input); border-radius: var(--r-s); color: var(--accent-contrast); font: inherit; font-size: var(--fs-2xs); cursor: pointer; }
    .grid-cell:hover, .grid-cell:focus-visible { border-color: var(--accent); outline: none; }
    .grid-cell.done { background: var(--accent); border-color: var(--accent); }
    .grid-cell.part { color: var(--heading); background: rgba(var(--accent-rgb), 0.18); border-color: var(--accent); font-weight: 700; }
    .grid-cell:disabled { opacity: 0.4; cursor: default; }
    /* Changed since ticked (roadmap #28): a small mark in the box's corner. */
    .grid-cell { position: relative; }
    .grid-cell .grid-changed { position: absolute; top: -5px; right: -5px; width: 13px; height: 13px; border-radius: 50%; background: var(--warn); color: var(--on-color);
      font-size: var(--fs-2xs); line-height: 13px; text-align: center; box-shadow: 0 0 0 1.5px var(--surface); }
    .grid-note .grid-changed { display: inline-block; width: 13px; height: 13px; border-radius: 50%; background: var(--warn); color: var(--on-color); font-size: var(--fs-2xs); line-height: 13px; text-align: center; vertical-align: 1px; }
    .grid-note { font-size: var(--fs-xs); color: var(--text-dim); line-height: 1.45; margin: var(--sp-s) 0 0 0; }
    .birds-eye-heading { margin-top: var(--sp-xl); padding-top: var(--sp-l); border-top: 1px solid var(--border); }
    .edit-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-s); margin-top: var(--sp-m); font-size: var(--fs-s); color: var(--text); }
    .edit-next[hidden] { display: none; }
    .pa-done { font-size: var(--fs-xs); color: var(--accent); margin: calc(var(--sp-2xs) * -1) 0 var(--sp-m) 0; }
    .pa-done:empty { display: none; }
    .pa-full-done { margin: var(--sp-l) 0 var(--sp-xs) 0; font-size: var(--fs-s); color: var(--text-dim); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-m); }
    /* A link in running text (Open Edit, and the like). */
    .inline-link { display: inline; padding: 0; margin: 0; background: none; border: 0; font: inherit; font-weight: 600; color: var(--heading); cursor: pointer;
      text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
    .inline-link:hover { color: var(--accent); }
    .inline-link:focus-visible { color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-s); }

    /* ---------- Bird's Eye in the grid (roadmap #27, step 4) ---------- */
    .be-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-l); margin: var(--sp-l) 0 var(--sp-xs) 0; }
    .be-bar .sprint-action-btn { width: auto; margin: 0; }
    .be-settings-btn { display: inline; margin: 0; font-size: var(--fs-s); font-weight: 600; letter-spacing: 0; }
    .be-message { margin: var(--sp-xs) 0 0 0; }
    .be-message .settings-sub-label { margin-top: var(--sp-xs); }
    .be-message .settings-sub-label:empty { display: none; }
    .be-drawer { margin-top: var(--sp-l); padding-top: var(--sp-s); border-top: 1px solid var(--border); }
    .be-drawer[hidden] { display: none; }
    .be-target { margin-top: var(--sp-l); }
    .grid-detail { margin: var(--sp-2xs) 0 var(--sp-m) var(--sp-xl); padding: var(--sp-m) var(--sp-l); border-left: 2px solid var(--border-input); font-size: var(--fs-s); color: var(--text); line-height: 1.5; }
    .grid-detail .outline-bar { margin: var(--sp-s) 0 var(--sp-2xs) 0; }
    .grid-pro { color: var(--text-dim); margin-top: var(--sp-xs); }
    .grid-pro svg { width: 11px; height: 11px; vertical-align: -1px; }
    /* 6.0's Pro cards on the free plan (roadmap #71): the card keeps its
       heading and says what Pro does there; hidden with Pro previews off. */
    .graph-box.pro-card-locked > :not(.mini-label):not(.pro-card-upsell) { display: none !important; }
    .graph-box:not(.pro-card-locked) > .pro-card-upsell { display: none; }
    .graph-box.pro-card-gone { display: none !important; }
    .analysis-upsell.pro-card-upsell { position: static; background: none; padding: var(--sp-l) var(--sp-s) var(--sp-xs); }
    .analysis-upsell.pro-card-upsell p { max-width: 260px; }
    .analysis-upsell.pro-card-upsell svg { width: 16px; height: 16px; }
    /* Structure on the free plan: its beats, where its source puts them. */
    .structure-free { margin: var(--sp-s) 0 0; padding-left: var(--sp-2xl); font-size: var(--fs-s); line-height: 1.6; }
    #structureResults .grid-pro { font-size: var(--fs-s); margin-top: var(--sp-m); line-height: 1.5; }
    /* Structure is ticked per chapter: nothing to tick on a scene's row. */
    .grid-cell-none { border-style: dashed; border-color: var(--border); background: transparent; cursor: default; }
    /* A box fills up with green as its checks turn green (--fill); ticked, it's solid. */
    .grid-cell.filling { background: linear-gradient(to top, rgba(var(--accent-rgb), 0.35) var(--fill), var(--surface) var(--fill)); }
    .grid-cell.part.filling { background: linear-gradient(to top, rgba(var(--accent-rgb), 0.35) var(--fill), rgba(var(--accent-rgb), 0.08) var(--fill)); }

    /* ---------- Moments and the Customize layout upsell (roadmap #27, step 5) ---------- */
    .moment { position: relative; margin: var(--sp-l) 0 var(--sp-xl) 0; padding: var(--sp-l) var(--sp-4xl) var(--sp-l) var(--sp-l); background: rgba(var(--accent-rgb), 0.08);
      border: 1px solid var(--accent); border-radius: var(--r-m); display: flex; flex-direction: column; gap: var(--sp-s); }
    .moment[hidden] { display: none; }
    .moment-title { font-size: var(--fs-l); font-weight: 700; color: var(--heading); }
    .moment-body { font-size: var(--fs-s); color: var(--text); line-height: 1.45; }
    .moment-pro { font-size: var(--fs-s); color: var(--text-dim); line-height: 1.45; }
    .moment-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-l); margin-top: var(--sp-2xs); font-size: var(--fs-s); }
    .moment-go { width: auto; margin: 0; padding: var(--sp-m) var(--sp-l); text-decoration: none; display: inline-block; }
    .moment-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .moment-x { position: absolute; top: 6px; right: 8px; }
    #layoutUpsell { padding-right: var(--sp-l); }
    .pro-pill { display: inline-block; margin-left: var(--sp-xs); background: var(--surface-alt); color: var(--text-dim); text-decoration: none; vertical-align: 1px; }

    /* A card's title in a header row: the row has the line, not the title too. */
    .card-header-row .mini-label { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
    .card-pill { background: var(--surface-alt); color: var(--text-dim); white-space: nowrap; }
    /* You're in (as the mockup): the chapter, then its scene and its words. */
    .youre-in-chapter { font-size: var(--fs-m); font-weight: 700; color: var(--heading); margin: 0 0 var(--sp-xs) 0; }
    .youre-in-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-m); font-size: var(--fs-m); color: var(--heading); }
    .youre-in-row .youre-in-scene { color: var(--text-dim); font-size: var(--fs-s); }
    .youre-in-row .youre-in-words { font-weight: 600; white-space: nowrap; }
    /* Open all / Close all: in the grid's empty corner, above the chapter names. */
    .grid-corner { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: var(--sp-2xs); align-self: end; }
    .grid-corner .refresh-link { display: inline; margin: 0; padding: 0; font-size: var(--fs-xs); text-align: left; }
    /* A narrow panel (Chrome's side panel at its narrowest): the five boxes
       left the names some 65px, a title broken in the middle of its words.
       There each name has its own line, its boxes under it, the passes'
       headings still above the boxes. */
    .grid { container-type: inline-size; }
    @container (max-width: 360px) {
      .grid-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
      .grid-row > .grid-name { grid-column: 1 / -1; }
      .grid-row.grid-ch:not(:first-of-type) { margin-top: var(--sp-xs); }
      .grid-corner { flex-direction: row; gap: var(--sp-l); align-self: auto; }
      .grid-label { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: var(--sp-s); overflow-wrap: break-word; }
    }

    /* Buttons: one look (STYLE.md). The main action is a filled button in
       the accent (the upsells, badges and celebrations too,
       which sit in small boxes) the same; one size in every card. */
    .sprint-action-btn, .settings-save-btn, .unlock-link, .analysis-upsell-btn, .badge-claim-btn, .celebration-share {
      background: var(--accent); color: var(--accent-contrast); border: 1px solid var(--accent); border-radius: var(--r-s);
      padding: var(--sp-m) var(--sp-xl); font: inherit; font-size: var(--fs-s); font-weight: 700; line-height: 1.3; letter-spacing: 0; text-transform: none;
      text-decoration: none; cursor: pointer; }
    .settings-save-btn { padding: var(--sp-m) var(--sp-xl); font-size: var(--fs-m); } /* the one big button: Save */
    .sprint-action-btn:hover, .settings-save-btn:hover, .unlock-link:hover, .analysis-upsell-btn:hover, .badge-claim-btn:hover, .celebration-share:hover {
      background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-contrast); text-decoration: none; }
    .sprint-action-btn:focus-visible, .settings-save-btn:focus-visible, .unlock-link:focus-visible, .analysis-upsell-btn:focus-visible, .badge-claim-btn:focus-visible, .celebration-share:focus-visible {
      outline: 2px solid var(--accent); outline-offset: 2px; }
    .sprint-action-btn:disabled, .settings-save-btn:disabled { opacity: .5; cursor: default; }
    .sprint-action-btn.stop { background: var(--danger); border-color: var(--danger); color: var(--on-color); }
    .sprint-action-btn.stop:hover { background: var(--danger-hover); border-color: var(--danger-hover); }
    /* Empty states: left, grey, small, as the rest of a card's text
       (centred only over the trend graph). */
    .trend-empty { text-align: left; font-size: var(--fs-s); }
    #trendBox .trend-empty { text-align: center; }
    /* Native checkboxes and radios in the accent, in every theme. */
    input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
    /* Spacing between the parts of a card (STYLE.md): a sub-heading after
       something has a gap above it; dimmed words in a line. */
    .char-gaps-head:not(:first-child), .outline-insights-section + .outline-insights-section, .places-grid + .outline-insights-section,
    .outline-insights-line + .outline-insights-line, .settings-sub-label:not(:first-child) { margin-top: var(--sp-m); }
    .outline-insights-section > .trend-empty { margin: var(--sp-xs) 0 var(--sp-s); }
    .text-dim { color: var(--text-dim); }
    /* The spacing scale (STYLE.md): 4, 8 or 12 px above, nothing else. */
    .m-0 { margin: 0; }
    .mt-s { margin-top: var(--sp-xs); } .mt-m { margin-top: var(--sp-m); } .mt-l { margin-top: var(--sp-l); }
    .mb-s { margin-bottom: var(--sp-xs); } .mb-m { margin-bottom: var(--sp-m); } .mb-l { margin-bottom: var(--sp-l); }
    .mt-nudge { margin-top: calc(var(--sp-2xs) * -1); }
    .text-left { text-align: left; }
    .share-canvas { display: block; width: 100%; height: auto; margin: var(--sp-l) auto 0; border: 1px solid var(--border); border-radius: var(--r-m); }
    /* Outlined button (STYLE.md): a second choice next to the main one, or
       a choice about a finding. One look; each class only places it. */
    .doc-action-btn, .found-btn, .data-btn.secondary, .share-target-btn, .sprint-preset {
      background: var(--surface-alt); color: var(--heading); border: 1px solid var(--border-input); border-radius: var(--r-s);
      padding: var(--sp-s) var(--sp-l); font: inherit; font-size: var(--fs-s); font-weight: 600; line-height: 1.3;
      letter-spacing: 0; text-transform: none; text-decoration: none; cursor: pointer; }
    .doc-action-btn:hover, .found-btn:hover, .data-btn.secondary:hover, .share-target-btn:hover, .sprint-preset:hover { border-color: var(--accent); color: var(--heading); text-decoration: none; }
    .doc-action-btn:focus-visible, .found-btn:focus-visible, .data-btn.secondary:focus-visible, .share-target-btn:focus-visible, .sprint-preset:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; color: var(--heading); }
    /* Chip (STYLE.md): a short thing to pick or see (a name, a word). */
    .pa-chip, .synonym-pill, .cs-aka-chip { background: var(--surface-alt); border: 1px solid var(--border-input); border-radius: var(--r-pill);
      padding: var(--sp-2xs) var(--sp-m); font-size: var(--fs-s); }
    /* Tag (STYLE.md): a small label, not a button (Pro, NEW, "from Bird's
       Eye"). Its colour is its own; the rest is one look. */
    .badge-tag, .marker-type-badge, .doc-badge, .lic-me, .pro-pill, .card-pill { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .3px; text-transform: none; line-height: 1.4;
      padding: var(--sp-2xs) var(--sp-s); border-radius: var(--r-pill); }
    /* Close × (STYLE.md): the corner of a dialog or a card. */
    .settings-close, .pr-close, .moment-x { background: none; border: 0; color: var(--text-dim); font-size: var(--fs-2xl); line-height: 1; cursor: pointer;
      padding: 0 var(--sp-xs); border-radius: var(--r-s); }
    .settings-close:hover, .pr-close:hover, .moment-x:hover { color: var(--heading); }
    .settings-close:focus-visible, .pr-close:focus-visible, .moment-x:focus-visible { color: var(--heading); outline: 2px solid var(--accent); outline-offset: 1px; }
    /* Remove × (STYLE.md): takes one thing out of a list; its size is
       its line's (each class sets it). */
    .reminder-remove, .marker-remove, .lic-remove, .pa-x, .places-x { background: none; border: 0; color: var(--text-dim); line-height: 1; cursor: pointer; padding: 0 var(--sp-xs); border-radius: var(--r-s); }
    .reminder-remove:hover, .marker-remove:hover, .lic-remove:hover, .pa-x:hover, .places-x:hover { color: var(--danger); }
    .reminder-remove:focus-visible, .marker-remove:focus-visible, .lic-remove:focus-visible, .pa-x:focus-visible, .places-x:focus-visible { color: var(--danger); outline: 2px solid var(--accent); outline-offset: 1px; }
    /* The one to press among the outlined choices: after the family rule. */
    .found-btn-main { border-color: var(--accent); }
    .found-btn-main:hover { background: rgba(var(--accent-rgb), .15); }
    .found-btn-main:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }