[hidden]{ display:none !important; }

/* ════════════════════════════════════════════════════════
   TOKENS — dark olive field-kit palette; category colours
   follow MARCH-style coding and do the wayfinding.
   ════════════════════════════════════════════════════════ */
:root{
  --bg:      #171a14;
  --panel:   #1f2419;
  --panel-2: #262c1f;
  --line:    #333a29;
  --text:    #e3e6da;
  --dim:     #8b9180;
  --faint:   #565c4c;
  --sand:    #d5b876;
  --alert:   #e2564a;

  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:    'Barlow', -apple-system, 'Segoe UI', system-ui, sans-serif;

  --radius: 6px;
  --tap: 44px;            /* minimum touch target */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.45;
}
button{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--sand); outline-offset:2px; }

/* ════════════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════════════ */
.top{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  padding:10px 14px 10px;
}
.top-inner{ max-width:880px; margin:0 auto; }

.brand-row{
  display:flex; align-items:center; gap:12px;
}
.brand{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(17px, 4.5vw, 21px);
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
}
.brand em{ font-style:normal; color:var(--alert); }
.brand small{
  display:block;
  font-size:10px; font-weight:600; letter-spacing:.28em;
  color:var(--dim);
}

.pts{
  margin-left:auto;
  text-align:right;
  font-variant-numeric:tabular-nums;
  line-height:1.15;
}
.pts b{
  font-family:var(--font-display);
  font-size:clamp(20px, 5.5vw, 26px);
  font-weight:700;
  color:var(--sand);
  transition:color .2s;
}
.pts b.full{ color:var(--alert); }
.pts span{ font-size:12px; color:var(--dim); }
.pts .cap{
  display:block; font-size:9px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--faint);
}


/* ── Collapsible header section ───────────────────────── */
.hdr-toggle{
  width:38px; height:38px;
  margin-left:10px;
  display:grid; place-items:center;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  cursor:pointer;
  flex-shrink:0;
  transition:border-color .15s;
  -webkit-tap-highlight-color:transparent;
}
.hdr-toggle:hover{ border-color:var(--sand); }
.hdr-toggle svg{
  width:16px; height:16px;
  stroke:var(--dim); fill:none; stroke-width:2.5;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .25s ease;
}
.top.collapsed .hdr-toggle svg{ transform:rotate(180deg); }

.collapsible{
  display:grid;
  grid-template-rows:1fr;
  transition:grid-template-rows .28s ease, opacity .2s ease;
}
.collapsible-inner{ overflow:hidden; min-height:0; }
.top.collapsed .collapsible{
  grid-template-rows:0fr;
  opacity:0;
}
.top.collapsed .collapsible-inner{ visibility:hidden; }

/* ── MARCH budget bar: signature element. Each category's
     spend renders as its own coloured segment. ─────────── */
.budget{
  display:flex;
  height:8px;
  margin:10px 0;
  border-radius:4px;
  background:var(--panel-2);
  overflow:hidden;
}
.budget .seg{
  height:100%;
  transition:width .25s ease;
  min-width:0;
}

/* Controls row */
.controls{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
}
.controls select{
  height:38px;
  background:var(--panel-2);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:0 10px;
  font-family:var(--font-display);
  font-size:15px; font-weight:600; letter-spacing:.04em;
}
.chipbtn{
  height:38px;
  padding:0 14px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--panel-2);
  cursor:pointer;
  font-family:var(--font-display);
  font-weight:600; font-size:14px; letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--dim);
  transition:border-color .15s, color .15s;
}
.chipbtn:hover{ border-color:var(--sand); color:var(--sand); }
.chipbtn.primary{ color:var(--sand); border-color:color-mix(in srgb, var(--sand) 45%, transparent); }
.chipbtn.danger:hover{ color:var(--alert); border-color:var(--alert); }
.preset-note{
  flex-basis:100%;
  font-size:11px; color:var(--faint);
  font-variant-numeric:tabular-nums;
}

/* Search */
.search{
  position:relative;
  margin-top:10px;
}
.search svg{
  position:absolute; left:12px; top:50%; translate:0 -50%;
  width:15px; height:15px; stroke:var(--dim); fill:none;
  stroke-width:2; pointer-events:none;
}
.search input{
  width:100%;
  height:var(--tap);
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--text);
  font:inherit;
  padding:0 36px;
}
.search input::placeholder{ color:var(--faint); }
.search input:focus{ border-color:var(--sand); outline:none; }
.search-clear{
  position:absolute; right:4px; top:50%; translate:0 -50%;
  width:36px; height:36px;
  border:0; background:none; cursor:pointer;
  color:var(--dim); font-size:16px; border-radius:var(--radius);
}
.search-clear:hover{ color:var(--text); }

/* Category filter strip — horizontal scroll on mobile */
.cats{
  display:flex; gap:6px;
  margin-top:10px;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  padding-bottom:2px;
}
.cats::-webkit-scrollbar{ display:none; }
.cat-chip{
  flex-shrink:0;
  display:flex; align-items:center; gap:6px;
  height:32px; padding:0 12px;
  border-radius:16px;
  border:1px solid var(--line);
  background:transparent;
  cursor:pointer;
  font-size:12px; font-weight:600; letter-spacing:.03em;
  color:var(--dim);
  transition:background .15s, border-color .15s, color .15s;
}
.cat-chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--c, var(--dim)); }
.cat-chip.on{
  color:var(--c, var(--text));
  border-color:color-mix(in srgb, var(--c, var(--text)) 55%, transparent);
  background:color-mix(in srgb, var(--c, var(--text)) 12%, transparent);
}

/* ════════════════════════════════════════════════════════
   ITEM LIST
   ════════════════════════════════════════════════════════ */
main{
  max-width:880px;
  margin:0 auto;
  padding:14px 14px calc(86px + env(safe-area-inset-bottom));
}

.sect{ margin-bottom:22px; }
.sect-hd{
  display:flex; align-items:center; gap:8px;
  margin-bottom:6px;
}
.sect-hd .bar{ width:4px; height:15px; border-radius:2px; background:var(--c); }
.sect-hd h2{
  margin:0;
  font-family:var(--font-display);
  font-size:13px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--c);
}
.sect-hd .n{
  font-size:10px; color:var(--faint);
  border:1px solid var(--line); border-radius:10px;
  padding:1px 8px;
  font-variant-numeric:tabular-nums;
}
.sect-hd .spend{
  margin-left:auto;
  font-size:11px; color:var(--faint);
  font-variant-numeric:tabular-nums;
}
.sect-hd .spend b{ color:var(--dim); font-weight:600; }

.row{
  display:grid;
  grid-template-columns:4px minmax(0,1fr) auto;
  align-items:center;
  gap:0 10px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  margin-bottom:3px;
  min-height:56px;
  transition:border-color .15s, background .15s;
}
.row .edge{
  align-self:stretch;
  background:var(--c);
  opacity:.35;
  border-radius:var(--radius) 0 0 var(--radius);
  transition:opacity .15s;
}
.row.picked{ background:var(--panel-2); border-color:color-mix(in srgb, var(--c) 35%, var(--line)); }
.row.picked .edge{ opacity:1; }

.row .info{
  padding:8px 0;
  min-width:0;
}
.row .name{
  font-weight:500;
  color:var(--dim);
  overflow-wrap:break-word;
  transition:color .15s;
}
.row.picked .name{ color:var(--text); }
.row .cost{
  font-size:11.5px;
  color:var(--faint);
  font-variant-numeric:tabular-nums;
}
.row .cost.free{ color:#7fbf6a; }

.stepper{
  display:flex; align-items:center;
  padding-right:8px;
}
.stepper button{
  width:var(--tap); height:var(--tap);
  display:grid; place-items:center;
  background:var(--bg);
  border:1px solid var(--line);
  cursor:pointer;
  font-size:18px; line-height:1;
  color:var(--text);
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:background .1s, border-color .1s, opacity .1s;
  touch-action:manipulation;
}
.stepper button:hover:not(:disabled){ border-color:var(--dim); }
.stepper button:active:not(:disabled){ background:var(--panel-2); }
.stepper button:disabled{ opacity:.22; cursor:default; }
.stepper .minus{ border-radius:var(--radius) 0 0 var(--radius); }
.stepper .plus{ border-radius:0 var(--radius) var(--radius) 0; }
.stepper .qty{
  width:44px; height:var(--tap);
  display:grid; place-items:center;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--bg);
  font-family:var(--font-display);
  font-size:17px; font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--faint);
}
.row.picked .qty{ color:var(--c); }

/* Advanced items locked for the current role */
.row.locked{ opacity:.45; }
.row.locked .edge{ opacity:.15; }
.row.locked .stepper button{ pointer-events:none; }
.lock-tag{
  display:none;
  margin-left:8px;
  padding:1px 7px;
  border:1px solid color-mix(in srgb, var(--alert) 45%, transparent);
  border-radius:9px;
  font-size:9.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--alert);
  vertical-align:1px;
}
.row.locked .lock-tag{ display:inline-block; }

.empty{
  text-align:center; color:var(--dim);
  padding:48px 16px; font-size:14px;
}
.empty button{
  display:block; margin:12px auto 0;
  background:none; border:none; cursor:pointer;
  color:var(--sand); text-decoration:underline; font-size:13px;
}

/* Credits */
.credits{
  text-align:center;
  color:var(--faint);
  font-size:11.5px;
  letter-spacing:.05em;
  padding:26px 0 4px;
  border-top:1px solid var(--line);
}

/* ════════════════════════════════════════════════════════
   BOTTOM BAR
   ════════════════════════════════════════════════════════ */
.bar-bottom{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:color-mix(in srgb, var(--panel) 94%, transparent);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
  padding:8px 14px calc(8px + env(safe-area-inset-bottom));
}
.bar-inner{
  max-width:880px; margin:0 auto;
  display:flex; align-items:center; gap:12px;
}
.bar-stat{
  font-size:13px; color:var(--dim);
  font-variant-numeric:tabular-nums;
  min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bar-stat b{ color:var(--text); font-weight:600; }
.btn-summary{
  margin-left:auto;
  height:var(--tap);
  padding:0 20px;
  border:none; border-radius:var(--radius);
  background:var(--sand);
  color:#1c1a12;
  font-family:var(--font-display);
  font-weight:700; font-size:15px;
  letter-spacing:.06em; text-transform:uppercase;
  cursor:pointer;
  transition:filter .12s;
  flex-shrink:0;
}
.btn-summary:hover{ filter:brightness(1.08); }


/* ════════════════════════════════════════════════════════
   SUMMARY DIALOG
   ════════════════════════════════════════════════════════ */
dialog{
  width:min(560px, calc(100vw - 24px));
  max-height:84dvh;
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:10px;
  padding:0;
  margin:auto;
}
dialog::backdrop{ background:rgba(8,10,6,.78); }
.dlg-hd{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px 10px;
}
.dlg-hd h3{
  margin:0;
  font-family:var(--font-display);
  font-size:17px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
}
.dlg-close{
  width:36px; height:36px;
  display:grid; place-items:center;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  cursor:pointer; color:var(--dim); font-size:15px;
}
.dlg-close:hover{ color:var(--text); }

.dlg-body{
  flex:1 1 auto;
  overflow-y:auto;
  padding:12px 18px;
  max-height:56dvh;
  min-height:0;
}
.dlg-cat{
  font-family:var(--font-display);
  font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--c);
  display:flex; align-items:center; gap:6px;
  margin:12px 0 5px;
}
.dlg-cat:first-child{ margin-top:0; }
.dlg-cat .dot{ width:7px; height:7px; border-radius:50%; background:var(--c); }
.dlg-line{
  display:grid; grid-template-columns:minmax(0,1fr) 84px 64px 44px;
  align-items:center; gap:10px;
  padding:4px 0;
  border-bottom:1px solid var(--line);
  font-size:13px;
}
.dlg-line .sub-pts, .dlg-line .q{ text-align:right; }
.dlg-line:last-child{ border-bottom:none; }
.dlg-line .nm{ flex:1; min-width:0; }
.dlg-line .sub-pts{ color:var(--faint); font-size:11.5px; font-variant-numeric:tabular-nums; }
.dlg-line .q{
  font-family:var(--font-display);
  font-weight:700; font-size:14px;
  color:var(--c);
  font-variant-numeric:tabular-nums;
  min-width:34px; text-align:right;
}

.dlg-ft{
  display:flex; align-items:center; justify-content:flex-start; gap:12px;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
}
/* Right-aligned regardless of how many siblings are visible — unlike
   justify-content:space-between, this doesn't flip sides when it's the
   only visible child (Import/Save tabs vs. Load's count + button pair). */
/* Kit Manager: exactly one of these three is ever visible at a time
   (mutually exclusive by tab), so each can safely carry its own auto
   margin without competing for space. */
#btnSWipe, #btnIRun{ margin-left:auto; }
.save-row button.btn-copy{ flex:none; height:36px; padding:0 16px; white-space:nowrap; }
@media (max-width:400px){ .save-row button.btn-copy{ padding:0 12px; font-size:13px; } }
/* Export dialog: "Use unit template" and "Copy loadout" CAN both be
   visible together — grouped in one wrapper so a single auto margin
   pushes the pair as a unit instead of splitting space between them. */
.dlg-ft-actions{ display:flex; gap:12px; margin-left:auto; }
.dlg-total{
  font-size:13px; color:var(--dim);
  font-variant-numeric:tabular-nums;
}
/* Every dialog footer mixes .chipbtn (38px elsewhere in the app) with
   .btn-copy (44px, the tap-target token) — scoped to the footer only,
   so they line up wherever they share a row (Export's "Use unit
   template" + "Copy loadout" sit side by side; the Kit Manager's
   "Delete all" swaps in at the same spot "Save"/"Import" occupy). */
.dlg-ft .chipbtn{ height:var(--tap); }
.dlg-total b{ color:var(--text); }
.btn-copy{
  height:var(--tap);
  padding:0 16px;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  cursor:pointer;
  font-size:13px; font-weight:500;
  transition:border-color .15s;
}
.btn-copy:hover{ border-color:var(--sand); }
.btn-copy.accent{
  background:var(--sand); color:#1c1a12;
  border-color:var(--sand); font-weight:600;
}
.btn-copy.accent:hover{ filter:brightness(1.08); }
.dlg-btns{ display:flex; gap:8px; flex-wrap:wrap; }
.dlg-note{
  margin:2px 0 10px;
  font-size:12.5px; color:var(--dim); line-height:1.5;
}
.dlg-note b{ color:var(--text); font-weight:600; }
.export-ta{
  width:100%;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--text);
  font-family:ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
  font-size:11px;
  line-height:1.45;
  padding:10px;
  resize:vertical;
  word-break:break-all;
}
.export-ta:focus{ border-color:var(--sand); outline:none; }

/* ── Saved loadouts ───────────────────────────── */
.save-row{ display:flex; gap:8px; margin-bottom:10px; }
.save-row input{
  flex:1; min-width:0; background:var(--panel-2); color:var(--text);
  border:1px solid var(--line); border-radius:6px; padding:0 10px;
  height:36px; font:inherit; font-size:13px;
}
.save-row input:focus{ border-color:var(--sand); outline:none; }
.save-list{ display:flex; flex-direction:column; gap:6px; max-height:min(46vh,320px); overflow:auto; }
.save-item{
  display:flex; align-items:center; gap:10px; padding:8px 10px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:6px;
}
.save-item .si-main{ flex:1; min-width:0; }
.save-item .si-name{
  font-weight:600; font-size:13px; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.save-item .si-meta{ font-size:11px; color:var(--dim); margin-top:2px; }
.save-item .si-kit{ color:var(--sand); }
.save-item button{
  flex:none; height:28px; padding:0 10px; font-size:12px; cursor:pointer;
  background:transparent; color:var(--dim);
  border:1px solid var(--line); border-radius:5px;
}
.save-item button:hover{ border-color:var(--sand); color:var(--sand); }
.save-item button.si-del:hover{ border-color:var(--alert); color:var(--alert); }
.save-empty{ color:var(--dim); font-size:12.5px; text-align:center; padding:18px 0; }
@media (max-width:560px){
  .save-row input{ font-size:16px; }
  .save-item button{ padding:0 7px; }
}
.kd-search{ margin:0 0 10px; }
.kd-search input{ height:36px; }

/* ── Feature 9: role/class/presets grouped as one visual unit ────── */
.billet-cluster{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:6px 8px;
}
.billet-div{
  width:1px; align-self:stretch;
  background:var(--line);
  margin:2px 1px;
}

/* ── Feature 7: pin state shown by more than color alone ─────────── */
.loc-b.on{ position:relative; }
.loc-b.on::after{
  content:"";
  position:absolute; top:-4px; right:-4px;
  width:12px; height:12px; border-radius:50%;
  background:var(--sand);
  border:2px solid var(--panel);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%231c1a12' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4 10-10'/%3E%3C/svg%3E");
  background-size:8px 8px; background-position:center; background-repeat:no-repeat;
}

/* ── Feature 8: Delete-all needs a second tap to actually happen ──── */
.chipbtn.confirm-armed{
  background:var(--alert); border-color:var(--alert); color:#1c1a12;
  font-weight:700;
}

/* ════════════════════════════════════════════════════════
   EASTER EGG — Sgt. Squeak, the unit's medic field mouse.
   Original character. Tap the logo five times to deploy.
   ════════════════════════════════════════════════════════ */
.egg{
  position:fixed;
  bottom:calc(64px + env(safe-area-inset-bottom));
  left:-140px;
  z-index:300;
  pointer-events:none;
  animation:egg-scamper 5s linear forwards;
}
.egg svg{
  width:96px; height:auto;
  animation:egg-bob .32s ease-in-out infinite alternate;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.45));
}
.egg .ecg{
  position:absolute;
  top:38%; right:92px;
  width:150px; height:26px;
  opacity:.55;
}
.egg .ecg path{
  stroke:var(--alert); stroke-width:2; fill:none;
  stroke-dasharray:220; stroke-dashoffset:0;
  animation:egg-pulse 1s linear infinite;
}
@keyframes egg-scamper{
  from{ left:-140px; }
  to  { left:calc(100vw + 60px); }
}
@keyframes egg-bob{
  from{ transform:translateY(0) rotate(-2deg); }
  to  { transform:translateY(-5px) rotate(2deg); }
}
@keyframes egg-pulse{
  from{ stroke-dashoffset:220; }
  to  { stroke-dashoffset:0; }
}
.egg-plus{
  position:fixed;
  z-index:299;
  pointer-events:none;
  font-size:15px; font-weight:700;
  color:var(--alert);
  animation:egg-float 1.4s ease-out forwards;
}
@keyframes egg-float{
  from{ opacity:.9; transform:translateY(0) scale(1); }
  to  { opacity:0;  transform:translateY(-34px) scale(1.3); }
}
@media (prefers-reduced-motion:reduce){
  .egg{ animation:egg-fade 3s ease forwards; left:auto; right:16px; }
  .egg svg{ animation:none; }
  .egg .ecg{ display:none; }
  .egg-plus{ display:none; }
  @keyframes egg-fade{
    0%{ opacity:0; } 15%{ opacity:1; } 85%{ opacity:1; } 100%{ opacity:0; }
  }
}

@media (max-width:560px){
  .brand small{ letter-spacing:.18em; }
  .controls select{ flex:1 1 100%; }
  .chipbtn{ flex:1 1 44%; padding:0 8px; }
  .cbrn-toggle{ flex:1 1 100%; justify-content:center; }
  /* 16px is the iOS no-zoom threshold for focused inputs */
  .export-ta{ font-size:16px; }
}
@media (min-width:561px){
  .row{ grid-template-columns:4px minmax(0,1fr) auto auto; }
  .row .cost{ padding-right:6px; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition:none !important; animation:none !important; }
}

/* CBRN allowance toggle */
.cbrn-toggle{display:inline-flex;align-items:center;gap:6px;font-size:12px;
  height:38px;box-sizing:border-box;
  color:var(--dim,#9aa);cursor:pointer;user-select:none;padding:0 10px;
  border:1px solid rgba(255,200,80,.35);border-radius:var(--radius,8px);white-space:nowrap}
.cbrn-toggle b{color:#e0b04e;font-weight:600}
.cbrn-toggle input{accent-color:#e0b04e;margin:0}
/* Billet doctrine warning */
.billet-warn{font-size:11.5px;color:#e0b04e;flex-basis:100%;white-space:normal;line-height:1.35}
/* CMT advisory tag: item is carried above the holder's class */
.lock-tag.adv{display:inline-block;background:rgba(224,176,78,.14);
  color:#e0b04e;border:1px solid rgba(224,176,78,.35)}
.row:has(.lock-tag.adv){opacity:1}

.brand .ver{opacity:.45;font-weight:400;letter-spacing:.05em;text-transform:none}
.dlg-warns{margin:2px 0 10px}
.dlg-warn{font-size:12px;color:#e0b04e;background:rgba(224,176,78,.08);
  border:1px solid rgba(224,176,78,.3);border-radius:8px;padding:7px 10px;margin-bottom:6px;line-height:1.4}
.row .uses{color:var(--faint);font-size:11px;margin-left:6px}
.row .cbrn-item{
  display:inline-block; padding:0 5px;
  border:1px solid rgba(224,176,78,.35); border-radius:8px;
  color:#e0b04e; font-weight:600; letter-spacing:.02em;
}

/* container chooser in summary */
.loc-tog{display:inline-flex;gap:5px;justify-content:flex-start}
.loc-legend{font-size:11px;color:var(--dim,#9aa);margin:0 0 8px;padding:6px 8px;
  border:1px dashed var(--line,#333);border-radius:8px}
.loc-legend b{color:var(--text,#ddd);font-weight:600}
.loc-b{
  width:34px;height:34px;padding:0;
  display:grid;place-items:center;
  cursor:pointer;color:var(--dim);
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color .15s,color .15s;
  -webkit-tap-highlight-color:transparent;
}
.loc-b svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.loc-b:hover:not(:disabled):not(.on){border-color:var(--sand);color:var(--sand)}
.dlg-line .nm{flex:1 1 auto;min-width:0}

/* mobile explanation of the amber class chips (desktop uses tooltips) */
.adv-legend{display:none;align-items:center;gap:8px;font-size:11px;line-height:1.4;
  color:var(--dim,#9aa);margin:10px 12px 84px;padding:7px 10px;
  border:1px dashed rgba(224,176,78,.35);border-radius:8px}
.adv-legend .lock-tag{flex:none}
@media (max-width:560px){
  .adv-legend:not([hidden]){display:flex}
}


/* ════════════════════════════════════════════════════════
   v16 GRAFTS — new features in the same design language
   ════════════════════════════════════════════════════════ */

/* Locked reason centred where the stepper would be */
.endzone{ position:relative; display:flex; align-items:center; padding-right:8px; }
.lock-tag.lockzone{
  display:none;
  margin:0; width:132px; min-height:36px;
  align-items:center; justify-content:center; text-align:center;
  line-height:1.3; padding:4px 8px;
  border-style:dashed;
}
.row.locked .stepper{ display:none; }
.row.locked .lock-tag.lockzone{ display:flex; }
.row.locked .lock-tag.adv-slot{ display:none; }
.row .lock-tag.adv-slot:not(.adv){ display:none; }

/* Attached-kit banner (build page, only when a kit exists) */
.kit-wrap{ max-width:880px; margin:0 auto; padding:12px 14px 0; }
.kit-banner{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px 8px 12px;
  border:1px dashed color-mix(in srgb, var(--sand) 55%, transparent);
  border-radius:var(--radius);
  background:color-mix(in srgb, var(--sand) 7%, transparent);
  font-size:12.5px; color:var(--dim); line-height:1.4;
}
.kit-banner svg{
  width:15px; height:15px; flex:none;
  fill:none; stroke:var(--sand); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.kit-banner b{ color:var(--sand); font-weight:600; }
.kit-banner .kb-btn{ height:30px; padding:0 10px; font-size:12px; flex:none; }
.chipbtn.has-kit::after{
  content:""; display:inline-block;
  width:6px; height:6px; border-radius:50%;
  background:var(--sand); margin-left:7px; vertical-align:1px;
}
.kit-pre{
  margin:0;
  white-space:pre-wrap; overflow:auto; max-height:52dvh;
  font-size:11px; line-height:1.55;
}

/* ── Pack & Summary page ─────────────────────────────── */
.packtop .brand-row{ gap:12px; }
.packtop .chipbtn{ flex-shrink:0; }
.minis{ display:flex; gap:14px; margin-top:10px; }
.mini{ flex:1; display:flex; align-items:center; gap:7px; min-width:0; }
.mini i{
  font-style:normal;
  font-family:var(--font-display); font-weight:700; font-size:13px;
  color:var(--dim);
}
.mini .mini-bar{ flex:1; margin:0; height:7px; }
.mini b{
  font-size:10.5px; font-weight:600; color:var(--dim);
  font-variant-numeric:tabular-nums;
}
.budget .seg{ background:var(--sand); }
#budgetBar .seg{ background:var(--c, currentColor); }
.budget .seg.near{ background:#e0b04e; }
.budget .seg.over{ background:var(--alert); }

.packmain{
  max-width:880px; margin:0 auto;
  padding:14px 14px calc(86px + env(safe-area-inset-bottom));
}
.cont-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
  margin-bottom:14px;
}
@media (max-width:720px){ .cont-grid{ grid-template-columns:1fr; } }
.cont{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:10px 12px;
}
.cont-hd{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cont-hd h2{
  margin:0;
  font-family:var(--font-display);
  font-size:13px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--text);
}
.cap-edit{ display:flex; align-items:center; gap:6px; }
.cap-edit span{
  font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); white-space:nowrap;
}
.cap-in{
  width:60px; height:32px; text-align:right;
  background:var(--panel-2); color:var(--text);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:0 8px; font:inherit; font-size:16px;
  font-variant-numeric:tabular-nums;
}
.cap-in:focus{ border-color:var(--sand); outline:none; }
.cont-gauge{ margin:10px 0 6px; }
.cont-load{
  font-size:11.5px; color:var(--faint);
  font-variant-numeric:tabular-nums;
}
.cont-load b{ color:var(--dim); font-weight:600; }

.stacks{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px;
  margin-bottom:14px;
}
.stack-line{
  display:grid;
  /* Each row is its own grid, so an "auto" column sizes to THAT row's
     text — which made the A/U/V/B buttons sit at a different x on every
     line depending on whether it read "→ Vest" or "→ Backpack". Fixed
     width here so every row computes identical columns and the buttons
     form a straight edge. */
  grid-template-columns:minmax(0,1fr) auto 124px 40px;
  grid-template-areas:"nm loc wt q";
  align-items:center; gap:10px;
  padding:5px 0;
  border-bottom:1px solid var(--line);
  font-size:13px;
}
.stack-line .nm{ grid-area:nm; }
.stack-line .loc-tog{ grid-area:loc; }
.stack-line .wt{ grid-area:wt; }
.stack-line .q{ grid-area:q; }
.stack-line:last-child{ border-bottom:none; }
.stack-line .nm{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stack-line .wt{
  text-align:right; font-size:11.5px; color:var(--faint);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.stack-line .wt i{ font-style:normal; color:var(--dim); margin-left:6px; }
.stack-line .q{
  font-family:var(--font-display); font-weight:700; font-size:14px;
  color:var(--c); text-align:right;
  font-variant-numeric:tabular-nums;
}
.lock-tag.unfit-tag{
  display:inline-block; margin-left:6px;
  border-color:var(--alert); color:var(--alert);
}
.loc-b:disabled{ opacity:.3; cursor:default; }
.loc-b.on{ background:var(--sand); border-color:var(--sand); color:#1c1a12; }
@media (max-width:560px){
  /* two tight rows: [name | xN] over [weight -> place | A U V B] */
  .stack-line{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"nm q" "wt loc";
    gap:4px 10px;
    padding:7px 0;
  }
  .stack-line .wt{ text-align:left; }
  .stack-line .loc-tog{ justify-self:end; }
}

.unfit-box{
  background:var(--panel);
  border:1px solid color-mix(in srgb, var(--alert) 55%, var(--line));
  border-radius:var(--radius);
  padding:12px;
  margin-bottom:12px;
}
.unfit-hd{
  font-family:var(--font-display);
  font-size:13px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--alert);
  margin-bottom:4px;
}
.ow-note{ margin:0; font-size:12px; color:var(--alert); }

.bar-inner.packbar{ flex-wrap:wrap; row-gap:6px; }
.bar-btns{ margin-left:auto; display:flex; gap:8px; flex-shrink:0; }
.bar-btns .btn-summary:disabled{
  background:var(--panel-2); color:var(--faint); cursor:default; filter:none;
}
@media (max-width:560px){
  .bar-inner.packbar .bar-stat{ flex-basis:100%; text-align:center; order:2; font-size:11.5px; }
  .bar-btns{ flex:1 1 100%; order:1; margin-left:0; }
  .bar-btns .btn-copy, .bar-btns .btn-summary{ flex:1; padding:0 8px; }
}

/* iOS: inputs under 16px force zoom-on-focus — hold the line on phones */
@media (max-width:560px){
  .search input{ font-size:16px; }
}


/* ════════════════════════════════════════════════════════
   v17 — header restructure, unified Kits dialog, dialog scaling
   ════════════════════════════════════════════════════════ */

/* The budget bar IS the header's bottom border: flush, full-bleed,
   no padding around it. Chevron drops only search + chips. */
.top{ padding:10px 0 0; border-bottom:none; }
.top .top-inner{ padding:0 14px; }
#budgetBar{ margin:10px 0 0; border-radius:0; height:8px; }
.collapsible-inner > .top-inner{ padding:0 14px 12px; }
.packtop{ padding:10px 14px 10px; border-bottom:1px solid var(--line); }
.packtop .top-inner{ padding:0; }

/* Role/class/presets moved into the page flow */
.ctrl-wrap{ max-width:880px; margin:0 auto; padding:12px 14px 0; }

/* Kit banner identity line */
.kb-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.kb-id{
  font-size:11px; color:var(--faint);
  font-variant-numeric:tabular-nums;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Dialog scaling: header/footer fixed, body scrolls — nothing clips */
dialog[open]{ display:flex; flex-direction:column; }
.dlg-hd, .dlg-ft{ flex:none; }
/* Kit Manager: one fixed body height for every tab — Save/Import/Load
   all render in the identical box; a tab longer than this scrolls
   internally instead of resizing the dialog. */
@media (max-width:560px){
  #dlgKits{ height:90dvh; }
  #dlgKits .dlg-body{ max-height:none; }
}
@media (max-width:560px){
  .dlg-ft{ flex-wrap:wrap; }
  .dlg-ft .dlg-total{ flex-basis:100%; }
  .dlg-ft .btn-copy, .dlg-ft .chipbtn{ flex:1 1 auto; }
  .dlg-ft-actions{ flex-basis:100%; margin-left:0; }
}

/* Kits dialog sections */

.kd-sec:first-child{ padding-top:2px; }
.kd-sec:last-child{ border-bottom:none; padding-bottom:4px; }
.kd-sec h4{
  margin:0 0 5px;
  font-family:var(--font-display);
  font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--sand);
}
/* Current kit — two full-width lines. Line 1: who it is. Line 2: the
   numbers. Both use the whole width, so neither has to shrink. */
.cur-id{
  font-size:14px; color:var(--text);
  line-height:1.4;
}
.cur-id b{ font-weight:700; word-break:break-word; }
.cur-label{
  font-family:var(--font-display); font-size:10px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--sand);
  margin-right:3px;
}
.cur-role, .cur-dirty{
  font-size:12px; font-weight:500; color:var(--dim);
  text-transform:none; letter-spacing:normal;
}
.cur-dirty{ color:#e0b04e; }
.cur-meta{
  font-size:11.5px; color:var(--dim);
  font-variant-numeric:tabular-nums;
  margin:1px 0 7px;
}

.kd-btns{ display:flex; gap:8px; margin-bottom:6px; flex-wrap:wrap; }
#gearPre{ margin:0 0 6px; }
.kd-sec .save-row{ margin-bottom:4px; }


/* ════════════════════════════════════════════════════════
   v18 — the active kit card + tabbed Kit Manager
   ════════════════════════════════════════════════════════ */
.kit-card{ border-style:solid; }               /* always visible: solid, calm */
.kit-card .kb-line{ display:flex; align-items:center; gap:8px; min-width:0; }
.kit-card .kb-line b{
  color:var(--text); font-weight:600; font-size:13px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kit-state{
  flex:none;
  font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:2px 8px; border-radius:9px;
  border:1px solid var(--line); color:var(--faint);
}
.kit-state.warn{
  color:#e0b04e; border-color:rgba(224,176,78,.45);
  background:rgba(224,176,78,.1);
}
.kit-state.ok{ color:var(--dim); }
.kb-btn.save-nudge{
  color:#1c1a12; background:var(--sand); border-color:var(--sand); font-weight:700;
}
.kb-btn.save-nudge:hover{ filter:brightness(1.08); color:#1c1a12; }

/* Kit Manager tabs — one job on screen at a time */
.kd-tabs{
  display:flex;
  padding:0 18px;
  background:color-mix(in srgb, var(--bg) 45%, var(--panel));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.kd-tab{
  flex:1; height:38px;
  border:none; border-bottom:2px solid transparent;
  margin-bottom:-1px;
  background:transparent;
  cursor:pointer;
  font-family:var(--font-display);
  font-weight:600; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--dim);
}
.kd-tab:hover:not(.on){ color:var(--text); }
.kd-tab.on{ color:var(--sand); border-bottom-color:var(--sand); }

.kd-sec{ padding:10px 0 4px; }

/* legend icons */
.lg-i svg{width:14px;height:14px;fill:none;stroke:var(--dim);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}


/* ════════════════════════════════════════════════════════
   v20 — quick start
   ════════════════════════════════════════════════════════ */
.guide-btn{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--dim); }
.guide-btn:hover{ color:var(--sand); }
.intro-lead{
  margin:2px 0 18px;
  font-size:13.5px; color:var(--dim); line-height:1.55;
}
.intro-lead b{ color:var(--sand); }
.qs-step{
  display:flex; gap:12px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px;
  margin-bottom:8px;
}
.qs-n{
  flex:none;
  width:30px; height:30px;
  display:grid; place-items:center;
  border:1px solid color-mix(in srgb, var(--sand) 55%, transparent);
  border-radius:50%;
  font-family:var(--font-display);
  font-weight:700; font-size:15px;
  color:var(--sand);
}
.qs-body{ min-width:0; }
.qs-body h3{
  margin:3px 0 4px;
  font-family:var(--font-display);
  font-size:14px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--text);
}
.qs-body p{
  margin:0;
  font-size:13px; color:var(--dim); line-height:1.55;
}
.qs-body p b{ color:var(--text); font-weight:600; }
.qs-body .chipbtn{ margin-top:9px; }
.intro-cta{ display:block; margin:16px auto 0; }
.intro .credits{ border-top:none; padding-top:18px; }


/* Two 38px header buttons + brand + points on the smallest phones:
   tighten chrome so the row never has to fight for space. */
@media (max-width:380px){
  .hdr-toggle{ width:33px; height:33px; margin-left:6px; }
  .hdr-toggle svg{ width:14px; height:14px; }
  .guide-btn{ font-size:13px; }
  .brand{ font-size:16px; }
}


/* Quick Start: the "reopen this guide" tip gets its own callout instead
   of hiding inside a long dim sentence — easy to spot, easy to remember. */
.intro-recall{
  display:flex; align-items:center; gap:10px;
  background:color-mix(in srgb, var(--sand) 10%, var(--panel));
  border:1px solid color-mix(in srgb, var(--sand) 45%, var(--line));
  border-radius:var(--radius);
  padding:10px 12px;
  margin:0 0 18px;
  font-size:13px; color:var(--text); line-height:1.45;
}
.intro-recall b{ color:var(--sand); }
.intro-recall-q{
  flex:none;
  width:26px; height:26px;
  display:grid; place-items:center;
  border-radius:50%;
  border:1px solid var(--sand);
  font-family:var(--font-display); font-weight:700; font-size:14px;
  color:var(--sand);
}


/* Paste button — small, overlaps the import textarea's corner so pasting
   a loadout is one tap instead of a tap-then-menu-then-paste. */
.ta-wrap{ position:relative; }
.ta-wrap .export-ta{ padding-right:44px; }
.paste-btn{
  position:absolute; top:8px; right:8px;
  width:28px; height:28px;
  display:grid; place-items:center;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:5px;
  color:var(--dim);
  cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;
}
.paste-btn svg{
  width:14px; height:14px;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.paste-btn:hover{ border-color:var(--sand); color:var(--sand); }
.paste-btn.ok{ border-color:var(--sand); color:var(--sand); background:color-mix(in srgb, var(--sand) 16%, var(--panel-2)); }
.paste-btn.err{ border-color:var(--alert); color:var(--alert); }


/* Kit card quick-save: brief error state when the direct save fails
   (storage full etc) — same red language used elsewhere for trouble. */
.kb-btn.save-flash-err{
  background:transparent; color:var(--alert); border-color:var(--alert);
}


/* ── Imported-gear breakdown (Kit Manager, "View gear") ─────────────── */
.gear-view{
  margin:0 0 10px;
  display:flex; flex-direction:column; gap:12px;
}
.gear-sect{
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:9px 11px;
}
.gear-hd{
  display:flex; align-items:baseline; gap:7px;
  font-family:var(--font-display);
  font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text);
  margin-bottom:5px;
}
.gear-ic{
  flex:none; align-self:center;
  width:16px; height:16px;
  display:grid; place-items:center;
  color:var(--sand);
}
.gear-ic svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.gear-ic-other{ color:var(--dim); }
.gear-cn{
  font-family:var(--font-body);
  font-weight:500; letter-spacing:normal; text-transform:none;
  font-size:12px; color:var(--faint);
}
.gear-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:3px 0; font-size:13px;
  border-top:1px solid var(--line);
}
.gear-row:first-of-type{ border-top:none; }
.gr-nm{ min-width:0; }
.gr-q{
  flex:none;
  font-family:var(--font-display); font-weight:700; font-size:12.5px;
  color:var(--dim);
  font-variant-numeric:tabular-nums;
}
.gear-empty{
  margin:0; font-size:12px; color:var(--faint); font-style:italic;
}
.gear-note{
  margin:2px 2px 0; font-size:12px; color:var(--dim); line-height:1.5;
}
.gear-note b{ color:var(--sand); font-weight:700; }


/* ── Import tab: paste is the primary action, raw text stays hidden ── */
.import-cta{
  margin-left:0; width:100%;
  display:flex; align-items:center; justify-content:center; gap:9px;
  height:46px;
  margin:2px 0 10px;
}
.import-cta svg{
  width:17px; height:17px; flex:none;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}

.accordion-toggle{
  display:flex; align-items:center; gap:5px;
  background:none; border:none; padding:4px 2px;
  color:var(--dim); font-size:12.5px; font-family:var(--font-body);
  cursor:pointer;
  margin-bottom:2px;
}
.accordion-toggle:hover{ color:var(--sand); }
.accordion-toggle svg{
  width:12px; height:12px;
  fill:none; stroke:currentColor; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .18s ease;
}
.accordion-toggle.open svg{ transform:rotate(90deg); }
#manualImportWrap{ margin-top:8px; }


/* Toast — brief, non-modal confirmation (e.g. "switched to CMT").
   No shadow, per the site's own no-shadow rule; separation comes from
   the sand border against the panel tone alone. */
.toast{
  position:fixed;
  left:50%; bottom:calc(88px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(8px);
  max-width:min(92vw, 420px);
  display:flex; align-items:center; gap:12px;
  background:var(--panel-2);
  border:1px solid var(--sand);
  border-radius:var(--radius);
  padding:10px 12px 10px 16px;
  font-size:13px; color:var(--text); line-height:1.4;
  z-index:80;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.toast > span{ flex:1; min-width:0; }
.toast-action{
  flex:none;
  background:none; border:none;
  color:var(--sand); font-weight:700; font-size:13px;
  font-family:var(--font-display); letter-spacing:.04em; text-transform:uppercase;
  padding:6px 4px; cursor:pointer;
}
.toast-action:hover{ text-decoration:underline; }


/* ── Saved-kit row actions: icon buttons, not text — a distinct sk- prefix
   since .si-del is already used (as text) by the unfit-items tray on the
   pack page; sharing the class would have icon-ified that button too. */
.sk-rename, .sk-dupe, .sk-del{
  display:grid; place-items:center;
  width:28px; padding:0 !important;
}
.sk-rename svg, .sk-dupe svg, .sk-del svg{
  width:14px; height:14px;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.save-item button.sk-del:hover{ border-color:var(--alert); color:var(--alert); }

/* ── Saved-kit rows are click-to-load now; only Duplicate/Delete opt out */
.save-item .si-main{ cursor:pointer; border-radius:4px; transition:background .12s; }
.save-item .si-main:hover{ background:color-mix(in srgb, var(--sand) 8%, transparent); }
.save-item .si-main:focus-visible{ outline:2px solid var(--sand); outline-offset:2px; }

/* ── Save tab: quiet context line above the name field ────────────── */
.save-status{
  margin:0 0 6px; font-size:12px; color:var(--dim); line-height:1.4;
}
.save-status b{ color:var(--text); font-weight:600; }

/* ── Load tab: confirm banner when loading would drop unsaved changes ─ */
.load-confirm{
  background:color-mix(in srgb, var(--alert) 10%, var(--panel));
  border:1px solid color-mix(in srgb, var(--alert) 45%, var(--line));
  border-radius:var(--radius);
  padding:10px 12px;
  margin-bottom:10px;
}
.load-confirm p{ margin:0 0 8px; font-size:12.5px; color:var(--text); line-height:1.45; }
.load-confirm p b{ color:var(--sand); }
.load-confirm-btns{ display:flex; gap:8px; flex-wrap:wrap; }
.load-confirm-btns .chipbtn{ height:32px; padding:0 12px; font-size:12px; }

.si-active{ color:var(--sand); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.04em; }

.kd-divider{ height:1px; background:var(--line); margin:0 0 10px; }

.btn-copy:disabled{
  background:var(--panel-2); color:var(--faint); cursor:default;
  border-color:var(--line);
}


/* ── Advanced mode: toggle + gear/medical provenance lines ─────────── */
.adv-toggle{
  display:flex; align-items:center; gap:7px;
  margin:0 0 8px;
  font-size:11.5px; color:var(--dim);
  cursor:pointer;
}
.adv-toggle input{ width:15px; height:15px; accent-color:var(--sand); margin:0; flex:none; }
.cur-adv{ margin-top:2px; }
.cur-adv b{ color:var(--text); font-weight:600; }
.cur-adv.warn{ color:#e0b04e; }

/* ── Sub-tabs: Kits / Rigs / Med Kits, nested inside the Saved tab ──── */

.subsec-h{ margin-top:14px !important; }

.kd-listbar{ display:flex; align-items:center; justify-content:space-between; margin:0 0 10px; }


/* ── Saved kit rows: the kit itself, plus its two halves ──────────── */
.save-wrap{
  /* flex:none is load-bearing. .save-list is a flex column with a
     max-height, and overflow:hidden here (needed to clip the sub-chips
     to the rounded corner) drops this item's automatic minimum size
     from auto to 0 — which let flex-shrink squash the rows, clipping
     the name's descenders and hiding the meta line once a few kits
     were saved. Without overflow:hidden the corners leak; without
     flex:none the rows collapse. Both are required. */
  flex:none;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--panel-2);
  margin-bottom:6px;
  overflow:hidden;
}
.save-wrap.active{
  border-color:var(--sand);
  background:color-mix(in srgb, var(--sand) 9%, var(--panel-2));
}
.save-wrap .save-item{
  border:none; background:transparent; margin:0; border-radius:0;
}
/* Indented half-selectors — deliberately subordinate to the row above. */
.si-parts{
  display:flex; gap:6px;
  padding:0 10px 8px 22px;
}
.si-part{
  flex:1;
  height:26px;
  border:1px solid var(--line); border-radius:20px;
  background:var(--bg);
  color:var(--dim); cursor:pointer;
  font-family:var(--font-display);
  font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.si-part:hover:not(.on){ border-color:var(--sand); color:var(--sand); }
.si-part.on{
  background:var(--sand); border-color:var(--sand); color:#1c1a12;
}


/* Search and the save action share one line — the button sits outside
   the search wrapper so it survives the wrapper being hidden when there
   are no saved kits yet (exactly when saving matters most). */
.list-actions{ display:flex; align-items:center; gap:8px; margin:0 0 10px; }
.list-actions .kd-search{ flex:1; min-width:0; margin:0; }
.list-actions #btnSaveNew{ flex:none; height:36px; padding:0 16px; white-space:nowrap; }
@media (max-width:400px){ .list-actions #btnSaveNew{ padding:0 12px; font-size:13px; } }


/* Identity line doubles as the gear disclosure — always available, since
   there is always gear that will be exported (imported or the template). */
.cur-disclose{
  display:flex; align-items:center; gap:6px;
  width:100%; text-align:left;
  background:none; border:none; padding:2px 0;
  cursor:pointer;
  font:inherit;
}
.cur-disclose:hover{ color:var(--text); }
.disclose-chev{
  width:11px; height:11px; flex:none;
  fill:none; stroke:currentColor; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .18s ease;
}
.cur-disclose.open .disclose-chev{ transform:rotate(90deg); }

/* Revert-to-template: quiet, and only reachable once the gear is open. */
.gear-drop{
  align-self:flex-start;
  margin-top:2px;
  background:none; border:none;
  padding:4px 2px;
  color:var(--alert); cursor:pointer;
  font-size:12px; text-decoration:underline;
}
.gear-drop:hover{ filter:brightness(1.15); }

.cap-src{ font-size:11px; color:var(--dim); font-variant-numeric:tabular-nums; }

.unfit-actions{ margin:0 0 10px; }

/* A container the loadout doesn't include — visibly inert, so an absent
   vest can't be mistaken for a full one. */
.cont.absent{ opacity:.5; }
.cont.absent .cont-gauge{ display:none; }
.cont.absent .cap-src{ color:var(--faint); font-style:italic; }

.cont-gear{
  font-size:11.5px; color:var(--sand);
  margin:-2px 0 6px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}


/* ════════════════════════════════════════════════════════
   DESKTOP / POINTER LAYER
   Everything above this point is a phone layout that merely
   gets centred on a big screen. These rules only widen the
   breakpoints upward — no mobile rule is touched.
   ════════════════════════════════════════════════════════ */

/* Wide screens: use the horizontal space instead of leaving ~40% of the
   viewport as empty margin, and put the catalogue in two columns so the
   62 items are scannable rather than a single long strip. Section
   headers span the full width so category grouping still reads. */
@media (min-width:1000px){
  main{ max-width:1180px; }
  .top-inner, .ctrl-wrap, .kit-wrap, .bar-inner{ max-width:1180px; }

  .sect{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:18px;
    align-items:start;
  }
  .sect-hd{ grid-column:1 / -1; }
}

/* The controls row is left-packed, which fills an 880px column but
   leaves a large dead zone once the page widens. Split it the way a
   desktop toolbar reads: everything that CONFIGURES the kit on the left
   (billet, class, presets, CBRN), everything that ACTS on it pinned
   right. CBRN is configuration but sits after the action buttons in the
   DOM (correct for mobile stacking), so it's reordered visually only —
   the markup and mobile layout are untouched. */
@media (min-width:1000px){
  .controls .cbrn-toggle{ order:1; }   /* config, so it belongs beside the cluster */
  .controls #billetHelp{ order:2; }
  .controls #presetNote{ order:3; }
  .controls #billetWarn{ order:4; }
  .controls #btnClear{ order:5; }
  .controls #btnKits{ order:6; }

  /* The kit card stacks two short lines and stretches the remaining
     width as empty space. On a wide screen they fit on one line, which
     halves the card's height and closes the gap to the buttons. */
  .kit-card .kb-txt{ flex-direction:row; align-items:baseline; gap:12px; }
  .kit-card .kb-id{ flex:none; }
}

/* Only pin the actions right once the whole row genuinely fits on one
   line (measured: it needs ~1510px). margin-left:auto is a trap below
   that — a flex item that wraps alone still gets shoved to the right of
   its new line, which stranded Clear/Load-Import on an empty band at
   iPad width. Under this threshold they simply wrap left, under the
   cluster, which reads as deliberate. */
@media (min-width:1560px){
  .controls #btnClear{ margin-left:auto; }
}

@media (min-width:1500px){
  main{ max-width:1440px; }
  .top-inner, .ctrl-wrap, .kit-wrap, .bar-inner{ max-width:1440px; }
  .sect{ grid-template-columns:1fr 1fr 1fr; }
}

/* Dialogs were pinned at 560px, which reads as a thin ribbon on a
   desktop display. The gear breakdown in particular has ~8 sections
   that shouldn't need a long scroll when the room is right there. */
@media (min-width:760px){
  dialog{ width:min(720px, calc(100vw - 48px)); }
  #dlgKits{ width:min(780px, calc(100vw - 48px)); }
  #dlgKits .dlg-body{ max-height:min(70dvh, 620px); }

  .gear-view{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    align-items:start;
  }
  .gear-note, .gear-drop{ grid-column:1 / -1; }

  .cur-id{ font-size:15px; }
}

/* Mouse and trackpad users don't need 44px thumb targets, and shrinking
   them meaningfully shortens the list. Gated on a fine pointer so touch
   laptops and tablets keep the large targets. */
@media (hover:hover) and (pointer:fine){
  .stepper button{ width:34px; height:34px; }
  .stepper .qty{ height:34px; min-width:30px; }
  .chipbtn{ height:34px; }
  .loc-b{ width:30px; height:30px; }
  .loc-b svg{ width:15px; height:15px; }
  .save-item button{ height:30px; }

  /* Pointer users get a clearer row hover than a touch device needs. */
  .row:hover{ background:color-mix(in srgb, var(--sand) 4%, transparent); }
}

/* ════════════════════════════════════════════════════════
   v22 — faster scanning, safer changes, actionable packing
   ════════════════════════════════════════════════════════ */
.pts .remaining{
  display:inline-block; margin-top:3px;
  padding:2px 6px; border-radius:8px;
  background:color-mix(in srgb, var(--sand) 10%, transparent);
  color:var(--dim); font-size:9.5px; font-weight:600;
}
.pts .remaining.low{ color:#e0b04e; background:rgba(224,176,78,.12); }
.pts .remaining.none{ color:var(--alert); background:rgba(226,86,74,.12); }
.billet-help{
  flex-basis:100%; margin-top:-3px;
  font-size:11px; color:var(--dim); line-height:1.35;
}
.chip-count{
  min-width:17px; height:17px; padding:0 5px;
  display:inline-grid; place-items:center;
  border-radius:9px; background:var(--panel-2);
  color:var(--dim); font-size:10px; font-variant-numeric:tabular-nums;
}
.cat-chip.on .chip-count{
  background:color-mix(in srgb, var(--sand) 18%, var(--panel-2)); color:var(--sand);
}
.row .weight{ color:var(--dim); font-size:11px; }
.dlg-warn{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.warn-fix{
  flex:none; min-height:30px; padding:0 10px;
  border:1px solid rgba(224,176,78,.45); border-radius:5px;
  background:rgba(224,176,78,.1); color:#e0b04e;
  font-family:var(--font-display); font-weight:700; font-size:11px;
  letter-spacing:.04em; text-transform:uppercase; cursor:pointer;
}
.warn-fix:hover:not(:disabled){ background:rgba(224,176,78,.18); border-color:#e0b04e; }
.warn-fix:disabled{ color:var(--faint); border-color:var(--line); background:transparent; cursor:default; }
.pack-tools{ display:flex; align-items:flex-start; gap:8px; margin-bottom:8px; }
.pack-tools .loc-legend{ flex:1; margin:0; }
.pack-tools .chipbtn{ flex:none; white-space:nowrap; }
.chipbtn:disabled{ opacity:.42; cursor:default; border-color:var(--line); color:var(--faint); }

@media (max-width:560px){
  .pack-tools{ flex-direction:column; }
  .pack-tools .chipbtn{ width:100%; }
  .dlg-warn{ align-items:flex-start; flex-direction:column; }
  .warn-fix{ width:100%; }
}

/* ════════════════════════════════════════════════════════
   v23 — appearance switch + daylight field-manual theme
   Dark remains the base theme above. Everything below is either
   shared toggle behaviour or deliberately gated behind light mode.
   ════════════════════════════════════════════════════════ */

/* Theme control: show the icon for the mode the button will switch to. */
.theme-toggle{ flex:none; position:relative; }
.theme-toggle svg{
  position:absolute; width:17px; height:17px;
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.theme-toggle .theme-moon{ display:none; }
.top.collapsed .theme-toggle svg{ transform:none; }
[data-theme="light"] .theme-toggle .theme-sun{ display:none; }
[data-theme="light"] .theme-toggle .theme-moon{ display:block; }
.packtop .theme-toggle{ margin-left:auto; }

/* Mobile long-press should change quantity, never highlight or summon a
   selection callout. Keep the rest of the item row normally selectable. */
.stepper, .stepper button, .stepper .qty{
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}

[data-theme="light"]{
  --bg:      #f3ebdd;
  --panel:   #faf5e9;
  --panel-2: #fffdf7;
  --line:    #c8bda8;
  --text:    #253127;
  --dim:     #596257;
  --faint:   #6d756a;
  --sand:    #9a762f;
  --alert:   #7a2e2e;
  color-scheme:light;
}

[data-theme="light"] body{
  background-color:var(--bg);
  background-image:
    radial-gradient(circle at 18% 6%, rgba(255,255,255,.72), transparent 32%),
    radial-gradient(circle at 86% 28%, rgba(154,118,47,.05), transparent 25%),
    repeating-linear-gradient(0deg, rgba(37,49,39,.018) 0 1px, transparent 1px 5px);
}

/* Navigation becomes a firm paper ledger rather than translucent glass. */
[data-theme="light"] .top{
  background:rgba(250,245,233,.97);
  border-color:#b9ad97;
  box-shadow:0 2px 9px rgba(61,52,37,.09);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
[data-theme="light"] .brand{ color:#263228; }
[data-theme="light"] .brand em{ color:var(--alert); }
[data-theme="light"] .brand small{ color:#626a60; }
[data-theme="light"] .hdr-toggle{
  background:#fffdf7;
  border-color:#bdb19c;
  color:#465148;
}
[data-theme="light"] .hdr-toggle:hover{
  color:#72561f;
  border-color:var(--sand);
  background:#f3e8cd;
}
[data-theme="light"] .pts b{ color:#73571f; }
[data-theme="light"] .pts b.full{ color:var(--alert); }
[data-theme="light"] .pts .remaining{
  background:#e9dec3;
  color:#4d594e;
}
[data-theme="light"] .pts .remaining.low{
  color:#6d4f11;
  background:#f0dfb5;
}
[data-theme="light"] .pts .remaining.none{
  color:var(--alert);
  background:#f0dad4;
}

/* Controls read as one compact field order. */
[data-theme="light"] .ctrl-wrap{ padding-top:12px; }
[data-theme="light"] .controls{
  padding:10px;
  background:rgba(250,245,233,.88);
  border:1px solid #c8bda8;
  border-radius:7px;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
}
[data-theme="light"] .billet-cluster{
  background:#f5eddd;
  border-color:#bbae98;
}
[data-theme="light"] .controls select,
[data-theme="light"] .chipbtn,
[data-theme="light"] .btn-copy,
[data-theme="light"] .dlg-close,
[data-theme="light"] .loc-b{
  background:#fffdf7;
  border-color:#c2b6a1;
  color:#465148;
}
[data-theme="light"] .controls select{ color:#253127; }
[data-theme="light"] .chipbtn:hover:not(:disabled),
[data-theme="light"] .btn-copy:hover:not(:disabled),
[data-theme="light"] .dlg-close:hover,
[data-theme="light"] .loc-b:hover:not(:disabled):not(.on){
  background:#eee2c5;
  border-color:var(--sand);
  color:#644a18;
}
[data-theme="light"] .chipbtn.primary{
  background:#e9dec3;
  color:#624919;
  border-color:#a48037;
}
[data-theme="light"] .chipbtn.danger:hover{ background:#f0dad4; color:var(--alert); border-color:var(--alert); }
[data-theme="light"] .cbrn-toggle{
  background:#f4ead3;
  border-color:#b39351;
  color:#445047;
}
[data-theme="light"] .cbrn-toggle b,
[data-theme="light"] .billet-warn,
[data-theme="light"] .cur-adv.warn{ color:#755612; }
[data-theme="light"] .cbrn-toggle input{ accent-color:#8a6929; }

/* Search and filters are crisp enough for sunlight and remain distinct
   from the sticky header's base sheet. */
[data-theme="light"] .search input,
[data-theme="light"] .save-row input,
[data-theme="light"] .export-ta,
[data-theme="light"] .cap-in{
  background:#fffdf7;
  border-color:#bbae98;
  color:#253127;
  box-shadow:0 1px 1px rgba(65,55,37,.04) inset;
}
[data-theme="light"] .search input::placeholder{ color:#757d72; }
[data-theme="light"] .search svg{ stroke:#626c62; }
[data-theme="light"] .cat-chip{
  background:#fffdf7;
  border-color:#c1b49f;
  color:#4f5a51;
}
[data-theme="light"] .cat-chip:hover{ background:#f1e6cd; border-color:#a78e5c; }
[data-theme="light"] .cat-chip.on{
  color:#fffdf7;
  border-color:#3c4a38;
  background:#3c4a38;
  box-shadow:0 1px 2px rgba(37,49,39,.13);
}
[data-theme="light"] .cat-chip.on .dot{ outline:1px solid rgba(255,255,255,.7); outline-offset:1px; }
[data-theme="light"] .cat-chip.on .chip-count{ background:#e9dec3; color:#384437; }

/* Darken the MARCH category hues for accessibility on warm paper. */
[data-theme="light"] #sect-bleeding,
[data-theme="light"] [data-cat="bleeding"]{ --c:#9b342f !important; }
[data-theme="light"] #sect-airway,
[data-theme="light"] [data-cat="airway"]{ --c:#2d6790 !important; }
[data-theme="light"] #sect-breathing,
[data-theme="light"] [data-cat="breathing"]{ --c:#27705b !important; }
[data-theme="light"] #sect-circ,
[data-theme="light"] [data-cat="circ"]{ --c:#654b8d !important; }
[data-theme="light"] #sect-fluids,
[data-theme="light"] [data-cat="fluids"]{ --c:#2b6c80 !important; }
[data-theme="light"] #sect-liqmed,
[data-theme="light"] [data-cat="liqmed"]{ --c:#47702f !important; }
[data-theme="light"] #sect-pkgmed,
[data-theme="light"] [data-cat="pkgmed"]{ --c:#8b511b !important; }
[data-theme="light"] #sect-disability,
[data-theme="light"] [data-cat="disability"]{ --c:#6f5c18 !important; }

/* Catalogue rows use restrained ledger rules; the selected row rises one
   visual level and the category edge remains the primary locator. */
[data-theme="light"] .sect-hd h2{ color:#303c32; }
[data-theme="light"] .sect-hd .n{
  background:#e9dec3;
  color:#536055;
}
[data-theme="light"] .row{
  background:rgba(250,245,233,.92);
  border-color:#cbbfa9;
  box-shadow:none;
}
[data-theme="light"] .row:hover{ background:#f6edda; }
[data-theme="light"] .row.picked{
  background:#fffdf7;
  border-color:#bbae98;
  box-shadow:0 2px 7px rgba(56,48,33,.08);
}
[data-theme="light"] .row .name{ color:#465047; }
[data-theme="light"] .row.picked .name{ color:#253127; }
[data-theme="light"] .row .cost,
[data-theme="light"] .row .uses{ color:#687168; }
[data-theme="light"] .row .cbrn-item{
  color:#6d4f11;
  background:#f1e4c6;
  border-color:#ad8a43;
}
[data-theme="light"] .row .cost.free{ color:#3f6b38; }
[data-theme="light"] .row .weight{ color:#59645b; }
[data-theme="light"] .row.locked{
  opacity:.62;
  background-color:#ede5d7;
  background-image:repeating-linear-gradient(135deg, rgba(37,49,39,.025) 0 5px, transparent 5px 10px);
}
[data-theme="light"] .stepper button,
[data-theme="light"] .stepper .qty{
  background:#fffdf7;
  border-color:#b8ad99;
}
[data-theme="light"] .stepper button{ color:#344138; }
[data-theme="light"] .stepper button:hover:not(:disabled){
  background:#e9dec3;
  border-color:#9a762f;
  color:#5e4618;
}
[data-theme="light"] .stepper button:active:not(:disabled){ background:#dfd0aa; }
[data-theme="light"] .stepper button:disabled{ background:#ebe4d7; color:#777f76; opacity:.55; }
[data-theme="light"] .stepper .qty{ color:#626c62; }
[data-theme="light"] .row.picked .qty{ color:var(--c); background:#faf6ec; }

/* Attached kit is the sole elevated status card in the builder. */
[data-theme="light"] .kit-banner,
[data-theme="light"] .kit-card{
  background:#fffdf7;
  border-color:#a98743;
  border-style:solid;
  box-shadow:0 3px 9px rgba(55,47,32,.1);
}
[data-theme="light"] .kit-banner b,
[data-theme="light"] .kit-banner svg,
[data-theme="light"] .kit-state.ok{ color:#72571e; stroke:#8a6828; }
[data-theme="light"] .kit-state.warn,
[data-theme="light"] .cur-dirty{ color:var(--alert); }
[data-theme="light"] .kb-btn.save-nudge,
[data-theme="light"] .btn-copy.accent,
[data-theme="light"] .btn-summary,
[data-theme="light"] .loc-b.on{
  background:#8d6925;
  border-color:#765719;
  color:#fffdf7;
}
[data-theme="light"] .kb-btn.save-nudge:hover,
[data-theme="light"] .btn-copy.accent:hover,
[data-theme="light"] .btn-summary:hover{ filter:brightness(.94); color:#fffdf7; }
[data-theme="light"] .loc-b.on::after{ border-color:#fffdf7; }

/* Packing view: individual sheets sit on the canvas, with weight and
   placement controls sharing the same brass interaction language. */
[data-theme="light"] .cont,
[data-theme="light"] .stacks{
  background:#faf5e9;
  border-color:#c3b7a2;
}
[data-theme="light"] .cont{ box-shadow:0 1px 2px rgba(57,49,34,.05); }
[data-theme="light"] .budget{ background:#ded4c3; }
[data-theme="light"] .cont.absent{ background:#e9e2d6; }
[data-theme="light"] .loc-legend{ background:#f4ecdc; border-color:#b7aa93; }
[data-theme="light"] .stack-line{ border-color:#d1c6b2; }
[data-theme="light"] .unfit-box,
[data-theme="light"] .load-confirm{
  background:#f0dad4;
  border-color:#b86a61;
}
[data-theme="light"] .dlg-warn{
  color:#6e4f0f;
  background:#f1e4c6;
  border-color:#b9964d;
}
[data-theme="light"] .warn-fix{
  color:#65480d;
  background:#f8efdc;
  border-color:#a9853b;
}
[data-theme="light"] .warn-fix:hover:not(:disabled){ background:#e7d5ad; border-color:#8b6928; }

/* Modals, saved kits and onboarding use opaque paper and clear section
   boundaries, avoiding the muddy overlay effect common to auto-inverted UI. */
[data-theme="light"] dialog{
  background:#faf5e9;
  border-color:#aa9c84;
  box-shadow:0 18px 52px rgba(37,49,39,.24);
}
[data-theme="light"] dialog::backdrop{ background:rgba(37,49,39,.48); }
[data-theme="light"] .dlg-hd,
[data-theme="light"] .dlg-ft{ background:#f5eddd; }
[data-theme="light"] .dlg-line,
[data-theme="light"] .dlg-ft{ border-color:#ccc0aa; }
[data-theme="light"] .save-item,
[data-theme="light"] .intro-recall,
[data-theme="light"] .qs-step{
  background:#fffdf7;
  border-color:#c4b7a1;
}
[data-theme="light"] .save-item .si-main:hover{ background:#eee2c5; }
[data-theme="light"] .toast{
  background:#253127;
  color:#fffdf7;
  border-color:#425046;
  box-shadow:0 7px 24px rgba(37,49,39,.25);
}
[data-theme="light"] .toast-action{ color:#e8cf92; }

/* The action bar is an elevated command strip, visually separate from
   catalogue rows when the page is scrolled on a phone. */
[data-theme="light"] .bar-bottom{
  background:rgba(250,245,233,.98);
  border-color:#b9ad97;
  box-shadow:0 -3px 12px rgba(55,47,32,.1);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
[data-theme="light"] button:active:not(:disabled){ transform:translateY(1px); }

@media (max-width:480px){
  .brand-row{ gap:6px; }
  .hdr-toggle{ margin-left:3px; }
  .theme-toggle{ margin-left:3px; }
  [data-theme="light"] .controls{ padding:8px; }
}
@media (max-width:380px){
  .hdr-toggle{ width:31px; height:31px; margin-left:2px; }
  .theme-toggle svg{ width:15px; height:15px; }
  .brand{ font-size:15px; }
  .pts b{ font-size:18px; }
  .pts .cap, .pts .remaining{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  [data-theme="light"] button:active:not(:disabled){ transform:none; }
}