/* Rucking Tough brand — BRAND.md tokens.
   DESIGN PASS (2026-10-29, approved DESIGN-PROPOSITION.md): the customer
   surface is DE-BOXED (flag F2 — the guide's card-shadow token retires on
   customer surfaces by the owner's explicit approval). Sections separate
   by whitespace and background tone (white canvas → Bone Paper tone →
   Ruck Black band); borders survive only where they carry meaning
   (inputs, steppers, selected/current states, dropdown elevation).
   Type runs at the brand guide's own scale (H1 64–82px, H2 40–52px,
   H3 24–32px, labels uppercase 12–14px / 1.5px). A ~200ms ease on
   interactive states is the whole motion vocabulary. */
:root{
  --color-field-olive:#3F4A2F; --color-deep-forest:#24301F; --color-ruck-black:#171A17;
  --color-khaki-canvas:#B8A77A; --color-bone-paper:#F2EAD8; --color-medal-brass:#B68A35;
  --color-dust-brown:#6C563A; --color-steel-gray:#5D625A; --color-march-red:#8E2F24;
  --color-ribbon-blue:#263F5E; --shadow-card:0 8px 24px rgba(23,26,23,.16);
  --hairline:color-mix(in srgb,var(--color-khaki-canvas) 45%,transparent);
}
*{box-sizing:border-box}
/* Outermost canvas is WHITE (owner direction, UAT round 1 item 11 —
   proposition flag F1: the owner wins over the guide's Bone Paper
   field; Bone survives as the panel/mat color inside the page). */
body{margin:0;font-family:'Inter',system-ui,sans-serif;font-size:17px;line-height:1.6;color:var(--color-ruck-black);background:#fff}
h1,h2,h3{font-family:'Oswald',sans-serif;text-transform:uppercase;color:var(--color-ruck-black);line-height:1.08}
h1{font-size:clamp(2.6rem,6.5vw,5.125rem);font-weight:700;letter-spacing:.01em;margin:.1em 0 .35em}
h2{font-size:clamp(1.8rem,4.2vw,3.25rem);font-weight:600;margin:1.1em 0 .5em}
h3{font-size:clamp(1.3rem,2.8vw,2rem);font-weight:600;margin:.4em 0 .3em}
h4{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:1px;font-size:1rem;margin:.2em 0 .6em}
.slab{font-family:'Roboto Slab',serif;color:var(--color-field-olive)}
a{color:var(--color-field-olive);transition:color .2s ease,background-color .2s ease}
.test-banner{background:var(--color-march-red);color:var(--color-bone-paper);text-align:center;
  font-family:'Oswald',sans-serif;font-size:.8rem;letter-spacing:1.5px;text-transform:uppercase;padding:.45rem 1rem}
.site-header{background:var(--color-field-olive);display:flex;justify-content:space-between;align-items:center;padding:.85rem 1.2rem;flex-wrap:wrap;gap:.5rem;position:relative}
.brand{font-family:'Oswald',sans-serif;font-weight:700;font-size:1.4rem;letter-spacing:2px;color:var(--color-bone-paper);text-decoration:none}
.brand span{color:var(--color-medal-brass)}
/* Quiet chrome (P0-6): five primary entries + an account menu. The nav
   stays a wrapping flex row (round 1 item 12: one unbreakable ~414px
   run was the biggest sideways-drift offender on phones). */
.site-header nav{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;align-items:center;min-width:0}
.site-header nav a{color:var(--color-bone-paper);text-decoration:none;font-weight:600}
.nav-user{color:var(--color-khaki-canvas);font-size:.9rem}
/* The panel anchors to the HEADER's right edge (the details itself is
   static) so it can never spill off a phone's left edge, and it renders
   ONLY while the menu is open — an author display rule on the panel
   would otherwise defeat the closed-details hiding (caught by the
   390px overflow sweep, 2026-10-29). */
.nav-menu{position:static}
.nav-menu summary{cursor:pointer;color:var(--color-bone-paper);font-weight:600;list-style:none}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu summary::after{content:' ▾';color:var(--color-medal-brass)}
.nav-menu-panel{display:none;position:absolute;right:1.2rem;top:calc(100% - .35rem);z-index:50;min-width:230px;
  background:#fff;border:1px solid var(--hairline);box-shadow:0 18px 40px rgba(23,26,23,.22);
  padding:.6rem 0;flex-direction:column}
.nav-menu[open ] .nav-menu-panel{display:flex}
.nav-menu-panel a{color:var(--color-ruck-black)!important;padding:.45rem 1.1rem;font-weight:600}
.nav-menu-panel a:hover{background:var(--color-bone-paper)}
.nav-menu-panel .nav-menu-head{padding:.3rem 1.1rem .5rem;color:var(--color-steel-gray);
  font-size:.78rem;text-transform:uppercase;letter-spacing:1.5px;border-bottom:1px solid var(--hairline);margin-bottom:.4rem}
main{max-width:1120px;margin:0 auto;padding:2.2rem 1.2rem 0}
/* Full-bleed band: escapes the centered column edge to edge (the page
   canvas clips horizontal overflow — round 1 item 12 backstop). */
.bleed{width:100vw;margin-left:calc(50% - 50vw);padding-left:max(1.2rem,calc(50vw - 560px + 1.2rem));padding-right:max(1.2rem,calc(50vw - 560px + 1.2rem))}
.hero{background:var(--color-ruck-black);color:var(--color-bone-paper);padding-top:3.6rem;padding-bottom:3.6rem;margin-bottom:2.8rem}
.hero h1{color:var(--color-bone-paper);font-size:clamp(2.8rem,7vw,5.125rem);margin:.15em 0 .3em}
.hero-sub{max-width:640px;font-size:1.1rem}
.mission-label{font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;font-size:.8rem;letter-spacing:1.5px;color:var(--color-field-olive)}
.mission-label.light{color:var(--color-medal-brass)}
.catalog{margin-bottom:3rem}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:2.4rem 1.6rem}
/* De-boxed product presentation (P0-2/P0-5/P1-1): no border, no shadow —
   the medal sits large on a flat Bone Paper mat, shown WHOLE (contain,
   owner no-crop rule), over three lines: name, one descriptor, price. */
.mission-card{background:transparent;overflow:hidden}
.mission-card img{width:100%;height:300px;object-fit:contain;display:block;padding:1.1rem;
  background:var(--color-bone-paper)}
.mission-card-body{padding:1rem .15rem 0}
.mission-card h3{margin:.25rem 0 .2rem}
.descriptor{color:var(--color-steel-gray);margin:.15rem 0 .35rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mission-price{font-family:'Oswald',sans-serif;font-weight:600;color:var(--color-ruck-black);font-size:1.2rem;margin:.2rem 0 .6rem}
.mission-dates{font-family:'Oswald',sans-serif;font-size:.85rem;letter-spacing:1px;text-transform:uppercase;color:var(--color-dust-brown);margin:.25rem 0 .1rem}
.mission-price span{color:var(--color-steel-gray);font-size:.75rem;letter-spacing:1px}
/* Primary action = Medal Brass (guide). Olive is reserved for secondary,
   navigation, and staff actions via .btn-olive. */
.btn{display:inline-block;background:var(--color-medal-brass);color:var(--color-ruck-black);border:none;border-radius:4px;
  padding:.7rem 1.4rem;font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:1px;
  text-decoration:none;cursor:pointer;font-size:.95rem;margin:.2rem .3rem .2rem 0;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.btn:hover{background:#D1A64A}
.btn-brass{background:var(--color-medal-brass);color:var(--color-ruck-black)}
.btn-brass:hover{background:#D1A64A}
.btn-olive{background:var(--color-field-olive);color:var(--color-bone-paper)}
.btn-olive:hover{background:var(--color-deep-forest)}
.btn-ghost{background:transparent;border:2px solid var(--color-khaki-canvas);color:var(--color-bone-paper)}
.btn-small{padding:.45rem .9rem;font-size:.82rem}
/* Open sections (P0-2): the former brief/register panels are now
   unboxed stretches of page separated by space alone. */
.brief,.register-box{background:transparent;padding:0;margin-bottom:2.8rem}
.event-hero{margin-bottom:2.6rem}
.event-hero img{width:100%;height:min(54vw,500px);object-fit:contain;display:block;padding:1.6rem;
  background:var(--color-bone-paper)}
.ev-section{margin-bottom:3rem}
.ev-section .mission-label{margin-bottom:.4rem}
.steps-row{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:.8rem}
.steps-row .step-item{flex:1 1 150px;border-top:1px solid var(--hairline);padding-top:.6rem}
.steps-row .step-num{font-family:'Oswald',sans-serif;font-weight:700;color:var(--color-medal-brass);font-size:1.3rem;display:block}
.earn-list{list-style:none;padding:0;margin:.6rem 0}
.earn-list li{padding:.45rem 0;border-bottom:1px solid var(--hairline);font-size:1.05rem}
.earn-list li:last-child{border-bottom:none}
.field{margin-bottom:1.1rem}
.field label{display:block;font-weight:600;margin-bottom:.3rem}
.sub-label{font-weight:400;font-size:.92rem;margin-top:.7rem}
.field input,.field select,.field textarea{width:100%;padding:.55rem;border:1px solid var(--color-steel-gray);border-radius:4px;font:inherit;background:#fff;transition:border-color .2s ease}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--color-field-olive);outline:none}
.field-note{font-size:.88rem;color:var(--color-steel-gray)}
.fact-line{font-size:1.08rem;margin:.2rem 0 .4rem}
.participation{background:var(--color-bone-paper);padding:.9rem 1.1rem}
.check{display:block;font-weight:400;margin:.25rem 0}
.check input{width:auto;margin-right:.4rem}
.error{background:color-mix(in srgb,var(--color-march-red) 8%,#fff);border-left:3px solid var(--color-march-red);color:var(--color-march-red);padding:.7rem 1rem}
.flash{background:var(--color-field-olive);color:var(--color-bone-paper);text-align:center;padding:.5rem}
/* Status as words, not chips (P1-3): done steps speak in olive, the
   rest wait in gray; the brass arrow carries the eye. */
.track{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin:.5rem 0}
.track-step{font-family:'Oswald',sans-serif;font-size:.82rem;text-transform:uppercase;letter-spacing:1px;color:var(--color-steel-gray)}
.track-step.done{color:var(--color-field-olive);font-weight:700}
.track-arrow{color:var(--color-medal-brass);font-weight:700}
.track-attention .track-state{color:var(--color-march-red);font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:1px}
/* Dashboard + list rows: a hairline and space, never a box (P1-3). */
.reg-card{border-top:1px solid var(--hairline);padding:1.5rem 0 .4rem;margin-bottom:.6rem;background:transparent}
.outcome-line{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:1px;
  font-size:.95rem;color:var(--color-field-olive);margin:.2rem 0 .5rem}
img.act-thumb{width:64px;height:64px;object-fit:contain;background:var(--color-bone-paper);border-radius:4px;vertical-align:middle}
/* Wide tables scroll INSIDE their own box (round 1 item 12) — the page
   itself never drifts sideways on a phone. Long unbroken strings wrap. */
.roster{width:100%;border-collapse:collapse;font-size:.92rem;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.roster th{background:var(--color-field-olive);color:var(--color-bone-paper);text-align:left;padding:.45rem .6rem}
.roster td{border-bottom:1px solid var(--hairline);padding:.45rem .6rem;vertical-align:top;overflow-wrap:anywhere}
.roster.summary th{background:transparent;color:var(--color-field-olive);border-bottom:2px solid var(--color-khaki-canvas);text-transform:uppercase;letter-spacing:1px;font-size:.78rem}
.inline-form{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.inline-form input{padding:.5rem;border:1px solid var(--color-steel-gray);border-radius:4px;font:inherit}
.merch-row{display:flex;gap:.6rem;align-items:center;margin:.3rem 0;flex-wrap:wrap}
img{max-width:100%}
input,select,textarea{max-width:100%}
html,body{overflow-x:clip}
.merch-row input{width:70px;padding:.35rem}
.stamp{display:inline-block;border:2px solid var(--color-march-red);color:var(--color-march-red);border-radius:4px;
  font-family:'Oswald',sans-serif;font-size:.72rem;letter-spacing:1.5px;text-transform:uppercase;padding:.1rem .5rem;transform:rotate(-2deg)}
.earned li{margin:.5rem 0}
.test-account{display:flex;justify-content:space-between;align-items:center;gap:1rem;border-top:1px solid var(--hairline);padding:1rem 0;margin-bottom:.4rem;background:transparent;flex-wrap:wrap}
.steps li{margin:.25rem 0}
.site-footer{background:var(--color-ruck-black);color:var(--color-bone-paper);text-align:center;padding:2rem 1rem;margin-top:3rem}
.site-footer p{margin:.2rem 0;font-family:'Roboto Slab',serif}
.footer-note{font-family:'Inter',sans-serif!important;font-size:.8rem;color:var(--color-khaki-canvas)}
code{background:var(--color-bone-paper);padding:.1rem .4rem;border-radius:4px}
/* Status labels as set type, not bordered pills (P0-5/P1-4). */
.pill{display:inline-block;padding:0;font-family:'Oswald',sans-serif;font-size:.74rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--color-steel-gray);margin-right:.6rem}
.pill-open{color:var(--color-field-olive)}
.pill-closed{color:var(--color-march-red)}
.pill-class{color:var(--color-dust-brown)}
.shop-card img{width:100%;height:300px;object-fit:contain;display:block;padding:1.1rem;
  background:var(--color-bone-paper)}
.flow-steps{display:flex;gap:1.2rem;flex-wrap:wrap;margin:0 0 1.4rem;border-bottom:1px solid var(--hairline);padding-bottom:.8rem}
.flow-step{padding:.2rem 0;font-family:'Oswald',sans-serif;
  font-size:.85rem;text-transform:uppercase;letter-spacing:1px;color:var(--color-steel-gray);text-decoration:none}
.flow-step.current{color:var(--color-ruck-black);font-weight:700;box-shadow:inset 0 -3px 0 var(--color-medal-brass)}
.flow-step.done{color:var(--color-field-olive)}
/* Rucker + registration blocks: tone fields on the white canvas — Bone
   for choices, white with a ruled head for information; a draft carries
   a March Red edge because it MEANS "your attention" (P0-2's
   meaning-carrying exception). */
.rucker-box{background:var(--color-bone-paper);padding:1.6rem;margin-bottom:1.8rem}
.rucker-box.draft{box-shadow:inset 3px 0 0 var(--color-march-red)}
.ruck-stack{display:flex;flex-direction:column;gap:1.2rem;margin-bottom:1.8rem}
.ruck-stack .rucker-box{margin-bottom:0}
.choices-box{background:color-mix(in srgb,var(--color-khaki-canvas) 16%,var(--color-bone-paper))}
.info-box{background:#fff;border-top:2px solid var(--color-field-olive)}
.info-box.draft{box-shadow:inset 3px 0 0 var(--color-march-red)}
/* The extras stepper (round 1 item 4): boxed minus/plus buttons are
   controls — borders carry meaning here and stay. */
.stepper{display:inline-flex;align-items:center;gap:.45rem;margin-left:auto}
.stepper-form{display:inline}
.step-btn{width:2.1rem;height:2.1rem;border:2px solid var(--color-field-olive);border-radius:6px;
  background:var(--color-bone-paper);color:var(--color-field-olive);font-size:1.25rem;font-weight:700;
  line-height:1;cursor:pointer;padding:0;transition:background-color .2s ease}
.step-btn:active{background:var(--color-khaki-canvas)}
.step-btn:disabled{opacity:.35;cursor:default}
.step-count{min-width:1.6rem;text-align:center;font-family:'Oswald',sans-serif;font-weight:700;font-size:1.1rem}
.extra-row{justify-content:space-between}
.extra-info{flex:1}
/* The different-rucks popup (round 1 item 7): a scrimmed dialog — its
   shadow is elevation above the page, not a card costume. */
.modal{position:fixed;inset:0;background:rgba(23,26,23,.55);z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:2.5rem 1rem;overflow:auto}
.modal[hidden]{display:none}
.modal-card{background:var(--color-bone-paper);border-radius:10px;
  padding:1.4rem 1.6rem;max-width:640px;width:100%;box-shadow:0 24px 60px rgba(23,26,23,.35)}
.missions-form .check{font-size:1.02rem}
.missions-form .check input{width:1.05rem;height:1.05rem;accent-color:var(--color-field-olive)}
.item-form{border-top:1px solid var(--hairline);padding-top:.9rem;margin-top:.9rem}
.selected-note{font-family:'Oswald',sans-serif;color:var(--color-field-olive);text-transform:uppercase;letter-spacing:1px;font-size:.85rem}
/* The finish bar as a floor, not a floating widget (P0-6): a flat,
   slim, full-column Ruck Black band with no radius and no shadow. */
.finish-bar{position:sticky;bottom:0;z-index:30;display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--color-ruck-black);color:var(--color-bone-paper);padding:.6rem 1.2rem;margin:2rem -1.2rem 0}
.finish-bar .finish-count{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:.9rem}
.finish-bar .btn{margin:0}