/* SNA Conference App — UI mock, shared stylesheet (card C-010).
   Extracted verbatim from the 14 screens, whose <style> blocks were byte-identical.
   One copy so a token can never drift between screens. DESIGN.md is law; every value
   below traces to its token table. No JavaScript is loaded by any screen. */

@import url("./fonts.css");

:root{
  --bg-base:#FFFFFF;--bg-subtle:#F8FBFD;--bg-muted:#F5FAFD;
  --fg-base:#052B40;--fg-muted:#47606E;--fg-subtle:#5F7A88;--border:#D8E6EE;
  --brand:#00B5D9;--brand-mid:#0074A8;--brand-deep:#004E7C;
  --grad-brand:linear-gradient(135deg,#004E7C 0%,#0074A8 52%,#00B5D9 100%);
  --grad-sky:linear-gradient(135deg,#F5FAFD 0%,#DCEFF9 100%);
  --grad-mint:linear-gradient(135deg,#ECFDF5 0%,#CCF0E4 100%);
  --grad-sand:linear-gradient(135deg,#FFF7ED 0%,#FDE9CE 100%);
  --grad-pulse:linear-gradient(90deg,#F8FBFD 0%,#E3F3FA 50%,#F8FBFD 100%);
  --font-head:"Barlow Condensed","Arial Narrow",sans-serif;
  --font-body:Inter,Arial,sans-serif;--font-data:"JetBrains Mono","Courier New",monospace;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg-base)}
body{color:var(--fg-base);font-family:var(--font-body);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit;color:inherit}button{cursor:pointer}svg{display:block}
.app{width:100%;max-width:706px;min-height:100svh;margin:auto;display:flex;flex-direction:column;background:var(--bg-base);overflow:hidden}
.soft{background:var(--bg-subtle)}.main{flex:1;padding:28px 20px 32px}.main.flush{padding:0}.grow{flex:1}
.topbar{height:56px;flex:0 0 56px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;background:var(--bg-subtle);border-bottom:1px solid var(--border)}
.topbar strong{font-family:var(--font-head);font-size:25px;text-transform:uppercase}.topbar .compact{font-size:20px;letter-spacing:.04em}
.icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.icon.lg{width:30px;height:30px}.icon.sm{width:19px;height:19px}
h1,h2,h3,p{margin-top:0}h1,.title{font-family:var(--font-head);font-size:34px;line-height:1.04;margin-bottom:18px;font-weight:800}h2{font-family:var(--font-head);font-size:24px;line-height:1.08;margin-bottom:16px}h3{font-family:var(--font-head);font-size:21px;line-height:1.1;margin-bottom:14px}
.eyebrow{font-family:var(--font-data);font-size:13px;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-subtle);font-weight:500;margin-bottom:13px}.muted{color:var(--fg-muted)}.subtle{color:var(--fg-subtle)}.data{font-family:var(--font-data)}
.btn{width:100%;min-height:48px;border:1px solid var(--brand-deep);border-radius:4px;background:var(--brand-deep);color:var(--bg-base);font-weight:700;font-size:17px;padding:11px 16px;display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none}.btn.outline{background:var(--bg-base);color:var(--brand-deep);border-color:var(--border)}
.field{margin-bottom:16px}.field label{display:block;color:var(--fg-subtle);font-size:13px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px}.field label.normal{text-transform:none;color:var(--fg-base);font-weight:600;font-size:16px}.control{width:100%;height:44px;background:var(--bg-base);border:1px solid var(--border);border-radius:8px;padding:0 13px;font-size:17px}.textarea{height:88px;padding-top:11px;resize:none}.control:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}
.input-icon{position:relative}.input-icon .icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--fg-subtle)}.input-icon .control{padding-left:45px;border-radius:0}
.note{border-left:3px solid var(--brand-deep);padding-left:13px;color:var(--fg-subtle);font-size:15px}.center{text-align:center}
.pulse{display:flex;background:var(--grad-pulse);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.metric{flex:1;text-align:center;padding:14px 7px;border-right:1px solid var(--border)}.metric:last-child{border-right:0}.metric b{display:block;font-family:var(--font-head);font-size:31px;line-height:1;color:var(--brand-deep)}.metric span{font-size:12px;color:var(--fg-subtle)}
.hero{width:100%;min-height:68px;border:1px solid var(--border);border-radius:2px;padding:13px 17px;display:flex;align-items:center;gap:16px;background:var(--grad-sky);color:var(--fg-base);text-align:left;margin-bottom:8px}.hero.primary{background:var(--brand-deep);color:var(--bg-base);border-color:var(--brand-deep)}.hero b{display:block;font-size:16px}.hero span span{display:block;font-size:14px;font-weight:400;color:var(--fg-muted)}.hero.primary span span{color:var(--border)}
.card{border:1px solid var(--border);border-radius:8px;background:var(--bg-base);padding:16px}.success{background:var(--grad-mint);border:1px solid var(--border);border-radius:8px;padding:18px}.warning{background:var(--grad-sand);border:1px solid var(--border);border-radius:8px;padding:16px}.label{font-family:var(--font-data);text-transform:uppercase;letter-spacing:.13em;font-size:11px;color:var(--fg-muted)}
.avatar{width:48px;height:48px;border-radius:13px;background:var(--grad-sky);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:var(--font-data);font-size:17px;flex:0 0 48px}.person{display:flex;align-items:center;gap:13px}.person b{font-size:19px}.person p{margin:0;color:var(--fg-subtle);line-height:1.25}
.details{border-top:1px solid var(--border);margin-top:18px;padding-top:16px}.details dt{font-family:var(--font-data);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-subtle);margin-bottom:5px}.details dd{margin:0 0 16px;font-size:15px}.details a{color:var(--brand-deep);display:inline-block;min-height:44px;line-height:44px}
.nav{height:70px;flex:0 0 70px;display:flex;background:var(--bg-subtle);border-top:1px solid var(--border)}.nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-decoration:none;color:var(--fg-subtle);font-size:12px}.nav a.active{color:var(--brand-deep);font-weight:600}.nav .icon{width:21px;height:21px}
.tabs{height:46px;display:flex;border-bottom:1px solid var(--border)}.tabs a{flex:1;text-align:center;padding:12px 4px 9px;color:var(--fg-subtle);text-decoration:none;border-bottom:2px solid transparent}.tabs a.active{color:var(--fg-base);border-bottom-color:var(--brand-deep)}
.list{padding:0 20px}.contact{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--border)}.contact .who{min-width:0}.contact .who b{display:block;font-size:16px}.contact .who span{display:block;color:var(--fg-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contact time{text-align:right;font-family:var(--font-data);font-size:11px;color:var(--fg-subtle)}
.rank-list{border:1px solid var(--border)}.rank-row{display:grid;grid-template-columns:36px minmax(0,1fr) 30px;gap:12px;align-items:center;padding:11px 12px;border-bottom:1px solid var(--border)}.rank-row:last-child{border-bottom:0}.rank-row.mine{background:var(--grad-pulse)}.badge{width:32px;height:32px;border:1px solid var(--border);border-radius:11px;display:flex;align-items:center;justify-content:center;font-family:var(--font-data)}.badge.top{background:var(--brand-deep);color:var(--bg-base);border-color:var(--brand-deep)}.rank-row b{display:block}.rank-row span{display:block;color:var(--fg-subtle);font-size:13px}.score{font-family:var(--font-data);text-align:right}
.stage{height:220px;border-radius:8px;background:var(--fg-base);color:var(--bg-base);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}.stage h2{margin:10px 0 5px}.stage p{color:var(--fg-subtle);margin:0}.dots{display:flex;gap:7px;margin-top:22px}.dots i{width:8px;height:8px;border-radius:50%;background:var(--fg-subtle)}.dots i:last-child{background:var(--bg-base)}
.camera{height:250px;background-color:var(--fg-base);background-image:radial-gradient(var(--fg-subtle) 1px,transparent 1px);background-size:22px 22px;border-radius:8px;position:relative;display:flex;align-items:center;justify-content:center;color:var(--bg-base)}.reticle{width:72%;height:72%;position:relative}.reticle i{position:absolute;width:34px;height:34px;border:2px solid var(--bg-base)}.reticle i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}.reticle i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}.reticle i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}.reticle i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}.camera .hint{position:absolute;bottom:16px;color:var(--border);font-family:var(--font-data)}
.qr{width:182px;height:182px;margin:0 auto;background:var(--bg-base);border:12px solid var(--bg-base);display:grid;grid-template-columns:repeat(13,1fr);grid-template-rows:repeat(13,1fr);gap:2px}.qr i{background:var(--fg-base)}
.push{margin-top:auto}.spacer{height:18px}.stack>*+*{margin-top:10px}.divider{height:1px;background:var(--border);margin:20px 0}
.admin{font-family:var(--font-data);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:3px;background:var(--bg-muted);color:var(--brand-deep);border:1px solid var(--border)}
@media (min-width:600px){.main{padding-left:36px;padding-right:36px}.list{padding-left:36px;padding-right:36px}.title,h1{font-size:40px}}

/* --- Added by the coordinator, 2026-08-07 --------------------------------
   .hero.brand is THE SNA logo gradient — DESIGN.md calls it "the brand surface,
   the primary hero, and the only dark one", and it carries WHITE text. It was
   declared as --grad-brand in every screen's token block but applied on none of
   them, so the brand's signature surface was missing from the whole mock. Use it
   for the single most important action on a screen, NEVER twice on one screen.
   .hero.primary (flat navy) stays for the second-tier dark action. */
.hero.brand{background:var(--grad-brand);color:var(--bg-base);border-color:transparent}
.hero.brand span span{color:#D8E6EE}
.hero.brand:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(5,43,64,.08)}

/* Tap-target floor, 2026-08-07. DESIGN.md now says 44px and says why: measuring this
   mock in a real browser at 390x844 found every text input at 42px and the website
   values inside a card at 19px. The ink on those links is unchanged; only the area a
   finger has to hit grew. */