/*
 * Insulin Model Workstation: "liquid glass" over a medical line-art ground.
 *
 * The third member of the sergejkeller.xyz family. Dark mode takes the Technical Notes (blog)
 * palette, light mode the Technical Shop ramp with the cool cyan accent; both share Instrument
 * Serif headlines, mono meta and path-style breadcrumbs, and the
 * cursor-following glass on buttons, fields and rows (glass.js writes --mx/--my).
 *
 * Lives in NiceGUI's `components` cascade layer: it overrides Quasar's Material styles while
 * Tailwind utilities on single elements still win. Dark mode keys on html.imw-dark, which a head
 * script sets from the account's theme before the first paint (theme.apply), so no page flashes
 * light; Quasar's own body--dark follows a moment later through ui.dark_mode.
 */

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/instrument-serif-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/instrument-serif-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/instrument-serif-italic-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/instrument-serif-italic-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/inter-latin-standard-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/inter-latin-ext-standard-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter Variable";
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/inter-latin-standard-italic.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --glass fades the specular layers in and out; registering it is what makes it animatable. */
@property --glass {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

@layer components {
  /* ------------------------------------------------------------------ tokens */
  /* Light: the Technical Shop ramp with its original cool accent, measured there against all four
     grounds (sheet, ground, surface, deep): body 10:1, muted/dim above 4.7:1, accents above 4.9:1. */
  :root {
    color-scheme: light;
    --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
    --font-sans: "Inter Variable", system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

    --c-ground: #f7f8f9;
    --c-deep: #eceff1;
    --c-page: #ffffff;
    --c-surface: #f0f2f4;
    --c-line: #dfe3e6;
    --c-line-soft: #e9ecee;
    --c-text: #3d4346;
    --c-heading: #133f46;
    --c-muted: #616b70;
    --c-dim: #5f686d;
    --c-faint: #a9b2b8; /* decoration only: rules, leaders, field edges; never text */
    --c-cyan: #0c707c;
    --c-blue: #1f6bb0;
    --c-turquoise: #0f7460;
    --c-cyan-dim: #5e9ea9;
    --c-warm: #85600f;
    --c-coral: #a3442c;

    /* turquoise -> blue, one hue per pipeline stage */
    --stage-1: #0f7460;
    --stage-2: #0d7268;
    --stage-3: #0c707c;
    --stage-4: #166d96;
    --stage-5: #1f6bb0;

    /* The glass recipe's channels (see buttons). On a white sheet there is no lighter to go, so
       the lit edge is built out of the accent instead: darkest at the cursor, fading outward. */
    --glow-rgb: 12, 112, 124;
    --spec-rgb: 12, 112, 124;
    --spec-alpha: 0.95;
    --edge-lo-rgb: 94, 158, 169;
    --edge-lo-alpha: 0.45;
    --shade-rgb: 20, 24, 26;

    --sheet-bg: rgba(255, 255, 255, 0.72);
    --sheet-bg-strong: rgba(255, 255, 255, 0.9);
    --sheet-border: rgba(255, 255, 255, 0.82);
    --sheet-shadow: 0 6px 20px -4px rgba(var(--shade-rgb), 0.1);
    --sheet-shadow-hover: 0 12px 28px -6px rgba(var(--shade-rgb), 0.16);
    --sheet-rim: rgba(255, 255, 255, 0.96);
    --header-bg: rgba(247, 248, 249, 0.72);
    --row-glass-rgb: 12, 112, 124;
    --row-glass-alpha: 0.07;
    --pattern-opacity: 0.26;
    --blur: saturate(180%) blur(20px);

    --r-sheet: 22px;
    --r-card: 16px;
    --r-control: 10px;
  }

  /* Dark: the Technical Notes palette (page sheet #1E2326: heading 14.6:1, body 10.1:1, dim 4.6:1). */
  html.imw-dark {
    color-scheme: dark;
    --c-ground: #17191b;
    --c-deep: #131517;
    --c-page: #1e2326;
    --c-surface: #262c30;
    --c-line: #2e3438;
    --c-line-soft: #272c30;
    --c-text: #c9cfd2;
    --c-heading: #f4f6f7;
    --c-muted: #8b9499;
    --c-dim: #828c92;
    --c-faint: #5c666b;
    --c-cyan: #5fd4e0;
    --c-blue: #6fa8dc;
    --c-turquoise: #4ec9a8;
    --c-cyan-dim: #2e6e7a;
    --c-warm: #d7b778;
    --c-coral: #d98e73;

    --stage-1: #4ec9a8;
    --stage-2: #57cfc4;
    --stage-3: #5fd4e0;
    --stage-4: #67bede;
    --stage-5: #6fa8dc;

    --glow-rgb: 95, 212, 224;
    --spec-rgb: 226, 250, 253;
    --spec-alpha: 0.85;
    --edge-lo-rgb: 46, 110, 122;
    --edge-lo-alpha: 0.18;
    --shade-rgb: 0, 0, 0;

    --sheet-bg: rgba(30, 35, 38, 0.76);
    --sheet-bg-strong: rgba(30, 35, 38, 0.94);
    --sheet-border: rgba(46, 52, 56, 0.95);
    --sheet-shadow: 0 1px 0 rgba(0, 0, 0, 0.45), 0 7px 16px rgba(0, 0, 0, 0.38);
    --sheet-shadow-hover: 0 1px 0 rgba(0, 0, 0, 0.45), 0 12px 26px rgba(0, 0, 0, 0.45);
    --sheet-rim: rgba(201, 207, 210, 0.1);
    --header-bg: rgba(19, 21, 23, 0.68);
    --row-glass-rgb: 38, 44, 48;
    --row-glass-alpha: 0.9;
    --pattern-opacity: 0.17;
  }

  /* NiceGUI writes Quasar's brand colours inline on <body> (app.colors(), light values). */
  html.imw-dark body {
    --q-primary: #5fd4e0 !important;
    --q-secondary: #4ec9a8 !important;
    --q-accent: #6fa8dc !important;
    --q-positive: #4ec9a8 !important;
    --q-negative: #d98e73 !important;
    --q-warning: #d7b778 !important;
    --q-info: #6fa8dc !important;
  }

  /* ------------------------------------------------------- ground + pattern */
  html {
    background: #f7f8f9;
  }
  html.imw-dark {
    background: #17191b;
  }
  body {
    background: var(--c-ground);
    color: var(--c-text);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    isolation: isolate;
  }
  /* Soft colour fields for the glass to refract: turquoise in, blue out, like the pipeline. */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
      radial-gradient(46vmax 40vmax at 0% 0%, rgba(15, 116, 96, 0.1), transparent 70%),
      radial-gradient(50vmax 44vmax at 100% 100%, rgba(31, 107, 176, 0.1), transparent 70%);
  }
  html.imw-dark body::before {
    background:
      radial-gradient(46vmax 40vmax at 0% 0%, rgba(78, 201, 168, 0.07), transparent 70%),
      radial-gradient(50vmax 44vmax at 100% 100%, rgba(111, 168, 220, 0.08), transparent 70%);
  }
  /* Medical line art (drops, glucose rings, insulin chains, ECG, CGM sensor, pen, cells, DNA): a static
     tile used as a mask, coloured turquoise -> cyan -> blue. One layer at one opacity, so overlaps
     never darken. */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: var(--pattern-opacity);
    background: linear-gradient(135deg, var(--c-turquoise), var(--c-cyan) 50%, var(--c-blue));
    -webkit-mask: url(pattern.svg) 0 0 / 560px 560px repeat;
    mask: url(pattern.svg) 0 0 / 560px 560px repeat;
  }
  .q-layout,
  .q-page-container,
  .q-page {
    background: transparent;
  }
  /* Text that sits on the bare ground rather than on a sheet: a halo in the ground colour clears
     the pattern around the letters, as the shop masks its backdrop away from text. */
  .imw-pagehead,
  .imw-rule-head,
  .imw-flow-note,
  .imw-flow-notes,
  .imw-footer,
  .imw-shell > .nicegui-link,
  .imw-shell .nicegui-column > .nicegui-link {
    text-shadow: 0 0 2px var(--c-ground), 0 0 8px var(--c-ground), 0 0 18px var(--c-ground);
  }
  .q-btn,
  .imw-pill {
    text-shadow: none;
  }
  ::selection {
    background: rgba(var(--glow-rgb), 0.24);
  }

  /* ------------------------------------------------------------ typography */
  .imw-h1,
  .imw-h2,
  .imw-h3,
  .nicegui-markdown h1,
  .nicegui-markdown h2,
  .nicegui-markdown h3 {
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: 0.025em;
    word-spacing: 0.06em;
    color: var(--c-heading);
    text-wrap: balance;
    margin: 0;
  }
  .imw-h1 {
    font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.3rem);
    line-height: 1.12;
  }
  .imw-h2 {
    font-size: 1.75rem;
    line-height: 1.2;
  }
  .imw-h3 {
    font-size: 1.4rem;
    line-height: 1.22;
  }
  .imw-lede {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.4;
    color: var(--c-muted);
    max-width: 62ch;
    margin: 0;
  }
  /* A lede on the bare ground (page heads, a record's summary) sits on a sheet of its own, so the
     backdrop pattern never runs behind the thin italic. Ledes inside cards use the card's sheet. */
  .imw-lede-sheet {
    align-self: flex-start;
    width: fit-content;
    padding: 0.55rem 1rem 0.6rem;
    background: var(--sheet-bg-strong);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border: 1px solid var(--sheet-border);
    border-radius: var(--r-card);
    box-shadow: var(--sheet-shadow);
    text-shadow: none;
  }
  .imw-lede-sheet > :first-child {
    margin-top: 0;
  }
  .imw-lede-sheet > :last-child {
    margin-bottom: 0;
  }
  .imw-smallcaps {
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-dim);
  }
  .imw-meta {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--c-dim);
  }
  .imw-mono {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--c-dim);
    overflow-wrap: anywhere;
  }
  .imw-muted {
    color: var(--c-muted);
  }
  .imw-subtle {
    color: var(--c-dim);
  }
  .imw-ok {
    color: var(--c-turquoise);
  }
  .imw-warn {
    color: var(--c-warm);
  }
  .imw-danger {
    color: var(--c-coral);
  }
  .imw-num {
    font-family: var(--font-mono);
    letter-spacing: 0.06em;
    color: var(--stage-color, var(--c-cyan));
  }
  /* thick-thin print rule under section labels */
  .imw-rule-head {
    position: relative;
    width: 100%;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 9px;
    margin: 0.75rem 0 0.35rem;
    border-bottom: 2px solid var(--c-line);
  }
  .imw-rule-head::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    height: 1px;
    background: var(--c-line);
  }
  a,
  .nicegui-link {
    color: var(--c-cyan);
    text-decoration: none;
  }
  a:hover,
  .nicegui-link:hover {
    color: var(--c-heading);
  }
  .nicegui-markdown a {
    text-decoration: underline;
    text-decoration-color: var(--c-cyan-dim);
    text-underline-offset: 3px;
  }
  .nicegui-markdown,
  .prose {
    color: var(--c-text);
  }
  .prose :where(h1, h2, h3, h4) {
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--c-heading);
  }
  .prose :where(strong, th) {
    color: var(--c-heading);
  }
  .nicegui-markdown code,
  .prose code {
    font-family: var(--font-mono);
    font-size: 0.86em;
    background: var(--c-surface);
    border: 1px solid var(--c-line-soft);
    border-radius: 4px;
    padding: 0.05em 0.35em;
  }

  /* ---------------------------------------------------------- glass sheets */
  .imw-sheet {
    position: relative;
  }
  .q-card,
  .imw-sheet {
    isolation: isolate;
    background: var(--sheet-bg);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border: 1px solid var(--sheet-border);
    border-radius: var(--r-sheet);
    box-shadow: var(--sheet-shadow);
    color: var(--c-text);
  }
  /* The lens rim: fine light lines along the top and left edge, like the shop's sheets. */
  .q-card::after,
  .imw-sheet::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    background:
      linear-gradient(90deg, transparent, var(--sheet-rim), transparent) 14% 0 / 62% 1px no-repeat,
      linear-gradient(180deg, var(--sheet-rim), transparent) 0 16% / 1px 58% no-repeat,
      linear-gradient(90deg, transparent, rgba(var(--glow-rgb), 0.2), transparent) 82% 100% / 46% 1px no-repeat;
  }
  .q-card--dark {
    background: var(--sheet-bg);
  }
  .imw-panel {
    padding: 1.4rem 1.5rem;
    gap: 0.9rem;
  }
  /* Surfaces that open something: border brightens and the cursor carries a soft light. */
  .imw-glow {
    --mx: 50%;
    --my: 50%;
    --glass: 0;
    cursor: pointer;
    background-image: radial-gradient(340px circle at var(--mx) var(--my),
        rgba(var(--row-glass-rgb), calc(var(--glass) * var(--row-glass-alpha))), transparent 70%);
    transition: --glass 0.28s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
  }
  .imw-glow:hover,
  .imw-glow:focus-visible {
    --glass: 1;
    border-color: var(--c-cyan-dim);
    box-shadow: var(--sheet-shadow-hover);
  }
  .imw-glow:active {
    transform: translateY(1px);
  }
  a.imw-sheet,
  a.imw-sheet:hover {
    color: var(--c-text);
    text-decoration: none;
  }
  a.imw-sheet .imw-record-title {
    color: var(--c-heading);
  }
  a.imw-sheet:hover .imw-record-title {
    color: var(--c-cyan);
  }
  .imw-stage-card a {
    text-decoration: none;
  }
  .imw-stage-card a .imw-h3 {
    transition: color 0.2s ease;
  }
  .imw-stage-card a:hover .imw-h3 {
    color: var(--stage-color);
  }

  /* -------------------------------------------------------------- masthead */
  .nicegui-content {
    padding: 0;
    gap: 0;
  }
  .q-header.imw-header {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0;
    background: var(--header-bg);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border-bottom: 1px solid var(--c-line);
    color: var(--c-text);
    box-shadow: none;
  }
  .imw-mast {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 10px 20px 8px 12px;
  }
  .imw-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: var(--c-heading);
    text-decoration: none !important;
  }
  .imw-brand:hover {
    color: var(--c-heading);
  }
  .imw-brand-title {
    font-family: var(--font-serif);
    font-size: 1.45rem;
    line-height: 1.1;
    letter-spacing: 0.025em;
    word-spacing: 0.06em;
    white-space: nowrap;
  }
  .imw-brand-em {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--c-cyan);
    white-space: nowrap;
  }
  /* the mark: a CGM receiver with the sensor's signal arriving */
  .imw-logo-wrap {
    display: inline-flex;
    line-height: 0;
    flex: none;
  }
  .imw-logo {
    width: 36px;
    height: 36px;
    flex: none;
  }
  .imw-logo .body {
    fill: var(--c-deep);
    stroke: var(--c-muted);
    stroke-width: 1.6;
  }
  .imw-logo .screen {
    fill: var(--c-page);
    stroke: var(--c-cyan-dim);
    stroke-width: 1.3;
  }
  .imw-logo .wave {
    fill: none;
    stroke: var(--c-cyan);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .imw-logo .btn {
    fill: none;
    stroke: var(--c-muted);
    stroke-width: 1.5;
  }
  .imw-logo .signal {
    fill: none;
    stroke: var(--c-turquoise);
    stroke-width: 1.7;
    stroke-linecap: round;
  }
  .imw-safety {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 4px 10px;
    border: 1px solid color-mix(in srgb, var(--c-warm) 45%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--c-warm) 10%, transparent);
    color: var(--c-warm);
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .imw-safety .q-icon {
    font-size: 15px;
  }
  .imw-icon-btn.q-btn {
    width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    color: var(--c-muted);
  }

  /* breadcrumb bar (path style): ~ / simulate / experiments / name_ */
  .imw-crumb-bar {
    border-top: 1px solid var(--c-line-soft);
    padding: 7px 20px 8px 22px;
  }
  .imw-crumbs ol {
    display: flex;
    align-items: baseline;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--c-dim);
    white-space: nowrap;
    overflow: hidden;
  }
  .imw-crumbs li {
    flex: none;
    display: flex;
    align-items: baseline;
  }
  .imw-crumbs li + li::before {
    content: "/";
    margin: 0 0.55em;
    color: var(--c-dim);
  }
  .imw-crumbs a {
    color: var(--c-muted);
  }
  .imw-crumbs a:hover {
    color: var(--c-cyan);
  }
  .imw-crumbs li.here {
    flex: 0 1 auto;
    min-width: 0;
  }
  .imw-crumbs .imw-here-text {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--c-cyan);
  }
  /* A terminal caret closing the path; outside the ellipsising segment so it is never clipped. */
  @media (min-width: 600px) {
    .imw-crumbs ol::after {
      content: "";
      flex: none;
      align-self: baseline;
      width: 0.62em;
      height: 0.13em;
      margin-left: 0.45em;
      background: var(--c-cyan);
      animation: imw-caret 1.8s ease-in-out infinite;
    }
  }
  @keyframes imw-caret {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
  }

  /* ------------------------------------------------------ pipeline sidebar */
  /* NiceGUI puts the drawer's classes on .q-drawer__content; the <aside> around it is Quasar's. */
  .q-drawer:has(> .imw-drawer),
  .q-drawer--dark:has(> .imw-drawer) {
    background: transparent;
  }
  .q-drawer__content.imw-drawer {
    padding: 16px 6px 16px 14px;
  }
  .q-drawer--mobile > .q-drawer__content.imw-drawer {
    padding: 12px;
  }
  .q-drawer__backdrop {
    -webkit-backdrop-filter: blur(6px) saturate(140%);
    backdrop-filter: blur(6px) saturate(140%);
    background: rgba(19, 21, 23, 0.3) !important;
  }
  .imw-rail {
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 10px 10px 0;
  }
  .imw-rail .imw-smallcaps {
    padding: 10px 10px 4px;
  }
  .imw-nav-link {
    --mx: 50%;
    --my: 50%;
    --glass: 0;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 10px;
    border: 0;
    border-radius: var(--r-control);
    background: radial-gradient(240px circle at var(--mx) var(--my),
        rgba(var(--row-glass-rgb), calc(var(--glass) * var(--row-glass-alpha))), transparent 70%);
    color: var(--c-muted);
    font: inherit;
    font-size: 14px;
    text-align: left;
    appearance: none;
    text-decoration: none !important;
    cursor: pointer;
    transition: --glass 0.28s ease, color 0.2s ease;
  }
  .imw-nav-link .q-icon {
    font-size: 19px;
    color: var(--c-dim);
  }
  .imw-nav-link:hover {
    --glass: 1;
    color: var(--c-heading);
  }
  .imw-nav-link.is-active {
    color: var(--c-heading);
    font-weight: 600;
    background-color: color-mix(in srgb, var(--c-surface) 80%, transparent);
    box-shadow: inset 2px 0 0 var(--stage-color, var(--c-cyan));
  }
  .imw-nav-link.is-active .q-icon {
    color: var(--stage-color, var(--c-cyan));
  }
  .imw-nav-count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--c-cyan);
  }
  .imw-stage {
    position: relative;
    padding-bottom: 2px;
  }
  /* The trace: a copper line from each stage pad into the next, with a via where it lands. */
  .imw-stage::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 31px;
    bottom: -8px;
    width: 1.5px;
    background: linear-gradient(var(--stage-color), var(--next-stage-color, var(--stage-color)));
    opacity: 0.55;
  }
  .imw-stage:last-of-type::before {
    background: linear-gradient(var(--stage-color), transparent);
  }
  .imw-stage-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px 2px 10px;
  }
  .imw-pad {
    position: relative;
    z-index: 1;
    flex: none;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--stage-color);
    background: var(--c-page);
    box-shadow: inset 0 0 0 1.5px var(--stage-color);
  }
  .imw-stage.is-active .imw-pad {
    color: var(--c-page);
    background: var(--stage-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--stage-color) 20%, transparent);
  }
  .imw-stage-title {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    line-height: 1.1;
    letter-spacing: 0.02em;
    color: var(--c-heading);
  }
  .imw-stage-sub {
    font-size: 12px;
    color: var(--c-dim);
    line-height: 1.25;
  }
  .imw-stage .imw-nav-link {
    margin-left: 34px;
    width: calc(100% - 34px);
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .imw-loop-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0 2px 44px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--c-dim);
  }
  .imw-loop-note .q-icon {
    font-size: 15px;
    color: var(--stage-color);
  }
  /* Account, theme and settings stay in view at the foot of the rail while the stages scroll. */
  .imw-rail-foot {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: auto -10px 0;
    padding: 8px 10px 10px;
    border-top: 1px solid var(--c-line-soft);
    border-radius: 0 0 var(--r-sheet) var(--r-sheet);
    background: var(--sheet-bg-strong);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
  }

  /* signed-in account and the theme switch, at the foot of the sidebar */
  .imw-rail-foot .imw-smallcaps {
    padding: 4px 10px 6px;
  }
  .imw-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 4px 8px 10px;
  }
  .imw-user .imw-icon-btn.q-btn {
    margin-left: auto;
    width: 32px;
    height: 32px;
    min-height: 32px;
  }
  .imw-avatar {
    width: 30px;
    height: 30px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 999px;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    color: var(--c-cyan);
    background: var(--c-surface);
    box-shadow: inset 0 0 0 1px var(--c-line);
  }
  .imw-user-text {
    min-width: 0;
  }
  .imw-user-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--c-heading);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .imw-user .imw-meta {
    font-size: 11.5px;
  }
  .imw-seg {
    display: flex;
    gap: 2px;
    margin: 0 8px 8px;
    padding: 3px;
    border: 1px solid var(--c-line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--c-surface) 70%, transparent);
  }
  .imw-seg .q-btn.imw-seg-btn {
    flex: 1;
    min-height: 30px;
    padding: 2px 4px;
    border-radius: 9px;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    --btn-ink: var(--c-muted);
  }
  .imw-seg .q-btn.imw-seg-btn .q-icon {
    font-size: 16px;
  }
  .imw-seg .q-btn.imw-seg-btn.is-on {
    --btn-fill: var(--c-page);
    --btn-edge: var(--c-line);
    --btn-ink: var(--c-cyan);
  }

  /* dialogs: a glass sheet over a blurred page */
  .q-dialog__backdrop {
    -webkit-backdrop-filter: blur(6px) saturate(140%);
    backdrop-filter: blur(6px) saturate(140%);
    background: rgba(19, 21, 23, 0.32) !important;
  }
  .q-dialog .q-card {
    background: var(--sheet-bg-strong);
  }
  .q-toggle__inner--truthy .q-toggle__track {
    opacity: 0.6;
  }

  /* ------------------------------------------------------------------ wiki */
  .imw-wiki {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 1.5rem;
    align-items: start;
  }
  .imw-wiki-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.6rem 2rem 2.1rem;
  }
  .imw-wiki-aside {
    position: sticky;
    top: 108px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: calc(100vh - 128px);
    overflow-y: auto;
  }
  .imw-toc {
    padding: 12px 14px 14px;
    border-radius: var(--r-card);
  }
  .imw-toc summary {
    cursor: pointer;
    padding: 2px 4px 8px;
  }
  .imw-toc > .imw-smallcaps {
    display: block;
    padding: 2px 4px 8px;
  }
  .imw-toc-link {
    display: block;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--c-muted);
    text-decoration: none !important;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  .imw-toc-link:hover {
    background: var(--c-surface);
    color: var(--c-heading);
  }
  .imw-toc-l3 {
    padding-left: 20px;
    font-size: 13px;
  }
  .imw-toc-link.is-here {
    color: var(--c-cyan);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--c-cyan);
  }
  .imw-wiki-cards,
  .imw-wiki-neighbours {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
  /* The glossary on top of the wiki index: the page, then one card per half. */
  .imw-wiki-glossary {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
  .imw-wiki-card {
    padding: 1.1rem 1.25rem 1.2rem;
    gap: 0.45rem;
    border-top: 3px solid var(--stage-color);
  }
  .imw-wiki-card .imw-card-meta {
    color: var(--stage-color);
  }
  .imw-wiki-card-icon {
    font-size: 20px;
    color: var(--stage-color);
  }
  .imw-wiki-hit {
    width: 100%;
    padding: 0.8rem 1rem;
    gap: 0.25rem;
  }
  .imw-next.is-previous {
    flex-direction: row-reverse;
    text-align: right;
  }
  .imw-next.is-previous .imw-card-meta {
    flex-direction: row-reverse;
  }
  .imw-next.is-previous:hover .imw-next-arrow {
    transform: translateX(-4px);
  }

  /* Markdown content of a wiki page */
  .imw-prose {
    width: 100%;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--c-text);
  }
  .imw-prose > * + * {
    margin-top: 0.9em;
  }
  .imw-prose p,
  .imw-prose li {
    max-width: 76ch;
  }
  .imw-prose h2 {
    position: relative;
    margin-top: 2rem;
    padding-bottom: 9px;
    border-bottom: 2px solid var(--c-line);
    font-family: var(--font-serif);
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.025em;
    color: var(--c-heading);
    scroll-margin-top: 120px;
  }
  .imw-prose h2::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    height: 1px;
    background: var(--c-line);
  }
  .imw-prose h2 + * {
    margin-top: 1.1em;
  }
  .imw-prose h3 {
    margin-top: 1.6rem;
    font-family: var(--font-serif);
    font-size: 1.32rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--c-heading);
    scroll-margin-top: 120px;
  }
  .imw-prose h3 + * {
    margin-top: 0.5em;
  }
  .imw-prose ul,
  .imw-prose ol {
    padding-left: 1.35rem;
  }
  .imw-prose ul {
    list-style: disc;
  }
  .imw-prose ol {
    list-style: decimal;
  }
  .imw-prose li + li {
    margin-top: 0.35em;
  }
  .imw-prose li::marker {
    color: var(--c-cyan);
  }
  .imw-prose strong {
    font-weight: 650;
    color: var(--c-heading);
  }
  .imw-prose a {
    text-decoration: underline;
    text-decoration-color: var(--c-cyan-dim);
    text-underline-offset: 3px;
  }
  .imw-prose a:hover {
    text-decoration-color: currentColor;
  }
  .imw-prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.5;
  }
  .imw-prose th {
    padding: 9px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-dim);
    background: color-mix(in srgb, var(--c-surface) 75%, transparent);
    border-bottom: 1px solid var(--c-line);
  }
  .imw-prose td {
    padding: 9px 12px;
    vertical-align: top;
    border-bottom: 1px solid var(--c-line-soft);
  }
  .imw-prose td:first-child {
    color: var(--c-heading);
    font-weight: 500;
  }
  .imw-prose code {
    font-family: var(--font-mono);
    font-size: 0.86em;
    padding: 0.08em 0.38em;
    border: 1px solid var(--c-line-soft);
    border-radius: 5px;
    background: var(--c-surface);
    overflow-wrap: anywhere;
  }
  .imw-prose pre {
    padding: 12px 14px;
    border: 1px solid var(--c-line);
    border-radius: var(--r-control);
    background: var(--c-deep);
    overflow-x: auto;
  }
  .imw-prose pre code {
    padding: 0;
    border: 0;
    background: none;
  }
  .imw-prose blockquote {
    margin-left: 0;
    padding: 12px 16px;
    border-left: 2px solid var(--c-cyan);
    border-radius: 0 var(--r-control) var(--r-control) 0;
    background: color-mix(in srgb, var(--c-cyan) 7%, transparent);
  }
  .imw-prose blockquote p {
    margin: 0;
  }

  /* Paper reader: converted papers bring wide tables and full-size page images. Keep everything
     inside the reading pane; a wide table scrolls under itself instead of pushing the pane wider. */
  .imw-paper-card {
    width: calc(100% - 1rem); /* the pane's width, not the widest table's */
    min-width: 0;
    margin-right: 1rem;
  }
  .imw-paper {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .imw-paper img {
    max-width: 100%;
    height: auto;
  }
  .imw-paper table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
  }
  .imw-paper th,
  .imw-paper td {
    overflow-wrap: normal;
    vertical-align: top;
  }
  .imw-paper pre {
    max-width: 100%;
    overflow-x: auto;
  }

  /* Wiki diagrams: a chain of steps, and the experiment grid */
  .imw-flow {
    width: 100%;
    margin: 0.4rem 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 1.1rem;
  }
  .imw-flow-step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.85rem 0.95rem 0.95rem;
    border: 1px solid var(--c-line);
    border-top: 3px solid var(--stage-color);
    border-radius: var(--r-card);
    background: var(--sheet-bg-strong);
  }
  .imw-flow-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 1.3rem;
    right: calc(-1.1rem - 1px);
    width: 1.1rem;
    height: 6px;
    background:
      radial-gradient(circle at calc(100% - 3px) 50%, var(--stage-color) 2.5px, transparent 3px),
      linear-gradient(90deg, var(--stage-color), var(--stage-color)) 0 50% / calc(100% - 4px) 1.5px no-repeat;
    opacity: 0.8;
  }
  .imw-flow-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--stage-color);
  }
  .imw-flow-head .q-icon {
    font-size: 20px;
  }
  .imw-flow-title {
    font-family: var(--font-serif);
    font-size: 1.18rem;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: var(--c-heading);
  }
  .imw-flow-detail {
    font-size: 13px;
    line-height: 1.45;
    color: var(--c-muted);
  }
  .imw-flow-notes {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 13.5px;
    color: var(--c-muted);
  }
  .imw-flow-notes span {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }
  .imw-flow-notes .q-icon {
    font-size: 18px;
    color: var(--c-cyan);
    margin-top: 1px;
  }
  .imw-grid-figure {
    width: 100%;
    margin: 0.4rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow-x: auto; /* the block table scrolls inside the sheet on a phone */
  }
  .imw-dg-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px;
  }
  .imw-dg-table th {
    padding: 2px 12px;
    text-align: left;
    font-size: 11px;
  }
  .imw-dg-table td {
    padding: 10px 12px;
    background: color-mix(in srgb, var(--c-surface) 75%, transparent);
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
  }
  .imw-dg-table td:first-child {
    border-left: 3px solid var(--c-cyan);
    border-radius: 10px 0 0 10px;
    color: var(--c-heading);
    font-weight: 600;
  }
  .imw-dg-table td:last-child {
    border-right: 1px solid var(--c-line);
    border-radius: 0 10px 10px 0;
  }

  /* ------------------------------------------------------------ page shell */
  .imw-shell {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem 1.75rem 2rem;
    gap: 1.25rem;
  }
  .imw-pagehead {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    padding: 0.25rem 0.1rem 0.5rem;
  }
  .imw-pagehead-text {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
    flex: 1 1 440px;
  }
  .imw-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--stage-color, var(--c-cyan));
  }
  .imw-eyebrow .imw-smallcaps {
    color: inherit;
  }
  .imw-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
  }
  .imw-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }

  /* Next stage: the pipeline's forward arrow, set like a note card (mono meta, serif title). */
  .imw-next {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.1rem 1.4rem;
    margin-top: 0.5rem;
    color: var(--c-text);
    text-decoration: none !important;
  }
  .imw-next:hover {
    color: var(--c-text);
  }
  .imw-next-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
  }
  .imw-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--c-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .imw-card-hair {
    flex: 1;
    height: 1px;
    background: var(--c-line);
  }
  .imw-next-arrow {
    font-size: 26px;
    color: var(--c-dim);
    transition: transform 0.25s ease, color 0.25s ease;
  }
  .imw-next:hover .imw-next-arrow {
    transform: translateX(4px);
    color: var(--stage-color, var(--c-cyan));
  }

  /* Short pages: the page column fills the viewport (Quasar sets q-page's min-height) and the
     footer takes up the slack, so its notices sit at the bottom of the window. */
  .q-page {
    display: flex;
    flex-direction: column;
  }
  .q-page > .nicegui-content {
    flex: 1 0 auto;
  }
  .imw-footer {
    width: 100%;
    max-width: 1280px;
    margin: auto auto 0;
    padding: 0 1.75rem 2rem;
    gap: 0.6rem;
  }
  .imw-footer .imw-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--c-line);
  }

  /* ---------------------------------------------------------- overview map */
  .imw-hero {
    width: 100%;
    padding: 2rem 2.2rem 1.8rem;
    gap: 0.9rem;
  }
  .imw-pipeline {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.4rem;
  }
  .imw-stage-card {
    padding: 1.05rem 1rem 1rem;
    gap: 0.6rem;
    border-radius: var(--r-card);
  }
  .imw-stage-card .imw-card-meta {
    color: var(--stage-color);
  }
  .imw-stage-card .imw-card-hair {
    background: color-mix(in srgb, var(--stage-color) 35%, var(--c-line));
  }
  /* The trace between two stage cards, landing on a via. */
  .imw-pipeline > .imw-stage-card:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 1.55rem;
    right: calc(-1.4rem - 1px);
    width: 1.4rem;
    height: 6px;
    background:
      radial-gradient(circle at calc(100% - 3px) 50%, var(--next-stage-color) 2.5px, transparent 3px),
      linear-gradient(90deg, var(--stage-color), var(--next-stage-color)) 0 50% / calc(100% - 4px) 1.5px no-repeat;
    opacity: 0.85;
  }
  .imw-leader {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13.5px;
    white-space: nowrap;
    color: var(--c-muted);
  }
  .imw-leader .dots {
    flex: 1;
    min-width: 8px;
    border-bottom: 1px dotted var(--c-faint);
    transform: translateY(-4px);
  }
  .imw-leader-value {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--c-heading);
  }
  .imw-stage-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 6px;
  }
  .imw-chip-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border: 1px solid var(--c-line);
    border-radius: 6px;
    background: var(--c-surface);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.03em;
    color: var(--c-muted);
    text-decoration: none !important;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  }
  .imw-chip-link:hover {
    color: var(--c-cyan);
    border-color: var(--c-cyan-dim);
    background: var(--c-deep);
  }
  .imw-chip-link .q-icon {
    font-size: 15px;
  }
  .imw-flow-note {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.6rem;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--c-dim);
  }
  .imw-flow-note span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .imw-flow-note .q-icon {
    font-size: 16px;
    color: var(--c-cyan);
  }
  /* Two even columns (one on phones). Auto-fit used to make three on wide screens, so a fourth
     card wrapped alone under the tallest one and looked shifted down; cards in a row now share
     its height and keep their action button on the bottom edge. */
  .imw-grid-2 {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: stretch;
  }
  .imw-grid-2 > .q-card > .q-btn:last-child {
    margin-top: auto;
  }
  .imw-grid-cards {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
  }
  .imw-status-dot {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 999px;
    background: var(--dot, var(--c-faint));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot, var(--c-faint)) 22%, transparent);
  }

  /* ------------------------------------------------------------- pills */
  .imw-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border: 1px solid var(--pill-edge);
    border-radius: 999px;
    background: var(--pill-fill);
    color: var(--pill-ink);
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.03em;
    line-height: 1.5;
    white-space: nowrap;
  }
  .imw-pill--neutral,
  .imw-pill--unknown {
    --pill-ink: var(--c-muted);
    --pill-fill: var(--c-surface);
    --pill-edge: var(--c-line);
  }
  .imw-pill--pass {
    --pill-ink: var(--c-turquoise);
    --pill-fill: color-mix(in srgb, var(--c-turquoise) 10%, transparent);
    --pill-edge: color-mix(in srgb, var(--c-turquoise) 40%, transparent);
  }
  .imw-pill--warn {
    --pill-ink: var(--c-warm);
    --pill-fill: color-mix(in srgb, var(--c-warm) 10%, transparent);
    --pill-edge: color-mix(in srgb, var(--c-warm) 40%, transparent);
  }
  .imw-pill--fail {
    --pill-ink: var(--c-coral);
    --pill-fill: color-mix(in srgb, var(--c-coral) 10%, transparent);
    --pill-edge: color-mix(in srgb, var(--c-coral) 42%, transparent);
  }
  .imw-pill--info {
    --pill-ink: var(--c-cyan);
    --pill-fill: color-mix(in srgb, var(--c-cyan) 9%, transparent);
    --pill-edge: color-mix(in srgb, var(--c-cyan) 40%, transparent);
  }

  .imw-callout {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--c-line);
    border-left: 2px solid var(--callout, var(--c-cyan));
    border-radius: var(--r-control);
    background: var(--sheet-bg);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    font-size: 14px;
    color: var(--c-text);
  }
  .imw-callout .q-icon {
    font-size: 19px;
    color: var(--callout, var(--c-cyan));
  }
  .imw-callout--warn {
    --callout: var(--c-warm);
  }
  .imw-callout--danger {
    --callout: var(--c-coral);
  }
  .imw-callout--info {
    --callout: var(--c-cyan);
  }

  /* ----------------------------------------------------------- buttons */
  /* The family recipe, four stacked backgrounds painted top to bottom:
       1. specular bloom that follows the cursor   (padding box)
       2. the body fill                            (padding box)
       3. lit edge, brightest nearest the cursor   (border box)
       4. the resting edge colour                  (border box)
     Layers 1-2 clip to the padding box, so only 3-4 show through the transparent 1px border. */
  .q-btn {
    --glass: 0;
    --mx: 50%;
    --my: 50%;
    --btn-fill: var(--c-surface);
    --btn-edge: var(--c-line);
    --btn-ink: var(--c-text);
    min-height: 38px;
    padding: 8px 16px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--btn-ink) !important;
    background-image:
      radial-gradient(120px circle at var(--mx) var(--my), rgba(var(--glow-rgb), calc(var(--glass) * 0.2)),
        rgba(var(--glow-rgb), 0) 65%),
      linear-gradient(var(--btn-fill), var(--btn-fill)),
      radial-gradient(90px circle at var(--mx) var(--my), rgba(var(--spec-rgb), calc(var(--glass) * var(--spec-alpha))),
        rgba(var(--glow-rgb), calc(var(--glass) * 0.4)) 45%,
        rgba(var(--edge-lo-rgb), calc(var(--glass) * var(--edge-lo-alpha))) 100%),
      linear-gradient(var(--btn-edge), var(--btn-edge)) !important;
    background-color: transparent !important;
    background-clip: padding-box, padding-box, border-box, border-box;
    background-origin: border-box;
    background-repeat: no-repeat;
    border: 1px solid transparent;
    border-radius: var(--r-control);
    transition: --glass 0.28s ease, color 0.2s ease, transform 0.12s ease;
  }
  .q-btn::before,
  .q-btn .q-ripple,
  .q-btn .q-focus-helper {
    display: none;
  }
  .q-btn:hover {
    --glass: 1;
  }
  .q-btn:active {
    transform: translateY(1px) scale(0.99);
  }
  .q-btn .q-icon {
    font-size: 1.35em;
  }
  .q-btn .q-btn__content {
    gap: 6px;
  }
  .q-btn .q-icon.on-left {
    margin-right: 0;
  }
  /* primary: the accent carried into the fill and the edge */
  .q-btn.bg-primary {
    --btn-fill: color-mix(in srgb, var(--c-cyan) 11%, var(--c-page));
    --btn-edge: var(--c-cyan-dim);
    --btn-ink: var(--c-cyan);
  }
  .q-btn.bg-primary:hover {
    --btn-ink: var(--c-heading);
  }
  .q-btn--outline {
    --btn-fill: var(--c-page);
  }
  .q-btn--flat {
    --btn-fill: transparent;
    --btn-edge: transparent;
    --btn-ink: var(--c-muted);
  }
  .q-btn--flat:hover {
    --btn-fill: var(--c-surface);
    --btn-ink: var(--c-heading);
  }
  .q-btn--dense {
    min-height: 32px;
    padding: 4px 10px;
  }
  .q-btn--round,
  .q-btn--dense.q-btn--round {
    padding: 0;
    border-radius: 999px;
  }
  .q-btn:focus-visible {
    outline: 2px solid var(--c-cyan);
    outline-offset: 3px;
  }
  .q-btn.disabled {
    opacity: 0.5 !important;
  }

  /* ------------------------------------------------------------ fields */
  /* Same construction as the buttons: the specular light shows on hover only. Once a field has
     focus the user is reading and typing, so it settles into a calm, darker fill. */
  .q-field--standard .q-field__control,
  .q-field--outlined .q-field__control {
    --glass: 0;
    --mx: 50%;
    --my: 50%;
    --field-fill: var(--c-surface);
    --field-edge: var(--c-faint);
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: var(--r-control);
    background-color: var(--field-fill);
    background-image:
      radial-gradient(150px circle at var(--mx) var(--my), rgba(var(--glow-rgb), calc(var(--glass) * 0.16)),
        rgba(var(--glow-rgb), 0) 65%),
      linear-gradient(var(--field-fill), var(--field-fill)),
      radial-gradient(100px circle at var(--mx) var(--my), rgba(var(--spec-rgb), calc(var(--glass) * var(--spec-alpha))),
        rgba(var(--glow-rgb), calc(var(--glass) * 0.4)) 45%,
        rgba(var(--edge-lo-rgb), calc(var(--glass) * var(--edge-lo-alpha))) 100%),
      linear-gradient(var(--field-edge), var(--field-edge));
    background-clip: padding-box, padding-box, border-box, border-box;
    background-origin: border-box;
    background-repeat: no-repeat;
    transition: --glass 0.28s ease, box-shadow 0.2s ease;
  }
  .q-field--standard .q-field__control::before,
  .q-field--standard .q-field__control::after,
  .q-field--outlined .q-field__control::before,
  .q-field--outlined .q-field__control::after {
    display: none !important;
  }
  .q-field:not(.q-field--focused) .q-field__control:hover {
    --glass: 1;
  }
  .q-field--focused .q-field__control {
    --glass: 0;
    --field-fill: var(--c-deep);
    --field-edge: var(--c-cyan-dim);
    box-shadow: 0 0 0 3px rgba(var(--glow-rgb), 0.12);
  }
  .q-field--error .q-field__control {
    --field-edge: var(--c-coral);
  }
  .q-field__label {
    color: var(--c-dim);
  }
  .q-field--float .q-field__label {
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
  }
  .q-field__native,
  .q-field__input,
  .q-field__prefix,
  .q-field__suffix,
  .q-field__marginal {
    color: var(--c-text);
  }
  .q-field--focused .q-field__label {
    color: var(--c-cyan);
  }
  .q-field .q-chip {
    border: 1px solid var(--c-line);
    border-radius: 6px;
    background: var(--c-page);
    color: var(--c-text);
    font-family: var(--font-mono);
    font-size: 12px;
  }
  .q-checkbox__inner,
  .q-radio__inner,
  .q-toggle__inner {
    color: var(--c-dim);
  }
  .q-checkbox__inner--truthy,
  .q-radio__inner--truthy,
  .q-toggle__inner--truthy {
    color: var(--c-cyan);
  }

  /* --------------------------------------------------- menus and popups */
  .q-menu {
    border: 1px solid var(--c-line);
    border-radius: 14px;
    background: var(--sheet-bg-strong);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    box-shadow: var(--sheet-shadow-hover);
    color: var(--c-text);
    padding: 4px;
  }
  .q-menu .q-item {
    min-height: 36px;
    border-radius: 8px;
  }
  .q-menu .q-item--active {
    color: var(--c-cyan);
  }
  .q-menu .q-manual-focusable--focused > .q-focus-helper,
  .q-menu .q-item:hover > .q-focus-helper {
    background: var(--c-surface) !important;
    opacity: 1 !important;
  }
  .q-menu .q-item__section {
    position: relative;
  }
  .q-notification {
    border: 1px solid #2e3438;
    border-left: 2px solid #5fd4e0;
    border-radius: 12px;
    background: rgba(19, 21, 23, 0.9) !important;
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    color: #f4f6f7 !important;
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.55);
  }
  .q-notification.bg-negative {
    border-left-color: #d98e73;
  }
  .q-notification.bg-warning {
    border-left-color: #d7b778;
  }
  .q-notification.bg-positive {
    border-left-color: #4ec9a8;
  }
  .q-notification .q-icon {
    color: inherit;
  }
  .q-tooltip {
    border: 1px solid #2e3438;
    border-radius: 8px;
    background: rgba(19, 21, 23, 0.92);
    color: #f4f6f7;
    font-family: var(--font-mono);
    font-size: 11.5px;
  }

  /* ------------------------------------------------------------ tables */
  .q-table__container.q-table__card,
  .q-table__card {
    background: var(--sheet-bg);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border: 1px solid var(--sheet-border);
    border-radius: var(--r-card);
    box-shadow: var(--sheet-shadow);
    color: var(--c-text);
    overflow: hidden;
  }
  .q-table__card .q-table__middle {
    border-radius: inherit;
  }
  .q-table thead tr {
    height: 42px;
  }
  .q-table th {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-dim);
    background: color-mix(in srgb, var(--c-surface) 75%, transparent);
  }
  .q-table th,
  .q-table td,
  .q-table thead tr,
  .q-table tbody td {
    border-color: var(--c-line-soft);
  }
  .q-table tbody td.imw-mono {
    white-space: nowrap;
    overflow-wrap: normal;
  }
  .q-table tbody td {
    white-space: normal;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--c-text);
  }
  .q-table tbody td::before {
    display: none;
  }
  /* Rows that open a detail page: the contents-row glass, keyed to the pointer. */
  .q-table__container.cursor-pointer tbody tr {
    --mx: 50%;
    --my: 50%;
    background-image: radial-gradient(340px circle at var(--mx) var(--my),
        rgba(var(--row-glass-rgb), calc(var(--glass) * var(--row-glass-alpha))), transparent 70%);
    background-repeat: no-repeat;
    transition: --glass 0.28s ease;
  }
  .q-table__container.cursor-pointer tbody tr:hover {
    --glass: 1;
  }
  .q-table__container.cursor-pointer tbody tr:hover td:first-child {
    color: var(--c-cyan);
  }
  .q-table__bottom {
    border-color: var(--c-line-soft);
    color: var(--c-dim);
    font-family: var(--font-mono);
    font-size: 12px;
  }
  .q-table__bottom--nodata {
    justify-content: center;
    padding: 22px;
  }

  /* --------------------------------------------------- tabs and stepper */
  .q-tabs {
    width: fit-content;
    max-width: 100%;
    padding: 4px;
    border: 1px solid var(--sheet-border);
    border-radius: 12px;
    background: var(--sheet-bg);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    box-shadow: var(--sheet-shadow);
  }
  .q-tab {
    min-height: 34px;
    padding: 0 14px;
    border-radius: 8px;
    color: var(--c-muted);
    text-transform: none;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  .q-tab__label {
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .q-tab:hover {
    color: var(--c-heading);
  }
  .q-tab--active {
    color: var(--c-cyan);
    background: var(--c-surface);
    box-shadow: inset 0 0 0 1px var(--c-line);
  }
  .q-tab__indicator,
  .q-tab .q-focus-helper {
    display: none;
  }
  .q-tab-panels {
    background: transparent;
  }
  .q-tab-panel {
    padding: 16px 0 0;
  }
  .q-stepper {
    background: var(--sheet-bg);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border: 1px solid var(--sheet-border);
    border-radius: var(--r-sheet);
    box-shadow: var(--sheet-shadow);
    color: var(--c-text);
  }
  .q-stepper__tab {
    padding: 16px 24px 10px;
  }
  .q-stepper__title {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    letter-spacing: 0.02em;
    color: var(--c-heading);
  }
  .q-stepper__dot {
    width: 26px;
    min-width: 26px;
    height: 26px;
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--c-cyan) !important;
    background: var(--c-page) !important;
    box-shadow: inset 0 0 0 1.5px var(--c-cyan);
  }
  .q-stepper__tab--active .q-stepper__dot,
  .q-stepper__tab--done .q-stepper__dot {
    color: var(--c-page) !important;
    background: var(--c-cyan) !important;
  }
  .q-stepper__tab:not(.q-stepper__tab--active):not(.q-stepper__tab--done) .q-stepper__dot {
    color: var(--c-dim) !important;
    box-shadow: inset 0 0 0 1.5px var(--c-faint);
  }
  .q-stepper--vertical .q-stepper__dot::before,
  .q-stepper--vertical .q-stepper__dot::after {
    width: 1.5px;
    background: var(--c-line);
  }
  .q-stepper__nav {
    gap: 8px;
  }
  .q-linear-progress {
    height: 6px !important;
    border-radius: 999px;
    overflow: hidden;
    color: var(--c-cyan);
  }
  .q-linear-progress__track {
    background: var(--c-surface);
    opacity: 1;
  }
  .q-linear-progress__model {
    background: linear-gradient(90deg, var(--c-turquoise), var(--c-cyan), var(--c-blue));
  }

  /* ---------------------------------------------- code, upload, charts */
  .nicegui-code {
    border: 1px solid var(--c-line);
    border-radius: var(--r-control);
    background: var(--c-deep);
    overflow: hidden;
  }
  .nicegui-code pre,
  .nicegui-code code {
    background: transparent !important;
    font-family: var(--font-mono);
    font-size: 12.5px;
  }
  .q-uploader {
    width: 100%;
    border: 1px solid var(--c-line);
    border-radius: var(--r-control);
    background: var(--c-surface);
    box-shadow: none;
    overflow: hidden;
  }
  .q-uploader__header {
    background: var(--c-deep);
    color: var(--c-text);
  }
  .q-uploader__title,
  .q-uploader__subtitle {
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
  }
  .q-uploader__header .q-btn {
    --btn-fill: transparent;
    --btn-edge: transparent;
  }
  .q-splitter__separator,
  .q-separator {
    background: var(--c-line);
  }
  /* Charts: charts.py sets the light-theme colours inline (Plotly paints SVG attributes); the dark
     rules below lift each role: headings, axis text, legend, grid, axis lines. Class names are
     those of plotly.js 3 (gtitle, gtitle-subtitle, *title, g.*tick, xlines-*, gridlayer). */
  .imw-chart {
    padding: 0.85rem 0.9rem 0.6rem;
  }
  .js-plotly-plot .plotly .modebar,
  .js-plotly-plot .plotly .modebar-group {
    background: transparent !important;
  }
  .js-plotly-plot .plotly .modebar-btn path {
    fill: var(--c-dim) !important;
  }
  .js-plotly-plot .plotly .modebar-btn:hover path,
  .js-plotly-plot .plotly .modebar-btn.active path {
    fill: var(--c-cyan) !important;
  }
  html.imw-dark .js-plotly-plot .main-svg text {
    fill: #c9cfd2 !important;
  }
  html.imw-dark .js-plotly-plot .main-svg text.gtitle,
  html.imw-dark .js-plotly-plot .main-svg text.annotation-text {
    fill: #f4f6f7 !important;
  }
  html.imw-dark .js-plotly-plot .main-svg text.gtitle-subtitle,
  html.imw-dark .js-plotly-plot .main-svg g[class$="tick"] > text,
  html.imw-dark .js-plotly-plot .main-svg [class^="g-"][class$="title"] > text:not(.gtitle):not(.gtitle-subtitle) {
    fill: #9aa3a8 !important;
  }
  /* the tooltip is dark in both themes; keep its text bright */
  html.imw-dark .js-plotly-plot .hoverlayer text {
    fill: #f4f6f7 !important;
  }
  html.imw-dark .js-plotly-plot .gridlayer path {
    stroke: rgba(201, 207, 210, 0.1) !important;
  }
  html.imw-dark .js-plotly-plot path[class*="lines-above"],
  html.imw-dark .js-plotly-plot path[class*="lines-below"],
  html.imw-dark .js-plotly-plot .zerolinelayer path {
    stroke: rgba(201, 207, 210, 0.35) !important;
  }
  .ag-root-wrapper {
    --ag-background-color: var(--c-page);
    --ag-header-background-color: var(--c-surface);
    --ag-odd-row-background-color: transparent;
    --ag-foreground-color: var(--c-text);
    --ag-header-text-color: var(--c-dim);
    --ag-border-color: var(--c-line);
    --ag-row-border-color: var(--c-line-soft);
    --ag-row-hover-color: var(--c-surface);
    --ag-selected-row-background-color: var(--c-deep);
    --ag-font-family: var(--font-mono);
    --ag-font-size: 12.5px;
    --ag-wrapper-border-radius: var(--r-control);
    --ag-input-focus-border-color: var(--c-cyan);
  }

  /* ------------------------------------------------------------- login */
  .imw-login {
    width: min(440px, calc(100vw - 32px));
    padding: 2.2rem 2.2rem 1.9rem;
    gap: 1rem;
  }
  .imw-login .imw-logo {
    width: 52px;
    height: 52px;
  }

  /* scrollbar */
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--c-line) transparent;
  }

  /* --------------------------------------------------------- responsive */
  @media (max-width: 1240px) {
    .imw-pipeline {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .imw-pipeline > .imw-stage-card::before {
      display: none;
    }
  }
  @media (max-width: 1100px) {
    .imw-brand-em {
      display: none;
    }
  }
  @media (max-width: 1100px) {
    .imw-wiki {
      grid-template-columns: minmax(0, 1fr);
    }
    .imw-wiki-glossary {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .imw-wiki-glossary > :first-child {
      grid-column: 1 / -1;
    }
    .imw-wiki-aside {
      position: static;
      order: -1;
      max-height: none;
    }
  }
  @media (max-width: 900px) {
    .imw-flow {
      grid-auto-flow: row;
      grid-auto-columns: auto;
    }
    .imw-flow-step:not(:last-child)::after {
      top: auto;
      right: auto;
      bottom: calc(-1.1rem - 1px);
      left: 1.45rem;
      width: 6px;
      height: 1.1rem;
      background:
        radial-gradient(circle at 50% calc(100% - 3px), var(--stage-color) 2.5px, transparent 3px),
        linear-gradient(var(--stage-color), var(--stage-color)) 50% 0 / 1.5px calc(100% - 4px) no-repeat;
    }
  }
  @media (max-width: 760px) {
    .imw-grid-2,
    .imw-wiki-cards,
    .imw-wiki-neighbours,
    .imw-wiki-glossary {
      grid-template-columns: minmax(0, 1fr);
    }
    /* A wide table scrolls inside the sheet instead of widening the page; the anonymous table box
       inside still wraps its cells to the sheet's width first. */
    .imw-prose table {
      display: block;
      width: max-content;
      max-width: 100%;
      overflow-x: auto;
    }
    .imw-wiki-body {
      padding: 1.1rem 1.1rem 1.4rem;
    }
    .imw-mast {
      padding: 8px 12px 6px 6px;
      gap: 0.4rem;
    }
    .imw-brand-title {
      font-size: 1.2rem;
    }
    .imw-logo {
      width: 30px;
      height: 30px;
    }
    .imw-safety-text {
      display: none;
    }
    .imw-crumb-bar {
      padding: 6px 14px 7px;
    }
    .imw-crumbs ol {
      overflow-x: auto;
      scrollbar-width: none;
    }
    .imw-shell {
      padding: 1rem 0.9rem 1.5rem;
    }
    .imw-footer {
      padding: 0 0.9rem 1.5rem;
    }
    .imw-pipeline {
      grid-template-columns: minmax(0, 1fr);
    }
    .imw-hero {
      padding: 1.4rem 1.2rem;
    }
    .imw-panel {
      padding: 1.1rem 1.1rem;
    }
  }
  @media (max-width: 420px) {
    .imw-brand-title {
      font-size: 1.02rem;
      letter-spacing: 0.01em;
    }
    .imw-brand {
      gap: 8px;
    }
  }

  /* ---------------------------------------------------- accessibility */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      transition-duration: 0.01ms !important;
      animation: none !important;
    }
    .imw-crumbs ol::after {
      opacity: 0.55;
    }
  }
  @media (prefers-reduced-transparency: reduce) {
    :root {
      --sheet-bg: #ffffff;
      --sheet-bg-strong: #ffffff;
      --header-bg: #f7f8f9;
      --blur: none;
    }
    html.imw-dark {
      --sheet-bg: #1e2326;
      --sheet-bg-strong: #1e2326;
      --header-bg: #131517;
    }
  }
  :focus-visible {
    outline: 2px solid var(--c-cyan);
    outline-offset: 2px;
  }
}