/* ===========================================================================
   kit-form.css — the add / edit kit form (kit-form.js) and the photo buttons
   (photos.js photoInputs). Classes: .kf-* for the form, .ph-* for the buttons.

   A dialog of two columns on a wide screen (the photos on the left with the
   cover big, the fields on the right, each scrolling on its own), one column
   below 720px, and the whole screen from 640px down — a sheet that keeps to
   the safe areas, with 16px fields on touch so iOS never zooms. Everything
   here is tokens from design.css; motion follows <html data-motion>.
   =========================================================================== */

/* ================================================================ the box */
.modal.modal-kit {
  width: min(980px, 100%); height: min(820px, 92vh); max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.kf { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* ------------------------------------------------------------------ head */
.kf-head {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  padding: 15px 60px 13px 20px;
  border-bottom: 1px solid var(--line); box-shadow: var(--glass-edge);
}
.kf-titles { flex: 1 1 240px; min-width: 0; }
.kf-head h2:focus { outline: none; }
.kf-head h2 { margin: 0 0 2px; font-size: var(--fs-h2); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.kf-sub { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kf-sub:empty { display: none; }

/* Owned | Wishlist: the one choice that changes what the rest of the form asks. */
.kf-mode {
  flex: none; display: inline-flex; gap: 2px; padding: 3px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-pill);
  box-shadow: var(--glass-edge);
}
.kf-mode-opt {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 32px; padding: 0 16px; border-radius: var(--radius-pill);
  font-size: 13.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap;
  transition: background var(--t-1) var(--ease-out), color var(--t-1) var(--ease-out), box-shadow var(--t-1) var(--ease-out);
}
.kf-mode-opt:hover { color: var(--ink); background: var(--bg-3); }
.kf-mode-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);
}
.kf-mode-opt[data-value="wanted"].is-on {
  color: #1f1400; background: var(--gold);
  box-shadow: 0 1px 8px color-mix(in srgb, var(--gold) 34%, transparent);
}
:root[data-theme="light"] .kf-mode-opt[data-value="wanted"].is-on { color: #fff; background: var(--gold-text); }
.kf-mode-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.kf-mode-opt:has(input:disabled) { cursor: default; }
.kf-ico { display: inline-grid; place-items: center; flex: none; line-height: 0; }

/* ------------------------------------------------------------------ body */
.kf-body {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: minmax(270px, 350px) minmax(0, 1fr);
}
.kf-photos, .kf-fields { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.kf-photos {
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 20px 22px;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 40%, transparent);
}
.kf-fields { display: flex; flex-direction: column; gap: 18px; padding: 18px 24px 26px; }

.kf-photos-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.kf-sec {
  margin: 0; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-text);
}
.kf-photo-count { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ rows */
.kf-row { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.kf-label { font-size: 13px; font-weight: 650; color: var(--ink); }
.kf-help { margin: 0; font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.kf-help:empty { display: none; }
.kf-hint { margin: 0; font-size: 12px; line-height: 1.4; color: var(--ink-2); font-variant-numeric: tabular-nums; min-height: 0; }
.kf-hint:empty { display: none; }
.kf-err { margin: 0; font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--danger); }
.kf-row.has-error .input,
.kf-row.has-error .kf-chips { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }
.kf-row.has-error .kf-chips { border-radius: 12px; }
.kf .input { height: 36px; }
.kf textarea.input { height: auto; min-height: 84px; }
.kf-inline { display: flex; align-items: center; gap: 8px; }
.kf-inline .input { flex: 1; min-width: 0; }
.kf-date { max-width: 220px; }
.kf-inline .kf-date { max-width: none; }
.kf-text { display: contents; }

/* Two fields side by side while there is room for both, one above the other after. */
.kf-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px 16px; }
.kf-amounts { display: flex; flex-direction: column; gap: 18px; }
.kf-owned { display: flex; flex-direction: column; gap: 18px; }
.kf-pair.kf-owned { display: grid; }

/* ----------------------------------------------------------------- chips */
.kf-chips { display: flex; flex-wrap: wrap; gap: 6px; border: 1px solid transparent; }
.kf-chip {
  --tone: var(--accent);
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 13px 0 11px;
  background: var(--bg-3); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  box-shadow: var(--glass-edge);
  font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--t-1) var(--ease-out), border-color var(--t-1) var(--ease-out),
    color var(--t-1) var(--ease-out), transform var(--t-1) var(--ease-out);
}
.kf-chip:hover { color: var(--ink); border-color: color-mix(in srgb, var(--tone) 45%, var(--line)); }
.kf-chip:active { transform: translateY(1px); }
.kf-chip-dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: color-mix(in srgb, var(--tone) 55%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 70%, transparent);
  transition: background var(--t-1) var(--ease-out), box-shadow var(--t-1) var(--ease-out);
}
.kf-chip.is-on {
  color: var(--ink);
  background: color-mix(in srgb, var(--tone) 18%, var(--bg-3));
  border-color: color-mix(in srgb, var(--tone) 70%, transparent);
}
.kf-chip.is-on .kf-chip-dot {
  background: var(--tone);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 24%, transparent), 0 0 8px color-mix(in srgb, var(--tone) 60%, transparent);
}
.kf-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ----------------------------------------------------------------- money */
.kf-money { display: flex; flex-direction: column; gap: 6px; }
.kf-money-in { display: flex; gap: 6px; }
.kf-money-in .kf-amount { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.kf-cur { flex: none; width: 104px; padding-right: 4px; font-variant-numeric: tabular-nums; }
.kf-today { flex: none; }
.kf-stepper { display: inline-flex; align-items: center; gap: 6px; }
.kf-stepper .kf-qty { width: 72px; text-align: center; font-variant-numeric: tabular-nums; }
.kf-step { width: 36px; height: 36px; font-size: 17px; font-weight: 600; }
.kf-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; align-self: flex-start; }
.kf-check-input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }

/* ------------------------------------------------------------------ more */
.kf-more {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg) 55%, transparent); box-shadow: var(--glass-edge);
}
.kf-more-sum {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 11px 14px; cursor: pointer; list-style: none; border-radius: var(--radius);
  font-size: 13.5px; font-weight: 650;
}
.kf-more-sum::-webkit-details-marker { display: none; }
.kf-more-sum::before {
  content: ""; flex: none; align-self: center; width: 7px; height: 7px; margin-right: 2px;
  border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
  transform: rotate(-45deg); transition: transform var(--t-2) var(--ease-out);
}
.kf-more[open] > .kf-more-sum::before { transform: rotate(45deg) translate(-1px, -1px); }
.kf-more-sum:hover { background: var(--bg-3); }
.kf-more-what { font-size: 12px; font-weight: 500; color: var(--ink-3); min-width: 0; }
.kf-more[open] .kf-more-what { display: none; }
.kf-more-body { display: flex; flex-direction: column; gap: 18px; padding: 4px 14px 16px; }
.kf-notes-wrap { position: relative; display: flex; flex-direction: column; }
.kf-count { align-self: flex-end; margin-top: 4px; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.kf-count:empty { display: none; }

/* ------------------------------------------------------------------ foot */
.kf-foot {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap;
  padding: 12px 20px 14px; border-top: 1px solid var(--line); box-shadow: var(--glass-edge);
}
.kf-foot-msg { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.kf-foot-btns { display: flex; gap: var(--sp-2); margin-left: auto; }
.kf-status { margin: 0; font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.kf-status:empty { display: none; }
.kf-alert { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; line-height: 1.4; color: var(--danger); }
.kf-alert:empty { display: none; }
.kf-alert > span:not(.kf-ico) { flex: 1 1 180px; min-width: 0; }
.kf-alert .kf-retry { flex: none; }
.kf.is-busy .kf-status::before {
  content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 7px; vertical-align: -1px;
  border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); border-top-color: var(--accent);
  animation: kf-spin .8s linear infinite;
}
@keyframes kf-spin { to { transform: rotate(360deg); } }
/* While a save is in flight nothing can be taken off, moved or closed (kit-form.js makes the body inert). */
.kf.is-busy .kf-ph-x, .kf.is-busy .kf-ph-star { display: none; }
.modal.modal-kit .modal-x:disabled { opacity: .45; cursor: default; pointer-events: none; }

/* ================================================================ photos */
/* The cover, big: a photo fills it; a cut-out stands on a lit floor. */
.kf-stage {
  position: relative; flex: none; width: 100%; aspect-ratio: 4 / 5; max-height: 44vh;
  display: grid; place-items: center; overflow: hidden; isolation: isolate;
  border-radius: 14px; border: 1px solid var(--line);
  background:
    radial-gradient(110% 80% at 30% -10%, color-mix(in srgb, var(--ink) 9%, transparent), transparent 62%),
    var(--bg);
  box-shadow: var(--glass-edge), var(--shadow-1);
}
.kf-stage-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kf-stage.is-cutout {
  background:
    radial-gradient(60% 14% at 50% 91%, rgba(0,0,0,.42), transparent 70%),
    radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 6%, var(--bg)), var(--bg) 78%);
}
.kf-stage.is-cutout .kf-stage-img {
  inset: 7% 8% 9%; width: 84%; height: 84%; object-fit: contain; object-position: 50% 100%;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.35));
}
.kf-stage-img.is-in { animation: kf-fade var(--t-2) var(--ease-out); }
.kf-stage-badge {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  padding: 3px 9px; border-radius: var(--radius-pill);
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: rgba(8, 10, 16, .62); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.kf-stage.is-empty .kf-stage-badge { display: none; }
.kf-stage.is-preparing::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, var(--hairline) 48%, transparent 62%);
  animation: mo-sheen 1.6s linear infinite;
}
.kf-stage-empty {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 18px; border: 2px dashed var(--line); border-radius: inherit;
  background: none; color: var(--ink-2); text-align: center; cursor: pointer;
  transition: border-color var(--t-1) var(--ease-out), color var(--t-1) var(--ease-out), background var(--t-1) var(--ease-out);
}
.kf-stage-empty:hover { border-color: var(--accent); color: var(--ink); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.kf-stage-empty:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.kf-stage-ico { display: grid; place-items: center; color: var(--accent-text); margin-bottom: 4px; }
.kf-stage-t { font-size: 14.5px; font-weight: 650; color: var(--ink); }
.kf-stage-s { font-size: 12px; color: var(--ink-3); max-width: 24ch; line-height: 1.4; }

/* The strip: every photo, the first marked Cover. A grid beside the stage; one sideways row on a phone. */
.kf-strip {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
  -webkit-user-select: none; user-select: none;
}
.kf-strip-empty {
  margin: 0; padding: 12px 14px; font-size: 12.5px; line-height: 1.45; color: var(--ink-3);
  border: 1px dashed var(--line); border-radius: var(--radius); display: none;
}
.kf-ph {
  position: relative; min-width: 0; aspect-ratio: 4 / 5;
  border-radius: 10px; overflow: hidden; cursor: grab;
  background: var(--bg-3);
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--hairline);
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  transition: box-shadow var(--t-1) var(--ease-out);
}
.kf-ph:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kf-ph-img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  pointer-events: none; -webkit-user-drag: none;
}
.kf-ph.is-cutout { background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 8%, var(--bg-3)), var(--bg)); }
.kf-ph.is-cutout .kf-ph-img { object-fit: contain; padding: 6%; }
.kf-ph.is-cover { box-shadow: var(--shadow-1), 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent); }
.kf-ph-badge {
  position: absolute; left: 4px; bottom: 4px; display: none;
  padding: 1px 6px; border-radius: var(--radius-pill);
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent-fill);
}
.kf-ph.is-cover .kf-ph-badge { display: inline-block; }

/* Remove, and Make cover: on a pointer's hover or the keyboard's focus; always there for a finger. */
.kf-ph-x, .kf-ph-star {
  position: absolute; top: 4px; z-index: 2;
  display: grid; place-items: center; width: 24px; height: 24px; padding: 0;
  border: none; border-radius: 50%; cursor: pointer;
  color: #fff; background: rgba(8, 10, 16, .66);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  opacity: 0; transition: opacity var(--t-1) var(--ease-out), background var(--t-1) var(--ease-out);
}
.kf-ph-x { right: 4px; }
.kf-ph-star { left: 4px; }
.kf-ph-x:hover { background: var(--danger); }
.kf-ph-star:hover { background: var(--accent-fill); color: var(--accent-ink); }
.kf-ph-x-ico, .kf-ph-star-ico { display: grid; place-items: center; line-height: 0; }
.kf-ph:hover .kf-ph-x, .kf-ph:focus-visible .kf-ph-x, .kf-ph:focus-within .kf-ph-x,
.kf-ph:hover .kf-ph-star, .kf-ph:focus-visible .kf-ph-star, .kf-ph:focus-within .kf-ph-star { opacity: 1; }
.kf-ph.is-cover .kf-ph-star { display: none; }
.kf-ph.is-uploading .kf-ph-x, .kf-ph.is-uploading .kf-ph-star { display: none; }
@media (hover: none) {
  .kf-ph-x, .kf-ph-star { opacity: 1; width: 28px; height: 28px; }
}

/* Getting ready, uploading, failed. */
.kf-ph.is-preparing::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, var(--hairline) 48%, transparent 62%);
  animation: mo-sheen 1.6s linear infinite;
}
.kf-ph-prog {
  position: absolute; inset: 0; z-index: 1; display: none; place-items: center;
  background: color-mix(in srgb, #05060a 48%, transparent);
}
.kf-ph.is-uploading .kf-ph-prog { display: grid; }
.kf-ph-ring {
  width: 32px; height: 32px; border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--p, 0) * 360deg), rgba(255,255,255,.22) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
}
.kf-ph-fail {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: none;
  align-items: center; justify-content: center; gap: 4px; padding: 3px 4px;
  font-size: 10.5px; font-weight: 700; color: #fff; background: color-mix(in srgb, var(--danger) 88%, #000);
}
.kf-ph.is-failed { box-shadow: 0 0 0 2px var(--danger); }
.kf-ph.is-failed .kf-ph-fail { display: flex; }
.kf-ph.is-failed .kf-ph-badge { bottom: 22px; }

/* Picked up: it follows the pointer (the transform is kit-form.js's), the rest make room. */
.kf-strip.is-sorting .kf-ph { cursor: grabbing; }
.kf-ph.is-dragging {
  z-index: 5; cursor: grabbing;
  box-shadow: 0 16px 34px rgba(0,0,0,.5), 0 0 0 2px var(--accent);
}
.kf-ph.is-new { animation: kf-pop var(--t-2) var(--ease-spring); }

/* The photo buttons (photos.js photoInputs). */
.ph-inputs { display: flex; flex-wrap: wrap; gap: 8px; }
.ph-btn { flex: 1 1 auto; }
.ph-ico { display: inline-grid; place-items: center; line-height: 0; }
.kf-ph-inputs .ph-btn { height: 36px; }

/* Dropping files on the form. */
.kf-veil {
  position: absolute; inset: 8px; z-index: 30; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 2px dashed var(--accent); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg-2) 86%, transparent);
  color: var(--ink); font-size: 15px; font-weight: 650;
  opacity: 0; transition: opacity var(--t-1) var(--ease-out);
}
.kf-veil-ico { display: grid; place-items: center; color: var(--accent-text); }
.kf.is-drop-over .kf-veil { opacity: 1; }

/* ================================================================ motion */
.kf-reveal { animation: kf-in var(--t-2) var(--ease-out); }
@keyframes kf-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes kf-fade { from { opacity: 0; } }
@keyframes kf-pop { from { opacity: 0; transform: scale(.86); } }
:root[data-motion="reduced"] .kf-reveal,
:root[data-motion="reduced"] .kf-ph.is-new { animation-name: kf-fade; }
:root[data-motion="reduced"] .kf-ph.is-preparing::after,
:root[data-motion="reduced"] .kf-stage.is-preparing::after { animation: none; opacity: .5; }
:root[data-motion="off"] .kf-reveal,
:root[data-motion="off"] .kf-ph.is-new,
:root[data-motion="off"] .kf-stage-img.is-in,
:root[data-motion="off"] .kf-ph.is-preparing::after,
:root[data-motion="off"] .kf-stage.is-preparing::after { animation: none; }
:root[data-motion="off"] .kf.is-busy .kf-status::before { animation: none; border-color: var(--accent); }

/* ============================================================= touch, sizes */
/* A finger's field: 16px text, so iOS does not zoom into it, and taller targets. */
@media (hover: none), (pointer: coarse) {
  .kf .input, .kf select.input, .kf textarea.input { font-size: 16px; }
  .kf .input { height: 42px; }
  .kf textarea.input { height: auto; }
  .kf-chip { height: 38px; padding: 0 15px 0 12px; font-size: 14px; }
  .kf-mode-opt { height: 38px; }
  .kf-step { width: 42px; height: 42px; }
  .kf-stepper .kf-qty { width: 76px; }
  .kf-ph-inputs .ph-btn { height: 42px; }
}

/* One column: the photos first, then the fields, all in one scroll. */
@media (max-width: 720px) {
  .kf-body { display: block; overflow-y: auto; overscroll-behavior: contain; }
  .kf-photos, .kf-fields { overflow: visible; }
  .kf-photos { border-right: none; border-bottom: 1px solid var(--line-soft); padding: 14px 16px 16px; }
  .kf-fields { padding: 16px 16px 24px; }
  .kf-stage { display: none; }
  .kf-strip {
    display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scrollbar-width: none;
    margin: 0 -16px; padding: 4px 16px 6px; scroll-padding: 0 16px;
  }
  .kf-strip::-webkit-scrollbar { display: none; }
  .kf-ph { flex: none; width: 88px; scroll-snap-align: start; }
  .kf-strip-empty { display: block; }
}

/* The whole screen on a phone (and on a short landscape one): a sheet, clear of the notch and the home indicator. */
@media (max-width: 640px), (max-height: 520px) {
  .modal.modal-kit {
    position: fixed; inset: 0;
    width: auto; height: auto; max-height: none;
    border: none; border-radius: 0;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
    background: var(--bg-2);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    animation: kf-sheet-in var(--t-3) var(--ease-out);
  }
  .modal.modal-kit .modal-x { top: 9px; right: 9px; }
  .kf-head h2 { font-size: 17px; }
  .kf-foot { padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
}
/* A phone upright: the × holds the title's corner only, Owned | Wishlist runs the full width under
   it, and the two answers share the foot. */
@media (max-width: 640px) {
  .kf-head { padding: 11px 16px; gap: 10px; }
  .kf-titles { padding-right: 44px; }
  .kf-mode { flex: 1 1 100%; display: flex; }
  .kf-mode-opt { flex: 1; }
  .kf-foot-msg { flex-basis: 100%; }
  .kf-foot-btns { flex: 1; }
  .kf-foot-btns .btn { flex: 1; height: 42px; }
  .kf-foot-btns .kf-save { flex: 1.6; }
}
/* A phone on its side: little height, so the head and foot stay one slim row each. */
@media (max-height: 520px) and (min-width: 641px) {
  .kf-head { padding: 7px 60px 7px 16px; flex-wrap: nowrap; }
  .kf-sub { display: none; }
  .kf-mode-opt { height: 32px; }
  .kf-foot { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
  .kf-foot-msg { flex-basis: 160px; }
  .kf-photos, .kf-fields { padding-top: 12px; }
  .kf-stage { max-height: 38vh; }
}
@keyframes kf-sheet-in { from { opacity: 0; transform: translateY(18px); } }
:root[data-motion="reduced"] .modal.modal-kit { animation-name: kf-fade; }

@media (max-width: 380px) {
  .kf-cur { width: 92px; }
  .kf-ph { width: 80px; }
}

/* ---- Scan barcode (kit-form.js, barcode.js): the button over the name, and what it found */
.kf-scan-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 4px; }
.kf-scan { gap: 7px; }
.kf-scan-note { margin: 0; flex: 1 1 200px; }
.kf-scan-note:empty { display: none; }
.kf-link { padding: 0; border: 0; background: none; font: inherit; color: var(--accent-text); text-decoration: underline; cursor: pointer; }

/* ---- the barcode scanner: the camera full screen, a wide guide over it */
.bc-layer {
  position: fixed; inset: 0; z-index: 3000;
  background: #000; color: #fff;
  display: grid; place-items: center;
}
.bc-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bc-guide {
  position: relative; width: min(90vw, 560px); height: min(34vh, 200px);
  border-radius: 16px;
  box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .52), inset 0 0 0 2px rgba(255, 255, 255, .85);
}
.bc-line {
  position: absolute; left: 8%; right: 8%; top: 50%; height: 2px;
  background: #ff4d5e; box-shadow: 0 0 12px #ff4d5e;
}
:root[data-motion="full"] .bc-line { animation: bc-sweep 1.6s ease-in-out infinite alternate; }
@keyframes bc-sweep { from { top: 22%; } to { top: 78%; } }
.bc-top { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; }
.bc-x {
  display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
  color: #fff; background: rgba(0, 0, 0, .5); cursor: pointer;
}
.bc-foot {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(transparent, rgba(0, 0, 0, .75) 40%);
}
.bc-status { margin: 0; text-align: center; font-size: 15px; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.bc-type { display: flex; gap: 8px; width: min(420px, 100%); }
.bc-type[hidden] { display: none; }
.bc-typed { flex: 1; min-width: 0; font-size: 16px; }
.bc-type-btn { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .25); }

/* ---- sealed product from the TCGplayer catalog (sealed-pick.js, in the kit form) */
.kf-pick-host:empty, .kf-link-note:empty { display: none; }
.kf-link-note { margin: -2px 0 4px; }
.kf-linked {
  display: inline-flex; align-items: center; gap: 5px; font-weight: 650; color: var(--accent-text);
}
.kf-linked::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.sp {
  display: flex; flex-direction: column; gap: 8px; margin: 2px 0 8px; padding: 10px;
  border-radius: 12px; background: var(--bg); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
}
.sp-bar { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-game { flex: 0 1 180px; width: auto; }
.sp-q { flex: 1 1 200px; min-width: 0; }
.sp-note { margin: 0; font-size: 12px; color: var(--ink-3); }
.sp-note:empty { display: none; }
.sp-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; overscroll-behavior: contain; }
.sp-results:empty { display: none; }
.sp-hit {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border-radius: 10px;
  cursor: pointer; font: inherit; text-align: left; color: inherit; background: transparent; border: 1px solid transparent;
}
@media (hover: hover) { .sp-hit:hover { background: var(--bg-2); border-color: var(--line); } }
.sp-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sp-pic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 7px; overflow: hidden; background: var(--bg-3); }
.sp-pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sp-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sp-text b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-text span { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-price { flex: none; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .sp-game { flex: 1 1 100%; } }