/* ======================================================================== */
/*  dvs-airy.css -- the "light and airy" look of the whole app              */
/* ======================================================================== */
/*
 * Loaded on every page right after dvs.css, with class="theme-airy" set
 * statically on the page's <html> element. dvs.css stays the base (tokens,
 * layout, every component); this sheet only restyles it. Remove the class
 * from <html> (or the <link>) and the page falls back to plain dvs.css.
 *
 * THE DESIGN
 *   Frame    -- the top bar, module rail, tab strip and status strip lose
 *               their borders and sit on one off-white canvas (#f1f3f6).
 *               The work floats on it as a white sheet with 16px corners
 *               and a soft shadow. Tabs are pills; the open tab is a raised
 *               white pill carrying its module dot. Each rail row has a
 *               pastel tile in its module colour; the current row is raised
 *               and its tile fills solid.
 *   Columns  -- side columns (side panels, docking parameters, filter and
 *               search columns) are pale, and every group in them is a
 *               white rounded card (radius 14).
 *   Controls -- 36px high with 10px corners; the primary is a soft blue
 *               with a coloured glow; segmented controls are iOS-like (a
 *               well with the current option as a raised white pill).
 *   Type     -- the system UI face (system-ui / -apple-system / SF Pro,
 *               then IBM Plex Sans) with larger, heavier headings. Data
 *               stays legible: SMILES and command lines stay monospace,
 *               ids and numbers use tabular digits.
 *   Values   -- badges are pastel pills; score values are pills coloured
 *               by value band (green / blue / slate) through classes the
 *               panes add (cmp__score--*, rs-score--*, sr-tan--*,
 *               tl-pact--*); the colours are the shared --airy-band-*
 *               tokens defined once in part 00.
 *   Empty    -- friendly empty states: a lifted white card with a large
 *               pastel tile showing the pane's own rail picture.
 *   3D       -- the molecular viewports stay dark, drawn as rounded cards.
 *   Amber    -- reserved for licence and trial news; other cautions use a
 *               rust or slate tone. All text pairs measure 4.5:1 or more.
 *
 * WHY EVERY SELECTOR STARTS WITH html.theme-airy
 *   The panes inject their own <style> blocks at runtime, after this sheet,
 *   so a rule here with the same specificity as a pane rule would lose on
 *   source order. Each rule is therefore written as
 *
 *       html.theme-airy :where(.component)<rest of the selector it restyles>
 *
 *   :where() counts for nothing, so the rule weighs exactly what the dvs.css
 *   or pane rule it restyles weighs, plus (0,0,1): it wins over that rule
 *   whatever the load order, yet still loses to a pane rule that adds one
 *   more class (state variants such as .is-on, [hidden]-like toggles), so
 *   behaviour driven by state classes is never overridden by accident.
 *   The prefix also keeps the whole look switchable by one class.
 *   No !important anywhere, no @import, no network: system font stacks and
 *   data: URIs only.
 *
 * PARTS, in cascade order (later parts may refine earlier ones):
 *   00 base      tokens (--airy-*), type, the frame, shared components
 *   10 data      Compounds, Load file, Fragments, Notebook (and its plot)
 *   20 dock      Results, Docking setup, the dark 3D viewports
 *   30 analysis  Filter, Off-target, Target ligands, Library search,
 *                Sketcher, the property radar
 *   40 pages     Home, Projects, Account, sign-in, landing, hosted pages
 *                (page rules scoped by a pg-* class on <body>)
 *
 * Hooks this sheet relies on, added in JS or markup (classes and data-
 * attributes only; nothing was removed, renamed or reordered): data-mod and
 * --glyph on rail rows and "+" menu rows (shell.js); the score band classes
 * above; cmp__wide, load__stat, nb__group.is-current; dk-sec--joined,
 * rs-delta--up/down; dvsr-* on the radar's SVG parts; pg-* on each page's
 * <body>.
 */


/* ====================================================================== */
/*  Theme "airy" -- part 00: tokens, type, the frame, shared components.  */
/*                                                                         */
/*  Light and airy: the frame (top bar, rail, tab strip, status strip)     */
/*  sits borderless on one off-white canvas, and the work floats on it as  */
/*  a white rounded sheet. Inside the sheet, side columns are pale and     */
/*  their sections are white rounded cards. Controls are 36px with 10px    */
/*  corners, the primary is a soft blue with a coloured glow, segmented    */
/*  controls are iOS-like, module colours become pastel tiles, and type is */
/*  the system UI face with larger, heavier headings. Data stays legible:  */
/*  SMILES and command lines stay monospace, ids and numbers use tabular   */
/*  digits. Amber is licence and trial only; the 3D viewports stay dark.   */
/*                                                                         */
/*  Selector recipe (every rule):                                          */
/*                                                                         */
/*      html.theme-airy :where(.component)<the rest of the dvs selector>   */
/*                                                                         */
/*  :where() wraps exactly one class, so each rule is the dvs.css rule it  */
/*  mirrors plus (0,0,1): it beats dvs.css and a same-selector pane rule   */
/*  whatever the load order, and still loses to a pane tweak that adds a   */
/*  class. Most of the look comes from the token block, so this part sets  */
/*  as few properties per shared class as it can: a property set here on   */
/*  .btn or .badge would also beat every single-class pane tweak of it.    */
/*  Where a base rule sets what a dvs variant sets, the variant is         */
/*  restated right after it.                                               */
/*                                                                         */
/*  No !important, no network: system font stacks, data: URIs only.        */
/* ====================================================================== */

/* ====================================================================== */
/*  Tokens                                                                 */
/* ====================================================================== */

html.theme-airy {
  /* ---- new: the frame and the sheet ---------------------------------- */
  --airy-canvas: #f1f3f6;          /* behind everything: the frame */
  --airy-canvas-hover: #e7eaef;    /* a row or tab hovered on the canvas */
  --airy-canvas-press: #dfe3e9;
  --airy-rail-hover: var(--airy-canvas-hover);   /* the prototype's name */
  --airy-well: #eceff3;            /* segmented-control well, progress track */
  --airy-head: #fafbfc;            /* table heads */
  --airy-sheet-radius: 16px;
  --airy-card-radius: 14px;
  --airy-ring: 0 0 0 1px rgba(16, 24, 40, .07);
  /* A card: ring plus a soft lift. The ring stands in for a border where an
     inline style can remove a border (Filter's sections). */
  --airy-card: 0 0 0 1px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04), 0 2px 10px -4px rgba(16, 24, 40, .08);
  --airy-card-lg: 0 0 0 1px rgba(16, 24, 40, .05), 0 2px 4px rgba(16, 24, 40, .03), 0 12px 32px -12px rgba(16, 24, 40, .14);
  /* The same lifts without a ring, for things that keep a 1px border. */
  --airy-float: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 10px -4px rgba(16, 24, 40, .08);
  --airy-float-lg: 0 2px 4px rgba(16, 24, 40, .03), 0 12px 32px -12px rgba(16, 24, 40, .14);
  /* The work sheet on the canvas. */
  --airy-sheet: 0 0 0 1px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .05), 0 16px 40px -20px rgba(16, 24, 40, .18);
  /* A raised white thing on the canvas: active rail row, set chip, avatar. */
  --airy-lift: 0 0 0 1px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px -4px rgba(16, 24, 40, .12);
  /* Tighter, for the tab strip, which clips anything taller. */
  --airy-lift-sm: 0 0 0 1px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .07), 0 2px 6px -2px rgba(16, 24, 40, .10);
  /* The primary's coloured glow, at rest and hovered; the destructive one. */
  --airy-glow: 0 1px 2px rgba(37, 99, 235, .22), 0 6px 14px -6px rgba(37, 99, 235, .55);
  --airy-glow-hover: 0 1px 2px rgba(37, 99, 235, .25), 0 8px 18px -6px rgba(37, 99, 235, .60);
  --airy-glow-danger: 0 1px 2px rgba(180, 35, 24, .20), 0 6px 14px -6px rgba(180, 35, 24, .45);
  --airy-sheen: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0));

  /* The three tones of a score pill, by value band, for the panes' own
     band classes (Compounds .cmp__score--*, Results .rs-score--*). Text on
     its fill: hi 6.1:1, mid 5.4:1, lo 6.9:1. Green says "a strong score",
     never "passed a filter": the pill shape and the number tell them
     apart. */
  --airy-band-hi-bg: #e8f6ee;
  --airy-band-hi-ink: #12683f;
  --airy-band-hi-line: #bfe3cf;
  --airy-band-mid-bg: var(--accent-tint);
  --airy-band-mid-ink: var(--accent-dark);
  --airy-band-mid-line: var(--accent-line);
  --airy-band-lo-bg: #f1f3f6;
  --airy-band-lo-ink: #475467;
  --airy-band-lo-line: #dde1e8;

  /* ---- the dvs tokens, re-tuned ------------------------------------ */

  /* One friendlier blue. --accent marks things, --accent-strong fills the
     primary (white label 5.2:1), --accent-dark is text and links (6.1:1 on
     white, 5.4:1 on --accent-tint). */
  --accent: #3478f6;
  --accent-dark: #1d5bd0;
  --accent-light: #5ac8fa;
  --accent-tint: #edf3fe;
  --accent-tint-2: #e2ebfd;
  --accent-line: #c6d8fb;
  --accent-strong: #2563eb;
  --accent-hover: #1d4fd8;
  --accent-press: #1a44b8;

  /* Ink. --muted 5.8:1 on white, 5.2:1 on the canvas, 4.8:1 on a hovered
     canvas row. --faint is placeholders only (4.6:1, so a placeholder is
     still readable text), --disabled disabled controls only. */
  --ink: #101828;
  --ink-2: #344054;
  --ink-3: #475467;
  --muted: #5f6675;
  --disabled: #a5acb8;
  --faint: #666d7b;

  /* Surfaces. --surface-1 is the pale grey of the side columns INSIDE the
     sheet; the frame itself is --airy-canvas. */
  --surface: #ffffff;
  --surface-1: #f7f8fa;
  --surface-2: #f7f8fa;
  --surface-3: #f1f3f6;
  --surface-4: #ffffff;
  --canvas: #f1f3f6;
  --hover: #f1f3f6;
  --hover-row: #f7f9fc;
  --press: #e7eaef;
  --selected-row: #f5f8ff;

  --line: #e6e8ed;
  --line-2: #eceef2;
  --line-3: #f1f2f5;
  --line-strong: #dadde4;
  --line-control: #d0d5dd;
  --line-control-hover: #b3bac6;

  --pass: #16794a;
  --pass-tint: #ecf8f1;
  --pass-line: #c4e8d3;
  --fail: #b42318;
  --fail-tint: #fef3f2;
  --fail-line: #fbd3cd;
  --fail-hover: #912018;

  /* Licence and trial: amber, a touch warmer (5.5:1). */
  --amber-ink: #875b00;
  --amber-bg: #fff6e0;
  --amber-line: #f6dfa6;
  --amber-strong: #f0b429;
  --heat-med-bg: #fdf0cc;
  --heat-med-line: #f3dc9c;
  --heat-high-bg: #fde2dd;
  --heat-high-line: #f6c4bb;

  /* Type: the system UI face (SF Pro on a Mac), the bundled IBM Plex Sans
     where there is none. Data keeps a monospace. Nothing is downloaded. */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", system-ui, "IBM Plex Sans", "Segoe UI", "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "IBM Plex Mono", Consolas, monospace;
  /* The system face runs larger than Plex at the same size, so the ladder
     steps down a little at the bottom and up at the top. */
  --fs-2xs: 11.5px;
  --fs-xs: 12.5px;
  --fs-sm: 13.5px;
  --fs-md: 14.5px;
  --fs-base: 15.5px;
  --fs-lg: 18.5px;
  --fs-xl: 23px;
  --fs-2xl: 30px;
  --fs-3xl: 36px;
  --fs-display: 54px;

  --gut: 16px;
  --h-topbar: 58px;
  --h-tabs: 46px;
  --h-status: 30px;
  --h-row: 42px;
  --h-head: 36px;
  --h-bar: 52px;
  --w-rail-min: 64px;

  /* Bigger, rounder controls. */
  --h-control: 36px;
  --h-control-sm: 30px;
  --h-control-xs: 26px;
  --h-control-lg: 42px;
  --r-xs: 6px;
  --r-control: 10px;
  --r-card: 14px;
  --r-window: 18px;
  --r-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-pop: 0 0 0 1px rgba(16, 24, 40, .04), 0 4px 8px -2px rgba(16, 24, 40, .06), 0 18px 40px -10px rgba(16, 24, 40, .20);
  --shadow-modal: 0 0 0 1px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .08), 0 36px 80px -20px rgba(16, 24, 40, .32);
  --shadow-glass: 0 8px 24px -8px rgba(0, 0, 0, .5);
  --focus-ring: 0 0 0 4px rgba(52, 120, 246, .24);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: .16s;

  scrollbar-color: #cdd3dc transparent;
}

/* Each pane's own colour and pictogram, for its empty states (.empty__icon
   below): a pane that sets --glyph itself still wins. The pictograms are the
   rail's (shell.js RAIL_ICONS, Lucide ISC and three drawn there) as data:
   URIs, so nothing is fetched. */
html.theme-airy :where([data-pane="compounds"]) { --airy-mod: var(--mod-compounds); --airy-mod-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3C/svg%3E"); }
html.theme-airy :where([data-pane="fragments"]) { --airy-mod: var(--mod-fragments); --airy-mod-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5 16.5 8.75v7.5L10 20l-6.5-3.75v-7.5z'/%3E%3Cpath d='M16.5 8.75 20.5 6.5'/%3E%3Ccircle cx='21' cy='5' r='1.4'/%3E%3C/svg%3E"); }
html.theme-airy :where([data-pane="load"]) { --airy-mod: var(--mod-load); --airy-mod-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3Cpath d='M12 12v6'/%3E%3Cpath d='m15 15-3-3-3 3'/%3E%3C/svg%3E"); }
html.theme-airy :where([data-pane="notebook"]) { --airy-mod: var(--mod-notebook); --airy-mod-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4'/%3E%3Cpath d='M2 6h4'/%3E%3Cpath d='M2 10h4'/%3E%3Cpath d='M2 14h4'/%3E%3Cpath d='M2 18h4'/%3E%3Cpath d='M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z'/%3E%3C/svg%3E"); }
html.theme-airy :where([data-pane="sketcher"]) { --airy-mod: var(--mod-sketcher); --airy-mod-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E"); }
html.theme-airy :where([data-pane="search"]) { --airy-mod: var(--mod-search); --airy-mod-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.693V5'/%3E%3Cpath d='m22 22-1.875-1.875'/%3E%3Cpath d='M3 12a9 3 0 0 0 8.697 2.998'/%3E%3Cpath d='M3 5v14a9 3 0 0 0 9.28 2.999'/%3E%3Ccircle cx='18' cy='18' r='3'/%3E%3Cellipse cx='12' cy='5' rx='9' ry='3'/%3E%3C/svg%3E"); }
html.theme-airy :where([data-pane="ligands"]) { --airy-mod: var(--mod-ligands); --airy-mod-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v4a2 2 0 0 0 .2.9l1 2'/%3E%3Cpath d='M8 2v4a2 2 0 0 1-.2.9L3.2 16.6A2 2 0 0 0 5 19.5h3'/%3E%3Cpath d='M6.5 2h7'/%3E%3Cpath d='M17 11 21.3 13.5v5L17 21l-4.3-2.5v-5z'/%3E%3C/svg%3E"); }
html.theme-airy :where([data-pane="filter"]) { --airy-mod: var(--mod-filter); --airy-mod-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z'/%3E%3C/svg%3E"); }
html.theme-airy :where([data-pane="offtarget"]) { --airy-mod: var(--mod-offtarget); --airy-mod-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
html.theme-airy :where([data-pane="docking"]) { --airy-mod: var(--mod-setup); --airy-mod-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E"); }
html.theme-airy :where([data-pane="results"]) { --airy-mod: var(--mod-results); --airy-mod-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h9'/%3E%3Cpath d='M17 3.4 19.6 4.9v2.2L17 8.6l-2.6-1.5V4.9z'/%3E%3Cpath d='M3 12h11'/%3E%3Cpath d='M3 18h6'/%3E%3C/svg%3E"); }

/* ====================================================================== */
/*  Base type                                                              */
/* ====================================================================== */

html.theme-airy body { background: var(--airy-canvas); letter-spacing: -.003em; }
html.theme-airy ::selection { background: #cfe0fd; }
html.theme-airy ::-webkit-scrollbar-thumb { background-color: #cdd3dc; }
html.theme-airy ::-webkit-scrollbar-thumb:hover { background-color: #aab3c0; }

/* Numbers in the UI face with tabular figures: digits still line up down a
   column, without the mono width. Mono stays for SMILES and command lines. */
html.theme-airy :where(.num) { font-family: var(--sans); font-variant-numeric: tabular-nums; }

/* Section labels: small sans capitals, heavier, quieter tracking. */
html.theme-airy :where(.eyebrow) {
  font: 600 var(--fs-2xs)/1.1 var(--sans);
  letter-spacing: .06em;
}
html.theme-airy :where(.eyebrow).eyebrow--lg { font-size: var(--fs-xs); letter-spacing: .06em; }

html.theme-airy :where(.h1) { font-weight: 700; letter-spacing: -.028em; line-height: 1.15; }
html.theme-airy :where(.h2) { font-weight: 700; letter-spacing: -.022em; line-height: 1.22; }
html.theme-airy :where(.lede) { line-height: 1.6; }

/* ====================================================================== */
/*  Buttons                                                                */
/*  Height, corners, face and size come from the tokens through dvs.css's  */
/*  own .btn rule; only what tokens cannot say is set here.                */
/* ====================================================================== */

html.theme-airy :where(.btn) {
  gap: 7px; letter-spacing: -.005em;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* Pressed, it settles half a pixel. No hover shadow: panes draw flat
   buttons with .btn too, and a shadow round a transparent button floats. */
html.theme-airy :where(.btn):active:not(:disabled) { transform: translateY(.5px); }
html.theme-airy :where(.btn).btn--link:active:not(:disabled) { transform: none; }
/* Smaller buttons keep the same rounding in proportion. */
html.theme-airy :where(.btn--lg) { padding: 0 20px; border-radius: 12px; }
html.theme-airy :where(.btn--sm) { padding: 0 11px; border-radius: 9px; }
html.theme-airy :where(.btn--xs) { padding: 0 9px; border-radius: 7px; }
html.theme-airy :where(.btn--icon) { padding: 0; }
html.theme-airy :where(.btn).btn--link { border-radius: 4px; }

/* The primary: solid soft blue, a faint sheen and a coloured glow. */
html.theme-airy :where(.btn--primary) {
  font-weight: 600;
  background-image: var(--airy-sheen);
  box-shadow: var(--airy-glow), inset 0 1px 0 rgba(255, 255, 255, .16);
}
html.theme-airy :where(.btn--primary):hover:not(:disabled) {
  box-shadow: var(--airy-glow-hover), inset 0 1px 0 rgba(255, 255, 255, .16);
}
html.theme-airy :where(.btn--primary):active:not(:disabled) { box-shadow: var(--airy-glow); }
html.theme-airy :where(.btn--primary):focus-visible { box-shadow: var(--focus-ring), var(--airy-glow); }
/* Still the primary, plainly not available: 4.8:1 on its tint. */
html.theme-airy :where(.btn--primary):disabled {
  background: #e8effd; border-color: #d8e4fb; color: #48689f; box-shadow: none;
}

html.theme-airy :where(.btn--danger) { box-shadow: var(--airy-glow-danger); }
html.theme-airy :where(.btn--danger):disabled { box-shadow: none; }

/* Icon-only square buttons: a softer square. */
html.theme-airy :where(.icon-btn) { border-radius: 8px; }

/* ====================================================================== */
/*  Inputs, selects, ticks, sliders                                        */
/* ====================================================================== */

html.theme-airy :where(.input), html.theme-airy :where(.select) { box-shadow: var(--shadow-xs); }
html.theme-airy :where(.input):focus, html.theme-airy :where(.select):focus {
  border-color: var(--accent); box-shadow: var(--focus-ring);
}
html.theme-airy :where(.input):disabled, html.theme-airy :where(.select):disabled { box-shadow: none; }
html.theme-airy :where(.input)::placeholder { color: var(--faint); }
html.theme-airy :where(textarea.input) { padding: 8px 12px; }
html.theme-airy :where(.field) { gap: 7px; }
html.theme-airy :where(.field) > label { font-weight: 600; color: var(--ink-2); }

/* Native ticks and sliders in the primary's blue. */
html.theme-airy :where(input)[type="checkbox"], html.theme-airy :where(input)[type="radio"] {
  accent-color: var(--accent-strong); width: 16px; height: 16px;
}
html.theme-airy :where(.rs-slider), html.theme-airy :where(input)[type="range"].dvs-range {
  accent-color: var(--accent-strong);
}
html.theme-airy :where(.rs-slider__out) { font-family: var(--sans); font-variant-numeric: tabular-nums; }

/* The drawn tick: the native one's size, rounder, in the primary's blue. */
html.theme-airy :where(.check) { border-radius: 5px; border-color: #c4cad4; }
html.theme-airy :where(.check):hover { border-color: var(--accent); }
html.theme-airy :where(.check).is-on { background: var(--accent-strong); border-color: var(--accent-strong); }
html.theme-airy :where(.check).check--radio { border-radius: 50%; }
html.theme-airy :where(.check).check--radio.is-on { background: var(--surface); border-color: var(--accent-strong); }
html.theme-airy :where(.check).check--radio.is-on::after { background: var(--accent-strong); }

/* ====================================================================== */
/*  Pills, badges, messages, callouts                                      */
/* ====================================================================== */

/* The licence state in the top bar. Amber stays licence and trial only. */
html.theme-airy :where(.pill) {
  height: 28px; padding: 0 12px;
  font: 600 var(--fs-xs)/1 var(--sans); letter-spacing: .005em; font-variant-numeric: tabular-nums;
}
html.theme-airy :where(.chip-licence) { font: 600 11px/1 var(--sans); border-radius: 999px; padding: 4px 8px; }

/* Badges become soft pills; their tones stay the dvs ones (only geometry
   and face here, so a pane's own tone still applies). */
html.theme-airy :where(.badge) {
  height: 22px; padding: 0 9px; border-radius: 999px;
  font: 600 11.5px/1 var(--sans); letter-spacing: .01em; font-variant-numeric: tabular-nums;
}
html.theme-airy :where(.badge).badge--caps { font-size: 10.5px; letter-spacing: .06em; }
/* In a module's colour: a pastel fill, no edge. */
html.theme-airy :where(.badge).badge--mod {
  border-color: transparent;
  background: color-mix(in srgb, var(--glyph, var(--muted)) 13%, #fff);
  color: color-mix(in srgb, var(--glyph, var(--ink-3)) 72%, var(--ink));
}

html.theme-airy :where(.msg) { line-height: 1.5; }
/* A tinted rounded note. Its 3px rule stays (a note is not the section's
   content) but is drawn inside, so it follows the rounded corner. */
html.theme-airy :where(.callout) {
  border-radius: 12px; padding: 12px 14px 12px 16px; gap: 10px;
  border-left-width: 1px; box-shadow: inset 3px 0 0 var(--line-strong);
}
html.theme-airy :where(.callout--info) { box-shadow: inset 3px 0 0 var(--accent); }
html.theme-airy :where(.callout--ok) { box-shadow: inset 3px 0 0 var(--pass); }
html.theme-airy :where(.callout--err) { box-shadow: inset 3px 0 0 var(--fail); }
html.theme-airy :where(.callout--amber) { box-shadow: inset 3px 0 0 var(--amber-strong); }
/* The one big figure of a section. */
html.theme-airy :where(.stat-big) {
  font: 700 40px/1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
html.theme-airy :where(.loading) { font-family: var(--sans); }

/* ====================================================================== */
/*  Cards                                                                  */
/*  Before the menus: shell menus are "card menu", and the menu's shadow   */
/*  must win.                                                              */
/* ====================================================================== */

/* No border-colour here: account's licence banners colour a .card's edge. */
html.theme-airy :where(.card) { box-shadow: var(--airy-float); }
html.theme-airy :where(.card__pad) { padding: 18px 22px; }

/* ====================================================================== */
/*  The frame: canvas, top bar, chips                                      */
/* ====================================================================== */

html.theme-airy :where(.shell) { background: var(--airy-canvas); }

html.theme-airy :where(.topbar) {
  background: transparent; border-bottom: 0;
  padding: 0 18px; gap: 12px;
}
html.theme-airy :where(.topbar__home) { gap: 10px; border-radius: 10px; }
html.theme-airy :where(.topbar__logo) { width: 30px; height: 30px; flex-basis: 30px; }
html.theme-airy :where(.topbar__name) { font: 700 19px/1 var(--sans); letter-spacing: -.025em; }
html.theme-airy :where(.topbar__sep) { height: 22px; margin: 0 4px; background: var(--line-strong); }

/* The project: a breadcrumb on the canvas. */
html.theme-airy :where(.projchip) { height: 36px; padding: 0 10px; border-radius: 10px; }
html.theme-airy :where(.projchip):hover { background: rgba(16, 24, 40, .05); }
html.theme-airy :where(.projchip)::before, html.theme-airy :where(.setchip)::before {
  font: 600 10.5px/1 var(--sans); letter-spacing: .07em; margin-right: 3px;
}
html.theme-airy :where(.projchip__name) { font: 600 var(--fs-md) var(--sans); letter-spacing: -.01em; }
html.theme-airy :where(.projchip__caret) { font-size: 9px; }

/* The set: the control, a raised white pill with its count. */
html.theme-airy :where(.setchip) {
  height: 36px; padding: 0 8px 0 12px; gap: 8px; border-radius: 12px;
  border-color: var(--line); box-shadow: var(--airy-lift);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
html.theme-airy :where(.setchip):hover {
  border-color: var(--line-strong);
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .07), 0 2px 4px rgba(16, 24, 40, .06), 0 8px 18px -6px rgba(16, 24, 40, .16);
}
html.theme-airy :where(.setchip):focus-visible { box-shadow: var(--focus-ring), var(--airy-lift); }
html.theme-airy :where(.setchip__name) { font: 600 var(--fs-md) var(--sans); letter-spacing: -.01em; }
html.theme-airy :where(.setchip__count) {
  font: 600 12px/1 var(--sans); font-variant-numeric: tabular-nums;
  padding: 5px 9px; border: 0; border-radius: 999px;
  background: var(--accent-tint); color: var(--accent-dark);
}

html.theme-airy :where(.topbar__right) { gap: 12px; }
html.theme-airy :where(.avatar) {
  width: 34px; height: 34px; background: var(--surface); border-color: var(--line);
  box-shadow: var(--airy-lift);
  font: 600 var(--fs-xs)/1 var(--sans); color: var(--ink-2);
}
html.theme-airy :where(.avatar):hover { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }

/* ====================================================================== */
/*  The rail: on the canvas, pastel module tiles, the current module a     */
/*  raised row tinted in its own colour (shell.js sets --glyph and         */
/*  data-mod on every row).                                                */
/* ====================================================================== */

/* Scrolls on a short window instead of pushing "All projects" off the
   bottom (the rows are taller than before). */
html.theme-airy :where(.rail) {
  background: transparent; border-right: 0; padding: 4px 10px 12px;
  overflow-x: hidden; overflow-y: auto;
}
html.theme-airy :where(.rail__head) { padding: 0 0 8px; }
html.theme-airy :where(.rail) .rail__groups { gap: 18px; }
html.theme-airy :where(.rail) .rail__group { gap: 2px; }
/* Group names in sentence case ("Set", "Analysis", "AI-boosted docking"),
   on the tiles' left edge. */
html.theme-airy :where(.rail__group) > .eyebrow {
  padding: 0 8px 6px; text-transform: none; letter-spacing: 0;
  font: 600 12.5px/1.2 var(--sans); color: var(--muted);
}
html.theme-airy :where(.rail__group) > .eyebrow::first-letter { text-transform: uppercase; }

html.theme-airy :where(.rail) .rail__item {
  min-height: 40px; padding: 0 10px 0 8px; gap: 12px; border-radius: 12px;
  font: 500 var(--fs-md)/1.25 var(--sans); color: var(--ink-2);
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}
html.theme-airy :where(.rail) .rail__item:hover { background: var(--airy-canvas-hover); color: var(--ink); }
html.theme-airy :where(.rail) .rail__item:active { background: var(--airy-canvas-press); }
/* The current module: a raised white row washed with its own colour from
   the tile side, its tile solid, a bar in its colour at the rail's edge. */
html.theme-airy :where(.rail) .rail__item.is-active,
html.theme-airy :where(.rail) .rail__item.is-active:hover {
  background: var(--surface);
  background: linear-gradient(90deg, color-mix(in srgb, var(--glyph, var(--accent)) 11%, #fff), #fff 78%);
  color: var(--ink); font-weight: 600;
  box-shadow: var(--airy-lift);
}
html.theme-airy :where(.rail) .rail__item.is-active::before {
  left: -10px; top: 11px; bottom: 11px; width: 4px; border-radius: 0 4px 4px 0;
  background: var(--glyph, var(--accent));
}
html.theme-airy :where(.rail) .rail__item:focus-visible { box-shadow: var(--focus-ring); }
html.theme-airy :where(.rail) .rail__item.is-active:focus-visible { box-shadow: var(--focus-ring), var(--airy-lift); }
html.theme-airy :where(.rail) .rail__item.is-locked,
html.theme-airy :where(.rail) .rail__item.is-locked:hover { background: none; color: var(--muted); box-shadow: none; }
html.theme-airy :where(.rail) .rail__item.is-locked:hover .rail__glyph { background: #e6e9ee; }
html.theme-airy :where(.rail__label) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The module glyph: a pastel tile with the picture in the module colour. */
html.theme-airy :where(.rail__glyph) {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px;
  background: #eef1f5;
  background: color-mix(in srgb, var(--glyph, var(--muted)) 14%, #fff);
  color: var(--glyph, var(--ink-3));
  color: color-mix(in srgb, var(--glyph, var(--ink-3)) 84%, #101828);
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .04);
  font: 700 11px/1 var(--sans);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
html.theme-airy :where(.rail__glyph).rail__glyph--icon { flex-basis: 30px; width: 30px; height: 30px; border-radius: 9px; }
html.theme-airy :where(.rail__glyph--icon) svg { width: 16px; height: 16px; stroke-width: 1.9; }
html.theme-airy :where(.rail) .rail__item:hover .rail__glyph {
  background: color-mix(in srgb, var(--glyph, var(--muted)) 20%, #fff);
}
html.theme-airy :where(.rail) .rail__item.is-active .rail__glyph {
  background: var(--glyph, var(--accent)); color: #fff;
  box-shadow: 0 3px 8px -3px var(--glyph, var(--accent));
}
html.theme-airy :where(.rail__item).is-locked .rail__glyph { background: #eceef2; color: var(--faint); box-shadow: none; }

/* The state dot, on the tile's corner, ringed in what is behind it. */
html.theme-airy :where(.rail) .rail__item > .dot {
  left: 31px; top: 3px; width: 9px; height: 9px;
  box-shadow: 0 0 0 2px var(--airy-canvas);
}
html.theme-airy :where(.rail) .rail__item:hover > .dot { box-shadow: 0 0 0 2px var(--airy-canvas-hover); }
html.theme-airy :where(.rail) .rail__item.is-active > .dot { box-shadow: 0 0 0 2px #fff; }
html.theme-airy :where(.dot).dot--empty { background: var(--surface); border-color: #b2bac6; }

html.theme-airy :where(.rail__value) {
  font: 500 var(--fs-xs) var(--sans); font-variant-numeric: tabular-nums;
  max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html.theme-airy :where(.rail) .rail__item.is-active .rail__value { color: var(--ink-3); }
html.theme-airy :where(.rail__value).rail__value--pass { color: var(--pass); }
html.theme-airy :where(.rail__value).rail__value--accent { color: var(--accent-dark); }
html.theme-airy :where(.rail__item) .chip-licence { margin-left: auto; }

/* The way out: a raised white button on the canvas. */
html.theme-airy :where(.rail__foot) { border-top: 0; padding: 14px 0 2px; gap: 10px; }
html.theme-airy :where(.rail__foot) a {
  min-height: 38px; padding: 0 12px; gap: 10px; border-radius: 12px;
  border-color: var(--line); background: var(--surface);
  box-shadow: var(--airy-lift); font-weight: 500; color: var(--ink-2);
}
html.theme-airy :where(.rail__foot) a:hover { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
html.theme-airy :where(.rail__foot-mark) { color: var(--muted); }
html.theme-airy :where(.rail__legend) { font: 400 var(--fs-2xs)/1.75 var(--sans); padding: 0 6px; }
html.theme-airy :where(.rail__legend) .bar { width: 4px; border-radius: 2px; }

html.theme-airy :where(.rail__toggle) { width: 32px; height: 32px; border-radius: 9px; }
html.theme-airy :where(.rail__toggle):hover { background: var(--airy-canvas-hover); }
html.theme-airy :where(.rail__toggle):focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Collapsed: a single column of tiles, the current one raised. */
html.theme-airy :where(.rail).is-min { padding-left: 8px; padding-right: 8px; }
html.theme-airy :where(.rail).is-min .rail__item { padding: 5px 0; min-height: 40px; }
html.theme-airy :where(.rail).is-min .rail__item.is-active::before { left: -8px; }
html.theme-airy :where(.rail).is-min .rail__item > .dot { left: auto; right: 6px; top: 3px; }
html.theme-airy :where(.rail).is-min .rail__groups { gap: 14px; }
html.theme-airy :where(.rail).is-min .rail__group { gap: 4px; }
html.theme-airy :where(.rail).is-min .rail__foot a { padding: 0; }

/* ====================================================================== */
/*  Tabs: pills on the canvas; the open one a raised white pill with its   */
/*  module dot.                                                            */
/* ====================================================================== */

html.theme-airy :where(.tabs) {
  align-items: center; gap: 4px; padding: 0 2px;
  background: transparent; border-bottom: 0;
}
html.theme-airy :where(.tab) {
  height: 34px; min-width: 104px; padding: 0 8px 0 12px; gap: 9px;
  border: 0; border-radius: 11px;
  font: 500 var(--fs-md) var(--sans); color: var(--ink-3);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
html.theme-airy :where(.tab):hover { background: rgba(16, 24, 40, .05); color: var(--ink); }
html.theme-airy :where(.tab).is-active {
  background: var(--surface); color: var(--ink); font-weight: 600;
  box-shadow: var(--airy-lift-sm);
}
html.theme-airy :where(.tab):focus-visible { box-shadow: 0 0 0 2px var(--accent); }
html.theme-airy :where(.tab).is-active:focus-visible { box-shadow: 0 0 0 2px var(--accent), var(--airy-lift-sm); }
/* The module marker: a dot with a pastel halo in the module colour. */
html.theme-airy :where(.tab)::before {
  flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(16, 24, 40, .06);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tab-mod, var(--muted)) 20%, transparent);
}
html.theme-airy :where(.tab__count) {
  padding: 3px 7px; border-radius: 999px;
  background: rgba(16, 24, 40, .06); color: var(--ink-3);
  font: 600 11.5px/1 var(--sans); font-variant-numeric: tabular-nums;
}
html.theme-airy :where(.tab).is-active .tab__count { background: var(--accent-tint); color: var(--accent-dark); }
html.theme-airy :where(.tab) > .dot { width: 7px; height: 7px; flex-basis: 7px; }
html.theme-airy :where(.tab__close) { width: 22px; height: 22px; flex-basis: 22px; border-radius: 7px; font-size: 17px; }
html.theme-airy :where(.tab__close):hover { background: rgba(16, 24, 40, .07); }
html.theme-airy :where(.tabs__add) {
  align-self: stretch; width: 46px; padding: 0 0 0 8px;
  color: var(--muted); font-size: 21px; font-weight: 400;
  background: linear-gradient(90deg, rgba(241, 243, 246, 0), var(--airy-canvas) 12px);
}
html.theme-airy :where(.tabs__add):hover { color: var(--accent-dark); }

/* ====================================================================== */
/*  The sheet: the work floats on the canvas.                              */
/* ====================================================================== */

html.theme-airy :where(.main) { padding-right: 12px; }
html.theme-airy :where(.main__panes) {
  background: var(--surface);
  border-radius: var(--airy-sheet-radius);
  box-shadow: var(--airy-sheet);
  overflow: hidden;
}
/* The fallback card when a pane's script fails. */
html.theme-airy :where(.pane-failed) { margin-top: 56px; }

/* ---- status strip: a quiet line on the canvas ------------------------ */

html.theme-airy :where(.status) {
  background: transparent; border-top: 0;
  font: 400 var(--fs-xs) var(--sans); font-variant-numeric: tabular-nums;
  padding: 0 20px; gap: 16px;
}
html.theme-airy :where(.status__job) { font-weight: 500; }
html.theme-airy :where(.status__job)::before { width: 8px; height: 8px; }
html.theme-airy :where(.status__job).is-idle { font-weight: 400; }
/* A running job is the one live thing down here: a tinted pill round the
   breathing dot. */
html.theme-airy :where(.status__job).is-running {
  height: 22px; padding: 0 10px 0 8px; border-radius: 999px;
  background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent-line);
}

/* ====================================================================== */
/*  Toolbars, segmented controls                                           */
/* ====================================================================== */

/* Height and padding come from the tokens and dvs.css; only the divider
   softens, so a pane's own toolbar padding still applies. */
html.theme-airy :where(.toolbar) { border-bottom-color: var(--line-2); }
html.theme-airy :where(.tb-sep)::before { background: var(--line); top: 8px; bottom: 8px; }

/* iOS-like: a soft well, the current option a raised white pill. */
html.theme-airy :where(.seg) {
  gap: 2px; padding: 3px; border-color: transparent; border-radius: 11px;
  background: var(--airy-well);
}
html.theme-airy :where(.seg) > button,
html.theme-airy :where(.seg) > .btn,
html.theme-airy :where(.seg) > .btn:hover:not(:disabled) {
  min-height: 28px; padding: 0 12px; border-radius: 8px;
  font: 500 var(--fs-sm)/1 var(--sans);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
html.theme-airy :where(.seg) > button:hover:not(:disabled):not(.is-on):not(.btn--primary) {
  background: rgba(255, 255, 255, .6); color: var(--ink);
}
html.theme-airy :where(.seg) > button.is-on,
html.theme-airy :where(.seg) > [aria-pressed="true"],
html.theme-airy :where(.seg) > .btn.btn--primary,
html.theme-airy :where(.seg) > .btn.btn--primary:hover:not(:disabled) {
  background: var(--surface); background-image: none; color: var(--ink); font-weight: 600;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .12), 0 0 0 .5px rgba(16, 24, 40, .06);
}
html.theme-airy :where(.seg) > button:focus-visible { box-shadow: var(--focus-ring); }

/* ====================================================================== */
/*  Menus and the set menu                                                 */
/* ====================================================================== */

html.theme-airy :where(.menu), html.theme-airy :where(.setmenu) {
  padding: 6px; border-color: var(--line-2); border-radius: 14px;
  box-shadow: var(--shadow-pop);
}
html.theme-airy :where(.menu__head), html.theme-airy :where(.setmenu__head) {
  font: 600 var(--fs-2xs)/1.35 var(--sans); letter-spacing: .06em; padding: 8px 10px 4px;
}
html.theme-airy :where(.menu__rule), html.theme-airy :where(.setmenu__rule) { margin: 5px 8px; }
html.theme-airy :where(.menu__item), html.theme-airy :where(.menu) .rail__item, html.theme-airy :where(.setmenu__item) {
  min-height: 34px; padding: 6px 10px; border-radius: 8px;
  font-family: var(--sans);
}
html.theme-airy :where(.menu__item):hover:not(:disabled),
html.theme-airy :where(.menu) .rail__item:hover:not(:disabled),
html.theme-airy :where(.setmenu__item):hover:not(:disabled) { background: var(--hover); }
/* A row that opens a module (the tab strip's "+" menu) carries the module's
   dot, as its tab will (shell.js sets data-mod and --glyph). */
html.theme-airy :where(.menu) .rail__item[data-mod]::before {
  content: ""; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--glyph, var(--muted));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--glyph, var(--muted)) 18%, transparent);
  margin: 0 4px 0 2px;
}
html.theme-airy :where(.setmenu__set) { border-radius: 9px; padding: 8px 10px; }
html.theme-airy :where(.setmenu__set).is-active { background: var(--accent-tint); }
html.theme-airy :where(.setmenu__mark) { font-weight: 700; }
html.theme-airy :where(.setmenu__name) { font-weight: 500; }
html.theme-airy :where(.setmenu__set).is-active .setmenu__name { font-weight: 600; color: var(--ink); }
html.theme-airy :where(.setmenu__count) { font: 500 var(--fs-xs) var(--sans); font-variant-numeric: tabular-nums; }
html.theme-airy :where(.setmenu__acts) { gap: 8px; padding-top: 5px; }

/* "Save to: [set]" and the set dialogs. */
html.theme-airy :where(.set-pick__select) { border-radius: 9px; }
html.theme-airy :where(.setdlg__list) { border-color: var(--line-2); border-radius: 12px; padding: 5px; gap: 2px; }
html.theme-airy :where(.setdlg__pick) { border-radius: 9px; padding: 7px 10px; }
html.theme-airy :where(.setdlg__meta) { font-family: var(--sans); font-variant-numeric: tabular-nums; }
html.theme-airy :where(.setdlg__pos) { font-family: var(--sans); font-weight: 700; font-variant-numeric: tabular-nums; }
html.theme-airy :where(.setdlg__tick) { gap: 10px; }

/* ====================================================================== */
/*  Explanations on demand: the ⓘ and the one popover                      */
/* ====================================================================== */

html.theme-airy :where(.sec-head) { gap: 7px; }
html.theme-airy :where(.info-i) {
  width: 17px; height: 17px; flex-basis: 17px;
  border-color: var(--line-control); font-family: var(--sans);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
html.theme-airy :where(.pop) { border-color: var(--line-2); border-radius: 12px; }
html.theme-airy :where(.pop).pop--text { padding: 10px 12px; max-width: 300px; line-height: 1.55; }
html.theme-airy :where(.pop).pop--fig { padding: 8px; }
html.theme-airy :where(.pop__cap) { font-family: var(--sans); font-weight: 500; padding: 4px 0 1px; }

/* ====================================================================== */
/*  Modals                                                                 */
/* ====================================================================== */

html.theme-airy :where(.modal__backdrop) { background: rgba(16, 24, 40, .30); }
html.theme-airy :where(.modal) { border-color: transparent; }
/* The licence/trial modal keeps its amber rule across the top. */
html.theme-airy :where(.modal).modal--amber { border-top-color: var(--amber-strong); }
html.theme-airy :where(.modal__body) { padding: 28px 28px 22px; gap: 16px; }
html.theme-airy :where(.modal__head) { gap: 8px; }
html.theme-airy :where(.modal__title) { font-weight: 700; letter-spacing: -.022em; line-height: 1.22; }
html.theme-airy :where(.modal__text) { line-height: 1.6; }
html.theme-airy :where(.modal__foot) {
  padding: 16px 28px; gap: 12px; background: var(--surface-1); border-top-color: var(--line-2);
}
html.theme-airy :where(.modal__foot) .right { gap: 10px; }
/* dvs steps a large button down to 36px in a modal's foot; its corner too. */
html.theme-airy :where(.modal__foot) .btn--lg { border-radius: var(--r-control); }
html.theme-airy :where(.modal__cancel) { min-height: 36px; border-radius: 10px; }
html.theme-airy :where(.options) { border-radius: 12px; border-color: var(--line-2); padding: 14px 16px; gap: 10px; }
html.theme-airy :where(.options__state) { font: 600 var(--fs-xs) var(--sans); }
html.theme-airy :where(.command) { border-radius: 10px; padding: 10px 14px; }
html.theme-airy :where(.command) button { border-radius: 7px; height: 26px; padding: 0 10px; font-family: var(--sans); font-weight: 500; }

/* ====================================================================== */
/*  Tables                                                                 */
/* ====================================================================== */

html.theme-airy :where(.tr--head) {
  background: var(--airy-head); border-bottom-color: var(--line);
  font: 600 var(--fs-2xs) var(--sans); letter-spacing: .05em; color: var(--muted);
}
html.theme-airy :where(.tr--head) .num { font-weight: 600; }
html.theme-airy :where(.tr--head).tr--head-tight { letter-spacing: .02em; }
html.theme-airy :where(.tr) .id {
  font-family: var(--sans); font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}

/* Structures on a rounded white plate that lifts with its row. */
html.theme-airy :where(.thumb) {
  border-radius: 12px; border-color: var(--line-2);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
html.theme-airy :where(.tr):hover .thumb { border-color: var(--line); box-shadow: 0 2px 8px -3px rgba(16, 24, 40, .14); }
html.theme-airy :where(.tr).is-active .thumb { box-shadow: none; }

html.theme-airy :where(.verdict) { height: 24px; padding: 0 10px; font: 600 var(--fs-xs)/1 var(--sans); }
html.theme-airy :where(.reason) { font-family: var(--sans); font-weight: 500; }
html.theme-airy :where(.table__more) { font-family: var(--sans); }

/* ---- the pager under a table ----------------------------------------- */

html.theme-airy :where(.pager) {
  min-height: 50px; padding: 8px var(--gut); gap: 12px;
  border-top-color: var(--line-2); background: var(--surface);
}
html.theme-airy :where(.pager__at), html.theme-airy :where(.pager__page) {
  font-family: var(--sans); font-variant-numeric: tabular-nums;
}
html.theme-airy :where(.pager__at) b { font-weight: 600; }
html.theme-airy :where(.pager__nav) { gap: 6px; }
html.theme-airy :where(.pager__btn) {
  min-width: 30px; border-radius: 9px; border-color: var(--line-control);
  font-family: var(--sans); box-shadow: var(--shadow-xs);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
html.theme-airy :where(.pager__btn):hover:not(:disabled) { background: var(--accent-tint); border-color: var(--accent-line); }
html.theme-airy :where(.pager__btn):disabled { box-shadow: none; }
html.theme-airy :where(.pager__size) { border-radius: 9px; font-family: var(--sans); }

/* ====================================================================== */
/*  Side panels: a pale column of white cards                              */
/* ====================================================================== */

html.theme-airy :where(.panel) { background: var(--surface-1); border-left-color: var(--line-2); }
html.theme-airy :where(.panel).panel--left { border-right-color: var(--line-2); }
html.theme-airy :where(.panel__head) { background: transparent; border-bottom: 0; }
html.theme-airy :where(.panel__title) { font: 700 16.5px/1.3 var(--sans); letter-spacing: -.015em; }
html.theme-airy :where(.panel__id) { font: 700 16.5px/1.3 var(--sans); letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
html.theme-airy :where(.panel__meta) { font: 500 var(--fs-xs) var(--sans); font-variant-numeric: tabular-nums; }
/* Each section a card. The edge is a ring, not a border: Filter sets
   border-bottom:0 inline on some of its sections. */
html.theme-airy :where(.panel__section) {
  margin: 10px 12px 0; padding: 14px 16px;
  border: 0; border-radius: var(--airy-card-radius);
  background: var(--surface); box-shadow: var(--airy-card);
}
html.theme-airy :where(.panel__section):last-child { margin-bottom: 12px; }
html.theme-airy :where(.panel__foot) {
  background: rgba(255, 255, 255, .92); border-top-color: var(--line-2);
  box-shadow: 0 -10px 24px -18px rgba(16, 24, 40, .3);
}

/* Key/value lines: values in the UI face with tabular digits. */
html.theme-airy :where(.kv) > span:last-child {
  font-family: var(--sans); font-weight: 500; font-variant-numeric: tabular-nums;
}
html.theme-airy :where(.kv).kv--rule { padding: 7px 0; }

html.theme-airy :where(.plate) { border-color: var(--line-2); border-radius: 12px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }

/* One compound's SMILES: a pale well, the string itself monospace. */
html.theme-airy :where(.smi-block) {
  border-radius: 12px; border-color: var(--line-2); background: var(--surface-1);
  padding: 9px 10px 11px 12px; gap: 6px;
}
html.theme-airy :where(.smi-block__label) { font: 600 var(--fs-2xs)/1 var(--sans); letter-spacing: .06em; }
html.theme-airy :where(.smi-block__note) { font-family: var(--sans); }
html.theme-airy :where(.smi-block__copy) {
  border-radius: 999px; padding: 2px 10px; border-color: var(--line);
  font: 600 12px/18px var(--sans); box-shadow: var(--shadow-xs);
}
html.theme-airy :where(.smi-block__text) { font-size: 13.5px; line-height: 1.6; }

/* ====================================================================== */
/*  Progress bars, meters, ranges, pickers                                 */
/* ====================================================================== */

html.theme-airy :where(.bar) { height: 7px; background: var(--airy-well); }
html.theme-airy :where(.bar).bar--lg { height: 10px; }
html.theme-airy :where(.bar__fill) {
  background: var(--accent-strong);
  background: linear-gradient(90deg, var(--accent-strong), #5b9bff);
  transition: width .3s var(--ease);
}
html.theme-airy :where(.meter) { gap: 12px; }
html.theme-airy :where(.meter__label), html.theme-airy :where(.meter__value) {
  font-family: var(--sans); font-variant-numeric: tabular-nums;
}
html.theme-airy :where(.meter__value) { font-weight: 600; }
html.theme-airy :where(.hist) { gap: 2px; }
html.theme-airy :where(.hist__bar) { border-radius: 3px 3px 0 0; }
html.theme-airy :where(.range__head) .name { font-weight: 600; }
html.theme-airy :where(.range__head) .vals { font-family: var(--sans); font-variant-numeric: tabular-nums; }
html.theme-airy :where(.range__inputs) input { border-radius: 8px; box-shadow: var(--shadow-xs); font-variant-numeric: tabular-nums; }
html.theme-airy :where(.elements) { gap: 6px; }
html.theme-airy :where(.element) { border-radius: 8px; font-family: var(--sans); font-weight: 500; }
html.theme-airy :where(.moi) { border-radius: 12px; padding: 8px; border-color: var(--line-2); }
html.theme-airy :where(.moi):hover { box-shadow: var(--airy-lift); }
html.theme-airy :where(.moi).is-on { box-shadow: 0 0 0 1px var(--accent) inset, 0 4px 12px -6px rgba(37, 99, 235, .45); }
html.theme-airy :where(.moi__n), html.theme-airy :where(.alert-row__count) {
  font-family: var(--sans); font-variant-numeric: tabular-nums;
}
html.theme-airy :where(.alert-row) { gap: 10px; }

/* ====================================================================== */
/*  Empty states: a lifted white card with a large pastel module tile,     */
/*  the module's own pictogram on it.                                      */
/* ====================================================================== */

html.theme-airy :where(.empty) {
  border-color: var(--line-2); border-radius: 18px;
  padding: 32px 32px 28px; gap: 12px;
  background: var(--surface); box-shadow: var(--airy-float-lg);
}
html.theme-airy :where(.empty).empty--center { margin-top: 56px; }
html.theme-airy :where(.empty__icon) {
  width: 56px; height: 56px; border-radius: 17px; margin-bottom: 4px;
  background: #eef3fe;
  background: color-mix(in srgb, var(--glyph, var(--airy-mod, var(--accent))) 14%, #fff);
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .04);
}
/* Without a pictogram (a workspace page) the mark is a rounded square;
   inside a pane it is that pane's picture, in its colour. */
html.theme-airy :where(.empty__icon)::before {
  width: 22px; height: 22px; border-radius: 7px;
  background: var(--glyph, var(--airy-mod, var(--accent)));
  background: color-mix(in srgb, var(--glyph, var(--airy-mod, var(--accent))) 88%, #101828);
}
html.theme-airy :where([data-pane]) .empty__icon::before {
  width: 28px; height: 28px; border-radius: 0;
  -webkit-mask: var(--airy-mod-icon) center / contain no-repeat;
          mask: var(--airy-mod-icon) center / contain no-repeat;
}
html.theme-airy :where(.empty__eyebrow) { color: color-mix(in srgb, var(--glyph, var(--airy-mod, var(--muted))) 60%, var(--ink-3)); }
html.theme-airy :where(.empty__title) { font: 700 20px/1.3 var(--sans); letter-spacing: -.02em; }
html.theme-airy :where(.empty__text) { line-height: 1.6; }
html.theme-airy :where(.empty__actions) { gap: 10px; margin-top: 8px; }

/* ====================================================================== */
/*  Dark viewports: the same dark colours, as a rounded media card. The    */
/*  glass tools, labels and menus on them are drawn by part 20 (docking),  */
/*  the only panes that have a viewport.                                   */
/* ====================================================================== */

html.theme-airy :where(.viewport) { border-radius: var(--airy-card-radius); }

/* The workspace frame (.wshell .wnav .wtop .wmain), the split sign-in
   frame and the public pages are drawn by part 40 (pages), on the same
   canvas and with the same tokens. */

/* ====================================================================== */
/*  Utilities, restated last (as in dvs.css) so a .t-* on a component this */
/*  part restyles still wins.                                              */
/* ====================================================================== */

html.theme-airy :where(.t-2xs) { font-size: var(--fs-2xs); }
html.theme-airy :where(.t-xs) { font-size: var(--fs-xs); }
html.theme-airy :where(.t-sm) { font-size: var(--fs-sm); }
html.theme-airy :where(.t-md) { font-size: var(--fs-md); }
html.theme-airy :where(.t-base) { font-size: var(--fs-base); }
html.theme-airy :where(.t-lg) { font-size: var(--fs-lg); }
html.theme-airy :where(.t-ink3) { color: var(--ink-3); }
html.theme-airy :where(.t-muted) { color: var(--muted); }
html.theme-airy :where(.lede).quiet, html.theme-airy :where(.panel__id).quiet { color: var(--muted); }


/* ====================================================================== */
/*  10-data — Compounds, Load file, Fragments, Notebook (and its plot)     */
/* ====================================================================== */
/*
 * The data screens of theme "airy". Every selector starts with
 * html.theme-airy and wraps one class in :where(), so a rule here is the
 * pane's own rule plus (0,1,1): it beats the CSS the panes inject at runtime
 * (dvs-pane-compounds-css, -load-, -fragments-, -notebook-) whatever the load
 * order, while a pane rule with more classes than the one it mirrors still
 * wins unless it is restated here. Where a pane rule carries extra classes
 * (states, `[data-done]`, `:not([data-mode="table"])`) the matching rule
 * below carries them too.
 *
 * Shared components (.btn, .tr, .thumb, .panel, .panel__section, .empty,
 * .badge, .seg, .menu, .callout ...) are the base part's. This part only
 * places them per pane, and styles the panes' own classes:
 *   cmp__*  fr-*  load__*  nb__*  pl__*  (and #vg-tooltip-element's look
 *   stays the notebook pane's own, which reads the theme's tokens).
 *
 * Hooks this part relies on, added in the pane JS for it:
 *   .cmp__score               every Score cell (Compounds table and panel)
 *   .cmp__score--hi|mid|lo    the value's band: pK >= 7, 6 to 7, < 6
 *   .cmp__score--none         no Score (a dash)
 *   .cmp__score--link         the value is a button into Results
 *   .nb__group.is-current     the navigator group of the open run
 *
 * Shadows and the pale column read the base part's --airy-* tokens, each
 * with the prototype's value as a fallback, through the --dt-* aliases
 * below; a dialog or a menu (outside the pane roots) spells them out.
 * Text colours were measured: every pair here is 4.5:1 or better.
 */

html.theme-airy :where([data-pane="compounds"]), html.theme-airy :where([data-pane="fragments"]),
html.theme-airy :where([data-pane="load"]), html.theme-airy :where([data-pane="notebook"]) {
  --dt-card: var(--airy-card, 0 0 0 1px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04), 0 2px 10px -4px rgba(16, 24, 40, .08));
  --dt-card-lg: var(--airy-card-lg, 0 0 0 1px rgba(16, 24, 40, .05), 0 2px 4px rgba(16, 24, 40, .03), 0 12px 32px -12px rgba(16, 24, 40, .14));
  --dt-lift: var(--airy-lift, 0 0 0 1px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px -4px rgba(16, 24, 40, .12));
  --dt-ring: 0 0 0 1px rgba(16, 24, 40, .07);
  --dt-pale: var(--surface-1, #f7f8fa);
  --dt-well: #f1f3f6;
}

/* ---------------------------------------------------------------------- */
/*  Empty screens                                                          */
/* ---------------------------------------------------------------------- */

/* The lifted card, its pastel tile and the module's pictogram on it are the
   base part's (keyed off [data-pane]). Here the empty screen only gets its
   pale column under the white toolbar, so that card floats on it as every
   other card here does. */
html.theme-airy :where(.cmp__empty), html.theme-airy :where(.fr-empty), html.theme-airy :where(.nb__empty) {
  background: var(--dt-pale);
  padding-bottom: 40px;
}

/* ====================================================================== */
/*  Compounds                                                              */
/* ====================================================================== */

/* ---- toolbar ----------------------------------------------------------- */

/* The set's name is what the button says: read as a name, not a setting. */
html.theme-airy :where(.cmp__setbtn).select { font-weight: 600; color: var(--ink); }
/* "0 selected" stays quiet; once something is ticked it is a blue pill. */
html.theme-airy :where(.cmp__count) {
  font: 500 var(--fs-xs)/1 var(--sans); font-variant-numeric: tabular-nums;
  padding: 6px 4px;
}
html.theme-airy :where(.cmp__count).is-some {
  padding: 6px 11px; border-radius: 999px;
  background: var(--accent-tint); color: var(--accent-dark); font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--accent-line);
}

/* ---- the coverage strip: one soft pill per step ------------------------ */

html.theme-airy :where(.cmp__steps) {
  gap: 8px; padding: 10px var(--gut) 10px;
  border-bottom: 0; background: var(--surface);
}
html.theme-airy :where(.cmp__step) {
  height: 30px; gap: 8px; padding: 0 13px 0 11px;
  border: 0; border-radius: 999px;
  background: var(--dt-well); color: var(--ink-3);
  font: 500 var(--fs-xs)/1 var(--sans); font-variant-numeric: tabular-nums;
}
html.theme-airy :where(.cmp__step)::before {
  flex-basis: 8px; width: 8px; height: 8px;
  border: 1.5px solid #9aa3b2; background: var(--surface);
}
html.theme-airy :where(.cmp__step)[data-done] {
  border: 0; background: var(--pass-tint); color: var(--pass);
}
html.theme-airy :where(.cmp__step)[data-done]::before {
  background: var(--pass); border-color: var(--pass);
  box-shadow: 0 0 0 3px rgba(22, 121, 74, .16);
}
html.theme-airy :where(.cmp__step-name) { font: 600 var(--fs-xs)/1 var(--sans); color: var(--ink-2); }
html.theme-airy :where(.cmp__step)[data-done] .cmp__step-name { color: var(--pass); }
/* "Run the missing 8" is set off from the count by a hairline. */
html.theme-airy :where(.cmp__steplink) {
  margin-left: 4px; padding: 2px 0 2px 10px;
  border-left: 1px solid rgba(16, 24, 40, .12);
  font: 600 var(--fs-xs)/1 var(--sans); color: var(--accent-dark);
}
html.theme-airy :where(.cmp__steplink):hover { color: var(--accent-hover); }
html.theme-airy :where(.cmp__steplink):focus-visible { border-radius: 6px; }

/* ---- notices: the descriptors offer and the after-a-change line -------- */

html.theme-airy :where(.cmp__notice).callout {
  margin: 10px var(--gut) 4px; padding: 8px 8px 8px 14px; gap: 12px;
}
html.theme-airy :where(.cmp__notice):not([hidden]) ~ .cmp__notice { margin-top: 0; }
html.theme-airy :where(.cmp__notice) .btn { min-height: 30px; padding: 0 12px; font-size: var(--fs-sm); border-radius: 9px; }
html.theme-airy :where(.cmp__close).icon-btn {
  width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px;
  font-size: 20px; line-height: 1;
}

/* ---- the table --------------------------------------------------------- */

/* Frozen columns: a soft fall-off instead of a hairline once the table has
   scrolled sideways under them. */
html.theme-airy :where(.cmp__hscrolled) .tr > .cmp__stick--id {
  box-shadow: 1px 0 0 var(--line-2), 10px 0 14px -12px rgba(16, 24, 40, .35);
}
html.theme-airy :where(.cmp__hscrolled) .tr--head > .cmp__stick--id.is-sorted {
  box-shadow: 1px 0 0 var(--line-2), 10px 0 14px -12px rgba(16, 24, 40, .35), inset 0 -2px 0 var(--accent);
}
html.theme-airy :where(.cmp__sort) { color: var(--accent-dark); font-size: 10px; margin-left: 4px; }
html.theme-airy :where(.table__more).table__more--link { font-family: var(--sans); font-weight: 500; }

/* Where a compound has been docked: a pastel pill, not an identifier. */
html.theme-airy :where(.cmp__screened) {
  height: 24px; padding: 0 10px; display: inline-flex; align-items: center;
  border: 0; border-radius: 999px;
  background: var(--accent-tint); color: var(--accent-dark);
  font: 600 var(--fs-xs)/1 var(--sans); letter-spacing: .01em;
}
html.theme-airy :where(.cmp__dash) { color: var(--faint); }

/* ---- Score pills, toned by the value's band ---------------------------- */

/* The band tones are the base part's (--airy-band-*, the same three every
   score pill uses; the prototype's values as fallbacks): green for 7 and up,
   the accent blue for 6 to 7, slate under 6. Text on its fill: 6.1, 5.4 and
   6.9 to 1. */
html.theme-airy :where(.cmp__score) {
  --sc-bg: var(--airy-band-mid-bg, var(--accent-tint)); --sc-ink: var(--airy-band-mid-ink, var(--accent-dark)); --sc-line: var(--airy-band-mid-line, var(--accent-line));
}
html.theme-airy :where(.cmp__score).cmp__score--hi { --sc-bg: var(--airy-band-hi-bg, #e8f6ee); --sc-ink: var(--airy-band-hi-ink, #12683f); --sc-line: var(--airy-band-hi-line, #bfe3cf); }
html.theme-airy :where(.cmp__score).cmp__score--mid { --sc-bg: var(--airy-band-mid-bg, var(--accent-tint)); --sc-ink: var(--airy-band-mid-ink, var(--accent-dark)); --sc-line: var(--airy-band-mid-line, var(--accent-line)); }
html.theme-airy :where(.cmp__score).cmp__score--lo { --sc-bg: var(--airy-band-lo-bg, #f1f3f6); --sc-ink: var(--airy-band-lo-ink, #475467); --sc-line: var(--airy-band-lo-line, #dde1e8); }

/* The pill is the cell itself, or, when the value opens its result, the
   button inside it. */
html.theme-airy :where(.cmp__score):not(.cmp__score--link):not(.cmp__score--none),
html.theme-airy :where(.cmp__score--link) > .cmp__scorelink,
html.theme-airy :where(.cmp__scorelink) {
  display: inline-flex; align-items: center; justify-content: flex-end;
  height: 26px; padding: 0 11px; margin: 0;
  border: 0; border-radius: 999px;
  background: var(--sc-bg, var(--accent-tint)); color: var(--sc-ink, var(--accent-dark));
  box-shadow: inset 0 0 0 1px var(--sc-line, var(--accent-line));
  font: 650 var(--fs-sm)/1 var(--sans); font-variant-numeric: tabular-nums;
  letter-spacing: -.005em; text-decoration: none;
}
/* In a table row: at the right of its column, centred on the row. */
html.theme-airy :where(.tr) > .cmp__score:not(.cmp__score--link):not(.cmp__score--none) {
  justify-self: end; align-self: center; margin-right: 6px;
}
html.theme-airy :where(.tr) > .cmp__score--link { align-self: center; padding-right: 6px; }
html.theme-airy :where(.tr) > .cmp__score--none { padding-right: 18px; }
/* A link reads as one: it lifts and deepens on hover. */
html.theme-airy :where(.cmp__score--link) > .cmp__scorelink { cursor: pointer; transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
html.theme-airy :where(.cmp__score--link) > .cmp__scorelink:hover {
  color: var(--sc-ink, var(--accent-dark)); text-decoration: none;
  box-shadow: inset 0 0 0 1.5px var(--sc-ink, var(--accent)), 0 4px 10px -6px rgba(16, 24, 40, .35);
}
html.theme-airy :where(.cmp__score--link) > .cmp__scorelink:focus-visible {
  border-radius: 999px; box-shadow: inset 0 0 0 1px var(--sc-line, var(--accent-line)), var(--focus-ring);
}
/* In the side panel's docking lines: a size down, centred on the line. */
html.theme-airy :where(.kv) > .cmp__score { align-self: center; }
html.theme-airy :where(.kv) > .cmp__score:not(.cmp__score--link):not(.cmp__score--none),
html.theme-airy :where(.kv) > .cmp__score--link > .cmp__scorelink { height: 24px; padding: 0 10px; }

/* ---- the compound panel ------------------------------------------------ */

/* The structure on its own white card at the top of the pale column. */
html.theme-airy :where(.cmp__depict).plate {
  height: 264px; flex: 0 0 264px; margin: 4px 12px 0;
  border: 0; border-radius: var(--r-card, 14px);
  background: var(--surface); box-shadow: var(--dt-card);
}
html.theme-airy :where(.cmp__depict) > .plate {
  font: 500 var(--fs-xs)/1 var(--sans); color: var(--muted); letter-spacing: .01em;
}
html.theme-airy :where(.cmp__pos) { font: 500 var(--fs-xs)/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--muted); }
/* The radar and the docking lines: a pale inset inside their section card. */
html.theme-airy :where(.cmp__subcard) {
  gap: 9px; margin-top: 6px; padding: 12px 14px;
  border: 0; border-radius: 12px; background: var(--dt-pale, #f7f8fa);
}
html.theme-airy :where(.cmp__subcard).cmp__subcard--fig { padding: 10px; background: var(--dt-pale, #f7f8fa); }
html.theme-airy :where(.cmp__subcard) > .eyebrow { margin-bottom: 0; }
html.theme-airy :where(.cmp__note) { font-size: var(--fs-sm); line-height: 1.55; }
/* A caution about the data ("recorded under a reused id", "repeats differ
   by 12-fold"): amber is the licence's colour, so a caution is a quiet slate
   note with a round "!" mark, as the Notebook words its own (.nb__warn). */
html.theme-airy :where(.cmp__note).cmp__note--warn {
  position: relative; margin: 8px 0 0; padding: 8px 12px 8px 36px;
  border-radius: 10px; background: var(--dt-well, #f1f3f6);
  color: var(--ink-2); font-weight: 500;
}
html.theme-airy :where(.cmp__note).cmp__note--warn::before {
  content: "!"; position: absolute; left: 11px; top: 8px;
  width: 17px; height: 17px; border-radius: 999px;
  background: var(--ink-3); color: var(--surface);
  font: 800 11px/17px var(--sans); text-align: center;
}
/* The "≈" after a value whose repeats disagree: the same slate, set by
   re-pointing the token its inline colour reads. */
html.theme-airy :where(.cmp__wide) { --amber-ink: var(--ink-3); font-weight: 700; }
html.theme-airy :where(.cmp__runs) { gap: 7px; margin-top: 8px; }
html.theme-airy :where(.cmp__val) { font-variant-numeric: tabular-nums; }

/* ---- the empty set ----------------------------------------------------- */

html.theme-airy :where(.cmp__emptylink) { font-weight: 500; color: var(--accent-dark); margin-left: 8px; }
html.theme-airy :where(.cmp__emptyversions) {
  gap: 14px; margin-top: 12px; padding: 14px 16px;
  border-top: 0; border-radius: 12px; background: var(--dt-pale, #f7f8fa);
}

/* ====================================================================== */
/*  Fragments                                                              */
/* ====================================================================== */

/* The SMILES box keeps the mono face of what is typed into it. */
html.theme-airy :where(.fr-add) { gap: 8px; }
html.theme-airy :where(.fr-status) { font-size: var(--fs-sm); }
html.theme-airy :where(.fr-added) {
  font: 500 var(--fs-sm)/1.2 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-3);
}
html.theme-airy :where([data-pane="fragments"]) .fr-idcell { gap: 8px; }
/* "in set": a fragment left in a set by an older build -- a quiet slate
   pill, a fact about where it is, not a warning. */
html.theme-airy :where(.fr-legacy).badge {
  background: var(--dt-well); color: var(--ink-3); border-color: transparent;
}

/* ====================================================================== */
/*  Load file                                                              */
/* ====================================================================== */

/* The steps are white cards floating on a pale column. */
html.theme-airy :where(.load__scroll) { background: var(--dt-pale); padding-bottom: 48px; }
html.theme-airy :where(.load__col) { max-width: 940px; padding: 28px var(--gut) 8px; gap: 18px; }
html.theme-airy :where(.load__card) {
  border: 0; border-radius: 16px;
  background: var(--surface); box-shadow: var(--dt-card-lg);
}
html.theme-airy :where(.load__cardhead) {
  min-height: 58px; gap: 12px; padding: 12px 20px;
  border-bottom: 1px solid var(--line-2); background: transparent;
}
html.theme-airy :where(.load__cardbody) { padding: 18px 20px 20px; gap: 14px; }
html.theme-airy :where(.load__title) { font: 700 17.5px/1.3 var(--sans); letter-spacing: -.018em; color: var(--ink); }

/* Small labels ("9 rows", "3 of 24 columns kept"): sans capitals, tabular. */
html.theme-airy :where(.load__step) {
  font: 600 var(--fs-2xs)/1.2 var(--sans); letter-spacing: .06em;
  font-variant-numeric: tabular-nums; color: var(--muted);
}
/* "step 1": a pastel pill in the module's colour, like its rail tile. */
html.theme-airy :where(.load__step).load__stepchip {
  height: 24px; padding: 0 10px; border-radius: 999px;
  background: #e7f2ee;
  background: color-mix(in srgb, var(--mod-load) 13%, #fff);
  color: #256b59;
  color: color-mix(in srgb, var(--mod-load) 80%, var(--ink));
  font: 700 11px/1 var(--sans); letter-spacing: .07em;
}
html.theme-airy :where(.load__stepchip).load__steplabel { align-self: flex-start; margin: 4px 0 0 4px; }
html.theme-airy :where(.load__stack) { gap: 18px; }
html.theme-airy :where(.load__group) { gap: 10px; }

/* The drop plate: a big soft target with the module's tile in it. */
html.theme-airy :where(.load__drop) {
  padding: 34px 24px 30px;
  border: 1.5px dashed #c5cdd8; border-radius: 16px;
  background: #f8fafc;
  font-size: var(--fs-md); color: var(--ink-2);
}
html.theme-airy :where(.load__drop)::before {
  width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 18px;
  -webkit-mask: none; mask: none;
  background: #e7f2ee url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23256b59' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3Cpath d='M12 12v6'/%3E%3Cpath d='m15 15-3-3-3 3'/%3E%3C/svg%3E") center / 26px 26px no-repeat;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .04), 0 8px 18px -10px rgba(37, 107, 89, .55);
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
html.theme-airy :where(.load__drop):hover, html.theme-airy :where(.load__drop).is-over {
  border-color: var(--accent); background: var(--accent-tint);
}
html.theme-airy :where(.load__drop):hover::before, html.theme-airy :where(.load__drop).is-over::before {
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d5bd0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3Cpath d='M12 12v6'/%3E%3Cpath d='m15 15-3-3-3 3'/%3E%3C/svg%3E") center / 26px 26px no-repeat;
  box-shadow: 0 0 0 1px var(--accent-line), 0 10px 22px -10px rgba(37, 99, 235, .55);
  transform: translateY(-2px);
}
html.theme-airy :where(.load__drop):focus-visible { border-color: var(--accent); box-shadow: var(--focus-ring); }
html.theme-airy :where(.load__drop) b { font-weight: 700; color: var(--ink); }
html.theme-airy :where(.load__drophint) {
  margin-top: 8px; font: 500 var(--fs-xs)/1.4 var(--sans); letter-spacing: .02em; color: var(--muted);
}

/* Queued files: white pills with a soft lift. */
html.theme-airy :where(.load__chips) { gap: 8px; }
html.theme-airy :where(.load__chip) {
  height: 34px; gap: 10px; padding: 0 5px 0 14px;
  border: 0; border-radius: 999px; background: var(--surface);
  box-shadow: var(--dt-lift); font: 600 var(--fs-sm)/1 var(--sans); color: var(--ink);
}
html.theme-airy :where(.load__chip) .mono {
  font: 500 var(--fs-xs)/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--muted);
}
html.theme-airy :where(.load__chip) button { width: 24px; height: 24px; color: var(--muted); }
html.theme-airy :where(.load__chip) button:hover { color: var(--fail); background: var(--fail-tint); }

/* Step 2: each file a card; its columns a soft inset table. */
html.theme-airy :where(.load__fname) { font: 700 var(--fs-md)/1.3 var(--sans); letter-spacing: -.01em; }
html.theme-airy :where(.load__fields) { gap: 16px 20px; }
html.theme-airy :where(.load__note) { color: var(--ink-3); line-height: 1.6; }
html.theme-airy :where(.load__cols), html.theme-airy :where(.load__skipped) {
  border: 0; border-radius: 12px; box-shadow: 0 0 0 1px var(--line);
}
html.theme-airy :where(.load__cols) .tr { padding: 0 12px; }
html.theme-airy :where(.load__cols) .tr.is-disabled { opacity: .55; }
html.theme-airy :where(.load__colname) { gap: 2px; }
html.theme-airy :where(.load__samples) { font-size: var(--fs-sm); color: var(--ink-3); }
html.theme-airy :where(.load__badge) { margin-left: 8px; }
html.theme-airy :where(.load__cardhead) .load__badge { margin-left: 0; }
html.theme-airy :where(.load__act) { gap: 14px; }
html.theme-airy :where(.load__btns) { gap: 8px; }

/* Step 3. */
html.theme-airy :where(.load__where) { gap: 12px; }
html.theme-airy :where(.load__name) { max-width: 360px; }

/* The toolbar's "active set: …" line, as a soft pill. */
html.theme-airy :where(.load__status).load__set {
  height: 32px; line-height: 32px; padding: 0 14px;
  border: 0; border-radius: 999px; background: var(--dt-well);
  font: 500 var(--fs-sm)/32px var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-2);
}
/* The import's own status line. */
html.theme-airy :where(.load__status) { font-size: var(--fs-md); font-weight: 500; }
html.theme-airy :where(.load__status).load__status--ok { color: var(--pass); }
html.theme-airy :where(.load__status).load__status--err { color: var(--fail); }

/* What happened: the counts as small stat tiles. */
html.theme-airy :where(.load__result) { gap: 14px; }
html.theme-airy :where(.load__stats) {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; max-width: none;
}
html.theme-airy :where(.load__stats) > .kv.load__stat {
  flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 6px;
  padding: 12px 16px; border: 0; border-radius: 12px; background: var(--dt-pale, #f7f8fa);
}
html.theme-airy :where(.load__stats) > .load__stat:last-child { border-bottom: 0; }
html.theme-airy :where(.load__stats) > .load__stat > span:first-child {
  max-width: none; font: 600 var(--fs-2xs)/1.2 var(--sans); letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
html.theme-airy :where(.load__stats) > .load__stat > span:last-child {
  text-align: left; font: 600 var(--fs-md)/1.45 var(--sans); color: var(--ink);
}
/* A count reads as the tile's figure. */
html.theme-airy :where(.load__stats) > .load__stat.load__stat--num > span:last-child {
  font: 700 22px/1.15 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}

/* ====================================================================== */
/*  Notebook                                                               */
/* ====================================================================== */

/* ---- toolbar bits ------------------------------------------------------ */

html.theme-airy :where(.nb__save) { font: 500 var(--fs-xs)/1 var(--sans); gap: 7px; }
html.theme-airy :where(.nb__save)::before { width: 7px; height: 7px; flex-basis: 7px; }
html.theme-airy :where(.nb__count), html.theme-airy :where(.nb__meta) {
  font-family: var(--sans); font-variant-numeric: tabular-nums;
}
/* Buttons drawn as links or squares, which the base .btn would grow. */
html.theme-airy :where(.nb__toggle).btn { min-height: 0; padding: 0; box-shadow: none; font-size: var(--fs-sm); font-weight: 600; }
html.theme-airy :where(.nb__more).btn { font-size: var(--fs-md); }
html.theme-airy :where(.nb__x) {
  min-height: 0; padding: 2px 6px; box-shadow: none; border-radius: 7px;
  font-size: 16px; line-height: 1;
}
html.theme-airy :where(.nb__x).icon-btn { width: 30px; height: 30px; padding: 0; border-radius: 9px; }

/* ---- the navigator: a pale column of experiment cards ------------------- */

html.theme-airy :where(.nb__side).panel { padding: 12px 10px 16px; }
html.theme-airy :where(.nb__group) {
  margin: 0 0 10px; padding: 6px;
  border-radius: var(--r-card, 14px); background: var(--surface); box-shadow: var(--dt-card);
}
/* The experiment whose run is open: ringed in the accent. */
html.theme-airy :where(.nb__group).is-current {
  box-shadow: 0 0 0 1.5px var(--accent-line), 0 1px 2px rgba(16, 24, 40, .04), 0 6px 16px -8px rgba(37, 99, 235, .32);
}
/* Computed columns: their own card, set apart by space rather than a rule. */
html.theme-airy :where(.nb__group).nb__group--derived { margin-top: 16px; padding-top: 6px; border-top: 0; }
html.theme-airy :where(.nb__navhead) { padding: 6px 8px 6px; }
html.theme-airy :where(.nb__navnote) { padding: 10px 8px; line-height: 1.55; }
html.theme-airy :where(.nb__exprow) { border-radius: 10px; }

html.theme-airy :where(.nb__exp) {
  min-height: 36px; gap: 8px; padding: 6px 8px;
  border-radius: 10px; font: 600 var(--fs-md)/1.3 var(--sans); color: var(--ink);
}
html.theme-airy :where(.nb__exp):hover { background: var(--dt-well); color: var(--ink); }
html.theme-airy :where(.nb__exp).is-active, html.theme-airy :where(.nb__exp).is-active:hover { color: var(--ink); font-weight: 700; }
html.theme-airy :where(.nb__exp).is-active:hover { background: var(--dt-well); }
html.theme-airy :where(.nb__exp).nb__exp--static,
html.theme-airy :where(.nb__exp).nb__exp--static:hover { font-weight: 500; color: var(--ink-2); background: none; }
/* The readout's unit ("Score", "nM", "ratio") as a small pill. */
html.theme-airy :where(.nb__exp) .nb__unit {
  padding: 3px 8px; border-radius: 999px; background: var(--dt-well);
  font: 600 11.5px/1.1 var(--sans); color: var(--ink-3); letter-spacing: .01em;
}
html.theme-airy :where(.nb__glyph) { font-weight: 700; color: var(--ink-3); }

/* Runs: dates in tabular figures; the open one raised. */
html.theme-airy :where(.nb__run) {
  min-height: 32px; gap: 8px; padding: 4px 8px 4px 22px;
  border-radius: 9px; box-shadow: none;
  font: 500 var(--fs-sm)/1.25 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-3);
}
html.theme-airy :where(.nb__run):hover { background: var(--dt-well); color: var(--ink); }
html.theme-airy :where(.nb__run).is-active {
  background: var(--accent-tint); color: var(--accent-dark); font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
html.theme-airy :where(.nb__run).is-active:hover { background: var(--accent-tint-2); }
/* Outside the table the open run is only outlined (the pane's own rule). */
html.theme-airy :where([data-pane="notebook"]):not([data-mode="table"]) .nb__run.is-active {
  background: none; box-shadow: inset 0 0 0 1px var(--accent-line);
}
html.theme-airy :where(.nb__run).nb__runrow, html.theme-airy :where(.nb__run).nb__runrow:hover {
  min-height: 0; padding: 0; gap: 0; background: none; box-shadow: none;
}
html.theme-airy :where(.nb__run) .nb__n {
  padding: 2px 7px; border-radius: 999px; background: var(--dt-well);
  font: 600 11.5px/1.2 var(--sans); color: var(--ink-3);
}
html.theme-airy :where(.nb__run) .nb__n:empty { display: none; }
html.theme-airy :where(.nb__run).is-active .nb__n { background: var(--surface); color: var(--accent-dark); }
html.theme-airy :where(.nb__run).nb__add {
  min-height: 30px; padding: 4px 8px 4px 22px; box-shadow: none;
  font: 600 var(--fs-sm)/1.3 var(--sans); color: var(--accent-dark);
}
html.theme-airy :where(.nb__run).nb__add:hover { background: var(--accent-tint); color: var(--accent-dark); text-decoration: none; }
html.theme-airy :where(.nb__dot) { width: 7px; height: 7px; flex-basis: 7px; }
html.theme-airy :where(.nb__devmark) { font-weight: 700; color: var(--accent-dark); }
html.theme-airy :where(.nb__cov) { padding: 4px 8px 4px 22px; font-size: var(--fs-xs); }
html.theme-airy :where(.nb__none) { padding: 4px 8px 6px 22px; }

/* ---- the run header (Run Info) and its cards ---------------------------- */

html.theme-airy :where(.nb__head) {
  gap: 12px; padding: 16px var(--gut) 16px;
  border-bottom: 1px solid var(--line-2); background: var(--surface);
}
html.theme-airy :where(.nb__title) { font: 700 21px/1.25 var(--sans); letter-spacing: -.022em; }
html.theme-airy :where(.nb__pill) {
  height: 26px; padding: 0 11px; border: 0; border-radius: 999px;
  background: var(--dt-well); color: var(--ink-2);
  font: 600 var(--fs-xs)/1 var(--sans); font-variant-numeric: tabular-nums;
}
html.theme-airy :where(.nb__sub) {
  font: 700 var(--fs-2xs)/1 var(--sans); letter-spacing: .07em; color: var(--muted);
}
html.theme-airy :where(.nb__cards) { gap: 14px; }
html.theme-airy :where(.nb__card) {
  gap: 12px; padding: 16px 18px;
  border: 0; border-radius: var(--r-card, 14px); background: var(--surface);
  box-shadow: var(--dt-card);
}
html.theme-airy :where(.nb__card).nb__card--run { background: var(--dt-pale, #f7f8fa); box-shadow: inset 0 0 0 1px var(--line-2); }
html.theme-airy :where(.nb__grid) .field > label { font: 600 var(--fs-sm)/1.3 var(--sans); color: var(--ink-3); }
html.theme-airy :where(.nb__tick) { gap: 9px; }
html.theme-airy :where(.nb__dockrun) { color: var(--ink-3); }
html.theme-airy :where(.nb__link) { font-weight: 600; color: var(--accent-dark); }
html.theme-airy :where(.nb__explain) { line-height: 1.6; }
html.theme-airy :where(.nb__protocol) { border-radius: 12px; }

/* ---- the run table ---------------------------------------------------- */

html.theme-airy :where(.nb__strip) {
  min-height: 56px; gap: 10px; padding: 10px var(--gut);
  border-bottom: 1px solid var(--line-2); background: var(--surface);
}
/* The value a person types: the same rounded field as every input, the
   figures in the UI face with tabular digits. */
html.theme-airy :where(.nb__val) {
  height: 34px; padding: 0 10px;
  border-color: var(--line-control); border-radius: 10px;
  box-shadow: var(--shadow-xs);
  font: 500 var(--fs-md)/1 var(--sans); font-variant-numeric: tabular-nums;
}
html.theme-airy :where(.nb__val):focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
html.theme-airy :where(.nb__val).is-dirty { background: #f5f8ff; box-shadow: inset 3px 0 0 var(--accent); }
html.theme-airy :where(.nb__val).is-dirty:focus { box-shadow: inset 3px 0 0 var(--accent), var(--focus-ring); }
html.theme-airy :where(.nb__val).is-bad {
  background: var(--fail-tint); border-color: var(--fail-line); color: var(--fail);
  box-shadow: inset 3px 0 0 var(--fail);
}
html.theme-airy :where(.nb__val).is-bad:focus { border-color: var(--fail); box-shadow: inset 3px 0 0 var(--fail), 0 0 0 4px rgba(180, 35, 24, .16); }
html.theme-airy :where(.nb__small) {
  height: 34px; border-radius: 10px;
  font: 400 var(--fs-sm)/1 var(--sans); font-variant-numeric: tabular-nums;
}
html.theme-airy :where(.nb__small).nb__num { text-align: right; }
html.theme-airy :where(.nb__hv) { padding-right: 12px; }
html.theme-airy :where(.nb__prop) { color: var(--ink-3); }
/* "not in set" under an id: a small slate pill. */
html.theme-airy :where(.nb__outside) {
  width: max-content; margin-top: 4px; padding: 3px 8px; border-radius: 999px;
  background: var(--dt-well); color: var(--ink-3);
  font: 700 10.5px/1.1 var(--sans); letter-spacing: .06em;
}
html.theme-airy :where(.nb__ctype) {
  padding: 3px 7px; border-color: transparent; border-radius: 999px; background: var(--dt-well);
  font: 600 var(--fs-2xs)/1 var(--sans);
}
html.theme-airy :where(.nb__ctype).is-num { border-color: transparent; }

/* ---- the compound panel ------------------------------------------------ */

html.theme-airy :where(.nb__depict) {
  height: 264px; flex: 0 0 264px; margin: 4px 12px 0;
  border: 0; border-radius: var(--r-card, 14px);
  background: var(--surface); box-shadow: var(--dt-card); overflow: hidden;
}
html.theme-airy :where(.nb__depict) .plate {
  border: 0; background: none; padding: 0;
  font: 500 var(--fs-xs)/1 var(--sans); color: var(--muted);
}
html.theme-airy :where(.nb__ppos) { font: 500 var(--fs-xs)/1 var(--sans); font-variant-numeric: tabular-nums; }
/* Notebook nests sections inside one (.nb__pbody is itself a section): the
   inner ones are rows of that card, not cards of their own. */
html.theme-airy :where(.nb__pbody) > .panel__section {
  margin: 0; padding: 12px 0; border-radius: 0; background: none; box-shadow: none;
  border-bottom: 1px solid var(--line-2);
}
html.theme-airy :where(.nb__pbody) > .panel__section:last-child { margin: 0; border-bottom: 0; }
html.theme-airy :where(.nb__plede) { padding: 14px 0; }
html.theme-airy :where(.nb__histlist) { gap: 8px; }
html.theme-airy :where(.nb__hist) > span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- the timeline: a pale column of white entry cards ------------------- */

html.theme-airy :where(.nb__log) { padding: 14px 20px 36px; background: var(--dt-pale); }
/* Its controls on one white bar. */
html.theme-airy :where(.nb__logbar) {
  gap: 10px; padding: 9px 12px; margin-bottom: 4px;
  border-radius: var(--r-card, 14px); background: var(--surface); box-shadow: var(--dt-card);
}
html.theme-airy :where(.nb__chk) { gap: 8px; }
/* The day: small sans capitals on a hairline. */
html.theme-airy :where(.nb__day) {
  gap: 12px; padding: 22px 2px 10px;
  font: 700 var(--fs-2xs)/1 var(--sans); letter-spacing: .07em; color: var(--ink-3);
}
html.theme-airy :where(.nb__day)::after { background: var(--line); }

/* An entry: a white card whose left edge is its module's colour. The edge
   is drawn over the head's own background, so it shows open or closed. */
html.theme-airy :where(.nb__entry) {
  position: relative; margin: 0 0 10px;
  border: 0; border-radius: var(--r-card, 14px);
  background: var(--surface); box-shadow: var(--dt-card);
  transition: box-shadow var(--dur) var(--ease);
}
html.theme-airy :where(.nb__entry)::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--kind, var(--mod-notebook)); pointer-events: none;
}
html.theme-airy :where(.nb__entry):hover { box-shadow: var(--dt-card-lg); border-color: transparent; }
html.theme-airy :where(.nb__entry).is-open { box-shadow: var(--dt-card-lg); }
html.theme-airy :where(.nb__entry).is-hidden { opacity: .6; }
html.theme-airy :where(.nb__entryhead) {
  min-height: 54px; gap: 10px; padding: 10px 16px 10px 18px;
  font-size: var(--fs-md);
}
html.theme-airy :where(.nb__entryhead):hover { background: #fafbfc; }
html.theme-airy :where(.nb__entry).is-open .nb__entryhead { background: #fafbfc; }
html.theme-airy :where(.nb__etitle) { font-weight: 650; letter-spacing: -.01em; }
html.theme-airy :where(.nb__vsnote) { font-style: normal; font-weight: 500; }
html.theme-airy :where(.nb__caret) { color: var(--muted); }

/* Open: inputs and outputs side by side, each on a pale inset. */
html.theme-airy :where(.nb__entrybody) { gap: 14px; padding: 14px 18px 16px; border-top: 1px solid var(--line-2); }
html.theme-airy :where(.nb__entrybody) > div { padding: 2px 14px 10px; border-radius: 12px; background: var(--dt-pale, #f7f8fa); }
html.theme-airy :where(.nb__ehead) { padding: 12px 0 6px; }
html.theme-airy :where(.nb__kvt) td { padding: 6px 8px 6px 0; border-bottom-color: var(--line-2); }
html.theme-airy :where(.nb__kvt) tr:last-child > td { border-bottom: 0; }
html.theme-airy :where(.nb__kvt) td.nb__th { font: 600 var(--fs-2xs) var(--sans); letter-spacing: .05em; }
html.theme-airy :where(.nb__kvt) td.nb__td { font-variant-numeric: tabular-nums; }
html.theme-airy :where(.nb__entryfoot) { gap: 12px; padding: 14px 18px 16px; border-top: 1px solid var(--line-2); }
html.theme-airy :where(.nb__prose) { line-height: 1.6; }

/* The files a run kept: download pills. */
html.theme-airy :where(.nb__files) { gap: 8px; }
html.theme-airy :where(.nb__files) a.btn {
  min-height: 30px; padding: 0 12px; gap: 6px;
  border-color: var(--line); border-radius: 999px; background: var(--surface);
  box-shadow: var(--shadow-xs);
  font: 500 var(--fs-xs)/1 var(--sans); color: var(--ink-2);
}
html.theme-airy :where(.nb__files) a.btn::before { color: var(--accent-dark); font-weight: 700; }
html.theme-airy :where(.nb__files) a.btn:hover { background: var(--accent-tint); border-color: var(--accent-line); color: var(--accent-dark); }

/* The user's note and tags. */
html.theme-airy :where(.nb__note) {
  min-height: 72px; padding: 10px 12px; border-radius: 12px;
  font: 400 var(--fs-md)/1.55 var(--sans); box-shadow: var(--shadow-xs);
}
html.theme-airy :where(.nb__note):focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
html.theme-airy :where(.nb__note).nb__note--body { min-height: 150px; }
html.theme-airy :where(.nb__entryrow) { gap: 8px; }

/* A note's attachments and a saved plot. */
html.theme-airy :where(.nb__file) {
  gap: 8px; padding: 8px 10px; border: 0; border-radius: 12px;
  background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow-xs);
}
html.theme-airy :where(.nb__file) img { border-radius: 8px; }
html.theme-airy :where(.nb__plotthumb) { gap: 14px; }
html.theme-airy :where(.nb__plotthumb) img {
  border: 0; border-radius: 12px; box-shadow: 0 0 0 1px var(--line), 0 6px 16px -10px rgba(16, 24, 40, .3);
}

/* Nothing on the timeline yet: a friendly card with the notebook's tile. */
html.theme-airy :where(.nb__logempty).empty__text {
  max-width: 600px; margin: 32px auto 0; padding: 28px 32px 30px;
  border-radius: 18px; background: var(--surface);
  box-shadow: var(--dt-card-lg); color: var(--ink-3); line-height: 1.6;
}
html.theme-airy :where(.nb__logempty)::before {
  content: ""; display: block; width: 56px; height: 56px; margin: 0 auto 16px;
  border-radius: 18px;
  background: #f6eee9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237e4a31' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4'/%3E%3Cpath d='M2 6h4'/%3E%3Cpath d='M2 10h4'/%3E%3Cpath d='M2 14h4'/%3E%3Cpath d='M2 18h4'/%3E%3Cpath d='M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z'/%3E%3C/svg%3E") center / 26px 26px no-repeat;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .04);
}

/* ---- the empty notebook ---------------------------------------------- */

html.theme-airy :where(.nb__emptyfoot) { margin-top: 8px; padding: 14px 16px; border-top: 0; border-radius: 12px; background: var(--dt-pale, #f7f8fa); }

/* ---- the plot builder (dvs-plot.js) ---------------------------------- */

/* Controls as a column of white cards beside the chart's own card, all on
   the pale column. */
html.theme-airy :where(.nb__plot) { padding: 16px var(--gut) 20px; background: var(--dt-pale); }
html.theme-airy :where(.pl) { gap: 16px; }
html.theme-airy :where(.pl__controls) { gap: 12px; padding: 0 4px 16px 0; }
html.theme-airy :where(.pl__sec) {
  gap: 10px; padding: 14px 14px 16px;
  border-radius: var(--r-card, 14px); background: var(--surface); box-shadow: var(--dt-card);
}
html.theme-airy :where(.pl__h) { border-bottom: 0; padding-bottom: 0; }
html.theme-airy :where(.pl__f) { gap: 5px; font: 600 var(--fs-sm)/1.3 var(--sans); color: var(--ink-3); }
html.theme-airy :where(.pl__chk) { gap: 9px; line-height: 1.4; }
html.theme-airy :where(.pl__pair) { gap: 10px; }
html.theme-airy :where(.pl__actions) { gap: 8px; }
html.theme-airy :where(.pl__note) { line-height: 1.55; }
html.theme-airy :where(.pl__main) { gap: 12px; }
html.theme-airy :where(.pl__mount) {
  padding: 16px; border: 0; border-radius: 16px;
  background: var(--surface); box-shadow: var(--dt-card-lg);
}
html.theme-airy :where(.pl__empty) { color: var(--ink-3); line-height: 1.65; }
html.theme-airy :where(.pl__empty).is-error { color: var(--fail); }
/* The statistics under the chart: white pills on the pale column. */
html.theme-airy :where(.pl__stats) { gap: 10px; font-size: var(--fs-sm); }
html.theme-airy :where(.pl__statline) { gap: 8px; }
html.theme-airy :where(.pl__stat).badge {
  height: 28px; gap: 7px; padding: 0 12px;
  border: 0; border-radius: 999px; background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-xs);
  font: 600 var(--fs-xs)/1 var(--sans); letter-spacing: 0; text-transform: none;
}
/* The fitted equation stays the monospace the pane gives it: a formula. */
html.theme-airy :where(.pl__statline) .pl__stat.mono { font-family: var(--mono); font-weight: 500; }
html.theme-airy :where(.pl__k) { font: 500 var(--fs-xs)/1 var(--sans); color: var(--muted); }
html.theme-airy :where(.pl__v) { font-family: var(--sans); font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink); }
html.theme-airy :where(.pl__tbl) {
  font: 400 var(--fs-xs) var(--sans); font-variant-numeric: tabular-nums;
  background: var(--surface); border-radius: 12px; box-shadow: 0 0 0 1px var(--line);
  border-collapse: separate; border-spacing: 0; overflow: hidden;
}
html.theme-airy :where(.pl__tbl) th, html.theme-airy :where(.pl__tbl) td { padding: 6px 14px; }
html.theme-airy :where(.pl__tbl) th {
  font: 600 var(--fs-2xs) var(--sans); letter-spacing: .05em; background: #fbfcfd;
}
html.theme-airy :where(.pl__tbl) tr:last-child > td { border-bottom: 0; }
html.theme-airy :where(.pl__titleedit) { border-radius: 8px; }

/* ---- dialogs (modals) and menus the notebook opens -------------------- */

html.theme-airy :where(.nb__form) { gap: 16px; }
html.theme-airy :where(.nb__formrow) { gap: 12px; }
html.theme-airy :where(.nb__formsec) { gap: 12px; padding-top: 16px; border-top-color: var(--line-2); }
html.theme-airy :where(.nb__fieldset) {
  gap: 12px; padding: 14px 16px;
  border: 0; border-radius: 14px; background: #f7f8fa;
  box-shadow: inset 0 0 0 1px #eceef2;
}
html.theme-airy :where(.nb__err) {
  padding: 10px 14px; border-radius: 12px; border-left-width: 3px;
}
html.theme-airy :where(.nb__drop) { border-radius: 6px; }
html.theme-airy :where(.nb__menu) .rail__item.nb__menulink { font-weight: 600; }

/* The import drop zone: the Load plate's look, with the accent's tile. */
html.theme-airy :where(.nb__dropzone).load__drop {
  min-height: 150px; gap: 8px; padding: 24px;
  border: 1.5px dashed #c5cdd8; border-radius: 16px; background: #f8fafc;
}
html.theme-airy :where(.nb__dropzone).load__drop::before {
  width: 52px; height: 52px; margin-bottom: 6px; border-radius: 16px;
  -webkit-mask: none; mask: none;
  background: var(--accent-tint, #edf3fe) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d5bd0' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V4'/%3E%3Cpath d='M7.5 8.5L12 4l4.5 4.5'/%3E%3Cpath d='M4 14v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .04);
}
html.theme-airy :where(.nb__dropzone).load__drop:hover,
html.theme-airy :where(.nb__dropzone).load__drop.is-over { border-color: var(--accent); background: var(--accent-tint); }
html.theme-airy :where(.nb__dropzone).load__drop:hover::before,
html.theme-airy :where(.nb__dropzone).load__drop.is-over::before {
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d5bd0' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V4'/%3E%3Cpath d='M7.5 8.5L12 4l4.5 4.5'/%3E%3Cpath d='M4 14v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
  box-shadow: 0 0 0 1px var(--accent-line), 0 8px 18px -10px rgba(37, 99, 235, .55);
}
html.theme-airy :where(.nb__dropzone) .load__drophint { font: 500 var(--fs-sm)/1.4 var(--sans); color: var(--ink-3); }


/* ====================================================================== */
/*  airy part 20 -- Results and Docking setup                             */
/*  (pane-results.js, pane-docking.js, and the dark 3D viewports, which    */
/*  only these two panes use: .viewport, .vp-seg, .viewport__tool, .vmenu) */
/* ====================================================================== */
/*
 * Same recipe as the rest of dvs-airy.css: every selector starts with
 * `html.theme-airy`, and the component's own class sits in :where(), so a
 * rule here is the dvs.css / pane rule it restyles plus (0,1,1) minus
 * (0,1,0) -- it wins over that rule whatever the load order (the panes
 * inject their CSS after the stylesheets), and still loses to a pane rule
 * that adds a class. Where a pane rule with an extra class had to be beaten
 * on purpose, the selector here names that class too, and says so.
 *
 * What these two screens look like with it:
 *   Results  -- a white status band on top (sans, the live dot, a slim
 *     progress bar), a two-row control bar of 36px rounded chips, the table
 *     with every Score as a pill in the colour of its band (green: best
 *     third of what the filters keep, blue: middle third, grey: the rest),
 *     and the side panel as a pale column: head, the run switch and history
 *     as white cards, the 3D view as a dark rounded media card with glass
 *     tools and a rounded Display menu, then white section cards (SMILES,
 *     reported pose, interactions, properties, pose file). With no hit open
 *     the view's place is a dark card with a cube tile. Compare uses the
 *     same pills, per configuration, and colours the difference. Nothing
 *     docked yet: the base's lifted empty card with the Results tile, on
 *     the pale column.
 *   Docking  -- the whole pane is the pale column: the parameters as a
 *     stack of white cards (target and protonation joined into one), the
 *     run card, and a frosted foot holding the progress card and Start
 *     docking; the target in 3D is a dark rounded card beside them with an
 *     iOS-like dark segmented toolbar. Tools missing, and the check before
 *     it: a centred column under the Setup tile, the fix as a lifted card.
 *
 * Hooks added in JS for this part (classes only; nothing renamed):
 *   rs-score--hi / --mid / --lo   pane-results.js scoreBands()/bandClass():
 *     on the table's Score cell, the panel's score badge, the pose table and
 *     (per configuration) the compare Score cells.
 *   rs-delta, rs-delta--up / --down   compare's difference cell.
 *   dk-sec--joined   pane-docking.js paintLeft(): on the target section
 *     while the protonation block under it is shown.
 */

/* ---- tokens of this part ------------------------------------------------ */

html.theme-airy {
  /* A warning that is not the licence's: rust, never amber (6.2:1 on white,
     5.6:1 on the running band's blue tint). */
  --dock-warn-ink: #9a4a17;
  /* Cards and the dark media card, with the base tokens' values as the
     fallback so this part reads the same on its own. */
  --dock-card: var(--airy-card, 0 0 0 1px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04), 0 2px 10px -4px rgba(16, 24, 40, .08));
  --dock-card-lg: var(--airy-card-lg, 0 0 0 1px rgba(16, 24, 40, .05), 0 2px 4px rgba(16, 24, 40, .03), 0 12px 32px -12px rgba(16, 24, 40, .14));
  --dock-media: 0 0 0 1px rgba(13, 23, 38, .55), 0 2px 4px rgba(16, 24, 40, .06), 0 14px 30px -16px rgba(16, 24, 40, .55);
  --dock-glass: rgba(16, 26, 41, .66);
  --dock-glass-line: rgba(139, 160, 184, .22);
}

/* A Score band is three colours, set on the element that carries it: the
   base's band tones (green, the accent blue, slate -- the same three the
   Compounds docking column uses), with their values as the fallback. Text
   on its own fill: hi 6.1:1, mid 5.4:1, lo 6.9:1. */
html.theme-airy :where(.rs-score--hi) {
  --band-bg: var(--airy-band-hi-bg, #e8f6ee); --band-line: var(--airy-band-hi-line, #bfe3cf);
  --band-ink: var(--airy-band-hi-ink, #12683f);
}
html.theme-airy :where(.rs-score--mid) {
  --band-bg: var(--airy-band-mid-bg, #edf3fe); --band-line: var(--airy-band-mid-line, #c6d8fb);
  --band-ink: var(--airy-band-mid-ink, #1d5bd0);
}
html.theme-airy :where(.rs-score--lo) {
  --band-bg: var(--airy-band-lo-bg, #f1f3f6); --band-line: var(--airy-band-lo-line, #dde1e8);
  --band-ink: var(--airy-band-lo-ink, #475467);
}

/* ====================================================================== */
/*  The dark 3D viewports (Results' pose view, Docking's target view)     */
/* ====================================================================== */

/* A group of tools: one rounder glass bar. */
html.theme-airy :where(.vp-seg), html.theme-airy :where(.viewport__tools) {
  gap: 2px; padding: 3px; border-radius: 12px;
  background: var(--dock-glass); border-color: var(--dock-glass-line);
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .04);
}
html.theme-airy :where(.viewport__tool) {
  height: 28px; padding: 0 11px; border-radius: 9px;
  font: 500 var(--fs-xs)/1 var(--sans); letter-spacing: .005em;
}
/* On: the iOS dark segment, a lighter raised pill rather than a cyan
   wash. Beats `.viewport__tool.is-on` and `.vp-seg .viewport__tool`. */
html.theme-airy :where(.viewport__tool).is-on {
  color: #fff; background: rgba(255, 255, 255, .15); border-color: transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
}
html.theme-airy :where(.viewport__tool):focus-visible { box-shadow: 0 0 0 2px var(--dark-accent); }

/* What the view shows, top left, as a glass chip; the hint stays plain. */
html.theme-airy :where(.viewport__label) {
  padding: 5px 10px; border-radius: 10px;
  background: var(--dock-glass); border: 1px solid var(--dock-glass-line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 600 var(--fs-xs)/1.35 var(--sans); font-variant-numeric: tabular-nums;
  letter-spacing: .005em;
}
/* Docking empties it while no target is loaded: no empty chip. */
html.theme-airy :where(.viewport__label):empty { display: none; }
html.theme-airy :where(.viewport__hint) {
  left: 14px; bottom: 12px;
  font: 400 var(--fs-xs)/1.45 var(--sans); letter-spacing: .005em;
}

/* Results' Display menu: rounder, sans, roomier rows. */
html.theme-airy :where(.vmenu) {
  top: calc(100% + 8px); min-width: 256px; padding: 6px; gap: 2px;
  border-radius: 14px; background: rgba(14, 23, 37, .94); border-color: var(--dock-glass-line);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 22px 44px -14px rgba(0, 0, 0, .7);
}
html.theme-airy :where(.vmenu__h) {
  padding: 9px 9px 4px; font: 600 var(--fs-2xs)/1.1 var(--sans); letter-spacing: .07em;
}
html.theme-airy :where(.vmenu__h):first-child { padding-top: 5px; }
html.theme-airy :where(.vmenu__row) {
  gap: 10px; padding: 7px 9px; border-radius: 9px;
  font: 500 var(--fs-sm)/1.25 var(--sans);
}
html.theme-airy :where(.vmenu__row):hover { background: rgba(255, 255, 255, .07); }
html.theme-airy :where(.vmenu__row).is-disabled:hover { background: none; }
html.theme-airy :where(.vmenu__line) { gap: 8px; padding-right: 4px; }

/* ====================================================================== */
/*  Results                                                                */
/* ====================================================================== */

/* ---- the status band: the run line, and the view under it ------------- */

html.theme-airy :where(.rs-banner) {
  min-height: 40px; padding: 9px var(--gut) 5px 18px; gap: 10px;
  background: var(--surface); border-bottom-color: var(--line-2);
  font: 500 var(--fs-sm)/1.4 var(--sans); color: var(--ink-2);
}
/* While a run lands: a tint that fades out to the right, on the band and
   the line joined under it (beats the pane's flat tint on both). */
html.theme-airy :where(.rs-banner).is-running,
html.theme-airy :where(.rs-banner).is-running + .rs-guard.is-joined {
  background: linear-gradient(90deg, var(--accent-tint), #f5f8ff 55%, var(--surface));
}
html.theme-airy :where(.rs-banner) > .dot { width: 8px; height: 8px; flex: 0 0 8px; }
html.theme-airy :where(.rs-banner).is-running > .dot:not(.dot--empty) {
  box-shadow: 0 0 0 4px rgba(52, 120, 246, .18);
}
html.theme-airy :where(.rs-banner) > .bar { height: 6px; }
html.theme-airy :where(.rs-banner__line) {
  font: 600 var(--fs-sm)/1.4 var(--sans); letter-spacing: -.005em; color: var(--ink-2);
}
html.theme-airy :where(.rs-banner__line).is-run { color: var(--accent-dark); font-weight: 650; }
html.theme-airy :where(.rs-banner__line).is-warn { color: var(--dock-warn-ink); }
html.theme-airy :where(.rs-banner__eta) {
  font: 600 var(--fs-xs)/1.4 var(--sans); font-variant-numeric: tabular-nums; color: var(--accent-dark);
}
html.theme-airy :where(.rs-banner__wait), html.theme-airy :where(.rs-banner__live) {
  font: 400 var(--fs-xs)/1.4 var(--sans); color: var(--muted);
}

html.theme-airy :where(.rs-guard) {
  gap: 8px; padding: 9px var(--gut) 9px 18px;
  background: var(--surface); border-bottom-color: var(--line-2);
  font: 400 var(--fs-xs)/1.4 var(--sans); color: var(--muted);
}
html.theme-airy :where(.rs-guard).is-joined { padding-top: 0; }
html.theme-airy :where(.rs-guard__warn) { color: var(--dock-warn-ink); font-weight: 600; }

/* ---- the control bar: two rows of 36px rounded chips ------------------ */

/* Restates the pane's own rhythm over the base .toolbar rule. */
html.theme-airy :where(.toolbar).rs-tb {
  padding: 7px var(--gut); row-gap: 0; column-gap: 8px;
  border-bottom-color: var(--line-2);
}
html.theme-airy :where(.rs-tb) > * { margin-top: 4px; margin-bottom: 4px; }
html.theme-airy :where(.rs-tb) > select.select,
html.theme-airy :where(.rs-tb) > button.select:not(.is-on) { font-weight: 500; color: var(--ink-2); }
/* "Comparing 2 ▾" while compare is on: the dvs tint, ringed and heavier. */
html.theme-airy :where(.rs-tb) > button.select.is-on {
  font-weight: 600; box-shadow: inset 0 0 0 1px var(--accent-line);
}
html.theme-airy :where(.rs-tb__count) { font: 500 var(--fs-sm) var(--sans); }

/* A label and its control in one rounded box. */
html.theme-airy :where(.rs-chip) {
  gap: 8px; padding: 0 6px 0 12px;
  border-color: var(--line-control); background: var(--surface);
  box-shadow: var(--shadow-xs);
}
html.theme-airy :where(.rs-chip__label) { font-weight: 500; color: var(--muted); }
html.theme-airy :where(.rs-chip) select.select { font-weight: 600; }
html.theme-airy :where(.rs-chip) .rs-slider__out {
  font: 600 var(--fs-sm) var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-2);
}
/* The count the cuts keep: quiet words, a soft blue pill once a cut is on. */
html.theme-airy :where(.rs-keeps) { font: 500 var(--fs-xs)/1 var(--sans); color: var(--muted); }
html.theme-airy :where(.rs-keeps).is-on {
  height: 28px; padding: 0 12px; border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--accent-line);
  font-weight: 600; font-variant-numeric: tabular-nums;
}

/* ---- the table ----------------------------------------------------------- */

html.theme-airy :where(.tr) > .rs-soft { font-weight: 500; }
html.theme-airy :where(.tr) > .rs-target {
  font: 600 var(--fs-sm)/1.2 var(--sans); letter-spacing: .01em; color: var(--ink-3);
}
html.theme-airy :where(.tr) > .rs-nodock { color: var(--muted); font: 500 var(--fs-xs) var(--sans); }

/* A Score without a band is a missing one ("—", "no score"): plain text.
   Stated in full, so no earlier pill rule for .rs-score can leak in. */
html.theme-airy :where(.tr) > .rs-score,
html.theme-airy :where(.rs-minitable__row) > .rs-score {
  justify-self: end; align-self: center;
  display: inline-flex; align-items: center; justify-content: flex-end;
  height: auto; margin-right: 6px; padding: 0 4px 0 0;
  border-radius: 999px; background: none; box-shadow: none;
  font: 500 var(--fs-sm)/1 var(--sans); font-variant-numeric: tabular-nums;
  color: var(--muted);
}
/* A Score with a band is a pill in the band's colours. */
html.theme-airy :where(.tr) > .rs-score:is(.rs-score--hi, .rs-score--mid, .rs-score--lo),
html.theme-airy :where(.rs-minitable__row) > .rs-score:is(.rs-score--hi, .rs-score--mid, .rs-score--lo) {
  height: 26px; padding: 0 10px;
  background: var(--band-bg); color: var(--band-ink);
  box-shadow: inset 0 0 0 1px var(--band-line);
  font: 650 var(--fs-sm)/1 var(--sans); font-variant-numeric: tabular-nums;
  letter-spacing: -.005em;
}
html.theme-airy :where(.rs-minitable__row) > .rs-score:is(.rs-score--hi, .rs-score--mid, .rs-score--lo) {
  height: 22px; margin-right: 0; padding: 0 8px; font-size: var(--fs-xs);
}
/* On the open (tinted) row the blue pill would melt into the tint. */
html.theme-airy :where(.tr).is-active > .rs-score--mid,
html.theme-airy :where(.rs-minitable__row).is-on > .rs-score--mid { --band-bg: var(--surface); }

/* The row a reader is not picking from: the "nothing here" lines. */
html.theme-airy :where(.rs-more) {
  padding: 40px var(--gut); font: 400 var(--fs-md)/1.6 var(--sans); color: var(--muted);
}

/* ---- compare ------------------------------------------------------------ */

html.theme-airy :where(.rs-cmphead) { background: #fbfcfd; box-shadow: inset 0 -1px 0 var(--line); }
html.theme-airy :where(.rs-cmphead) > .rs-cmpgroups { height: 36px; padding-top: 8px; background: #fbfcfd; }
/* Each configuration's name over its columns, in words, underlined in a
   soft blue. */
html.theme-airy :where(.rs-cmpgroup) {
  align-self: end; padding: 0 6px 6px;
  text-transform: none; letter-spacing: -.005em;
  font: 650 var(--fs-xs)/1.2 var(--sans); color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--accent-line);
}
/* A compare Score pill is a link to its poses: a ring, not an underline. */
html.theme-airy :where(.tr) > .rs-cmpcell.rs-score:is(.rs-score--hi, .rs-score--mid, .rs-score--lo):hover,
html.theme-airy :where(.tr) > .rs-cmpcell.rs-score:is(.rs-score--hi, .rs-score--mid, .rs-score--lo).is-open {
  text-decoration: none; box-shadow: inset 0 0 0 1.5px var(--band-ink);
}
/* The difference: which way it goes. */
html.theme-airy :where(.tr) > .rs-delta {
  font: 650 var(--fs-sm)/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-3);
}
html.theme-airy :where(.tr) > .rs-delta--up { color: var(--pass); }
html.theme-airy :where(.tr) > .rs-delta--down { color: var(--fail); }

/* ---- the foot and the menus --------------------------------------------- */

html.theme-airy :where(.rs-foot) {
  position: relative; gap: 8px; padding: 12px var(--gut);
  background: var(--surface); border-top-color: var(--line-2);
  box-shadow: 0 -12px 24px -22px rgba(16, 24, 40, .4);
}
html.theme-airy :where(.rs-note) { font: 500 var(--fs-xs) var(--sans); }
html.theme-airy :where(.rs-colmenu) { min-width: 260px; padding: 6px; }
html.theme-airy :where(.rs-menu-btn) { margin: 8px 4px 2px; }
html.theme-airy :where(.rs-menu-btn) + .rs-menu-btn { margin: 4px 4px 2px; }

/* ---- the side panel ------------------------------------------------------ */

/* The head: the hit's name large, its Score as a banded pill, then the
   three view toggles as small pills on a line of their own. */
html.theme-airy [data-pane="results"] :where(.panel__head) {
  padding: 13px var(--gut) 10px; column-gap: 8px; row-gap: 9px;
}
html.theme-airy [data-pane="results"] :where(.panel__id) { font-size: 18px; letter-spacing: -.022em; }
html.theme-airy :where(.badge).rs-badge-score {
  height: 26px; padding: 0 11px;
  font: 650 var(--fs-sm)/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.005em;
  text-transform: none;
}
html.theme-airy :where(.badge).rs-badge-score:is(.rs-score--hi, .rs-score--mid, .rs-score--lo) {
  background: var(--band-bg); border-color: var(--band-line); color: var(--band-ink);
}
html.theme-airy :where(.rs-hbtn) {
  min-height: 28px; padding: 0 12px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 600;
}

/* The target switch and the compound's history: white cards. */
html.theme-airy :where(.rs-switch), html.theme-airy :where(.rs-hist) {
  margin: 0 12px 10px; padding: 12px 14px; border: 0; border-radius: var(--r-card);
  background: var(--surface); box-shadow: var(--dock-card);
}
html.theme-airy :where(.rs-switch) { gap: 8px; }
html.theme-airy :where(.rs-switch) > .btn { min-height: 28px; padding: 0 11px; border-radius: 999px; }
html.theme-airy :where(.rs-hist) { gap: 6px; }
html.theme-airy :where(.rs-hist) > .btn {
  min-height: 34px; padding: 0 12px; border-radius: 10px;
  border-color: transparent; background: var(--surface-1);
}
html.theme-airy :where(.rs-switch__score), html.theme-airy :where(.rs-hist__score) {
  font: 650 var(--fs-xs) var(--sans); font-variant-numeric: tabular-nums; opacity: 1;
}

/* The 3D view: a dark rounded media card in the pale column. In Full it is
   the last thing in the panel, and keeps a margin under it. */
html.theme-airy :where(.panel) > .viewport {
  margin: 0 12px; border-radius: var(--r-card); box-shadow: var(--dock-media);
}
html.theme-airy :where(.panel) > .viewport:last-child { margin-bottom: 12px; }
html.theme-airy :where(.rs-vp-cam) > .viewport__tool:not(:first-child) { font-size: 16px; font-weight: 500; }
html.theme-airy :where(.rs-vp-radius) {
  height: 26px; width: 60px; padding: 0 7px; border-radius: 8px;
  font: 500 var(--fs-xs) var(--sans); font-variant-numeric: tabular-nums;
}
html.theme-airy :where(.rs-vp-msg) { font: 500 var(--fs-sm)/1.7 var(--sans); }
/* No hit open: where the view will be, a dark card with the same tile the
   empty Docking view has. */
html.theme-airy :where(.panel) > .rs-vp-empty {
  margin: 12px; border-radius: var(--r-card); box-shadow: var(--dock-media);
}
html.theme-airy :where(.rs-vp-empty) {
  flex-direction: column; gap: 16px; font: 500 var(--fs-sm)/1.6 var(--sans);
}
html.theme-airy :where(.rs-vp-empty)::before {
  content: ""; width: 56px; height: 56px; border-radius: 16px;
  background: rgba(95, 192, 232, .10) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 4l14 8v16l-14 8-14-8V12z M6 12l14 8 14-8 M20 20v16' fill='none' stroke='%235fc0e8' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / 28px no-repeat;
  box-shadow: inset 0 0 0 1px var(--dock-glass-line), 0 10px 28px -12px rgba(95, 192, 232, .35);
}

/* Inside the section cards. */
html.theme-airy :where(.rs-minitable) { border-color: var(--line-2); border-radius: 12px; background: var(--surface); }
html.theme-airy :where(.rs-minitable__head) {
  padding: 8px 12px; background: #fbfcfd; border-bottom-color: var(--line-2);
  font: 600 var(--fs-2xs)/1.2 var(--sans); letter-spacing: .05em;
}
html.theme-airy :where(.rs-minitable__row) { align-items: center; min-height: 36px; padding: 6px 12px; }
html.theme-airy :where(.rs-minitable__row) > .mono:first-child {
  font: 600 var(--fs-sm) var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-2);
}
html.theme-airy :where(.rs-minitable__row).is-on {
  background: var(--accent-tint); box-shadow: inset 3px 0 0 var(--accent);
}
html.theme-airy :where(.rs-bars) { gap: 5px; height: 48px; }
html.theme-airy :where(.rs-bars) > i { border-radius: 5px 5px 2px 2px; }
html.theme-airy :where(.rs-bars__ends) { font: 500 var(--fs-xs) var(--sans); font-variant-numeric: tabular-nums; }
html.theme-airy :where(.panel) .rs-caption { font: 400 var(--fs-xs)/1.5 var(--sans); }
html.theme-airy :where(.rs-prose) { line-height: 1.6; }
html.theme-airy :where(.rs-legend) { gap: 6px 14px; font: 500 var(--fs-xs) var(--sans); }
html.theme-airy :where(.rs-legend__sw) { width: 10px; height: 10px; flex-basis: 10px; border-radius: 3px; }
html.theme-airy :where(.rs-bc) { gap: 2px; margin: 6px 0 8px; }
html.theme-airy :where(.rs-bc__col) { font: 500 11px var(--sans); font-variant-numeric: tabular-nums; }
html.theme-airy :where(.rs-bc__row) { font: 600 var(--fs-2xs) var(--sans); }
html.theme-airy :where(.rs-bc__cell) { height: 14px; border-radius: 4px; background: #f3f5f8; border-color: #e1e5eb; }
html.theme-airy :where(.rs-barcode-img) { border-color: var(--line-2); border-radius: 12px; }
html.theme-airy :where(.rs-kvgrid) { gap: 8px 18px; }
html.theme-airy :where(.rs-btnrow), html.theme-airy :where(.rs-actions) { gap: 8px; }

/* ---- nothing docked yet, or no results readable here --------------------- */

/* The empty card itself, its pastel Results tile and pictogram are the
   base's (.empty in a [data-pane]); here only where it sits: on the pale
   column, a readable measure wide. */
html.theme-airy :where(.rs-emptyhost) { padding: 0 24px 56px; background: var(--surface-1); }
html.theme-airy [data-pane="results"] :where(.empty).empty--center { margin-top: 56px; max-width: 600px; }
html.theme-airy :where(.rs-empty-actions) { gap: 14px; }

/* ====================================================================== */
/*  Docking setup                                                          */
/* ====================================================================== */

/* The whole pane is the pale column: cards on the left, the 3D card right. */
html.theme-airy :where(.dk-grid) { background: var(--surface-1); }
html.theme-airy :where(.dk-left) {
  padding: 14px; gap: 12px; background: transparent; border-right: 0;
}

/* ---- the parameter cards -------------------------------------------------- */

html.theme-airy :where(.dk-left) > .dk-sec {
  gap: 12px; padding: 16px; border: 0; border-radius: var(--r-card);
  background: var(--surface); box-shadow: var(--dock-card);
}
/* Card titles: sentence case, larger and heavier than a section label
   (beats the pane's `.dk-left>.dk-sec>.sec-head>.eyebrow`). */
html.theme-airy :where(.dk-left) > .dk-sec > .sec-head { gap: 8px; }
html.theme-airy :where(.dk-left) > .dk-sec > .sec-head > .eyebrow {
  font: 700 15px/1.3 var(--sans); letter-spacing: -.012em; text-transform: none; color: var(--ink);
}
html.theme-airy :where(.dk-left) > .dk-sec > .sec-head > .eyebrow::first-letter { text-transform: uppercase; }

/* Target and protonation: one card, an inset hairline between them. */
html.theme-airy :where(.dk-left) > .dk-sec--joined {
  padding-bottom: 12px; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
/* The lower half: its ring drawn on the sides and the bottom only, and its
   lift cast downwards only, so no line or shade crosses the seam -- just
   the inset hairline. */
html.theme-airy :where(.dk-left) > .dk-sec--joined + .dk-sec--sub {
  margin-top: -12px; padding-top: 13px; border-top-left-radius: 0; border-top-right-radius: 0;
  background-image: linear-gradient(var(--line-2), var(--line-2));
  background-size: calc(100% - 32px) 1px; background-position: 16px 0; background-repeat: no-repeat;
  box-shadow: -1px 0 0 rgba(16, 24, 40, .06), 1px 0 0 rgba(16, 24, 40, .06),
              0 1px 0 rgba(16, 24, 40, .06), 0 6px 10px -6px rgba(16, 24, 40, .10);
}
html.theme-airy :where(.dk-sec--sub) .pass { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
html.theme-airy :where(.dk-sec--sub) .pass::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 0 3px var(--pass-tint);
}

/* "The run" heads the run card from outside it. */
html.theme-airy :where(.dk-left) > .dk-sec.dk-sec--head {
  gap: 4px; padding: 10px 4px 0; border: 0; background: none; box-shadow: none;
}
html.theme-airy :where(.dk-left) > .dk-sec.dk-sec--head > .sec-head > .eyebrow { font-size: 16.5px; }
/* The run card (beats the pane's `.dk-left>.dk-sec+.dk-run` top rule). */
html.theme-airy :where(.dk-left) > .dk-sec.dk-run { gap: 16px; padding: 16px; border: 0; }

/* Text and small controls inside the cards. */
html.theme-airy :where(.dk-single) { gap: 10px; }
html.theme-airy :where(.dk-note) { line-height: 1.55; }
html.theme-airy :where(.dk-row) { gap: 8px; }
html.theme-airy :where(.dk-checkrow) { gap: 10px; font-size: var(--fs-md); }
html.theme-airy :where(.dk-lab) { font-weight: 500; }
html.theme-airy :where(.dk-alink) { color: var(--accent-dark); font-weight: 600; text-decoration: none; }
html.theme-airy :where(.dk-alink):hover { text-decoration: underline; text-underline-offset: 2px; }
html.theme-airy :where(.dk-ph__lab) { font-weight: 500; }

/* The loaded target: a pale rounded file line inside its card. */
html.theme-airy :where(.dk-file) {
  gap: 12px; min-height: 48px; padding: 0 14px; border-color: transparent; border-radius: 12px;
  background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--line-2);
}
html.theme-airy :where(.dk-file)::before { flex-basis: 18px; height: 18px; }
html.theme-airy :where(.dk-file__name) { font: 650 var(--fs-md) var(--sans); letter-spacing: -.005em; }

/* The UniProt list and the bound-group list: rounded lists of soft rows,
   the picked one tinted and ringed. */
html.theme-airy :where(.dk-hetlist), html.theme-airy :where(.dk-uni) {
  gap: 2px; padding: 4px; border-color: var(--line-2); border-radius: 12px;
}
html.theme-airy :where(.dk-het) { min-height: 34px; padding: 0 10px; border-radius: 9px; }
html.theme-airy :where(.dk-uni__r) { padding: 8px 10px; border-radius: 9px; }
html.theme-airy :where(.dk-het).is-on, html.theme-airy :where(.dk-uni__r).is-on {
  background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent-line);
}
html.theme-airy :where(.dk-het__code), html.theme-airy :where(.dk-uni__id) {
  font: 650 var(--fs-sm) var(--sans); letter-spacing: .01em;
}
html.theme-airy :where(.dk-het__at), html.theme-airy :where(.dk-het__n),
html.theme-airy :where(.dk-uni__res), html.theme-airy :where(.dk-uni__rng) {
  font: 500 var(--fs-xs) var(--sans); font-variant-numeric: tabular-nums;
}
html.theme-airy :where(.dk-uni__lig) { font: 650 var(--fs-xs) var(--sans); letter-spacing: .01em; }
html.theme-airy :where(.dk-uni__dot) { flex-basis: 14px; height: 14px; }

/* The box: a disclosure, then the fields. */
html.theme-airy :where(.dk-disclose) { gap: 8px; font-weight: 600; }
html.theme-airy :where(.dk-box) { gap: 8px; }
html.theme-airy :where(.dk-box) .dk-axis {
  font: 600 var(--fs-2xs) var(--sans); letter-spacing: .06em; text-transform: uppercase;
}
/* The box's numbers and the padding in the UI face, tabular, on rounder
   fields (beats the pane's `[data-pane="docking"] .dk-box input`). */
html.theme-airy [data-pane="docking"] :where(.dk-box) input,
html.theme-airy [data-pane="docking"] :where(.dk-padrow) .dk-pad {
  border-radius: 9px; font: 500 var(--fs-sm) var(--sans); font-variant-numeric: tabular-nums;
}
html.theme-airy :where(.dk-padrow) { gap: 10px; }

/* One choice among a few (modeRow): an iOS-like grouped list, the picked
   option a raised white row in a pale well. */
html.theme-airy :where(.dk-mode) {
  gap: 2px; padding: 4px; border: 0; border-radius: 12px; background: var(--airy-well, #eceff3);
}
html.theme-airy :where(.dk-mode__opt) { gap: 10px; padding: 9px 10px; border-radius: 9px; }
html.theme-airy :where(.dk-mode__opt):hover { background: rgba(255, 255, 255, .55); }
html.theme-airy :where(.dk-mode__opt).is-on {
  background: var(--surface); box-shadow: var(--airy-lift-sm, 0 0 0 1px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .07));
}
html.theme-airy :where(.dk-mode__dot) { flex-basis: 16px; height: 16px; border-color: var(--line-control); }
html.theme-airy :where(.dk-mode__opt).is-on .dk-mode__dot {
  border-color: var(--accent-strong); box-shadow: inset 0 0 0 4px var(--accent-strong);
}
html.theme-airy :where(.dk-mode__t) { font: 600 var(--fs-md) var(--sans); letter-spacing: -.005em; }

/* ---- the run card ----------------------------------------------------------- */

html.theme-airy :where(.dk-count) { gap: 10px; }
html.theme-airy :where(.dk-unit) { font: 500 var(--fs-md) var(--sans); }
html.theme-airy :where(.dk-setrow) { gap: 10px; }
html.theme-airy :where(.dk-cov) {
  gap: 6px; padding: 10px 12px; border-color: transparent; border-radius: 12px;
  background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--line-2);
}
html.theme-airy :where(.dk-cov__name) { font: 650 var(--fs-sm) var(--sans); }
html.theme-airy :where(.dk-link) { font-weight: 600; }
html.theme-airy :where(.dk-est) {
  font: 700 var(--fs-xl)/1.1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
html.theme-airy :where(.dk-prevlist) { gap: 2px; }
html.theme-airy :where(.dk-prev) { margin: 0 -8px; padding: 6px 8px; border-radius: 9px; }
html.theme-airy :where(.dk-prev):hover { background: var(--hover-row); }

/* ---- the foot: frosted, pinned to the column's bottom ---------------------- */

html.theme-airy :where(.dk-foot) {
  margin: auto -14px -14px; padding: 14px; gap: 10px;
  background: rgba(247, 248, 250, .88);
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  border-top-color: rgba(16, 24, 40, .06);
  box-shadow: 0 -14px 26px -22px rgba(16, 24, 40, .4);
}
/* The live progress as a white card over Start docking (shown only while
   there is progress to show; the pane sets its display). */
html.theme-airy :where(.dk-foot) > .dk-prog {
  gap: 12px; padding: 12px 14px; border-radius: 12px;
  background: var(--surface); box-shadow: var(--dock-card);
}
html.theme-airy :where(.dk-foot) > .btn--primary {
  min-height: 46px; border-radius: 13px; font-size: 15.5px; letter-spacing: -.005em;
}
html.theme-airy :where(.dk-prog__name) { font-weight: 600; }
html.theme-airy :where(.dk-prog__n) { font: 500 var(--fs-xs) var(--sans); font-variant-numeric: tabular-nums; }
html.theme-airy :where(.dk-prog__bar) { height: 8px; background: #e6e9ee; }
html.theme-airy :where(.dk-prog__fill) { background: linear-gradient(90deg, var(--accent-strong), #5b9bff); }
/* The states, restated over the fill above. */
html.theme-airy :where(.dk-prog__row).is-done .dk-prog__fill { background: linear-gradient(90deg, #16794a, #2c9f66); }
html.theme-airy :where(.dk-prog__row).is-waiting .dk-prog__fill { background: var(--disabled); }
html.theme-airy :where(.dk-prog__row).is-error .dk-prog__fill { background: var(--fail); }
html.theme-airy :where(.dk-prog__row).is-done .dk-prog__n { font-weight: 600; }
html.theme-airy :where(.dk-msg) { line-height: 1.55; }
html.theme-airy :where(.dk-msg).fail {
  padding: 8px 12px; border-radius: 10px; border-color: var(--fail-line); border-left-width: 1px;
  box-shadow: inset 3px 0 0 var(--fail);
}

/* ---- the target in 3D: a dark rounded card ---------------------------------- */

html.theme-airy :where(.dk-mid) {
  margin: 14px 14px 14px 0; border-radius: 16px; overflow: hidden;
  box-shadow: var(--dock-media);
}
html.theme-airy :where(.dk-midbar) {
  gap: 12px; min-height: 52px; padding: 0 10px 0 18px;
  background: rgba(255, 255, 255, .025); border-bottom-color: rgba(139, 160, 184, .14);
}
html.theme-airy :where(.dk-midbar__label) { font: 500 var(--fs-xs) var(--sans); letter-spacing: .01em; }
html.theme-airy :where(.dk-empty3d) { max-width: 360px; font: 500 var(--fs-md)/1.6 var(--sans); }
html.theme-airy :where(.dk-empty3d)::before {
  width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 18px; opacity: 1;
  background: rgba(95, 192, 232, .10) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 4l14 8v16l-14 8-14-8V12z M6 12l14 8 14-8 M20 20v16' fill='none' stroke='%235fc0e8' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / 30px no-repeat;
  box-shadow: inset 0 0 0 1px var(--dock-glass-line), 0 10px 30px -12px rgba(95, 192, 232, .35);
}

/* ---- not available here, and the check before it ----------------------------- */

html.theme-airy :where(.dk-unavail) { padding: 48px 32px; background: var(--surface-1); }
html.theme-airy :where(.dk-unavail__inner) { gap: 22px; }
html.theme-airy :where(.dk-unavail__head) { gap: 10px; }
/* The Setup tile above the headline, as the empty states carry theirs. */
html.theme-airy :where(.dk-unavail__head)::before, html.theme-airy :where(.dk-checking)::before {
  content: ""; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 16px; margin-bottom: 4px;
  background-color: #e4eff3;
  background-color: color-mix(in srgb, var(--mod-setup) 14%, #fff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f7d9e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16ZM3.3 7l8.7 5 8.7-5M12 22V12'/%3E%3C/svg%3E");
  background-position: center; background-size: 26px; background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .04);
}
html.theme-airy :where(.dk-fix) {
  border: 0; border-radius: 16px; box-shadow: var(--dock-card-lg);
}
html.theme-airy :where(.dk-fix__head) { padding: 14px 18px 10px; background: var(--surface); border-bottom-color: var(--line-2); }
html.theme-airy :where(.dk-fix__body) { gap: 14px; padding: 18px; }
html.theme-airy :where(.dk-cmds) { gap: 12px; }
html.theme-airy :where(.dk-aside) {
  padding: 16px 18px; border: 0; border-radius: var(--r-card);
  background: var(--surface); box-shadow: var(--dock-card);
}
html.theme-airy :where(.dk-checking) { align-items: flex-start; }
@media (prefers-reduced-motion: no-preference) {
  html.theme-airy :where(.dk-checking)::before { animation: airy-dock-breathe 1.8s ease-in-out infinite; }
}
@keyframes airy-dock-breathe { 50% { opacity: .55; } }


/* ====================================================================== */
/*  Part 30: analysis panes -- Filter, Off-target, Target ligands,         */
/*  Library search, Sketcher, and the property radar (dvs-radar.js).       */
/* ====================================================================== */
/*
 * Same recipe as the rest of the theme: every selector starts with
 * html.theme-airy, and the pane's own class sits inside :where() so a rule
 * here is the pane rule it restyles plus (0,1,1) -- it beats the CSS the panes
 * inject at runtime whatever the load order, and a pane rule with one more
 * class still wins. Shared components (.panel__section cards, .tr, .thumb,
 * .empty, .seg, .btn, .badge ...) belong to the base part; this part only
 * adds pane-scoped variants of them ([data-pane="..."] or a pane class in
 * front) and styles the panes' own classes.
 *
 * What it does, per screen:
 *   Filter     rule sets as soft pills (the one in force tinted, with a dot);
 *              every property range a pale inner card whose histogram and
 *              iOS-like dual slider sit together, tinted when narrowed;
 *              element chips; the outcome column as pass/fail pills with the
 *              failing criterion as a rose pill; the right column a header
 *              line over stat / breakdown / saved-filter cards and a sticky
 *              Save foot.
 *   Off-target the heat grid as soft pastel pills (low grey, medium warm,
 *              high rose) instead of full-height tiles; summary figures as
 *              pills; legend swatches as mini pills; the panel list and the
 *              per-compound levels as one white card on the pale column.
 *   Ligands    a fetch bar with a search field and the loaded target as a
 *              pastel chip; candidate list as a card; the filter strip as a
 *              pale band of pill toggles; pAct as a pill tinted by potency
 *              band; side panel cards.
 *   Search     the left column a stack of cards ending in an accent "run"
 *              card; full-width iOS mode switch; ticked libraries tinted;
 *              Tanimoto as a pill tinted by similarity band.
 *   Sketcher   the editor as a white card on the pale canvas, the fragment
 *              strip as a lavender card above it; fragment mode rings the
 *              editor in the sketcher's colour.
 *
 * Hooks added to the JS for this part (classes only, no DOM change):
 *   pane-search.js   .sr-tan--hi|mid|lo     (tanBand: >=.85, >=.70, below)
 *   pane-ligands.js  .tl-pact + .tl-pact--hi|mid|lo|none (pactBand: pAct >=7,
 *                    >=6, below or an upper bound, no value)
 *   dvs-radar.js     .dvsr-fig .dvsr-svg .dvsr-grid .dvsr-rule .dvsr-shape
 *                    .dvsr-pt .dvsr-axis .dvsr-val (+ .is-fail)
 * Everything else keys off what the panes already render: aria-checked,
 * aria-pressed, .is-on, .is-narrowed, read with :has() where needed.
 *
 * Amber stays licence/trial only. The panes' other amber -- Filter's
 * "outside the calibrated space" banner, the "not available" eyebrows of
 * Target ligands and Library search (.tl-eyebrow--amber, .sr-eyebrow--amber),
 * the unreported-qualifier and source notes of Target ligands -- reads in the
 * rust caveat tone here (--an-warn-*). The off-target "medium" level keeps
 * the warm --heat-med-* tokens: that is a data scale, not chrome.
 *
 * Value bands (pAct, Tanimoto) use the base part's three tones, so a strong
 * value is the same green pill in Compounds, Results, Target ligands and
 * Library search.
 */

/* ---- private tokens of this part (fallbacks in case a base token moves) */

html.theme-airy {
  --an-card: var(--airy-card, 0 0 0 1px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04), 0 2px 10px -4px rgba(16, 24, 40, .08));
  --an-float: var(--airy-float, 0 1px 2px rgba(16, 24, 40, .04), 0 2px 10px -4px rgba(16, 24, 40, .08));
  /* A pale well inside a white card (range cards, logs, hover rows). */
  --an-well: #f5f6f8;
  /* Quiet pill fills. */
  --an-chip: #f1f3f6;
  --an-chip-hover: #e8ebf0;
  /* Value bands: the base part's three tones, shared with Compounds and
     Results (green = strong, the accent blue = middling, slate = weak). Text
     on its own fill: hi 6.1:1, mid 5.4:1, lo 6.9:1. */
  --an-band-hi-bg: var(--airy-band-hi-bg, #e8f6ee);
  --an-band-hi-line: var(--airy-band-hi-line, #bfe3cf);
  --an-band-hi-ink: var(--airy-band-hi-ink, #12683f);
  --an-band-mid-bg: var(--airy-band-mid-bg, #edf3fe);
  --an-band-mid-line: var(--airy-band-mid-line, #c6d8fb);
  --an-band-mid-ink: var(--airy-band-mid-ink, #1d5bd0);
  --an-band-lo-bg: var(--airy-band-lo-bg, #f1f3f6);
  --an-band-lo-line: var(--airy-band-lo-line, #dde1e8);
  --an-band-lo-ink: var(--airy-band-lo-ink, #475467);
  /* A caveat that is not licence or trial news: rust, never amber (the same
     ink as the docking part's warnings). Ink 6.2:1 on white, 5.8:1 on the
     tint. */
  --an-warn-ink: var(--airy-warn-ink, #9a4a17);
  --an-warn-bg: #fdf4ee;
  --an-warn-line: #f3d6c3;
  --an-warn-strong: #d9824a;
  /* Off-target "low": a quiet grey pill whose word still reads (5.4:1). */
  --an-heat-low-bg: #f2f4f7;
  --an-heat-low-line: #e4e7ec;
  --an-heat-low-ink: #5d6472;
}

/* ====================================================================== */
/*  Filter                                                                 */
/* ====================================================================== */

/* ---- left column: rule sets ------------------------------------------- */

html.theme-airy :where(.dvsf-rules) { gap: 8px; }
html.theme-airy :where(.dvsf-rule) {
  height: 32px; padding: 0 14px; gap: 7px;
  border: 0; border-radius: 999px;
  background: var(--an-chip); color: var(--ink-2);
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .04);
  font: 500 var(--fs-sm)/1 var(--sans); letter-spacing: -.005em;
}
html.theme-airy :where(.dvsf-rule):hover { background: var(--an-chip-hover); }
/* The rule in force: tinted, with a dot, so it reads at a glance. */
html.theme-airy :where(.dvsf-rule).is-on,
html.theme-airy :where(.dvsf-rule).is-on:hover {
  background: var(--accent-tint); color: var(--accent-dark); font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
html.theme-airy :where(.dvsf-rule).is-on::before {
  content: ""; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-strong);
}
/* "Clear": a dashed outline, not a fourth rule. */
html.theme-airy :where(.dvsf-rule).dvsf-rule--ghost,
html.theme-airy :where(.dvsf-rule).dvsf-rule--ghost:hover {
  border: 1px dashed var(--line-strong); background: transparent; box-shadow: none;
  color: var(--ink-3);
}
html.theme-airy :where(.dvsf-rule).dvsf-rule--ghost:hover { border-color: var(--line-control-hover); color: var(--ink); }
html.theme-airy :where(.dvsf-rule):focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---- left column: tick and radio rows (already screened, alerts) ------- */

/* Full-width rows with a soft hover, packed closer than the section gap. */
html.theme-airy :where([data-pane="filter"]) .alert-row {
  min-height: 34px; margin: 0 -8px; padding: 0 8px; gap: 10px;
  border-radius: 10px; color: var(--ink-2);
  transition: background-color var(--dur) var(--ease);
}
html.theme-airy :where([data-pane="filter"]) .alert-row + .alert-row { margin-top: -8px; }
html.theme-airy :where([data-pane="filter"]) .alert-row:hover { background: var(--an-well); }
html.theme-airy :where([data-pane="filter"]) .alert-row:has(> .check.is-on) { color: var(--ink); font-weight: 500; }
/* The count beside each alert: a small grey pill, tinted once switched on. */
html.theme-airy :where([data-pane="filter"]) .alert-row__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 20px; padding: 0 7px; border-radius: 999px;
  background: var(--an-chip); color: var(--ink-3);
  font: 600 11.5px/1 var(--sans); font-variant-numeric: tabular-nums;
}
html.theme-airy :where([data-pane="filter"]) .alert-row:has(> .check.is-on) > .alert-row__count {
  background: var(--accent-tint); color: var(--accent-dark);
}
html.theme-airy :where(.dvsf-scopewrap) { padding-top: 2px; }
html.theme-airy :where(.dvsf-note) { font-size: var(--fs-xs); line-height: 1.55; }

/* ---- left column: moieties ------------------------------------------- */

html.theme-airy :where(.dvsf-moi) { gap: 6px; }
html.theme-airy :where(.dvsf-moi-btn).btn { padding: 0 8px 0 14px; }
html.theme-airy :where(.dvsf-moi-picked) { font-size: var(--fs-xs); line-height: 1.5; padding: 0 2px; }

/* ---- left column: property ranges, each a pale card ------------------- */

html.theme-airy :where([data-pane="filter"]) .range {
  gap: 7px; padding: 10px 10px 11px;
  border-radius: 12px; background: var(--an-well);
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .035);
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* A range the user has narrowed is marked as a whole, not only its figures. */
html.theme-airy :where([data-pane="filter"]) .range:has(.vals.is-narrowed) {
  background: #f4f8ff; box-shadow: inset 0 0 0 1px var(--accent-line);
}
html.theme-airy :where([data-pane="filter"]) .range__head { align-items: center; font-size: var(--fs-sm); }
html.theme-airy :where([data-pane="filter"]) .range__head .name { font-weight: 600; color: var(--ink); }
html.theme-airy :where([data-pane="filter"]) .range__head .vals {
  padding: 4px 0;
  font: 500 var(--fs-xs)/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-3);
}
html.theme-airy :where([data-pane="filter"]) .range__head .vals.is-narrowed {
  padding: 4px 8px; border-radius: 999px;
  background: var(--accent-tint); color: var(--accent-dark); font-weight: 600;
}
/* The set's own distribution: rounded bars, the kept part in the accent. */
html.theme-airy :where([data-pane="filter"]) .hist { height: 34px; gap: 2px; }
html.theme-airy :where([data-pane="filter"]) .hist__bar { border-radius: 3px 3px 1px 1px; background: #b6cdf9; }
html.theme-airy :where([data-pane="filter"]) .hist__bar.is-out { background: #dde1e8; }

/* The dual slider: a 6px track and white knobs with a soft shadow. The
   18px knob keeps the fill edge under it at every position (the fill is
   drawn over the full width, the knob centres travel 9px in from each end). */
html.theme-airy :where(.dvsf-sl) { height: 20px; }
html.theme-airy :where(.dvsf-sl__track) { top: 7px; height: 6px; background: #dde1e8; }
html.theme-airy :where(.dvsf-sl__fill) {
  top: 7px; height: 6px;
  background: linear-gradient(90deg, var(--accent-strong), #5b9bff);
}
html.theme-airy :where(.dvsf-sl) input[type=range] { height: 20px; }
html.theme-airy :where(.dvsf-sl) input[type=range]::-webkit-slider-runnable-track { height: 20px; }
html.theme-airy :where(.dvsf-sl) input[type=range]::-moz-range-track { height: 20px; }
html.theme-airy :where(.dvsf-sl) input[type=range]::-webkit-slider-thumb {
  width: 18px; height: 18px; margin-top: 1px;
  border: 0; background: #fff;
  box-shadow: 0 0 0 .5px rgba(16, 24, 40, .2), 0 1px 2px rgba(16, 24, 40, .2), 0 3px 8px -2px rgba(16, 24, 40, .22);
}
html.theme-airy :where(.dvsf-sl) input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px;
  border: 0; background: #fff;
  box-shadow: 0 0 0 .5px rgba(16, 24, 40, .2), 0 1px 2px rgba(16, 24, 40, .2), 0 3px 8px -2px rgba(16, 24, 40, .22);
}
html.theme-airy :where(.dvsf-sl) input[type=range]:focus-visible::-webkit-slider-thumb {
  box-shadow: var(--focus-ring), 0 1px 2px rgba(16, 24, 40, .2);
}
html.theme-airy :where(.dvsf-sl) input[type=range]:focus-visible::-moz-range-thumb {
  box-shadow: var(--focus-ring), 0 1px 2px rgba(16, 24, 40, .2);
}
html.theme-airy :where(.dvsf-sl) input[type=range]:disabled::-webkit-slider-thumb {
  background: var(--an-chip); box-shadow: 0 0 0 1px var(--line-strong);
}
html.theme-airy :where(.dvsf-sl) input[type=range]:disabled::-moz-range-thumb {
  background: var(--an-chip); box-shadow: 0 0 0 1px var(--line-strong);
}

html.theme-airy :where([data-pane="filter"]) .range__inputs { gap: 8px; }
html.theme-airy :where([data-pane="filter"]) .range__inputs input {
  height: 32px; padding: 0 10px;
  border: 1px solid var(--line-control); border-radius: 9px;
  background: var(--surface); box-shadow: var(--shadow-xs);
  font: 500 var(--fs-sm) var(--sans); font-variant-numeric: tabular-nums; color: var(--ink);
}
html.theme-airy :where([data-pane="filter"]) .range__inputs input:focus {
  border-color: var(--accent); box-shadow: var(--focus-ring);
}
html.theme-airy :where([data-pane="filter"]) .range__inputs input:disabled {
  background: var(--an-chip); color: var(--disabled); box-shadow: none;
}

/* ---- left column: elements ------------------------------------------- */

html.theme-airy :where([data-pane="filter"]) .elements { gap: 6px; }
html.theme-airy :where([data-pane="filter"]) .element {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 32px; padding: 0 10px;
  border: 1px solid var(--line-control); border-radius: 10px;
  background: var(--surface); color: var(--ink-2); box-shadow: var(--shadow-xs);
  font: 600 var(--fs-sm)/1 var(--sans);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
html.theme-airy :where([data-pane="filter"]) .element:hover { border-color: var(--line-control-hover); }
/* Excluded: red AND struck through, so it is not colour alone. */
html.theme-airy :where([data-pane="filter"]) .element.is-excluded {
  background: var(--fail-tint); border-color: var(--fail-line); color: var(--fail);
  box-shadow: none;
  text-decoration: line-through; text-decoration-thickness: 1.5px;
}

/* ---- centre: the live preview ---------------------------------------- */

/* "live preview": a small live dot, in the UI face. Stays a block, so the
   ellipsis the pane sets on it still works. */
html.theme-airy :where(.toolbar) > .dvsf-pnote { font: 500 var(--fs-sm) var(--sans); color: var(--ink-3); }
html.theme-airy :where(.toolbar) > .dvsf-pnote::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 9px 0 3px;
  vertical-align: 1px; border-radius: 50%;
  background: var(--pass); box-shadow: 0 0 0 3px var(--pass-tint);
}
html.theme-airy :where(.toolbar) > .dvsf-align { font-family: var(--sans); }
/* "hide failing" as a pill toggle. */
html.theme-airy :where(.dvsf-hidefail) {
  height: 32px; padding: 0 12px 0 10px; gap: 8px; border-radius: 999px;
  background: var(--an-chip); color: var(--ink-2); font-weight: 500;
  transition: background-color var(--dur) var(--ease);
}
html.theme-airy :where(.dvsf-hidefail):hover { background: var(--an-chip-hover); }
html.theme-airy :where(.dvsf-hidefail):has(> .check.is-on) {
  background: var(--accent-tint); color: var(--accent-dark);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}

/* The outcome column: the verdict pill gets a status dot, and the failing
   criterion becomes a rose pill (its 12px left padding is the pane's inline
   style, matched on the right). */
html.theme-airy :where([data-pane="filter"]) .tr > .verdict {
  justify-self: start; gap: 6px; padding: 0 10px 0 8px;
}
html.theme-airy :where([data-pane="filter"]) .tr > .verdict::before {
  content: ""; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
html.theme-airy :where([data-pane="filter"]) .tr > .reason {
  justify-self: start; max-width: 100%;
  height: 24px; padding-right: 12px; border-radius: 999px;
  background: var(--fail-tint); color: var(--fail);
  box-shadow: inset 0 0 0 1px var(--fail-line);
  font: 600 var(--fs-xs)/24px var(--sans);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- right column ----------------------------------------------------- */

/* Off the calibrated space: a rounded card in the rust caveat tone (amber
   is licence and trial news only), its eyebrow with a warm dot. */
html.theme-airy :where(.dvsf-relax) {
  margin: 12px 12px 0; padding: 14px 16px; gap: 8px;
  border: 0; border-radius: var(--r-card);
  background: var(--an-warn-bg); box-shadow: inset 0 0 0 1px var(--an-warn-line), var(--an-float);
}
html.theme-airy :where(.dvsf-relax) .eyebrow {
  display: inline-flex; align-items: center; gap: 7px; color: var(--an-warn-ink);
}
html.theme-airy :where(.dvsf-relax) .eyebrow::before {
  content: ""; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--an-warn-strong);
}

/* "Filtering: Main (120)" is the heading of the column, not a card. */
html.theme-airy :where(.panel__section).dvsf-setline {
  margin: 8px 12px 0; padding: 10px 4px 2px; gap: 6px;
  border: 0; border-radius: 0; background: none; box-shadow: none;
}
html.theme-airy :where(.dvsf-setline__name) { font: 700 var(--fs-md)/1.3 var(--sans); letter-spacing: -.01em; }
html.theme-airy :where(.dvsf-setline) > .mono { font-family: var(--sans); font-variant-numeric: tabular-nums; }

/* The count card: the big figure and "of N" on one baseline. */
html.theme-airy :where(.dvsf-count) { gap: 10px; }
html.theme-airy :where(.dvsf-count) > .mono {
  font-family: var(--sans); font-size: var(--fs-md); font-weight: 600; font-variant-numeric: tabular-nums;
}
html.theme-airy :where(.dvsf-countnote) { font-size: var(--fs-xs); line-height: 1.5; }

/* Why removed: one line per criterion, the bar in a soft rose (these are
   the compounds taken out; the kept count above is the blue one). */
html.theme-airy :where(.dvsf-whybody) { gap: 9px; }
html.theme-airy :where(.dvsf-why) { gap: 12px; font-size: var(--fs-sm); }
html.theme-airy :where(.dvsf-why__label) { color: var(--ink-2); }
html.theme-airy :where(.dvsf-why__bar) { width: 84px; flex-basis: 84px; }
html.theme-airy :where(.dvsf-why__bar) .bar { height: 8px; background: var(--an-chip); }
html.theme-airy :where(.dvsf-why__bar) .bar__fill { opacity: 1; background: linear-gradient(90deg, #e36f62, #f2a59b); }
html.theme-airy :where(.dvsf-why__n) {
  width: 32px; font: 650 var(--fs-sm)/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink);
}

/* Saved filters: rows with a module-coloured mark and a soft hover. */
html.theme-airy :where(.dvsf-dhead) { gap: 10px; }
html.theme-airy :where(.dvsf-presets) { gap: 2px; }
html.theme-airy :where(.dvsf-preset) {
  min-height: 36px; margin: 0 -8px; padding: 0 4px 0 10px; gap: 10px;
  border-radius: 10px; font-size: var(--fs-sm);
}
html.theme-airy :where(.dvsf-preset)::before {
  content: ""; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 3px;
  background: var(--mod-filter);
}
html.theme-airy :where(.dvsf-preset):hover { background: var(--an-well); }
html.theme-airy :where(.dvsf-preset) a { color: var(--ink); font-weight: 500; text-decoration: none; }
html.theme-airy :where(.dvsf-preset) a:hover { color: var(--accent-dark); text-decoration: none; }
html.theme-airy :where(.dvsf-preset) button { width: 26px; height: 26px; border-radius: 8px; font-size: 17px; }

/* Save and Reset stay in reach while the column scrolls. */
html.theme-airy :where(.panel__foot).dvsf-foot {
  position: sticky; bottom: 0; z-index: 2;
  gap: 8px 10px; padding: 14px var(--gut) 16px;
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
}
html.theme-airy :where(.dvsf-foot) > .dvsf-footnote { font-size: var(--fs-xs); line-height: 1.5; }

/* One compound open in the column. */
html.theme-airy :where(.dvsf-depict).plate {
  height: 196px; margin: 2px 0;
  border: 0; border-radius: 12px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
html.theme-airy :where(.dvsf-verdict) {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  min-height: 28px; padding: 4px 12px 4px 10px; margin-top: 2px; border-radius: 999px;
  background: var(--fail-tint); box-shadow: inset 0 0 0 1px var(--fail-line);
  font: 600 var(--fs-sm)/1.3 var(--sans);
}
html.theme-airy :where(.dvsf-verdict)::before {
  content: ""; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
html.theme-airy :where(.dvsf-verdict).dvsf-verdict--pass {
  background: var(--pass-tint); box-shadow: inset 0 0 0 1px var(--pass-line);
}

/* ---- empty, progress, pickers, dialogs -------------------------------- */

html.theme-airy :where(.dvsf-progress) { gap: 12px; }
html.theme-airy :where(.dvsf-log) {
  padding: 10px 12px; border-radius: 10px;
  background: var(--an-well); box-shadow: inset 0 0 0 1px var(--line-2);
}
html.theme-airy :where(.dvsf-moihost) { gap: 20px; }
html.theme-airy :where(.dvsf-moihead) { gap: 8px; padding-bottom: 8px; }
html.theme-airy :where(.dvsf-moigrid) { gap: 10px; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
html.theme-airy :where(.dvsf-moigrid) .moi img { height: 78px; }

/* "Update X" / "Save as another set": rows that tint when chosen. The text
   keeps its place, so the name field under them still lines up. */
html.theme-airy :where(.dvsf-choice),
html.theme-airy :where(.ot-choice) {
  margin: 0 -10px; padding: 8px 10px; border-radius: 10px;
  transition: background-color var(--dur) var(--ease);
}
html.theme-airy :where(.dvsf-choice):hover,
html.theme-airy :where(.ot-choice):hover { background: var(--an-well); }
html.theme-airy :where(.dvsf-choice):has(> input:checked),
html.theme-airy :where(.ot-choice):has(> input:checked) {
  background: var(--accent-tint); color: var(--ink);
}

/* ====================================================================== */
/*  Off-target                                                             */
/* ====================================================================== */

/* ---- toolbar ---------------------------------------------------------- */

html.theme-airy :where(.ot-setname) { font: 700 var(--fs-md)/1.3 var(--sans); letter-spacing: -.01em; color: var(--ink); }
html.theme-airy :where([data-pane="offtarget"]) .toolbar > .mono { font-family: var(--sans); font-variant-numeric: tabular-nums; }
html.theme-airy :where(.ot-right) { gap: 8px; }
/* "3 of 9" kept under the ceiling: an accent pill beside its select. */
html.theme-airy :where(.ot-right) > .badge {
  height: 28px; padding: 0 11px;
  border: 0; border-radius: 999px;
  background: var(--accent-tint); color: var(--accent-dark);
  box-shadow: inset 0 0 0 1px var(--accent-line);
  font: 600 var(--fs-xs)/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: 0;
}

/* The "now the active set" and error lines: rounded banners on the sheet. */
html.theme-airy :where(.toolbar).ot-applied {
  min-height: 0; margin: 12px 12px 0; padding: 10px 12px 10px 16px;
  border: 0; border-radius: 12px;
  background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent-line);
}
html.theme-airy :where(.toolbar).ot-error {
  min-height: 0; margin: 12px 12px 0; padding: 10px 16px;
  border: 0; border-radius: 12px;
  background: var(--fail-tint); box-shadow: inset 0 0 0 1px var(--fail-line);
}

/* ---- summary strip ---------------------------------------------------- */

html.theme-airy :where(.ot-summary) { gap: 8px 10px; padding: 12px var(--gut); border-bottom-color: var(--line-2); }
html.theme-airy :where(.ot-summary__stat) {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 12px; border-radius: 999px;
  background: var(--an-chip); color: var(--ink-3);
  font: 500 var(--fs-sm)/1 var(--sans);
}
html.theme-airy :where(.ot-summary__stat) b {
  font: 700 var(--fs-md)/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink);
}
html.theme-airy :where(.ot-legend) { gap: 12px; font: 500 var(--fs-xs) var(--sans); color: var(--ink-3); }
html.theme-airy :where(.ot-legend) > span:not(.info-i) { display: inline-flex; align-items: center; }
/* The swatches are the cells in miniature. */
html.theme-airy :where(.ot-sw) {
  width: 20px; height: 12px; margin-right: 6px; vertical-align: 0;
  border: 0; border-radius: 999px;
}
html.theme-airy :where(.ot-sw).ot-sw--low { background: var(--an-heat-low-bg); box-shadow: inset 0 0 0 1px var(--an-heat-low-line); }
html.theme-airy :where(.ot-sw).ot-sw--medium { background: var(--heat-med-bg); box-shadow: inset 0 0 0 1px var(--heat-med-line); }
html.theme-airy :where(.ot-sw).ot-sw--high { background: var(--heat-high-bg); box-shadow: inset 0 0 0 1px var(--heat-high-line); }
html.theme-airy :where(.ot-mode) > .eyebrow { padding: 0 4px 0 8px; }

/* ---- the grid --------------------------------------------------------- */

html.theme-airy :where(.ot-head) .ot-c { font: 600 11.5px var(--sans); letter-spacing: .01em; color: var(--ink-3); }
html.theme-airy :where(.ot-c__v) { font: 600 12px/1 var(--sans); letter-spacing: .01em; }

/* Each reading a soft pill centred in its row, not a full-height tile. */
html.theme-airy :where(.ot-row) .ot-c {
  align-self: center; height: 26px; margin: 0 3px; padding: 0 2px;
  border-radius: 999px;
}
html.theme-airy :where(.ot-c).ot-c--low {
  background: var(--an-heat-low-bg); color: var(--an-heat-low-ink);
}
html.theme-airy :where(.ot-c).ot-c--medium {
  background: var(--heat-med-bg); color: var(--amber-ink);
  box-shadow: inset 0 0 0 1px var(--heat-med-line);
}
html.theme-airy :where(.ot-c).ot-c--high {
  background: var(--heat-high-bg); color: var(--fail);
  box-shadow: inset 0 0 0 1px var(--heat-high-line);
}
html.theme-airy :where(.ot-flags) { font: 700 var(--fs-md)/1 var(--sans); font-variant-numeric: tabular-nums; }

/* ---- the side column: the panel list, or one compound ----------------- */

/* Everything below the head is one white card on the pale column. */
html.theme-airy :where(.ot-aside) > .panel__body {
  gap: 0; margin: 10px 12px 12px; padding: 8px 16px 12px;
  border-radius: var(--r-card); background: var(--surface); box-shadow: var(--an-card);
}
html.theme-airy :where(.ot-aside) > .panel__head + .panel__body { margin-top: 2px; }
html.theme-airy :where(.sec-head) > .ot-instr { font: 500 var(--fs-sm)/1.4 var(--sans); letter-spacing: 0; color: var(--ink-3); }

html.theme-airy :where(.ot-def) { gap: 3px; padding: 11px 0; border-bottom-color: var(--line-3); }
html.theme-airy :where(.ot-def__short) { font: 700 var(--fs-sm)/1.3 var(--sans); letter-spacing: -.005em; color: var(--ink); }
html.theme-airy :where(.ot-def__num) { font: 500 var(--fs-xs) var(--sans); font-variant-numeric: tabular-nums; color: var(--muted); }
html.theme-airy :where(.ot-def__eff) { font-size: var(--fs-sm); line-height: 1.45; }
html.theme-airy :where(.ot-note) { font-size: var(--fs-sm); }

html.theme-airy :where(.ot-depict).plate {
  height: 190px; border: 0; border-radius: 12px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2);
}
html.theme-airy :where(.ot-depict__none) { font: 500 var(--fs-xs) var(--sans); color: var(--muted); }

html.theme-airy :where(.ot-tgt) { gap: 5px; padding: 11px 0; border-bottom-color: var(--line-3); }
html.theme-airy :where(.ot-tgt__name) { font: 600 var(--fs-md)/1.3 var(--sans); }
html.theme-airy :where(.ot-tgt__meta) { font: 500 var(--fs-xs)/1.5 var(--sans); font-variant-numeric: tabular-nums; color: var(--muted); }
html.theme-airy :where(.ot-tgt__meta) .fail { font-weight: 600; }
html.theme-airy :where(.ot-morebtn).is-on {
  background: var(--accent-tint); border-color: var(--accent-line); color: var(--accent-dark); box-shadow: none;
}
html.theme-airy :where(.ot-more) {
  margin-top: 6px; padding: 10px 12px; border-radius: 10px;
  background: var(--an-well); box-shadow: inset 0 0 0 1px var(--line-2);
  font: 400 var(--fs-xs)/1.55 var(--sans);
}
html.theme-airy :where(.ot-more) b { font: 600 var(--fs-xs) var(--sans); color: var(--ink); }

/* Levels as pills in the same three tones as the grid, in sentence case. */
html.theme-airy :where(.ot-lvl) {
  height: 24px; padding: 0 10px;
  border: 0; border-radius: 999px;
  font: 600 var(--fs-xs)/1 var(--sans); letter-spacing: .01em; text-transform: none;
}
html.theme-airy :where(.ot-lvl).ot-lvl--low { background: var(--an-heat-low-bg); color: var(--an-heat-low-ink); }
html.theme-airy :where(.ot-lvl).ot-lvl--medium {
  background: var(--heat-med-bg); color: var(--amber-ink); box-shadow: inset 0 0 0 1px var(--heat-med-line);
}
html.theme-airy :where(.ot-lvl).ot-lvl--high {
  background: var(--heat-high-bg); color: var(--fail); box-shadow: inset 0 0 0 1px var(--heat-high-line);
}
/* The same pill as a key/value's value (the shared kv sets its own weight). */
html.theme-airy :where(.kv) > span.ot-lvl:last-child { font-weight: 600; font-family: var(--sans); }

/* ---- not run, running, unavailable ------------------------------------ */

html.theme-airy :where(.ot-log) {
  padding: 10px 12px; border-radius: 10px;
  background: var(--an-well); box-shadow: inset 0 0 0 1px var(--line-2);
}
html.theme-airy :where(.ot-fix) { gap: 10px; }

/* ====================================================================== */
/*  Target ligands                                                         */
/* ====================================================================== */

/* ---- the fetch bar ---------------------------------------------------- */

html.theme-airy :where(.tl-bar) {
  gap: 10px; min-height: 60px; padding: 12px var(--gut);
  border-bottom-color: var(--line-2);
}
/* The accession box as a search field: a magnifier inside (a data: URI, not
   a request), rounder corners. */
html.theme-airy :where(.tl-bar) > .tl-acc {
  padding-left: 36px; border-radius: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a8291' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 13px center; background-size: 16px 16px;
}
html.theme-airy :where(.tl-org) { gap: 8px; font: 500 var(--fs-sm) var(--sans); color: var(--ink-3); }
html.theme-airy :where(.tl-unrev) {
  height: 32px; padding: 0 12px 0 10px; gap: 8px; border-radius: 999px;
  background: var(--an-chip); color: var(--ink-2);
  font: 500 var(--fs-sm) var(--sans);
  transition: background-color var(--dur) var(--ease);
}
html.theme-airy :where(.tl-unrev):hover { background: var(--an-chip-hover); }
html.theme-airy :where(.tl-unrev)[aria-checked="true"] {
  background: var(--accent-tint); color: var(--accent-dark); box-shadow: inset 0 0 0 1px var(--accent-line);
}
/* The target that is open: a pastel chip in the module's colour. */
html.theme-airy :where(.tl-target) {
  gap: 8px; min-height: 36px; padding: 0 5px 0 12px; border-radius: 12px;
  background: #f8f2f7;
  background: color-mix(in srgb, var(--mod-ligands) 7%, #fff);
  box-shadow: inset 0 0 0 1px #ecdbe8;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mod-ligands) 18%, #fff);
  color: var(--ink-3);
}
html.theme-airy :where(.tl-target) b { font-weight: 650; color: var(--ink); }
html.theme-airy :where(.tl-inerr) { font: 500 var(--fs-xs) var(--sans); }

/* ---- candidates of a name search -------------------------------------- */

html.theme-airy :where(.tl-pick) { gap: 10px; padding: 12px var(--gut) 14px; border-bottom-color: var(--line-2); }
html.theme-airy :where(.tl-pick__head) b { font-weight: 650; }
html.theme-airy :where(.tl-cands) {
  border: 0; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--an-card);
}
html.theme-airy :where(.tl-cand) { gap: 14px; padding: 10px 14px; border-bottom-color: var(--line-3); }
html.theme-airy :where(.tl-cand__acc) {
  font: 650 var(--fs-sm) var(--sans); font-variant-numeric: tabular-nums; letter-spacing: .01em; color: var(--ink);
}
html.theme-airy :where(.tl-cand__name) b { font-weight: 600; }
/* The marks and the "in <set> as ..." chips: soft pills. */
html.theme-airy :where(.tl-mark),
html.theme-airy :where(.tl-chip) {
  height: 22px; padding: 0 9px;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--an-chip); color: var(--ink-3);
  font: 600 11.5px/20px var(--sans); letter-spacing: .01em;
}
html.theme-airy :where(.tl-mark) { display: inline-flex; align-items: center; }
html.theme-airy :where(.tl-mark).tl-mark--rev { background: var(--accent-tint); border-color: var(--accent-line); color: var(--accent-dark); }
html.theme-airy :where(.tl-mark).tl-mark--lig { background: var(--pass-tint); border-color: var(--pass-line); color: var(--pass); }
html.theme-airy :where(.tl-chip).tl-chip--quiet { border: 1px dashed var(--line-strong); background: transparent; color: var(--muted); }
html.theme-airy :where(.tl-nolig) { font-size: var(--fs-xs); }

/* ---- the filter strip: a pale band of controls and pill toggles ------- */

html.theme-airy :where(.tl-filters) {
  gap: 8px 14px; min-height: 56px; padding: 10px var(--gut);
  background: var(--surface-1); border-bottom-color: var(--line-2);
}
html.theme-airy :where(.tl-filters) label { gap: 8px; font: 500 var(--fs-sm) var(--sans); color: var(--ink-3); }
html.theme-airy :where(.tl-filters) label[role="checkbox"] {
  height: 32px; padding: 0 12px 0 10px; border-radius: 999px;
  background: var(--surface); color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
html.theme-airy :where(.tl-filters) label[role="checkbox"]:hover { box-shadow: inset 0 0 0 1px var(--line-control-hover); }
html.theme-airy :where(.tl-filters) label[role="checkbox"][aria-checked="true"] {
  background: var(--accent-tint); color: var(--accent-dark); box-shadow: inset 0 0 0 1px var(--accent-line);
}
html.theme-airy :where(.tl-eq) { font: 500 var(--fs-xs) var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-3); }

/* ---- the line above the table ---------------------------------------- */

html.theme-airy :where(.tl-head) { gap: 8px 16px; padding: 10px var(--gut); border-bottom-color: var(--line-2); }
html.theme-airy :where(.tl-head) b { font: 700 var(--fs-sm) var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
html.theme-airy :where(.tl-src) { font-size: var(--fs-xs); line-height: 1.45; font-variant-numeric: tabular-nums; color: var(--an-warn-ink); }

/* ---- the table -------------------------------------------------------- */

html.theme-airy :where(.tl-name) { gap: 5px; }
html.theme-airy :where(.tl-name__t) { font: 600 var(--fs-md)/1.3 var(--sans); letter-spacing: -.005em; color: var(--ink); }
html.theme-airy :where(.tl-act) { font: 500 var(--fs-sm) var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-2); }
html.theme-airy :where(.tl-num) { font: 500 var(--fs-sm) var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-2); }
/* pAct as a pill tinted by potency band (pactBand in pane-ligands.js). */
html.theme-airy :where(.tl-row) > .tl-pact {
  justify-self: end; display: inline-flex; align-items: center; justify-content: flex-end;
  height: 26px; padding: 0 9px; margin-right: 4px; border-radius: 999px;
  font: 650 var(--fs-sm)/1 var(--sans); font-variant-numeric: tabular-nums;
  background: var(--an-band-mid-bg); color: var(--an-band-mid-ink);
  box-shadow: inset 0 0 0 1px var(--an-band-mid-line);
}
html.theme-airy :where(.tl-row) > .tl-pact.tl-pact--hi {
  background: var(--an-band-hi-bg); color: var(--an-band-hi-ink); box-shadow: inset 0 0 0 1px var(--an-band-hi-line);
}
html.theme-airy :where(.tl-row) > .tl-pact.tl-pact--lo {
  background: var(--an-band-lo-bg); color: var(--an-band-lo-ink); box-shadow: inset 0 0 0 1px var(--an-band-lo-line);
}
html.theme-airy :where(.tl-row) > .tl-pact.tl-pact--none {
  background: none; box-shadow: none; color: var(--muted); font-weight: 500;
}
html.theme-airy :where(.tl-pact-h) .info-i { text-transform: none; }

/* ---- the action line under the table (Target ligands and Search) ------ */

html.theme-airy :where(.tl-foot),
html.theme-airy :where(.sr-foot) {
  position: relative; z-index: 1;
  gap: 10px; min-height: 60px; padding: 12px var(--gut);
  border-top-color: var(--line-2);
  box-shadow: 0 -10px 24px -18px rgba(16, 24, 40, .3);
}

/* ---- errors, empty and waiting states --------------------------------- */

html.theme-airy :where(.tl-error) {
  padding: 10px 14px; border: 0; border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--fail-line);
}
/* These two panes build their empty cards from plain .eyebrow / .h2 / p, not
   the shared empty__ parts: the same look as the base part's empty state. */
html.theme-airy :where(.tl-empty) .h2,
html.theme-airy :where(.sr-empty) .h2 {
  font: 700 20px/1.3 var(--sans); letter-spacing: -.02em;
}
html.theme-airy :where(.tl-empty) .empty__icon + .eyebrow,
html.theme-airy :where(.sr-empty) .empty__icon + .eyebrow {
  color: var(--ink-3);
  color: color-mix(in srgb, var(--glyph, var(--airy-mod, var(--muted))) 60%, var(--ink-3));
}
/* "not available": a caveat, so rust (amber is licence and trial news). */
html.theme-airy :where(.tl-empty) .eyebrow.tl-eyebrow--amber,
html.theme-airy :where(.sr-empty) .eyebrow.sr-eyebrow--amber { color: var(--an-warn-ink); }
html.theme-airy :where(.tl-progress) { gap: 12px; }
html.theme-airy :where(.tl-prog__line) { font: 500 var(--fs-md) var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-2); }
html.theme-airy :where(.tl-prog__t) { font: 500 var(--fs-xs) var(--sans); font-variant-numeric: tabular-nums; }

/* ---- the side panel (Target ligands and Search) ----------------------- */

html.theme-airy :where(.tl-panel),
html.theme-airy :where(.sr-panel) { border-left-color: var(--line-2); }
html.theme-airy :where(.tl-depict),
html.theme-airy :where(.sr-depict) {
  margin: 12px 12px 0;
  border: 0; border-radius: var(--r-card);
  background: var(--surface); box-shadow: var(--an-card);
}
html.theme-airy :where(.tl-panel) > .panel__head + .tl-depict,
html.theme-airy :where(.sr-panel) > .panel__head + .sr-depict { margin-top: 2px; }
html.theme-airy :where(.tl-plate) { font: 500 var(--fs-xs) var(--sans); color: var(--muted); }
html.theme-airy :where(.sr-depict) .plate { font: 500 var(--fs-xs) var(--sans); color: var(--muted); }

html.theme-airy :where(.tl-m) { gap: 4px; padding: 11px 0; border-bottom-color: var(--line-3); }
html.theme-airy :where(.tl-m):last-child { border-bottom: 0; }
html.theme-airy :where(.tl-m__v) { font: 650 var(--fs-sm)/1.4 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
html.theme-airy :where(.tl-m__a) { font-size: var(--fs-sm); color: var(--ink-2); }
html.theme-airy :where(.tl-m__r),
html.theme-airy :where(.tl-m__s) { font: 500 var(--fs-xs)/1.5 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-3); }
/* The unreported-qualifier caveat: rust, not amber. */
html.theme-airy :where(.tl-m__q) { font: 500 var(--fs-xs)/1.45 var(--sans); color: var(--an-warn-ink); }
html.theme-airy :where(.tl-m__d) { font-size: var(--fs-xs); }
html.theme-airy :where(.tl-doc) { padding: 10px 0; border-bottom-color: var(--line-3); }
html.theme-airy :where(.tl-doc__t) { font-weight: 500; color: var(--ink-2); }

/* ====================================================================== */
/*  Library search                                                         */
/* ====================================================================== */

/* ---- left column: a stack of cards ------------------------------------ */

html.theme-airy :where(.sr-left) {
  gap: 12px; padding: 12px;
  background: var(--surface-1); border-right-color: var(--line-2);
}
html.theme-airy :where(.sr-left) > .sr-sec {
  gap: 10px; padding: 14px 16px 16px;
  border: 0; border-radius: var(--r-card);
  background: var(--surface); box-shadow: var(--an-card);
}
/* The pane rules a line between its sections; as cards they need none. */
html.theme-airy :where(.sr-left) > .sr-sec + .sr-sec { padding-top: 14px; border-top: 0; }
html.theme-airy :where(.sr-row) { gap: 10px; }
html.theme-airy :where(.sr-note) { font-size: var(--fs-sm); line-height: 1.5; }
html.theme-airy :where(.sr-mono) { font: 500 var(--fs-xs)/1.5 var(--sans); font-variant-numeric: tabular-nums; }

/* Queries: the picker button with its count as a pill. */
html.theme-airy :where(.sr-choose).btn { padding: 0 8px 0 14px; }
html.theme-airy :where(.sr-count) {
  padding: 4px 9px; border-radius: 999px; background: var(--an-chip);
  font: 600 var(--fs-xs)/1 var(--sans); font-variant-numeric: tabular-nums;
}
html.theme-airy :where(.sr-choose):disabled .sr-count { background: none; }
html.theme-airy :where(.sr-chips) { gap: 6px; }
html.theme-airy :where(.sr-more) { font: 500 var(--fs-xs) var(--sans); font-variant-numeric: tabular-nums; }

/* Mode: the shared segmented control, full width and a little taller. */
html.theme-airy :where(.sr-seg).seg { display: flex; }
html.theme-airy :where(.sr-seg).seg > .btn,
html.theme-airy :where(.sr-seg).seg > .btn:hover:not(:disabled) { flex: 1 1 0; min-height: 32px; }

/* Libraries: a ticked library is tinted, its size a pill. */
html.theme-airy :where(.sr-lib) {
  gap: 10px; margin: 0 -10px; padding: 8px 10px; border-radius: 10px;
  font-size: var(--fs-md);
}
html.theme-airy :where(.sr-lib) + .sr-lib { margin-top: -6px; }
html.theme-airy :where(.sr-lib):hover { background: var(--an-well); }
html.theme-airy :where(.sr-lib)[aria-checked="true"] { background: var(--accent-tint); }
html.theme-airy :where(.sr-lib)[aria-checked="true"]:hover { background: var(--accent-tint-2); }
html.theme-airy :where(.sr-lib__n) {
  padding: 3px 8px; border-radius: 999px;
  background: var(--an-chip); color: var(--ink-3);
  font: 600 11.5px/1 var(--sans); font-variant-numeric: tabular-nums;
}
html.theme-airy :where(.sr-lib)[aria-checked="true"] .sr-lib__n { background: rgba(255, 255, 255, .8); color: var(--accent-dark); }
html.theme-airy :where(.sr-lib__desc) { font-size: var(--fs-xs); }

/* Settings: the threshold figure as an accent pill. */
html.theme-airy :where(.sr-lab) { flex-basis: 100px; font: 500 var(--fs-sm) var(--sans); color: var(--ink-2); }
html.theme-airy :where(.sr-range) { accent-color: var(--accent-strong); }
html.theme-airy :where(.sr-out) {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; min-width: 48px; height: 26px; padding: 0 9px; border-radius: 999px;
  background: var(--accent-tint); color: var(--accent-dark);
  box-shadow: inset 0 0 0 1px var(--accent-line);
  font: 650 var(--fs-sm)/1 var(--sans); font-variant-numeric: tabular-nums;
}

/* This search: the one action card, lit in the accent. */
html.theme-airy :where(.sr-run) {
  gap: 14px; padding: 16px;
  border: 0; border-radius: var(--r-card);
  background: #f6f9ff;
  background: linear-gradient(180deg, #f2f6ff 0, var(--surface) 120px);
  box-shadow: 0 0 0 1px var(--accent-line), var(--an-float);
}
html.theme-airy :where(.sr-run) .sr-sec + .sr-sec { padding-top: 14px; border-top-color: var(--line-2); }
html.theme-airy :where(.sr-figure) { gap: 10px; }
html.theme-airy :where(.sr-big) {
  font: 700 40px/1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  color: var(--accent-dark);
}
html.theme-airy :where(.sr-unit) { font: 600 var(--fs-md) var(--sans); color: var(--muted); }
html.theme-airy :where(.sr-log) {
  padding: 10px 12px; border: 0; border-radius: 10px;
  background: var(--an-well); box-shadow: inset 0 0 0 1px var(--line-2);
}

/* ---- results ---------------------------------------------------------- */

html.theme-airy :where(.sr-head) { gap: 8px 14px; padding: 10px var(--gut); border-bottom-color: var(--line-2); }
html.theme-airy :where(.sr-head__stat) b { font: 700 var(--fs-sm) var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
html.theme-airy :where(.sr-cell) { font: 500 var(--fs-sm) var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-3); }
/* Tanimoto as a pill tinted by similarity band (tanBand in pane-search.js). */
html.theme-airy :where(.tr) > .sr-tan {
  justify-self: end; align-self: center;
  display: inline-flex; align-items: center; justify-content: flex-end;
  height: 26px; padding: 0 9px; margin-right: 4px; border-radius: 999px;
  font: 650 var(--fs-sm)/1 var(--sans); font-variant-numeric: tabular-nums;
  background: var(--an-band-mid-bg); color: var(--an-band-mid-ink);
  box-shadow: inset 0 0 0 1px var(--an-band-mid-line);
}
html.theme-airy :where(.tr) > .sr-tan.sr-tan--hi {
  background: var(--an-band-hi-bg); color: var(--an-band-hi-ink); box-shadow: inset 0 0 0 1px var(--an-band-hi-line);
}
html.theme-airy :where(.tr) > .sr-tan.sr-tan--mid {
  background: var(--an-band-mid-bg); color: var(--an-band-mid-ink); box-shadow: inset 0 0 0 1px var(--an-band-mid-line);
}
html.theme-airy :where(.tr) > .sr-tan.sr-tan--lo {
  background: var(--an-band-lo-bg); color: var(--an-band-lo-ink); box-shadow: inset 0 0 0 1px var(--an-band-lo-line);
}

/* ---- the hit panel and the query picker -------------------------------- */

html.theme-airy :where(.sr-facts) { gap: 8px; }
html.theme-airy :where(.sr-qhit) { gap: 12px; }
html.theme-airy :where(.sr-qid) { font: 650 var(--fs-sm) var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
html.theme-airy :where(.sr-qlist) { gap: 2px; padding: 4px; }
html.theme-airy :where(.sr-qhead) { gap: 10px; padding-bottom: 10px; }
html.theme-airy :where(.sr-qgrid) { gap: 10px; }

/* ====================================================================== */
/*  Sketcher                                                               */
/* ====================================================================== */

/* The pane below its bar is the pale canvas the editor card sits on. */
html.theme-airy :where([data-pane="sketcher"]) { background: var(--surface-1); }
html.theme-airy :where(.sk-bar) {
  gap: 10px; min-height: 60px; padding: 12px var(--gut);
  border-bottom-color: var(--line-2);
}
html.theme-airy :where(.sk-prefix) { gap: 8px; font: 500 var(--fs-sm) var(--sans); color: var(--ink-3); }
html.theme-airy :where(.sk-prefix) .input { width: 104px; letter-spacing: .04em; }
/* Fragment mode, when on: the pressed tint (the pane's) plus a dot. */
html.theme-airy :where(.sk-toggle)[aria-pressed="true"] { font-weight: 600; }
/* Pressed it is the pane's tint, not the primary: no glow round its focus. */
html.theme-airy :where(.sk-toggle).btn--primary:focus-visible { box-shadow: var(--focus-ring); }
html.theme-airy :where(.sk-toggle)[aria-pressed="true"]::before {
  content: ""; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-strong);
}
/* The fragment strip: a lavender card in the sketcher's own colour. */
html.theme-airy :where(.sk-frag) {
  gap: 10px; margin: 12px 12px 0; padding: 14px 16px;
  border: 0; border-radius: var(--r-card);
  background: #f4f3fc;
  background: color-mix(in srgb, var(--mod-sketcher) 7%, #fff);
  box-shadow: inset 0 0 0 1px #dedbf3, 0 1px 2px rgba(16, 24, 40, .04);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mod-sketcher) 22%, #fff), 0 1px 2px rgba(16, 24, 40, .04);
}
html.theme-airy :where(.sk-note) { font-size: var(--fs-sm); line-height: 1.55; }
html.theme-airy :where(.sk-frag__row) { gap: 10px; }
/* The editor itself: a white card. Nothing inside the frame is styled. */
html.theme-airy :where(.sk-wrap) { padding: 12px; background: var(--surface-1); }
html.theme-airy :where(.sk-frame) {
  border: 0; border-radius: var(--r-card); background: var(--surface);
  box-shadow: var(--an-card);
}
/* In fragment mode the editor is ringed in the sketcher's colour. */
html.theme-airy :where([data-pane="sketcher"]):has(.sk-toggle[aria-pressed="true"]) .sk-frame {
  box-shadow: 0 0 0 2px #c9c4ec, var(--an-float);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mod-sketcher) 40%, #fff), var(--an-float);
}
/* Saved / refused: rounded notes with a hairline in their tone. */
html.theme-airy :where(.sk-status).is-ok > .sk-msg,
html.theme-airy :where(.sk-status).is-err > .sk-msg { padding: 5px 12px; border-radius: 12px; font-weight: 500; }
html.theme-airy :where(.sk-status).is-ok > .sk-msg { box-shadow: inset 0 0 0 1px var(--pass-line); }
html.theme-airy :where(.sk-status).is-err > .sk-msg { box-shadow: inset 0 0 0 1px var(--fail-line); }

/* ====================================================================== */
/*  The property radar (Compounds and Results panels; dvs-radar.js)        */
/* ====================================================================== */

/* Values in the UI face with tabular figures, labels a touch heavier, the
   rings a shade lighter; colours stay the attributes the chart sets. */
html.theme-airy :where(.dvsr-svg) .dvsr-grid { stroke: var(--line-2); }
html.theme-airy :where(.dvsr-svg) .dvsr-axis { font-weight: 600; fill: var(--ink-2); }
html.theme-airy :where(.dvsr-svg) .dvsr-val { font-family: var(--sans); font-weight: 500; font-variant-numeric: tabular-nums; }
html.theme-airy :where(.dvsr-svg) .dvsr-val.is-fail { font-weight: 700; }
html.theme-airy :where(.dvsr-svg) .dvsr-rule { fill-opacity: 1; stroke-opacity: .4; }
html.theme-airy :where(.dvsr-svg) .dvsr-shape { fill-opacity: .2; stroke-width: 2.25px; }
/* The rule cog: a softer square with a hairline lift, like the other icon
   buttons; the caption in the UI face with tabular figures. */
html.theme-airy :where(.dvsr-cog) { width: 28px; height: 28px; border-radius: 8px; box-shadow: var(--shadow-xs); }
html.theme-airy :where(.dvsr-cap) {
  font: 500 var(--fs-xs)/1.4 var(--sans); font-variant-numeric: tabular-nums;
}
html.theme-airy :where(.dvsr-cap).is-fail { font-weight: 600; }


/* ====================================================================== */
/*  Part 40, pages: the workspace screens (Home, Projects, Account and the */
/*  hosted Plan & usage), the public landing page, sign-in and the hosted  */
/*  doors.                                                                 */
/* ====================================================================== */
/*
 * Scoping. These pages name their own parts with short, generic classes
 * (.note, .steps, .step, .rule, .foot, .target, .trial, .tools ...), and
 * several of those names also exist in the workbench panes, or on another
 * of these pages with another meaning (.rule is a section on Home and the
 * "or" divider on sign-in). So every page rule below is scoped by the class
 * its <body> carries:
 *
 *   pg-home      app/home.html          pg-landing   app/index.html
 *   pg-projects  app/projects.html      pg-signin    app/signin.html
 *   pg-account   app/account.html       pg-door      hosted_ui/index.html,
 *   pg-plan      hosted_ui/account.html              hosted_ui/signin.html
 *
 * The workspace frame (.wshell .wnav .wtop .wmain) and the split frame
 * (.split .split__dark .split__light) only exist on these pages, so their
 * rules follow the theme's :where() recipe unscoped.
 *
 * The look, page by page: the workspace pages sit on the off-white canvas
 * like the workbench (borderless nav, the page itself one floating white
 * sheet); nav rows carry pastel icon tiles and the current one is a raised
 * white row with its tile filled. Groups of content are white cards (16-20px
 * corners, a ring and a soft shadow). Sign-in and the hosted doors put the
 * dark brand panel and the form on the canvas as two rounded cards. The
 * landing page keeps its sections but draws them as inset rounded bands,
 * card grids and a redrawn product miniature.
 *
 * Amber stays for licence and trial only: the "name already used" notes on
 * Home and Projects and an optional tool that is not installed move to a
 * blue note and a neutral pill. Icons are inline SVG (lucide paths, the
 * licence ships in assets/LICENSE-lucide): no request, no font.
 */

/* ---- page tokens -------------------------------------------------------- */
/* Each falls back to the value the theme uses, so this part also reads
   right on its own. */

html.theme-airy {
  --pg-canvas: var(--airy-canvas, #f1f3f6);
  --pg-hover: var(--airy-rail-hover, #e6e9ee);
  --pg-pale: #f6f7f9;
  --pg-sheet-r: var(--airy-sheet-radius, 16px);
  --pg-sheet: var(--airy-sheet, 0 0 0 1px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .05), 0 16px 40px -20px rgba(16, 24, 40, .18));
  --pg-card: var(--airy-card, 0 0 0 1px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04), 0 2px 10px -4px rgba(16, 24, 40, .08));
  --pg-card-lg: var(--airy-card-lg, 0 0 0 1px rgba(16, 24, 40, .05), 0 2px 4px rgba(16, 24, 40, .03), 0 12px 32px -12px rgba(16, 24, 40, .14));
  --pg-lift: var(--airy-lift, 0 0 0 1px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px -4px rgba(16, 24, 40, .12));
  --pg-glow: var(--airy-glow, 0 1px 2px rgba(37, 99, 235, .22), 0 6px 14px -6px rgba(37, 99, 235, .55));
  --pg-tile-ring: inset 0 0 0 1px rgba(16, 24, 40, .04);
  /* A note that is not an error and not licence news. */
  --pg-info-bg: #f3f7fe;
  --pg-info-line: #cfdffb;

  /* Icon tiles: pastel = 14% of the module colour on white, the stroke 84%
     of it on ink; "on" = the solid tile of the current row. */
  --pg-t-home: #e4edf8;      --pg-t-home-on: #3f7fd0;
  --pg-t-projects: #e2edea;  --pg-t-projects-on: #2f7f6a;
  --pg-t-account: #eae9f7;   --pg-t-account-on: #6b5fc4;
  --pg-t-neutral: #eceef1;

  --pg-i-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23376fb5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
  --pg-i-home-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
  --pg-i-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a6f5f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E");
  --pg-i-folder-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E");
  --pg-i-folder-lg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a6f5f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E");
  --pg-i-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c54ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  --pg-i-user-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  --pg-i-gauge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c54ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 14 4-4'/%3E%3Cpath d='M3.34 19a10 10 0 1 1 17.32 0'/%3E%3C/svg%3E");
  --pg-i-gauge-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 14 4-4'/%3E%3Cpath d='M3.34 19a10 10 0 1 1 17.32 0'/%3E%3C/svg%3E");
  --pg-i-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23565d6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' x2='9' y1='12' y2='12'/%3E%3C/svg%3E");
  --pg-i-plus-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
  --pg-i-flask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23376fb5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2'/%3E%3Cpath d='M8.5 2h7'/%3E%3Cpath d='M7 16h10'/%3E%3C/svg%3E");
  --pg-i-check-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316794a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --pg-i-check-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d5bd0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --pg-i-check-cyan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235fc0e8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --pg-i-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23636a78' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  --pg-i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23875b00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
  --pg-i-badge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d5bd0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  --pg-i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b42318' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  --pg-i-wrench: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a6d8b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
  --pg-i-monitor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23565d6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='3' rx='2'/%3E%3Cline x1='8' x2='16' y1='21' y2='21'/%3E%3Cline x1='12' x2='12' y1='17' y2='21'/%3E%3C/svg%3E");
  --pg-i-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d5bd0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E");
  --pg-i-unplug: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b42318' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19 5 3-3'/%3E%3Cpath d='m2 22 3-3'/%3E%3Cpath d='M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z'/%3E%3Cpath d='M7.5 13.5 10 11'/%3E%3Cpath d='M10.5 16.5 13 14'/%3E%3Cpath d='m12 6 6 6 2.3-2.3a2.4 2.4 0 0 0 0-3.4l-2.6-2.6a2.4 2.4 0 0 0-3.4 0Z'/%3E%3C/svg%3E");
}

/* ====================================================================== */
/*  Workspace frame: canvas, nav, the floating page sheet                  */
/* ====================================================================== */

html.theme-airy :where(.wshell) { background: var(--pg-canvas); }

html.theme-airy :where(.wnav) {
  background: transparent; border-right: 0;
  padding: 0 10px 14px; gap: 18px;
}
/* Level with the sheet's header row, which starts 10px down. */
html.theme-airy :where(.wnav__brand) {
  border-bottom: 0; margin: 10px -10px 0; padding: 0 20px; gap: 11px;
}
html.theme-airy :where(.wnav__brand) img {
  width: 30px; height: 30px;
  filter: drop-shadow(0 2px 4px rgba(37, 99, 235, .22));
}
html.theme-airy :where(.wnav__word) { font: 700 19px/1 var(--sans); letter-spacing: -.025em; color: var(--ink); }
/* "workspace" reads as a sentence-case group name, as on the rail. */
html.theme-airy :where(.wnav__group) > .eyebrow {
  padding: 0 12px 8px; text-transform: none; letter-spacing: 0;
  font: 600 12.5px/1.2 var(--sans); color: var(--muted);
}
html.theme-airy :where(.wnav__group) > .eyebrow::first-letter { text-transform: uppercase; }
html.theme-airy :where(.wnav__items) { gap: 3px; }

html.theme-airy :where(.wnav__item) {
  min-height: 42px; padding: 0 12px 0 7px; gap: 12px; border-radius: 12px;
  font: 500 var(--fs-md)/1.25 var(--sans); color: var(--ink-2);
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}
html.theme-airy :where(.wnav__item):hover { background: var(--pg-hover); color: var(--ink); }
html.theme-airy :where(.wnav__item).is-active,
html.theme-airy :where(.wnav__item).is-active:hover {
  background: var(--surface); color: var(--ink); font-weight: 600;
  box-shadow: var(--pg-lift);
}
html.theme-airy :where(.wnav__item).is-active::before {
  left: -10px; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0;
  background: var(--accent);
}
html.theme-airy :where(.wnav__item).is-static,
html.theme-airy :where(.wnav__item).is-static:hover { background: none; box-shadow: none; }
html.theme-airy :where(.wnav__item):focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* The icon tile: the item's ::after, drawn first (order -1). Which icon is
   read from the link's own address, so the JS-added "Sign out" and the
   hosted "/account/" link get theirs without a class. */
html.theme-airy :where(.wnav__item)::after {
  content: ""; order: -1;
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 9px;
  background: var(--pg-tile-i, none) center / 16px 16px no-repeat, var(--pg-tile, var(--pg-t-neutral));
  box-shadow: var(--pg-tile-ring);
}
html.theme-airy :where(.wnav__item).is-active::after {
  background: var(--pg-tile-i-on, var(--pg-tile-i, none)) center / 16px 16px no-repeat, var(--pg-tile-on, var(--accent));
  box-shadow: 0 3px 8px -3px var(--pg-tile-on, var(--accent));
}
html.theme-airy :where(.wnav__item)[href*="home"] {
  --pg-tile: var(--pg-t-home); --pg-tile-on: var(--pg-t-home-on);
  --pg-tile-i: var(--pg-i-home); --pg-tile-i-on: var(--pg-i-home-on);
}
html.theme-airy :where(.wnav__item)[href*="projects"] {
  --pg-tile: var(--pg-t-projects); --pg-tile-on: var(--pg-t-projects-on);
  --pg-tile-i: var(--pg-i-folder); --pg-tile-i-on: var(--pg-i-folder-on);
}
html.theme-airy :where(.wnav__item)[href*="account"] {
  --pg-tile: var(--pg-t-account); --pg-tile-on: var(--pg-t-account-on);
  --pg-tile-i: var(--pg-i-user); --pg-tile-i-on: var(--pg-i-user-on);
}
/* Hosted, account.html is "Plan & usage": a gauge, not a person. */
html.theme-airy .pg-plan :where(.wnav__item)[href="account.html"] {
  --pg-tile-i: var(--pg-i-gauge); --pg-tile-i-on: var(--pg-i-gauge-on);
}
html.theme-airy :where(.wnav__item)[href$="logout"] { --pg-tile: var(--pg-t-neutral); --pg-tile-i: var(--pg-i-logout); }

/* Where the server is: a small status chip, not a ruled footer line. */
html.theme-airy :where(.wnav__foot) {
  align-self: flex-start; margin-left: 4px;
  padding: 6px 12px 6px 10px; gap: 8px; border-top: 0; border-radius: 999px;
  background: rgba(16, 24, 40, .045);
  font: 500 12px/1.2 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-3);
}
html.theme-airy :where(.wnav__foot) .dot {
  width: 7px; height: 7px; flex-basis: 7px;
  box-shadow: 0 0 0 3px rgba(22, 121, 74, .16);
}

/* The page: one white sheet floating on the canvas. Its own scroll box, so
   the sticky header is clipped to the sheet's rounded corners. */
html.theme-airy :where(.wmain) {
  margin: 10px 12px 12px 0;
  background: var(--surface);
  border-radius: var(--pg-sheet-r);
  box-shadow: var(--pg-sheet);
}
html.theme-airy :where(.wtop) {
  padding: 0 44px; gap: 14px;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line-2);
}
html.theme-airy :where(.wtop__title) { font: 700 19px/1.2 var(--sans); letter-spacing: -.022em; }
html.theme-airy :where(.wtop__right) { gap: 10px; }
/* "Upgrade" beside the plan pill: a soft blue pill link. */
html.theme-airy :where(.wtop__right) a:not(.btn) {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px;
  border-radius: 999px; background: var(--accent-tint); color: var(--accent-dark);
  box-shadow: inset 0 0 0 1px var(--accent-line);
  font: 600 var(--fs-xs)/1 var(--sans);
}
html.theme-airy :where(.wtop__right) a:not(.btn):hover { background: var(--accent-tint-2); color: var(--accent-dark); text-decoration: none; }
html.theme-airy :where(.wtop__right) a:not(.btn):focus-visible { outline: none; box-shadow: var(--focus-ring); }
html.theme-airy :where(.wmain__inner) { padding: 34px 44px 64px; gap: 28px; }

/* Stacked on a narrow window (dvs.css stacks the shell at 860px). */
@media (max-width: 860px) {
  html.theme-airy :where(.wnav) { border-bottom: 0; padding: 0 12px 10px; gap: 10px; }
  html.theme-airy :where(.wnav__brand) { margin: 0 -12px; padding: 0 20px; }
  html.theme-airy :where(.wnav__items) { gap: 6px; }
  html.theme-airy :where(.wnav__item).is-active::before { display: none; }
  html.theme-airy :where(.wmain) { margin: 0 12px 12px; }
  html.theme-airy :where(.wtop) { padding: 0 20px; border-radius: var(--pg-sheet-r) var(--pg-sheet-r) 0 0; }
  html.theme-airy :where(.wmain__inner) { padding: 22px 20px 40px; }
}

/* The server not answering (Home, Account): the shared empty card, with a
   large pastel tile on top, an unplugged cable on red. */
html.theme-airy :is(.pg-home, .pg-account) .empty::before {
  content: ""; flex: 0 0 auto; width: 52px; height: 52px; margin-bottom: 2px; border-radius: 16px;
  background: var(--pg-i-unplug) center / 24px 24px no-repeat, #fdeeec;
  box-shadow: var(--pg-tile-ring);
}
html.theme-airy :is(.pg-home, .pg-account) .empty .h2 { font: 700 22px/1.25 var(--sans); letter-spacing: -.022em; }

/* ====================================================================== */
/*  Home                                                                   */
/* ====================================================================== */

html.theme-airy .pg-home .wmain__inner { gap: 32px; }

html.theme-airy .pg-home .intro { gap: 12px; max-width: 660px; }
html.theme-airy .pg-home .intro .h1 { font: 700 34px/1.12 var(--sans); letter-spacing: -.032em; }
html.theme-airy .pg-home .intro .lede { font-size: 16.5px; line-height: 1.6; }

html.theme-airy .pg-home .hrow { gap: 28px; }
/* The two columns open on one card edge: the start column is pushed down by
   the projects column's head row (22px) and its gap (12px). */
html.theme-airy .pg-home .block { gap: 12px; }
html.theme-airy .pg-home .pjs { gap: 12px; }
html.theme-airy .pg-home .block__head { height: 22px; align-items: center; gap: 10px; }
html.theme-airy .pg-home .hrow__start { padding-top: 34px; gap: 14px; }
html.theme-airy .pg-home .block__head .eyebrow {
  text-transform: none; letter-spacing: -.01em;
  font: 650 16px/1.2 var(--sans); color: var(--ink);
}
html.theme-airy .pg-home .block__head .eyebrow::first-letter { text-transform: uppercase; }
html.theme-airy .pg-home .block__count {
  padding: 5px 9px; border-radius: 999px; background: rgba(16, 24, 40, .06);
  font: 600 12px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-3);
}

/* One card recipe for the new-project form, the example and the job bar. */
html.theme-airy .pg-home .start,
html.theme-airy .pg-home .example,
html.theme-airy .pg-home .jobbar {
  border: 0; border-radius: 18px; padding: 22px 24px;
  background: var(--surface); box-shadow: var(--pg-card);
}

/* New project: the primary card, a blue wash in its corner and a solid
   blue "+" tile beside its title. */
html.theme-airy .pg-home .start { gap: 12px; }
html.theme-airy .pg-home .start.start--primary {
  padding: 24px 26px 26px;
  background: radial-gradient(120% 70% at 0% 0%, #eef4ff 0%, rgba(238, 244, 255, 0) 62%), var(--surface);
  box-shadow: var(--pg-card-lg);
}
html.theme-airy .pg-home .start__title {
  display: flex; align-items: center; gap: 12px;
  font: 700 19px/1.25 var(--sans); letter-spacing: -.02em;
}
html.theme-airy .pg-home .start__title::before {
  content: ""; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 11px;
  background: var(--pg-i-plus-on) center / 18px 18px no-repeat, var(--accent-strong);
  box-shadow: var(--pg-glow);
}
html.theme-airy .pg-home .start__note { font-size: 14.5px; line-height: 1.55; }
html.theme-airy .pg-home .start .field { margin-top: 2px; gap: 7px; }
html.theme-airy .pg-home .start .field > label { font: 600 13.5px var(--sans); color: var(--ink-2); }
html.theme-airy .pg-home .start .input { min-height: 42px; padding: 0 14px; border-radius: 11px; font-size: 15px; }
html.theme-airy .pg-home .start .btn { margin-top: 4px; }
html.theme-airy .pg-home .start .btn.btn--primary { min-height: 40px; padding: 0 18px; border-radius: 11px; }
html.theme-airy .pg-home .formerr { font-weight: 500; }
/* A name that is already a project: a blue note (amber is for licence news). */
html.theme-airy .pg-home .nametaken {
  padding: 10px 12px 10px 14px; border: 0; border-radius: 12px;
  background: var(--pg-info-bg); color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--pg-info-line);
}
html.theme-airy .pg-home .start .nametaken .btn { margin: 0; }

/* The example: a pastel flask tile beside its question. */
html.theme-airy .pg-home .example { gap: 14px; }
html.theme-airy .pg-home .example__text { gap: 6px; }
html.theme-airy .pg-home .example__title {
  display: flex; align-items: center; gap: 12px; margin-bottom: 4px;
  font: 700 16.5px/1.3 var(--sans); letter-spacing: -.015em;
}
html.theme-airy .pg-home .example__title::before {
  content: ""; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 11px;
  background: var(--pg-i-flask) center / 18px 18px no-repeat, var(--pg-t-home);
  box-shadow: var(--pg-tile-ring);
}
html.theme-airy .pg-home .example__body { font-size: 14.5px; }
html.theme-airy .pg-home .example__meta {
  margin-top: 4px; padding: 9px 12px; border-radius: 10px;
  background: var(--pg-pale); color: var(--muted); font-size: 13px;
}

/* A run in progress: a teal wash, and the breathing dot with a halo. */
html.theme-airy .pg-home .jobbar {
  padding: 18px 22px;
  background: linear-gradient(90deg, #eaf3f6 0%, rgba(234, 243, 246, 0) 60%), var(--surface);
}
html.theme-airy .pg-home .jobbar__head { font: 650 15.5px/1.3 var(--sans); }
html.theme-airy .pg-home .jobbar .dot {
  width: 9px; height: 9px; flex: 0 0 9px;
  box-shadow: 0 0 0 4px rgba(47, 125, 158, .18);
}
html.theme-airy .pg-home .jobbar .btn { min-height: 40px; padding: 0 18px; border-radius: 11px; }

/* The recent projects: one card, a folder tile per row. */
html.theme-airy .pg-home .pjs > .card {
  border: 0; border-radius: 18px; overflow: hidden; box-shadow: var(--pg-card);
}
html.theme-airy .pg-home .prow--head {
  height: 38px; padding: 0 18px; border-radius: 0;
  background: #fbfcfd; border-bottom: 1px solid var(--line-2);
}
html.theme-airy .pg-home .prow {
  height: 56px; padding: 0 18px;
  border-bottom-color: var(--line-3); font-size: 14.5px;
}
html.theme-airy .pg-home .prow:hover { background: var(--hover-row); }
html.theme-airy .pg-home .prow.is-active,
html.theme-airy .pg-home .prow.is-active:hover { background: #f5f8ff; box-shadow: inset 3px 0 0 var(--accent); }
html.theme-airy .pg-home .prow:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
html.theme-airy .pg-home .prow__name { font: 600 15px/1.3 var(--sans); letter-spacing: -.01em; }
html.theme-airy .pg-home .prow__name::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 30px; height: 30px; margin: -2px 12px 0 0; border-radius: 9px;
  background: var(--pg-i-folder) center / 16px 16px no-repeat, var(--pg-t-projects);
  box-shadow: var(--pg-tile-ring);
}
html.theme-airy .pg-home .prow.is-active .prow__name::before {
  background: var(--pg-i-folder-on) center / 16px 16px no-repeat, var(--pg-t-projects-on);
  box-shadow: 0 3px 8px -3px var(--pg-t-projects-on);
}
html.theme-airy .pg-home .prow__sets { margin-left: 10px; font: 500 12.5px var(--sans); color: var(--muted); }
html.theme-airy .pg-home .pjs__more { font-size: 14px; font-weight: 600; }

/* No projects yet: the friendly empty card, a large folder tile on top. */
html.theme-airy .pg-home .pjs__none {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: 26px 26px 28px; background: var(--surface);
}
html.theme-airy .pg-home .pjs__none::before {
  content: ""; width: 52px; height: 52px; border-radius: 16px;
  background: var(--pg-i-folder-lg) center / 24px 24px no-repeat, var(--pg-t-projects);
  box-shadow: var(--pg-tile-ring);
}
html.theme-airy .pg-home .pjs__lede { font-size: 15px; }

/* "What happens after that": five white step cards on a pale band, each
   numbered on a pastel tile in the colour of the module that does it. */
html.theme-airy .pg-home .rule {
  gap: 18px; padding: 26px 28px 28px; border-top: 0; border-radius: 22px;
  background: var(--pg-pale); box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .04);
}
html.theme-airy .pg-home .rule > .eyebrow {
  text-transform: none; letter-spacing: -.01em;
  font: 650 16px/1.2 var(--sans); color: var(--ink);
}
html.theme-airy .pg-home .rule > .eyebrow::first-letter { text-transform: uppercase; }
html.theme-airy .pg-home .steps { gap: 12px; align-items: stretch; }
html.theme-airy .pg-home .step {
  padding: 18px 18px 20px; gap: 6px; border-left: 0; border-radius: 16px;
  background: var(--surface); box-shadow: var(--pg-card);
}
html.theme-airy .pg-home .step__n {
  width: 34px; height: 34px; margin-bottom: 8px; border-radius: 11px;
  background: #eef3fe;
  background: color-mix(in srgb, var(--glyph, var(--accent)) 14%, #fff);
  color: var(--ink-2);
  color: color-mix(in srgb, var(--glyph, var(--accent)) 76%, #101828);
  font: 700 12.5px/1 var(--sans); font-variant-numeric: tabular-nums;
}
html.theme-airy .pg-home .step__name { font: 650 15px/1.35 var(--sans); letter-spacing: -.01em; }
html.theme-airy .pg-home .step__note { font-size: 13.5px; line-height: 1.5; }

@media (max-width: 1080px) {
  html.theme-airy .pg-home .hrow__start { padding-top: 0; }
}
@media (max-width: 860px) {
  html.theme-airy .pg-home .steps { gap: 10px; }
  html.theme-airy .pg-home .rule { padding: 20px; }
}

/* ====================================================================== */
/*  Projects                                                               */
/* ====================================================================== */

/* One card per group. */
html.theme-airy .pg-projects .pj-group {
  margin-bottom: 20px; border: 0; border-radius: 18px;
  box-shadow: var(--pg-card);
}
html.theme-airy .pg-projects .pj-group__head {
  height: 46px; padding: 0 20px; gap: 10px;
  background: #fbfcfd; border-bottom: 1px solid var(--line-2);
}
html.theme-airy .pg-projects .pj-group__name { font: 650 14.5px/1 var(--sans); letter-spacing: -.01em; color: var(--ink); }
html.theme-airy .pg-projects .pj-group__n {
  height: 22px; padding: 0 8px; border: 0; border-radius: 999px;
  background: rgba(16, 24, 40, .06); color: var(--ink-3);
  font: 600 12px/1 var(--sans); font-variant-numeric: tabular-nums;
}

html.theme-airy .pg-projects .pj-row {
  min-height: 66px; padding: 10px 20px; gap: 14px;
  border-bottom-color: var(--line-3);
}
html.theme-airy .pg-projects .pj-row:hover { background: var(--hover-row); }
html.theme-airy .pg-projects .pj-row.is-picked { background: #f5f8ff; }
html.theme-airy .pg-projects .pj-row.is-open { box-shadow: inset 3px 0 0 var(--accent); }
html.theme-airy .pg-projects .pj-row input[type="checkbox"] {
  width: 17px; height: 17px; accent-color: var(--accent-strong);
}

/* The name cell with its folder tile (filled for the open project). */
html.theme-airy .pg-projects .pj-name {
  position: relative; min-height: 36px; justify-content: center; padding-left: 48px;
}
html.theme-airy .pg-projects .pj-name::before {
  content: ""; position: absolute; left: 0; top: 50%; margin-top: -18px;
  width: 36px; height: 36px; border-radius: 11px;
  background: var(--pg-i-folder) center / 17px 17px no-repeat, var(--pg-t-projects);
  box-shadow: var(--pg-tile-ring);
}
html.theme-airy .pg-projects .pj-row.is-open .pj-name::before {
  background: var(--pg-i-folder-on) center / 17px 17px no-repeat, var(--pg-t-projects-on);
  box-shadow: 0 3px 8px -3px var(--pg-t-projects-on);
}
html.theme-airy .pg-projects .pj-name__main { font: 600 15px/1.35 var(--sans); letter-spacing: -.01em; }
html.theme-airy .pg-projects .pj-name__dir { font-size: 12.5px; }
html.theme-airy .pg-projects .pj-open-tag { margin-left: 8px; vertical-align: 2px; }
html.theme-airy .pg-projects .pj-sum { font-size: 13.5px; color: var(--ink-3); }
html.theme-airy .pg-projects .pj-when { font: 500 12.5px var(--sans); font-variant-numeric: tabular-nums; color: var(--muted); }
html.theme-airy .pg-projects .pj-acts { gap: 8px; }
html.theme-airy .pg-projects .pj-acts .btn { min-height: 32px; padding: 0 13px; border-radius: 9px; font-size: 13.5px; }

/* Renaming in place. */
html.theme-airy .pg-projects .pj-edit {
  min-height: 36px; padding: 0 12px; border-radius: 10px;
  font: 600 15px var(--sans); box-shadow: var(--focus-ring);
}
html.theme-airy .pg-projects .pj-taken {
  padding: 8px 12px; border: 0; border-radius: 10px;
  background: var(--pg-info-bg); color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--pg-info-line);
}

/* The selection bar: a frosted pill floating over the sheet, centred on it. */
html.theme-airy .pg-projects .pj-bar {
  bottom: 28px; left: calc(var(--w-rail) + (100vw - var(--w-rail) - 12px) / 2);
  padding: 8px 8px 8px 18px; gap: 8px;
  border: 0; border-radius: 16px;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .08), 0 4px 8px -2px rgba(16, 24, 40, .06), 0 24px 48px -12px rgba(16, 24, 40, .28);
}
html.theme-airy .pg-projects .pj-bar__count { margin-right: 6px; font: 650 14px var(--sans); color: var(--accent-dark); }

/* No projects: the friendly empty card with a large folder tile. A <p> of
   text and a link, so it stays a block (a flex column would split them). */
html.theme-airy .pg-projects .pj-empty {
  padding: 40px 28px 36px; border: 0; border-radius: 20px;
  background: var(--surface); box-shadow: var(--pg-card-lg);
  font-size: 15px; color: var(--ink-3);
}
html.theme-airy .pg-projects .pj-empty::before {
  width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 17px;
  background: var(--pg-i-folder-lg) center / 26px 26px no-repeat, var(--pg-t-projects);
  box-shadow: var(--pg-tile-ring);
}

/* The Group and Delete dialogs: the projects they name in a pale well. */
html.theme-airy .pg-projects .pj-dialog .modal__list {
  padding: 10px 14px 10px 32px; border-radius: 12px;
  background: var(--pg-pale); box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .05);
  font: 500 14px/1.55 var(--sans); color: var(--ink-2);
}
html.theme-airy .pg-projects .pj-dialog .input { min-height: 40px; border-radius: 11px; font-size: 15px; }

@media (max-width: 860px) {
  html.theme-airy .pg-projects .pj-bar { left: 50%; }
}

/* ====================================================================== */
/*  Account, and the hosted Plan & usage (the same shapes)                 */
/* ====================================================================== */

html.theme-airy :is(.pg-account, .pg-plan) .wmain__inner { gap: 30px; }
html.theme-airy :is(.pg-account, .pg-plan) .section { gap: 16px; }
html.theme-airy .pg-account .section__head .h2,
html.theme-airy .pg-plan .section > .h2 { font: 700 24px/1.2 var(--sans); letter-spacing: -.025em; }

html.theme-airy :is(.pg-account, .pg-plan) .card { border: 0; border-radius: 18px; box-shadow: var(--pg-card); }
html.theme-airy :is(.pg-account, .pg-plan) .card__pad { padding: 22px 24px; }
html.theme-airy :is(.pg-account, .pg-plan) .stack { gap: 14px; }
/* A card's first eyebrow is its title. */
html.theme-airy .pg-account .card > .eyebrow:first-child,
html.theme-airy .pg-account .envmore > .eyebrow {
  font: 650 16px/1.3 var(--sans); letter-spacing: -.01em; color: var(--ink);
}

/* The section switcher: an iOS-style segmented control that floats under
   the header while the page scrolls. Sized so a deep link still lands its
   section where the scroll-spy expects it (under 120px from the top). */
html.theme-airy .pg-account .subnav {
  top: calc(var(--h-topbar) + 6px); align-self: flex-start;
  gap: 2px; padding: 3px; border: 0; border-radius: 12px;
  background: rgba(233, 236, 241, .86);
  -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .04), 0 6px 18px -12px rgba(16, 24, 40, .35);
}
html.theme-airy .pg-account .subnav__item {
  height: 32px; padding: 0 16px; border-radius: 9px;
  font: 500 14px/1 var(--sans); color: var(--ink-3);
}
html.theme-airy .pg-account .subnav__item:hover { color: var(--ink); background: rgba(255, 255, 255, .6); box-shadow: none; }
html.theme-airy .pg-account .subnav__item.is-active,
html.theme-airy .pg-account .subnav__item.is-active:hover {
  background: var(--surface); color: var(--ink); font-weight: 600;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .12), 0 0 0 .5px rgba(16, 24, 40, .06);
}
html.theme-airy .pg-account .subnav__item:focus-visible { outline: none; border-radius: 9px; box-shadow: var(--focus-ring); }
html.theme-airy .pg-account .section { scroll-margin-top: calc(var(--h-topbar) + 48px); }

/* Ruled property lists. */
html.theme-airy :is(.pg-account, .pg-plan) .kvlist .kv {
  padding: 11px 0; border-bottom-color: var(--line-3); font-size: 14.5px;
}
html.theme-airy :is(.pg-account, .pg-plan) .kvlist .kv:first-child { padding-top: 2px; }
html.theme-airy :is(.pg-account, .pg-plan) .kvlist .kv:last-child { padding-bottom: 2px; }
html.theme-airy :is(.pg-account, .pg-plan) .kvlist .kv > span:first-child { font-weight: 500; color: var(--ink-3); }
html.theme-airy :is(.pg-account, .pg-plan) .kvlist .kv > span:last-child { color: var(--ink); }
html.theme-airy :is(.pg-account, .pg-plan) .kvlist .mono { font-size: 13.5px; }

/* The current-plan banner: a tinted card with a large tile — amber for a
   trial (licence news), blue once licensed, red for a missing tool. */
html.theme-airy .pg-account .banner { gap: 18px 22px; align-items: center; padding: 24px 26px; }
html.theme-airy .pg-account .banner::before {
  content: ""; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 14px; align-self: flex-start;
  background: var(--pg-i-clock) center / 22px 22px no-repeat, #fde9b8;
}
html.theme-airy .pg-account .banner--trial {
  border: 0;
  background: linear-gradient(135deg, #fff8e6 0%, #fff4d9 100%);
  box-shadow: inset 0 0 0 1px var(--amber-line), 0 2px 10px -4px rgba(135, 91, 0, .18);
}
html.theme-airy .pg-account .banner--licensed {
  border: 0;
  background: linear-gradient(135deg, #f1f6ff 0%, #e8f0fe 100%);
  box-shadow: inset 0 0 0 1px var(--accent-line), 0 2px 10px -4px rgba(37, 99, 235, .18);
}
html.theme-airy .pg-account .banner--licensed::before { background: var(--pg-i-badge) center / 22px 22px no-repeat, #dbe7fd; }
html.theme-airy .pg-account .banner--trial.banner--fail {
  background: linear-gradient(135deg, #fff6f5 0%, #fdeeec 100%);
  box-shadow: inset 0 0 0 1px var(--fail-line), 0 2px 10px -4px rgba(180, 35, 24, .15);
}
html.theme-airy .pg-account .banner--trial.banner--fail::before { background: var(--pg-i-alert) center / 22px 22px no-repeat, #fbdcd8; }
html.theme-airy .pg-account .banner__text { gap: 6px; }
html.theme-airy .pg-account .banner__title { font: 700 21px/1.25 var(--sans); letter-spacing: -.02em; }
html.theme-airy .pg-account .banner .lede { font-size: 15px; }
/* The toolchain verdict when nothing is missing (its lede opens with the
   green "all found" line): a teal wrench tile. Keyed on that line, so it
   holds when a diagnostics note is put above it. */
html.theme-airy .pg-account #env-body > .card:not(.banner):has(> .lede > .pass) {
  position: relative; padding-left: 84px;
}
html.theme-airy .pg-account #env-body > .card:not(.banner):has(> .lede > .pass)::before {
  content: ""; position: absolute; left: 24px; top: 22px; width: 44px; height: 44px; border-radius: 14px;
  background: var(--pg-i-wrench) center / 20px 20px no-repeat, #e2edf1;
  box-shadow: var(--pg-tile-ring);
}

/* Bound computers: a screen tile per row, the "here" marker as a pill,
   Release as a small white button. */
html.theme-airy .pg-account .machine { padding: 12px 0; gap: 12px; border-top-color: var(--line-3); }
html.theme-airy .pg-account .machine:first-child { padding-top: 2px; }
html.theme-airy .pg-account .machine::before {
  content: ""; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 10px;
  background: var(--pg-i-monitor) center / 16px 16px no-repeat, var(--pg-t-neutral);
  box-shadow: var(--pg-tile-ring);
}
html.theme-airy .pg-account .machine__name { font: 600 14.5px var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
html.theme-airy .pg-account .machine__here {
  height: 22px; padding: 0 9px; border: 0; border-radius: 999px;
  background: var(--accent-tint); color: var(--accent-dark);
  box-shadow: inset 0 0 0 1px var(--accent-line);
  font: 600 11.5px/1 var(--sans); letter-spacing: .01em;
}
html.theme-airy .pg-account .linkbtn {
  min-height: 30px; padding: 0 12px; border-radius: 9px;
  background: var(--surface); color: var(--ink-2);
  box-shadow: 0 0 0 1px var(--line-control), 0 1px 2px rgba(16, 24, 40, .06);
  font: 600 13.5px var(--sans);
}
html.theme-airy .pg-account .linkbtn:hover:not(:disabled) {
  background: var(--accent-tint); color: var(--accent-dark); box-shadow: 0 0 0 1px var(--accent-line);
}
html.theme-airy .pg-account .linkbtn:focus-visible { box-shadow: var(--focus-ring); }
html.theme-airy .pg-account .linkbtn:disabled { background: var(--surface-3); color: var(--disabled); box-shadow: none; }

/* Activating a key: taller fields, the key itself in the mono face. */
html.theme-airy .pg-account .form-row { gap: 14px; }
html.theme-airy .pg-account .form-row .input { min-height: 40px; border-radius: 11px; }
html.theme-airy .pg-account .form-row .input[name="key"] { font-family: var(--mono); letter-spacing: .02em; }
html.theme-airy .pg-account .form-row .btn { min-height: 40px; padding: 0 20px; border-radius: 11px; }

/* Detected tools: the state as a pill, required/optional as small tags. */
html.theme-airy .pg-account .envmore { align-items: center; gap: 12px; }
html.theme-airy .pg-account .envmore > .quiet { font-size: 13.5px; }
html.theme-airy .pg-account .envmore::after {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px;
  background: var(--accent-tint); color: var(--accent-dark);
  font: 600 13px/1 var(--sans);
}
html.theme-airy .pg-account .envmore:hover::after { background: var(--accent-tint-2); text-decoration: none; }
html.theme-airy .pg-account .envmore:focus-visible { outline: none; border-radius: 10px; box-shadow: var(--focus-ring); }
html.theme-airy .pg-account .envmore__body { margin-top: 16px; gap: 14px; }
html.theme-airy .pg-account .tool { padding: 14px 0; gap: 10px; border-top-color: var(--line-3); }
html.theme-airy .pg-account .tool:first-child { padding-top: 2px; }
html.theme-airy .pg-account .tool__top { align-items: center; }
html.theme-airy .pg-account .tool__name { font: 600 15px/1.3 var(--sans); }
html.theme-airy .pg-account .tool__role { font-size: 13.5px; }
html.theme-airy .pg-account .tool__ver { font: 500 13.5px var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-3); }
html.theme-airy .pg-account .tool__state {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 0; height: 24px; padding: 0 10px; border-radius: 999px;
  background: rgba(16, 24, 40, .06); color: var(--ink-3);
  font: 600 12px/1 var(--sans); letter-spacing: .01em;
}
html.theme-airy .pg-account .tool__state.pass { background: var(--pass-tint); color: var(--pass); box-shadow: inset 0 0 0 1px var(--pass-line); }
html.theme-airy .pg-account .tool__state.fail { background: var(--fail-tint); color: var(--fail); box-shadow: inset 0 0 0 1px var(--fail-line); }
/* An optional tool that is not installed is information, not licence news. */
html.theme-airy .pg-account .tool__state.tone-amber { background: #f1f3f6; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
html.theme-airy .pg-account .tag {
  height: 20px; padding: 0 8px; border: 0; border-radius: 999px;
  background: rgba(16, 24, 40, .06); color: var(--ink-3);
  font: 600 10.5px/1 var(--sans); letter-spacing: .06em;
}
html.theme-airy .pg-account .tag.tag--required { background: #e4e7ec; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
html.theme-airy .pg-account .diag-text { padding: 12px 14px; border-radius: 12px; }

/* Plan & usage: meters as rounded bars, the "limits" heading as a ruled
   sub-title inside its card. */
html.theme-airy .pg-plan .use { gap: 10px; padding: 2px 0 6px; }
html.theme-airy .pg-plan .use__head { font-size: 14.5px; font-weight: 500; color: var(--ink-2); }
html.theme-airy .pg-plan .use__head span:last-child {
  font: 650 14px var(--sans); font-variant-numeric: tabular-nums; color: var(--ink);
}
html.theme-airy .pg-plan .use .bar { height: 10px; border-radius: 999px; }
html.theme-airy .pg-plan .card > .eyebrow {
  margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line-2);
  text-transform: none; letter-spacing: -.01em;
  font: 650 15.5px/1.3 var(--sans); color: var(--ink);
}
html.theme-airy .pg-plan .card > .eyebrow::first-letter { text-transform: uppercase; }
html.theme-airy .pg-plan .actions { gap: 10px; }

@media (max-width: 860px) {
  html.theme-airy .pg-account .subnav { top: 8px; }
  html.theme-airy .pg-account .section { scroll-margin-top: 52px; }
  html.theme-airy .pg-account .banner { padding: 20px; }
}

/* ====================================================================== */
/*  Sign-in and the hosted doors: two rounded cards on the canvas          */
/* ====================================================================== */

html.theme-airy :where(.split) { gap: 12px; padding: 12px; background: var(--pg-canvas); }
/* The brand panel stays dark, as a rounded card with two soft glows. */
html.theme-airy :where(.split__dark) {
  padding: 44px 46px; border-radius: 24px;
  background:
    radial-gradient(90% 60% at 0% 0%, rgba(90, 200, 250, .16), rgba(90, 200, 250, 0) 62%),
    radial-gradient(80% 55% at 100% 100%, rgba(52, 120, 246, .24), rgba(52, 120, 246, 0) 70%),
    linear-gradient(160deg, #0d1726 0%, #16243a 60%, #12314c 100%);
  box-shadow: 0 22px 48px -26px rgba(13, 23, 38, .6);
}
html.theme-airy :where(.split__light) { padding: 36px; background: transparent; }
html.theme-airy :where(.split__dark) .brand__mark { width: 30px; height: 30px; flex-basis: 30px; }
html.theme-airy :where(.split__dark) .brand__name { font: 700 19px/1 var(--sans); letter-spacing: -.025em; color: #fff; }
@media (max-width: 900px) {
  html.theme-airy :where(.split__dark) { padding: 32px 28px; border-radius: 20px; }
  html.theme-airy :where(.split__light) { padding: 20px 0 36px; align-items: flex-start; }
}

/* Sign-in: the facts ticked on cyan discs; the form one white card. */
html.theme-airy .pg-signin .dark__body { gap: 22px; }
html.theme-airy .pg-signin .dark__body h1 { font: 700 clamp(28px, 3.2vw, 38px)/1.15 var(--sans); letter-spacing: -.03em; }
html.theme-airy .pg-signin .dark__body p { font-size: 16.5px; line-height: 1.65; }
html.theme-airy .pg-signin .dark__facts { gap: 12px; font: 500 14.5px/1.55 var(--sans); color: var(--dark-ink); }
html.theme-airy .pg-signin .dark__facts li { align-items: flex-start; }
html.theme-airy .pg-signin .dark__facts li::before {
  flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px;
  border: 0; border-radius: 50%; transform: none;
  background: var(--pg-i-check-cyan) center / 12px 12px no-repeat, rgba(95, 192, 232, .16);
}
html.theme-airy .pg-signin .dark__foot { font: 500 12.5px var(--sans); }

html.theme-airy .pg-signin .form {
  max-width: 460px; gap: 22px; padding: 36px 36px 30px;
  background: var(--surface); border-radius: 22px; box-shadow: var(--pg-card-lg);
}
html.theme-airy .pg-signin .form__head h2 { font: 700 30px/1.15 var(--sans); letter-spacing: -.03em; }
html.theme-airy .pg-signin .form__head p { font-size: 15px; }
html.theme-airy .pg-signin .form .field label { font: 600 13.5px var(--sans); }
html.theme-airy .pg-signin .form .input { min-height: 44px; padding: 0 14px; border-radius: 12px; font-size: 15px; }
html.theme-airy .pg-signin fieldset:disabled .input { background-color: var(--surface-3); box-shadow: none; }
html.theme-airy .pg-signin .form .btn--block.btn--lg { min-height: 46px; border-radius: 12px; font-size: 15.5px; }
/* "Sign-in is not part of this build": licence news, so amber. */
html.theme-airy .pg-signin .notice {
  padding: 12px 14px; border: 0; border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--amber-line); font-size: 13.5px;
}
html.theme-airy .pg-signin .rule::before,
html.theme-airy .pg-signin .rule::after { background: var(--line-2); }
html.theme-airy .pg-signin .rule span { font: 500 13px var(--sans); color: var(--muted); }
html.theme-airy .pg-signin .activate__row { gap: 10px; }
html.theme-airy .pg-signin .activate__row .input { font-family: var(--mono); letter-spacing: .02em; }
html.theme-airy .pg-signin .activate__row .btn { min-height: 44px; padding: 0 18px; border-radius: 12px; }
html.theme-airy .pg-signin .trial {
  gap: 12px; padding: 16px; border-top: 0; border-radius: 16px;
  background: var(--pg-pale); box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .04);
}
html.theme-airy .pg-signin .trial p { font-size: 13.5px; }

/* The hosted doors: one card with a globe tile, pointing at the website. */
html.theme-airy .pg-door .door {
  max-width: 480px; gap: 16px; padding: 36px 36px 32px;
  background: var(--surface); border-radius: 22px; box-shadow: var(--pg-card-lg);
}
html.theme-airy .pg-door .door::before {
  content: ""; width: 52px; height: 52px; margin-bottom: 4px; border-radius: 16px;
  background: var(--pg-i-globe) center / 24px 24px no-repeat, var(--accent-tint);
  box-shadow: var(--pg-tile-ring);
}
html.theme-airy .pg-door .door h1 { font: 700 28px/1.2 var(--sans); letter-spacing: -.028em; }
html.theme-airy .pg-door .door p { font-size: 16px; }
html.theme-airy .pg-door .door a { font-weight: 600; }

/* ====================================================================== */
/*  The landing page                                                       */
/* ====================================================================== */

html.theme-airy :where(.public) h1 { font-weight: 700; letter-spacing: -.035em; }
html.theme-airy :where(.public) h2 { font-weight: 700; letter-spacing: -.025em; }

/* ---- nav: frosted, links as soft pills ---- */
html.theme-airy .pg-landing .nav {
  border-bottom: 1px solid rgba(16, 24, 40, .06);
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: saturate(1.8) blur(16px); backdrop-filter: saturate(1.8) blur(16px);
}
html.theme-airy .pg-landing .nav__inner { min-height: 66px; gap: 14px; }
html.theme-airy .pg-landing .brand { gap: 11px; }
html.theme-airy .pg-landing .brand__mark { width: 28px; height: 28px; flex-basis: 28px; }
html.theme-airy .pg-landing .brand__mark--foot { width: 24px; height: 24px; flex-basis: 24px; }
html.theme-airy .pg-landing .nav .brand__name { font: 700 19px/1 var(--sans); letter-spacing: -.025em; }
html.theme-airy .pg-landing .brand__by {
  padding: 4px 9px; border-radius: 999px; background: rgba(16, 24, 40, .05);
  font: 500 12.5px/1.2 var(--sans); color: var(--muted);
}
html.theme-airy .pg-landing .nav__links { gap: 4px; }
html.theme-airy .pg-landing .nav__links a:not(.btn) {
  padding: 7px 12px; border-radius: 10px;
  font: 500 14.5px/1.2 var(--sans); color: var(--ink-2);
}
html.theme-airy .pg-landing .nav__links a:not(.btn):hover { background: rgba(16, 24, 40, .05); color: var(--ink); }
html.theme-airy .pg-landing .nav__links .btn { margin-left: 8px; }

/* ---- hero: two soft glows, a heavier headline, rounder CTAs ---- */
html.theme-airy .pg-landing .hero {
  padding: 92px 0 84px;
  background:
    radial-gradient(48% 60% at 88% 18%, rgba(52, 120, 246, .13), rgba(52, 120, 246, 0) 70%),
    radial-gradient(40% 50% at 8% 0%, rgba(90, 200, 250, .12), rgba(90, 200, 250, 0) 70%),
    linear-gradient(180deg, #f5f7fb 0%, #ffffff 100%);
}
html.theme-airy .pg-landing .hero__inner { gap: 56px; }
html.theme-airy .pg-landing .hero__copy { gap: 22px; }
html.theme-airy .pg-landing .hero__copy h1 { font: 700 clamp(36px, 4.6vw, 56px)/1.06 var(--sans); letter-spacing: -.038em; }
html.theme-airy .pg-landing .hero__lede { max-width: 34em; font-size: 19px; line-height: 1.6; color: var(--ink-3); }
html.theme-airy .pg-landing .hero__badge {
  height: 30px; padding: 0 13px 0 11px; gap: 8px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .85); color: var(--accent-dark); box-shadow: var(--pg-lift);
  font: 600 13px/1 var(--sans); letter-spacing: 0;
}
html.theme-airy .pg-landing .hero__badge::before {
  width: 7px; height: 7px; flex-basis: 7px; box-shadow: 0 0 0 3px var(--accent-tint-2);
}
html.theme-airy .pg-landing .cta-row { gap: 12px; }
html.theme-airy .pg-landing .btn--hero { min-height: 50px; padding: 0 26px; border-radius: 14px; font: 600 16px/1 var(--sans); }
html.theme-airy .pg-landing .btn--hero:not(.btn--primary) { border-color: transparent; background: var(--surface); box-shadow: var(--pg-lift); }
html.theme-airy .pg-landing .cta-link { font-weight: 600; }
html.theme-airy .pg-landing .hero .hero__meta { font: 500 13.5px/1.7 var(--sans); color: var(--muted); }

/* ---- the product miniature, redrawn in the airy frame: canvas window,
   pastel rail tiles, pill tabs on the canvas, the table and the dark 3D
   view as one rounded sheet ---- */
html.theme-airy .pg-landing .shot { gap: 12px; }
html.theme-airy .pg-landing .shot__cap { font: 500 12.5px var(--sans); color: var(--muted); }
html.theme-airy .pg-landing .mock {
  height: 360px; border: 0; border-radius: 20px;
  background: var(--pg-canvas);
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .06), 0 2px 6px rgba(16, 24, 40, .04), 0 30px 60px -24px rgba(16, 24, 40, .28);
}
html.theme-airy .pg-landing .mock__top { flex-basis: 32px; gap: 8px; padding: 0 12px; border-bottom: 0; }
html.theme-airy .pg-landing .mock__logo {
  width: 13px; height: 13px; border-radius: 4px;
  background: linear-gradient(135deg, var(--accent-light), var(--accent-strong));
}
html.theme-airy .pg-landing .mock__crumb { width: 40px; border-radius: 3px; }
html.theme-airy .pg-landing .mock__crumb--set {
  width: 70px; height: 16px; border: 0; border-radius: 6px;
  background: var(--surface); box-shadow: var(--pg-lift);
}
html.theme-airy .pg-landing .mock__pill { width: 48px; height: 14px; border: 0; box-shadow: inset 0 0 0 1px var(--accent-line); }
html.theme-airy .pg-landing .mock__main { position: relative; padding-top: 26px; }
html.theme-airy .pg-landing .mock__rail {
  flex-basis: 46px; gap: 6px; padding-top: 0;
  background: transparent; border-right: 0;
}
html.theme-airy .pg-landing .mock__glyph {
  width: 28px; height: 26px; border-radius: 8px;
  background: #eef1f5;
  background: color-mix(in srgb, var(--glyph) 14%, #fff);
}
html.theme-airy .pg-landing .mock__glyph:nth-child(5) { background: var(--surface); box-shadow: var(--pg-lift); }
html.theme-airy .pg-landing .mock__tabs {
  position: absolute; top: 0; left: 46px; right: 10px; height: 26px;
  align-items: center; gap: 4px; padding: 0 2px;
  background: transparent; border-bottom: 0;
}
html.theme-airy .pg-landing .mock__tab { width: 46px; height: 17px; border: 0; border-radius: 6px; }
html.theme-airy .pg-landing .mock__tab::before { margin: 6px 0 0 9px; width: 26px; }
html.theme-airy .pg-landing .mock__tab.is-on { background: var(--surface); box-shadow: var(--pg-lift); }
html.theme-airy .pg-landing .mock__table {
  margin-bottom: 10px; border-radius: 12px 0 0 12px;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .05), 0 10px 24px -14px rgba(16, 24, 40, .25);
}
html.theme-airy .pg-landing .mock__bar { flex-basis: 34px; padding: 0 12px; border-bottom-color: var(--line-2); }
html.theme-airy .pg-landing .mock__field { height: 16px; border-radius: 6px; }
html.theme-airy .pg-landing .mock__seg { padding: 2px; border-radius: 6px; background: #eceff3; }
html.theme-airy .pg-landing .mock__seg i { border-radius: 4px; }
html.theme-airy .pg-landing .mock__seg i:first-child { box-shadow: 0 1px 2px rgba(16, 24, 40, .14); }
html.theme-airy .pg-landing .mock__btn { height: 16px; border-radius: 6px; box-shadow: 0 3px 8px -3px rgba(37, 99, 235, .6); }
html.theme-airy .pg-landing .mock__row { flex-basis: 40px; padding: 0 12px; border-bottom-color: var(--line-3); }
html.theme-airy .pg-landing .mock__row--head { flex-basis: 22px; background: #fbfcfd; border-bottom-color: var(--line-2); }
html.theme-airy .pg-landing .mock__row.is-on { background: #f5f8ff; }
/* The score column as the app draws it: a blue pill. */
html.theme-airy .pg-landing .mock__row:not(.mock__row--head) i:nth-child(3) {
  flex-basis: 14%; height: 13px; border-radius: 999px;
  background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent-line);
}
html.theme-airy .pg-landing .mock__view {
  margin: 0 10px 10px 0; border-radius: 0 12px 12px 0; overflow: hidden;
  box-shadow: 0 10px 24px -14px rgba(13, 23, 38, .5);
}
html.theme-airy .pg-landing .mock__tools { padding: 3px; border-radius: 7px; }
html.theme-airy .pg-landing .mock__tools i { border-radius: 4px; }
html.theme-airy .pg-landing .mock__status { flex-basis: 18px; padding: 0 14px; background: transparent; border-top: 0; }
html.theme-airy .pg-landing .mock__status span { width: 26%; }

/* ---- sections: tinted bands are inset, rounded panels ---- */
html.theme-airy .pg-landing .band { padding: 96px 0; }
html.theme-airy .pg-landing .band--tint {
  margin: 0 16px; border: 0; border-radius: 32px;
  background: linear-gradient(180deg, #f4f6fa 0%, #f1f4f8 100%);
}
html.theme-airy .pg-landing .band--rule { border-top: 0; }
html.theme-airy .pg-landing .band__head { gap: 14px; max-width: 700px; }
html.theme-airy .pg-landing .band__head h2,
html.theme-airy .pg-landing .cols__narrow h2 { font: 700 clamp(28px, 3vw, 40px)/1.12 var(--sans); letter-spacing: -.032em; }
html.theme-airy .pg-landing .band__head p:not(.eyebrow) { font-size: 18px; line-height: 1.6; }
html.theme-airy .pg-landing main .eyebrow {
  font: 700 12.5px/1.2 var(--sans); letter-spacing: .08em; color: var(--accent-dark);
}

/* How it works: five white step cards. */
html.theme-airy .pg-landing .steps { gap: 14px; margin-top: 40px; border-top: 0; }
html.theme-airy .pg-landing .step {
  padding: 24px 22px 26px; gap: 10px; border: 0; border-radius: 20px;
  background: var(--surface); box-shadow: var(--pg-card);
}
html.theme-airy .pg-landing .step__n {
  width: 40px; height: 40px; margin-bottom: 6px; border-radius: 12px;
  background: #eef3fe;
  background: color-mix(in srgb, var(--glyph, var(--accent)) 14%, #fff);
  color: var(--ink-2);
  color: color-mix(in srgb, var(--glyph, var(--accent)) 76%, #101828);
  font: 700 13px/1 var(--sans); font-variant-numeric: tabular-nums;
}
html.theme-airy .pg-landing .step__t { font: 650 18px/1.3 var(--sans); letter-spacing: -.015em; }
html.theme-airy .pg-landing .step p { font-size: 14.5px; line-height: 1.6; }

/* Two-column feature bands. */
html.theme-airy .pg-landing .cols { gap: 56px; }
html.theme-airy .pg-landing .cols__narrow { gap: 18px; }
html.theme-airy .pg-landing .cols__narrow p:not(.eyebrow) { font-size: 16.5px; }
html.theme-airy .pg-landing .cols__narrow p.cols__fine { font-size: 14.5px; line-height: 1.7; }
html.theme-airy .pg-landing .dashes { gap: 14px; }
html.theme-airy .pg-landing .dashes li { gap: 14px; font-size: 15px; }
html.theme-airy .pg-landing .dashes li::before {
  flex: 0 0 8px; width: 8px; height: 8px; margin: .58em 2px 0 3px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint-2);
}
html.theme-airy .pg-landing .facts { gap: 10px; font: 500 14px/1.6 var(--sans); color: var(--ink-2); }
html.theme-airy .pg-landing .facts > div { align-items: flex-start; }
html.theme-airy .pg-landing .facts > div::before {
  flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px;
  border: 0; border-radius: 50%; transform: none;
  background: var(--pg-i-check-green) center / 12px 12px no-repeat, var(--pass-tint);
  box-shadow: inset 0 0 0 1px var(--pass-line);
}

/* The off-target panel: a white card of pale target tiles, MCC as a pill. */
html.theme-airy .pg-landing .panelcard { border: 0; border-radius: 22px; box-shadow: var(--pg-card-lg); }
html.theme-airy .pg-landing .panelcard__head { padding: 18px 22px 4px; border-bottom: 0; background: transparent; }
html.theme-airy .pg-landing .panelcard__mean { font: 500 14px var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-3); }
html.theme-airy .pg-landing .panelcard__mean b {
  display: inline-flex; align-items: center; height: 26px; margin-left: 4px; padding: 0 10px;
  border-radius: 999px; background: var(--accent-tint); color: var(--accent-dark);
  box-shadow: inset 0 0 0 1px var(--accent-line); font-weight: 700;
}
html.theme-airy .pg-landing .panelgrid { gap: 10px; padding: 14px 16px 16px; }
html.theme-airy .pg-landing .target {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "id mcc" "use mcc";
  align-items: center; column-gap: 10px; row-gap: 2px;
  padding: 14px 14px 14px 16px; border: 0; border-radius: 14px;
  background: var(--pg-pale);
}
html.theme-airy .pg-landing .target__id { grid-area: id; font: 650 16px/1.25 var(--sans); letter-spacing: -.01em; }
html.theme-airy .pg-landing .target__use { grid-area: use; font-size: 13px; color: var(--muted); }
html.theme-airy .pg-landing .target__mcc {
  grid-area: mcc; display: inline-flex; align-items: center; height: 26px; padding: 0 10px;
  border-radius: 999px; background: var(--accent-tint); color: var(--accent-dark);
  box-shadow: inset 0 0 0 1px var(--accent-line);
  font: 650 13.5px/1 var(--sans); font-variant-numeric: tabular-nums;
}

/* Where the data lives: the diagram on a white card, labels in the UI face. */
html.theme-airy .pg-landing .diagram { border: 0; border-radius: 22px; box-shadow: var(--pg-card-lg); }
html.theme-airy .pg-landing .diagram__machine { fill: #f4f6f9; stroke: var(--line); }
html.theme-airy .pg-landing .diagram__box { fill: #fff; stroke: var(--line); }
html.theme-airy .pg-landing .diagram__label { font: 700 11.5px var(--sans); letter-spacing: .08em; fill: var(--accent-dark); }
html.theme-airy .pg-landing .diagram__text { font: 600 14px var(--sans); fill: var(--ink); }
html.theme-airy .pg-landing .diagram__small { font: 500 11px var(--sans); fill: var(--muted); }

/* Requirements: white cards, a dark command card, the table on a card. */
html.theme-airy .pg-landing .reqgrid { gap: 16px; margin-top: 36px; }
html.theme-airy .pg-landing .reqcard {
  padding: 24px 24px 26px; gap: 10px; border: 0; border-radius: 20px;
  box-shadow: var(--pg-card);
}
html.theme-airy .pg-landing .reqcard h3 { font: 650 17.5px/1.3 var(--sans); letter-spacing: -.015em; }
html.theme-airy .pg-landing .reqcard p { font-size: 14.5px; line-height: 1.6; }
html.theme-airy .pg-landing .codeline {
  padding: 16px 20px; border: 0; border-radius: 16px;
  background: linear-gradient(160deg, #0f1a2b 0%, #142236 100%);
  box-shadow: 0 16px 32px -20px rgba(13, 23, 38, .6);
  font-size: 14px;
}
/* Three quiet window dots, so the block reads as a terminal. */
html.theme-airy .pg-landing .codeline::before {
  content: ""; display: block; height: 10px; margin-bottom: 12px;
  background:
    radial-gradient(circle at 5px 5px, rgba(207, 224, 240, .32) 4.5px, transparent 5px),
    radial-gradient(circle at 21px 5px, rgba(207, 224, 240, .22) 4.5px, transparent 5px),
    radial-gradient(circle at 37px 5px, rgba(207, 224, 240, .14) 4.5px, transparent 5px);
  background-repeat: no-repeat;
}
html.theme-airy .pg-landing .tools-scroll {
  margin-top: 28px; padding: 4px 22px 8px; border-radius: 20px;
  background: var(--surface); box-shadow: var(--pg-card);
}
html.theme-airy .pg-landing .tools { margin-top: 0; font-size: 14.5px; }
html.theme-airy .pg-landing .tools caption { padding: 16px 0 12px; font-size: 13.5px; }
html.theme-airy .pg-landing .tools th,
html.theme-airy .pg-landing .tools td { padding: 12px 16px 12px 0; border-bottom-color: var(--line-2); }
html.theme-airy .pg-landing .tools td:last-child { padding-right: 0; }
html.theme-airy .pg-landing .tools thead th { padding-bottom: 10px; font: 700 11.5px var(--sans); letter-spacing: .07em; color: var(--muted); }
html.theme-airy .pg-landing .tools tbody tr:last-child td { border-bottom: 0; }
html.theme-airy .pg-landing .tools tbody td:first-child { font-weight: 600; color: var(--ink); }
html.theme-airy .pg-landing .tools td.mono { font-size: 13.5px; }

/* Pricing: rounder cards, the licence ringed in blue, check discs. */
html.theme-airy .pg-landing .prices { gap: 18px; margin-top: 40px; }
html.theme-airy .pg-landing .price {
  padding: 28px 28px 26px; gap: 18px; border: 0; border-radius: 24px;
  box-shadow: var(--pg-card);
}
html.theme-airy .pg-landing .price--feature {
  background: radial-gradient(120% 60% at 100% 0%, #eef4ff 0%, rgba(238, 244, 255, 0) 55%), var(--surface);
  box-shadow: 0 0 0 2px var(--accent), 0 2px 4px rgba(37, 99, 235, .08), 0 24px 48px -20px rgba(37, 99, 235, .38);
}
html.theme-airy .pg-landing .price--dark {
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(90, 200, 250, .16), rgba(90, 200, 250, 0) 60%),
    linear-gradient(160deg, #0d1726 0%, #16243a 100%);
  box-shadow: 0 24px 48px -24px rgba(13, 23, 38, .6);
}
html.theme-airy .pg-landing .price__name { font: 700 23px/1.2 var(--sans); letter-spacing: -.025em; }
html.theme-airy .pg-landing .price__terms { margin-top: 6px; font: 500 13.5px var(--sans); color: var(--muted); }
html.theme-airy .pg-landing .price--feature .price__terms { color: var(--accent-dark); }
html.theme-airy .pg-landing .price--dark .price__terms { color: var(--dark-accent); }
html.theme-airy .pg-landing .price ul { gap: 12px; font-size: 15px; }
html.theme-airy .pg-landing .price li { display: flex; align-items: flex-start; gap: 10px; }
html.theme-airy .pg-landing .price li::before {
  content: ""; flex: 0 0 20px; height: 20px; margin-top: 2px; border-radius: 50%;
  background: var(--pg-i-check-blue) center / 12px 12px no-repeat, var(--accent-tint);
}
html.theme-airy .pg-landing .price li.is-limit::before { background: var(--pg-i-minus) center / 12px 12px no-repeat, #eef0f3; }
html.theme-airy .pg-landing .price--dark li::before { background: var(--pg-i-check-cyan) center / 12px 12px no-repeat, rgba(95, 192, 232, .16); }
html.theme-airy .pg-landing .price .btn { min-height: 46px; border-radius: 12px; font-size: 15.5px; }

/* The closing call to action as a pastel blue panel. */
html.theme-airy .pg-landing .close {
  width: calc(100% - 32px); margin: 8px auto 96px; padding: 56px;
  border-radius: 28px;
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(90, 200, 250, .22), rgba(90, 200, 250, 0) 60%),
    linear-gradient(135deg, #eef4ff 0%, #e6efff 100%);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
html.theme-airy .pg-landing .close__copy { gap: 10px; }
html.theme-airy .pg-landing .close__copy h2 { font: 700 32px/1.15 var(--sans); letter-spacing: -.03em; }
html.theme-airy .pg-landing .close__copy p { font-size: 17px; }

/* The footer: dark, as a rounded card. */
html.theme-airy .pg-landing .foot {
  margin: 0 16px 16px; border-radius: 28px;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(52, 120, 246, .16), rgba(52, 120, 246, 0) 60%),
    linear-gradient(160deg, #0d1726 0%, #111d30 100%);
}
html.theme-airy .pg-landing .foot__inner { padding: 52px 0 48px; }
html.theme-airy .pg-landing .foot .brand__name { font: 700 17px/1 var(--sans); letter-spacing: -.02em; }
html.theme-airy .pg-landing .foot address { font: 400 14px/1.8 var(--sans); }
html.theme-airy .pg-landing .foot .eyebrow { font: 700 11.5px/1.2 var(--sans); letter-spacing: .08em; color: var(--dark-text); }
html.theme-airy .pg-landing .foot__col a { font-size: 14.5px; }

@media (max-width: 1000px) {
  html.theme-airy .pg-landing .steps { gap: 12px; }
}
@media (max-width: 700px) {
  html.theme-airy .pg-landing .band { padding: 56px 0; }
  html.theme-airy .pg-landing .hero { padding: 52px 0 48px; }
  html.theme-airy .pg-landing .mock { height: 290px; }
  html.theme-airy .pg-landing .band--tint { margin: 0 8px; border-radius: 22px; }
  html.theme-airy .pg-landing .close { width: calc(100% - 16px); margin-bottom: 56px; padding: 32px 24px; border-radius: 22px; }
  html.theme-airy .pg-landing .foot { margin: 0 8px 8px; border-radius: 22px; }
  html.theme-airy .pg-landing .nav__links a:not(.btn) { padding: 6px 8px; }
}

/* ====================================================================== */
/*  Docking setup: chains to keep and the residue centre (dock3)           */
/* ====================================================================== */

/* The chain list (target section) and the residue line ("Centred on"). The
   chain rows are .dk-checkrow and inherit its airy rule; these match the
   rounded soft rows of the bound-group list next to them. */
html.theme-airy :where(.dk-chains) { gap: 8px; }
html.theme-airy :where(.dk-chains__grid) { gap: 6px 14px; }
html.theme-airy :where(.dk-chain__meta) { font: 500 var(--fs-xs) var(--sans); }
html.theme-airy :where(.dk-resrow) {
  gap: 10px; min-height: 40px; padding: 4px 10px; border-color: transparent; border-radius: 12px;
  background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--line-2);
}
html.theme-airy :where(.dk-resrow).is-on { background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent-line); }
html.theme-airy :where(.dk-res__name) { font: 650 var(--fs-sm) var(--sans); letter-spacing: .01em; }
html.theme-airy :where(.dk-res__name).is-miss { font-weight: 500; color: var(--muted); }
/* The residue's chain and number on the same rounder fields, in the UI face,
   as the box's numbers below them (beats the pane's
   `[data-pane="docking"] .dk-resrow .input`). */
html.theme-airy [data-pane="docking"] :where(.dk-resrow) .input { border-radius: 9px; }
html.theme-airy [data-pane="docking"] :where(.dk-resrow) .dk-res__num {
  font: 500 var(--fs-sm) var(--sans); font-variant-numeric: tabular-nums;
}