:root {
  --bg: #14161a;
  --bg-panel: #1c1f26;
  --bg-panel-2: #23272f;
  --border: #333947;
  --text: #e8eaed;
  --text-dim: #9aa1ad;
  --accent: #e63946;
  --accent-dim: #7a2027;
  --good: #4caf7d;
  --warn: #e0a020;
  --input-bg: #11131a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  min-height: 100%;
}

body {
  background-image:
    linear-gradient(180deg, rgba(230,57,70,0.07), transparent 220px);
}

h1, h2, h3 { font-weight: 700; letter-spacing: 0.2px; }

.muted { color: var(--text-dim); font-size: 0.9em; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  position: sticky;
  top: 0;
  z-index: 30;
  gap: 14px;
}

.brand { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.brand .logo img { 
  max-width: 100%;
  width: 70px;
  height: 55px;
  height: auto; 
}
.brand h1 { margin: 0; font-size: 1.4rem; }
.brand #league-sub { margin-top: 2px; }

.save-state {
  font-size: 0.85rem;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  white-space: nowrap;
}
.save-state.saving { color: var(--warn); border-color: var(--warn); }
.save-state.saved { color: var(--good); border-color: var(--good); }
.save-state.error { color: var(--accent); border-color: var(--accent); }

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px 20px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 65px;
  z-index: 9;
}

.tab-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.92rem;
  transition: all 0.12s ease;
}
.tab-btn:hover { color: var(--text); background: var(--bg-panel-2); }
.tab-btn.active {
  color: white;
  background: var(--accent);
  border-color: var(--accent);
}

.tab-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.panel h2 {
  margin-top: 0;
  font-size: 1.1rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 16px;
}

.panel-note { margin-top: -8px; margin-bottom: 14px; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

th, td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--text-dim);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

tbody tr:hover { background: rgba(255,255,255,0.02); }

.table-scroll { overflow-x: auto; }

input[type="text"], input[type="number"], input[type="password"], textarea, select {
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 0.92rem;
  width: 100%;
  font-family: inherit;
}
input[type="number"] { width: 90px; }
textarea { resize: vertical; min-height: 2.4em; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
}

.cell-computed {
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* Classes for coloring standings ranks — 1st/2nd/3rd get their own color,
   every other position shares .pos-other (see podiumClass() in app.js) */
.pos-1 { color: #d6a500; font-weight: 700; }
.pos-2 { color: #a1a1a1; font-weight: 700; }
.pos-3 { color: #9c4b0a; font-weight: 700; }
.pos-other { color: #0079c1; font-weight: 700; }

/* Classes for coloring points reference table rows */
.pos-ref-1 { background: #d6a500; }
.pos-ref-1:hover { background: #d0b047; }
.pos-ref-2 { background: #a1a1a1; }
.pos-ref-2:hover { background: #bab7b7; }
.pos-ref-3 { background: #9c4b0a; }
.pos-ref-3:hover { background: #90592c; }
.pos-ref-other { background: #0079c1; }
.pos-ref-other:hover { background: #3787b8; }

.driver-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.driver-card {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-left: 5px solid var(--car-color, var(--accent));
  border-radius: 10px;
  padding: 14px;
}

.driver-card .team-name {
  font-weight: 700;
  font-size: 1.05rem;
}
.driver-card .driver-name { color: var(--text-dim); margin-bottom: 6px; }
.driver-card details summary { cursor: pointer; color: var(--text-dim); margin-top: 8px; font-size: 0.85rem; }
.driver-card details textarea { margin-top: 8px; }

.color-swatch {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  border: 1px solid rgba(255,255,255,0.3);
}

.kv-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 10px 16px;
  align-items: center;
}
.kv-grid label { color: var(--text-dim); font-size: 0.88rem; }

.btn {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.88rem;
}
.btn:hover { border-color: var(--accent); color: white; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: white; }
.btn.small { padding: 4px 9px; font-size: 0.8rem; }
.btn.danger { color: var(--accent); border-color: var(--accent-dim); }
.btn.danger:hover { background: var(--accent); border-color: var(--accent); color: white; }

.row-actions { display: flex; gap: 6px; }

.filters { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.filters input, .filters select { width: auto; min-width: 160px; }

.lore-block { margin-bottom: 22px; }
.lore-block h3 { margin-bottom: 4px; }
.lore-block .trophy-name { color: var(--accent); font-size: 1.15rem; font-weight: 700; }
.lore-block p { line-height: 1.55; color: #cfd3da; }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--bg-panel);
  border: 1px solid var(--border);
}

.tier-S { color: #ff6b6b; }
.tier-A { color: #ffb84a; }
.tier-B { color: #7fd1ff; }
.tier-C { color: #a0e0a0; }
.tier-D { color: #cfd3da; }
.tier-F { color: #888; }

.credentials-banner {
  margin: 16px 24px 0;
  padding: 14px 18px;
  background: var(--bg-panel);
  border: 1px solid var(--good);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.credentials-banner code {
  background: var(--input-bg);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.95em;
}

.credentials-banner.error { border-color: var(--accent); }

.auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 360px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px;
}

.auth-card h1 {
  font-size: 1.3rem;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-card .muted { margin-bottom: 20px; }

.auth-field { margin-bottom: 14px; }
.auth-field label { display: block; font-size: 0.85rem; color: var(--text-dim); margin-bottom: 6px; }

.auth-error {
  color: var(--accent);
  font-size: 0.85rem;
  margin-bottom: 14px;
  min-height: 1.2em;
}

footer.hint {
  text-align: center;
  color: var(--text-dim);
  font-size: 0.8rem;
  padding: 30px 0 60px;
}

@media (max-width: 700px) {
  .kv-grid { grid-template-columns: 1fr; }
  .topbar { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---------- Home (bento overview) ---------- */
/* Two containers, not a uniform grid: the expanded card sits alone on the
   left; every other card is stacked in a column on the right, each with
   equal flex-basis, so they always collectively fill exactly the expanded
   card's height — one card stretches to fill it alone, five cards split
   it five ways, never a gap. The expanded card's own height is content-
   driven (no fixed height, no internal scroll — see .expanded below);
   align-items: stretch on the row then makes the collapsed column match
   whatever height that content needs. Sizes here don't transition via
   plain CSS (reparenting a card between containers isn't something a
   transition can animate) — animateBentoReflow() in app.js handles the
   motion with a FLIP transform instead. */
.bento-grid {
  display: flex;
  /* Deliberately not `stretch`: with two nested flex containers, stretch
     sizes BOTH sides to the tallest one's unconstrained natural content
     (the collapsed column's full content sum, computed before its
     children ever get a chance to divide/scroll a fixed height) — which
     inflates the expanded card with dead space instead of the collapsed
     column matching the expanded card's height. Each side sizes to its
     own content instead; app.js's syncBentoHeights() then copies the
     expanded side's resolved height onto the collapsed column explicitly. */
  align-items: flex-start;
  gap: 16px;
}

.bento-expanded-wrap {
  display: flex;
  flex: 2.2 1 0%;
  min-width: 0;
}

.bento-collapsed-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  gap: 16px;
  min-width: 0;
  overflow: hidden; /* height is set explicitly in px by JS; this just guards against a rounding-error sliver of overflow */
}

.bento-card {
  position: relative;
  isolation: isolate; /* keeps the ::before gradient frame contained to this card's stacking context */
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  min-width: 0;
}
/* Collapsed cards: equal share of the column's height. No scroll here —
   these are previews, not a place to interact; content past the fitted
   share is clipped rather than scrollable. Clicking through to expand
   (or the "View full tab" link) is how you see the rest. */
.bento-collapsed-wrap .bento-card {
  flex: 1 1 0%;
  overflow: hidden;
  min-height: 0;
}
/* The expanded card fills its wrap completely and is never capped —
   "expand fully without needing to scroll" means height:auto, not a
   fixed box with overflow. */
.bento-card.expanded {
  flex: 1 1 auto;
  width: 100%;
  min-height: 380px;
  overflow: visible;
  cursor: default;
}

.bento-card h3 { margin: 0 0 14px; font-size: 1rem; }
.bento-card.expanded h3 { font-size: 1.2rem; }

.bento-view-full { display: none; margin-top: 16px; }
.bento-card.expanded .bento-view-full { display: block; }

.bento-driver-list { display: flex; flex-direction: column; gap: 8px; }

/* Gradient border that grows in from the card's edge on hover — a ring
   whose thickness (the gap between the outer edge and the masked-out
   inner hole) animates from 0 to a few px, reading as "closing inward". */
.bento-card:not(.expanded)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 0;
  background: linear-gradient(135deg, var(--accent), #ffb37a, var(--accent));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: padding 0.5s ease, opacity 0.5s ease;
}
.bento-card:not(.expanded):hover::before {
  padding: 4px;
  opacity: 1;
}

@media (max-width: 860px) {
  .bento-grid { flex-direction: column; min-height: 0; }
  .bento-expanded-wrap { flex: none; }
  .bento-collapsed-wrap { flex: none; }
  /* Collapsed cards show just their title until tapped — no room to
     preview content usefully at phone width, and no hover to reveal it
     progressively, so skip straight to "tap to see more." Height follows
     the title alone rather than the old fixed 220px built for content. */
  .bento-collapsed-wrap .bento-card {
    flex: none;
    height: auto;
    min-height: 0;
    padding: 16px 20px;
  }
  .bento-collapsed-wrap .bento-card h3 { margin: 0; }
  .bento-collapsed-wrap .bento-card > *:not(h3) { display: none; }
  /* No :hover on touch devices — the gradient border is the only "tap to
     expand" affordance left once content is hidden, so it has to be
     visible up front rather than waiting for a hover that will never fire. */
  .bento-card:not(.expanded)::before {
    opacity: 1;
    padding: 3px;
  }
}

.hamburger-btn {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  width: 38px;
  height: 38px;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.hamburger-btn:hover { border-color: var(--accent); }

.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 20;
}
.nav-backdrop.open { display: block; }

/* Below this width the horizontal tab bar wraps into an unreadable stack
   of rows, so it becomes a slide-in sidebar instead — toggled by the
   hamburger button that only appears at this breakpoint. */
@media (max-width: 820px) {
  .hamburger-btn { display: inline-flex; align-items: center; justify-content: center; }

  .tabs {
    position: fixed;
    /* Set from JS (syncTopbarHeight in app.js) to the topbar's actual
       rendered height, which changes when it stacks to two rows on narrow
       phones — a fixed guess here would either clip the top tabs behind
       the topbar or leave a gap, depending on screen width. */
    top: var(--topbar-h, 65px);
    left: 0;
    bottom: 0;
    z-index: 25;
    width: 250px;
    max-width: 80vw;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    padding: 14px;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }
  .tabs.open { transform: translateX(0); }

  .tab-btn { text-align: left; }
}