/* ===========================================================================
   shelves.css — the Shelves page, one shelf's page around its cabinet, the
   grid of kits, the kit sheet and the shelf dialogs (shelves.js,
   shelf-grid.js, kit-sheet.js). The cabinet itself is cabinet.css; the kit
   form is kit-form.css.

   Built on design.css (tokens, buttons, chips, skeletons, motion levels) and
   on shell.css's library pieces (the hero, the summary strip, the toolbar,
   panels and menus), which these pages reuse as they are, so the Shelves
   page reads as the Binders page's sibling. Prefixes: .shv-* (pages and
   dialogs), .kit-grid-* (the grid), .kit-sheet-* / .kit-sheet-move-* (the sheet).
   =========================================================================== */

/* =================================================================== view */
.view-shelves {
  height: calc(100vh - 52px - var(--pfbar-h, 0px));
  height: calc(100dvh - 52px - var(--pfbar-h, 0px));
  overflow-y: auto; overflow-x: hidden;
  /* a warm glow from above, as if the cabinets were lit */
  background:
    radial-gradient(1100px 360px at 50% -150px, color-mix(in srgb, var(--gold) 8%, transparent), transparent 70%),
    var(--bg);
}
/* Phones: the bottom bar covers the end of the page otherwise. */
body.has-bottomnav .view-shelves { padding-bottom: var(--bottomnav-h, 0px); scroll-padding-bottom: var(--bottomnav-h, 0px); }

.shv-view { position: relative; }

/* ============================================================ mini cabinet
   A shelf's front, small (shelves.js miniCabinet): the frame in its material,
   the back panel lit from an LED strip along the top, two glass shelves with
   up to five kits. Materials are custom properties, set per data-frame, so
   the frame swatches in the dialogs are the same wood and metal. */
:is(.shv-mini, .shv-frame-dot) {
  --fa: #6e4629; --fb: #3b2415;                /* the board, lit side to shaded side */
  --fgrain: rgba(24, 10, 2, .28);              /* the grain lines */
  --fangle: 92deg;                              /* wood grain runs up; brushed metal across */
  --fhi: rgba(255, 222, 186, .2);              /* the top-left wash */
}
:is(.shv-mini, .shv-frame-dot)[data-frame="oak"] { --fa: #d2a56b; --fb: #9c6d3a; --fgrain: rgba(96, 54, 14, .2); --fhi: rgba(255, 246, 222, .34); }
:is(.shv-mini, .shv-frame-dot)[data-frame="ebony"] { --fa: #2d2724; --fb: #0f0d0c; --fgrain: rgba(255, 255, 255, .035); --fhi: rgba(255, 255, 255, .16); }
:is(.shv-mini, .shv-frame-dot)[data-frame="white"] { --fa: #f7f5f1; --fb: #d8d3cb; --fgrain: transparent; --fhi: rgba(255, 255, 255, .8); }
:is(.shv-mini, .shv-frame-dot)[data-frame="aluminium"] { --fa: #dde1e5; --fb: #969da6; --fgrain: rgba(255, 255, 255, .28); --fangle: 0deg; --fhi: rgba(255, 255, 255, .55); }
:is(.shv-mini, .shv-frame-dot)[data-frame="gunmetal"] { --fa: #5d636b; --fb: #2a2e34; --fgrain: rgba(255, 255, 255, .07); --fangle: 0deg; --fhi: rgba(255, 255, 255, .22); }

.shv-mini {
  --back: #12151c;
  --light: #ffd9a0;
  --glow: .5;
  position: relative;
  height: 100%; max-width: 100%; min-height: 0;
  aspect-ratio: .8;
}
.shv-mini[data-back="felt"] { --back: #1d2826; }
.shv-mini[data-back="mirror"] { --back: linear-gradient(155deg, #3b4251, #151920 42%, #2c3241 70%, #11141a); }
.shv-mini[data-back="light"] { --back: #e7e3db; }
.shv-mini[data-back="color"] { --back: var(--mini-back-color, #1f2633); }
.shv-mini[data-light="cool"] { --light: #d4ebff; }
.shv-mini[data-light="accent"] { --light: var(--accent); }
.shv-mini[data-light="color"] { --light: var(--mini-light-color, #ffd9a0); }
.shv-mini[data-light="off"] { --glow: 0; }

/* Out of the flow, so its size is the tile's to give and never its photos' to take. */
.shv-mini-frame {
  position: absolute; inset: 0; display: flex;
  padding: 9% 8.5% 8.5%;
  border-radius: 7px;
  background:
    linear-gradient(135deg, var(--fhi), transparent 42%),
    repeating-linear-gradient(var(--fangle), transparent 0 3px, var(--fgrain) 3px 4px, transparent 4px 9px),
    linear-gradient(180deg, var(--fa), var(--fb));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -2px 3px rgba(0, 0, 0, .35),
    0 16px 26px -14px rgba(0, 0, 0, .8), 0 3px 8px rgba(0, 0, 0, .3);
}
:root[data-theme="light"] .shv-mini-frame {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -2px 3px rgba(0, 0, 0, .2),
    0 14px 24px -14px rgba(20, 24, 32, .5), 0 2px 6px rgba(20, 24, 32, .16);
}
/* the LED strip along the top of the back */
.shv-mini-led {
  position: absolute; z-index: 2; top: 9%; left: 12%; right: 12%; height: 2px; border-radius: 2px;
  background: var(--light);
  opacity: var(--glow);
  box-shadow: 0 0 6px 1px color-mix(in srgb, var(--light) 80%, transparent), 0 0 18px 4px color-mix(in srgb, var(--light) 35%, transparent);
}
.shv-mini-inner {
  position: relative; flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  border-radius: 2px; overflow: hidden;
  background: var(--back);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55), inset 0 8px 14px rgba(0, 0, 0, .45);
}
/* the light falling from the strip into the cabinet */
.shv-mini-inner::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 55% at 50% 0%, color-mix(in srgb, var(--light) 42%, transparent), transparent 72%);
  opacity: var(--glow);
}
.shv-mini-row {
  position: relative; z-index: 1; flex: 1; min-height: 0;
  display: flex; align-items: flex-end; justify-content: center; gap: 7%;
  padding: 0 8% 4px;
}
/* a glass shelf: a greenish front edge, a highlight, and its shadow */
.shv-mini-row::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(180deg, rgba(214, 245, 236, .55), rgba(120, 176, 164, .32) 55%, rgba(60, 96, 90, .5));
  box-shadow: 0 3px 5px rgba(0, 0, 0, .45);
}
.shv-mini[data-shelf="wood"] .shv-mini-row::after { background: linear-gradient(180deg, var(--fa), var(--fb)); }
.shv-mini[data-shelf="metal"] .shv-mini-row::after { background: linear-gradient(180deg, #e3e7ec, #8e959e); }
.shv-mini-kit {
  display: block; flex: none; min-width: 0;
  height: 74%; aspect-ratio: 3 / 4; max-width: 30%;
  object-fit: cover; border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 3px 6px rgba(0, 0, 0, .55);
}
.shv-mini-kit.is-cutout {
  aspect-ratio: auto; width: auto; max-width: 34%; object-fit: contain;
  border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .6));
}
/* made-up things of one kind (the New shelf dialog's picture): a kit's box, a
   figure (the cabinet's own silhouette), a window box or a blister card, a
   game's case, a console, its box, a handheld — each in the colour the
   cabinet would draw it in */
.shv-mini-ph {
  --t: var(--tone, #8b95a7);
  display: block; flex: none; min-width: 0;
  height: 72%; aspect-ratio: .78; max-width: 34%;
  border-radius: 2px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--t) 72%, #fff), var(--t) 45%, color-mix(in srgb, var(--t) 45%, #000));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 3px 6px rgba(0, 0, 0, .5);
}
.shv-mini-ph[data-kind="figure"] {
  aspect-ratio: .56; border-radius: 0; box-shadow: none;
  -webkit-mask: var(--cab-sil) 50% 100% / contain no-repeat;
  mask: var(--cab-sil) 50% 100% / contain no-repeat;
  background: linear-gradient(90deg, color-mix(in srgb, var(--t) 58%, #fff), var(--t) 36%, color-mix(in srgb, var(--t) 42%, #000));
}
.shv-mini-ph[data-kind="box"] {
  aspect-ratio: .74;
  background:
    linear-gradient(#0d0f14, #0d0f14) 40% 58% / 64% 56% no-repeat,
    linear-gradient(160deg, color-mix(in srgb, var(--t) 72%, #fff), var(--t) 45%, color-mix(in srgb, var(--t) 45%, #000));
}
.shv-mini-ph[data-kind="card"] {
  height: 58%; aspect-ratio: .66;
  background:
    radial-gradient(40% 36% at 50% 58%, rgba(255, 255, 255, .45), rgba(255, 255, 255, .12) 70%, rgba(255, 255, 255, 0) 72%),
    linear-gradient(160deg, color-mix(in srgb, var(--t) 72%, #fff), var(--t) 45%, color-mix(in srgb, var(--t) 45%, #000));
}
.shv-mini-ph[data-kind="case"] { aspect-ratio: .71; outline: 1.5px solid #15171c; outline-offset: -1.5px; }
.shv-mini-ph:is([data-kind="unit"], [data-kind="console"]) { height: 42%; aspect-ratio: 1.55; max-width: 44%; }
.shv-mini-ph[data-kind="unit"] {
  background:
    linear-gradient(var(--t), var(--t)) 0 36% / 100% 6% no-repeat,
    linear-gradient(180deg, #5a5f69 0 36%, #2a2d33 36%, #15171b);
}
.shv-mini-ph[data-kind="console"] { height: 60%; aspect-ratio: 1.3; }
.shv-mini-ph[data-kind="handheld"] {
  height: 58%; aspect-ratio: .6; border-radius: 3px 3px 7px 3px;
  background:
    linear-gradient(#1b2a1f, #1b2a1f) 50% 18% / 74% 38% no-repeat,
    linear-gradient(160deg, color-mix(in srgb, var(--t) 72%, #fff), var(--t) 45%, color-mix(in srgb, var(--t) 45%, #000));
}

/* a frame swatch (the New shelf dialog, the Add-to menu) */
.shv-frame-dot {
  display: inline-block; flex: none; width: 16px; height: 16px; border-radius: 4px;
  background:
    linear-gradient(135deg, var(--fhi), transparent 50%),
    repeating-linear-gradient(var(--fangle), transparent 0 2px, var(--fgrain) 2px 3px, transparent 3px 5px),
    linear-gradient(180deg, var(--fa), var(--fb));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .3);
}

/* ================================================================== list */
.shv-hero .view-lede { max-width: 560px; }
.shv-body { position: relative; }

.shv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 20px 18px; }
.shv-grid-cell { display: flex; min-width: 0; }

.shv-tile {
  position: relative; flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  padding: 11px 11px 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 4%, var(--bg-2)), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-edge), var(--shadow-1);
  transition: transform var(--t-2) var(--ease-out), box-shadow var(--t-2) var(--ease-out), border-color var(--t-2) var(--ease-out);
}
.shv-tile:hover,
.shv-tile:focus-within {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--ink) 16%, var(--line));
  box-shadow: var(--glass-edge), var(--shadow-2);
}
.shv-tile.is-fresh { animation: shv-in var(--t-3) var(--ease-out) both; }
@keyframes shv-in { from { opacity: 0; transform: translateY(10px); } }

.shv-tile-art {
  position: relative; aspect-ratio: 1.12;
  display: grid; place-items: center;
  padding: 16px 12px 12px;
  border-radius: var(--radius);
  background:
    radial-gradient(80% 70% at 50% 18%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 70%),
    color-mix(in srgb, var(--bg) 55%, var(--bg-2));
  box-shadow: inset 0 0 0 1px var(--line-soft);
  overflow: hidden;
}
/* the cabinet leans a little under the pointer (motion.tilt; Full motion only) */
.shv-tile .shv-mini {
  transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--tilt-scale, 1));
  transition: transform var(--t-3) var(--ease-spring);
}
.shv-tile.is-tilting .shv-mini { transition: none; }

.shv-tile-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; padding: 11px 4px 2px; }
.shv-tile-name { margin: 0; font-size: 14.5px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.3; min-width: 0; }
.shv-tile-link { display: block; color: var(--ink); text-decoration: none; outline: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the name is the tile's link, stretched over all of it */
.shv-tile-link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--radius-lg); }
.shv-tile-link:focus-visible::after { box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent); }
.shv-tile-meta { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shv-tile-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; min-width: 0; }
.shv-tile-updated { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }

.shv-tile-more {
  position: absolute; top: 18px; right: 18px; z-index: 3;
  width: 32px; height: 32px; padding: 0; display: grid; place-items: center;
  border: none; border-radius: var(--radius-sm); cursor: pointer;
  background: rgba(8, 10, 14, .72); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  opacity: 0; transform: translateY(-4px);
  transition: opacity var(--t-1) var(--ease-out), transform var(--t-1) var(--ease-out), background var(--t-1) var(--ease-out);
}
.shv-tile:hover .shv-tile-more,
.shv-tile:focus-within .shv-tile-more,
.shv-tile-more[aria-expanded="true"] { opacity: 1; transform: none; }
.shv-tile-more:hover { background: rgba(8, 10, 14, .94); }
.shv-tile-more:focus-visible { outline: 2px solid rgba(255, 255, 255, .92); outline-offset: 2px; }

/* loading */
.shv-tile.is-skeleton { pointer-events: none; box-shadow: none; border-style: dashed; }
.shv-tile.is-skeleton .shv-tile-art { box-shadow: none; }
.shv-tile.is-skeleton .skel-line { margin: 5px 0; }

/* no shelves yet: one empty cabinet, lit and waiting */
.shv-empty .shv-empty-art {
  height: 156px; margin: 0 auto 24px;
  filter: drop-shadow(0 18px 34px color-mix(in srgb, var(--gold) 16%, transparent));
}
.shv-empty-art .shv-mini-led { animation: shv-led 3.2s ease-in-out infinite; }
@keyframes shv-led { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
:root:not([data-motion="full"]) .shv-empty-art .shv-mini-led { animation: none; }

/* ======================================================== new-shelf dialog */
.modal.shv-new-modal { width: min(560px, 100%); }
.shv-new-body { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; align-items: start; }
.shv-new-preview {
  height: 168px; display: grid; place-items: center; padding: 10px;
  border-radius: var(--radius);
  background: radial-gradient(80% 70% at 50% 20%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 70%), var(--bg);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.shv-new-fields { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* What it holds: a tile for each kind, its outline picture lit in the accent when chosen */
.shv-kind-row { grid-column: 1 / -1; margin: 0; }
.shv-kind-row[hidden] { display: none; }
.shv-kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.shv-kind {
  position: relative; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 12px 6px 10px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--bg-3); color: var(--ink-2);
  text-align: center; cursor: pointer;
  box-shadow: var(--glass-edge);
  transition: border-color var(--t-1) var(--ease-out), background var(--t-1) var(--ease-out), color var(--t-1) var(--ease-out),
    transform var(--t-1) var(--ease-out), box-shadow var(--t-1) var(--ease-out);
}
.shv-kind[hidden] { display: none; }
.shv-kind:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 20%, var(--line)); transform: translateY(-1px); }
.shv-kind.is-on {
  color: var(--ink); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 11%, var(--bg-3));
  box-shadow: var(--glass-edge), 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 6px 18px -8px color-mix(in srgb, var(--accent) 60%, transparent);
}
.shv-kind:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.shv-kind-ico {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  color: var(--ink-2); line-height: 0;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  transition: color var(--t-1) var(--ease-out), background var(--t-1) var(--ease-out), box-shadow var(--t-1) var(--ease-out);
}
.shv-kind.is-on .shv-kind-ico {
  color: var(--accent-ink); background: var(--accent-fill);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent);
}
.shv-kind-name { font-size: 12.5px; font-weight: 650; line-height: 1.2; }
.shv-kind-blurb {
  font-size: 11px; line-height: 1.3; color: var(--ink-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
:root[data-motion="full"] .shv-kind.is-on .shv-kind-ico { animation: shv-kind-pop 320ms var(--ease-spring); }
@keyframes shv-kind-pop { 40% { transform: scale(1.12); } }
.shv-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 600; }

.shv-frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.shv-frame-opt {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  height: 36px; padding: 0 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--bg-3); color: var(--ink-2);
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: border-color var(--t-1) var(--ease-out), background var(--t-1) var(--ease-out), color var(--t-1) var(--ease-out);
}
.shv-frame-opt:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 20%, var(--line)); }
.shv-frame-opt.is-on { color: var(--ink); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg-3)); }
.shv-frame-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.shv-frame-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.shv-step { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; }
.shv-step-btn { font-size: 17px; font-weight: 600; }
.shv-step-value { min-width: 36px; text-align: center; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* the Add-to menu's frame swatches, and a menu's items on a phone */
.shv-menu .lib-menu-ico .shv-frame-dot { width: 13px; height: 13px; }
/* what each shelf holds, quietly, when the shelves hold several kinds */
.shv-menu .lib-menu-note { color: var(--ink-3); font-weight: 550; }

/* ================================================================= shelf */
.shv-shelf { position: relative; }
.shv-head { margin: 0 0 16px; }

.shv-crumbs { display: flex; align-items: center; gap: 4px; margin: -4px 0 4px; font-size: 12.5px; }
.shv-crumbs a {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 32px; padding: 0 8px; margin-left: -8px; border-radius: var(--radius-sm);
  color: var(--ink-2); text-decoration: none; font-weight: 600;
  transition: color var(--t-1) var(--ease-out), background var(--t-1) var(--ease-out);
}
.shv-crumbs a:hover { color: var(--ink); background: var(--bg-3); }
.shv-crumbs a .ico { display: none; }
.shv-crumb-sep { color: var(--ink-3); }

.shv-title { margin: 0; min-width: 0; }
.shv-name {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%;
  margin: 0 0 0 -8px; padding: 2px 8px; border: 0; border-radius: var(--radius-sm);
  background: none; color: inherit; font: inherit; letter-spacing: inherit; line-height: inherit; text-align: left;
  cursor: text;
  transition: background var(--t-1) var(--ease-out);
}
.shv-name:not(.is-static):hover { background: var(--bg-3); }
.shv-name.is-static { cursor: default; }
.shv-name-t { min-width: 0; overflow-wrap: anywhere; }
.shv-name .ico { flex: none; color: var(--ink-3); opacity: 0; transition: opacity var(--t-1) var(--ease-out); }
.shv-name:hover .ico, .shv-name:focus-visible .ico { opacity: 1; }
.shv-name-input {
  width: min(100%, 620px); height: auto; margin: 0 0 0 -9px; padding: 2px 8px;
  font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15;
}

.shv-totals { margin: 6px 0 14px; color: var(--ink-2); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.shv-total-main { color: var(--ink); font-weight: 650; }
.shv-dot { color: var(--ink-3); }

.shv-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  padding: 8px 9px; border-radius: var(--radius);
  border: 1px solid var(--line-soft); background: color-mix(in srgb, var(--bg-2) 60%, transparent);
}
.shv-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.shv-arrange.is-on {
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-3));
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

/* Cabinet | Grid */
.shv-seg {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--glass-edge);
}
.shv-seg-opt {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 12px; border-radius: 7px;
  font-size: 13px; font-weight: 550; color: var(--ink-2); cursor: pointer; white-space: nowrap;
  transition: background var(--t-1) var(--ease-out), color var(--t-1) var(--ease-out);
}
.shv-seg-opt:hover { color: var(--ink); background: var(--bg-3); }
.shv-seg-opt.is-on {
  color: var(--accent-ink); background: var(--accent-fill); font-weight: 650;
  box-shadow: 0 1px 8px color-mix(in srgb, var(--accent) 30%, transparent);
}
.shv-seg-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.shv-seg-opt .ico { display: grid; place-items: center; line-height: 0; }

.shv-stage { position: relative; margin-top: 18px; min-height: 200px; }

/* loading one shelf */
.shv-shelf.is-loading .shv-head { display: flex; flex-direction: column; gap: 10px; }
.shv-skel-title { height: 26px; width: min(360px, 70%); }
.shv-skel-cabinet { height: min(62vh, 560px); border-radius: var(--radius-lg); }

/* a shared shelf: whose it is, quietly, above the name */
.shv-shared-from {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 6px;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text);
}
/* its dot is the cabinet's frame, as the top bar's is (shelves.js showSharedShelf) */
.shv-shared-from::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--shv-frame, var(--accent));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 0 8px color-mix(in srgb, var(--shv-frame, var(--accent)) 70%, transparent);
}
.shv-shared .shv-bar { justify-content: flex-start; }

/* the share dialog's options, under the link */
.shv-share-opts { display: flex; flex-direction: column; gap: 14px; padding-top: 2px; }

/* ================================================================== grid */
.kit-grid { position: relative; }
.kit-grid-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px;
  margin: 0 0 12px; padding: 9px 10px; border-radius: var(--radius);
  border: 1px solid var(--line-soft); background: color-mix(in srgb, var(--bg-2) 60%, transparent);
}
.kit-grid-search { flex: 1 1 220px; max-width: 340px; }
.kit-grid-sort { margin-left: auto; }
/* the phone's Filters button (the filters fold away behind it there) */
.kit-grid-fbtn { display: none; }
.kit-grid-fbtn .ico { line-height: 0; }
.kit-grid-fcount {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill);
  display: inline-grid; place-items: center;
  font-size: 11px; font-weight: 750; font-variant-numeric: tabular-nums;
  color: var(--accent-ink); background: var(--accent-fill);
}
.kit-grid.is-filters-open .kit-grid-fbtn {
  color: var(--ink); background: color-mix(in srgb, var(--accent) 14%, var(--bg-3));
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

/* Owned · Wishlist · All — only once something is on the wishlist */
.kit-grid-show {
  display: none; gap: 2px; padding: 3px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--glass-edge);
}
.kit-grid.has-wanted .kit-grid-show { display: inline-flex; }
.kit-grid-show-opt {
  display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 7px;
  font-size: 12.5px; font-weight: 550; color: var(--ink-2); cursor: pointer; white-space: nowrap;
  transition: background var(--t-1) var(--ease-out), color var(--t-1) var(--ease-out);
}
.kit-grid-show-opt:hover { color: var(--ink); background: var(--bg-3); }
.kit-grid-show-opt.is-on { color: var(--accent-ink); background: var(--accent-fill); font-weight: 650; }
.kit-grid-show-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }

.kit-grid-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0 0 12px; }
.kit-grid-chips { display: flex; align-items: center; gap: 9px; min-width: 0; max-width: 100%; }
.kit-grid-flabel { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.kit-grid-chiprow { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
/* every chip carries its option's colour as a dot (a grade, a build status) */
.kit-grid-chip { --tone: var(--ink-3); }
.kit-grid-chip::before,
.kit-grid-chip[aria-pressed="true"]::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--tone); box-shadow: 0 0 0 1px rgba(0, 0, 0, .2);
}
.kit-grid-chip[aria-pressed="true"] {
  background: color-mix(in srgb, var(--tone) 18%, transparent);
  border-color: color-mix(in srgb, var(--tone) 65%, transparent);
}
.kit-grid-menu .input { max-width: 220px; }
.kit-grid-menu.is-on .input { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.kit-grid-clear { color: var(--accent-text); }

.kit-grid-count { margin: 0 0 12px; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.kit-grid-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px 14px; }
.kit-grid-cell { display: flex; min-width: 0; }
.kit-grid-tile {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  margin: 0; padding: 0; text-align: left; color: inherit; font: inherit;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--glass-edge), var(--shadow-1);
  overflow: hidden; cursor: pointer;
  transition: transform var(--t-2) var(--ease-out), box-shadow var(--t-2) var(--ease-out), border-color var(--t-2) var(--ease-out);
}
.kit-grid-tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--ink) 16%, var(--line)); box-shadow: var(--glass-edge), var(--shadow-2); }
.kit-grid-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.kit-grid-art {
  --tone: var(--ink-3);
  position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--pocket);
}
.kit-grid-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* a background-removed photo stands in a pool of light instead of filling the frame */
.kit-grid-art.is-cutout {
  background: radial-gradient(85% 70% at 50% 42%, color-mix(in srgb, var(--tone) 24%, #1b1f28), #0c0f14 78%);
}
.kit-grid-art.is-cutout img { object-fit: contain; padding: 9% 9% 12%; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .55)); }
/* a game's case or a console's box is shown whole, standing in a pool of its platform's colour */
.kit-grid-art.is-whole {
  background: radial-gradient(90% 75% at 50% 40%, color-mix(in srgb, var(--tone) 26%, #1b1f28), #0c0f14 80%);
}
.kit-grid-art.is-whole img {
  object-fit: contain; padding: 12% 11% 13%;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .6));
}
.kit-grid-ph {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 4px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--tone) 42%, #1b1f28), color-mix(in srgb, var(--tone) 10%, #0d1015));
  color: rgba(255, 255, 255, .78);
}
.kit-grid-ph .ico { line-height: 0; opacity: .8; }
.kit-grid-ph-t { font-size: 20px; font-weight: 750; letter-spacing: -0.02em; }

/* the badges over the photo */
.kit-grid-grade, .kit-grid-status, .kit-grid-wanted, .kit-grid-qty {
  position: absolute; z-index: 1;
  display: inline-flex; align-items: center; gap: 5px; max-width: calc(100% - 16px);
  height: 21px; padding: 0 8px; border-radius: var(--radius-pill);
  font-size: 10.5px; font-weight: 750; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #fff; background: rgba(8, 10, 14, .74);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.kit-grid-grade { top: 8px; left: 8px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 70%, transparent); }
.kit-grid-grade::before, .kit-grid-status::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--tone);
}
.kit-grid-status { --tone: var(--ink-3); left: 8px; bottom: 8px; font-weight: 650; }
/* still sealed: the badge catches the light, as the film does */
.kit-grid-status.is-sealed {
  background: linear-gradient(180deg, rgba(40, 34, 20, .88), rgba(8, 10, 14, .82));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.kit-grid-qty { right: 8px; bottom: 8px; }
.kit-grid-wanted {
  top: 8px; right: 8px; color: var(--gold);
  background: rgba(8, 10, 14, .78); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 60%, transparent);
  text-transform: uppercase; letter-spacing: .07em; font-size: 9.5px;
}

.kit-grid-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 9px 10px 10px; }
.kit-grid-name {
  font-size: 13.5px; font-weight: 650; line-height: 1.3; letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}
.kit-grid-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.kit-grid-sub { min-width: 0; font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-grid-value { flex: none; font-size: 13px; font-weight: 700; color: var(--gold-text); font-variant-numeric: tabular-nums; }
.kit-grid-value.is-wanted { color: var(--ink-3); font-weight: 600; }
.kit-grid-value.is-masked { color: var(--ink-3); letter-spacing: .08em; }

/* a wanted kit is a ghost of itself until it is got */
.kit-grid-tile.is-wanted { border-style: dashed; background: color-mix(in srgb, var(--bg-2) 70%, transparent); }
.kit-grid-tile.is-wanted .kit-grid-art img,
.kit-grid-tile.is-wanted .kit-grid-ph { filter: grayscale(.75); opacity: .62; }
.kit-grid-tile.is-wanted .kit-grid-name { color: var(--ink-2); }

.kit-grid-empty {
  padding: 40px 24px; text-align: center;
  border: 1px dashed var(--line); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg-2) 55%, transparent);
}
.kit-grid-empty h2 { margin: 0 0 6px; font-size: var(--fs-h2); font-weight: 650; }
.kit-grid-empty p { margin: 0 auto; max-width: 440px; color: var(--ink-2); font-size: 13.5px; }
.kit-grid-empty-art { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: var(--bg-3); color: var(--ink-3); box-shadow: var(--glass-edge), inset 0 0 0 1px var(--line-soft); }
.kit-grid-empty-art .ico { line-height: 0; }
.kit-grid-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }

/* ============================================================= kit sheet */
.modal.kit-sheet-modal {
  width: min(940px, 100%); height: min(640px, 88vh); max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.kit-sheet {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
}

.kit-sheet-media {
  --tone: var(--ink-3);
  position: relative; min-height: 0; overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 35%, color-mix(in srgb, var(--tone) 10%, #1a1e27), #090b0f 80%);
  border-right: 1px solid var(--line);
}
.kit-sheet-track {
  height: 100%; display: flex;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.kit-sheet-track::-webkit-scrollbar { display: none; }
.kit-sheet-track:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.kit-sheet-slide {
  flex: 0 0 100%; min-width: 0; height: 100%; margin: 0;
  /* One cell the slide's own size, so a tall photo's max-height: 100% means
     the slide's height (an auto row grew to the photo, and cut its foot off). */
  display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; padding: 18px 18px 40px;
  scroll-snap-align: center; scroll-snap-stop: always;
}
.kit-sheet-slide img {
  display: block; max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; border-radius: 6px;
  background-size: cover; background-position: center;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.kit-sheet-slide.is-cutout img { border-radius: 0; box-shadow: none; background: none; filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .6)); }

.kit-sheet-nav {
  position: absolute; top: 50%; z-index: 2; translate: 0 -50%;
  width: 38px; height: 38px; padding: 0; display: grid; place-items: center;
  border: none; border-radius: 50%; cursor: pointer;
  color: #fff; background: rgba(8, 10, 14, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  transition: background var(--t-1) var(--ease-out), opacity var(--t-1) var(--ease-out);
}
.kit-sheet-nav:hover { background: rgba(8, 10, 14, .9); }
.kit-sheet-nav:disabled { opacity: 0; pointer-events: none; }
.kit-sheet-nav:focus-visible { outline: 2px solid rgba(255, 255, 255, .92); outline-offset: 2px; }
.kit-sheet-nav.is-prev { left: 10px; }
.kit-sheet-nav.is-next { right: 10px; }
.kit-sheet-nav .ico { line-height: 0; }
.kit-sheet-count {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: 2px 9px; border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums;
  color: #fff; background: rgba(8, 10, 14, .6);
}
.kit-sheet-dots { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 2; display: flex; justify-content: center; gap: 2px; }
.kit-sheet-dot {
  width: 22px; height: 22px; padding: 0; border: none; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.kit-sheet-dot::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255, 255, 255, .4); transition: background var(--t-1) var(--ease-out), transform var(--t-1) var(--ease-out);
}
.kit-sheet-dot[aria-current]::before { background: #fff; transform: scale(1.25); }
.kit-sheet-dot:focus-visible { outline: 2px solid rgba(255, 255, 255, .92); outline-offset: -2px; border-radius: 50%; }

.kit-sheet-media.is-empty { display: grid; place-items: center; }
.kit-sheet-ph {
  display: grid; justify-items: center; gap: 6px; padding: 30px;
  color: color-mix(in srgb, var(--tone) 70%, #fff);
}
.kit-sheet-ph .ico { line-height: 0; opacity: .8; }
.kit-sheet-ph span { font-size: 26px; font-weight: 750; letter-spacing: -0.02em; }
.kit-sheet-ph small { font-size: 12px; color: rgba(255, 255, 255, .55); }
.kit-sheet.is-wanted .kit-sheet-slide img { filter: grayscale(.5); }

.kit-sheet-info {
  min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 16px;
  padding: 20px 22px 20px;
}
.kit-sheet-head { padding-right: 44px; }
.kit-sheet-wanted {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px;
  height: 22px; padding: 0 10px; border-radius: var(--radius-pill);
  font-size: 10.5px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase;
  color: var(--gold-text); background: color-mix(in srgb, var(--gold) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 50%, transparent);
}
.kit-sheet-title { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; overflow-wrap: anywhere; }
.kit-sheet-title:focus { outline: none; }
.kit-sheet-line { margin: 5px 0 0; color: var(--ink-2); font-size: 13px; }

.kit-sheet-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kit-sheet-chip {
  --tone: var(--ink-3);
  display: inline-flex; align-items: center; gap: 6px;
  height: 27px; padding: 0 11px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700; color: var(--ink);
  background: color-mix(in srgb, var(--tone) 15%, var(--bg-3));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 50%, transparent);
}
.kit-sheet-chip-k { font-weight: 550; color: var(--ink-2); }

.kit-sheet-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.kit-sheet-fact {
  min-width: 0; padding: 9px 12px 10px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-3) 70%, transparent); box-shadow: inset 0 0 0 1px var(--line-soft);
}
.kit-sheet-fact dt { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.kit-sheet-fact dd { margin: 3px 0 0; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kit-sheet-fact-v { font-size: 14.5px; font-weight: 650; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.kit-sheet-fact-sub { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.kit-sheet-fact.is-money .kit-sheet-fact-v { color: var(--gold-text); font-size: 16px; font-weight: 750; letter-spacing: -0.01em; }
.kit-sheet-fact.is-hidden .kit-sheet-fact-v,
.kit-sheet-fact.is-muted .kit-sheet-fact-v { color: var(--ink-3); font-size: 14px; font-weight: 600; }

.kit-sheet-notes h3 { margin: 0 0 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.kit-sheet-notes p { margin: 0; font-size: 13.5px; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }

.kit-sheet-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.kit-sheet-actions .btn .ico { line-height: 0; }

/* Move to shelf… */
.kit-sheet-move-list { display: flex; flex-direction: column; gap: 4px; max-height: 46vh; overflow-y: auto; }
.kit-sheet-move-opt {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 12px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid var(--line-soft); background: color-mix(in srgb, var(--bg-3) 60%, transparent);
}
.kit-sheet-move-opt:hover { border-color: var(--line); background: var(--bg-3); }
.kit-sheet-move-opt:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg-3)); }
.kit-sheet-move-opt input { accent-color: var(--accent); margin: 0; }
.kit-sheet-move-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.kit-sheet-move-sub { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* =============================================================== touch */
/* Fingers: every control here is at least 44px, and no field is under 16px
   (below that iOS zooms the page in when one is focused). */
@media (pointer: coarse) {
  .shv-bar .btn, .shv-toolbar .btn, .shv-view .lib-panel .btn,
  .kit-grid-toolbar .input, .kit-grid-menu .input, .kit-grid-clear,
  .kit-sheet-actions .btn, .shv-new .btn, .shv-share .btn, .kit-sheet-move .btn, .kit-grid-fbtn { min-height: 44px; }
  .shv-bar .btn-icon { min-width: 44px; }
  .shv-seg { padding: 2px; }
  .shv-seg-opt { height: 44px; min-width: 48px; justify-content: center; }
  .kit-grid-show { padding: 2px; }
  .kit-grid-show-opt { height: 44px; }
  .kit-grid-chip { height: 44px; padding: 0 14px; }
  .shv-tile-more { width: 44px; height: 44px; top: 14px; right: 14px; }
  .kit-sheet-nav { width: 44px; height: 44px; }
  .kit-sheet-dot { width: 26px; height: 30px; }
  .shv-frame-opt { height: 44px; }
  .shv-crumbs a { min-height: 44px; }
  .shv-name:not(.is-static) { min-height: 44px; }
  .shv-view .input, .kit-grid .input, .shv-new .input, .shv-share .input, .shv-name-input { font-size: 16px; }
  /* As big as the name it replaces (the line above, being more particular, had it down at 16px). */
  .shv-view .shv-name-input { font-size: 22px; min-height: 44px; }
}
@media (hover: none) {
  .shv-tile-more { opacity: 1; transform: none; }
  /* Always there on a touch screen, so in the tile's own colours rather than a dark block (light theme). */
  .shv-tile-more { background: var(--bg-3); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
  .shv-name .ico { opacity: .7; }
}

/* ========================================================== responsive */
@media (max-width: 980px) {
  /* The bottom bar's middle button adds a kit here (shelves.js shelfAction). */
  body.has-bottomnav:not(.is-signin, .is-landing, .is-shared) .shv-add { display: none; }
}

@media (max-width: 800px) {
  .kit-sheet { grid-template-columns: minmax(0, 1fr); overflow-y: auto; overscroll-behavior: contain; }
  .kit-sheet-media { height: min(52vh, 420px); border-right: none; border-bottom: 1px solid var(--line); }
  .kit-sheet-info { overflow: visible; }
  .modal.kit-sheet-modal { height: auto; }
}

@media (max-width: 640px) {
  .shv-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  /* a shelf's tile lies on its side: the cabinet beside its words */
  .shv-tile { flex-direction: row; align-items: stretch; gap: 12px; padding: 8px; }
  .shv-tile-art { flex: none; width: 116px; aspect-ratio: .92; padding: 10px 8px 8px; }
  .shv-tile-body { padding: 4px 44px 2px 0; justify-content: center; }
  .shv-tile-foot { margin-top: 4px; }
  .shv-tile-meta { white-space: normal; }
  .shv-tile-more { top: 8px; right: 8px; }

  .shv-crumbs a .ico { display: inline-grid; place-items: center; line-height: 0; }
  .shv-crumb-sep { display: none; }
  .shv-name-input { font-size: 22px; }
  .shv-totals { font-size: 13px; margin-bottom: 12px; }
  .shv-bar { padding: 6px; gap: 6px; }
  .shv-actions { gap: 6px; }
  /* the view switch as two icons, Appearance under ⋯ */
  .shv-seg-t {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .shv-seg-opt { padding: 0 11px; }
  .shv-look { display: none; }
  /* the cabinet goes nearly edge to edge */
  .shv-stage { margin-top: 14px; }
  .shv-stage[data-view="cabinet"] { margin-inline: -10px; }

  /* search; then Filters and Sort side by side; then Owned · Wishlist · All across */
  .kit-grid-toolbar { padding: 8px; gap: 8px; }
  .kit-grid-search { flex-basis: 100%; max-width: none; order: 0; }
  .kit-grid-fbtn { display: inline-flex; flex: none; order: 1; }
  .kit-grid-fbtn[hidden] { display: none; }
  .kit-grid-sort { order: 2; flex: 1 1 0; min-width: 0; margin-left: 0; }
  .kit-grid-sort > span { display: none; }
  .kit-grid-sort .input { width: 100%; min-width: 0; }
  .kit-grid.has-wanted .kit-grid-show { order: 3; flex-basis: 100%; }
  .kit-grid-show-opt { flex: 1; justify-content: center; }
  /* the filters, folded away until asked for; each row of chips scrolls sideways */
  .kit-grid:not(.is-filters-open) .kit-grid-filters { display: none; }
  .kit-grid-filters { gap: 8px; padding: 10px; border-radius: var(--radius); border: 1px solid var(--line-soft); background: color-mix(in srgb, var(--bg-2) 60%, transparent); }
  .kit-grid-chips { flex-basis: 100%; }
  .kit-grid-chiprow { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; padding: 2px 0; }
  .kit-grid-chiprow::-webkit-scrollbar { display: none; }
  .kit-grid-menu { flex: 1 1 140px; }
  .kit-grid-menu > span { display: none; }
  .kit-grid-menu .input { max-width: none; width: 100%; }

  .shv-new-body { grid-template-columns: minmax(0, 1fr); }
  .shv-new-preview { height: 132px; }
  .shv-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shv-kind { flex-direction: row; align-items: center; text-align: left; gap: 10px; padding: 9px 10px; }
  .shv-kind-ico { width: 36px; height: 36px; flex: none; }
  .shv-kind-blurb { display: none; }
  .shv-frames { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* the kit sheet rises from the bottom edge */
  .modal-root:has(> .kit-sheet-modal) { place-items: end stretch; padding: 0; }
  .modal.kit-sheet-modal {
    width: 100%; max-height: 94vh; max-height: 94dvh;
    border-radius: 18px 18px 0 0; border-bottom: none;
    animation-name: kit-sheet-up;
  }
  .kit-sheet-media { height: min(48vh, 380px); }
  .kit-sheet-info { padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px)); gap: 14px; }
  .kit-sheet-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kit-sheet-actions .btn { justify-content: center; }
  .kit-sheet-actions .btn-primary { grid-column: 1 / -1; }
}
@keyframes kit-sheet-up { from { transform: translateY(40px); opacity: 0; } }

/* A phone on its side: plenty of width, little height, and the top bar and the
   bottom bar take their share of it. The shelf's header folds into one row —
   the way back as an arrow, a smaller name, the totals (cut short when they
   must be), then the view switch and the actions as icons — so the cabinet
   starts near the top of the screen instead of three quarters of the way down. */
@media (orientation: landscape) and (max-height: 520px) {
  .shv-view.view-wrap { padding-top: 8px; }
  .shv-shelf .shv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin: 0 0 6px; }
  .shv-shelf .shv-crumbs { flex: none; margin: 0; }
  .shv-crumbs a { margin-left: -6px; padding: 0 6px; }
  .shv-crumbs a .ico { display: inline-grid; place-items: center; line-height: 0; }
  .shv-crumb-sep { display: none; }
  .shv-shared-from { margin: 0; }
  /* (the name's pull to the left is the title's here, so the row measures the name whole) */
  .shv-shelf .shv-title { flex: 0 1 auto; min-width: 0; margin-left: -8px; font-size: 19px; }
  .shv-shelf .shv-name { min-height: 0; margin-left: 0; }
  .shv-shelf .shv-name-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
  .shv-shelf .shv-totals { flex: 1 1 110px; min-width: 0; margin: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .shv-shelf .shv-bar { flex: none; margin-left: auto; padding: 0; gap: 6px; border: 0; background: none; }
  .shv-shelf .shv-actions { gap: 6px; }
  .shv-crumbs a > span:not(.ico), .shv-seg-t, .shv-bar .shv-btn-t {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .shv-seg-opt { padding: 0 10px; }
  .shv-bar .btn:not(.btn-icon) { padding-inline: 11px; }
  .shv-stage { margin-top: 4px; }
}

@media (max-width: 560px) {
  .kit-grid-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kit-grid-body { padding: 8px 9px 9px; }
  .kit-grid-name { font-size: 13px; }
}

@media (max-width: 380px) {
  .kit-sheet-facts { grid-template-columns: minmax(0, 1fr); }
  .shv-tile-art { width: 100px; }
}

/* ============================================================== motion */
:root[data-motion="reduced"] .shv-tile.is-fresh { animation-name: shv-fade; }
:root[data-motion="reduced"] .modal.kit-sheet-modal { animation-name: shv-fade; }
@keyframes shv-fade { from { opacity: 0; } }
:root[data-motion="reduced"] :is(.shv-tile, .kit-grid-tile, .shv-kind):hover,
:root[data-motion="off"] :is(.shv-tile, .kit-grid-tile, .shv-kind):hover { transform: none; }
:root[data-motion="reduced"] .shv-tile .shv-mini,
:root[data-motion="off"] .shv-tile .shv-mini { transform: none; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .shv-tile.is-fresh { animation-name: shv-fade; }
}

@media print {
  .shv-tile-more, .shv-bar, .kit-grid-toolbar, .kit-grid-filters { display: none !important; }
}

/* ---- a kit on the trade list (kit-sheet.js) */
.kit-sheet-trade.is-on { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.kit-sheet-wanted.is-trade { color: var(--gold-text); background: color-mix(in srgb, var(--gold) 14%, transparent); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }

/* ------------------------------------------------------------ items with no shelf
   loose-shelf.js: a portfolio's items of one kind kept with no shelf. The
   Shelves page shows them apart, under "Not on a Shelf"; their own page says
   what they are; "Add an Item" with no shelf asks what it is (chooseKind). */
.shv-loose { margin-top: 34px; }
.shv-loose-head { display: flex; flex-direction: column; gap: 3px; margin: 0 0 14px; }
.shv-loose-h { margin: 0; font-size: var(--fs-h2); }
.shv-loose-head p { margin: 0; font-size: 13px; color: var(--ink-3); max-width: 62ch; }
.shv-loose .shv-grid-cell { opacity: .96; }
.shv-noshelf { padding: 22px 24px; }
.shv-noshelf h2 { margin: 0 0 6px; }
.shv-noshelf p { margin: 0 0 14px; color: var(--ink-2); max-width: 60ch; }
.shv-loose-note {
  display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 10px; max-width: 70ch;
  padding: 9px 12px; border-radius: var(--radius); font-size: 13px; color: var(--ink-2);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-2)); border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
}
.shv-loose-note .ico { flex: none; margin-top: 1px; color: var(--accent-text); }
.shv-loose-note b { color: var(--ink); font-weight: 650; }
/* the kinds as buttons: one press picks it */
.shv-kind.is-pick { font: inherit; }
.shv-kind.is-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.shv-pickkind .modal-body { padding-top: 4px; }
@media (max-width: 640px) { .shv-pickkind .shv-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }