/* ============================================================================
   Pickle Pot — design system  (see DESIGN.md)
   Two voices on one token set: admin (quiet/dense) + public/TV (loud/legible).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Barlow+Condensed:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');

:root{
  /* ink layers */
  --ink:#0c0e08; --ink-2:#15180f; --ink-3:#1e2215;
  --line:#2c3320; --line-2:#3a4528; --field:#677150; /* input border, ≥3:1 on ink-3 */
  /* brand */
  --green:#8cc63f; --green-lt:#aede5c; --green-deep:#46711c;
  --gold:#f4c84a; --gold-deep:#5a4500;
  /* text */
  --white:#f4f6ec; --cream:#e8ebdc; --sage:#9aa886;
  /* status */
  --red:#e8674e; --red-bg:#2a1411; --green-bg:#13200a;

  /* type */
  --f-display:'Anton',sans-serif;
  --f-cond:'Barlow Condensed',sans-serif;
  --f-body:'DM Sans',system-ui,sans-serif;
  --t-xs:.75rem; --t-sm:.8125rem; --t-base:.9375rem; --t-md:1.0625rem;
  --t-lg:1.375rem; --t-xl:1.75rem; --t-2xl:2.5rem; --t-3xl:3.25rem;

  /* space (4pt) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  /* radius / shadow / z */
  --r-sm:8px; --r-md:10px; --r-lg:13px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 6px 18px rgba(0,0,0,.45);
  --sh-3:0 16px 40px rgba(0,0,0,.5);
  --z-sticky:100; --z-dropdown:200; --z-backdrop:800; --z-modal:900; --z-toast:1000;

  --ease:cubic-bezier(.22,1,.36,1); /* ease-out-quart-ish */
  --dur:.18s;
}

*{box-sizing:border-box}
[hidden]{display:none!important} /* beat component display: rules (.center/.status/.bracket) */
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--white);
  font-family:var(--f-body); font-size:var(--t-base); line-height:1.5;
  font-kerning:normal; -webkit-font-smoothing:antialiased; min-height:100vh;
}
h1,h2,h3,h4{margin:0;line-height:1.12;text-wrap:balance}
.display{font-family:var(--f-display);letter-spacing:-.01em;text-transform:none}
.cond{font-family:var(--f-cond)}
a{color:var(--green-lt);text-decoration:none}
a:hover{text-decoration:underline}
p{margin:0 0 var(--s4);max-width:68ch}
:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:4px}
::selection{background:var(--green);color:var(--ink)}
.tnum{font-variant-numeric:tabular-nums}
.muted{color:var(--sage)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- label / kicker ---- */
.label{font-family:var(--f-cond);font-weight:600;text-transform:uppercase;letter-spacing:.09em;
  font-size:var(--t-sm);color:var(--sage)}

/* ---- layout ---- */
.wrap{max-width:1180px;margin:0 auto;padding:var(--s5) var(--s5) var(--s8)}
.wrap-wide{max-width:1480px}
.row{display:flex;gap:var(--s3);align-items:center}
.row.wrap{flex-wrap:wrap}
.between{justify-content:space-between}
.spacer{flex:1}
.stack{display:flex;flex-direction:column;gap:var(--s4)}

/* ---- top bar ---- */
.topbar{position:sticky;top:0;z-index:var(--z-sticky);display:flex;align-items:center;gap:var(--s4);
  padding:var(--s3) var(--s5);background:rgba(12,14,8,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:var(--s3);text-decoration:none}
.brand:hover{text-decoration:none}
.wordmark{font-family:var(--f-display);font-size:1.5rem;letter-spacing:.01em;line-height:1;color:var(--green)}
.wordmark .pot{color:var(--gold)}
.brand .chip{font-family:var(--f-cond);font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-size:var(--t-xs);color:var(--sage);padding-top:3px}

/* ---- buttons ---- */
.btn{--bg:var(--green);--fg:var(--ink);display:inline-flex;align-items:center;gap:var(--s2);
  font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  font-size:var(--t-base);line-height:1;cursor:pointer;border:1.5px solid transparent;
  border-radius:var(--r-md);padding:11px 17px;background:var(--bg);color:var(--fg);
  transition:filter var(--dur) var(--ease),transform var(--dur) var(--ease),background var(--dur)}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45;cursor:not-allowed;filter:none;transform:none}
.btn.accent{--bg:var(--gold);--fg:var(--ink)}
.btn.ghost{--bg:transparent;--fg:var(--green-lt);border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--green);filter:none;background:var(--ink-3)}
.btn.danger{--bg:transparent;--fg:var(--red);border-color:#6b2c22}
.btn.danger:hover{background:var(--red-bg);filter:none}
.btn.sm{padding:6px 11px;font-size:var(--t-sm);border-radius:var(--r-sm)}
.btn .spin{width:14px;height:14px}

/* ---- inputs ---- */
label.field{display:block}
label.field>span{display:block;font-family:var(--f-cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.07em;font-size:var(--t-sm);color:var(--sage);margin-bottom:5px}
input,textarea,select{font-family:var(--f-body);font-size:var(--t-base);color:var(--white);
  background:var(--ink-3);border:1.5px solid var(--field);border-radius:var(--r-sm);
  padding:10px 12px;width:100%;transition:border-color var(--dur)}
input::placeholder,textarea::placeholder{color:var(--sage)} /* sage ≈6.4:1 on ink-3 (AA) */
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--green)}
input[aria-invalid="true"]{border-color:var(--red)}
input.num{width:54px;text-align:center;font-variant-numeric:tabular-nums;font-weight:600}
textarea{resize:vertical;min-height:84px;line-height:1.45}

/* ---- panel / card ---- */
.panel{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5)}
.panel.tight{padding:var(--s4)}
.divider{height:1px;background:var(--line);border:0;margin:var(--s5) 0}

/* ---- status chips ---- */
.status{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-cond);font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;font-size:var(--t-xs);padding:3px 10px;border-radius:var(--r-pill)}
.status.setup{background:#22271a;color:var(--sage)}
.status.pools{background:#243a14;color:var(--green-lt)}
.status.bracket{background:#243a14;color:var(--green-lt)}
.status.active{background:#243a14;color:var(--green-lt)}
.status.complete{background:#3a2e08;color:var(--gold)}
.status.pending{background:#22271a;color:var(--sage)}
.status.confirmed{background:#243a14;color:var(--green-lt)}
.status.waitlist{background:#3a2e08;color:var(--gold)}
.status.withdrawn{background:var(--red-bg);color:var(--red)}
.status .dot{width:7px;height:7px;border-radius:50%;background:currentColor}

/* ---- stepper (division stage) ---- */
.stepper{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-family:var(--f-cond);
  font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:var(--t-sm)}
.stepper .step{display:flex;align-items:center;gap:7px;color:var(--sage);padding:5px 10px;border-radius:var(--r-pill);
  border:1px solid var(--line)}
.stepper .step.done{color:var(--green-lt);border-color:var(--green-deep)}
.stepper .step.now{color:var(--ink);background:var(--green);border-color:var(--green)}
.stepper .sep{color:var(--line-2)}

/* ---- list items (events / divisions / teams) ---- */
.list{display:grid;gap:var(--s2)}
.item{display:flex;align-items:center;gap:var(--s4);background:var(--ink-2);border:1px solid var(--line);
  border-radius:var(--r-md);padding:var(--s4);text-decoration:none;color:var(--white);transition:border-color var(--dur),background var(--dur)}
a.item:hover{border-color:var(--green);background:var(--ink-3);text-decoration:none}
.item h3{font-size:var(--t-md)}
.item .sub{color:var(--sage);font-size:var(--t-sm)}

/* ---- tables (standings) ---- */
table.std{width:100%;border-collapse:collapse;font-size:var(--t-base)}
table.std th{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:var(--t-xs);color:var(--sage);text-align:right;padding:6px 8px;border-bottom:1px solid var(--line)}
table.std th.l,table.std td.l{text-align:left}
table.std td{padding:8px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;text-align:right}
table.std tr:last-child td{border-bottom:none}
table.std td.team{font-weight:600;color:var(--white)}
table.std .rk{color:var(--sage);font-family:var(--f-cond);font-weight:700}
table.std tr.top td{background:rgba(140,198,63,.07)}
table.std tr.top .rk{color:var(--gold)}

/* ---- pools grid ---- */
.pools{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s4)}
.pool h3{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:var(--t-md);color:var(--gold);margin-bottom:var(--s3)}
.pool .matches{margin-top:var(--s3);display:grid;gap:6px}

/* ---- match / slot (pools + bracket) ---- */
.match{background:var(--ink);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.slot{display:flex;align-items:center;gap:var(--s2);padding:9px 11px;border-bottom:1px solid var(--line)}
.slot:last-child{border-bottom:none}
.slot .seed{font-family:var(--f-cond);font-weight:700;color:var(--sage);font-size:var(--t-sm);min-width:16px;text-align:center}
.slot .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot .sc{font-family:var(--f-cond);font-weight:700;color:var(--sage);min-width:22px;text-align:right;font-variant-numeric:tabular-nums}
.slot .ck{width:15px;height:15px;color:var(--green);flex:none;opacity:0}
.slot.win{background:rgba(140,198,63,.12)}
.slot.win .nm{color:var(--green-lt);font-weight:700}
.slot.win .sc{color:var(--green-lt)}
.slot.win .ck{opacity:1}
.slot.bye .nm,.slot.tbd .nm{color:#828b6c;font-style:italic} /* ≈5.4:1 on ink (AA) */
.matchedit{display:flex;gap:6px;align-items:center;padding:8px;border-top:1px dashed var(--line)}
.matchedit .vs{color:var(--sage);font-size:var(--t-sm);font-family:var(--f-cond)}

/* ---- roster team editor ---- */
.team-edit{background:var(--ink);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s3);display:grid;gap:var(--s2)}
.team-edit .ply{display:grid;grid-template-columns:1fr 80px 140px;gap:var(--s2);align-items:center}
.team-edit input{width:100%}
.team-edit .dupr{text-align:center;font-variant-numeric:tabular-nums;font-weight:600}
.team-edit .pnum{font-family:var(--f-cond);font-weight:700;color:var(--sage);font-size:var(--t-sm);
  align-self:center;padding-left:2px}
.team-edit .foot{display:flex;justify-content:space-between;align-items:center;margin-top:2px}
@media(max-width:560px){
  .team-edit .ply{grid-template-columns:1fr 72px}
  .team-edit .pid{grid-column:1 / -1}
}

/* ---- bracket ---- */
.bracket{display:flex;gap:var(--s6);overflow-x:auto;padding:var(--s2) 2px var(--s5);scrollbar-width:thin}
.round{display:flex;flex-direction:column;min-width:218px}
.round>h3{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  font-size:var(--t-sm);color:var(--gold);margin-bottom:var(--s3);text-align:center}
.round .col{flex:1;display:flex;flex-direction:column;justify-content:space-around;gap:var(--s4)}
.round .match{position:relative}
/* connectors */
.round:not(:last-child) .match::after{content:"";position:absolute;right:calc(var(--s6)/-2 - 1px);
  top:50%;width:calc(var(--s6)/2);height:1px;background:var(--line-2)}

/* ---- champion banner ---- */
.champ{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) var(--s5);border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--gold),#e0a500);color:var(--ink);margin-bottom:var(--s5)}
.champ .who{font-family:var(--f-display);font-size:var(--t-xl);line-height:1}
.champ .lbl{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:var(--t-sm)}

/* ---- toast ---- */
.toast{position:fixed;bottom:var(--s5);left:50%;transform:translateX(-50%) translateY(8px);
  background:var(--ink-3);color:var(--white);border:1px solid var(--line-2);
  box-shadow:0 8px 14px rgba(0,0,0,.5); /* <16px blur so border+shadow is allowed */
  padding:11px 18px;border-radius:var(--r-md);font-size:var(--t-base);z-index:var(--z-toast);
  opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
  display:flex;align-items:center;gap:var(--s2)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{border-color:#6b2c22;color:#ffd9d0}
.toast.warn{border-color:var(--gold-deep);color:var(--gold)}
.toast.ok .ic{color:var(--green)}

/* ---- empty / skeleton / spinner ---- */
.empty{text-align:center;padding:var(--s7) var(--s5);color:var(--sage)}
.empty .big{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--cream);font-size:var(--t-md);margin-bottom:6px}
.skel{background:linear-gradient(90deg,var(--ink-2),var(--ink-3),var(--ink-2));background-size:200% 100%;
  animation:shimmer 1.2s linear infinite;border-radius:var(--r-sm)}
.skel.line{height:14px;margin:8px 0}
@keyframes shimmer{to{background-position:-200% 0}}
.spin{display:inline-block;width:20px;height:20px;border:2.5px solid rgba(255,255,255,.25);
  border-top-color:currentColor;border-radius:50%;animation:rot .7s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}

/* ---- gate (admin login) ---- */
.center{min-height:72vh;display:grid;place-items:center;padding:var(--s5)}
.gate{width:100%;max-width:360px;text-align:center}
.gate .wordmark{font-size:2rem;margin-bottom:var(--s2)}
.gate p{color:var(--sage);margin:0 auto var(--s4)}
.gate .err{color:var(--red);font-size:var(--t-sm);min-height:18px;margin:8px 0}

/* ---- admin workspace ---- */
.work{display:grid;grid-template-columns:300px 1fr;gap:var(--s5);align-items:start}
.rail{display:flex;flex-direction:column;gap:var(--s4);position:sticky;top:76px}

/* ---- public / TV scaling ---- */
.div-title{font-size:var(--t-2xl)}
.tv .bracket{gap:var(--s7)}
.tv .round{min-width:300px}
.tv .slot{padding:14px 16px;font-size:var(--t-md)}
.tv .round>h3{font-size:var(--t-md)}
.tv .champ .who{font-size:var(--t-2xl)}
.tv .div-title{font-size:var(--t-3xl)}
.tv table.std{font-size:var(--t-md)}
.tv table.std th{font-size:var(--t-sm)}
.tv table.std td{padding:12px 10px}
.tv .pool h3{font-size:var(--t-lg)}
.tv .pools{gap:var(--s5)}

/* ---- touch targets (coarse pointer / venue phone) ---- */
@media (pointer:coarse){
  .btn{min-height:44px}
  .btn.sm{min-height:44px;padding-top:10px;padding-bottom:10px}
  input,select,.num{min-height:44px}
}

/* ---- responsive ---- */
@media(max-width:860px){
  .work{grid-template-columns:1fr}
  .rail{position:static}
  .wrap{padding:var(--s4) var(--s4) var(--s7)}
}
@media(max-width:520px){
  .topbar{padding:var(--s3) var(--s4)}
  .tile .v{font-size:var(--t-xl)}
}

/* ============================================================================
   Account / player card / registration  (player-facing surfaces)
   ========================================================================== */

/* ---- avatar ---- */
.avatar{--av:44px;width:var(--av);height:var(--av);border-radius:50%;overflow:hidden;flex:none;
  display:grid;place-items:center;background:radial-gradient(circle at 32% 28%,var(--green-deep),var(--ink-3));
  color:var(--white);font-family:var(--f-cond);font-weight:700;letter-spacing:.02em;font-size:1rem;
  text-transform:uppercase;border:1px solid var(--line-2);user-select:none}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar.lg{--av:96px;font-size:2rem}
.avatar.xl{--av:120px;font-size:2.5rem}

/* avatar with camera-button uploader (account hero) */
.av-edit{position:relative;flex:none}
.av-edit .cam{position:absolute;right:-2px;bottom:-2px;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;background:var(--gold);color:var(--ink);border:2px solid var(--ink-2);
  cursor:pointer;box-shadow:var(--sh-1)}
.av-edit .cam:hover{filter:brightness(1.08)}

/* ---- account hero ---- */
.hero-card{display:flex;gap:var(--s5);align-items:center;flex-wrap:wrap}
.hero-id{flex:1;min-width:200px}
.hero-id .nm{font-family:var(--f-display);font-size:var(--t-2xl);line-height:1.04;word-break:break-word}
.dupr-badge{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 20px;
  border-radius:var(--r-lg);background:var(--ink-3);border:1px solid var(--line-2);min-width:108px;text-align:center}
.dupr-badge .v{font-family:var(--f-cond);font-weight:700;font-size:var(--t-2xl);line-height:1;color:var(--gold);
  font-variant-numeric:tabular-nums}
.dupr-badge .l{font-family:var(--f-cond);font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  font-size:var(--t-xs);color:var(--sage)}

/* ---- stat tiles ---- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:var(--s3)}
.tile{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4) var(--s3);text-align:center}
.tile .v{font-family:var(--f-cond);font-weight:700;font-size:var(--t-xl);line-height:1;color:var(--white);
  font-variant-numeric:tabular-nums}
.tile .v.gold{color:var(--gold)}
.tile .l{font-family:var(--f-cond);font-weight:600;text-transform:uppercase;letter-spacing:.07em;
  font-size:var(--t-xs);color:var(--sage);margin-top:6px}

/* ---- small tag / badge ---- */
.tag{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-cond);font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;font-size:var(--t-xs);padding:3px 9px;border-radius:var(--r-pill);
  background:var(--ink-3);color:var(--sage);border:1px solid var(--line);white-space:nowrap}
.tag svg{width:13px;height:13px}
.tag.gold{color:var(--gold);border-color:var(--gold-deep);background:#2a2208}
.tag.green{color:var(--green-lt);border-color:var(--green-deep);background:var(--green-bg)}

/* ---- list item: trailing meta column ---- */
.item .meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none;text-align:right}

/* ---- segmented control (radio group) ---- */
.seg{display:flex;gap:4px;background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-md);padding:4px}
.seg label{flex:1;position:relative;margin:0}
.seg input{position:absolute;opacity:0;width:0;height:0}
.seg span{display:block;text-align:center;font-family:var(--f-cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;font-size:var(--t-sm);padding:9px 8px;border-radius:var(--r-sm);color:var(--sage);
  cursor:pointer;white-space:nowrap;transition:background var(--dur),color var(--dur)}
.seg input:checked+span{background:var(--green);color:var(--ink)}
.seg input:focus-visible+span{outline:2px solid var(--green);outline-offset:2px}
@media (pointer:coarse){.seg span{min-height:44px;display:grid;place-items:center}}

/* ---- copy field ---- */
.copyfield{display:flex;gap:var(--s2);align-items:stretch}
.copyfield input{font-size:var(--t-sm);color:var(--cream)}

/* ---- section heads (player pages) ---- */
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);flex-wrap:wrap;
  margin:var(--s7) 0 var(--s3)}
.sec-head h2{font-family:var(--f-display);font-size:var(--t-xl)}

/* ---- danger zone ---- */
.danger-zone{border-color:#5b2a20}

@media(max-width:560px){
  .hero-card{gap:var(--s4)}
  .hero-id .nm{font-size:var(--t-xl)}
  .av-edit{order:0}
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .skel{animation:none;background:var(--ink-2)}
}