/*
  Legendary Designer: the B Instrument visual system, by Legendary UI.
  Lifted from Docs/Legendary/ui/designer/designer.css in the rustplugins repo.
  Everything is scoped under .ld-page, tokens included. Staff pages add .is-staff,
  which remaps the accent to the staff gold and nothing else.
*/
/* ============================================================================
   Legendary Designer - visual system
   ----------------------------------------------------------------------------
   One stylesheet for plugins/legendary-designer.html. Lift it as is.

   Handoff rules agreed with Legendary Web:
   - Everything is scoped under .ld-page, including the custom properties, so
     nothing escapes into the rest of the site and the sheet cannot fight
     style.css. There is not one bare element selector in this file.
   - Class names are Legendary Web's existing ones wherever they exist, in the
     same single-hyphen style. New components follow that style. The full
     mapping, including what is new, is in index.md.
   - Fonts are the single link the site already loads: Cinzel 400-800, Inter
     400-700. No weight outside that set is used anywhere below.
   - Staff screens add .is-staff to .ld-page, which remaps the accent tokens to
     the staff gold and nothing else.

   House rule applied throughout: no explanatory copy. Labels name things,
   numbers state values, and one short line reports a state. Nothing on screen
   tells the player how to read the screen.
   ========================================================================== */

.ld-page {
  /* ground and surfaces, sitting on the site's --bg #05070d */
  --ld-bg: #0d0f12;
  --ld-surface: #131619;
  --ld-surface-2: #181c21;
  --ld-surface-3: #1f242b;
  --ld-line: #23282f;
  --ld-line-soft: #1c2026;

  /* type, matching the site's --text and --muted */
  --ld-text: #f1f3f8;
  --ld-muted: #b7becf;
  --ld-faint: #6d7689;

  /* The tool's own accent. Deliberately cool: this is the one place the owner
     allowed a break from the house gold. Kept clear of --hl-c #4fd1c5, the Hall
     of Legends C tier, so a teal control never reads as a tier. */
  --ld-accent: #7dd3c0;
  --ld-accent-ink: #0b1a17;
  --ld-accent-dim: rgba(125, 211, 192, .5);
  --ld-accent-wash: rgba(125, 211, 192, .09);
  --ld-accent-line: rgba(125, 211, 192, .26);

  /* The item's own colour. Chrome never uses it, so gold always means the
     legendary itself. Values are the site's --rk-accent pair. */
  --ld-gold: #e6c84a;
  --ld-gold-bright: #ffd964;

  /* state, from staff/staff.css */
  --ld-ok: #5fe39a;
  --ld-warn: #ffb347;
  --ld-bad: #ff5c48;
  --ld-info: #74d9ff;

  /* metrics */
  --ld-r-sm: 5px;
  --ld-r: 7px;
  --ld-r-lg: 11px;
  --ld-topbar-h: 52px;
  --ld-dock-h: 56px;
  --ld-rail-w: 212px;
  --ld-inspector-w: 396px;

  margin: 0;
  background: var(--ld-bg);
  color: var(--ld-text);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1;          /* numbers line up everywhere */
}

/* Staff catalogue: same furniture, house gold. Tokens from staff/staff.css. */
.ld-page.is-staff {
  --ld-bg: #05070d;
  --ld-surface: #1b1e26;
  --ld-surface-2: #22252e;
  --ld-surface-3: #2a2e39;
  --ld-line: #353945;
  --ld-line-soft: #272b36;
  --ld-accent: #ffd964;
  --ld-accent-ink: #241d05;
  --ld-accent-dim: rgba(255, 217, 100, .5);
  --ld-accent-wash: rgba(255, 217, 100, .12);
  --ld-accent-line: rgba(255, 217, 100, .38);
}

.ld-page *,
.ld-page *::before,
.ld-page *::after { box-sizing: border-box; }

/* Cinzel is reserved for a legendary's own name, nothing else. */
.ld-page .ld-display {
  font-family: Cinzel, Georgia, serif;
  font-weight: 700;
  letter-spacing: .01em;
  margin: 0;
}

/* ============================================================ app shell === */

.ld-page .ld-shell {
  display: grid;
  grid-template-columns: var(--ld-rail-w) 1fr var(--ld-inspector-w);
  min-height: 0;
  height: calc(100vh - var(--ld-topbar-h) - var(--ld-dock-h));
}
.ld-page .ld-shell.is-wide { grid-template-columns: var(--ld-rail-w) 1fr; }
.ld-page .ld-shell.is-plain { grid-template-columns: 1fr; height: calc(100vh - var(--ld-topbar-h)); }

/* ---------------------------------------------------------------- topbar -- */

.ld-page .ld-topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--ld-topbar-h);
  padding: 0 16px;
  background: var(--ld-surface);
  border-bottom: 1px solid var(--ld-line);
}

.ld-page .ld-brand { display: flex; align-items: center; gap: 9px; flex: none; }
.ld-page .ld-brand-mark {
  width: 24px; height: 24px; flex: none;
  border-radius: var(--ld-r-sm);
  background: var(--ld-accent);
  color: var(--ld-accent-ink);
  display: grid; place-items: center;
}
.ld-page .ld-brand-text { font-size: 13px; font-weight: 600; white-space: nowrap; }
.ld-page .ld-brand-text span { color: var(--ld-faint); font-weight: 500; }

.ld-page .ld-crumbs {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 500; color: var(--ld-muted);
  min-width: 0;
}
.ld-page .ld-crumbs b {
  color: var(--ld-text); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ld-page .ld-crumbs svg { color: var(--ld-faint); flex: none; }

.ld-page .ld-spacer { flex: 1 1 auto; min-width: 0; }

/* ---------------------------------------------------------------- buttons */

.ld-page .ld-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--ld-line);
  border-radius: var(--ld-r);
  background: var(--ld-surface-2);
  color: var(--ld-text);
  font-family: inherit;
  font-size: 12.5px; font-weight: 500;
  padding: 8px 14px;
  white-space: nowrap;
  cursor: pointer;
}
.ld-page .ld-btn:hover { background: var(--ld-surface-3); }
.ld-page .ld-btn.is-primary {
  border-color: transparent;
  background: var(--ld-accent);
  color: var(--ld-accent-ink);
  font-weight: 600;
}
.ld-page .ld-btn.is-primary:hover { filter: brightness(1.07); }
.ld-page .ld-btn.is-quiet { background: transparent; }
.ld-page .ld-btn.is-block { width: 100%; }
.ld-page .ld-btn.is-danger { color: var(--ld-bad); border-color: rgba(255, 92, 72, .34); }
.ld-page .ld-btn[disabled] { opacity: .42; cursor: not-allowed; }

.ld-page .ld-icon-btn {
  width: 32px; height: 32px; flex: none;
  border: 1px solid var(--ld-line);
  border-radius: var(--ld-r);
  background: var(--ld-surface-2);
  color: var(--ld-muted);
  display: grid; place-items: center;
  cursor: pointer;
}
.ld-page .ld-icon-btn:hover { color: var(--ld-text); background: var(--ld-surface-3); }

/* ------------------------------------------------------------------ rail -- */

.ld-page .ld-rail {
  background: var(--ld-surface);
  border-right: 1px solid var(--ld-line);
  padding: 14px 0;
  overflow-y: auto;
}
.ld-page .ld-rail-label {
  font-size: 10px; font-weight: 600; letter-spacing: .14em;
  color: var(--ld-faint); text-transform: uppercase;
  padding: 0 14px; margin-bottom: 9px;
}
.ld-page .ld-rail-sep { height: 1px; background: var(--ld-line-soft); margin: 12px 14px; }

.ld-page .ld-rail-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 14px;
  border: 0; background: transparent; text-align: left;
  font-family: inherit; font-size: 12.5px; font-weight: 500;
  color: var(--ld-muted);
  cursor: pointer;
}
.ld-page .ld-rail-btn:hover { color: var(--ld-text); background: rgba(255, 255, 255, .025); }
.ld-page .ld-rail-btn.is-on {
  background: var(--ld-accent-wash);
  color: var(--ld-text);
  box-shadow: inset 2px 0 0 var(--ld-accent);
}
.ld-page .ld-rail-btn .ld-rail-ico {
  color: var(--ld-faint); display: grid; place-items: center; flex: none;
}
.ld-page .ld-rail-btn.is-on .ld-rail-ico { color: var(--ld-accent); }
.ld-page .ld-rail-sub { margin-left: auto; font-size: 11px; color: var(--ld-faint); }

/* the completion tick on a finished rail step */
.ld-page .ld-tick {
  width: 16px; height: 16px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ld-ok);
  margin-left: auto;
}
.ld-page .ld-rail-btn.is-todo .ld-tick { color: var(--ld-line); }

/* ----------------------------------------------------------------- stage -- */

.ld-page .ld-stage {
  position: relative;
  background: var(--ld-bg);
  overflow: hidden;
  min-width: 0;
  display: grid;
  grid-template-rows: 44px 1fr;
}
/* On the Item step the stage carries the picker and has no tool bar, so it
   must not keep the 44px row reserved for one: without this the grid lands in
   the bar row and every tile is clipped to 44px. */
.ld-page .ld-stage.is-picking { grid-template-rows: 1fr; }

.ld-page .ld-stage-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 26px 26px;
}
/* assets/stage-backdrop.png sits here at low opacity where a screen wants more
   depth. It never carries meaning and can be dropped without loss. */
.ld-page .ld-stage-wash {
  position: absolute; inset: 0;
  background: no-repeat center / cover;
  opacity: .3;
}
.ld-page .ld-stage-bar {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--ld-line-soft);
  background: rgba(13, 15, 18, .86);
}
.ld-page .ld-stage-body {
  position: relative;
  display: grid; place-items: center;
  min-height: 0;
  padding: 24px;
}

.ld-page .ld-toolgroup {
  display: flex; flex: none;
  border: 1px solid var(--ld-line);
  border-radius: var(--ld-r);
  overflow: hidden;
}
.ld-page .ld-toolgroup button {
  width: 30px; height: 26px; border: 0;
  display: grid; place-items: center;
  color: var(--ld-faint); background: var(--ld-surface);
  cursor: pointer;
}
.ld-page .ld-toolgroup button + button { border-left: 1px solid var(--ld-line); }
.ld-page .ld-toolgroup button.is-on { color: var(--ld-accent); background: var(--ld-surface-3); }

.ld-page .ld-readout {
  font-size: 11.5px; font-weight: 500; color: var(--ld-muted);
  border: 1px solid var(--ld-line); border-radius: var(--ld-r);
  padding: 5px 10px; background: var(--ld-surface);
  white-space: nowrap;
}

/* ------------------------------------------------- the live card on stage - */
/* What the stage always shows: this design as it will appear in the Hall. The
   corner ticks are the only instrument flourish; they frame the card without
   pretending it is a canvas object. */

.ld-page .ld-card-frame { position: relative; }
.ld-page .ld-card-tick {
  position: absolute; width: 10px; height: 10px;
  border: 1px solid var(--ld-accent-line);
}
.ld-page .ld-card-tick.at-tl { left: -14px; top: -14px; border-right: 0; border-bottom: 0; }
.ld-page .ld-card-tick.at-tr { right: -14px; top: -14px; border-left: 0; border-bottom: 0; }
.ld-page .ld-card-tick.at-bl { left: -14px; bottom: -14px; border-right: 0; border-top: 0; }
.ld-page .ld-card-tick.at-br { right: -14px; bottom: -14px; border-left: 0; border-top: 0; }

.ld-page .ld-card {
  width: 420px;
  border: 1px solid var(--ld-line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--ld-surface-2), var(--ld-surface));
  padding: 22px 22px 20px;
  display: grid; gap: 14px; justify-items: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.ld-page .ld-card-art {
  width: 210px; height: 210px;
  display: grid; place-items: center;
}
.ld-page .ld-card-art img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .6));
}
.ld-page .ld-card-art.is-empty {
  border: 1px dashed var(--ld-line);
  border-radius: var(--ld-r-lg);
  color: var(--ld-faint);
}
.ld-page .ld-card-name { font-size: 25px; text-align: center; line-height: 1.2; }
.ld-page .ld-card-name.is-empty { color: var(--ld-faint); }
.ld-page .ld-card-base {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 500; color: var(--ld-muted);
}
.ld-page .ld-card-perks {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin: 0; padding: 0; list-style: none;
}
.ld-page .ld-card-perks li {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px;
  border: 1px solid var(--ld-line);
  border-radius: 7px;
  background: rgba(255, 255, 255, .04);
  color: var(--ld-muted);
  padding: 3px 9px;
}
.ld-page .ld-card-perks li b { color: var(--ld-text); font-weight: 600; }
.ld-page .ld-card-perks li span { color: var(--ld-gold-bright); font-weight: 700; }
.ld-page .ld-card-lore {
  font-size: 12.5px; line-height: 1.6; color: var(--ld-muted);
  text-align: center; font-style: italic;
  max-width: 34ch;
}
.ld-page .ld-card-lore.is-empty { color: var(--ld-faint); font-style: normal; }

/* the skin dock under the card */
.ld-page .ld-skin-dock {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px;
  background: var(--ld-surface); border: 1px solid var(--ld-line);
  border-radius: 9px; padding: 7px;
}
.ld-page .ld-swatch {
  width: 44px; height: 44px; flex: none;
  border-radius: var(--ld-r-sm);
  background: var(--ld-surface-2);
  border: 1px solid var(--ld-line-soft);
  display: grid; place-items: center; overflow: hidden;
  color: var(--ld-faint);
  cursor: pointer;
}
.ld-page .ld-swatch.is-on {
  border-color: var(--ld-accent);
  box-shadow: 0 0 0 1px var(--ld-accent);
}
.ld-page .ld-swatch img { width: 38px; height: 38px; object-fit: contain; }

/* ============================================================= inspector === */

.ld-page .ld-inspector {
  background: var(--ld-surface);
  border-left: 1px solid var(--ld-line);
  display: grid;
  grid-template-rows: 1fr;
  min-height: 0;
  overflow: hidden;
}
.ld-page .ld-panel {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 0;
}
.ld-page .ld-panel[hidden] { display: none; }
.ld-page .ld-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--ld-line-soft);
}
.ld-page .ld-panel-title { font-size: 13px; font-weight: 600; }
.ld-page .ld-panel-body { overflow-y: auto; min-height: 0; padding: 16px; }
.ld-page .ld-panel-body.is-flush { padding: 0; }
.ld-page .ld-panel-foot {
  display: flex; gap: 8px;
  padding: 11px 16px;
  border-top: 1px solid var(--ld-line);
}
.ld-page .ld-panel-foot .ld-btn { flex: 1; }

.ld-page .ld-section { padding: 13px 16px; border-bottom: 1px solid var(--ld-line-soft); }
.ld-page .ld-section-label {
  font-size: 10px; font-weight: 600; letter-spacing: .14em;
  color: var(--ld-faint); text-transform: uppercase;
}
.ld-page .ld-row { display: flex; align-items: center; gap: 10px; }
.ld-page .ld-row.is-between { justify-content: space-between; }

/* ------------------------------------------------ a range readout (ld-norm) --
   Was the power budget in the handover. That block is dropped by owner ruling:
   no balance rule exists, so the page never claims one. The furniture is reused
   for the recipe ranges, which are plain facts from the 74 live legendaries. */

.ld-page .ld-norm { padding: 13px 16px; border-bottom: 1px solid var(--ld-line-soft); }
.ld-page .ld-norm-row {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
}
.ld-page .ld-norm-value { font-size: 13px; font-weight: 600; }
.ld-page .ld-norm-value em { font-style: normal; font-weight: 500; color: var(--ld-faint); }
.ld-page .ld-norm-track {
  position: relative; height: 6px; border-radius: 3px;
  background: #10141a; overflow: hidden;
}
.ld-page .ld-norm-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ld-accent); }
.ld-page .ld-norm-cap { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ld-warn); }
.ld-page .ld-norm-foot {
  display: flex; justify-content: space-between; margin-top: 7px;
  font-size: 10.5px; font-weight: 500; color: var(--ld-faint);
}

/* ================================================== perk slider and band === */
/*
   The band is the instrument. Anatomy, bottom to top:

     ld-band-track   the 0 to cap rail
     ld-hist         the live legendaries as bars, the ones inside the span lit
     ld-band-span    the range those values cover
     ld-band-mark    the median inside that span
     ld-band-cap     the global cap, a tick that is always drawn
     ld-band-thumb   this design's value, with its stem

   Owner's ruling: a perk no legendary carries gets the cap tick only. Add
   .is-unused to ld-band and the span, median, bars and caption all go, which
   is what makes the emptiness legible instead of looking broken.
*/

.ld-page .ld-perk-card { padding: 13px 16px 14px; border-bottom: 1px solid var(--ld-line-soft); }

.ld-page .ld-slider-row { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.ld-page .ld-perk-ico {
  width: 24px; height: 24px; flex: none;
  border-radius: var(--ld-r-sm);
  background: var(--ld-surface-2);
  border: 1px solid var(--ld-line);
  display: grid; place-items: center;
  color: var(--ld-muted);
}
.ld-page .ld-perk-name { font-size: 12.5px; font-weight: 600; flex: 1; min-width: 0; }
.ld-page .ld-perk-value { font-size: 13px; font-weight: 600; }
.ld-page .ld-sub { font-size: 10.5px; font-weight: 500; color: var(--ld-faint); }
.ld-page .ld-sub.is-warn { color: var(--ld-warn); }
.ld-page .ld-sub.is-ok { color: var(--ld-ok); }

/* The band's height is a token so a large context, such as the perk edit modal,
   can scale the whole control. Every internal offset below is a percentage of
   that height, chosen so that at the 56px default each one computes to the
   pixel value it used to be hard coded to: the staff editor and the inspector
   are byte for byte unchanged unless something overrides --ld-band-h. */
.ld-page .ld-band {
  --ld-band-h: 56px;
  position: relative;
  height: var(--ld-band-h);
}

.ld-page .ld-band-track {
  position: absolute; left: 0; right: 0; bottom: 19.6%;
  height: 1px; background: var(--ld-line);
}
.ld-page .ld-hist {
  position: absolute; left: 0; right: 0; bottom: 23.2%;
  height: 48.2%;
  display: flex; align-items: flex-end; gap: 1.5px;
}
.ld-page .ld-hist i {
  flex: 1; display: block;
  background: #2b3542;
  border-radius: 1px 1px 0 0;
}
.ld-page .ld-hist i.is-in { background: var(--ld-accent-dim); }
.ld-page .ld-band-span {
  position: absolute; bottom: 16.1%; height: 62.5%;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(125, 211, 192, .17), rgba(125, 211, 192, .06));
  border-left: 1px solid rgba(125, 211, 192, .75);
  border-right: 1px solid rgba(125, 211, 192, .75);
  box-shadow: 0 0 18px rgba(125, 211, 192, .28);
}
.ld-page.is-staff .ld-band-span {
  background: linear-gradient(180deg, rgba(255, 217, 100, .18), rgba(255, 217, 100, .06));
  border-left-color: rgba(255, 217, 100, .75);
  border-right-color: rgba(255, 217, 100, .75);
  box-shadow: 0 0 18px rgba(255, 217, 100, .26);
}
.ld-page .ld-band-mark {
  position: absolute; bottom: 16.1%; width: 1px; height: 62.5%;
  margin-left: -.5px;
  background: var(--ld-accent);
  opacity: .85;
}
.ld-page .ld-band-cap {
  position: absolute; bottom: 12.5%; width: 2px; height: 17.9%;
  margin-left: -1px;
  background: var(--ld-warn);
}
.ld-page .ld-band-thumb {
  position: absolute; bottom: 8.9%; width: 2px; height: 75%;
  margin-left: -1px; border-radius: 1px;
  background: var(--ld-text);
}
.ld-page .ld-band-grip {
  position: absolute; bottom: 78.6%;
  /* the grip scales with the band; a percentage width would resolve against
     the band's WIDTH, so it is calculated from the height token instead */
  width: calc(var(--ld-band-h) * 0.196);
  height: calc(var(--ld-band-h) * 0.196);
  margin-left: calc(var(--ld-band-h) * -0.098);
  border-radius: 50%;
  background: var(--ld-text);
  border: 2px solid var(--ld-surface);
  box-shadow: 0 0 0 1px var(--ld-text);
  cursor: grab;
}
.ld-page .ld-band.is-unused .ld-hist,
.ld-page .ld-band.is-unused .ld-band-span,
.ld-page .ld-band.is-unused .ld-band-mark { display: none; }

.ld-page .ld-band-note {
  display: flex; justify-content: space-between;
  margin-top: 5px;
  font-size: 10.5px; font-weight: 500; color: var(--ld-faint);
}
.ld-page .ld-band-note .ld-mid { color: var(--ld-muted); }

/* the three perk slots, and the picker that fills an empty one */
.ld-page .ld-perk-picker { display: grid; gap: 8px; }
.ld-page .ld-perk-opt {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--ld-line);
  border-radius: var(--ld-r);
  background: var(--ld-surface-2);
  color: var(--ld-text);
  font-family: inherit; font-size: 12.5px; font-weight: 500;
  text-align: left; cursor: pointer;
}
.ld-page .ld-perk-opt:hover { border-color: var(--ld-accent-line); background: var(--ld-accent-wash); }
.ld-page .ld-perk-opt .ld-sub { margin-left: auto; }
.ld-page .ld-perk-slot {
  display: grid; place-items: center; gap: 7px;
  padding: 18px 12px;
  border: 1px dashed var(--ld-line);
  border-radius: var(--ld-r-lg);
  color: var(--ld-muted);
  background: transparent;
  width: 100%;
  font-family: inherit; font-size: 12.5px; font-weight: 500;
  cursor: pointer;
}
.ld-page .ld-perk-slot:hover { border-color: var(--ld-accent-line); color: var(--ld-accent); }

/* ================================================================ fields === */

.ld-page .ld-field { display: block; }
.ld-page .ld-field + .ld-field { margin-top: 16px; }
.ld-page .ld-field-label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  color: var(--ld-muted); text-transform: uppercase;
  margin-bottom: 7px;
}
.ld-page .ld-field-count {
  font-size: 10.5px; font-weight: 500; color: var(--ld-faint);
  letter-spacing: 0; text-transform: none;
}
.ld-page .ld-field-count.is-over { color: var(--ld-bad); }

.ld-page .ld-input,
.ld-page .ld-textarea {
  width: 100%;
  background: var(--ld-surface-2);
  border: 1px solid var(--ld-line);
  border-radius: var(--ld-r);
  color: var(--ld-text);
  font-family: inherit; font-size: 13px;
  padding: 10px 12px;
}
.ld-page .ld-input::placeholder,
.ld-page .ld-textarea::placeholder { color: var(--ld-faint); }
.ld-page .ld-input:focus,
.ld-page .ld-textarea:focus {
  outline: none;
  border-color: var(--ld-accent);
  box-shadow: 0 0 0 3px var(--ld-accent-wash);
}
.ld-page .ld-textarea { min-height: 104px; resize: vertical; line-height: 1.55; }
.ld-page .ld-input.is-display {
  font-family: Cinzel, Georgia, serif; font-size: 17px; font-weight: 700;
}
.ld-page .ld-input.is-bad { border-color: rgba(255, 92, 72, .55); }

.ld-page .ld-input-row { display: flex; gap: 8px; }
.ld-page .ld-input-row .ld-input { flex: 1; min-width: 0; }

.ld-page .ld-search {
  display: flex; align-items: center; gap: 9px;
  background: var(--ld-surface-2);
  border: 1px solid var(--ld-line);
  border-radius: var(--ld-r);
  padding: 0 12px;
  flex: 1; min-width: 0;
}
.ld-page .ld-search svg { color: var(--ld-faint); flex: none; }
.ld-page .ld-search input {
  flex: 1; min-width: 0;
  border: 0; background: transparent; outline: none;
  font-family: inherit; font-size: 13px; color: var(--ld-text);
  padding: 9px 0;
}
.ld-page .ld-search input::placeholder { color: var(--ld-faint); }

/* One short line of state under a field. Never a paragraph, never advice. */
.ld-page .ld-lines { display: grid; gap: 7px; margin-top: 9px; }
.ld-page .ld-line {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 500;
  color: var(--ld-muted);
}
.ld-page .ld-line svg { flex: none; }
.ld-page .ld-line b { font-weight: 600; color: var(--ld-text); }
.ld-page .ld-line.is-ok { color: var(--ld-ok); }
.ld-page .ld-line.is-warn { color: var(--ld-warn); }
.ld-page .ld-line.is-bad { color: var(--ld-bad); }
.ld-page .ld-line.is-info { color: var(--ld-info); }

/* ================================================================ chips ==== */

.ld-page .ld-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.ld-page .ld-chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--ld-line);
  border-radius: 999px;
  background: var(--ld-surface-2);
  color: var(--ld-muted);
  font-family: inherit; font-size: 12px; font-weight: 500;
  padding: 6px 13px;
  white-space: nowrap; cursor: pointer;
}
.ld-page .ld-chip.is-on {
  border-color: var(--ld-accent-line);
  background: var(--ld-accent-wash);
  color: var(--ld-accent);
}
.ld-page .ld-chip-count { color: var(--ld-faint); font-size: 11px; }
.ld-page .ld-chip.is-on .ld-chip-count { color: var(--ld-accent); opacity: .75; }

/* ========================================================== item picker ==== */

.ld-page .ld-picker { display: grid; grid-template-rows: auto auto 1fr; min-height: 0; }
.ld-page .ld-picker-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--ld-line-soft);
}
.ld-page .ld-picker-chips { padding: 13px 20px; border-bottom: 1px solid var(--ld-line-soft); }
.ld-page .ld-grid {
  overflow-y: auto; min-height: 0;
  padding: 18px 20px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
  align-content: start;
}
.ld-page .ld-item {
  border: 1px solid var(--ld-line);
  border-radius: var(--ld-r-lg);
  background: var(--ld-surface);
  padding: 12px 10px 11px;
  display: grid; justify-items: center; gap: 9px;
  text-align: center;
  font-family: inherit;
  cursor: pointer;
}
.ld-page .ld-item:hover { background: var(--ld-surface-2); }
.ld-page .ld-item.is-on {
  border-color: var(--ld-accent);
  background: var(--ld-accent-wash);
  box-shadow: 0 0 0 1px var(--ld-accent), 0 10px 26px rgba(0, 0, 0, .45);
}
.ld-page .ld-item-art { width: 84px; height: 84px; display: grid; place-items: center; }
.ld-page .ld-item-art img { width: 78px; height: 78px; object-fit: contain; }
.ld-page .ld-item-name { font-size: 12px; font-weight: 600; color: var(--ld-text); line-height: 1.3; }
.ld-page .ld-item-id { font-size: 10.5px; font-weight: 500; color: var(--ld-faint); }

/* ============================================================ skin fetch === */

.ld-page .ld-skin-preview {
  display: grid; grid-template-columns: 92px 1fr; gap: 14px;
  align-items: center;
  border: 1px solid var(--ld-line);
  border-radius: var(--ld-r-lg);
  background: var(--ld-surface-2);
  padding: 13px;
  margin-top: 12px;
}
.ld-page .ld-skin-preview.is-blocked { border-color: rgba(255, 92, 72, .4); }
.ld-page .ld-skin-art {
  width: 92px; height: 92px;
  border-radius: var(--ld-r);
  background: var(--ld-surface);
  border: 1px solid var(--ld-line-soft);
  display: grid; place-items: center; overflow: hidden;
  color: var(--ld-faint);
}
.ld-page .ld-skin-art img { width: 82px; height: 82px; object-fit: contain; }
.ld-page .ld-skin-meta { min-width: 0; }
.ld-page .ld-skin-name { font-size: 14px; font-weight: 600; }
.ld-page .ld-skin-id { font-size: 11.5px; font-weight: 500; color: var(--ld-faint); margin-top: 4px; }
.ld-page .ld-skin-state { margin-top: 9px; }

/* ========================================================= recipe builder == */

.ld-page .ld-recipe { display: grid; gap: 10px; }
.ld-page .ld-slot {
  display: grid;
  grid-template-columns: 52px 1fr auto auto;
  align-items: center; gap: 12px;
  border: 1px solid var(--ld-line);
  border-radius: var(--ld-r-lg);
  background: var(--ld-surface-2);
  padding: 10px 12px;
}
.ld-page .ld-slot-art {
  width: 52px; height: 52px;
  border-radius: var(--ld-r);
  background: var(--ld-surface);
  border: 1px solid var(--ld-line-soft);
  display: grid; place-items: center; overflow: hidden;
  color: var(--ld-faint);
}
.ld-page .ld-slot-art img { width: 44px; height: 44px; object-fit: contain; }
.ld-page .ld-slot-name { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.ld-page .ld-slot-meta { font-size: 11px; font-weight: 500; color: var(--ld-faint); margin-top: 3px; }

.ld-page .ld-kind {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ld-muted);
  border: 1px solid var(--ld-line); border-radius: 999px;
  padding: 2px 7px;
}
.ld-page .ld-kind.is-scrap { color: var(--ld-gold-bright); border-color: rgba(230, 200, 74, .4); }
.ld-page .ld-kind.is-component { color: var(--ld-info); border-color: rgba(116, 217, 255, .32); }
.ld-page .ld-kind.is-writein { color: var(--ld-warn); border-color: rgba(255, 179, 71, .4); }

.ld-page .ld-stepper {
  display: flex; align-items: center;
  border: 1px solid var(--ld-line);
  border-radius: var(--ld-r);
  overflow: hidden;
  background: var(--ld-surface);
}
.ld-page .ld-stepper button {
  width: 28px; height: 30px; border: 0; background: transparent;
  color: var(--ld-muted); display: grid; place-items: center; cursor: pointer;
}
.ld-page .ld-stepper button:hover { color: var(--ld-text); background: var(--ld-surface-3); }
.ld-page .ld-stepper-value {
  min-width: 44px; text-align: center;
  font-size: 13px; font-weight: 600;
  border-left: 1px solid var(--ld-line);
  border-right: 1px solid var(--ld-line);
  padding: 6px 0;
}

.ld-page .ld-slot.is-add {
  border-style: dashed;
  background: transparent;
  grid-template-columns: 1fr;
  justify-items: center;
  color: var(--ld-muted);
  padding: 15px 12px;
  cursor: pointer;
}
.ld-page .ld-slot.is-add:hover { border-color: var(--ld-accent-line); color: var(--ld-accent); }
.ld-page .ld-slot-add-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 500; }

/* =============================================================== statuses == */

.ld-page .ld-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 8px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.ld-page .ld-tag i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.ld-page .ld-tag.is-draft { color: var(--ld-faint); border-color: var(--ld-line); background: var(--ld-surface-2); }
.ld-page .ld-tag.is-suggested { color: var(--ld-info); border-color: rgba(116, 217, 255, .32); background: rgba(116, 217, 255, .1); }
.ld-page .ld-tag.is-review { color: var(--ld-warn); border-color: rgba(255, 179, 71, .32); background: rgba(255, 179, 71, .1); }
.ld-page .ld-tag.is-approved { color: var(--ld-ok); border-color: rgba(95, 227, 154, .32); background: rgba(95, 227, 154, .1); }
.ld-page .ld-tag.is-declined { color: var(--ld-bad); border-color: rgba(255, 92, 72, .32); background: rgba(255, 92, 72, .1); }
.ld-page .ld-tag.is-live { color: var(--ld-gold-bright); border-color: rgba(230, 200, 74, .34); background: rgba(230, 200, 74, .1); }

/* ============================================================= empty state = */

.ld-page .ld-empty {
  display: grid; justify-items: center; align-content: center; gap: 14px;
  padding: 48px 24px; text-align: center; height: 100%;
}
.ld-page .ld-empty-art {
  width: 340px; max-width: 70%;
  border-radius: var(--ld-r-lg);
  opacity: .9;
}
.ld-page .ld-empty-title { font-size: 14px; font-weight: 600; }
.ld-page .ld-empty-meta { font-size: 12px; font-weight: 500; color: var(--ld-faint); }

/* ============================================================ submit state = */

.ld-page .ld-done {
  display: grid; justify-items: center; align-content: center; gap: 16px;
  text-align: center; padding: 36px 24px;
}
.ld-page .ld-done-emblem { width: 150px; height: 150px; object-fit: contain; }
.ld-page .ld-done-name { font-size: 30px; }
.ld-page .ld-done-meta {
  display: flex; align-items: center; gap: 12px;
  font-size: 12.5px; color: var(--ld-muted);
}
.ld-page .ld-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ld-faint); flex: none; }
.ld-page .ld-done-row { display: flex; gap: 10px; margin-top: 2px; }

.ld-page .ld-summary {
  width: 100%; max-width: 520px;
  border: 1px solid var(--ld-line);
  border-radius: var(--ld-r-lg);
  background: var(--ld-surface);
  overflow: hidden;
  text-align: left;
}
.ld-page .ld-summary-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 15px;
  font-size: 12.5px;
}
.ld-page .ld-summary-row + .ld-summary-row { border-top: 1px solid var(--ld-line-soft); }
.ld-page .ld-summary-k { color: var(--ld-faint); font-weight: 500; }
.ld-page .ld-summary-v { font-weight: 600; text-align: right; }

/* ================================================================= dock ==== */

.ld-page .ld-dock {
  display: flex; align-items: center; gap: 14px;
  height: var(--ld-dock-h);
  padding: 0 16px;
  background: var(--ld-surface);
  border-top: 1px solid var(--ld-line);
}
.ld-page .ld-dock-state { display: flex; align-items: center; gap: 9px; font-size: 11.5px; font-weight: 500; color: var(--ld-faint); }
.ld-page .ld-dock-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ld-accent); flex: none; }
.ld-page .ld-dock-steps { display: flex; align-items: center; gap: 7px; }
.ld-page .ld-dock-step {
  width: 26px; height: 3px; border-radius: 2px;
  background: var(--ld-line);
}
.ld-page .ld-dock-step.is-done { background: var(--ld-accent); }
.ld-page .ld-dock-step.is-on { background: var(--ld-accent); box-shadow: 0 0 10px var(--ld-accent-dim); }

/* ============================================================ staff tables = */

.ld-page .ld-table { width: 100%; border-collapse: collapse; }
.ld-page .ld-table th {
  text-align: left;
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ld-faint);
  padding: 10px 14px;
  border-bottom: 1px solid var(--ld-line);
  background: var(--ld-surface-2);
  white-space: nowrap;
}
.ld-page .ld-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ld-line-soft);
  font-size: 12.5px;
  vertical-align: middle;
}
.ld-page .ld-table tbody tr:hover { background: rgba(255, 255, 255, .022); }
.ld-page .ld-table-item { display: flex; align-items: center; gap: 11px; }
.ld-page .ld-table-art {
  width: 38px; height: 38px; flex: none;
  border-radius: var(--ld-r-sm);
  background: var(--ld-surface-2);
  border: 1px solid var(--ld-line-soft);
  display: grid; place-items: center; overflow: hidden;
}
.ld-page .ld-table-art img { width: 32px; height: 32px; object-fit: contain; }
.ld-page .ld-table-name { font-weight: 600; }
.ld-page .ld-table-sub { font-size: 11px; color: var(--ld-faint); margin-top: 2px; }
.ld-page .ld-num { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.ld-page .ld-table-actions { display: flex; gap: 7px; justify-content: flex-end; }

.ld-page .ld-sheet { padding: 22px 26px; overflow-y: auto; min-height: 0; }
.ld-page .ld-sheet-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
  margin-bottom: 18px;
}
.ld-page .ld-sheet-title { font-size: 22px; }
.ld-page .ld-sheet-sub { font-size: 12.5px; color: var(--ld-faint); margin-top: 5px; }

.ld-page .ld-metrics { display: flex; gap: 12px; margin-bottom: 18px; }
.ld-page .ld-metric {
  flex: 1;
  border: 1px solid var(--ld-line);
  border-radius: var(--ld-r-lg);
  background: var(--ld-surface);
  padding: 13px 15px;
}
.ld-page .ld-metric-k {
  font-size: 10px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ld-faint);
}
.ld-page .ld-metric-v { font-size: 24px; font-weight: 700; margin-top: 7px; letter-spacing: -.02em; }
.ld-page .ld-metric-v small { font-size: 12px; font-weight: 500; color: var(--ld-faint); }

.ld-page .ld-surface {
  border: 1px solid var(--ld-line);
  border-radius: var(--ld-r-lg);
  background: var(--ld-surface);
  overflow: hidden;
}
.ld-page .ld-split { display: grid; grid-template-columns: 1fr 380px; gap: 18px; align-items: start; }

.ld-page .ld-kv { display: grid; gap: 1px; background: var(--ld-line-soft); }
.ld-page .ld-kv-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--ld-surface);
  padding: 11px 15px;
  font-size: 12.5px;
}
.ld-page .ld-kv-k { color: var(--ld-faint); font-weight: 500; }
.ld-page .ld-kv-v { font-weight: 600; text-align: right; }

.ld-page .ld-diff {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px;
}
.ld-page .ld-diff-old { color: var(--ld-faint); text-decoration: line-through; }
.ld-page .ld-diff-new { color: var(--ld-ok); font-weight: 600; }

/* ================================================================ mobile === */
/* A phone layout, not a shrunk desktop. The rail becomes a bottom tab bar, the
   stage and the inspector stack, tables become cards, and the band keeps its
   full anatomy because that control is the whole point of the tool. */

.ld-page .ld-tabbar { display: none; }
.ld-page .ld-only-phone { display: none; }

@media (max-width: 760px) {
  .ld-page .ld-only-desktop { display: none !important; }
  .ld-page .ld-only-phone { display: initial; }

  .ld-page { --ld-topbar-h: 48px; --ld-dock-h: 58px; }

  .ld-page .ld-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height: auto; min-height: calc(100vh - var(--ld-topbar-h) - var(--ld-dock-h));
  }
  .ld-page .ld-rail { display: none; }
  /* The topbar is the one row that cannot fit a phone: brand, breadcrumb trail
     and two actions overflow 390px, and because nothing shrinks, the document
     grows wider than the viewport and every right-hand value in the panels
     below gets pushed off screen. Drop the trail, keep the design's own name
     and its status, and let the remaining children shrink. */
  .ld-page { overflow-x: hidden; }
  .ld-page .ld-topbar { gap: 10px; padding: 0 12px; }
  .ld-page .ld-topbar > * { min-width: 0; }
  .ld-page .ld-crumbs > span:first-child,
  .ld-page .ld-crumbs > svg { display: none; }
  .ld-page .ld-brand-text span { display: none; }

  .ld-page .ld-stage { grid-template-rows: auto; min-height: 0; }
  .ld-page .ld-stage-bar { display: none; }
  .ld-page .ld-stage-body { padding: 16px 12px 20px; }
  .ld-page .ld-card { width: 100%; max-width: 360px; padding: 16px; gap: 11px; }
  .ld-page .ld-card-art { width: 150px; height: 150px; }
  .ld-page .ld-card-name { font-size: 20px; }
  .ld-page .ld-card-tick { display: none; }
  .ld-page .ld-skin-dock { position: static; transform: none; margin: 14px auto 0; }
  .ld-page .ld-swatch { width: 38px; height: 38px; }
  .ld-page .ld-swatch img { width: 32px; height: 32px; }

  .ld-page .ld-inspector { border-left: 0; border-top: 1px solid var(--ld-line); }
  .ld-page .ld-panel-foot { position: sticky; bottom: 0; background: var(--ld-surface); }

  .ld-page .ld-grid {
    grid-template-columns: repeat(auto-fill, minmax(102px, 1fr));
    gap: 9px; padding: 14px 12px 20px;
  }
  .ld-page .ld-item-art { width: 62px; height: 62px; }
  .ld-page .ld-item-art img { width: 58px; height: 58px; }
  .ld-page .ld-picker-bar, .ld-page .ld-picker-chips { padding: 12px 14px; }

  .ld-page .ld-slot { grid-template-columns: 44px 1fr; row-gap: 10px; }
  .ld-page .ld-slot-art { width: 44px; height: 44px; }
  .ld-page .ld-slot .ld-stepper { grid-column: 1 / -1; justify-self: start; }

  .ld-page .ld-skin-preview { grid-template-columns: 72px 1fr; gap: 11px; }
  .ld-page .ld-skin-art { width: 72px; height: 72px; }
  .ld-page .ld-skin-art img { width: 64px; height: 64px; }

  .ld-page .ld-split { grid-template-columns: 1fr; }
  .ld-page .ld-metrics { flex-wrap: wrap; }
  .ld-page .ld-metric { flex: 1 1 44%; }
  .ld-page .ld-sheet { padding: 16px 14px; }
  .ld-page .ld-done-emblem { width: 110px; height: 110px; }
  .ld-page .ld-done-name { font-size: 23px; }

  /* tables become stacked cards, never a sideways scroll */
  .ld-page .ld-table,
  .ld-page .ld-table tbody,
  .ld-page .ld-table tr,
  .ld-page .ld-table td { display: block; width: 100%; }
  .ld-page .ld-table thead { display: none; }
  .ld-page .ld-table tr {
    border: 1px solid var(--ld-line);
    border-radius: var(--ld-r-lg);
    background: var(--ld-surface);
    padding: 12px; margin-bottom: 10px;
  }
  .ld-page .ld-table td { border: 0; padding: 4px 0; }
  .ld-page .ld-table td[data-k]::before {
    content: attr(data-k);
    display: block;
    font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ld-faint);
    margin-bottom: 3px;
  }
  .ld-page .ld-num { text-align: left; }
  .ld-page .ld-table-actions { justify-content: flex-start; margin-top: 8px; }

  /* the bottom tab bar that replaces the rail */
  .ld-page .ld-tabbar {
    display: flex; align-items: stretch;
    height: var(--ld-dock-h);
    background: var(--ld-surface);
    border-top: 1px solid var(--ld-line);
  }
  .ld-page .ld-tabbar button {
    flex: 1; border: 0; background: transparent;
    display: grid; justify-items: center; align-content: center; gap: 4px;
    color: var(--ld-faint);
    font-family: inherit; font-size: 10px; font-weight: 600;
    padding: 6px 0 7px; cursor: pointer;
  }
  .ld-page .ld-tabbar button.is-on { color: var(--ld-accent); }
  .ld-page .ld-tabbar .ld-tabbar-tick {
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--ld-ok);
  }
  .ld-page .ld-dock.is-phone-hidden { display: none; }
}

/* ----------------------------------------- the band's hidden range input --
   Added by Legendary Web on lift. The band is the control, but a native range
   rides inside it so arrow keys and screen readers work without a second
   implementation. It is invisible and never takes pointer events; focusing it
   lights the grip. */
.ld-page .ld-band-wrap { position: relative; }
.ld-page .ld-band-input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.ld-page .ld-band-input:focus-visible { outline: none; }
.ld-page .ld-band-input:focus-visible ~ .ld-band .ld-band-grip,
.ld-page .ld-band-wrap:focus-within .ld-band-grip { box-shadow: 0 0 0 3px var(--ld-accent-dim, rgba(125, 211, 192, 0.35)); }

/* ------------------------------------------- integration, by Legendary Web --
   The design is a full-window tool; on the live site it sits under the shared
   site header, and the site footer follows the dock. These rules do only that:
   subtract the header, and swap which half of the stage is showing, since the
   page keeps both the card and the picker in the DOM and toggles .is-picking
   rather than shipping two documents. */
.ld-page .ld-shell { height: calc(100vh - var(--zl-header-bottom, 64px) - var(--ld-topbar-h) - var(--ld-dock-h)); min-height: 420px; }
.ld-page .ld-stage.is-picking .ld-stage-body,
.ld-page .ld-stage.is-picking .ld-stage-bar { display: none; }
.ld-page .ld-stage:not(.is-picking) .ld-picker { display: none; }

@media (max-width: 920px) {
  .ld-page .ld-shell { height: auto; }
}

/* The design's components set display on classes, which beats the hidden attribute, so the
   panels, the perk picker and the edit-only buttons would all show through. */
.ld-page [hidden] { display: none !important; }

/* ------------------------------------------------------ phone, by Web --
   Measured at a true 390 and 375 viewport: the document itself never
   overflows, so these fix what overflows INSIDE the stage.
   - The picker grid was three fixed 116px columns, which is 429px of track
     in a 390px box, so the third column was cut off. Let it fit.
   - The stage is the scrolling region, not the page: with 306 cards the
     document grew to about 16,000px and pushed the dock off the end, so the
     dock could never be reached. The shell takes the viewport, the picker
     scrolls inside it, and the dock stays pinned at the bottom.
   - My own topbar additions (the viewer chip, sign in, reset) are not in the
     design's topbar, so the trail has to go at phone width for them to fit. */
@media (max-width: 760px) {
  .ld-page .ld-crumbs a, .ld-page .ld-crumbs > svg { display: none; }

  .ld-page .ld-shell { height: calc(100dvh - var(--zl-header-bottom, 56px) - var(--ld-topbar-h) - var(--ld-dock-h)); min-height: 360px; }
  .ld-page .ld-stage { min-height: 0; overflow: hidden; }
  .ld-page .ld-picker { min-height: 0; }
  .ld-page .ld-grid { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .ld-page .ld-inspector { min-height: 0; overflow-y: auto; }
  .ld-page .ld-dock { position: sticky; bottom: 0; z-index: 5; flex-wrap: wrap; row-gap: 6px; }
  .ld-page .ld-dock .ld-dock-steps { order: 3; }
}

/* A declined design carries the staff note; it belongs with the design in the rail list too. */
.ld-page .ld-rail-note {
  margin: -2px 10px 8px;
  padding: 6px 8px;
  border-left: 2px solid var(--ld-bad, #ff5c48);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ld-muted);
}

/* A long shortname (hazmatsuit_scientist_arctic) is one unbreakable word, so it set the grid
   column's minimum width and pushed the track wider than the box at phone width. The columns
   are auto-fill 1fr, so the tiles have to be allowed to be narrower than their text. */
.ld-page .ld-item { min-width: 0; }
.ld-page .ld-item-name, .ld-page .ld-item-id { max-width: 100%; overflow-wrap: anywhere; }

/* The topbar at phone width: the design's name may shrink, the actions may not. */
@media (max-width: 760px) {
  .ld-page .ld-crumbs { min-width: 0; flex: 1 1 auto; }
  .ld-page .ld-crumbs b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ld-page .ld-topbar .ld-btn, .ld-page .ld-topbar .ld-icon-btn, .ld-page .ld-tag { flex: 0 0 auto; }
}

/* ===================================================== LIVE FIX 2026-10-26 ==
   The stage's decorative layers sat above the picker and ate every click, drag
   and scroll over the whole stage: .ld-stage-dots is position absolute, inset 0
   and was taking pointer events, so on the live page no item tile could be
   clicked and the grid could not be scrolled. Anything purely decorative inside
   the stage is now transparent to the pointer. */
.ld-page .ld-stage-dots,
.ld-page .ld-stage-wash,
.ld-page .ld-card-tick,
.ld-page [aria-hidden="true"].ld-stage-dots { pointer-events: none; }

/* ------------------------------------------------- reading size at 4K --
   The design is drawn in px for a 1920 canvas, so on a 3840 screen every
   tile, label and icon is half the intended size. Scale the whole tool with
   the viewport instead of restating sizes: zoom scales layout as well as
   type, so the grid, the icons and the bands all grow together.
   The shell's height is the one figure that has to be unzoomed, because
   100vh is measured in unscaled pixels. */
.ld-page { --ld-zoom: 1; }
.ld-page .ld-shell {
  height: calc((100vh - var(--zl-header-bottom, 64px)) / var(--ld-zoom) - var(--ld-topbar-h) - var(--ld-dock-h));
}
@media (min-width: 2300px) { .ld-page { --ld-zoom: 1.25; zoom: 1.25; } }
@media (min-width: 3000px) { .ld-page { --ld-zoom: 1.5; zoom: 1.5; } }
@media (min-width: 3600px) { .ld-page { --ld-zoom: 1.75; zoom: 1.75; } }

/* ---------------------------------------- zoom fallback, where zoom is not --
   CSS zoom is what scales the tool at 4K. Firefox has it from 126 and Safari
   has had it for years, but a browser without it would render the whole tool
   at half size, so the same three steps are redone with a transform. The
   element's layout box does not scale with a transform, so the width is
   divided back and the extra visual height is added as margin, otherwise the
   site footer sits on top of the dock.
   The scaled main is the viewport minus the site header, so the extra height
   is that times (1 - 1/scale): 0.2, 0.3333 and 0.4286. Measured at 3072 the
   exact figure left the footer 32px over the dock, because the main is a few
   pixels taller than the formula assumes, so each one is rounded up and
   carries a 24px buffer: a little space above the footer is nothing, an
   overlap is a bug. */
@supports not (zoom: 1.5) {
  @media (min-width: 2300px) {
    .ld-page {
      transform: scale(1.25); transform-origin: 0 0;
      width: 80%;
      margin-bottom: calc((100vh - var(--zl-header-bottom, 64px)) * 0.22 + 24px);
    }
  }
  @media (min-width: 3000px) {
    .ld-page {
      transform: scale(1.5);
      width: 66.6667%;
      margin-bottom: calc((100vh - var(--zl-header-bottom, 64px)) * 0.35 + 24px);
    }
  }
  @media (min-width: 3600px) {
    .ld-page {
      transform: scale(1.75);
      width: 57.1429%;
      margin-bottom: calc((100vh - var(--zl-header-bottom, 64px)) * 0.52 + 24px);
    }
  }
}

/* A way out to the Workshop, sitting on the field's own label row. */
.ld-page .ld-field-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ld-page .ld-field-link { font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ld-accent); text-decoration: none; }
.ld-page .ld-field-link:hover { text-decoration: underline; }