/* ---------- ui.css: the one style system of Write and Flow (and their policy pages).
   MIRRORED: write/ui.css and flowchart/ui.css are the same file, byte for byte (cloud/test/vendor.test.mjs
   checks). Change one, copy it over the other. Self-contained: tokens, both themes and every shared
   component, usable on a plain page (no app tokens needed). Each page loads it before its own styles,
   which then add only what is theirs (the canvas, the editor, layout positions).

   Parts:  P1 tokens · base · P2 states and focus · P3 Button · P4 Surface (card, bar, sheet) and Scrim ·
           P5 Row and menus · P6 Field · P7 Choice and Segmented · P8 Tile and facts · P9 Key, Chip, Dot ·
           P10 Notice · P11 dividers, scrollbars · the shared chrome (panel, dialogs, switcher, info, bars) ·
           the light theme.

   The two states: the quiet highlight (--hl-*) for every hover and anything you can pick but haven't;
   chosen (--chosen-*, the liquid glass) for whatever is selected or on. Focus is one soft halo
   (--halo), after Tab only (body.kbd-nav), appended after a control's rim through --state-shadow.
   Old class names are kept as aliases in the selector lists, so script-built markup needn't change. */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/inter-latin-var.woff2') format('woff2'); }

/* A control's own shadow for its state (its rim); the focus halo goes after it. Not inherited, so a
   row's highlight never reaches the key caps inside it. */
@property --state-shadow { syntax: '*'; inherits: false; }

/* ==========================================================================
   P1 · tokens */
:root {
  color-scheme: dark;

  /* colour */
  --bg-page: #000000;
  --bg-card: rgba(22, 22, 28, 0);       /* glass cards */
  --bg-tile: rgba(255, 255, 255, 0);    /* glass on glass */
  --bg-tile-hover: rgba(255, 255, 255, 0.035);
  --bg-pill: rgba(255, 255, 255, 0);
  --bg-pill-hover: rgba(255, 255, 255, 0.065);
  --text-1: #f5f5f7;
  --text-2: #a9a9b2;
  --text-3: #7c7c86;
  --text-strong: #ffffff;
  --text-placeholder: #6a6a74;
  --accent: #4b8ef5;
  --accent-ink: #ffffff;
  --accent-wash: rgba(75, 142, 245, 0.28);
  --ok: #3ecf8e;
  --ok-wash: rgba(62, 207, 142, 0.16);
  --fault: #f2555a;
  --fault-text: #ff8286;
  --fault-wash: rgba(242, 85, 90, 0.16);

  /* type: 11 · 12 · 13 · 15 · 19; weights 400 · 500 · 600 */
  --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 13px;
  --text-lg: 15px;
  --text-xl: 19px;
  --weight-medium: 500;
  --weight-strong: 600;
  --leading: 1.45;

  /* radius: 5 · 8 · 10 · 12 · 14 · pill */
  --r-xs: 5px;      /* keys, inline marks */
  --r-sm: 8px;      /* buttons, fields, rows */
  --r-md: 10px;     /* tiles, notices */
  --r-lg: 12px;     /* bars, choice cards, toasts */
  --r-xl: 14px;     /* cards, menus, dialogs, popovers */
  --r-pill: 999px;
  --radius-key: var(--r-xs);        /* (the old names) */
  --radius-row: var(--r-sm);
  --radius-control: var(--r-sm);
  --radius-tile: var(--r-md);
  --radius-float: var(--r-lg);
  --radius-card: var(--r-xl);
  --radius-pill: var(--r-pill);

  /* heights: 28 · 34 · 36 (32) · 38 · 44 · 52 */
  --h-sm: 28px;      /* small buttons, bare inputs in bars */
  --h-md: 34px;      /* buttons, icon buttons, tools, inline fields */
  --h-row: 36px;     /* menu and list rows */
  --h-row-sm: 32px;  /* compact rows (the menu bar's menus) */
  --h-field: 38px;   /* form fields */
  --h-lg: 44px;      /* bars, Settings' buttons, touch */
  --h-row2: 52px;    /* two-line rows */
  --control-h: var(--h-md);

  /* spacing: 2 4 6 8 10 12 14 16 22 24 */
  --sp-2: 2px; --sp-4: 4px; --sp-6: 6px; --sp-8: 8px; --sp-10: 10px; --sp-12: 12px;
  --sp-14: 14px; --sp-16: 16px; --sp-22: 22px; --sp-24: 24px;

  /* motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-jelly: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 140ms;
  --t-panel: 240ms;

  /* the glass. Edge brightness: every rim highlight and hairline is its alpha times one of these
       --edge-hi   the bright top highlight lines     --edge-lo  bottom and side lines, hairlines
       --rim-glow  the bevel light and inner sheen    (each surface can set its own: the glass settings) */
  --edge-hi: 0.56;
  --edge-lo: 0.4;
  --rim-glow: 0;
  --spec-x: 28%;      /* where the light comes from (the pointer moves it) */
  --spec-y: 0%;
  --pointer-light: 0;
  --top-sheen: 0;
  --depth: 0 22px 60px rgba(0, 0, 0, 0.66), 0 6px 18px rgba(0, 0, 0, 0.42);
  --frost: blur(21.5px) saturate(0.95) brightness(0.6);   /* where url() lenses aren't supported */

  /* fills that don't follow the edge tuning */
  --ctl-fill: rgb(255 255 255 / 0.035);
  --ctl-fill-hover: rgb(255 255 255 / 0.07);
  --primary-fill: linear-gradient(180deg, #ffffff, #e2e2e8);
  --primary-fill-hover: linear-gradient(180deg, #ffffff, #d6d6de);
  --primary-ink: #000;
  --chosen-fill: linear-gradient(180deg, rgb(255 255 255 / 0.18), rgb(255 255 255 / 0.05) 55%, rgb(255 255 255 / 0.1));
  --chosen-rim: inset 0 1px 0 rgb(255 255 255 / 0.52), inset 0 -1px 0 rgb(255 255 255 / 0.16), inset 0 0 0 0.5px rgb(255 255 255 / 0.33), 0 2px 8px rgb(0 0 0 / 0.42);
  --on-fill: var(--chosen-fill);    /* (pressed is chosen) */
  --on-rim: var(--chosen-rim);
  --halo: 0 0 0 1px rgb(255 255 255 / 0.1), 0 0 6px 1px rgb(255 255 255 / 0.1), 0 0 16px 3px rgb(255 255 255 / 0.06);
  --tile-fill: linear-gradient(180deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.02));
  --frame-fill: rgb(255 255 255 / 0.03);
  --well-fill: rgb(0 0 0 / 0.28);
  --key-fill: linear-gradient(180deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0.07));   /* (darker caps) */
  --chip-fill: rgb(255 255 255 / 0.12);
  --field-focus-line: rgb(255 255 255 / 0.28);
  --field-focus-fill: rgb(255 255 255 / 0.06);
  --field-focus-inset: inset 0 1px 2px rgb(0 0 0 / 0.3);
  --notice-fault-rim: inset 0 0 0 0.5px color-mix(in srgb, var(--fault) 50%, transparent);
  --bar-tint: rgb(24 24 30 / 0.26);
  --sheet-tint: rgb(20 20 26 / 0.34);
  --attention-tint: rgb(22 22 28 / 0.45);
  --scrim-fill: radial-gradient(70% 70% at 50% 45%, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.5));
  --scrim-blur: blur(1.5px) saturate(1.3);
}

/* Tokens built from the edge tuning resolve where they're declared, so they're declared again on each
   glass surface: the glass settings can then set --edge-hi and friends per surface. */
:root, .surface, #panel, #raw, .sc-card, .kb-card, .prefs-card, #app-menu, .acc-menu, .sh-side, #table-menu, .mb-menu, #add-menu, .cs-card,
#doc-info, #chart-info, .brand, .topbar-actions, .topbar-menus, .topbar-right, .hint, .edge-tab, .stats, .toast, .findbar,
.cm-lp-picbar, .cm-lp-altbar, .crop-bar, #toolbar, #toolstrip, #ctxbar, #glassdev {
  --line-card: rgb(255 255 255 / calc(0.10 * var(--edge-lo)));
  --line-soft: rgb(255 255 255 / calc(0.16 * var(--edge-lo)));
  --rim:
    inset 0 1px 0 rgb(255 255 255 / calc(0.55 * var(--edge-hi))),
    inset 1px 0 0 rgb(255 255 255 / calc(0.16 * var(--edge-lo))),
    inset -1px 0 0 rgb(255 255 255 / calc(0.10 * var(--edge-lo))),
    inset 0 -1px 0 rgb(255 255 255 / calc(0.24 * var(--edge-lo))),
    inset 0 0 0 0.5px rgb(255 255 255 / calc(0.16 * var(--edge-lo)));
  --rim-surface: var(--rim);
  --sheen:
    inset 0 22px 30px -26px rgb(255 255 255 / calc(0.42 * var(--rim-glow))),
    inset 0 -18px 30px -26px rgb(255 255 255 / calc(0.22 * var(--rim-glow))),
    inset 0 0 26px rgb(255 255 255 / calc(0.035 * var(--rim-glow)));
  --glass-sheet:
    radial-gradient(130% 70% at var(--spec-x) calc(var(--spec-y) - 12%), rgb(255 255 255 / var(--pointer-light)), transparent 62%),
    linear-gradient(180deg, rgb(255 255 255 / calc(0.08 * var(--top-sheen))), rgb(255 255 255 / calc(0.015 * var(--top-sheen))) 42%, rgb(255 255 255 / calc(0.035 * var(--top-sheen))));
  --shadow-float: var(--rim), var(--sheen), var(--depth);
  /* the rims of the things on the glass */
  --rim-control: inset 0 1px 0 rgb(255 255 255 / calc(0.35 * var(--edge-hi))), inset 0 -1px 0 rgb(255 255 255 / calc(0.08 * var(--edge-lo))), inset 0 0 0 0.5px rgb(255 255 255 / calc(0.14 * var(--edge-lo)));
  --rim-control-hover: inset 0 1px 0 rgb(255 255 255 / calc(0.5 * var(--edge-hi))), inset 0 -1px 0 rgb(255 255 255 / calc(0.12 * var(--edge-lo))), inset 0 0 0 0.5px rgb(255 255 255 / calc(0.2 * var(--edge-lo)));
  --hl-fill: var(--bg-pill);   /* (alpha 0 as tuned: the rim is the highlight) */
  --hl-rim: inset 0 1px 0 rgb(255 255 255 / calc(0.317 * var(--edge-hi))), inset 0 0 0 0.5px rgb(255 255 255 / calc(0.173 * var(--edge-lo)));   /* (+44%) */
  --rim-tile: inset 0 1px 0 rgb(255 255 255 / calc(0.26 * var(--edge-hi))), inset 0 -1px 0 rgb(255 255 255 / calc(0.06 * var(--edge-lo))), inset 0 0 0 0.5px rgb(255 255 255 / calc(0.10 * var(--edge-lo)));
  --frame-rim: var(--hl-rim);
  --well-rim: inset 0 1px 0 rgb(255 255 255 / calc(0.1 * var(--edge-hi))), inset 0 0 0 0.5px rgb(255 255 255 / calc(0.08 * var(--edge-lo)));
  --key-rim: inset 0 1px 0 rgb(255 255 255 / calc(0.25 * var(--edge-hi))), inset 0 -1px 0 rgba(0, 0, 0, 0.125), 0 0 0 0.5px rgb(255 255 255 / calc(0.18 * var(--edge-lo))), 0 2px 6px rgba(0, 0, 0, 0.15);
  --primary-rim: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 0 22px rgb(255 255 255 / calc(0.22 * var(--rim-glow))), 0 4px 14px rgba(0, 0, 0, 0.35);
  --primary-rim-hover: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 0 30px rgb(255 255 255 / calc(0.32 * var(--rim-glow))), 0 4px 14px rgba(0, 0, 0, 0.35);
  --danger-rim: inset 0 1px 0 rgb(255 140 140 / calc(0.3 * var(--edge-hi))), inset 0 0 0 0.5px rgb(255 120 120 / calc(0.2 * var(--edge-lo)));
  --danger-row-rim: inset 0 0 0 0.5px rgb(255 120 120 / calc(0.3 * var(--edge-lo)));
}

/* ==========================================================================
   base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg-page);
  color: var(--text-1);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: var(--leading);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
input, textarea { user-select: text; }
:focus, :focus-visible { outline: none; }
::selection { background: var(--accent); color: var(--accent-ink); }
.num { font-variant-numeric: tabular-nums; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(0.92); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   P2 · the two states, and focus */
.is-hl { background: var(--hl-fill); color: var(--text-strong); --state-shadow: var(--hl-rim); box-shadow: var(--state-shadow); }
.is-chosen { background: var(--chosen-fill); color: var(--text-strong); --state-shadow: var(--chosen-rim); box-shadow: var(--state-shadow); }
/* Focus: one soft halo, fading like a drop shadow, once Tab has been pressed (a click hides it), after
   the control's own rim. Rows in menus show focus as their highlight; containers focused by the
   script (tabindex -1), text being edited and a choice's own mark don't take it. */
body.kbd-nav :focus-visible:not(.menu-item, .editing, [tabindex="-1"], .acc-choice input, .input--bare, .find-input, .cm-lp-alt, .vim-bar input) {
  outline: none !important;
  box-shadow: var(--state-shadow, 0 0 #0000), var(--halo) !important;
}

/* ==========================================================================
   P3 · Button: primary · default · quiet · danger (· solid) × sm 28 · md 34 · lg 44 (38 in a field row),
   and the icon shape. Aliases: .icon-btn = icon sm; .tb-btn, .app-menu-btn, .mb-more = icon md;
   .mb-top, .find-toggle, .sc-edit = quiet. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--h-md); padding: 0 12px;
  background: var(--ctl-fill); color: var(--text-2);
  border: 0; border-radius: var(--r-sm);
  box-shadow: var(--state-shadow, var(--rim-control));
  font-size: var(--text-md); font-weight: var(--weight-medium); white-space: nowrap; text-decoration: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform 260ms var(--ease-jelly);
}
.btn svg { flex: none; }
.btn:hover { background: var(--ctl-fill-hover); color: var(--text-1); --state-shadow: var(--rim-control-hover); }
.btn:active { transform: scale(1.06); transition-duration: 90ms; }   /* glass swells under the finger */
.btn:disabled { opacity: 0.55; cursor: progress; }
.btn--primary { background: var(--primary-fill); color: var(--primary-ink); font-weight: var(--weight-strong); text-shadow: none; --state-shadow: var(--primary-rim); }
.btn--primary:hover { background: var(--primary-fill-hover); --state-shadow: var(--primary-rim-hover); }
.btn.btn--primary:is(:hover, :focus-visible, :active) { color: var(--primary-ink); }   /* (.btn:hover's light text would vanish into it) */
.btn--quiet, .btn--danger, .btn--icon { background: transparent; --state-shadow: 0 0 #0000; padding: 0 10px; }
.btn--quiet { color: var(--text-2); }
.btn--danger { color: var(--fault-text); }
.btn--danger:hover { background: var(--fault-wash); --state-shadow: var(--danger-rim); }
.btn--danger:is(.btn--solid, .loud) { background: var(--fault); color: #fff; font-weight: var(--weight-strong); padding: 0 14px; --state-shadow: 0 0 #0000; }
.btn--danger:is(.btn--solid, .loud):hover { background: color-mix(in srgb, var(--fault) 85%, #000); color: #fff; }
.btn--sm { min-height: var(--h-sm); padding: 0 12px; font-size: var(--text-sm); }
.btn--sm.btn--quiet { padding: 0 8px; }
.btn--lg { min-height: var(--h-lg); }
.field-row > .btn { min-height: var(--h-field); }
/* the icon shape: square, r8 at every size */
.btn--icon, .app-menu-btn, .mb-more { width: var(--h-md); padding: 0; }
.btn--icon.btn--sm { width: var(--h-sm); }
.btn--icon.btn--lg { width: var(--h-lg); }
.icon-btn, .tb-btn {
  display: inline-grid; place-items: center; flex: none;
  padding: 0; background: transparent; color: var(--text-2);
  border: 0; border-radius: var(--r-sm);
  box-shadow: var(--state-shadow, 0 0 #0000);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform 260ms var(--ease-jelly);
}
.icon-btn { width: var(--h-sm); height: var(--h-sm); }
.icon-btn:active { transform: scale(1.12); }
.tb-btn { position: relative; width: var(--h-md); height: var(--h-md); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); }
.tb-btn:active:not(:disabled, .disabled) { transform: scale(1.08); transition-duration: 90ms; }
.tb-btn:is(:disabled, .disabled) { color: var(--text-3); opacity: 0.55; background: none; --state-shadow: 0 0 #0000; cursor: default; transform: none; }
/* the quiet ones' hover, and an open menu's button: the quiet highlight */
:is(.btn--quiet, .btn--icon, .icon-btn, .tb-btn, .sc-edit):hover:not(:disabled, .disabled),
:is(.btn, .icon-btn, .tb-btn)[aria-expanded="true"] {
  background: var(--hl-fill); color: var(--text-1); --state-shadow: var(--hl-rim);
}
/* on: a toggle that stays on (Aa, .*, Bold, the chosen tool), the chosen glass */
:is(.btn, .icon-btn, .tb-btn):is(.on, [aria-pressed="true"]),
:is(.btn, .icon-btn, .tb-btn):is(.on, [aria-pressed="true"]):hover {
  background: var(--chosen-fill); color: var(--text-strong); --state-shadow: var(--chosen-rim);
}
/* the menu bar's buttons: quiet md (.btn--quiet already) */
.topbar-menus { gap: 2px; }
/* the find bar's toggles: quiet sm */
.find-toggle { width: auto; min-width: var(--h-sm); padding: 0 6px; font-size: var(--text-sm); font-weight: var(--weight-strong); }
/* the ⌥ sheet's way into the editor: quiet sm */
.sc-edit {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--h-sm); padding: 0 8px; margin-left: 4px;
  background: none; color: var(--text-2); border: 0; border-radius: var(--r-sm);
  box-shadow: var(--state-shadow, 0 0 #0000);
  font-size: var(--text-sm);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
/* view only's lock chip: a small default button (it's clickable) */
.btn.btn--quiet.vo-chip { min-height: var(--h-sm); padding: 0 12px; gap: 7px; font-size: var(--text-sm); background: var(--ctl-fill); color: var(--text-2); --state-shadow: var(--rim-control); }
.btn.btn--quiet.vo-chip:hover { background: var(--ctl-fill-hover); color: var(--text-1); --state-shadow: var(--rim-control-hover); }
.vo-chip[hidden] { display: none; }

/* ==========================================================================
   P4 · Surface: the liquid glass. Three roles, one lens each (the glass script's SURF: card = hero,
   bar, sheet): card (r14 boxes: panels, menus, popovers), bar (r12 one-line strips), sheet (full-window
   overlays). And one scrim behind every dialog. */
.surface, #panel, #raw, .sc-card, .kb-card, .prefs-card, #app-menu, .acc-menu, .sh-side, #table-menu, .mb-menu, #add-menu, .cs-card,
#doc-info, #chart-info, .brand, .topbar-actions, .topbar-menus, .topbar-right, .hint, .edge-tab, .stats, .toast, .findbar,
.cm-lp-picbar, .cm-lp-altbar, .crop-bar, #toolbar, #toolstrip, #ctxbar {
  -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost);
  box-shadow: var(--rim), var(--sheen), var(--depth);
  border: 0;
}
/* card */
.surface--card, #panel, #raw, .prefs-card, #app-menu, .acc-menu, .sh-side, #table-menu, .mb-menu, #add-menu, .cs-card, #doc-info, #chart-info {
  background: var(--glass-sheet), var(--bg-card);
  border-radius: var(--r-xl);
}
/* bar: one line, 44 tall (a 34 control and 5 all round) */
.surface--bar, .brand, .topbar-actions, .topbar-menus, .topbar-right, .hint, .stats, .toast, .findbar,
.cm-lp-picbar, .cm-lp-altbar, .crop-bar, #toolbar, #toolstrip, #ctxbar {
  background: var(--glass-sheet), var(--bar-tint);
  border-radius: var(--r-lg);
  min-height: var(--h-lg);
}
.surface--bar { display: flex; align-items: center; gap: 8px; padding: 5px; }
/* sheet */
.surface--sheet, .sc-card, .kb-card { background: var(--glass-sheet), var(--sheet-tint); border-radius: var(--r-xl); }
/* banners that ask for something: a touch more tint, so they read over a busy page */
.surface--attention, #storage-warn, #cloud-notice { background: var(--glass-sheet), var(--attention-tint); }
/* the scrim: the page dims and softens behind a dialog, on a layer of its own (so the card still lenses it) */
.scrim::before, #shortcuts::before, #prefs::before, #keys-editor::before, .acc-sheet::before, #intro::before {
  content: ''; position: absolute; inset: 0;
  background: var(--scrim-fill);
  -webkit-backdrop-filter: var(--scrim-blur); backdrop-filter: var(--scrim-blur);
}

/* the top bar's capsules */
.brand, .topbar-actions, .topbar-menus, .topbar-right {
  display: flex; align-items: center; gap: 8px;
  height: var(--h-lg); padding: 0 5px;
}
.topbar-menus { gap: 2px; }
.topbar-menus:empty { display: none; }
.brand { gap: 10px; padding: 0 16px; font-size: var(--text-lg); font-weight: var(--weight-strong); letter-spacing: -0.01em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
.topbar-actions { margin-left: 0; }
.brand-name { padding: 0 8px 0 11px; font-size: var(--text-lg); font-weight: var(--weight-strong); letter-spacing: -0.01em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); white-space: nowrap; }
.topbar-right { margin-left: auto; }
/* the status: no bubble, just the light and the words (green saved, blue waiting, red failed) */
.topbar-status {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; margin-right: 2px;
  background: none; color: var(--text-2);
  border-radius: var(--r-sm);
  font-size: var(--text-sm); font-weight: var(--weight-medium); white-space: nowrap;
}
.topbar-status:empty { display: none; }
.topbar-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--status-dot, var(--ok)); }
.topbar-status.waiting { --status-dot: var(--accent); }
.topbar-status.fault { --status-dot: var(--fault); color: var(--fault-text); }
/* the hint and the bottom-right bar: one line of words on a bar */
.hint, .stats { padding: 5px 18px; line-height: 34px; font-size: var(--text-sm); color: var(--text-2); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); white-space: nowrap; }
.hint { position: absolute; left: 16px; bottom: 16px; z-index: 5; max-width: calc(100% - 32px - 24px); overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.stats { position: fixed; z-index: 5; right: calc(var(--right-w, 340px) + 10px); bottom: 16px; transition: right var(--t-panel) var(--ease); }
body.panel-closed .stats { right: 16px; }
.stats :is(a, button) { padding: 0; border: 0; background: none; font: inherit; color: var(--text-2); text-decoration: none; cursor: pointer; }
.stats :is(a, button):hover { color: var(--text-1); text-decoration: underline; text-underline-offset: 2px; }
:root[data-hint="off"] .hint.hint--idle { display: none; }
/* the edge tabs: a 20 × 52 handle, an exception to the bars */
.edge-tab {
  position: absolute; z-index: 6; top: 50%; right: 6px;
  display: grid; place-items: center;
  width: 20px; height: 52px; margin-top: -26px; padding: 0;
  background: var(--glass-sheet), rgba(24, 24, 30, 0.3); color: var(--text-2);
  border-radius: var(--r-sm);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-panel) var(--ease);
}
.edge-tab:hover { color: var(--text-strong); }
.edge-tab svg { transition: transform var(--t-panel) var(--ease); }
/* the tool strip (a column of tools) and the selection's bar (a row) */
#toolbar, #toolstrip { flex-direction: column; width: var(--h-lg); padding: 5px; gap: 2px; }
#ctxbar { gap: 2px; padding: 5px; height: var(--h-lg); }
.tb-sep { flex: none; background: var(--line-soft); }
:is(#toolbar, #toolstrip) .tb-sep { width: 20px; height: 1px; margin: 3px 0; }
#ctxbar .tb-sep { width: 1px; height: 18px; margin: 0 3px; }
@media (pointer: coarse) { .tb-btn { width: 42px; height: 42px; } #toolbar, #toolstrip { width: 52px; } #ctxbar { height: 52px; } }   /* touch: bigger tools */

/* ==========================================================================
   P5 · Row: default 36, compact 32 (the menu bar's and table menus), two-line 52 (switcher, history), nav
   (text-2: Settings' categories, the outline). Under the pointer or the keys: the quiet highlight. */
/* (Settings' categories, .sh-cat, are the ☰ menu's rows: the same rules) */
.ui-row, .menu-item, .sh-cat {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  width: 100%; min-height: var(--h-row); padding: 0 12px;
  background: none; color: var(--text-1); border: 0; border-radius: var(--r-sm);
  box-shadow: var(--state-shadow, 0 0 #0000);
  font-size: var(--text-md); font-weight: var(--weight-medium); text-align: left;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.ui-row--compact, .mb-menu .menu-item, #table-menu .menu-item { min-height: var(--h-row-sm); }
.ui-row:hover, .ui-row.active, .menu-item.active, .mb-menu .menu-item.sub-open, .sh-cat:hover, .sh-cat[aria-selected="true"],
:is(#app-menu, .acc-menu, #table-menu) .menu-item:not(:disabled):is(:hover, :focus-visible),
.cs-row.active, .cs-pick-opt.active, .hist-row:is(:hover, .active) {
  background: var(--hl-fill); color: var(--text-strong); --state-shadow: var(--hl-rim);
}
.menu-item.danger { color: var(--fault-text); }
.menu-item.danger.active, :is(#app-menu, .acc-menu) .menu-item.danger:is(:hover, :focus-visible) { background: var(--fault-wash); color: var(--fault-text); --state-shadow: var(--danger-row-rim); }
:is(#app-menu, .acc-menu, #table-menu) .menu-item:disabled,
.mb-menu .menu-item:is([aria-disabled="true"], .disabled), .mb-menu .menu-item:is([aria-disabled="true"], .disabled).active {
  color: var(--text-3); background: none; --state-shadow: 0 0 #0000;
}
.mb-menu .menu-item:is([aria-disabled="true"], .disabled) kbd { opacity: 0.6; }
/* one group label */
.ui-label, .menu-title, .cs-section, .sh-group { padding: 10px 12px 4px; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-3); }
/* nav rows: text-2; hover and the chosen one, the quiet highlight */
.ui-row--nav, .outline-row { color: var(--text-2); }
:is(.ui-row--nav, .outline-row):hover { background: var(--hl-fill); color: var(--text-1); --state-shadow: var(--hl-rim); }
/* the menus: a card of rows */
#app-menu, .acc-menu, #table-menu, .mb-menu, #add-menu { display: none; min-width: 250px; padding: 8px; }
#app-menu, .acc-menu, #table-menu { position: fixed; z-index: 40; }
:is(#app-menu, .acc-menu, #table-menu, .mb-menu, #add-menu).open { display: block; animation: pop-in var(--t-fast) var(--ease); }
:is(#app-menu, .acc-menu, #table-menu, .mb-menu) .menu-item { cursor: default; }
#table-menu { min-width: 240px; outline: none; }
#table-menu .menu-item.on::after { content: '✓'; margin-left: 8px; color: var(--text-2); }   /* the column's alignment now */
#table-menu .menu-item.on kbd { margin-left: auto; }
#add-menu { min-width: 240px; }
/* the menu bar's menus (and their flyouts) */
.mb-menu { position: fixed; z-index: 45; left: 0; top: 0; min-width: 220px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; outline: none; }
.mb-menu .menu-item > svg { flex: none; color: var(--text-2); }
.mb-menu :is(.mi-check, .mb-check) { flex: none; display: grid; place-items: center; width: 16px; margin-left: -4px; font-size: var(--text-sm); text-align: center; color: var(--text-2); }
.mb-menu :is(.mi-label, .mb-label) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-menu .menu-item kbd { flex: none; margin-left: 18px; }
.mb-menu :is(.mi-sub, .mb-arrow) { flex: none; display: grid; place-items: center; margin-left: auto; margin-right: -4px; color: var(--text-3); }
@media (pointer: coarse) { .ui-row, .menu-item, .mb-menu .menu-item, #table-menu .menu-item { min-height: var(--h-lg); } .mb-top { min-height: 40px; } }
@media (prefers-reduced-motion: reduce) { :is(#app-menu, .acc-menu, #table-menu, .mb-menu, #add-menu).open { animation: none; } }

/* ==========================================================================
   P6 · Field: lg 38 (forms), md 34 (inline), bare (no chrome, 28, in a bar), multi (textarea) */
.input {
  width: 100%; min-height: var(--h-field); padding: 0 14px;
  background: var(--ctl-fill); color: var(--text-1);
  border: 1px solid transparent; border-radius: var(--r-sm);
  box-shadow: var(--state-shadow, var(--rim-control));   /* the same outline as a button */
  font-size: var(--text-md);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input:hover { background: var(--ctl-fill-hover); --state-shadow: var(--rim-control-hover); }
.input:focus { border-color: var(--field-focus-line); background: var(--field-focus-fill); --state-shadow: var(--field-focus-inset); box-shadow: var(--state-shadow), var(--halo); }
.input::placeholder, .input--bare::placeholder, .find-input::placeholder { color: var(--text-placeholder); }
textarea.input { display: block; min-height: 84px; padding: 10px 14px; line-height: var(--leading); resize: vertical; }
.input--md, .cs-search .input, .cs-row .input, .cs-foot .input, .ci-head .input, .link-pop .input, .doc-title-input, .chart-title-input { min-height: var(--h-md); }
.doc-title-input, .chart-title-input { font-size: var(--text-md); font-weight: var(--weight-strong); }   /* a title field: 13px, bold */
.field-row { display: flex; align-items: center; gap: 8px; }
.field-row > .input { flex: 1; min-width: 0; min-height: var(--h-field); }
.input--bare, .find-input { flex: 1; min-width: 60px; height: var(--h-sm); padding: 0; background: none; border: 0; font-size: var(--text-md); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.input--bare:focus-visible, .find-input:focus-visible { outline: none; }

/* ==========================================================================
   P7 · Choice (the welcome card's look: a round mark for one-of, a square one for many-of; the chosen
   glass when selected, the quiet highlight at rest) and Segmented */
.choice, .acc-choice {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px 10px 10px; margin: 0;
  background: var(--hl-fill); color: inherit; border: 0; border-radius: var(--r-lg);
  --state-shadow: var(--hl-rim); box-shadow: var(--state-shadow);
  font: inherit; text-align: left; cursor: pointer;
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.choice[aria-checked="true"], .acc-choice:has(input:checked:not([type="checkbox"])) { background: var(--chosen-fill); --state-shadow: var(--chosen-rim); }
body.kbd-nav :is(.choice, .acc-choice):has(:focus-visible) { box-shadow: var(--state-shadow), var(--halo); }
/* the mark: a native radio or checkbox redrawn (no markup change), or a span */
.choice-mark, :is(.choice, .acc-choice, .gd-check) input:is([type="radio"], [type="checkbox"]) {
  appearance: none; -webkit-appearance: none;
  flex: none; position: relative; display: grid; place-items: center;
  width: 14px; height: 14px; margin: 3px 0 0; padding: 0;
  border: 0; border-radius: 50%; background: none;
  --state-shadow: inset 0 0 0 1.5px var(--text-3); box-shadow: var(--state-shadow);
  cursor: inherit;
}
:is(.choice, .acc-choice, .gd-check) input[type="checkbox"], .choice-mark--square { border-radius: 4px; }
:is(.choice, .acc-choice, .gd-check) input:checked, .choice[aria-checked="true"] .choice-mark { background: var(--text-strong); --state-shadow: 0 0 #0000; }
:is(.choice, .acc-choice, .gd-check) input[type="radio"]:checked::after, .choice[aria-checked="true"] .choice-mark:not(.choice-mark--square)::after {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--bg-page);
}
:is(.choice, .acc-choice, .gd-check) input[type="checkbox"]:checked::after, .choice[aria-checked="true"] .choice-mark--square::after {
  content: ''; width: 3px; height: 7px; margin-top: -2px; border: solid var(--bg-page); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
/* Segmented: no well; the selected one and hover, the quiet highlight (md 34; lg 44 in Settings; sm 28 in the glass panel) */
.seg { display: inline-flex; flex: none; gap: 2px; padding: 0; background: none; }
.seg button {
  min-height: var(--h-md); padding: 0 12px;
  background: transparent; color: var(--text-2);
  border: 0; border-radius: var(--r-sm);
  box-shadow: var(--state-shadow, 0 0 #0000);
  font-size: var(--text-md); font-weight: var(--weight-medium); white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.seg button:hover { background: var(--hl-fill); color: var(--text-1); --state-shadow: var(--hl-rim); }
.seg button.on { background: var(--hl-fill); color: var(--text-strong); --state-shadow: var(--hl-rim); }

/* ==========================================================================
   P8 · Tile: raised (the stat tile), frame (a faint outline), well (sunk); one fact list */
.tile, .fact, .kb-group, .ci-facts, .reset-list, .hist-preview {
  background: var(--tile-fill); box-shadow: var(--rim-tile); border-radius: var(--r-md);
}
.tile { padding: 12px 14px; }
.notice { margin: 0; }
.tile--frame, .sc-group { background: var(--frame-fill); box-shadow: var(--frame-rim); border-radius: var(--r-md); }
.tile--well, .cs-pick, .hist-text { background: var(--well-fill); box-shadow: var(--well-rim); border-radius: var(--r-md); }
/* the fact list: dt 12 text-2, dd 13/500 */
.facts, .ci-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; margin: 0; padding: 12px 14px; font-size: var(--text-sm); }
:is(.facts, .ci-facts) dt { color: var(--text-2); white-space: nowrap; }
:is(.facts, .ci-facts) dd { margin: 0; min-width: 0; color: var(--text-1); font-size: var(--text-md); font-weight: var(--weight-medium); overflow-wrap: anywhere; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }

/* ==========================================================================
   P9 · Key (the raised cap, everywhere), Chip, Dot */
.key, kbd.key, .sc-keys kbd, .kb-caps kbd, .menu-item kbd, .sc-edit kbd, .kb-open kbd, .pref-sub kbd, .ix-desc kbd, .ix-foot-note kbd {
  display: inline-block; min-width: 22px; padding: 1px 7px;
  font: inherit; font-size: var(--text-xs); font-weight: var(--weight-strong); line-height: 1.45; text-align: center; color: var(--text-strong);
  background: var(--key-fill); border-radius: var(--r-xs); box-shadow: var(--key-rim);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.175);
}
.menu-item kbd { margin-left: auto; }
.chip, .ix-badge {
  display: inline-block; height: 20px; padding: 0 8px; border-radius: var(--r-pill); white-space: nowrap;
  font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 20px;
  color: var(--text-1); background: var(--chip-fill);
}
.chip--accent { background: var(--accent-wash); }
.chip--fault { background: var(--fault-wash); color: var(--fault-text); }
.status-dot { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.status-dot.waiting { background: var(--accent); }
.status-dot.fault { background: var(--fault); }

/* ==========================================================================
   P10 · Notice: floating (a bar: toasts and banners) or inline (r10, a dot), neutral or fault */
.notice, .ci-note.warn, .acc-warn, .reset-warn, .raw-error {
  position: relative; padding: 10px 12px 10px 26px;
  background: var(--tile-fill); box-shadow: var(--rim-tile); border: 0; border-radius: var(--r-md);
  font-size: var(--text-sm); color: var(--text-2);
}
:is(.notice, .ci-note.warn, .acc-warn, .reset-warn, .raw-error)::before {
  content: ''; position: absolute; left: 12px; top: 16px; width: 6px; height: 6px; border-radius: 50%; background: var(--text-3);
}
.notice--fault, .ci-note.warn, .acc-warn, .reset-warn { background: var(--fault-wash); box-shadow: var(--notice-fault-rim); color: var(--fault-text); }
:is(.notice--fault, .ci-note.warn, .acc-warn, .reset-warn, .raw-error)::before { background: var(--fault); }
/* floating: a bar */
.toast {
  position: fixed; z-index: 40; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  max-width: calc(100vw - 32px); padding: 5px 5px 5px 16px;
  color: var(--text-2); font-size: var(--text-sm); white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.toast[hidden] { display: none; }
.toast b { color: var(--text-1); font-weight: var(--weight-medium); }
#toast { bottom: 18px; }
:is(#storage-warn, #cloud-notice) { top: calc(var(--topbar-h, 56px) + 14px); width: min(620px, calc(100vw - 32px)); padding-left: 18px; }   /* (#cloud-notice: account.js's launch notice, the same banner) */
:is(#storage-warn, #cloud-notice) .toast-text { flex: 1; min-width: 0; white-space: normal; padding: 4px 0; }
#storage-warn.nowhere { box-shadow: var(--rim), var(--depth), inset 0 0 0 1px color-mix(in srgb, var(--fault) 70%, transparent); }
#storage-warn .storage-warn-title { color: var(--fault-text); }

/* ==========================================================================
   P11 · dividers and the scrollbar */
/* divider: 1px --line-soft (menus, bars, strips); rule: 0.5px --line-card (section edges in cards) */
.divider, .menu-sep { height: 1px; margin: 5px 8px; background: var(--line-soft); }
.divider--v, .find-sep, .bar-div { flex: none; width: 1px; height: 18px; background: var(--line-soft); }
.find-sep { height: 16px; margin: 0 4px; }
.bar-div { margin: 0 4px 0 6px; }
.rule { height: 0; border: 0; border-top: 0.5px solid var(--line-card); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border: 3px solid transparent; background-clip: padding-box; border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); background-clip: padding-box; }

/* ==========================================================================
   The shared chrome: the inspector and Raw's card, the ⌥ sheet, the shortcut editor, Settings, the
   switcher, the doc / chart info, history, find. (Each page places its own: the layout it shares is here.) */

/* the inspector: a card at the right; Raw's: its mirror image at the left */
#panel {
  position: fixed; z-index: 7;
  top: calc(var(--topbar-h, 56px) + 14px); right: 14px; bottom: 14px;
  width: calc(var(--right-w, 340px) - 14px);
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  transition: transform var(--t-panel) var(--ease), opacity var(--t-panel) var(--ease), visibility 0s linear 0s;
}
#panel > * { width: calc(var(--right-w, 340px) - 16px); }
body.panel-closed #panel {
  transform: translateX(calc(100% + 14px)); opacity: 0;
  visibility: hidden; pointer-events: none;
  transition: transform var(--t-panel) var(--ease), opacity var(--t-panel) var(--ease), visibility 0s linear var(--t-panel);
}
.panel-head { position: relative; display: grid; gap: 3px; padding: 24px 22px 10px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }
.panel-head.raw-head { display: flex; align-items: flex-start; gap: 8px; padding-right: 14px; }
.raw-head > div { display: grid; gap: 3px; flex: 1; min-width: 0; }
.raw-head .btn { margin-top: -2px; }
.heading-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xl); font-weight: var(--weight-strong); letter-spacing: -0.015em; }
.heading-sub { font-size: var(--text-md); color: var(--text-2); }
:is(.doc-title-row, .chart-title-row) { display: flex; align-items: center; gap: 6px; min-width: 0; }
:is(.doc-title-row, .chart-title-row) .heading-title { cursor: text; }
:is(.doc-rename, .chart-rename) { flex: none; }
.section { padding: 12px 22px; }
.section:last-child { padding-bottom: 22px; }
.section-title { margin-bottom: 10px; font-size: var(--text-md); font-weight: var(--weight-strong); color: var(--text-1); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.note { margin: 0 0 12px; color: var(--text-2); }
.note:last-child { margin-bottom: 0; }
.note.error { color: var(--fault-text); }
.note.done { color: var(--ok); }
/* facts as stat tiles: a small grey label over a big value */
.section:has(> .fact) { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: 8px; }
.section:has(> .fact .fact-value:not(.big)) { grid-template-columns: 1fr; }
.section:has(> .fact) > .section-title { grid-column: 1 / -1; margin-bottom: 2px; }
.section:has(> .fact) > .actions { grid-column: 1 / -1; margin-top: 4px; }
.fact { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px; }
.fact-label { font-size: var(--text-sm); color: var(--text-2); white-space: nowrap; }
.fact-value { min-width: 0; font-size: var(--text-md); font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.fact-value.big { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xl); font-weight: var(--weight-strong); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.add { margin-top: 4px; }
.export-bg { display: flex; align-items: center; gap: 4px; margin: 0 0 12px; }
.export-bg .fact-label { margin-right: 8px; }
#raw {
  position: fixed; z-index: 7;
  top: calc(var(--topbar-h, 56px) + 14px); left: calc(14px + var(--tb-w, 0px)); bottom: 14px;
  width: calc(var(--left-w, 340px) - 14px);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform var(--t-panel) var(--ease), opacity var(--t-panel) var(--ease), visibility 0s linear 0s;
}
body:not(.raw-open) #raw {
  transform: translateX(calc(-100% - 14px)); opacity: 0;
  visibility: hidden; pointer-events: none;
  transition: transform var(--t-panel) var(--ease), opacity var(--t-panel) var(--ease), visibility 0s linear var(--t-panel);
}
.edge-tab { transform: translateX(calc(-1 * var(--right-w, 340px))); }
body.panel-closed .edge-tab { transform: none; }
body.panel-closed .edge-tab svg { transform: rotate(180deg); }
.edge-tab.edge-tab--left { left: calc(6px + var(--tb-w, 0px)); right: auto; transform: none; }
body:not(.raw-open) .edge-tab--left.past-strip { left: 14px; }   /* (below the tool strip: as far in as the strip) */
body.raw-open .edge-tab--left { transform: translateX(var(--left-w, 340px)); }
body:not(.raw-open) .edge-tab--left svg { transform: none; }
body.raw-open .edge-tab--left svg { transform: rotate(180deg); }
body.raw-open:not(.panel-closed) { --left-w: clamp(200px, calc(100vw - var(--right-w, 340px) - 60px), 340px); }   /* both open in a narrow window: Raw gives way */
body.panel-instant :is(#panel, #raw, .edge-tab, .edge-tab svg, .hint, .findbar, .stats) { transition: none; }   /* (the remembered state doesn't animate in) */
@media (prefers-reduced-motion: reduce) { #panel, body.panel-closed #panel, #raw, body:not(.raw-open) #raw, .edge-tab, .edge-tab svg { transition: none; } }

/* hold ⌥: every shortcut, on a sheet over the page */
#shortcuts {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center; padding: 24px 16px;
  visibility: hidden; pointer-events: none;
  transition: visibility 0s linear 160ms;
}
#shortcuts::before { opacity: 0; transition: opacity 160ms var(--ease); }
#shortcuts.open { visibility: visible; transition: none; }
#shortcuts.open::before { opacity: 1; }
.sc-card {
  position: relative;
  width: min(1040px, 100%); max-height: 100%; overflow: hidden;
  padding: 24px;
  opacity: 0;
  transform: scale(0.94); transition: transform 320ms var(--ease-jelly), opacity 160ms var(--ease);
}
#shortcuts.open .sc-card { transform: none; opacity: 1; }
.sc-card > * { position: relative; z-index: 2; }
.sc-head .sc-swap { margin-left: 0; }
.sc-head { display: flex; align-items: baseline; gap: 12px; padding: 0 2px 16px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.sc-head .heading-sub { margin-left: auto; font-size: var(--text-sm); color: var(--text-2); }
.sc-cols { columns: 3 260px; column-gap: 14px; }
.sc-group {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px;
  break-inside: avoid; margin: 0 0 14px; padding: 12px 14px 8px;
}
.sc-group h3 { grid-column: 1 / -1; margin: 0 0 4px; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-2); }
.sc-row { display: contents; }
.sc-keys { display: flex; align-items: baseline; gap: 4px; padding: 5px 0; white-space: nowrap; }
.sc-keys .sc-or { font-size: var(--text-sm); color: var(--text-3); }
.sc-desc { padding: 5px 0; color: var(--text-1); opacity: 0.82; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
#shortcuts.open .sc-edit { pointer-events: auto; }
#shortcuts.pinned { pointer-events: auto; cursor: default; }   /* opened from a menu: it stays until a click outside or Esc */
#shortcuts.pinned .sc-card { max-height: calc(100vh - 48px); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.sc-close { display: none; }
#shortcuts.pinned .sc-close { display: inline-grid; margin-left: 4px; }
#shortcuts.pinned .sc-release { display: none; }
@media (prefers-reduced-motion: reduce) { #shortcuts, #shortcuts::before, .sc-card { transition: none !important; } .sc-card { transform: none; } }

/* the shortcut editor (⌘/): every command, its keys as caps; click one to record */
#keys-editor { position: fixed; inset: 0; z-index: 60; display: none; place-items: center; padding: 24px 16px; }
#keys-editor.open { display: grid; }
.kb-card {
  position: relative;
  display: flex; flex-direction: column;
  width: min(900px, 100%); max-height: 100%; overflow: hidden;
  animation: pop-in var(--t-fast) var(--ease);
}
.kb-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 20px 12px 24px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }
.kb-head > div { display: grid; gap: 3px; min-width: 0; }
.kb-head .heading-sub { font-size: var(--text-sm); color: var(--text-3); }
.kb-head .heading-sub.bad { color: var(--fault-text); }
.kb-head .icon-btn { margin-left: auto; }
.sc-head .heading-title, .kb-head .heading-title { font-size: var(--text-xl); }
.kb-body { overflow-y: auto; overscroll-behavior: contain; padding: 4px 24px 10px; columns: 2 340px; column-gap: 14px; }
.kb-group { break-inside: avoid; margin: 0 0 14px; padding: 10px 14px 6px; }
.kb-group h3 { margin: 0 0 2px; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-2); }
.kb-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 5px 0; }
.kb-row + .kb-row { border-top: 0.5px solid var(--line-soft); }
.kb-label { min-width: 0; color: var(--text-1); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.kb-row.changed .kb-label::after { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 0 1px 8px; border-radius: 50%; background: var(--accent); }
.kb-binds { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; }
.kb-bind {
  display: inline-flex; align-items: center; gap: 3px;
  min-height: var(--h-sm); padding: 0 5px;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
  box-shadow: var(--state-shadow, 0 0 #0000);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.kb-bind:hover { background: var(--hl-fill); --state-shadow: var(--hl-rim); }
.kb-bind.conflict kbd { color: var(--fault-text); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 0 0 1px color-mix(in srgb, var(--fault) 70%, transparent); }
.kb-bind.recording { padding: 0 10px; border-color: var(--accent); background: var(--accent-wash); color: var(--text-1); font-size: var(--text-sm); --state-shadow: 0 0 #0000; }   /* (live: the accent, its own meaning) */
.kb-unset { padding: 0 4px; font-size: var(--text-sm); color: var(--text-3); }
.kb-note { grid-column: 1 / -1; padding: 3px 0 1px; font-size: var(--text-sm); color: var(--fault-text); }
.kb-note.soft { color: var(--text-3); }
.kb-note.tip { color: var(--text-2); }
.kb-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 20px 16px 24px; border-top: 0.5px solid var(--line-card); }
.kb-foot .note { flex: 1 1 260px; margin: 0; font-size: var(--text-sm); color: var(--text-3); }
.kb-foot .btn:disabled { opacity: 0.4; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .kb-card { animation: none; } }

/* Settings: a card over the dimmed page */
#prefs {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 24px 16px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t-fast) var(--ease), visibility 0s linear var(--t-fast);
}
#prefs.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--t-fast) var(--ease); }
.prefs-card { position: relative; width: min(540px, 100%); }
:where(#prefs, .acc-sheet) .prefs-card {
  max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
  transform: scale(0.985); transition: transform var(--t-fast) var(--ease);
}
.prefs-card::-webkit-scrollbar-track { margin-block: var(--r-xl); }   /* (the track keeps clear of the rounded corners) */
#prefs.open .prefs-card { transform: none; }
@media (prefers-reduced-motion: reduce) { #prefs, #prefs.open, .prefs-card { transition: none; } .prefs-card { transform: none; } }
.prefs-card .panel-head { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }
.prefs-card .section { display: grid; gap: 6px; padding: 8px 22px 10px; }
.prefs-card .section-title { margin-bottom: 2px; }
.pref-row { display: flex; align-items: center; gap: 16px; min-height: 52px; padding: 8px 8px 8px 14px; }   /* (rows sit straight on the glass) */
.pref-label { flex: 1; min-width: 0; display: grid; gap: 1px; }
.pref-name { font-weight: var(--weight-medium); color: var(--text-1); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.pref-sub { font-size: var(--text-sm); color: var(--text-3); }
.pref-row.disabled .seg { opacity: 0.4; pointer-events: none; }
.prefs-foot { display: flex; align-items: center; gap: 8px; padding: 12px 22px 22px; }
.prefs-foot .btn--primary { margin-left: auto; }
/* its buttons are lg, and quiet (just the label, the quiet hover) unless they're primary or danger */
:where(#prefs, .acc-sheet) .prefs-card .btn { min-height: var(--h-lg); height: var(--h-lg); }
:where(#prefs, .acc-sheet) .prefs-card .btn:not(.btn--primary, .btn--danger) { background: transparent; color: var(--text-2); padding: 0 10px; --state-shadow: 0 0 #0000; }
:where(#prefs, .acc-sheet) .prefs-card .btn:not(.btn--primary, .btn--danger):hover { background: var(--hl-fill); color: var(--text-1); --state-shadow: var(--hl-rim); }
:where(#prefs, .acc-sheet) .prefs-card .btn:not(.btn--primary, .btn--danger):is(.on, [aria-pressed="true"]) { background: var(--chosen-fill); color: var(--text-strong); --state-shadow: var(--chosen-rim); }
:where(#prefs, .acc-sheet) .prefs-card .seg button { min-height: var(--h-lg); height: var(--h-lg); }   /* (the choices: as tall as the buttons) */
/* Reset this device */
.reset-list { display: grid; gap: 4px; margin: 0; padding: 10px 14px 10px 30px; color: var(--text-2); }
.reset-list b { color: var(--text-1); font-weight: var(--weight-medium); }
.reset-list code, .reset-warn code { font: 12px var(--font-mono); }
.reset-list code { color: var(--text-1); }
.reset-warn { display: grid; gap: 8px; color: var(--text-1); }
.reset-warn-title { font-weight: var(--weight-strong); color: var(--fault-text); }
.reset-warn p { margin: 0; color: var(--text-1); }
.reset-warn .note { margin: 0; color: var(--text-2); }
.prefs-foot .reset-go { margin-left: auto; }
:root.reduce-motion .sc-card, :root.reduce-motion .prefs-card { transform: none; }

/* the doc / chart name in the top bar, and the switcher */
:is(.doc-name, .chart-name) { max-width: 280px; gap: 6px; color: var(--text-1); padding: 0 10px; }
:is(.doc-name, .chart-name)[hidden] { display: none; }
:is(.doc-name, .chart-name) span { overflow: hidden; text-overflow: ellipsis; }
:is(.doc-name, .chart-name) svg { color: var(--text-3); }
.topbar-actions :is(.doc-name, .chart-name) { min-height: var(--h-md); margin-left: -6px; padding: 0 8px; color: var(--text-2); }
.topbar-actions :is(.doc-name, .chart-name):hover { color: var(--text-1); }
:is(#doc-switcher, #chart-switcher) { position: fixed; inset: 0; z-index: 30; }
:is(#doc-switcher, #chart-switcher)[hidden] { display: none; }
.cs-card {
  position: absolute; top: calc(var(--topbar-h, 56px) - 4px);
  display: flex; flex-direction: column;
  width: min(460px, calc(100vw - 24px)); max-height: calc(100vh - var(--topbar-h, 56px) - 24px);
  animation: pop-in var(--t-fast) var(--ease);
}
.cs-search { display: flex; align-items: center; gap: 6px; padding: 10px 10px 4px; }
.cs-search .input { flex: 1; min-width: 0; }
.cs-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 6px 6px; }
.cs-section { border-radius: var(--r-sm); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.cs-row {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--h-row2); padding: 6px 6px 6px calc(12px + var(--cs-depth, 0) * 28px);
  border-radius: var(--r-sm); cursor: pointer;
  box-shadow: var(--state-shadow, 0 0 #0000);
}
.cs-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.cs-name { display: flex; align-items: center; gap: 8px; font-weight: var(--weight-medium); color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.cs-name.current::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.cs-meta { font-size: var(--text-sm); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-tools { display: flex; gap: 2px; opacity: 0; }
.cs-row:hover .cs-tools, .cs-row.active .cs-tools { opacity: 1; }
.cs-tools .pinned { color: var(--text-1); }
.cs-tools .danger:hover { color: var(--fault-text); background: var(--fault-wash); }
.cs-confirm { flex: 1; min-width: 0; color: var(--text-2); }
.cs-confirm b { color: var(--text-1); font-weight: var(--weight-medium); }
.cs-empty { padding: 14px 12px; color: var(--text-3); }
.cs-foot { display: flex; align-items: center; gap: 8px; padding: 8px 10px 10px; border-top: 0.5px solid var(--line-card); }
.cs-foot .input { flex: 1; }
.cs-foot .cs-keys { margin-left: auto; font-size: var(--text-sm); color: var(--text-3); white-space: nowrap; }
.cs-foot .cs-in { flex: 0 1 auto; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); color: var(--text-3); }
/* folders: rows indent by depth (--cs-depth) */
.cs-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cs-path { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--text-sm); font-weight: normal; color: var(--text-3); text-shadow: none; }
.cs-chev { flex: none; display: grid; place-items: center; width: 12px; margin-right: -4px; color: var(--text-3); transition: transform var(--t-fast) var(--ease); }
.cs-folder.open .cs-chev { transform: rotate(90deg); }
.cs-ficon { flex: none; display: grid; place-items: center; width: 22px; height: 22px; color: var(--text-2); }
:is(.cs-tree-doc, .cs-tree-chart) { padding-left: calc(12px + var(--cs-depth, 0) * 28px + 22px); }
.cs-section.drop, .cs-row.drop { background: var(--accent-wash); --state-shadow: inset 0 0 0 1px var(--accent); box-shadow: var(--state-shadow); }   /* (drop here: the accent, its own meaning) */
.cs-row.dragging { opacity: 0.45; }
.cs-pick { display: grid; gap: 1px; margin: 0 0 6px calc(12px + var(--cs-depth, 0) * 28px); padding: 4px; outline: none; max-height: 240px; overflow-y: auto; }
.cs-pick-opt { display: flex; align-items: center; gap: 8px; min-height: var(--h-row-sm); padding: 0 8px 0 calc(8px + var(--cs-depth, 0) * 18px); border-radius: var(--r-sm); color: var(--text-1); cursor: pointer; white-space: nowrap; box-shadow: var(--state-shadow, 0 0 #0000); }
.cs-pick-opt span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cs-pick-opt svg { flex: none; color: var(--text-3); }
.cs-pick-opt.here { color: var(--text-3); cursor: default; }
.cs-pick-opt.here::after { content: 'here'; margin-left: auto; font-size: var(--text-sm); color: var(--text-3); }

/* the doc / chart info: the popover from the status, laid out as the inspector (its padding, heading, a fact list) */
#sync[role="button"] { cursor: pointer; transition: filter var(--t-fast) var(--ease); }
#sync[role="button"]:hover, #sync[aria-expanded="true"] { filter: brightness(1.25); }
:is(#doc-info, #chart-info) {
  position: fixed; z-index: 35; top: calc(var(--topbar-h, 56px) - 4px);
  display: grid; gap: 0;
  width: min(320px, calc(100vw - 24px)); padding: 0 0 18px;
  animation: pop-in var(--t-fast) var(--ease);
  user-select: text;
}
:is(#doc-info, #chart-info)[hidden] { display: none; }
:is(#doc-info, #chart-info) > * { margin-left: 22px; margin-right: 22px; }
.ci-head { display: flex; align-items: center; gap: 4px; min-width: 0; padding-top: 22px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }
.ci-name { flex: 1; min-width: 0; font-size: var(--text-xl); font-weight: var(--weight-strong); letter-spacing: -0.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-head .input { flex: 1; }
.ci-head .pinned { color: var(--text-1); }
.ci-path { margin-top: 3px; font-size: var(--text-md); color: var(--text-2); overflow-wrap: anywhere; }
.ci-facts { margin-top: 16px; }
.ci-facts .ci-version { font-family: var(--font-mono); font-weight: 400; font-size: var(--text-sm); }
.ci-status { display: inline-flex; align-items: center; gap: 7px; }
.ci-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ci-status.saved { color: var(--ok); }
.ci-status.saving, .ci-status.pending { color: var(--accent); }
.ci-status.error { color: var(--fault-text); }
.ci-note { margin: 12px 0 0; font-size: var(--text-sm); color: var(--text-2); }
.ci-note:empty, .ci-actions:empty { display: none; }
.ci-actions { display: flex; gap: 8px; margin-top: 12px; }

/* version history: the History panel's list (two-line rows) and preview */
.hist-list { display: grid; gap: 2px; margin: 0 -10px; }
.hist-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 1px;
  width: 100%; padding: 8px 10px;
  background: transparent; color: var(--text-1);
  border: 0; border-radius: var(--r-sm);
  box-shadow: var(--state-shadow, 0 0 #0000);
  text-align: left;
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.hist-when { font-weight: var(--weight-medium); }
.hist-clock { font-size: var(--text-sm); color: var(--text-3); align-self: center; }
.hist-counts { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--text-2); }
.hist-preview { display: grid; gap: 10px; margin: 2px 0 8px; padding: 10px; }
.hist-preview .note { margin: 0; }

/* find (⌘F) and its replace row: a bar under the top bar, left of the inspector */
.findbar {
  position: fixed; z-index: 8;
  top: calc(var(--topbar-h, 56px) + 14px); right: calc(var(--right-w, 340px) + 10px);
  display: none; flex-wrap: wrap; align-items: center; gap: 2px;
  width: 420px; max-width: calc(100vw - var(--right-w, 340px) - 26px);
  padding: 5px 5px 5px 12px;
  transition: right var(--t-panel) var(--ease);
}
body.panel-closed .findbar { right: 14px; max-width: calc(100vw - 28px); }
.findbar.open { display: flex; animation: pop-in var(--t-fast) var(--ease); }
.findbar > svg { flex: none; margin-right: 6px; color: var(--text-3); }
.findbar > svg, .find-count, .find-rmsg { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
.find-count { flex: none; padding: 0 8px 0 6px; font-size: var(--text-sm); color: var(--text-3); white-space: nowrap; }
.find-count.none { color: var(--fault-text); }
.findbar > .find-rtoggle { margin: 0 2px 0 -8px; }
.find-rtoggle svg { transition: transform var(--t-fast) var(--ease); }
.findbar.replacing .find-rtoggle svg { transform: rotate(90deg); }
.find-rrow { display: none; flex-basis: 100%; align-items: center; gap: 4px; padding: 4px 0 1px 39px; }
.findbar.replacing .find-rrow { display: flex; }
.find-rrow .find-input { min-width: 40px; }
.find-rmsg { flex: none; padding: 0 4px; font-size: var(--text-sm); color: var(--text-3); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .findbar, .stats, .find-rtoggle svg { transition: none; } .findbar.open { animation: none; } }

/* the pictures' bars and the crop bar (both apps): bars of buttons */
.cm-lp-picbar, .crop-bar { display: flex; align-items: center; gap: 2px; padding: 5px; }
.crop-bar { gap: 6px; }
.crop-bar .btn { white-space: nowrap; }
.cm-lp-altbar { display: flex; align-items: center; padding: 5px 12px; }

/* the glass panel (Ctrl+Shift+G, on this machine only): live tuning of the glass */
:is(#glassdev, #moatdev) {
  position: fixed; left: 16px; top: 64px; z-index: 60;
  width: 292px; max-height: calc(100vh - 84px);
  display: flex; flex-direction: column;
  background: var(--glass-sheet), var(--bg-card);
  backdrop-filter: var(--frost); -webkit-backdrop-filter: var(--frost);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-float);
  font-size: var(--text-sm); color: var(--text-2);
}
:is(#glassdev, #moatdev)[hidden] { display: none; }
:is(#glassdev, #moatdev) .gd-head { display: flex; align-items: center; gap: 2px; padding: 6px 6px 6px 14px; cursor: grab; user-select: none; border-bottom: 0.5px solid var(--line-card); }
:is(#glassdev, #moatdev) .gd-head:active { cursor: grabbing; }
:is(#glassdev, #moatdev) .gd-title { flex: 1; font-weight: var(--weight-strong); color: var(--text-1); font-size: var(--text-md); }
:is(#glassdev, #moatdev) :is(.gd-head, .gd-tabs) button {
  min-height: var(--h-sm); padding: 0 8px;
  font: inherit; color: var(--text-2); background: transparent; border: 0; border-radius: var(--r-sm); cursor: pointer;
  box-shadow: var(--state-shadow, 0 0 #0000);
}
:is(#glassdev, #moatdev) :is(.gd-head, .gd-tabs) button:hover, :is(#glassdev, #moatdev) .gd-tabs button.on { background: var(--hl-fill); color: var(--text-1); --state-shadow: var(--hl-rim); }
:is(#glassdev, #moatdev) .gd-tabs button.on { color: var(--text-strong); }
:is(#glassdev, #moatdev) .gd-body { overflow-y: auto; padding: 4px 14px 12px; }
:is(#glassdev, #moatdev) h4 { margin: 12px 0 4px; padding: 0; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-3); }
:is(#glassdev, #moatdev) .gd-row { display: grid; grid-template-columns: 74px 1fr 42px; align-items: center; gap: 8px; height: 22px; }
:is(#glassdev, #moatdev) .gd-row label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(#glassdev, #moatdev) .gd-row input[type=range] { width: 100%; accent-color: var(--text-2); height: 14px; margin: 0; }
:is(#glassdev, #moatdev) .gd-row output { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-3); }
:is(#glassdev, #moatdev) .gd-row.changed output { color: var(--text-1); }
:is(#glassdev, #moatdev) .gd-row input[type=color] { width: 100%; height: 16px; padding: 0; border: 0; background: none; }
:is(#glassdev, #moatdev) .gd-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin: 2px 0 6px; }
:is(#glassdev, #moatdev) .gd-check { grid-template-columns: 16px 1fr; height: auto; min-height: 22px; cursor: pointer; }
:is(#glassdev, #moatdev) .gd-check input { margin: 0; }
:is(#glassdev, #moatdev) .gd-note { margin-top: 10px; color: var(--text-3); font-size: var(--text-xs); line-height: 1.4; }

/* reduce motion forced on (the page's setting), and the startup instant */
:root.reduce-motion *, :root.reduce-motion *::before, :root.reduce-motion *::after {
  transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important;
}
:root.prefs-instant *, :root.prefs-instant *::before, :root.prefs-instant *::after { transition: none !important; }
/* print: no glass at all */
body.printing { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body.printing *, body.printing *::before, body.printing *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; text-shadow: none !important; }

/* ==========================================================================
   The light theme: the same tokens re-pointed. The glass loses its darkness, takes white tints, and its
   white rims become dark hairlines; the highlight is a raised white chip. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg-page: #f2f2f4;
  --bg-card: rgba(255, 255, 255, 0.62);
  --bg-tile: rgba(255, 255, 255, 0.5);
  --bg-tile-hover: rgba(0, 0, 0, 0.05);
  --bg-pill: rgba(0, 0, 0, 0.04);
  --bg-pill-hover: rgba(0, 0, 0, 0.08);
  --text-1: #18181b;
  --text-2: #5c5c66;
  --text-3: #8b8b95;
  --text-strong: #000000;
  --text-placeholder: #a3a3ac;
  --accent: #2f78e8;
  --accent-wash: rgba(47, 120, 232, 0.18);
  --ok: #17945c;
  --ok-wash: rgba(23, 148, 92, 0.12);
  --fault: #e0434a;
  --fault-text: #cc2e36;
  --fault-wash: rgba(224, 67, 74, 0.1);
  --frost: blur(21.5px) saturate(1.3) brightness(1.06);
  --depth: 0 18px 48px rgba(20, 20, 30, 0.14), 0 2px 8px rgba(20, 20, 30, 0.06);
  --shadow-float: 0 18px 48px rgba(20, 20, 30, 0.16), 0 0 0 1px var(--line-card);
  --ctl-fill: rgb(255 255 255 / 0.55);
  --ctl-fill-hover: rgb(255 255 255 / 0.85);
  --primary-fill: linear-gradient(180deg, #2a2a30, #18181b);
  --primary-fill-hover: linear-gradient(180deg, #3a3a42, #222226);
  --primary-ink: #fff;
  --chosen-fill: linear-gradient(180deg, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0.45) 55%, rgb(255 255 255 / 0.65));
  --chosen-rim: inset 0 1px 0 #fff, inset 0 0 0 0.5px rgb(0 0 0 / 0.18), 0 2px 8px rgb(0 0 0 / 0.14);
  --halo: 0 0 0 1px rgb(0 0 0 / 0.08), 0 0 6px 1px rgb(0 0 0 / 0.08), 0 0 16px 3px rgb(0 0 0 / 0.05);
  --tile-fill: rgb(255 255 255 / 0.55);
  --frame-fill: rgb(0 0 0 / 0.025);
  --well-fill: rgb(0 0 0 / 0.025);
  --key-fill: linear-gradient(180deg, rgb(236 236 240), rgb(226 226 231));   /* (darker caps: a light grey, not white) */
  --chip-fill: rgb(0 0 0 / 0.07);
  --field-focus-line: rgb(0 0 0 / 0.28);
  --field-focus-fill: #fff;
  --field-focus-inset: 0 0 #0000;
  --bar-tint: var(--bg-card);
  --sheet-tint: var(--bg-card);
  --attention-tint: rgb(255 255 255 / 0.8);
  --scrim-fill: rgba(225, 225, 232, 0.45);
  --scrim-blur: blur(1.5px);
}
:root[data-theme="light"], :root[data-theme="light"] :is(.surface, #panel, #raw, .sc-card, .kb-card, .prefs-card, #app-menu, .acc-menu, .sh-side, #table-menu, .mb-menu, #add-menu, .cs-card,
    #doc-info, #chart-info, .brand, .topbar-actions, .topbar-menus, .topbar-right, .hint, .edge-tab, .stats, .toast, .findbar,
    .cm-lp-picbar, .cm-lp-altbar, .crop-bar, #toolbar, #toolstrip, #ctxbar, #glassdev) {
  --line-card: rgba(0, 0, 0, 0.08);
  --line-soft: rgba(0, 0, 0, 0.13);
  --rim-control: inset 0 1px 0 rgb(255 255 255 / 0.9), inset 0 0 0 0.5px rgb(0 0 0 / 0.18);
  --rim-control-hover: inset 0 1px 0 #fff, inset 0 0 0 0.5px rgb(0 0 0 / 0.26);
  --hl-fill: rgb(255 255 255 / 0.9);
  --hl-rim: inset 0 0 0 0.5px rgb(0 0 0 / 0.23), 0 1px 3px rgb(0 0 0 / 0.115);   /* (+44%) */
  --rim-tile: inset 0 1px 0 rgb(255 255 255 / 0.9), inset 0 0 0 0.5px rgb(0 0 0 / 0.1);
  --frame-rim: inset 0 0 0 0.5px rgb(0 0 0 / 0.1);
  --well-rim: inset 0 0 0 0.5px rgb(0 0 0 / 0.1);
  --key-rim: inset 0 -1px 0 rgb(0 0 0 / 0.06), 0 0 0 1px var(--line-soft);
  --primary-rim: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 2px 8px rgb(0 0 0 / 0.18);
  --primary-rim-hover: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 2px 8px rgb(0 0 0 / 0.18);
  --danger-rim: inset 0 0 0 0.5px rgb(224 67 74 / 0.3);
  --danger-row-rim: inset 0 0 0 0.5px rgb(224 67 74 / 0.3);
}
:root[data-theme="light"] :is(.surface, #panel, #raw, .sc-card, .kb-card, .prefs-card, #app-menu, .acc-menu, .sh-side, #table-menu, .mb-menu, #add-menu, .cs-card,
    #doc-info, #chart-info, .brand, .topbar-actions, .topbar-menus, .topbar-right, .hint, .edge-tab, .stats, .toast, .findbar,
    .cm-lp-picbar, .cm-lp-altbar, .crop-bar, #toolbar, #toolstrip, #ctxbar, #glassdev) {
  --rim: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 0.5px rgba(0, 0, 0, 0.16), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  --sheen: 0 0 #0000;
  --glass-sheet: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2));
  --shadow-float: var(--rim), var(--depth);
  --depth: 0 10px 28px rgba(20, 20, 30, 0.085), 0 1px 4px rgba(20, 20, 30, 0.04) !important;   /* one soft shadow in light mode, over any glass-panel Shadow */
}
:root[data-theme="light"] .edge-tab { background: var(--glass-sheet), var(--bg-card); }
:root[data-theme="light"] #shortcuts::before { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }   /* the Hold-⌥ sheet: the page well out of focus (the one exception) */
:root[data-theme="light"] * { text-shadow: none !important; }
:root[data-theme="light"] ::-webkit-scrollbar-thumb { background: #cdcdd4; background-clip: padding-box; }
:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #b6b6bf; background-clip: padding-box; }