/* ------------------------------------------------------------------ *
 *  Warpaints Fanatic collection — styles
 * ------------------------------------------------------------------ */

:root {
  /* dark palette — the default everywhere */
  color-scheme: dark;
  --bg: #17171a;
  --panel: #202024;
  --ink: #f2f2f0;
  --ink-soft: #9a9aa0;
  --line: #34343a;
  --accent: #f0803c;
  --radius: 12px;

  /* honeycomb geometry — pointy-top hexes, offset rows (JS reads these back).
     Hexes touch along their flat sides within a row; alternate rows are
     shifted half a hex and pulled up so points nestle into the notches. */
  --hw: 82px;                        /* hex width,  flat side to flat side    */
  --hh: 95px;                        /* hex height, point to point (~hw*1.155)*/
  --seam: 2px;                       /* visible sliver between hexes          */
}

/* light palette — opt-in only, when the user picks it with the theme toggle */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f5f4;
  --panel: #ffffff;
  --ink: #1c1c1e;
  --ink-soft: #6b6b70;
  --line: #e3e3e0;
  --accent: #b5451b;
}

* { box-sizing: border-box; }

/* iOS Safari auto-zooms the page when a focused input's font-size is under
   16px — with a fixed-position dialog on screen that leaves things visibly
   misaligned until the visitor manually pinches back out. Force every text
   control to 16px+ on touch-sized screens so that zoom never triggers. */
@media (max-width: 640px) {
  input, textarea, select { font-size: 16px !important; }
}

/* slim, theme-matched scrollbar instead of the default OS chrome */
html { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 999px;
  border: 2px solid var(--bg);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-soft); }

[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* belt-and-braces: nothing in this layout should ever need to push the
     page wider than the viewport (see .mode-seg for the actual offender) */
  overflow-x: hidden;
}
/* stop the page behind an open dialog from scrolling — without this a touch
   drag on the backdrop (common on a phone, since dialogs don't span edge-to-edge)
   scrolls the honeycomb underneath instead of the dialog's own content. */
body:has(dialog[open]) { overflow: hidden; }

.wrap {
  max-width: 1600px;
  margin: 0 auto;
  padding: 24px clamp(12px, 3vw, 40px) 80px;
}

/* ---- header ------------------------------------------------------- */

header.app {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 24px;
  margin-bottom: 20px;
}

header.app h1 {
  margin: 0;
  font-size: 22px;
  letter-spacing: 0.2px;
}

header.app .sub { color: var(--ink-soft); font-size: 13px; }

.summary {
  margin-left: auto;
  text-align: right;
  font-size: 13px;
  color: var(--ink-soft);
}
.summary b { color: var(--ink); font-size: 15px; }

.bar {
  margin-top: 6px;
  width: 240px;
  max-width: 46vw;
  height: 8px;
  border-radius: 99px;
  background: var(--line);
  overflow: hidden;
}
.bar > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.25s ease;
}

.sync {
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.sync::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}
.sync[data-state="online"] { color: #1fae4d; }
.sync[data-state="offline"] { color: #e0902f; }

/* ---- auth gate ------------------------------------------------- */

#authGate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg);
}
#authGate[hidden] { display: none; }

.auth-card {
  width: min(380px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px 26px;
  text-align: center;
}
.auth-card h1 { margin: 0 0 4px; font-size: 20px; }
.auth-msg { margin: 0 0 18px; font-size: 13px; color: var(--ink-soft); min-height: 2.4em; }
.auth-card form { display: flex; flex-direction: column; gap: 8px; }
.auth-card input {
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
}
.auth-card #authCode { letter-spacing: 4px; font-size: 18px; }
.auth-card #authCode:placeholder-shown { letter-spacing: normal; }
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  padding: 10px 12px;
}
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { border-color: transparent; background: none; color: var(--ink-soft); }
.btn.ghost:hover { color: var(--ink); border-color: transparent; }

/* ---- range tabs ---------------------------------------------- */

.ranges {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.brand-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.brand-tab {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 5px 13px;
  cursor: pointer;
}
.brand-tab:hover { color: var(--ink); }
.brand-tab[aria-pressed="true"] {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}
.range-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--line);
}
.range-tab {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 8px 14px;
  margin-bottom: -1px;
  cursor: pointer;
}
.range-tab:hover { color: var(--ink); }
.range-tab[aria-pressed="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

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

.toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 12px;
  margin-bottom: 16px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.toolbar input[type="search"],
.toolbar select {
  font: inherit;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
}
.toolbar input[type="search"] { min-width: 200px; flex: 1 1 200px; }

.toolbar .spacer { flex: 1 1 auto; }

button.btn {
  font: inherit;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
}
button.btn:hover { border-color: var(--ink-soft); }
button.btn.danger:hover { border-color: var(--accent); color: var(--accent); }
button.btn.accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
button.btn.accent:hover { filter: brightness(1.08); border-color: var(--accent); }

/* ---- family chips --------------------------------------------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.chip {
  font: inherit;
  font-size: 12.5px;
  color: var(--ink-soft);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 5px 11px;
  cursor: pointer;
}
.chip:hover { color: var(--ink); }
.chip[aria-pressed="true"] {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}
.chip .n { opacity: 0.7; margin-left: 5px; font-variant-numeric: tabular-nums; }

/* ---- honeycomb ----------------------------------------------- */

#comb { width: 100%; }

/* Pointy-top hexes: within a row they sit side by side (pitch = w); each row
   is pulled up by 1/4 of its height so the row below nestles into the notches,
   and every other row is shifted right by half a hex. */
.comb__row {
  display: flex;
  gap: var(--seam);
  height: var(--hh);
  margin-bottom: calc(var(--hh) * -0.25 + var(--seam) * 0.5);
}
.comb__row:nth-child(even) {
  margin-left: calc((var(--hw) + var(--seam)) / 2);
}
.comb__row:last-child { margin-bottom: 0; }

/* primer / spray ranges: lay the cells out as spray-can silhouettes on a plain
   grid (no honeycomb nesting). */
.comb--spray .comb__row {
  height: auto;
  gap: 10px;
  margin: 0 0 10px;
}
.comb--spray .comb__row:nth-child(even) { margin-left: 0; }
/* The can silhouette lives on ::before so the ::after spray "zap" can spill
   out above the nozzle without being clipped away. */
.comb--spray .hex {
  height: var(--hh);
  background: none;
  clip-path: none;
  overflow: visible;
}
.comb--spray .hex::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--c, #888);
  background-image: var(--fx, none); /* metallic primers keep their sheen */
  clip-path: polygon(
    42% 15%, 58% 15%, 58% 20%,   /* nozzle */
    64% 20%, 64% 30%,            /* cap right */
    83% 38%, 83% 95%,            /* body right */
    77% 100%, 23% 100%,          /* base bevel */
    17% 95%, 17% 38%,            /* body left */
    36% 30%, 36% 20%, 42% 20%    /* cap left + back to nozzle */
  );
}
/* not-owned cans keep the can shape + colour (parent opacity does the dimming);
   the plain hexagon grey veil / hover-clear must not apply in spray mode */
.comb--spray .hex.is-missing::before,
.comb--spray .hex.is-missing:hover::before {
  clip-path: polygon(
    42% 15%, 58% 15%, 58% 20%,
    64% 20%, 64% 30%,
    83% 38%, 83% 95%,
    77% 100%, 23% 100%,
    17% 95%, 17% 38%,
    36% 30%, 36% 20%, 42% 20%
  );
  background-color: var(--c, #888);
  background-image: var(--fx, none);
}
.comb--spray .hex::after {
  content: "";
  position: absolute;
  top: -3%;
  left: 46%;
  width: 52%;
  height: 27%;
  pointer-events: none;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 24'%3E%3Cg stroke='rgba(255,255,255,0.8)' stroke-width='2.6' stroke-linecap='round' fill='none'%3E%3Cpath d='M4 22 L16 12'/%3E%3Cpath d='M4 22 L20 17'/%3E%3Cpath d='M4 22 L21 22'/%3E%3Cpath d='M4 22 L13 4'/%3E%3Cpath d='M4 22 L28 9'/%3E%3C/g%3E%3Cg fill='rgba(255,255,255,0.7)'%3E%3Ccircle cx='30' cy='6' r='2'/%3E%3Ccircle cx='34' cy='15' r='1.7'/%3E%3Ccircle cx='22' cy='3' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
}
.comb--spray .hex__name { padding-top: 22%; }

.hex {
  position: relative;
  flex: 0 0 auto;
  width: var(--hw);
  height: var(--hh);
  padding: 0 9px;
  border: 0;
  cursor: pointer;
  background-color: var(--c, #888);
  background-image: var(--fx, none);
  color: var(--t, #fff);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: transform 0.08s ease, filter 0.12s ease;
}
.hex:hover { transform: translateY(-2px); z-index: 2; filter: brightness(1.08); }
.hex:focus-visible { outline: none; transform: translateY(-2px) scale(1.04); z-index: 3; }

.hex__name {
  position: relative;
  z-index: 2;
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.12;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.hex__code {
  position: relative;
  z-index: 2;
  font-size: 8.5px;
  opacity: 0.7;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
/* Status marker — a small pill centred near the bottom of the hex, just below
   the code. No ring, so the hexagon shape and size never change. */
.hex__badge {
  position: absolute;
  bottom: 13%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.55);
}
.hex.s-low .hex__badge { background: #d98a1f; }
.hex.s-empty .hex__badge { background: rgba(0, 0, 0, 0.4); }
.hex.s-wishlist .hex__badge { background: var(--accent); }

/* collection states */
.hex.is-missing { opacity: 0.55; }
.hex.is-missing::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: inherit;
  background: rgba(120, 120, 120, 0.22);
  pointer-events: none;
}
.hex.is-missing:hover { opacity: 0.9; }
.hex.is-missing:hover::before { background: transparent; }

.hex.s-empty { opacity: 0.78; }

/* ---- finish / type effects --------------------------------------- *
 * Metallics get a brushed sheen, washes a wet gloss, technical/FX a
 * faint texture, fluo an inner bloom + extra saturation. `--fx` is the
 * background-image layered over the flat colour (on the tile and on the
 * owned-state centre punch). Base / Standard / Speedpaint stay flat. */
.hex.fx-metal {
  --fx: linear-gradient(125deg,
    rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 26%,
    rgba(0, 0, 0, 0.22) 48%, rgba(255, 255, 255, 0.32) 66%,
    rgba(0, 0, 0, 0.24) 82%, rgba(255, 255, 255, 0.14) 100%);
}
.hex.fx-wash {
  --fx: radial-gradient(120% 85% at 30% 12%,
    rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0) 46%,
    rgba(0, 0, 0, 0.16) 100%);
}
.hex.fx-fx {
  background-image:
    radial-gradient(rgba(0, 0, 0, 0.30) 20%, transparent 22%),
    radial-gradient(rgba(0, 0, 0, 0.22) 16%, transparent 18%),
    radial-gradient(rgba(255, 255, 255, 0.16) 13%, transparent 15%),
    radial-gradient(ellipse 65% 50% at 28% 26%, rgba(0, 0, 0, 0.44), transparent 60%),
    radial-gradient(ellipse 55% 62% at 80% 74%, rgba(0, 0, 0, 0.36), transparent 62%),
    radial-gradient(ellipse 130% 100% at 50% 122%, rgba(0, 0, 0, 0.32), transparent 70%);
  background-size: 12px 12px, 20px 18px, 17px 22px, 100% 100%, 100% 100%, 100% 100%;
  background-position: 0 0, 7px 4px, 3px 9px, 0 0, 0 0, 0 0;
  background-blend-mode: multiply, multiply, screen, multiply, multiply, multiply;
}
.hex.fx-glow {
  --fx: radial-gradient(circle at 50% 42%,
    rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.05) 52%, rgba(0, 0, 0, 0.08) 100%);
  filter: saturate(1.4) brightness(1.05);
}
.hex.fx-glow:hover { filter: saturate(1.4) brightness(1.13); }

/* a blend of paints — faint diagonal hairlines, colour reads through */
.hex.fx-blend {
  --fx: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08) 0 2px,
    rgba(0, 0, 0, 0.05) 2px 4px,
    transparent 4px 13px
  );
}

.empty-note {
  padding: 40px 12px;
  text-align: center;
  color: var(--ink-soft);
}

@media (max-width: 760px) { :root { --hw: 70px; --hh: 81px; } }
@media (max-width: 520px) { :root { --hw: 58px; --hh: 67px; } .hex__name { font-size: 9px; } }

/* ---- mode switch + miniatures ------------------------------ */

.modeswitch {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
/* segmented control — reads as a view toggle, distinct from the brand pills.
   min-width:0 lets it shrink below its own content width instead of forcing
   the flex row (and the whole page, on a narrow phone) wider than the
   viewport; overflow-x scrolls the pills internally once they no longer fit. */
.mode-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 99px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.mode-tab {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  background: none;
  border: 0;
  border-radius: 99px;
  padding: 6px 16px;
  cursor: pointer;
  flex: none;
  white-space: nowrap;
}
.mode-tab:hover { color: var(--ink); }
.mode-tab[aria-pressed="true"] {
  color: var(--ink);
  background: var(--panel);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}
.modeswitch .spacer { flex: 1 1 auto; }

/* narrow screens: the tabs alone fill the row, so drop the cart/theme/sign-out
   group to its own line instead of letting it overflow off the right edge. */
@media (max-width: 640px) {
  .modeswitch { flex-wrap: wrap; row-gap: 8px; }
  .modeswitch .spacer { flex-basis: 100%; width: 0; height: 0; }
}

#minisGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 16px 12px;
}
.mini-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 2px;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.mini-av {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--line);
  border: 2px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.08s ease, border-color 0.12s ease;
}
.mini-card:hover .mini-av { transform: translateY(-2px); border-color: var(--accent); }
.mini-av--none { font-size: 26px; font-weight: 700; color: var(--ink-soft); }
.mini-name {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  max-width: 108px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.mini-count { font-size: 10.5px; color: var(--ink-soft); }
#minisGrid .empty-note { grid-column: 1 / -1; }

.minis-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}
.minis-pager .btn { font-size: 13px; padding: 7px 14px; }
.minis-pager .btn[disabled] { opacity: 0.4; cursor: default; }
.minis-pager__at { font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ---- minis: grid / board view toggle + kanban board ------- */
/* keep the two selects from blowing out the toolbar when a long project name
 * is selected — they shrink, cap at the toolbar width, and pair up on mobile */
#miniSort,
#miniProjectFilter { min-width: 0; max-width: 100%; flex: 1 1 150px; }
@media (max-width: 640px) {
  #miniSort,
  #miniProjectFilter { flex: 1 1 calc(50% - 4px); }
}
.mini-view-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; flex: 0 0 auto; }
.mini-view-seg__btn {
  font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 7px 12px; border: 0; background: var(--panel); color: var(--ink-soft); cursor: pointer;
}
.mini-view-seg__btn + .mini-view-seg__btn { border-left: 1px solid var(--line); }
.mini-view-seg__btn[aria-pressed="true"] { background: var(--accent); color: #1c1006; }

#minisBoard {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 1fr);
  gap: 10px;
  margin-top: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
  align-items: start;
}
.kb-col { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); display: flex; flex-direction: column; min-height: 90px; }
.kb-col--over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.kb-col__h {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft);
}
.kb-col__n { font-size: 11px; color: var(--ink-soft); background: var(--bg); border-radius: 999px; padding: 1px 7px; }
.kb-col__body { display: flex; flex-direction: column; gap: 8px; padding: 10px; min-height: 40px; }
.kb-empty { margin: 6px 0; text-align: center; color: var(--ink-soft); font-size: 13px; }
.kb-card {
  display: flex; align-items: center; gap: 8px;
  padding: 6px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg);
  cursor: grab; user-select: none;
}
.kb-card:hover { border-color: var(--ink-soft); }
.kb-card--drag { opacity: 0.4; }
.kb-card img, .kb-card__ph {
  width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 7px; object-fit: cover; background: var(--panel); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--ink-soft);
}
.kb-card__name { font-size: 12.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- detail dialog ----------------------------------------- */

dialog#detail,
dialog#sets,
dialog#miniAdd,
dialog#miniDetail,
dialog#bitAdd,
dialog#bitDetail,
dialog#shopList,
dialog#palette,
dialog#customPaint {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  padding: 0;
  width: min(440px, 92vw);
}
dialog#customPaint::backdrop { background: rgba(0, 0, 0, 0.45); }
dialog#customPaint .body { padding: 20px; }
dialog#customPaint h2 { margin: 0 0 14px; font-size: 18px; }
.cp-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.cp-field input[type='text'],
.cp-field select {
  font: inherit;
  font-size: 14px;
  padding: 8px 10px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.cp-colour { display: flex; gap: 8px; align-items: center; }
.cp-colour input[type='color'] {
  width: 44px;
  height: 38px;
  padding: 2px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.cp-colour input[type='text'] { flex: 1; font-variant-numeric: tabular-nums; text-transform: uppercase; }
.cp-opt { opacity: 0.6; font-weight: 400; }
.cp-fam { margin: 0 0 4px; font-size: 12px; color: var(--ink-soft); }
.cp-err { margin: 0; font-size: 12px; color: #e06a4a; min-height: 15px; }
#cpModeTabs { margin-bottom: 14px; }

.cp-blend { display: flex; flex-direction: column; gap: 6px; }
.cp-blend-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cp-blend-sw {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 1px solid var(--line);
}
.cp-blend-name { flex: 1 1 auto; min-width: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-blend-parts {
  flex: 0 0 auto;
  width: 52px;
  font: inherit;
  font-size: 13px;
  padding: 4px 6px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.cp-blend-x {
  flex: 0 0 auto;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.cp-blend-x:hover { color: var(--accent); }
.cp-blend-add {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}
.cp-blend-mix { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-soft); }
.cp-blend-mix .cp-blend-sw { width: 24px; height: 24px; }
.cp-blend-mix b { font-variant-numeric: tabular-nums; }
#cpBlendPicker { margin-top: 8px; }

.d-blend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: -6px 0 14px;
}
.d-blend__l {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.d-blend__part {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  padding: 2px 8px 2px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.d-blend__part i { width: 12px; height: 12px; border-radius: 3px; }
dialog#customPaint menu {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
}
dialog#customPaint menu .spacer { flex: 1 1 auto; }
dialog#customPaint menu button {
  font: inherit;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
}
dialog#customPaint menu button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
dialog#customPaint menu button.ghost { border-color: transparent; background: none; color: var(--ink-soft); }
dialog#customPaint menu button.danger-text {
  border-color: transparent;
  background: none;
  color: #e06a4a;
  padding-left: 0;
}
dialog#detail menu { display: flex; align-items: center; }
dialog#detail menu .spacer { flex: 1 1 auto; }
#dEditCustom {
  font: inherit;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
}
#dEditCustom:hover { color: var(--ink); border-color: var(--line); }
dialog#sets,
dialog#miniDetail,
dialog#bitDetail { width: min(460px, 92vw); }
dialog#shopList { width: min(480px, 94vw); }
dialog#palette { width: min(560px, 94vw); }
dialog#detail::backdrop,
dialog#sets::backdrop,
dialog#miniAdd::backdrop,
dialog#miniDetail::backdrop,
dialog#bitAdd::backdrop,
dialog#bitDetail::backdrop,
dialog#shopList::backdrop,
dialog#palette::backdrop { background: rgba(0, 0, 0, 0.45); }
dialog#detail .body,
dialog#sets .body,
dialog#miniAdd .body,
dialog#miniDetail .body,
dialog#bitAdd .body,
dialog#bitDetail .body,
dialog#shopList .body,
dialog#palette .body { padding: 20px; }
dialog#sets h2,
dialog#miniAdd h2,
dialog#bitAdd h2 { margin: 0 0 4px; font-size: 18px; }

/* add-miniature */
.mini-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  margin: 12px 0;
  border: 2px dashed var(--line);
  border-radius: 10px;
  color: var(--ink-soft);
  font-size: 13px;
  cursor: pointer;
  overflow: hidden;
}
.mini-drop:hover { border-color: var(--ink-soft); }
.mini-drop img { width: 100%; max-height: 260px; object-fit: contain; }
dialog#miniAdd input[type="text"],
dialog#miniDetail .md-name,
dialog#miniDetail .md-tag-input,
dialog#miniDetail textarea,
dialog#miniDetail .md-paint-time input,
dialog#recipeDetail .md-tag-input,
dialog#projectDetail .md-tag-input,
dialog#bitAdd input[type="text"],
dialog#bitAdd input[type="number"],
dialog#bitAdd select,
dialog#bitDetail .md-name,
dialog#bitDetail .md-tag-input,
dialog#bitDetail textarea,
dialog#bitDetail .bit-fields input,
dialog#bitDetail .bit-fields select {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
}
dialog#miniAdd menu,
dialog#miniDetail menu,
dialog#bitAdd menu,
dialog#bitDetail menu {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
}
dialog#miniAdd menu form,
dialog#miniDetail menu form,
dialog#bitAdd menu form,
dialog#bitDetail menu form { margin: 0; }
dialog#miniAdd menu button,
dialog#miniAdd menu .btn,
dialog#miniDetail menu button,
dialog#miniDetail menu .btn,
dialog#bitAdd menu button,
dialog#bitAdd menu .btn,
dialog#bitDetail menu button,
dialog#bitDetail menu .btn {
  font: inherit;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
}
dialog#miniAdd menu button.primary,
dialog#miniDetail menu button.primary,
dialog#bitAdd menu button.primary,
dialog#bitDetail menu button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.danger-text {
  border: 0 !important;
  background: none !important;
  color: var(--accent) !important;
  padding: 8px 4px !important;
}
dialog#miniAdd menu .spacer,
dialog#miniDetail menu .spacer,
dialog#bitAdd menu .spacer,
dialog#bitDetail menu .spacer { flex: 1 1 auto; }

/* bits box */
#bitsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 16px 12px;
}
.bit-av { position: relative; display: inline-flex; }
.bit-ico {
  width: 1.15em; height: 1.15em; flex: 0 0 auto;
  fill: currentColor; vertical-align: -0.18em;
}
.bit-ico--sm { width: 1em; height: 1em; vertical-align: -0.14em; }
.bit-ico--lg { width: 26px; height: 26px; vertical-align: 0; }
.bit-av--icon .bit-ico { color: var(--ink-soft); }
.mini-count .bit-ico { color: var(--ink-soft); }
.bit-card { display: flex; flex-direction: column; align-items: stretch; }
.bit-card__open { width: 100%; flex: 0 0 auto; }
.bit-card--empty .bit-card__open { opacity: 0.45; }
/* fixed name box so the stepper sits at the same height on every card */
.bit-card__open .mini-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.3; min-height: 2.6em;
}
.bit-step {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 3px; flex: 0 0 auto;
}
.bit-card > .mini-tags { margin-top: 8px; }
.bit-step__b {
  width: 22px; height: 22px; padding: 0;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel); color: var(--ink-soft);
  font: inherit; font-size: 15px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.bit-step__b:hover { color: var(--ink); border-color: var(--ink-soft); }
.bit-step__n {
  font-size: 12px; font-weight: 700; min-width: 1.4em; text-align: center;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.bit-card--empty .bit-step__n { color: var(--ink-soft); }
.bit-empty-toggle {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  font-size: 12.5px; color: var(--ink-soft); white-space: nowrap;
}
.bit-empty-toggle input { width: auto; }
dialog#bitAdd .bit-add-row { display: flex; gap: 8px; margin: 10px 0; }
dialog#bitAdd .bit-add-row select { flex: 1 1 auto; min-width: 0; }
dialog#bitAdd .bit-add-row input[type="number"] { flex: 0 0 78px; text-align: center; }
dialog#bitAdd input[type="text"] { margin-top: 4px; }
.bit-fields {
  display: grid;
  grid-template-columns: 1fr 90px;
  gap: 10px;
  margin: 12px 0;
}
.bit-fields label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-soft);
}
.bit-fields__wide { grid-column: 1 / -1; }
.bit-fields input[type="number"] { text-align: center; }

#bdUses, #mdBits { display: flex; flex-wrap: wrap; gap: 6px; }
#bdUses:not(:empty), #mdBits:not(:empty) { margin: 6px 0 8px; }
#mdAddBit { margin-bottom: 12px; }
.bd-use-opts {
  display: flex; align-items: center; gap: 14px;
  font-size: 12px; color: var(--ink-soft); margin: 2px 0 6px;
}
.bd-use-opts label { display: inline-flex; align-items: center; gap: 5px; }
.bd-use-opts input[type="number"] { width: 52px; text-align: center; margin: 0; }
.bd-use-opts input[type="checkbox"] { width: auto; margin: 0; }

/* miniature detail */
.md-browse { display: flex; align-items: center; margin-bottom: 10px; }
.md-browse[hidden] { display: none; }
.md-browse__btn {
  font: inherit;
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
}
.md-browse__btn:hover { color: var(--ink); border-color: var(--ink-soft); }
.md-image {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  margin-bottom: 12px;
  cursor: zoom-in;
}
.md-image-wrap { position: relative; }
.md-enh-badge {
  position: absolute; left: 8px; top: 8px;
  padding: 3px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  background: var(--accent); color: #1c1006;
}
.md-enh-badge[hidden] { display: none; }
.md-enh-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 14px; }
.md-enh-bar[hidden] { display: none; }
.md-enh {
  margin: 0 0 14px; padding: 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
}
.md-enh[hidden] { display: none; }
.md-enh__pair { display: flex; gap: 8px; }
.md-enh__pair figure { flex: 1 1 0; margin: 0; min-width: 0; }
.md-enh__pair img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: contain;
  border-radius: 8px; border: 1px solid var(--line); background: var(--panel);
}
.md-enh__pair figcaption { font-size: 11px; color: var(--ink-soft); text-align: center; margin-top: 4px; }
.md-enh__note { font-size: 11.5px; color: var(--ink-soft); margin: 10px 0; line-height: 1.4; }
.md-enh__btns { display: flex; gap: 8px; }

.md-name { font-weight: 600; font-size: 15px; margin-bottom: 12px; }
.md-status { margin: -6px 0 14px; }
.md-paint-time {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 14px;
  font-size: 13px;
  color: var(--ink-soft);
}
.md-paint-time input {
  width: 64px;
  flex: 0 0 64px;
  min-width: 0;
  padding: 4px 8px;
  font-size: 13px;
}

/* tags — miniature detail editor */
.md-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.md-tags:not(:empty) { margin-bottom: 8px; }
.mini-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 4px 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
}
.mini-tag__x {
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
}
.mini-tag__x:hover { color: var(--accent); }
.md-tag-input { margin-bottom: 8px; }
.md-tag-suggest { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.md-tag-suggest .chip {
  font-size: 11.5px;
  padding: 3px 10px;
  background: none;
  border-style: dashed;
}
.md-tag-suggest .chip:hover { color: var(--accent); border-color: var(--accent); }

/* tags — on the grid cards */
.mini-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: center;
  max-width: 108px;
}
.mini-tags span {
  font-size: 9px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 6px;
}
.md-paints { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
dialog#miniDetail #mdAddPaint { margin-bottom: 16px; }

.md-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 14px 0 6px;
}
.md-recipes { display: flex; flex-wrap: wrap; gap: 6px; }
.md-recipes:not(:empty) { margin-bottom: 8px; }
.md-recipe-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 4px 2px 10px;
  font-size: 12px;
}
.md-recipe-chip--empty,
.md-recipe-chip--loading { color: var(--ink-soft); padding: 3px 10px; }
.md-recipe-chip__open {
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}
.md-recipe-chip__open:hover { text-decoration: underline; }
.md-recipe-chip__x {
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0 3px;
}
.md-recipe-chip__x:hover { color: var(--accent); }
dialog#miniDetail #mdAddRecipe { margin-bottom: 10px; }
.md-recipe-paints { display: flex; flex-direction: column; gap: 10px; }
.md-recipe-paints:not(:empty) { margin: 6px 0 4px; }
.md-recipe-grp__h {
  font-size: 11px;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.md-recipe-grp .mp-row { margin-bottom: 4px; }
.mp-row--ro { opacity: 0.92; }
.rd-minis { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.mp-row, .pick-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
}
.pick-row {
  border: 1px solid transparent;
  background: none;
  color: var(--ink);
  border-radius: 8px;
  padding: 6px 4px;
  cursor: pointer;
}
.pick-row:hover:not(:disabled) { background: var(--bg); }
.pick-row:disabled { opacity: 0.45; cursor: default; }
.mp-swatch {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: 1px solid var(--line);
}
.mp-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.mp-info b { font-size: 12.5px; }
.mp-info span { font-size: 10.5px; color: var(--ink-soft); }
.mp-label {
  flex: 0 0 96px;
  min-width: 0; /* a plain <input>'s default intrinsic width (~20 characters)
    otherwise wins over this fixed flex-basis once the font gets bigger on
    mobile, and starves the sibling paint name/brand column of its space */
  font: inherit;
  font-size: 11px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 6px;
}
.mp-del {
  flex: 0 0 auto;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-size: 13px;
  cursor: pointer;
  padding: 4px;
}
.mp-del:hover { color: var(--accent); }
.md-picker {
  margin: 4px 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
}
.md-picker input {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 9px;
  margin-bottom: 6px;
}
.md-picker-list { max-height: 220px; overflow-y: auto; }
/* the "add existing mini" picker is shared by every unit + the loose-items
   section, so instead of living in one fixed spot in the dialog it floats
   next to whichever "+ Add existing mini" button opened it. */
#pjMiniPicker {
  position: fixed;
  z-index: 30;
  width: 280px;
  max-width: 90vw;
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.sets-list {
  max-height: 60vh;
  overflow-y: auto;
  margin: 4px -4px 0;
  padding: 0 4px;
}
.set-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line);
}
.set-row:last-child { border-bottom: 0; }
.set-info { flex: 1 1 auto; min-width: 0; }
.set-info b { display: block; font-size: 13.5px; }
.set-meta { font-size: 11.5px; color: var(--ink-soft); }
.set-row .btn { flex: 0 0 auto; font-size: 12.5px; padding: 6px 10px; }
.set-row .btn[disabled] { opacity: 0.5; cursor: default; }
.set-subhead {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink-soft);
  padding: 14px 2px 4px;
}

.d-swatch {
  height: 84px;
  border-radius: 8px;
  border: 1px solid var(--line);
  margin-bottom: 14px;
}
dialog#detail h2 { margin: 0 0 2px; font-size: 18px; }
dialog#detail .meta { color: var(--ink-soft); font-size: 12.5px; margin: 0 0 12px; }

.d-triad { margin: 0 0 16px; }
.d-triad__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.d-triad__name {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.d-triad__name:hover { text-decoration: underline; }
.d-triad__strip { display: flex; gap: 3px; }
.d-triad__cell {
  flex: 1 1 0;
  height: 30px;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.d-triad__cell[aria-current="true"] { outline-color: var(--ink); }
.d-triad__cell span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
}
.d-triad__none { font-size: 12px; color: var(--ink-soft); }

.d-minis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 16px;
}
.d-minis__label { font-size: 12px; color: var(--ink-soft); margin-right: 2px; }
.d-mini-badge {
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
}
.d-mini-badge:hover { border-color: var(--accent); color: var(--accent); }

.d-status {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-bottom: 14px;
}
.d-status button {
  font: inherit;
  font-size: 13px;
  padding: 9px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
}
.d-status button:hover { border-color: var(--ink-soft); }
.d-status button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

dialog#detail textarea {
  width: 100%;
  min-height: 64px;
  font: inherit;
  resize: vertical;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
}

dialog#detail menu,
dialog#sets menu {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
}
dialog#detail menu form,
dialog#sets menu form { margin: 0; }
dialog#detail menu button,
dialog#sets menu button {
  font: inherit;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
}
dialog#detail menu button:hover,
dialog#sets menu button:hover { border-color: var(--ink-soft); }
dialog#detail menu button.primary,
dialog#sets menu button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
dialog#detail menu button.primary:hover,
dialog#sets menu button.primary:hover { filter: brightness(1.08); border-color: var(--accent); }

/* ---- cross-brand equivalents (paint detail) ---------------- */
.d-equiv { margin: 0 0 16px; }
.d-equiv__label { font-size: 12px; color: var(--ink-soft); margin-bottom: 7px; }
.d-equiv__row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 4px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.d-equiv__row:hover { background: var(--bg); }
.d-equiv__sw {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
}
.d-equiv__txt { flex: 1 1 auto; min-width: 0; }
.d-equiv__name {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.d-equiv__sub { display: block; font-size: 11px; color: var(--ink-soft); }
.d-equiv__near { flex: 0 0 auto; font-size: 10.5px; color: var(--ink-soft); }
.d-equiv__near[data-band="very-close"] { color: #4caf78; }
.d-equiv__near[data-band="close"] { color: #8bbf5a; }
.d-equiv__note { font-size: 10.5px; color: var(--ink-soft); margin-top: 6px; }

/* ---- shopping list --------------------------------------- */
.list-count {
  display: inline-block;
  min-width: 15px;
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  vertical-align: 1px;
}
dialog#shopList h2 { margin: 0 0 4px; font-size: 18px; }
dialog#shopList .meta { color: var(--ink-soft); font-size: 12.5px; margin: 0 0 12px; }
.shop-filters { display: flex; gap: 6px; margin-bottom: 14px; }
.shop-filters button {
  font: inherit;
  font-size: 12px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink-soft);
  cursor: pointer;
}
.shop-filters button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.shop-list { max-height: 52vh; overflow-y: auto; margin: 0 -4px; }
.shop-group + .shop-group { margin-top: 12px; }
.shop-brand {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0 4px 4px;
}
.shop-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 4px;
  border-bottom: 1px solid var(--line);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.shop-row.is-gone { opacity: 0; transform: translateX(12px); }
.shop-got {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--ink-soft);
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.shop-got:hover { border-color: var(--accent); background: rgba(240, 128, 60, 0.15); }
.shop-open {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  padding: 0;
}
.shop-sw {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: 1px solid var(--line);
}
.shop-txt { min-width: 0; }
.shop-name {
  display: block;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-sub { display: block; font-size: 11px; color: var(--ink-soft); }
.shop-tag {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  color: #fff;
}
.shop-tag--empty { background: #7c7c84; }
.shop-tag--low { background: #d98a1f; }
.shop-tag--wishlist { background: var(--accent); }
dialog#shopList menu {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
}
dialog#shopList menu form { margin: 0; }
dialog#shopList menu .spacer { flex: 1 1 auto; }
dialog#shopList menu button {
  font: inherit;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
}
dialog#shopList menu button:hover { border-color: var(--ink-soft); }
dialog#shopList menu button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
dialog#shopList menu button.ghost {
  border-color: transparent;
  background: none;
  color: var(--ink-soft);
}
dialog#shopList menu button.ghost:hover { color: var(--ink); }

/* ---- image -> palette ------------------------------------ */
dialog#palette h2 { margin: 0 0 12px; font-size: 18px; }
.pal-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
  border: 1.5px dashed var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.pal-drop:hover,
.pal-drop.is-over { border-color: var(--accent); color: var(--ink); }
.pal-stage {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.pal-stage canvas {
  display: block;
  max-width: 100%;
  height: auto;
  cursor: crosshair;
}
.pal-marks { position: absolute; inset: 0; pointer-events: none; }
.pal-mark {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
}
.pal-mark button {
  pointer-events: auto;
  position: absolute;
  top: -9px;
  right: -9px;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 9px;
  line-height: 14px;
  cursor: pointer;
}
.pal-tip {
  position: absolute;
  right: 6px;
  bottom: 6px;
  font-size: 10.5px;
  line-height: 1.4;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  padding: 2px 7px;
  border-radius: 999px;
}
.pal-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 12px 0 4px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.pal-controls label { display: flex; align-items: center; gap: 6px; }
.pal-controls input[type='range'] { width: 96px; accent-color: var(--accent); }
.pal-controls input[type='range']:disabled { opacity: 0.35; }
.pal-controls input[type='checkbox'] { accent-color: var(--accent); }
.pal-controls select {
  font: inherit;
  font-size: 12.5px;
  padding: 3px 6px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.pal-controls #palNOut { color: var(--ink); font-variant-numeric: tabular-nums; }
.pal-replace {
  margin-left: auto;
  font: inherit;
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink-soft);
  cursor: pointer;
}
.pal-replace:hover { color: var(--ink); border-color: var(--ink-soft); }
.pal-brands {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.pal-brands label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px 3px 7px;
  cursor: pointer;
}
.pal-brands label:has(input:checked) { color: var(--ink); border-color: var(--ink-soft); }
.pal-brands .pal-brand-all { border-style: dashed; }
.pal-brands input { accent-color: var(--accent); }
.pal-list { max-height: 46vh; overflow-y: auto; margin: 10px -4px 0; }
.pal-row { padding: 8px 4px; border-bottom: 1px solid var(--line); }
.pal-row__head { display: flex; align-items: center; gap: 10px; }
.pal-sw {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--line);
}
.pal-name { flex: 1 1 auto; font-size: 12.5px; color: var(--ink-soft); }
.pal-hex { font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.pal-best { margin-top: 4px; }
.pal-none { margin-top: 4px; font-size: 11.5px; color: var(--ink-soft); padding-left: 36px; }
.pal-match {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 5px 4px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.pal-match:hover { background: var(--bg); }
.pal-match__sw {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid var(--line);
}
.pal-match__txt { flex: 1 1 auto; min-width: 0; }
.pal-match__name {
  display: block;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pal-match__sub { display: block; font-size: 10.5px; color: var(--ink-soft); }
.pal-band { flex: 0 0 auto; font-size: 10px; color: var(--ink-soft); }
.pal-band[data-band='very-close'] { color: #4caf78; }
.pal-band[data-band='close'] { color: #8bbf5a; }
.pal-own { flex: 0 0 auto; color: #4caf78; font-size: 11px; }
.pal-alts { margin: 2px 0 0 36px; }
.pal-alts summary {
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
  list-style: none;
}
.pal-alts summary::-webkit-details-marker { display: none; }
dialog#palette menu {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
}
dialog#palette menu form { margin: 0; }
dialog#palette menu .spacer { flex: 1 1 auto; }
dialog#palette menu button {
  font: inherit;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
}
dialog#palette menu button:hover { border-color: var(--ink-soft); }
dialog#palette menu button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
dialog#palette menu button.ghost {
  border-color: transparent;
  background: none;
  color: var(--ink-soft);
}
dialog#palette menu button.ghost:hover { color: var(--ink); }

/* ---- painting recipes ----------------------------------- */
#recipesGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
#recipesGrid .empty-note { grid-column: 1 / -1; }
.recipe-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.recipe-card:hover { border-color: var(--accent); }
.recipe-card__strip { display: flex; height: 10px; border-radius: 3px; overflow: hidden; }
.recipe-card__strip i { flex: 1; }
.recipe-card__none { background: var(--line); }
.recipe-card__name { font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.recipe-card__meta { font-size: 11px; color: var(--ink-soft); }
.recipe-card .mini-tags { margin-top: 2px; }

dialog#recipeDetail {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  padding: 0;
  width: min(560px, 94vw);
}
dialog#recipeDetail::backdrop { background: rgba(0, 0, 0, 0.45); }
dialog#recipeDetail .body { padding: 20px; overflow-x: hidden; }
.rd-title {
  width: 100%;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  padding: 6px 8px;
  margin-bottom: 10px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.rd-notes {
  width: 100%;
  min-height: 46px;
  font: inherit;
  resize: vertical;
  padding: 8px 10px;
  margin-bottom: 14px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.rd-step {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
  background: var(--bg);
}
.rd-step__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rd-step__head .spacer { flex: 1 1 auto; }
.rd-step__n {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rd-step__tech {
  font: inherit;
  font-size: 12px;
  padding: 3px 6px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.rd-mv,
.rd-step__del {
  font: inherit;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink-soft);
  cursor: pointer;
}
.rd-mv:disabled { opacity: 0.3; cursor: default; }
.rd-mv:hover:not(:disabled),
.rd-step__del:hover { color: var(--ink); border-color: var(--ink-soft); }
/* step text: a transparent-text textarea over a backdrop that highlights
   tagged paint / tool names. Both must share identical box metrics. */
.rd-body-wrap { position: relative; }
.rd-body-hl,
.rd-step__body {
  width: 100%;
  font: inherit;
  font-size: 13px;
  line-height: 1.42;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
  box-sizing: border-box;
}
.rd-body-hl {
  position: absolute;
  inset: 0;
  margin: 0;
  pointer-events: none;
  overflow: hidden;
  color: var(--ink);
  background: var(--panel);
  border-color: var(--line);
}
.rd-step__body {
  position: relative;
  display: block;
  resize: vertical;
  background: transparent;
  color: transparent;
  caret-color: var(--ink);
  border-color: var(--line);
}
.rd-step__body::selection { background: rgba(240, 128, 60, 0.32); }
.rd-step__body::placeholder { color: var(--ink-soft); opacity: 1; }
.rd-hl {
  color: inherit; /* <mark> defaults to black text — keep the normal ink colour */
  background: rgba(240, 128, 60, 0.22);
  border-radius: 3px;
  /* inset ring reads as a tag border without adding layout width (keeps the
     backdrop aligned with the transparent textarea) */
  box-shadow: inset 0 0 0 1px rgba(240, 128, 60, 0.55);
}
.rd-hl--tool {
  background: rgba(150, 150, 150, 0.22);
  box-shadow: inset 0 0 0 1px rgba(150, 150, 150, 0.55);
}
/* read-only view of a step's body — plain formatted text with the same tag
   highlighting, so it's easy to read and can't be typed into by accident. */
.rd-body-view {
  width: 100%;
  font: inherit;
  font-size: 13px;
  line-height: 1.42;
  padding: 7px 40px 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
  box-sizing: border-box;
  background: var(--panel);
  color: var(--ink);
  min-height: 30px;
}
.rd-body-empty { color: var(--ink-soft); font-style: italic; }
.rd-body-edit,
.rd-body-done {
  position: absolute;
  top: 6px;
  right: 6px;
  font: inherit;
  font-size: 11px;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink-soft);
  cursor: pointer;
}
.rd-body-edit:hover,
.rd-body-done:hover { color: var(--ink); border-color: var(--ink-soft); }
.rd-step__paints { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rd-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  padding: 3px 4px 3px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
}
.rd-chip i { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.rd-chip__x {
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.rd-chip__x:hover { color: var(--accent); }
.rd-addpaint,
.rd-addtool {
  font: inherit;
  font-size: 11px;
  padding: 3px 10px;
  border: 1px dashed var(--line);
  border-radius: 999px;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
}
.rd-addpaint:hover,
.rd-addtool:hover { color: var(--ink); border-color: var(--ink-soft); }
.rd-empty { padding: 16px 8px; }
dialog#recipeDetail #rdAddStep { margin-bottom: 4px; }
dialog#recipeDetail menu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
}
/* primary phone-first CTA — full width, right under the notes field */
.rd-paintmode {
  width: 100%;
  margin: 4px 0 14px;
  padding: 12px;
  font-size: 15px;
  font-weight: 600;
}
dialog#recipeDetail menu form { margin: 0; }
dialog#recipeDetail menu .spacer { flex: 1 1 auto; }
dialog#recipeDetail menu button {
  font: inherit;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
}
dialog#recipeDetail menu button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
dialog#recipeDetail menu button.ghost { border-color: transparent; background: none; color: var(--ink-soft); }
dialog#recipeDetail menu button.ghost:hover { color: var(--ink); }
dialog#recipeDetail menu button.danger-text {
  border-color: transparent;
  background: none;
  color: #e06a4a;
  padding-left: 0;
}
.rd-at {
  position: fixed;
  z-index: 30;
  max-height: 240px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--ink-soft);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.rd-at__row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 9px;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.rd-at__row:hover { background: var(--bg); }
.rd-at__row i { width: 14px; height: 14px; border-radius: 3px; flex: 0 0 auto; }
.rd-at__row b { font-size: 12.5px; font-weight: 600; }
.rd-at__row span { font-size: 10.5px; color: var(--ink-soft); }
.rd-at__ic { flex: 0 0 auto; width: 18px; height: 18px; color: var(--ink-soft); display: inline-flex; }
.rd-at__ic svg { width: 100%; height: 100%; }
.rd-at__search {
  width: calc(100% - 12px);
  margin: 6px 6px 4px;
  font: inherit;
  font-size: 12.5px;
  padding: 6px 9px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.rd-at .empty-note { padding: 12px; }
.rd-at__link {
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

/* ---- projects (armies / units / build-status pipeline) -- */
#projectsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
#projectsGrid .empty-note { grid-column: 1 / -1; }
/* fixed sizes here are load-bearing: the card grid guarantees only 200px
   minimum width (minmax(200px, 1fr)), which after padding leaves ~172px —
   4 thumbnails + the +N badge must fit inside that even in the tightest case */
.pj-card__strip { display: flex; gap: 4px; margin-bottom: 2px; overflow: hidden; }
.pj-card__strip img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  object-fit: cover;
  background: var(--bg);
  flex: 0 0 auto;
}
.pj-card__more {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--bg);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  flex: 0 0 auto;
}
.pj-card__bar {
  height: 5px;
  border-radius: 999px;
  background: var(--bg);
  overflow: hidden;
}
.pj-card__bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

dialog#projectDetail {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  padding: 0;
  width: min(560px, 94vw);
  max-height: 92vh;
  max-height: 92dvh;
}
dialog#projectDetail::backdrop { background: rgba(0, 0, 0, 0.45); }
dialog#projectDetail .body { padding: 20px; overflow-y: auto; max-height: inherit; }
dialog#projectDetail menu {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0 0;
  margin: 12px 0 0;
  border-top: 1px solid var(--line);
}
dialog#projectDetail menu .spacer { flex: 1 1 auto; }
dialog#projectDetail menu button {
  font: inherit;
  font-size: 13px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
dialog#projectDetail menu button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
dialog#projectDetail menu button.danger-text { border: 0; background: none; color: #e06a4a; padding: 8px 0; }

.pj-target {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-soft);
}
.pj-target input[type="date"] {
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 8px;
}

.pj-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.pj-progress__bar { flex: 1 1 auto; height: 8px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.pj-progress__bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.pj-progress span { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; }

#pjAddUnit { margin-bottom: 20px; }
.pj-unit {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
  background: var(--bg);
}
.pj-unit__head { display: flex; align-items: center; gap: 8px; }
.pj-unit__toggle {
  flex: 0 0 auto;
  border: 0;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 12px;
  padding: 5px 2px;
  width: 18px;
}
.pj-unit__toggle:hover { color: var(--ink); }
.pj-unit__count {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--ink-soft);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
}
.pj-unit__body { margin-top: 8px; }
.pj-unit__preview { display: flex; gap: 4px; margin-top: 8px; padding-left: 26px; }
.pj-unit__preview img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--panel);
  border: 1px solid var(--line);
  flex: 0 0 auto;
}
.pj-unit__name {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  padding: 5px 8px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.pj-unit__del {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 5px 8px;
}
.pj-unit__del:hover { color: var(--accent); border-color: var(--accent); }
.pj-unit__rows { display: flex; flex-direction: column; gap: 6px; }
.pj-unit .pj-empty { padding: 8px 4px; text-align: left; font-size: 12px; }
.pj-unit__actions { display: flex; gap: 6px; margin-top: 8px; }

.pj-items { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.pj-items .pj-empty { padding: 12px 4px; }
.pj-actions { display: flex; gap: 6px; margin-bottom: 16px; }
.pj-actions .btn,
.pj-unit__actions button {
  font-size: 12px;
  padding: 5px 11px;
  border: 1px dashed var(--line);
  border-radius: 999px;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
}
.pj-actions .btn:hover,
.pj-unit__actions button:hover { color: var(--ink); border-color: var(--ink-soft); }

.pj-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.pj-entry__av {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg);
}
.pj-entry__av--none,
.pj-entry__av--bulk {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.pj-entry__name { flex: 1 1 auto; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-entry__x {
  flex: 0 0 auto;
  border: 0;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 2px;
  font-size: 12px;
}
.pj-entry__x:hover { color: var(--accent); }

.pj-status {
  flex: 0 0 auto;
  font: inherit;
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.pj-status--unbuilt { background: rgba(150, 150, 150, 0.18); color: var(--ink-soft); border-color: rgba(150, 150, 150, 0.4); }
.pj-status--primed { background: rgba(122, 150, 200, 0.18); color: #8fb0e0; border-color: rgba(122, 150, 200, 0.45); }
.pj-status--painting { background: rgba(240, 128, 60, 0.18); color: var(--accent); border-color: rgba(240, 128, 60, 0.45); }
.pj-status--based { background: rgba(180, 150, 90, 0.2); color: #cbae65; border-color: rgba(180, 150, 90, 0.45); }
.pj-status--done { background: rgba(90, 170, 110, 0.2); color: #6fc78a; border-color: rgba(90, 170, 110, 0.45); }

.pj-pick-av { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* ---- tools ---------------------------------------------- */
.tool-ic { width: 22px; height: 22px; flex: 0 0 auto; color: var(--ink); }
#toolsGrid { display: flex; flex-direction: column; gap: 18px; }
#toolsGrid .empty-note { padding: 40px 12px; }
.tool-cat__h {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.tool-cat__row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.tool-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.tool-card:hover { border-color: var(--accent); }
.tool-card .tool-ic { width: 26px; height: 26px; color: var(--ink-soft); }
.tool-card__name { font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.tool-card__note { font-size: 10.5px; color: var(--ink-soft); }

dialog#toolAdd {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  padding: 0;
  width: min(440px, 92vw);
}
dialog#toolAdd::backdrop { background: rgba(0, 0, 0, 0.45); }
dialog#toolAdd .body { padding: 20px; }
dialog#toolAdd h2 { margin: 0 0 12px; font-size: 18px; }
.tool-add-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 99px;
  margin-bottom: 14px;
}
.tool-add-tab {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  background: none;
  border: 0;
  border-radius: 99px;
  padding: 5px 14px;
  cursor: pointer;
}
.tool-add-tab.is-on { color: var(--ink); background: var(--panel); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28); }
#toolPickSearch {
  width: 100%;
  font: inherit;
  padding: 9px 11px;
  margin-bottom: 8px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.tool-pick-list { max-height: 46vh; overflow-y: auto; }
.tool-pick-list .pick-row { gap: 10px; }
.tool-pick-list .tool-ic { width: 20px; height: 20px; color: var(--ink-soft); }
.tool-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 6px;
}
.tool-icon-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink-soft);
  cursor: pointer;
}
.tool-icon-opt .tool-ic { width: 22px; height: 22px; }
.tool-icon-opt.is-on { border-color: var(--accent); color: var(--ink); background: rgba(240, 128, 60, 0.12); }
dialog#toolAdd menu {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
}
dialog#toolAdd menu .spacer { flex: 1 1 auto; }
dialog#toolAdd menu button {
  font: inherit;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
}
dialog#toolAdd menu button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
dialog#toolAdd menu button.ghost { border-color: transparent; background: none; color: var(--ink-soft); }
dialog#toolAdd menu button.danger-text {
  border-color: transparent;
  background: none;
  color: #e06a4a;
  padding-left: 0;
}
.rd-chip--tool { background: var(--bg); }
.rd-chip__ic { width: 13px; height: 13px; flex: 0 0 auto; color: var(--ink-soft); }
.rd-step__tools { margin-top: 6px; }

.rd-step__photo { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rd-photo { position: relative; display: inline-block; line-height: 0; }
.rd-photo img {
  display: block;
  max-height: 92px;
  max-width: 160px;
  border-radius: 8px;
  border: 1px solid var(--line);
  object-fit: cover;
}
.rd-photo__x {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
}
.rd-photo__x:hover { color: var(--accent); border-color: var(--accent); }
.rd-addphoto {
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-size: 11px;
  padding: 3px 10px;
  border: 1px dashed var(--line);
  border-radius: 999px;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
}
.rd-addphoto:hover { color: var(--ink); border-color: var(--ink-soft); }
.rd-photo img { cursor: zoom-in; }

dialog#imgLightbox {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  max-width: 92vw;
  max-height: 92vh;
  /* dvh tracks the viewport actually visible right now — on iOS, plain vh is
     measured against the largest possible viewport, which can be taller than
     what's on screen (esp. in a standalone PWA) and push the centered dialog's
     top above the fold until the page is pinch-zoomed back to reset it. */
  max-height: 92dvh;
  cursor: zoom-out;
}
dialog#imgLightbox::backdrop { background: rgba(0, 0, 0, 0.75); }
dialog#imgLightbox img {
  display: block;
  max-width: 92vw;
  max-height: 92vh;
  max-height: 92dvh;
  border-radius: 10px;
}
.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-nav:hover { background: rgba(0, 0, 0, 0.8); }
.lb-nav[hidden] { display: none; }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }

/* ---- stats + achievements ---------------------------------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.stat-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.stat-tile--wide { grid-column: 1 / -1; }
.stat-tile__label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }
.stat-tile__value { font-size: 22px; font-weight: 700; color: var(--ink); }
.stat-tile__sub { font-size: 12px; color: var(--ink-soft); }
.stat-empty { padding: 8px 0 0; text-align: left; }

.brand-list { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
.brand-row { display: flex; align-items: center; gap: 8px; }
.brand-row__name { flex: 0 0 auto; width: 130px; font-size: 12px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-row__bar { flex: 1 1 auto; height: 7px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.brand-row__bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.brand-row__count { flex: 0 0 auto; width: 52px; text-align: right; font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.pipeline-bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--bg);
  margin-top: 8px;
}
.pipeline-bar i { display: block; height: 100%; }
.pipeline-legend { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 8px; }
.pipeline-legend__item { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-soft); }
.pipeline-legend__item i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }

.cal-grid {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: 11px;
  gap: 3px;
  margin-top: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.cal-cell { width: 11px; height: 11px; border-radius: 3px; background: var(--bg); }
.cal-cell--1 { background: color-mix(in srgb, var(--accent) 30%, var(--bg)); }
.cal-cell--2 { background: color-mix(in srgb, var(--accent) 55%, var(--bg)); }
.cal-cell--3 { background: color-mix(in srgb, var(--accent) 78%, var(--bg)); }
.cal-cell--4 { background: var(--accent); }

/* ring gauge */
.gauge { position: relative; width: 132px; height: 132px; margin: 6px auto 2px; }
.gauge__svg { width: 100%; height: 100%; display: block; }
.gauge__svg circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.gauge__track { stroke: var(--bg); }
.gauge__bar { stroke: var(--accent); transition: stroke-dasharray .5s ease; }
.gauge__txt {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.gauge__txt b { font-size: 24px; font-weight: 700; color: var(--ink); line-height: 1; }
.gauge__txt span { font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.stat-tile--gauge { align-items: center; text-align: center; }
.stat-tile--gauge .stat-tile__label { align-self: flex-start; }

.pipeline-wrap { display: flex; align-items: center; gap: 20px; margin-top: 6px; flex-wrap: wrap; }
.pipeline-wrap .gauge { flex: 0 0 auto; width: 104px; height: 104px; margin: 0; }
.pipeline-wrap .gauge__txt b { font-size: 19px; }
.pipeline-main { flex: 1 1 240px; min-width: 0; }

/* cumulative growth area chart */
.growth { width: 100%; height: 132px; display: block; margin-top: 10px; }
.growth__area { fill: color-mix(in srgb, var(--accent) 16%, transparent); stroke: none; }
.growth__line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.growth__foot {
  display: flex; justify-content: space-between;
  font-size: 11.5px; color: var(--ink-soft); margin-top: 4px; font-variant-numeric: tabular-nums;
}

.ach-grid { display: flex; flex-direction: column; gap: 16px; }
.ach-track {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  padding: 12px 14px;
}
.ach-track__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.ach-track__icon { font-size: 16px; display: inline-flex; }
.ach-ico { display: block; fill: currentColor; }
.ach-track__icon .ach-ico { width: 16px; height: 16px; fill: var(--ink-soft); }
.ach-tier__icon .ach-ico { width: 20px; height: 20px; fill: var(--ink-soft); }
/* medallion backgrounds are always light metal — keep the glyph dark in both themes */
.ach-tier--unlocked .ach-tier__icon .ach-ico { fill: #241708; }
.ach-track__name { font-size: 13.5px; font-weight: 700; }
.ach-track__value { font-size: 12px; color: var(--ink-soft); }
.ach-track__desc { font-weight: 400; }
.ach-track__tiers {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.ach-tier {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  min-width: 84px;
  padding: 10px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}
.ach-tier--locked { opacity: 0.5; }
.ach-tier--unlocked { background: color-mix(in srgb, var(--accent) 6%, var(--bg)); }
.ach-tier__icon {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-bottom: 2px;
  border-radius: 50%;
  font-size: 18px; line-height: 1;
  background: var(--bg);
  border: 1px solid var(--line);
}
/* unlocked tiers get a metal medallion; tone rises with the tier */
.ach-tier--unlocked .ach-tier__icon {
  border: none;
  background: var(--medal);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.55),
    inset 0 -2px 3px rgba(0, 0, 0, 0.28),
    0 1px 3px rgba(0, 0, 0, 0.3);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.22);
}
.ach-tier--unlocked.ach-tier--t0 .ach-tier__icon { --medal: linear-gradient(145deg, #e7b892, #9c6238); }
.ach-tier--unlocked.ach-tier--t1 .ach-tier__icon { --medal: linear-gradient(145deg, #f4f6f8, #a6adb5); }
.ach-tier--unlocked.ach-tier--t2 .ach-tier__icon { --medal: linear-gradient(145deg, #ffe49a, #cd992c); }
.ach-tier--unlocked.ach-tier--t3 .ach-tier__icon {
  --medal: conic-gradient(from 210deg, #ffd1e8, #c9e6ff, #d8ffe6, #fff2c4, #e5d1ff, #ffd1e8);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.7),
    inset 0 -2px 3px rgba(0, 0, 0, 0.2),
    0 0 10px rgba(180, 130, 255, 0.45);
}
.ach-tier__name { font-size: 11px; font-weight: 600; }
.ach-tier__threshold { font-size: 10.5px; color: var(--ink-soft); }
.ach-arrow { flex: 0 0 auto; color: var(--ink-soft); font-size: 16px; }
.ach-tier--new {
  animation: ach-pulse 1.4s ease-out 2;
}
@keyframes ach-pulse {
  0% { box-shadow: 0 0 0 0 rgba(240, 128, 60, 0.55); }
  100% { box-shadow: 0 0 0 10px rgba(240, 128, 60, 0); }
}

/* ============================================================ *
 *  Marketing / landing page (#landing)                          *
 * ============================================================ */

#landing {
  position: fixed;
  inset: 0;
  z-index: 90;
  overflow-y: auto;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
#landing a { color: inherit; text-decoration: none; }
#landing main { display: block; }
.lp-nav,
.lp-hero,
.lp-section,
.lp-foot { max-width: 1160px; margin: 0 auto; padding-left: clamp(16px, 5vw, 40px); padding-right: clamp(16px, 5vw, 40px); }

/* nav */
.lp-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 18px;
  padding-bottom: 18px;
}
.lp-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.lp-brand__mark {
  width: 16px;
  height: 18px;
  background: var(--accent);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.lp-nav__links {
  display: flex;
  gap: 22px;
  margin-left: auto;
  font-size: 14px;
  color: var(--ink-soft);
}
.lp-nav__links a:hover { color: var(--ink); }
.lp-nav .btn.primary { margin-left: 20px; }
.lp-nav__links + .btn.primary { margin-left: 20px; }

/* hero */
.lp-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding-top: clamp(36px, 7vw, 84px);
  padding-bottom: clamp(40px, 8vw, 88px);
}
.lp-eyebrow {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}
.lp-hero h1 {
  margin: 0 0 18px;
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.lp-lead {
  margin: 0 0 26px;
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 46ch;
}
.lp-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.lp-cta--center { justify-content: center; margin-top: 28px; }
.btn.primary.lp-big { font-size: 15px; font-weight: 600; padding: 13px 24px; border-radius: 10px; }
.lp-textlink {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.lp-textlink:hover { text-decoration: underline; }
.lp-note { margin: 16px 0 0; font-size: 12.5px; color: var(--ink-soft); }

.lp-hero__art { min-width: 0; }

/* framed "screenshot" window */
.lp-shot {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.5);
}
.lp-shot__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.lp-shot__bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line);
}
.lp-shot__bar span {
  margin-left: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
.lp-shot__body { padding: 14px; }

.lp-shot__tools {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.lp-shot__search {
  flex: 1 1 140px;
  min-width: 0;
  font-size: 11px;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-shot__chip {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 4px 9px;
}
.lp-shot__chip--on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* mini honeycomb */
.lp-comb2 { --w: clamp(38px, 5.4vw, 52px); overflow: hidden; }
.lp-comb2__row {
  display: flex;
  gap: 2px;
  margin-bottom: calc(var(--w) * -0.3);
}
.lp-comb2__row.is-odd { margin-left: calc(var(--w) / 2 + 1px); }
.lp-comb2__row:last-child { margin-bottom: 0; }
.lp-hex2 {
  position: relative;
  flex: 0 0 var(--w);
  width: var(--w);
  aspect-ratio: 1 / 1.1547;
  background: var(--c);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
}
.lp-hex2.is-missing { opacity: 0.5; }
.lp-hex2__n {
  font-size: 7px;
  line-height: 1.15;
  font-weight: 600;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.lp-hex2__b {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 12px;
  height: 12px;
  padding: 0 3px;
  border-radius: 99px;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  background: #2e7d32;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-hex2__b--low { background: #d98a1f; }
.lp-hex2__b--empty { background: #6b6b70; }
.lp-hex2__b--wishlist { background: var(--accent); }

/* "closer look" section */
.lp-look { display: grid; grid-template-columns: 1fr 380px; gap: clamp(24px, 5vw, 56px); align-items: center; }
.lp-look--rev { grid-template-columns: 380px 1fr; }
.lp-look__copy h2 { margin-top: 0; }
.lp-shot--card { max-width: 380px; }

.lp-dcard { }
.lp-dcard__swatch { height: 68px; border-radius: 8px; border: 1px solid var(--line); margin-bottom: 12px; }
.lp-dcard h3 { margin: 0 0 3px; font-size: 16px; }
.lp-dcard__meta { margin: 0 0 14px; font-size: 11.5px; color: var(--ink-soft); }
.lp-tri { margin-bottom: 14px; }
.lp-tri__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  color: var(--ink-soft);
  margin-bottom: 5px;
}
.lp-tri__head b { color: var(--accent); font-weight: 700; }
.lp-tri__strip { display: flex; gap: 3px; }
.lp-tri__cell {
  flex: 1 1 0;
  height: 26px;
  border-radius: 5px;
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.lp-tri__cell[data-cur] { outline-color: var(--ink); }
.lp-dminis { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.lp-dminis__l { font-size: 11px; color: var(--ink-soft); }
.lp-dminis__b {
  font-size: 10.5px;
  font-weight: 600;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 3px 9px;
}
.lp-dstatus { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; margin-bottom: 12px; }
.lp-dstatus__b {
  font-size: 11px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 6px;
  color: var(--ink-soft);
}
.lp-dstatus__b.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.lp-dnotes {
  font-size: 11.5px;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 10px;
}

/* miniature detail panel */
.lp-mini__img {
  display: block;
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--line);
  margin-bottom: 12px;
}
.lp-mini__name { font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.lp-mini__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.lp-mini__tags span {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 3px 10px;
}
.lp-mini__paints { display: flex; flex-direction: column; gap: 7px; }
.lp-mrow { display: flex; align-items: center; gap: 9px; }
.lp-mrow__sw {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 1px solid var(--line);
}
.lp-mrow__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.lp-mrow__info b { font-size: 12px; }
.lp-mrow__info span { font-size: 10px; color: var(--ink-soft); }
.lp-mrow__area {
  flex: 0 0 auto;
  max-width: 40%;
  font-size: 10px;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 8px;
  text-align: center;
}
.lp-mini__notes {
  margin-top: 12px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
}

/* painting recipe panel */
.lp-rsteps { display: flex; flex-direction: column; gap: 8px; }
.lp-rstep {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  padding: 8px 9px;
}
.lp-rstep__head { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.lp-rstep__n {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-rstep__tech { font-size: 10px; color: var(--ink-soft); }
.lp-rstep__body { margin: 0 0 6px; font-size: 11px; line-height: 1.4; }
.lp-rchips { display: flex; flex-wrap: wrap; gap: 5px; }
.lp-rchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  padding: 2px 8px 2px 5px;
  border: 1px solid var(--line);
  border-radius: 99px;
}
.lp-rchip i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }

@media (max-width: 860px) {
  .lp-look { grid-template-columns: 1fr; }
  .lp-shot--card, .lp-look .lp-shot { max-width: 420px; }
}

/* sections */
.lp-section { padding-top: clamp(40px, 7vw, 72px); padding-bottom: clamp(40px, 7vw, 72px); }
.lp-section > h2 {
  margin: 0 0 8px;
  font-size: clamp(21px, 2.6vw, 28px);
  letter-spacing: -0.015em;
}
.lp-sub { margin: 0 0 22px; color: var(--ink-soft); font-size: 15px; }
.lp-section > h2 + .lp-grid,
.lp-section > h2 + .lp-steps__list { margin-top: 26px; }

.lp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.lp-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 20px 18px;
}
.lp-card h3 { margin: 0 0 8px; font-size: 16px; letter-spacing: -0.01em; }
.lp-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }

/* steps */
.lp-steps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.lp-steps__list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
}
.lp-step__n {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  background: var(--accent);
  color: #fff;
}
.lp-steps__list h3 { margin: 2px 0 4px; font-size: 15px; }
.lp-steps__list p { margin: 0; font-size: 14px; color: var(--ink-soft); }

/* ranges */
.lp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-chips span {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 7px 14px;
}

/* database stats */
.lp-count {
  font-size: 15px;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.lp-count b {
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
}
.lp-bar {
  display: flex;
  height: 16px;
  border-radius: 99px;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
}
.lp-bar__seg {
  width: 0;
  background: var(--col);
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.lp-bar__seg + .lp-bar__seg { box-shadow: -1px 0 0 rgba(0, 0, 0, 0.25); }
.lp-bar.is-in .lp-bar__seg { width: var(--pct); }
.lp-brandlist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 16px;
}
.lp-brandlist__b {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--ink-soft);
}
.lp-brandlist__b i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: 0 0 auto;
}
.lp-brandlist__b b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* footer */
.lp-foot {
  border-top: 1px solid var(--line);
  margin-top: 20px;
  padding-top: 26px;
  padding-bottom: 40px;
}
.lp-foot p { margin: 0 0 10px; font-size: 12px; line-height: 1.6; color: var(--ink-soft); max-width: 70ch; }

@media (max-width: 720px) {
  .lp-hero { grid-template-columns: 1fr; }
  .lp-hero__art { order: -1; }
  .lp-nav__links { display: none; }
  .lp-nav .btn.primary { margin-left: auto; }
}

/* ---- collection assistant --------------------------------------- */

.asst-fab {
  position: fixed;
  right: clamp(14px, 4vw, 32px);
  bottom: 22px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  color: #1c1006;
  font-size: 21px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  z-index: 40;
}
.asst-fab:hover { filter: brightness(1.06); }

.asst-panel {
  position: fixed;
  right: clamp(12px, 4vw, 28px);
  bottom: 88px;
  width: min(360px, calc(100vw - 24px));
  height: min(480px, calc(100vh - 120px));
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 40;
}

.asst-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.asst-head__icon { font-size: 16px; }
.asst-head__title { font-weight: 700; font-size: 14px; }
.asst-close {
  margin-left: auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-size: 15px;
  cursor: pointer;
}
.asst-close:hover { color: var(--ink); background: var(--bg); }

.asst-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.asst-msg {
  max-width: 84%;
  font-size: 13.5px;
  line-height: 1.45;
  padding: 8px 12px;
  border-radius: 14px;
}
.asst-msg--bot {
  align-self: flex-start;
  background: var(--bg);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}
.asst-msg--me {
  align-self: flex-end;
  background: var(--accent);
  color: #1c1006;
  border-bottom-right-radius: 4px;
  font-weight: 500;
}
.asst-msg--thinking { color: var(--ink-soft); font-style: italic; }
.asst-msg--bot p { margin: 0 0 8px; }
.asst-msg--bot p:last-child { margin-bottom: 0; }
.asst-msg--bot ul { margin: 0 0 8px; padding-left: 18px; }
.asst-msg--bot ul:last-child { margin-bottom: 0; }
.asst-msg--bot li { margin-bottom: 3px; }
.asst-msg--bot li:last-child { margin-bottom: 0; }
.asst-paint-link {
  font: inherit;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: 0;
  border-bottom: 1px dashed var(--accent);
  padding: 0;
  cursor: pointer;
}
.asst-paint-link:hover { border-bottom-style: solid; }

.asst-actions {
  align-self: flex-start;
  max-width: 92%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.asst-actions__row { line-height: 1.4; }
.asst-actions__btns { display: flex; gap: 8px; margin-top: 4px; }
.asst-actions__btn {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink-soft);
  cursor: pointer;
}
.asst-actions__btn:hover { color: var(--ink); }
.asst-actions__btn--go {
  background: var(--accent);
  border-color: var(--accent);
  color: #1c1006;
}
.asst-actions__btn--go:hover { color: #1c1006; filter: brightness(1.06); }

.asst-inputrow {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--line);
  flex: 0 0 auto;
}
.asst-inputrow input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 8px 13px;
}
.asst-inputrow input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.asst-send {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  color: #1c1006;
  font-size: 14px;
  cursor: pointer;
  flex: none;
}
.asst-send:disabled { opacity: 0.5; cursor: default; }

@media (max-width: 520px) {
  .asst-panel { right: 6px; left: 6px; width: auto; bottom: 78px; }
  .asst-fab { right: 12px; }
}

/* ------------------------------------------------------------------ *
 *  Painting mode — full-screen, one recipe step per screen (phone-first)
 * ------------------------------------------------------------------ */
body.pm-lock { overflow: hidden; }

#paintMode {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  /* respect notches / home indicators on phones */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#paintMode[hidden] { display: none; }

.pm-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.pm-x {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-size: 15px;
  cursor: pointer;
}
.pm-title {
  flex: 1;
  min-width: 0;
  font-weight: 650;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pm-count {
  flex: none;
  font-size: 13px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
#pmRestart {
  flex: none;
  font-size: 18px;
  line-height: 1;
  color: var(--ink-soft);
}
#pmRestart:hover { color: var(--ink); }

.pm-prog { height: 3px; background: var(--line); }
.pm-prog > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.25s ease;
}

.pm-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.pm-step {
  max-width: 640px;
  margin: 0 auto;
  padding: 18px 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pm-stepnum {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}
.pm-stepnum span { color: var(--ink-soft); font-weight: 500; }

.pm-tech {
  font: inherit;
  font-size: 19px;
  font-weight: 650;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 4px 2px 8px;
}
.pm-tech:focus { outline: none; border-bottom-color: var(--accent); }

/* editable body with a highlight backdrop: a coloured div sits behind a
   transparent-text textarea so @-tagged paint names glow in their own hue
   (same trick as the recipe editor, bigger type for the bench). */
.pm-bodywrap { position: relative; }
.pm-body-hl,
.pm-body {
  width: 100%;
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
  box-sizing: border-box;
}
.pm-body-hl {
  position: absolute;
  inset: 0;
  margin: 0;
  pointer-events: none;
  overflow: hidden;
  color: var(--ink);
  background: var(--panel);
  border-color: var(--line);
}
.pm-body {
  position: relative;
  display: block;
  min-height: 120px;
  resize: vertical;
  background: transparent;
  color: transparent;
  caret-color: var(--ink);
}
.pm-body::placeholder { color: var(--ink-soft); opacity: 1; }
.pm-body:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.pm-photo {
  display: block;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 0;
  position: relative;
}
.pm-photo img { display: block; width: 100%; height: auto; }
.pm-photo__btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 13px;
  padding: 6px 12px;
}
.pm-photo--empty {
  min-height: 96px;
  color: var(--ink-soft);
  font-size: 15px;
  cursor: pointer;
  border-style: dashed;
}
.pm-photo--empty:hover { color: var(--ink); border-color: var(--accent); }

.pm-paints {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pm-paint {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px 7px 8px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  max-width: 100%;
}
.pm-paint__sw {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.25);
}
.pm-paint__t {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  overflow: hidden;
}
.pm-paint__t b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-paint__t span { color: var(--ink-soft); font-size: 11.5px; }
.pm-paint__x {
  flex: none;
  color: var(--ink-soft);
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 50%;
}
.pm-paint__x:hover { color: var(--ink); background: var(--line); }
.pm-paint--add { color: var(--ink-soft); border-style: dashed; }
.pm-paint--add:hover { color: var(--ink); border-color: var(--accent); }

.pm-donerow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.pm-donerow input { width: 18px; height: 18px; accent-color: var(--accent); }

.pm-empty { text-align: center; color: var(--ink-soft); padding: 40px 0; line-height: 2; }

.pm-nav {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.pm-navbtn {
  flex: 1;
  padding: 14px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.pm-navbtn:disabled { opacity: 0.4; cursor: default; }
.pm-navbtn--next { background: var(--accent); color: #1c1006; border-color: transparent; flex: 1.3; }
.pm-navbtn--done[aria-pressed="true"] {
  background: #2e7d32;
  color: #fff;
  border-color: transparent;
}

.pm-pick {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.4);
}
.pm-pick > input {
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 10px 14px;
}
.pm-pick > input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.pm-pick__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pm-pickrow {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 8px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  border-radius: 8px;
  cursor: pointer;
}
.pm-pickrow:hover { background: var(--bg); }
.pm-pick__list .empty-note { color: var(--ink-soft); font-size: 13px; padding: 14px 8px; }