/* Brace For It V2 · /go-bag. Loads after tool.css and render.css. A tab per bag, the bag's list under it. */
.gobag #tool { display: grid; gap: var(--s4); }

/* the count: "2 of 5 bags packed" */
.gb-sum { display: grid; gap: 8px; }
.gb-big { margin: 0; font: 700 var(--t-lg)/1.2 var(--f-display); color: var(--ink); }
.gb-big .num { font-family: var(--f-data); }

/* who's going (only without a plan on this device); steppers as on the kit builder */
.gobag .who { border-bottom: 1px solid var(--line); }
.gobag .who > summary { min-height: var(--tap); display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; }
.gobag .who > summary::-webkit-details-marker { display: none; }
.gobag .who-s b { margin-right: 4px; }
.gobag .who-s > span:first-child { color: var(--ink-2); }
.gobag .who-c { font: 700 var(--t-sm)/1 var(--f-display); color: var(--ink); border: 1.5px solid var(--edge); border-radius: var(--r-md); padding: 8px 12px; white-space: nowrap; }
.gobag .who[open] .who-c { visibility: hidden; }
.steppers { display: grid; gap: 4px; }
@media (min-width: 560px) { .steppers { grid-template-columns: 1fr 1fr; column-gap: var(--s5); } }
.stepper { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 52px; border-bottom: 1px solid var(--line); }
.st-l { font-weight: 700; line-height: 1.2; }
.st-l small { display: block; font-weight: 400; font-size: var(--t-sm); color: var(--muted); }
.st-c { display: inline-flex; align-items: center; gap: 4px; }
.st-c button { width: var(--tap); height: var(--tap); border-radius: var(--r-md); border: 1.5px solid var(--edge); background: transparent; color: var(--ink);
  font: 700 22px/1 var(--f-data); cursor: pointer; }
.st-c button:disabled { opacity: .4; cursor: not-allowed; }
.st-c output { min-width: 2.2ch; text-align: center; font: 700 22px/1 var(--f-data); }
.gb-names { margin: var(--s2) 0 var(--s3); }

/* the tabs: one per bag, wrapping (never a sideways scroll) */
.gb-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.gb-tab { min-height: var(--tap); padding: 6px 12px; border-radius: var(--r-md); border: 1.5px solid var(--line); background: transparent; color: var(--ink);
  display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; cursor: pointer; text-align: left; max-width: 100%; }
.gb-tab b { font: 700 15px/1.2 var(--f-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14ch; }
.gb-tab .gb-c { font: 400 12px/1.2 var(--f-data); color: var(--ink-2); display: inline-flex; gap: 4px; align-items: center; }
.gb-tab .gb-ok { font-weight: 700; color: var(--ink); }
.gb-tab.packed { border-color: var(--edge); }
.gb-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.gb-tab[aria-selected="true"] .gb-c, .gb-tab[aria-selected="true"] .gb-ok { color: var(--bg); }
.gb-tab.gb-home, .gb-tab.gb-pet { border-style: dashed; }
.gb-tab[aria-selected="true"].gb-home, .gb-tab[aria-selected="true"].gb-pet { border-style: solid; }
@media (min-width: 600px) { .gb-tab b { max-width: 20ch; } }

/* one bag */
.gb-panel { display: grid; gap: var(--s2); outline-offset: 4px; }
/* gobag.js draws the tabs and the bag's list after load: hold their room so the cards below don't jump (Lighthouse CLS,
   wave-70 gates). Below the drawn height (a bag's list is ~540 px), so the finished page looks the same. */
@media (scripting: enabled) { .gb-tabs { min-height: 44px; } .gb-panel { min-height: 500px; } }
.gb-ph { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.gb-h { margin: 0; font: 700 var(--t-lg)/1.25 var(--f-display); outline-offset: 4px; }
.gb-age { margin: -4px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gb-age .link-btn { min-height: 32px; font-size: var(--t-sm); }
.gb-pick { display: grid; gap: 8px; }
.gb-pick-l { margin: 0; font-weight: 700; }
.gb-ages { gap: 6px; }
.gb-ages button { padding: 6px 12px; flex-direction: column; align-items: flex-start; gap: 0; font-size: 15px; position: relative; }
.gb-ages button small { font: 400 12px/1.2 var(--f-data); color: var(--ink-2); }
.gb-ages button[aria-pressed="true"] small { color: var(--bg); }
.gb-ages button[aria-pressed="true"]::before { position: absolute; top: 4px; right: 6px; font-size: 11px; }
.gb-list .krow { min-height: 48px; }
.gb-sub { margin: var(--s2) 0 0; font: 700 var(--t-sm)/1.3 var(--f-data); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.gb-extra { border-top: 1px solid var(--line); margin-top: var(--s2); }
.gb-extra > summary { min-height: var(--tap); display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none;
  font: 700 var(--t-md)/1.3 var(--f-display); color: var(--ink-2); }
.gb-extra > summary::-webkit-details-marker { display: none; }
.gb-extra > summary::after { content: "+"; font: 700 20px/1 var(--f-display); color: var(--ink-2); margin-left: 12px; }
.gb-extra[open] > summary::after { content: "–"; }
.gb-extra > summary .num { margin-left: auto; }

.gobag .planbox h3.eyebrow { font: 700 var(--t-md)/1.3 var(--f-display); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) { .gobag .done-line:not([hidden]) { animation: gb-in 280ms ease both; } }
@keyframes gb-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media print {
  .gb-tabs, .gb-pick, .gb-age .link-btn, .who, .planbox, .meter { display: none !important; }
  .gb-extra > summary::after { display: none; }
}

/* the lists (as on the kit builder) */
.gobag .krows { list-style: none; margin: 0; padding: 0; }
.gobag .krows li { border-bottom: 1px solid var(--line); }
.gobag .krows li:last-child { border-bottom: 0; }
.gobag .krow.opt[aria-checked="true"] .name { color: var(--ink); text-decoration: none; }
.gobag .krow.opt[aria-checked="true"] { border-color: var(--ink-2); }