/* ═══════════════════════════════════════════════════════════════════════════
   TOPPS — HoopSim's design language (Topps '75 cardboard). docs/TOPPS.md
   This file is the SHARED VOCABULARY only: tokens + named pieces (tp-*).
   Every page is designed individually in its own template using these pieces.
   Re-skin the whole app by changing the tokens here; nothing else hard-codes them.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* cardboard + ink */
  --tp-paper:    #EDE3C8;   /* page: cardboard */
  --tp-paper-2:  #E3D7B7;   /* page shade: bands, pressed states */
  --tp-card:     #F8F2E1;   /* card stock (fronts, panels) */
  --tp-back:     #EADFC2;   /* card backs (typewriter tables) */
  --tp-back-2:   #DCCFAE;   /* card-back header rows */
  --tp-ink:      #1C1A14;   /* primary text, borders of objects */
  --tp-ink-2:    #3F3A2D;   /* secondary text */
  --tp-muted:    #6E6751;   /* labels, meta (≥4.5:1 on paper) */
  --tp-faint:    #958D74;   /* disabled, placeholders */
  --tp-rule:     rgba(28, 26, 20, .16);
  --tp-rule-2:   rgba(28, 26, 20, .30);
  --tp-dot:      1px dotted rgba(28, 26, 20, .32);
  --tp-slab:     #1C1A14;   /* app chrome bars (nav) — the wax-wrapper black */
  --tp-slab-ink: #F3EBD6;

  /* the '75 set colors (ink-safe on cardboard) */
  --tp-gold:      #A86A00;  /* gold as TEXT on paper */
  --tp-gold-fill: #E8A020;  /* gold as FILL (with ink text) */
  --tp-red:       #B3261E;
  --tp-green:     #1C7A48;
  --tp-blue:      #1D4E89;
  --tp-purple:    #5D3F8E;
  --tp-orange:    #C4531B;
  --tp-teal:      #117A8B;
  --tp-pink:      #A8326E;

  /* team colors: pages set --tc / --tc2 on :root or a wrapper from the team */
  --tc:  #5D3F8E;
  --tc2: #E8A020;
  --tc-ink:  #FFFFFF;       /* text on --tc */
  --tc2-ink: #1C1A14;       /* text on --tc2 */

  /* type */
  --tp-display: 'Oswald', 'Arial Narrow', sans-serif;
  --tp-body:    'IBM Plex Sans', system-ui, sans-serif;
  --tp-label:   'IBM Plex Mono', ui-monospace, monospace;
  --tp-type:    'Courier Prime', 'Courier New', ui-monospace, monospace;  /* typewriter card backs */

  /* shape + depth */
  --tp-r:      6px;         /* cardboard corners: small */
  --tp-r-lg:   10px;
  --tp-lift:   0 1px 0 rgba(28,26,20,.08), 0 8px 18px rgba(28,26,20,.18);
  --tp-lift-2: 0 2px 0 rgba(28,26,20,.10), 0 16px 30px rgba(28,26,20,.26);
  --tp-press:  inset 0 2px 0 rgba(28,26,20,.12);
  --tp-grain:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .10 0 0 0 0 .08 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* layout */
  --tp-gutter: 16px;
  --tp-tap:    44px;        /* minimum touch target */
}

/* ── 2. Page base ─────────────────────────────────────────────────────────── */
html.tp, html.tp body {
  background-color: var(--tp-paper);
  background-image: var(--tp-grain);
  color: var(--tp-ink);
  font-family: var(--tp-body);
  -webkit-font-smoothing: antialiased;
}
html.tp { color-scheme: light; }
html.tp ::selection { background: var(--tp-gold-fill); color: var(--tp-ink); }
:where(html.tp) a { color: inherit; }   /* zero specificity: never beats a component's own link color */
html.tp :focus-visible { outline: 2px solid var(--tp-blue); outline-offset: 2px; }

/* ── 3. Type helpers ──────────────────────────────────────────────────────── */
.tp-h1 { font: 700 30px/1 var(--tp-display); text-transform: uppercase; letter-spacing: .01em; margin: 0; }
.tp-h2 { font: 700 22px/1.05 var(--tp-display); text-transform: uppercase; letter-spacing: .02em; margin: 0; }
.tp-h3 { font: 600 17px/1.1 var(--tp-display); text-transform: uppercase; letter-spacing: .03em; margin: 0; }
.tp-kicker { font: 600 10px/1.2 var(--tp-label); letter-spacing: .16em; text-transform: uppercase; color: var(--tp-muted); }
.tp-label  { font: 600 9px/1.2 var(--tp-label); letter-spacing: .14em; text-transform: uppercase; color: var(--tp-muted); }
.tp-type   { font-family: var(--tp-type); }
.tp-num    { font-family: var(--tp-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.tp-muted  { color: var(--tp-muted); }

/* ── 4. The card (front): two-tone border → cream frame ──────────────────── */
.tp-card {
  border-radius: var(--tp-r-lg); padding: 7px;
  background: linear-gradient(135deg, var(--tc) 0 50%, var(--tc2) 50% 100%);
  box-shadow: var(--tp-lift);
}
.tp-card > .tp-frame { border-radius: var(--tp-r); background: var(--tp-card); color: var(--tp-ink); padding: 10px; }
.tp-window {           /* the "photo" window inside a card front */
  position: relative; overflow: hidden; border: 2px solid var(--tp-ink); border-radius: 3px;
  background: radial-gradient(120% 90% at 30% 20%, color-mix(in srgb, var(--tc) 70%, #fff), var(--tc) 55%, color-mix(in srgb, var(--tc) 60%, #000));
  color: var(--tc-ink);
}
.tp-namebar {           /* '75 name banner: team bar + flag */
  display: flex; align-items: stretch; margin: 8px -10px 0;
}
.tp-namebar > .n { flex: 1; min-width: 0; background: var(--tc); color: var(--tc-ink); padding: 7px 12px; }
.tp-namebar > .n b { display: block; font: 700 20px/1 var(--tp-display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-namebar > .n small { display: block; font: 500 8.5px/1.3 var(--tp-label); letter-spacing: .14em; text-transform: uppercase; opacity: .85; margin-top: 3px; }
.tp-namebar > .flag { flex: none; min-width: 64px; padding: 0 8px; background: var(--tc2); color: var(--tc2-ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; font: 700 16px/1 var(--tp-display); text-transform: uppercase; }
.tp-namebar > .flag small { font: 700 7px/1 var(--tp-label); letter-spacing: .14em; margin-bottom: 2px; }
.tp-plate {             /* nameplate strip under a card (GM, coach…) */
  display: flex; align-items: center; gap: 10px; margin: 0 -10px -10px; padding: 8px 12px;
  background: var(--tp-back); border-top: 1px dashed var(--tp-rule-2); border-radius: 0 0 var(--tp-r) var(--tp-r);
}

/* ── 5. Card back: typewriter table ───────────────────────────────────────── */
.tp-back {
  border-radius: var(--tp-r-lg); overflow: hidden; background: var(--tp-back); color: var(--tp-ink);
  box-shadow: 0 0 0 4px var(--tp-card) inset, var(--tp-lift);
}
.tp-back-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; background: var(--tc); color: var(--tc-ink); }
.tp-back-h b { font: 700 14px/1.1 var(--tp-display); text-transform: uppercase; letter-spacing: .04em; }
.tp-back-h small { font: 600 8.5px/1.2 var(--tp-label); letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.tp-back-cols { display: grid; gap: 4px; padding: 6px 12px; background: var(--tp-back-2); font: 700 8px/1.2 var(--tp-label); letter-spacing: .12em; text-transform: uppercase; color: var(--tp-muted); }
.tp-row { padding: 8px 12px; border-top: var(--tp-dot); font-family: var(--tp-type); font-size: 13px; }
.tp-row:first-child { border-top: 0; }
.tp-foot { padding: 7px 12px; border-top: var(--tp-dot); font: 11px/1.4 var(--tp-type); color: var(--tp-muted); }
.tp-trivia { display: flex; gap: 10px; margin: 12px; padding: 10px; border: 2px solid var(--tp-ink); border-radius: var(--tp-r); background: var(--tp-card); }
.tp-trivia b { font: 700 12px/1.2 var(--tp-display); text-transform: uppercase; }
.tp-trivia p { margin: 2px 0 0; font: 11.5px/1.4 var(--tp-type); }

/* ── 6. Pennant (section banner) ──────────────────────────────────────────── */
.tp-pennant { display: flex; align-items: center; gap: 10px; margin: 22px var(--tp-gutter) 10px; }
.tp-pennant > .flag {
  position: relative; padding: 6px 24px 6px 12px; background: var(--tp-card); color: var(--tp-ink);
  font: 700 16px/1 var(--tp-display); text-transform: uppercase; letter-spacing: .04em;
  border-left: 5px solid var(--tc); box-shadow: 0 1px 0 var(--tp-rule-2);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%);
}
.tp-pennant > .rule { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--tp-gold) 0 6px, transparent 6px 10px); opacity: .7; }
.tp-pennant > .meta { font: 600 9px/1 var(--tp-label); letter-spacing: .12em; text-transform: uppercase; color: var(--tp-muted); }

/* ── 7. Folder tabs + chips ───────────────────────────────────────────────── */
.tp-tabs { display: flex; gap: 4px; padding: 10px 12px 0; overflow-x: auto; scrollbar-width: none; border-bottom: 2px solid var(--tp-ink); }
.tp-tabs::-webkit-scrollbar { display: none; }
.tp-tab {
  flex: none; min-height: 36px; padding: 8px 12px 7px; border-radius: 7px 7px 0 0; border: 1px solid var(--tp-rule-2); border-bottom: 0;
  background: var(--tp-paper-2); color: var(--tp-muted); font: 600 13px/1 var(--tp-display); text-transform: uppercase; letter-spacing: .04em;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
.tp-tab.on, .tp-tab[aria-selected="true"] { background: var(--tp-card); color: var(--tp-ink); box-shadow: 0 2px 0 var(--tp-card); position: relative; top: 2px; }
.tp-seg { display: flex; gap: 4px; border-bottom: 2px solid var(--tp-ink); }
.tp-seg > * { flex: 1; text-align: center; }
.tp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tp-chip {
  min-height: 34px; padding: 7px 12px; border-radius: 5px; border: 1px solid var(--tp-rule-2); background: var(--tp-card); color: var(--tp-ink-2);
  font: 600 12px/1 var(--tp-display); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.tp-chip.on, .tp-chip[aria-pressed="true"] { background: var(--tp-ink); color: var(--tp-slab-ink); border-color: var(--tp-ink); }

/* ── 8. Buttons + inputs ──────────────────────────────────────────────────── */
.tp-btn {
  min-height: var(--tp-tap); padding: 0 16px; border-radius: var(--tp-r); border: 2px solid var(--tp-ink); background: var(--tp-card); color: var(--tp-ink);
  font: 700 12px/1 var(--tp-label); letter-spacing: .12em; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; text-decoration: none; box-shadow: 0 3px 0 var(--tp-ink); transition: transform .06s, box-shadow .06s;
}
.tp-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tp-ink); }
.tp-btn.gold  { background: var(--tp-gold-fill); }
.tp-btn.ink   { background: var(--tp-ink); color: var(--tp-slab-ink); }
.tp-btn.red   { border-color: var(--tp-red); color: var(--tp-red); box-shadow: 0 3px 0 var(--tp-red); }
.tp-btn.ghost { border-color: var(--tp-rule-2); box-shadow: none; color: var(--tp-ink-2); }
.tp-btn:disabled, .tp-btn[aria-disabled="true"] { opacity: .45; box-shadow: none; transform: none; cursor: default; }
.tp-input, html.tp .tp-form input:not([type=checkbox]):not([type=radio]):not([type=range]), html.tp .tp-form select, html.tp .tp-form textarea {
  min-height: var(--tp-tap); width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: var(--tp-r);
  border: 1.5px solid var(--tp-rule-2); background: var(--tp-card); color: var(--tp-ink); font: 16px/1.3 var(--tp-body);
}
.tp-input:focus, html.tp .tp-form :is(input, select, textarea):focus { outline: none; border-color: var(--tp-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tp-gold-fill) 40%, transparent); }
.tp-switch { width: 46px; height: 28px; border-radius: 14px; background: var(--tp-rule-2); position: relative; border: 0; flex: none; cursor: pointer; }
.tp-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--tp-card); box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: left .15s; }
.tp-switch.on, .tp-switch[aria-pressed="true"] { background: var(--tp-green); }
.tp-switch.on::after, .tp-switch[aria-pressed="true"]::after { left: 21px; }

/* ── 9. Stamps + objects ──────────────────────────────────────────────────── */
.tp-stamp {             /* round rubber stamp (record, grade) */
  width: 84px; height: 84px; border-radius: 50%; border: 3px solid var(--tp-ink); background: var(--tc2); color: var(--tc2-ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(8deg); box-shadow: 0 4px 0 rgba(0,0,0,.28); text-align: center;
}
.tp-stamp b { font: 700 25px/1 var(--tp-display); }
.tp-stamp small { font: 700 7px/1.2 var(--tp-label); letter-spacing: .12em; text-transform: uppercase; }
.tp-ink-stamp {         /* inked stamp: IR, OUT, W, L, OVER THE CAP */
  display: inline-block; padding: 3px 8px; border: 2.5px solid currentColor; color: var(--tp-red); transform: rotate(-7deg);
  font: 700 14px/1.05 var(--tp-display); letter-spacing: .05em; text-transform: uppercase; opacity: .9;
}
.tp-ink-stamp.green { color: var(--tp-green); }
.tp-ink-stamp.round { width: 42px; height: 42px; border-radius: 50%; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; }
.tp-stub {              /* ticket stub (games) */
  position: relative; display: flex; border-radius: var(--tp-r); background: var(--tp-card); color: var(--tp-ink); box-shadow: var(--tp-lift); overflow: visible;
}
.tp-stub > .tear { width: 70px; flex: none; padding: 10px 6px; text-align: center; background: var(--tp-back); border-right: 2px dashed var(--tp-rule-2); border-radius: var(--tp-r) 0 0 var(--tp-r); }
.tp-stub > .body { flex: 1; min-width: 0; padding: 10px 12px; }
.tp-stub.open > .tear::before, .tp-stub.open > .tear::after { content: ""; position: absolute; left: 64px; width: 12px; height: 12px; border-radius: 50%; background: var(--tp-paper); }
.tp-stub.open > .tear::before { top: -6px; } .tp-stub.open > .tear::after { bottom: -6px; }
.tp-coupon { display: flex; border-radius: var(--tp-r); border: 2px dashed var(--tc); background: var(--tp-card); overflow: hidden; }
.tp-coupon > .side { width: 76px; flex: none; background: var(--tc); color: var(--tc-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tp-coupon > .body { flex: 1; min-width: 0; padding: 10px 12px; }
.tp-clip {              /* clipboard */
  position: relative; padding: 24px 12px 12px; border-radius: var(--tp-r-lg); background: #8B6A3E; box-shadow: var(--tp-lift-2);
}
.tp-clip::before { content: ""; position: absolute; left: 50%; top: -8px; transform: translateX(-50%); width: 110px; height: 24px; border-radius: 6px; background: linear-gradient(#DADADA, #8E8E8E); border: 1px solid #666; }
.tp-clip > .sheet { background: #FBF6E6; border-radius: 3px; padding: 12px; background-image: repeating-linear-gradient(transparent 0 23px, rgba(29,78,137,.18) 23px 24px); }
.tp-sleeve { padding: 8px; border-radius: var(--tp-r-lg); background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.25)); border: 1px solid rgba(28,26,20,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }

/* ── 10. Notes, toasts, empty states ──────────────────────────────────────── */
.tp-note { padding: 10px 12px; border-left: 4px solid var(--tp-gold-fill); background: var(--tp-card); color: var(--tp-ink-2); font-size: 13px; line-height: 1.45; border-radius: 0 var(--tp-r) var(--tp-r) 0; }
.tp-note b, .tp-note strong { color: var(--tp-ink); }
.tp-note.warn { border-left-color: var(--tp-red); }
.tp-note.ok { border-left-color: var(--tp-green); }
.tp-empty { margin: 16px var(--tp-gutter); padding: 22px 16px; border: 2px dashed var(--tp-rule-2); border-radius: var(--tp-r-lg); text-align: center; color: var(--tp-muted); font: 13px/1.45 var(--tp-type); }
.tp-toast { position: fixed; left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 400; max-width: 460px; margin: 0 auto;
  padding: 12px 14px; border-radius: var(--tp-r); background: var(--tp-ink); color: var(--tp-slab-ink); font-size: 13px; box-shadow: var(--tp-lift-2); }

/* ── 11. Sheets (bottom sheets / dialogs) ─────────────────────────────────── */
.tp-sheet { background: var(--tp-card); color: var(--tp-ink); border-radius: 18px 18px 0 0; border-top: 2px solid var(--tp-ink); box-shadow: 0 -12px 40px rgba(28,26,20,.35); }
.tp-sheet .tp-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--tp-rule-2); margin: 10px auto 6px; }
.tp-dim { background: rgba(28,26,20,.55); }

/* ── Chrome: the team switcher bar (.team-nav, used by ~20 pages) is the wax-wrapper slab ─────────── */
html.tp .team-nav { background: var(--tp-slab); border-bottom: 0; box-shadow: 0 2px 0 rgba(0,0,0,.25); }
html.tp .team-nav-back { color: var(--tp-slab-ink); border-right: 1px solid rgba(243,235,214,.16); }
html.tp .team-nav-back:active { background: rgba(243,235,214,.08); }
html.tp .team-sw-wrap::after { background: linear-gradient(to right, transparent, var(--tp-slab)); }
html.tp .team-sw-pill { color: rgba(243,235,214,.62); font-family: var(--tp-label); }
html.tp .team-sw-pill:active { background: rgba(243,235,214,.08); }
html.tp .team-sw-pill .sw-dot { border-color: rgba(243,235,214,.35); }
html.tp .team-sw-pill.sw-active { color: var(--tp-slab-ink); background: rgba(243,235,214,.08); border-bottom-color: var(--tp-gold-fill); }
html.tp .team-sw-pill.sw-mine { color: var(--tp-gold-fill); }