/* <pg-army-bf> Army body composition calculator (tool.js). Light-DOM children are the no-JS fallback,
   hidden once the element upgrades ([data-upgraded]). Tokens follow the other tool pages (paper, ink, orange accent). */
pg-army-bf{
  --ab-ink:#1d1d1f;--ab-muted:#6e6e73;--ab-panel:#f2f1ee;--ab-card:#fff;--ab-line:rgba(0,0,0,.1);--ab-fill:rgba(0,0,0,.055);
  --ab-orange:#ff8a1f;--ab-accent:#c25e00;
  --ab-ok:#cfe8d5;--ab-ok-ink:#1f6b34;--ab-over:#f6cfae;--ab-over-ink:#9a3412;--ab-none:#e4e1dc;
  --ab-banner:#fff4e8;--ab-banner-ink:#7a3d00;
  --ab-ease:cubic-bezier(.22,1,.36,1);
  display:block;margin:36px 0;color:var(--ab-ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",InterLocal,system-ui,sans-serif;-webkit-tap-highlight-color:transparent
}
@media (prefers-color-scheme:dark){
  pg-army-bf{
    --ab-ink:#f5f5f7;--ab-muted:#98989d;--ab-panel:#141416;--ab-card:#1f1f22;--ab-line:rgba(255,255,255,.12);--ab-fill:rgba(255,255,255,.08);
    --ab-accent:#ff9f3f;
    --ab-ok:#285636;--ab-ok-ink:#7ee09a;--ab-over:#6b3520;--ab-over-ink:#ffab85;--ab-none:#3a3936;
    --ab-banner:#2a1d10;--ab-banner-ink:#ffc48a
  }
}
pg-army-bf[data-upgraded]>:not(.ab-ui){display:none}
pg-army-bf[data-upgraded]>.ab-ui{display:grid}
pg-army-bf>.ab-fallback{padding:22px 24px;border-radius:24px;background:var(--ab-panel);font-size:16px;line-height:1.55}
.ab-fallback>:first-child{margin-top:0}
.ab-fallback>:last-child{margin-bottom:0}

.ab-ui{position:relative;gap:clamp(14px,2.4vw,22px);background:var(--ab-panel);border-radius:28px;padding:clamp(16px,3.2vw,30px);font-size:16px;line-height:1.5;container-type:inline-size}
.ab-ui p{margin:0}
.ab-ui [hidden]{display:none!important}
.ab-ui :focus-visible{outline:2px solid var(--ab-orange);outline-offset:3px}
.ab-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;padding:0;border:0}
.ab-muted{color:var(--ab-muted);font-weight:450}

.ab-head{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}
.ab-banner{padding:11px 15px;border-radius:14px;background:var(--ab-banner);color:var(--ab-banner-ink);font-size:14.5px;line-height:1.45}
.ab-banner b{font-weight:680}
.ab-ui[data-mode=whtr] .ab-banner{background:var(--ab-fill);color:var(--ab-muted)}
.ab-ui[data-mode=whtr] .ab-banner b{color:var(--ab-ink)}

.ab-main{display:grid;gap:clamp(18px,3vw,30px)}
@container (min-width:660px){.ab-main{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:start}}

/* Segmented controls */
.ab-seg{display:inline-flex;margin:0;padding:3px;border:0;border-radius:999px;background:var(--ab-fill);min-width:0;max-width:100%}
.ab-seg label{position:relative;cursor:pointer;min-width:0}
.ab-seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.ab-seg span{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;font-size:14.5px;font-weight:560;color:var(--ab-muted);white-space:nowrap;transition:color .2s,background .3s var(--ab-ease),box-shadow .3s var(--ab-ease)}
.ab-seg input:checked+span{color:var(--ab-ink);background:var(--ab-card);box-shadow:0 1px 2px rgba(0,0,0,.08),0 3px 10px -2px rgba(0,0,0,.14)}
.ab-seg input:focus-visible+span{outline:2px solid var(--ab-orange);outline-offset:1px}
@media (prefers-color-scheme:dark){.ab-seg input:checked+span{background:rgba(255,255,255,.16);box-shadow:none}}
@container (max-width:420px){
  .ab-head{flex-direction:column;align-items:stretch}
  .ab-head .ab-seg{display:flex}
  .ab-head .ab-seg label{flex:1}
  .ab-head .ab-seg span{width:100%;justify-content:center;padding:0 8px;font-size:13.5px}
}

/* Form */
.ab-form{display:grid;gap:18px;min-width:0}
.ab-field{min-width:0;margin:0;padding:0;border:0}
.ab-label{display:block;padding:0;font-size:14px;font-weight:620;margin:0 0 6px;letter-spacing:-.005em}
.ab-row,.ab-height{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ab-height:has(>[data-cm]:not([hidden])){grid-template-columns:1fr}
.ab-input{position:relative;display:flex;align-items:center;min-width:0}
.ab-input input{width:100%;min-width:0;height:52px;padding:0 42px 0 14px;border-radius:14px;border:1px solid var(--ab-line);background:var(--ab-card);color:var(--ab-ink);font:inherit;font-size:19px;font-weight:560;font-variant-numeric:tabular-nums;letter-spacing:-.01em;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.ab-input input::placeholder{color:var(--ab-muted);opacity:.5;font-weight:450}
.ab-input input:focus{outline:none;border-color:var(--ab-orange);box-shadow:0 0 0 3px rgba(255,138,31,.22)}
.ab-input input[aria-invalid=true]{border-color:#d97706}
.ab-unit{position:absolute;right:13px;font-size:15px;color:var(--ab-muted);pointer-events:none}
.ab-hint{margin-top:6px!important;font-size:13.5px;line-height:1.4;color:var(--ab-muted)}
.ab-hint.bad{color:var(--ab-over-ink)}
.ab-reading-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ab-reading-row:has(>[data-reading="4"]:not([hidden])){grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:520px){.ab-reading-row:has(>[data-reading="4"]:not([hidden])){grid-template-columns:repeat(4,minmax(0,1fr))}}
.ab-reading .ab-input input{padding-right:34px;font-size:18px}
.ab-reading .ab-unit{right:11px;font-size:14px}
.ab-rec{display:block;min-height:18px;margin-top:4px;font-size:12.5px;font-weight:600;color:var(--ab-muted);font-variant-numeric:tabular-nums}
.ab-rec.dim{text-decoration:line-through;opacity:.6}
.ab-bf-fields{display:grid;gap:14px}
.ab-bf-fields>.ab-seg{justify-self:start}

/* Result card */
.ab-result{display:grid;gap:14px;align-content:start;min-width:0;padding:clamp(16px,2.6vw,24px);border-radius:22px;background:var(--ab-card);box-shadow:0 0 0 1px var(--ab-line)}
.ab-kicker{font-size:12.5px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--ab-muted)}
.ab-top{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 16px}
.ab-num{font-size:clamp(50px,12cqi,70px);font-weight:700;line-height:.95;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.ab-empty .ab-num{color:var(--ab-muted);opacity:.4}
.ab-chip{display:inline-flex;align-items:center;min-height:30px;padding:3px 13px;border-radius:999px;font-size:14px;font-weight:650;line-height:1.25;background:var(--ab-fill);color:var(--ab-muted)}
.ab-chip[data-z=ok]{background:var(--ab-ok);color:var(--ab-ok-ink)}
.ab-chip[data-z=over]{background:var(--ab-over);color:var(--ab-over-ink)}
.ab-desc{font-size:15.5px;line-height:1.5;color:var(--ab-muted)}
.ab-desc b{color:var(--ab-ink);font-weight:620}

/* Gauge */
.ab-scale{position:relative;padding-top:34px}
.ab-track{position:relative;height:14px;border-radius:7px;overflow:hidden;display:flex;background:var(--ab-fill)}
.ab-zone{height:100%;flex:none}
.ab-zone[data-z=ok]{background:var(--ab-ok)}
.ab-zone[data-z=over]{background:var(--ab-over)}
.ab-zone[data-z=none]{background:var(--ab-none)}
.ab-zone+.ab-zone{box-shadow:inset 2px 0 0 var(--ab-card)}
.ab-cut{position:absolute;top:26px;height:30px;margin-left:-1.5px;border-left:3px solid var(--ab-ink);border-radius:2px}
.ab-ref{position:absolute;top:30px;height:22px;margin-left:-1px;border-left:2px dashed var(--ab-muted);opacity:.8}
.ab-marker{position:absolute;top:0;left:var(--x,50%);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;transition:left .45s var(--ab-ease),opacity .3s;pointer-events:none;opacity:0}
.ab-marker b{display:block;padding:2px 9px;border-radius:999px;background:var(--ab-orange);color:#1d1d1f;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;line-height:20px;white-space:nowrap}
.ab-marker i{display:block;width:3px;height:24px;margin-top:2px;background:var(--ab-orange);border-radius:2px}
.ab-ticks{position:relative;height:20px;margin-top:6px;font-size:12.5px;color:var(--ab-muted);font-variant-numeric:tabular-nums}
.ab-ticks span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.ab-ticks span.key{color:var(--ab-ink);font-weight:700}
.ab-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--ab-muted)}
.ab-legend span{display:inline-flex;align-items:center;gap:6px}
.ab-legend span::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--c)}
.ab-legend span.ref::before{width:0;height:12px;border-radius:0;background:none;border-left:2px dashed var(--ab-muted)}

/* Facts */
.ab-facts{display:grid;gap:9px;margin:0;padding:14px 16px;border-radius:16px;background:var(--ab-panel)}
.ab-facts div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14.5px;line-height:1.4}
.ab-facts dt{color:var(--ab-muted)}
.ab-facts dd{margin:0;font-weight:650;text-align:right;font-variant-numeric:tabular-nums}
.ab-facts small{font-weight:450;color:var(--ab-muted);font-size:13px;white-space:nowrap}

/* Working */
.ab-work{border-top:1px solid var(--ab-line);padding-top:12px;font-size:14.5px}
.ab-work summary{cursor:pointer;font-weight:620;color:var(--ab-accent);list-style:none;display:inline-flex;align-items:center;gap:6px}
.ab-work summary::-webkit-details-marker{display:none}
.ab-work summary::before{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .2s var(--ab-ease)}
.ab-work[open] summary::before{transform:rotate(45deg)}
.ab-work ol{margin:10px 0 0;padding-left:20px;display:grid;gap:6px;color:var(--ab-muted);line-height:1.5;font-variant-numeric:tabular-nums}
.ab-work b{color:var(--ab-ink)}
.ab-note{font-size:14px;line-height:1.45;padding:10px 13px;border-radius:12px;background:var(--ab-banner);color:var(--ab-banner-ink)}

/* Footer */
.ab-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.ab-actions{display:flex;flex-wrap:wrap;gap:8px}
.ab-btn{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 15px;border:0;border-radius:999px;background:var(--ab-fill);color:var(--ab-ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s,transform .2s var(--ab-ease)}
.ab-btn:hover{background:color-mix(in srgb,var(--ab-orange) 16%,var(--ab-fill))}
.ab-btn:active{transform:scale(.97)}
.ab-btn svg{width:15px;height:15px}
.ab-small{font-size:12.5px;color:var(--ab-muted)}

@media (prefers-reduced-motion:reduce){.ab-ui *{transition:none!important}}

/* Tape strip (current standard): the reading that keeps you in, and your average */
.ab-tape{margin:0;text-align:left;display:grid;gap:10px;padding:14px 16px 16px;border-radius:18px;background:var(--ab-card);box-shadow:0 0 0 1px var(--ab-line)}
.ab-tape-cap{font-size:14.5px;line-height:1.45;color:var(--ab-muted)}
.ab-tape-cap b{color:var(--ab-ink);font-weight:650}
.ab-tape-body{position:relative;height:48px;margin-top:26px;border-radius:8px;background:repeating-linear-gradient(-45deg,#e8955a 0 6px,#f2a66b 6px 12px);overflow:visible}
.ab-tape-ok{position:absolute;inset:0 auto 0 0;border-radius:8px 0 0 8px;background:linear-gradient(#ffcf9e,#ffbf80);transition:width .45s var(--ab-ease)}
.ab-tape-ticks span{position:absolute;top:0;width:2px;height:11px;margin-left:-1px;background:#7a3d00;opacity:.7}
.ab-tape-ticks span.big{height:20px;opacity:1}
.ab-tape-ticks i{position:absolute;top:22px;left:50%;transform:translateX(-50%);font-style:normal;font-size:13px;font-weight:650;color:#7a3d00;font-variant-numeric:tabular-nums}
.ab-tape-line{position:absolute;top:-8px;bottom:-8px;width:3px;margin-left:-1.5px;border-radius:2px;background:var(--ab-ink);transition:left .45s var(--ab-ease)}
.ab-tape-you{position:absolute;top:-30px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;transition:left .45s var(--ab-ease)}
.ab-tape-you b{padding:1px 8px;border-radius:999px;background:var(--ab-ink);color:var(--ab-card);font-size:12.5px;font-weight:700;line-height:19px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ab-tape-you::after{content:"";width:0;height:0;border:6px solid transparent;border-top-color:var(--ab-ink);margin-top:-1px}