/* ─────────────────────────────────────────────────────────────────────────────
   mobile-ui.css — NYMPH mobile experience

   Authoritative mobile stylesheet. Loaded near-last in index.html; nymph-swiss
   deliberately keeps its hands off the `.nm-*` DOM so this file owns the whole
   phone experience end to end.

   This pass answers three complaints:

     1. "The cards are very small and it's hard to change the sliders."
        The old sheet was capped at min(22vh, 210px) — barely two rows tall, so
        every card scrolled and every slider sat under your thumb. The sheet is
        now min(52svh, 470px). It can afford the height because the glass got
        much more transparent: 0.26 veil instead of 0.34, and no bottom mask.
        You watch the artwork change *through* the controls.

     2. "The colour picker is impossible to use."
        The picker now takes over the sheet and grows it to min(76svh, 640px).
        A proper HSL square, then three full-width tracks — hue, saturation,
        lightness — each painted with a live gradient of its own outcome. A hex
        field you can type into, and a copy button. Recents underneath.

     3. "Themes and their order should make more sense."
        Cards follow one grammar in every module: what colour → what form →
        what structure → what finish. Names are shared across modules so the
        tab bar teaches itself once.

   Ink is white throughout — the veil is dark enough, and blurred enough, that
   it works over both a black backdrop and a bleached one. Antique gold marks
   the one active thing on screen.
   ───────────────────────────────────────────────────────────────────────────── */

/* Hidden by default → never appears on desktop, regardless of load order. */
.nymph-m { display: none; }

@media (max-width: 820px) {

  :root {
    /* ── Liquid glass ──────────────────────────────────────────────────────
       Low-alpha veil + heavy blur + saturation lift. The surface takes its
       hue from whatever is behind it rather than imposing one. */
    --nm-veil:         rgba(14, 12, 24, 0.26);
    --nm-veil-strong:  rgba(14, 12, 24, 0.34);
    --nm-surface-2:    rgba(255, 255, 255, 0.06);
    --nm-raise:        rgba(255, 255, 255, 0.11);
    --nm-raise-2:      rgba(255, 255, 255, 0.17);
    --nm-line:         rgba(255, 255, 255, 0.16);
    --nm-line-soft:    rgba(255, 255, 255, 0.08);
    --nm-edge:         rgba(255, 255, 255, 0.30);

    /* legacy aliases kept so nothing downstream breaks */
    --nm-surface:      var(--nm-veil);

    --nm-ink:          rgba(255, 253, 248, 0.97);
    --nm-ink-dim:      rgba(255, 253, 248, 0.66);
    --nm-ink-faint:    rgba(255, 253, 248, 0.42);

    /* ── Accent: antique gold ──────────────────────────────────────────── */
    --nm-accent:       #C9A56B;
    --nm-accent-soft:  rgba(201, 165, 107, 0.18);
    --nm-accent-line:  rgba(201, 165, 107, 0.55);
    --nm-accent-glow:  rgba(201, 165, 107, 0.30);
    --nm-on-accent:    #16120B;

    --nm-danger:       rgba(224, 116, 106, 0.92);

    --nm-blur:         saturate(1.8) blur(26px);
    --nm-blur-strong:  saturate(1.9) blur(34px);
    --nm-shadow:
      0 26px 64px rgba(0, 0, 0, 0.34),
      0 3px 14px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.26),
      inset 0 -1px 0 rgba(255, 255, 255, 0.08);
    --nm-ease:         cubic-bezier(0.32, 0.72, 0, 1);

    /* ── Sizing ────────────────────────────────────────────────────────── */
    --nm-r-lg:         24px;
    --nm-r-md:         13px;
    --nm-r-sm:         10px;
    --nm-dock-h:       58px;
    --nm-top-h:        46px;
    --nm-safe-b:       env(safe-area-inset-bottom, 0px);
    --nm-safe-t:       env(safe-area-inset-top, 0px);

    /* Sheet height. Roomy by default, tall for the picker. */
    --nm-sheet-max:    min(52svh, 470px);
  }

  /* ── stable full-height stage; hide desktop chrome ─────────────────────── */
  #root {
    height: 100dvh !important;
    height: var(--nymph-vh, 100dvh) !important;
  }
  canvas.stage { height: 100% !important; }

  .rail,
  .nurr-brand,
  .nurr-brand-button,
  .corner-mark,
  .nurr-support-strip,
  .mobile-panel-handle { display: none !important; }

  .panel:not(.collapsed),
  .panel.collapsed,
  .panel { display: none !important; }

  .nymph-m {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  .nymph-m > * { pointer-events: auto; }
  .nymph-m button { font-family: inherit; -webkit-tap-highlight-color: transparent; }
  .nymph-m input  { font-family: inherit; }

  /* Shared glass recipe. `--glass-a` lets each shell tune its own opacity. */
  .nm-top,
  .nm-dock,
  .nm-sheet {
    background:
      radial-gradient(120% 140% at 4% -30%, rgba(255,255,255,0.16), rgba(255,255,255,0) 62%),
      var(--glass-a, var(--nm-veil));
    -webkit-backdrop-filter: var(--nm-blur);
            backdrop-filter: var(--nm-blur);
    border: 1px solid var(--nm-edge);
    box-shadow: var(--nm-shadow);
  }

  /* ── top strip: logo + modules ─────────────────────────────────────────── */
  .nm-top {
    position: absolute;
    top: calc(var(--nm-safe-t) + 8px);
    left: 10px; right: 10px;
    height: var(--nm-top-h);
    display: flex; align-items: center; gap: 8px;
    padding: 5px 8px 5px 10px;
    border-radius: 999px;
    --glass-a: var(--nm-veil);
  }
  .nm-logo {
    flex: none;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    background: none; border: none; padding: 0;
    cursor: pointer;
  }
  /* The mark ships as black artwork; on dark glass it has to be inverted. */
  .nm-logo img {
    width: 22px; height: 22px; display: block;
    opacity: 0.96;
    filter: invert(1) drop-shadow(0 1px 3px rgba(0,0,0,0.35));
  }

  .nm-modes {
    display: flex; align-items: center; gap: 2px;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-left: 2px;
  }
  .nm-modes::-webkit-scrollbar { display: none; }
  .nm-mode {
    flex: none;
    display: inline-flex; align-items: baseline; gap: 4px;
    padding: 7px 13px;
    border: none; border-radius: 999px;
    background: transparent;
    color: var(--nm-ink-dim);
    font-size: 12.5px; letter-spacing: 0.01em; line-height: 1;
    cursor: pointer;
    transition: color 0.2s var(--nm-ease), background 0.2s var(--nm-ease);
  }
  .nm-mode-num {
    font-family: "Instrument Serif", Georgia, serif;
    font-style: italic;
    font-size: 10.5px;
    opacity: 0.68;
    color: inherit;
  }
  .nm-mode.is-on {
    color: var(--nm-ink);
    background: var(--nm-raise);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
  }
  .nm-mode.is-on .nm-mode-num { color: var(--nm-accent); opacity: 1; }

  /* ── bottom dock ───────────────────────────────────────────────────────── */
  .nm-dock {
    position: absolute;
    left: 10px; right: 10px;
    bottom: calc(var(--nm-safe-b) + 10px);
    height: var(--nm-dock-h);
    display: flex; align-items: stretch;
    padding: 5px;
    border-radius: 19px;
    --glass-a: var(--nm-veil);
  }
  .nm-dock-btn {
    flex: 1 1 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    border: none; border-radius: 14px;
    background: transparent;
    color: var(--nm-ink-dim);
    cursor: pointer;
    transition: color 0.18s var(--nm-ease), background 0.18s var(--nm-ease);
  }
  .nm-dock-btn span {
    font-size: 9.5px; letter-spacing: 0.05em;
    text-transform: uppercase; font-weight: 500;
  }
  .nm-dock-btn svg { width: 19px; height: 19px; }
  .nm-dock-btn:active { background: var(--nm-raise); color: var(--nm-ink); }
  .nm-dock-btn.is-on {
    color: var(--nm-ink);
    background: var(--nm-raise);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -2px 0 var(--nm-accent);
  }
  .nm-dock-btn.is-on svg { color: var(--nm-accent); }
  .nm-dock-btn:disabled { opacity: 0.32; pointer-events: none; }

  /* ── sheets (controls / export) ────────────────────────────────────────── */
  .nm-sheet {
    position: absolute;
    left: 10px; right: 10px;
    bottom: calc(var(--nm-safe-b) + var(--nm-dock-h) + 22px);
    max-height: min(
      var(--nm-sheet-max),
      calc(var(--nymph-vh, 100dvh) - var(--nm-safe-t) - var(--nm-top-h) - var(--nm-dock-h) - 64px)
    );
    display: flex; flex-direction: column;
    border-radius: var(--nm-r-lg);
    overflow: hidden;
    --glass-a: var(--nm-veil-strong);
    -webkit-backdrop-filter: var(--nm-blur-strong);
            backdrop-filter: var(--nm-blur-strong);
    animation: nm-rise 0.32s var(--nm-ease);
    transition: transform 0.22s var(--nm-ease), max-height 0.30s var(--nm-ease);
  }
  /* The picker needs real estate; the sheet grows to give it. */
  .nm-sheet.has-picker { --nm-sheet-max: min(76svh, 640px); }

  @keyframes nm-rise {
    from { transform: translateY(12px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .nm-sheet { animation: none; transition: none; }
  }

  .nm-sheet-grip {
    flex: none;
    height: 20px;
    display: flex; align-items: center; justify-content: center;
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none; user-select: none;
  }
  .nm-sheet-grip:active { cursor: grabbing; }
  .nm-sheet-grip::before {
    content: ""; width: 36px; height: 4px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.32);
  }

  .nm-sheet-head {
    flex: none;
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 2px 16px 8px;
  }
  .nm-eyebrow {
    font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--nm-accent); font-weight: 600; margin-bottom: 3px;
  }
  .nm-sheet-title {
    font-family: "Instrument Serif", Georgia, serif;
    font-size: 20px; line-height: 1; color: var(--nm-ink);
    font-weight: 400;
  }
  .nm-x {
    flex: none; width: 32px; height: 32px;
    display: grid; place-items: center;
    border: 1px solid var(--nm-line); border-radius: 999px;
    background: var(--nm-surface-2); color: var(--nm-ink);
    cursor: pointer;
  }

  .nm-sheet-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 6px 16px 18px;
    display: flex; flex-direction: column; gap: 14px;
    scrollbar-width: none;
  }
  .nm-sheet-body::-webkit-scrollbar { display: none; }
  .nm-card-body { padding-top: 12px; }

  /* ── card tabs ─────────────────────────────────────────────────────────── */
  .nm-cardtabs {
    flex: none;
    display: flex; gap: 2px;
    padding: 2px 12px 0;
    overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--nm-line-soft);
  }
  .nm-cardtabs::-webkit-scrollbar { display: none; }
  .nm-cardtab {
    flex: none;
    position: relative;
    padding: 10px 13px 12px;
    border: none;
    background: transparent;
    color: var(--nm-ink-faint);
    font-size: 9.5px; font-weight: 600; letter-spacing: 0.17em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.18s var(--nm-ease);
  }
  .nm-cardtab.is-on { color: var(--nm-ink); }
  .nm-cardtab.is-on::after {
    content: "";
    position: absolute;
    left: 10px; right: 10px; bottom: -1px;
    height: 2px; background: var(--nm-accent);
    border-radius: 999px;
  }

  /* ── action row (Shuffle / Undo etc. at top of a card) ─────────────────── */
  .nm-action-row { display: flex; gap: 8px; }
  .nm-action {
    flex: 1 1 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--nm-line); border-radius: var(--nm-r-md);
    background: var(--nm-surface-2); color: var(--nm-ink);
    font-size: 12.5px; font-weight: 500; letter-spacing: 0.01em;
    cursor: pointer;
    transition: color 0.16s var(--nm-ease),
                background 0.16s var(--nm-ease),
                border-color 0.16s var(--nm-ease),
                transform 0.12s var(--nm-ease);
  }
  .nm-action:active { transform: scale(0.985); }
  .nm-action:disabled { opacity: 0.34; pointer-events: none; }
  .nm-action.is-primary {
    background: var(--nm-raise-2);
    border-color: var(--nm-accent-line);
    color: var(--nm-ink);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 0 0 1px var(--nm-accent-glow);
  }
  .nm-action svg { flex: none; }

  /* ── slider rows ───────────────────────────────────────────────────────── */
  .nm-row { display: flex; flex-direction: column; gap: 4px; }
  .nm-row-head {
    display: flex; align-items: baseline; justify-content: space-between;
    min-height: 15px;
  }
  .nm-row-label {
    font-size: 12.5px; color: var(--nm-ink); letter-spacing: 0.005em;
  }
  .nm-row-val {
    font-size: 11px; color: var(--nm-ink-dim);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
  }
  .nm-slider-wrap {
    position: relative;
    display: block;
    padding: 2px 0;
  }
  .nm-slider {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 32px; margin: 0;
    background: transparent; cursor: pointer;
    accent-color: var(--nm-accent);
    display: block;
  }
  .nm-slider::-webkit-slider-runnable-track {
    height: 5px; border-radius: 999px;
    background: rgba(255, 253, 246, 0.18);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
  }
  .nm-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 26px; height: 26px; margin-top: -10.5px;
    border-radius: 50%;
    background: rgba(255, 253, 248, 0.96);
    border: 2px solid var(--nm-accent);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.34);
    transition: transform 0.14s var(--nm-ease);
  }
  .nm-slider:active::-webkit-slider-thumb { transform: scale(1.12); }
  .nm-slider::-moz-range-track {
    height: 5px; border-radius: 999px;
    background: rgba(255, 253, 246, 0.18);
  }
  .nm-slider::-moz-range-progress {
    height: 5px; border-radius: 999px; background: var(--nm-accent-line);
  }
  .nm-slider::-moz-range-thumb {
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(255, 253, 248, 0.96); border: 2px solid var(--nm-accent);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.34);
  }

  /* Live value chip that follows the thumb while scrubbing. */
  .nm-slider-chip {
    position: absolute;
    top: -20px;
    padding: 3px 9px;
    background: rgba(10, 9, 16, 0.78);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    color: var(--nm-accent);
    border: 1px solid var(--nm-accent-glow);
    border-radius: 999px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    animation: nm-chip-in 0.14s var(--nm-ease);
  }
  @keyframes nm-chip-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ── fields, segmented, toggles ────────────────────────────────────────── */
  .nm-field { display: flex; flex-direction: column; gap: 8px; }
  .nm-field-label {
    font-size: 9.5px; letter-spacing: 0.17em; text-transform: uppercase;
    color: var(--nm-ink-faint); font-weight: 600;
  }
  .nm-seg {
    display: grid;
    grid-template-columns: repeat(var(--nm-seg-n, 3), 1fr);
    gap: 3px; padding: 3px;
    background: var(--nm-surface-2);
    border: 1px solid var(--nm-line-soft);
    border-radius: var(--nm-r-md);
  }
  .nm-seg[data-count="2"] { --nm-seg-n: 2; }
  .nm-seg[data-count="3"] { --nm-seg-n: 3; }
  .nm-seg[data-count="4"] { --nm-seg-n: 4; }
  .nm-seg[data-count="5"] { --nm-seg-n: 5; }
  .nm-seg-opt {
    min-height: 40px;
    padding: 9px 4px;
    border: none; border-radius: var(--nm-r-sm);
    background: transparent; color: var(--nm-ink-dim);
    font-size: 12px; font-weight: 500; letter-spacing: 0.01em;
    cursor: pointer;
    transition: color 0.16s var(--nm-ease),
                background 0.16s var(--nm-ease),
                box-shadow 0.16s var(--nm-ease);
  }
  .nm-seg-opt.is-on {
    color: var(--nm-ink);
    background: var(--nm-raise-2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), inset 0 -2px 0 var(--nm-accent);
  }

  .nm-toggles { display: flex; gap: 8px; }
  .nm-toggle, .nm-mini {
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--nm-line); border-radius: var(--nm-r-md);
    background: var(--nm-surface-2); color: var(--nm-ink);
    font-size: 12.5px; font-weight: 500; cursor: pointer;
    transition: color 0.16s var(--nm-ease),
                background 0.16s var(--nm-ease),
                border-color 0.16s var(--nm-ease);
  }
  .nm-toggle { flex: 1 1 0; }
  .nm-toggle.is-on, .nm-mini.is-on {
    background: var(--nm-raise-2);
    border-color: var(--nm-accent-line);
    color: var(--nm-ink);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 0 0 1px var(--nm-accent-glow);
  }
  .nm-mini-solid { background: var(--nm-raise); border-color: var(--nm-line); }

  /* ── swatches ──────────────────────────────────────────────────────────── */
  .nm-swatches { display: flex; flex-wrap: wrap; gap: 11px; }
  .nm-swatch {
    width: 46px; height: 46px; padding: 0;
    border-radius: 14px;
    border: 0;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.26),
      0 3px 10px rgba(0, 0, 0, 0.22);
    cursor: pointer;
    transition: transform 0.14s var(--nm-ease), box-shadow 0.14s var(--nm-ease);
  }
  .nm-swatch:active { transform: scale(0.94); }
  .nm-swatch-add {
    display: grid; place-items: center;
    background: var(--nm-surface-2); color: var(--nm-ink-dim);
    border: 1px dashed var(--nm-line);
    box-shadow: none;
  }

  /* ══════════════════════════════════════════════════════ COLOUR PICKER */

  .nm-picker-overlay {
    display: flex; flex-direction: column; gap: 14px;
    padding: 0;
    animation: nm-fade 0.16s var(--nm-ease);
  }

  .nm-picker-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 0 2px;
  }
  .nm-picker-back {
    display: inline-flex; align-items: center; gap: 4px;
    min-height: 36px;
    padding: 6px 12px 6px 6px;
    border: none; border-radius: var(--nm-r-sm);
    background: transparent; color: var(--nm-ink-dim);
    font-size: 12.5px; letter-spacing: 0.02em; cursor: pointer;
  }
  .nm-picker-back:active { background: var(--nm-raise); color: var(--nm-ink); }
  .nm-picker-chip {
    flex: none;
    width: 34px; height: 34px; border-radius: 50%;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.30),
      0 2px 8px rgba(0, 0, 0, 0.28);
  }

  /* hex field + copy */
  .nm-hexrow { display: flex; gap: 8px; align-items: stretch; }
  .nm-hexfield {
    flex: 1 1 auto;
    display: flex; align-items: center; gap: 8px;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid var(--nm-line); border-radius: var(--nm-r-md);
    background: var(--nm-surface-2);
  }
  .nm-hexfield-label {
    font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--nm-ink-faint); font-weight: 600;
  }
  .nm-hexinput {
    flex: 1 1 auto; min-width: 0;
    background: transparent; border: 0; outline: none;
    color: var(--nm-ink);
    font-size: 15px; letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
    padding: 0;
  }
  .nm-hexinput::selection { background: var(--nm-accent); color: var(--nm-on-accent); }
  .nm-hexcopy {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-width: 92px; min-height: 46px;
    padding: 0 14px;
    border: 1px solid var(--nm-line); border-radius: var(--nm-r-md);
    background: var(--nm-surface-2); color: var(--nm-ink);
    font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; cursor: pointer;
    transition: color 0.16s var(--nm-ease),
                background 0.16s var(--nm-ease),
                border-color 0.16s var(--nm-ease);
  }
  .nm-hexcopy:active { background: var(--nm-raise); }
  .nm-hexcopy.is-done {
    color: var(--nm-accent);
    border-color: var(--nm-accent-line);
    background: var(--nm-accent-soft);
  }

  /* HSL square: x = saturation, y = lightness */
  .nm-picker-sv {
    position: relative;
    width: 100%;
    aspect-ratio: 1.7 / 1;
    min-height: 148px;
    max-height: 220px;
    border-radius: var(--nm-r-md);
    border: 1px solid var(--nm-line);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
    touch-action: none;
    cursor: crosshair;
  }
  .nm-picker-dot {
    position: absolute; width: 22px; height: 22px;
    border-radius: 50%; border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.5);
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  /* three painted tracks: hue · saturation · lightness */
  .nm-tracks { display: flex; flex-direction: column; gap: 12px; }
  .nm-track-row { display: flex; flex-direction: column; gap: 3px; }
  .nm-track-head {
    display: flex; align-items: baseline; justify-content: space-between;
  }
  .nm-track-label {
    font-size: 9px; letter-spacing: 0.19em; text-transform: uppercase;
    color: var(--nm-ink-faint); font-weight: 600;
  }
  .nm-track-val {
    font-size: 11px; color: var(--nm-ink-dim);
    font-variant-numeric: tabular-nums;
  }
  .nm-cslider {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 34px; margin: 0;
    background: transparent; cursor: pointer; display: block;
    touch-action: none;
  }
  .nm-cslider::-webkit-slider-runnable-track {
    height: 14px; border-radius: 999px;
    background: var(--nm-track, #888);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.28);
  }
  .nm-cslider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 28px; height: 28px; margin-top: -8px;
    border-radius: 50%;
    background: transparent;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 2px 10px rgba(0, 0, 0, 0.4);
  }
  .nm-cslider::-moz-range-track {
    height: 14px; border-radius: 999px;
    background: var(--nm-track, #888);
    border: 1px solid rgba(255, 255, 255, 0.22);
  }
  .nm-cslider::-moz-range-thumb {
    width: 28px; height: 28px; border-radius: 50%;
    background: transparent; border: 3px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 2px 10px rgba(0, 0, 0, 0.4);
  }

  /* recents */
  .nm-recents { display: flex; flex-direction: column; gap: 8px; }
  .nm-recent-row { display: flex; flex-wrap: wrap; gap: 9px; }
  .nm-recent {
    width: 34px; height: 34px; padding: 0;
    border: 0; border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26);
    cursor: pointer;
    transition: transform 0.14s var(--nm-ease);
  }
  .nm-recent:active { transform: scale(0.9); }
  .nm-recent.is-empty {
    background: transparent;
    border: 1px dashed var(--nm-line);
    box-shadow: none;
  }

  .nm-picker-actions { display: flex; gap: 8px; margin-top: 2px; }
  .nm-picker-actions .nm-btn { flex: 1 1 0; }
  .nm-btn-danger {
    color: var(--nm-danger);
    border-color: rgba(224, 116, 106, 0.34);
    background: rgba(224, 116, 106, 0.09);
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  }

  /* ── collapsible presets ───────────────────────────────────────────────── */
  .nm-collapsible { display: flex; flex-direction: column; gap: 8px; }
  .nm-collapse-btn {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 42px;
    padding: 8px 13px;
    border: 1px solid var(--nm-line); border-radius: var(--nm-r-md);
    background: var(--nm-surface-2); color: var(--nm-ink-dim);
    font-size: 9.5px; letter-spacing: 0.17em; text-transform: uppercase;
    font-weight: 600; cursor: pointer;
    transition: color 0.16s var(--nm-ease), border-color 0.16s var(--nm-ease);
  }
  .nm-collapsible.is-open .nm-collapse-btn { color: var(--nm-ink); border-color: var(--nm-accent-line); }
  .nm-collapse-caret {
    display: inline-flex; color: var(--nm-ink-faint);
    transition: transform 0.2s var(--nm-ease);
  }
  .nm-collapsible.is-open .nm-collapse-caret { transform: rotate(180deg); }
  .nm-collapse-body { animation: nm-fade 0.22s var(--nm-ease); }
  @keyframes nm-fade {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ── preset / number grids, chip rows, thumbnails ──────────────────────── */
  .nm-preset-grid {
    display: grid;
    grid-template-columns: repeat(var(--nm-cols, 4), 1fr);
    gap: 6px;
  }
  .nm-preset {
    display: flex; height: 38px;
    border-radius: var(--nm-r-sm); overflow: hidden;
    border: 1px solid var(--nm-line-soft);
    padding: 0; cursor: pointer;
    transition: transform 0.14s var(--nm-ease), border-color 0.14s var(--nm-ease);
  }
  .nm-preset:active { transform: scale(0.97); border-color: var(--nm-accent-line); }
  .nm-preset span { flex: 1 1 0; }

  .nm-num-grid {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px;
  }
  .nm-num {
    min-height: 44px;
    padding: 12px 0;
    border: 1px solid var(--nm-line); border-radius: var(--nm-r-sm);
    background: var(--nm-surface-2); color: var(--nm-ink-dim);
    font-size: 12px; font-variant-numeric: tabular-nums; cursor: pointer;
    transition: color 0.16s var(--nm-ease),
                background 0.16s var(--nm-ease),
                border-color 0.16s var(--nm-ease);
  }
  .nm-num.is-on {
    color: var(--nm-ink);
    background: var(--nm-raise-2);
    border-color: var(--nm-accent-line);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.24);
  }

  .nm-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
  .nm-chip {
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid var(--nm-line); border-radius: 999px;
    background: var(--nm-surface-2); color: var(--nm-ink-dim);
    font-size: 12.5px; cursor: pointer;
    transition: color 0.16s var(--nm-ease),
                background 0.16s var(--nm-ease),
                border-color 0.16s var(--nm-ease);
  }
  .nm-chip.is-on {
    color: var(--nm-ink);
    background: var(--nm-raise-2);
    border-color: var(--nm-accent-line);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.24);
  }

  .nm-thumb-row {
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; padding-bottom: 2px;
  }
  .nm-thumb-row::-webkit-scrollbar { display: none; }
  .nm-thumb {
    flex: none; width: 68px; height: 68px; padding: 0;
    border-radius: var(--nm-r-md); overflow: hidden;
    border: 1px solid var(--nm-line); background: none; cursor: pointer;
  }
  .nm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .nm-thumb.is-on {
    box-shadow: 0 0 0 2px var(--nm-accent);
    border-color: transparent;
  }

  .nm-upload {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px;
    padding: 12px 16px;
    border: 1px dashed var(--nm-line); border-radius: var(--nm-r-md);
    background: var(--nm-surface-2); color: var(--nm-ink);
    font-size: 13px; cursor: pointer;
  }

  .nm-hint {
    font-size: 11.5px; line-height: 1.5; color: var(--nm-ink-dim);
    margin: 2px 0 0;
  }

  /* ── export sheet ──────────────────────────────────────────────────────── */
  .nm-export-sizes {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  }
  .nm-size {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    min-height: 62px;
    padding: 12px 4px;
    border: 1px solid var(--nm-line); border-radius: var(--nm-r-md);
    background: var(--nm-surface-2); color: var(--nm-ink);
    cursor: pointer;
    transition: color 0.16s var(--nm-ease),
                background 0.16s var(--nm-ease),
                border-color 0.16s var(--nm-ease);
  }
  .nm-size strong {
    font-family: "Instrument Serif", Georgia, serif;
    font-size: 18px; font-weight: 400; line-height: 1;
  }
  .nm-size small {
    font-size: 9.5px; color: var(--nm-ink-dim); letter-spacing: 0.02em;
  }
  .nm-size.is-on {
    border-color: var(--nm-accent-line);
    background: var(--nm-raise-2);
    color: var(--nm-ink);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.24);
  }
  .nm-size.is-on small { color: var(--nm-ink); }

  .nm-export-busy {
    padding: 20px; text-align: center;
    color: var(--nm-ink-dim); font-size: 12.5px;
    letter-spacing: 0.02em;
  }
  .nm-export-result { display: flex; flex-direction: column; gap: 10px; }
  .nm-export-preview {
    border-radius: var(--nm-r-md); overflow: hidden;
    border: 1px solid var(--nm-line);
    background: rgba(0, 0, 0, 0.35);
    max-height: 26vh;
    display: flex; align-items: center; justify-content: center;
  }
  .nm-export-preview img {
    width: 100%; height: auto; display: block;
    max-height: 26vh; object-fit: contain;
  }
  .nm-export-meta {
    font-size: 11px; color: var(--nm-ink-dim);
    letter-spacing: 0.02em; text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .nm-export-actions { display: flex; gap: 8px; }
  .nm-btn {
    flex: 1 1 0;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--nm-line); border-radius: var(--nm-r-md);
    background: var(--nm-surface-2); color: var(--nm-ink);
    font-size: 13px; font-weight: 500; cursor: pointer; text-align: center;
    letter-spacing: 0.01em;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  }
  .nm-btn-solid {
    background: var(--nm-raise-2);
    border-color: var(--nm-accent-line);
    color: var(--nm-ink);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 0 0 1px var(--nm-accent-glow);
  }
}

/* Landscape phones: the sheet has to live in a 380px-tall world. Shrink the
   dock, drop its labels, and let the picker use nearly all of it. */
@media (max-width: 820px) and (orientation: landscape) and (max-height: 480px) {
  :root {
    --nm-dock-h: 48px;
    --nm-sheet-max: calc(var(--nymph-vh, 100dvh) - 110px);
  }
  .nm-sheet.has-picker { --nm-sheet-max: calc(var(--nymph-vh, 100dvh) - 92px); }
  .nm-dock-btn span { display: none; }
  .nm-picker-sv { min-height: 108px; aspect-ratio: 3.2 / 1; }
  .nm-tracks { gap: 8px; }
}