/* packing.html — scoped under .pk-app + recoloured.
   Source: _work/packing.html's own <style> (6.2KB). 736 items, no photos —
   icon-only cards (imgMap emoji), unchanged from Phase A's own cleanup. */
.pk-app{--bg:#f7f5f1;--red:#a24c45;--shadow:0 10px 30px rgba(35,25,15,.08)}.pk-app *{box-sizing:border-box}.pk-app{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink)}.pk-app header{padding:28px 18px 18px;background:linear-gradient(135deg,#211d1a,#3b3026);color:#fff;position:sticky;top:0;z-index:20;box-shadow:0 8px 30px rgba(0,0,0,.18)}.pk-app .wrap{max-width:1250px;margin:auto}.pk-app h1{margin:0;font-family:Georgia,serif;font-size:clamp(27px,5vw,48px);letter-spacing:-.6px}.pk-app .sub{margin:7px 0 0;color:#eadfce;font-size:14px}.pk-app .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}.pk-app .stat{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:15px;padding:12px}.pk-app .stat b{font-size:22px;display:block}.pk-app .stat span{font-size:13px;color:#d7cbbd}.pk-app .controls{padding:15px 18px;position:sticky;top:138px;z-index:15;background:rgba(247,245,241,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.pk-app .controlgrid{max-width:1250px;margin:auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:9px}.pk-app input, .pk-app select, .pk-app button{height:44px;border:1px solid var(--line);border-radius:12px;padding:0 12px;background:#fff;font:inherit}.pk-app button{cursor:pointer;font-weight:700}.pk-app .primary{background:var(--gold);color:white;border-color:var(--gold)}.pk-app .dark{background:#28231f;color:#fff;border-color:#28231f}.pk-app main{max-width:1250px;margin:22px auto;padding:0 18px}.pk-app .toolbar{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:15px;flex-wrap:wrap}.pk-app .toolbar small{color:var(--muted)}.pk-app .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.pk-app .card{background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}.pk-app .hero{height:145px;background-size:cover;background-position:center;position:relative}.pk-app .hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.72))}.pk-app .hero h2{position:absolute;z-index:1;bottom:12px;left:15px;right:15px;color:#fff;margin:0;font:700 22px Georgia,serif}.pk-app .body{padding:13px}.pk-app .item{display:grid;grid-template-columns:28px 1fr 70px 90px;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid #f0ece7}.pk-app .item:last-child{border-bottom:0}.pk-app .item input[type=checkbox]{width:20px;height:20px;accent-color:var(--green)}.pk-app .name{font-size:13px;font-weight:650}.pk-app .meta{font-size:13px;color:var(--muted)}.pk-app .qty{height:34px;text-align:center;padding:0 4px}.pk-app .status{height:34px;font-size:13px;padding:0 5px}.pk-app .status.done{border-color:#b9d6c8;background:#edf8f2;color:#246148}.pk-app .badges{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}.pk-app .badge{font-size:13px;padding:5px 8px;border-radius:99px;background:#f3eee7;color:var(--muted)}.pk-app footer{padding:35px 18px 50px;text-align:center;color:var(--muted);font-size:13px}.pk-app .empty{padding:50px;text-align:center;background:#fff;border:1px dashed var(--line);border-radius:18px;color:var(--muted)}@media(max-width:800px){.pk-app .stats{grid-template-columns:repeat(2,1fr)}.pk-app .controlgrid{grid-template-columns:1fr 1fr}.pk-app .controlgrid input{grid-column:1/-1}.pk-app .grid{grid-template-columns:1fr}.pk-app .controls{top:151px}}@media(max-width:480px){.pk-app header{position:relative}.pk-app .controls{position:relative;top:auto}.pk-app .controlgrid{grid-template-columns:1fr}.pk-app .grid{gap:12px}.pk-app .item{grid-template-columns:28px 1fr 58px}.pk-app .status{grid-column:2/4}}.pk-app .catalogue{display:block}.pk-app .section-card{background:#fff;border:1px solid var(--line);border-radius:24px;margin:0 0 20px;overflow:hidden;box-shadow:0 12px 32px rgba(35,25,15,.07)}.pk-app .section-head{padding:16px 17px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(135deg,#fffaf2,#f8f1e7);border-bottom:1px solid var(--line)}.pk-app .section-title{display:flex;align-items:center;gap:12px}.pk-app .section-icon{width:48px;height:48px;border-radius:15px;background:linear-gradient(135deg,#f6d77a,#d9a62a);box-shadow:0 5px 15px rgba(0,0,0,.12);flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:24px}.pk-app .section-head h2{font:700 21px Georgia,serif;margin:0}.pk-app .section-head p{margin:3px 0 0;font-size:13px;color:var(--muted)}.pk-app .section-count{background:#211d1a;color:#fff;border-radius:99px;padding:7px 10px;font-size:13px;white-space:nowrap}.pk-app .item-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:14px}.pk-app .item-card{position:relative;border:1px solid #eee7df;border-radius:17px;background:#fff;overflow:hidden;transition:.18s;min-width:0}.pk-app .item-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(35,25,15,.08)}.pk-app .item-card.selected{border-color:var(--gold-ink);box-shadow:0 0 0 2px rgba(184,138,59,.12)}.pk-app .item-photo{height:80px;background:linear-gradient(135deg,#fff7e6,#f6d77a33);position:relative;display:flex;align-items:center;justify-content:flex-end;padding:6px}.pk-app .item-photo-emoji{position:absolute;left:8px;top:8px;font-size:30px}.pk-app .pick{position:absolute;z-index:2;top:9px;left:9px;width:25px!important;height:25px!important;accent-color:#2d7258}.pk-app .item-info{padding:10px}.pk-app .item-name{font-size:13px;font-weight:750;line-height:1.25;min-height:33px}.pk-app .item-id{font-size:13px;color:#91877c;margin-top:3px}.pk-app .item-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:9px}.pk-app .item-actions input, .pk-app .item-actions select{height:34px;font-size:13px;padding:0 7px}.pk-app .mini-tag{display:inline-block;font-size:13px;border-radius:99px;padding:4px 7px;background:#f3eee7;color:var(--muted);margin-top:7px}.pk-app .selection-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.pk-app .selection-bar button{height:38px;font-size:13px}@media(max-width:1000px){.pk-app .item-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:700px){.pk-app .item-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:10px}.pk-app .item-photo{height:105px}.pk-app .section-head h2{font-size:18px}.pk-app .section-icon{width:42px;height:42px}}@media(max-width:430px){.pk-app .item-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pk-app .item-name{font-size:13px}.pk-app .item-actions{grid-template-columns:1fr}.pk-app .item-actions input, .pk-app .item-actions select{width:100%}}



.pk-note { text-align: center; color: var(--muted); font-size: 13px; margin: 24px 0 4px; }

/* --- Revision 2 fixes (see file header) --- */

/* First attempt here gave .pk-hero a forced dark-navy background to match
   the ORIGINAL 'header{...}' rule's intent (which no longer matches
   anything once the tag becomes <section class="pk-hero">) — but that
   fought the coordinator's actual instruction: with the hero forced dark
   UNCONDITIONALLY (deep-navy-grad is the same in both themes), a
   theme-adaptive var(--body-c) is dark-on-dark in light mode. Reverted:
   the hero now simply sits on the page's own normal background (light in
   light theme, dark in dark theme — verified live, h1 already reads fine
   there with no override, exactly as it did before ANY packing fix), and
   var(--body-c) alone is correct in BOTH themes because it is itself
   theme-adaptive (#3A4152 in light, #B9C5D8 in dark) — no conditional
   override needed once the background it sits on is also adaptive. */
.pk-app .sub { color: var(--body-c); }

/* card anatomy rewrite: tinted card (Rule 1) + left icon chip + right
   name/code/tag + a compact qty/status row — no image box. */
.pk-app .item-card {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--line); border-radius: 14px; padding: 10px;
  background: var(--card); transition: .18s; min-width: 0;
}
.pk-app .item-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(35,25,15,.08); }
.pk-app .item-card.selected { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201,168,76,.28); }
.pk-app .item-card.ab-tint-1 { background: var(--tint-1-bg); border-color: var(--tint-1-line); }
.pk-app .item-card.ab-tint-2 { background: var(--tint-2-bg); border-color: var(--tint-2-line); }
.pk-app .item-card.ab-tint-3 { background: var(--tint-3-bg); border-color: var(--tint-3-line); }
.pk-app .item-card.ab-tint-4 { background: var(--tint-4-bg); border-color: var(--tint-4-line); }
.pk-app .item-card.ab-tint-5 { background: var(--tint-5-bg); border-color: var(--tint-5-line); }
.pk-app .item-card.ab-tint-6 { background: var(--tint-6-bg); border-color: var(--tint-6-line); }
.pk-app .item-head { display: flex; align-items: flex-start; gap: 8px; padding-right: 22px; }
.pk-app .item-icon {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px;
  background: rgba(255,255,255,.55); display: flex; align-items: center;
  justify-content: center; font-size: 19px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.65);
}
:root[data-theme="dark"] .pk-app .item-icon,
:root:not([data-theme="light"]) .pk-app .item-icon {
  background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.pk-app .item-headtxt { min-width: 0; }
.pk-app .pick { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; margin: 0; }
.pk-app .item-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 2px; }
.pk-app .item-actions input, .pk-app .item-actions select { height: 32px; font-size: 13px; padding: 0 7px; }

/* '.section-head{background:linear-gradient(135deg,#fffaf2,#f8f1e7)}' is a
   literal (never mapped) always-light backdrop; once h2/p correctly
   inherit the AB theme-adaptive --ink/--muted (the fix two blocks up),
   dark-theme text on this still-light strip goes white-on-cream. Card
   background is the closest AB equivalent and is itself theme-adaptive. */
.pk-app .section-head { background: var(--card); }

/* the export button STILL rendered white-on-white after the class swap:
   the page's own 'input,select,button{background:#fff}' reset (scoped to
   '.pk-app button', specificity 0,1,1) beats a bare '.ab-btn--gold'
   (0,1,0) — one class does not out-rank one class + one tag. A selector
   that is actually MORE specific than the page's own reset is needed. */
.pk-app .controlgrid button.ab-btn--gold {
  background: var(--grad-cta) !important;
  color: #fff !important;
  border: 0 !important;
}