/* ==========================================================
   THE INVITATIONAL — APP SHELL
   Additive layer over Dustin's styles.css. Everything here uses
   the semantic tokens from that file, so a palette change still
   cascades from one place.
   ========================================================== */

.build-tag{
  font-family:var(--font-mono); font-size:8px; letter-spacing:.08em;
  color:var(--border); margin-left:6px;
}

/* ---------- first-run console path under the PIN prompt ---------- */
.pin-help{ display:none; text-align:center; padding:2px 18px 10px;
  background:var(--bg-sunken); border-bottom:1px solid var(--border-subtle); }
.pin-row.show ~ .pin-help{ display:block; }
.pin-help a{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em;
  color:var(--accent); text-decoration:underline; text-underline-offset:3px;
  padding:8px 10px; display:inline-block;
}

/* ---------- footer console link ---------- */
.foot-admin{ text-align:center; margin:-4px 0 10px; }
.foot-admin a{
  font-family:var(--font-mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-dim); text-decoration:none;
  padding:8px 12px; display:inline-block;
}

/* ---------- iOS auto-zoom guard ---------- */
/* iOS zooms the page when a focused form control is under 16px. The zoom then
   breaks the sticky admin bar's safe-area alignment (Ryan's 8/26 screenshots:
   ADMIN row under the clock after PIN entry). 16px on everything focusable. */
.pin-row input, .tp-select, .hcp-row input{ font-size:16px; }

/* ---------- back to the landing page ---------- */
/* Launched from the Home Screen, iOS renders the page full-bleed underneath
   the status bar and the camera notch — Safari hides this by adding its own
   inset. Whichever bar is topmost has to reserve that space itself, and which
   one that is depends on whether an admin session is live. */
/* --inv-safe-top is env(safe-area-inset-top) measured at launch and frozen
   by the shim: after dismissing the iOS in-app browser sheet, env() itself
   starts reporting 0 in a pinned app (WebKit bug) and the buffer collapses. */
.topnav{
  display:flex; align-items:center;
  padding:calc(8px + var(--inv-safe-top, env(safe-area-inset-top))) 18px 6px;
  background:var(--bg-sunken); border-bottom:1px solid var(--border-subtle);
}
/* The gold admin bar sits above it and carries the inset instead. */
body.admin-live .topnav{ padding-top:8px; }
.back-home{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-muted); text-decoration:none;
  padding:4px 2px;
}
.back-home svg{
  width:13px; height:13px; fill:none; stroke:currentColor;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
}
.back-home:active{ color:var(--accent); }

/* ---------- admin banner ---------- */
/* Deliberately loud: you should never wonder whether you are logged in. */
.admin-bar{
  position:sticky; top:0; z-index:1000;
  padding:calc(7px + var(--inv-safe-top, env(safe-area-inset-top))) 14px 8px;
  background:var(--accent); color:var(--pine-950);
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.admin-bar .ab-row{ display:flex; align-items:center; gap:9px; }
.admin-bar .ab-badge{
  font-weight:700; letter-spacing:.18em; font-size:9px;
  border:1px solid rgba(15,26,20,.45); border-radius:10px; padding:2px 7px;
}
.admin-bar .ab-who{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.admin-bar .ab-left{ opacity:.72; margin-left:auto; white-space:nowrap; }
/* Actions on their own row: full-height iOS tap targets that can never
   collide with the identity text, whatever the name/time widths are. */
.admin-bar .ab-actions{ margin-top:7px; }
.admin-bar a.ab-out{ text-decoration:none; }
.admin-bar .ab-out{
  flex:1; display:flex; align-items:center; justify-content:center;
  min-height:34px; box-sizing:border-box;
  background:rgba(15,26,20,.14); border:1px solid rgba(15,26,20,.45);
  color:var(--pine-950); border-radius:12px; padding:6px 11px;
  font-family:var(--font-mono); font-size:10px; font-weight:700;
  letter-spacing:.08em; cursor:pointer;
}
/* A thin gold rule under the hero while a session is live. */
body.admin-live .hero{ border-bottom-color:var(--accent-dim); }

/* ---------- sync status pill (injected by the shim) ---------- */
.sync-pill{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em;
  text-transform:uppercase; padding:3px 9px; border-radius:12px;
  border:1px solid transparent; color:var(--text-muted); white-space:nowrap;
}
.sync-pill.wait{ color:var(--text-muted); border-color:var(--border); }
.sync-pill.ok,
.sync-pill.warn{ color:var(--accent); border-color:var(--accent-dim); }
.sync-pill.bad{ color:var(--team-a); border-color:var(--team-a-dim); }

/* ---------- scorecards ---------- */
.cards-upload{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.cards-upload .tp-select{ flex:1 1 150px; width:auto; }
.cards-btn{
  display:inline-block; cursor:pointer; white-space:nowrap;
  background:var(--accent); color:var(--pine-950);
  border-radius:4px; padding:10px 14px;
  font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.08em;
}
.cards-btn:active{ background:var(--accent-dim); }
.cards-note{
  font-family:var(--font-mono); font-size:10.5px; color:var(--accent);
  min-height:14px; margin-top:9px;
}
.cards-list{ margin-top:6px; }
.cards-empty{
  font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted); padding:8px 0;
}
.card-row{
  display:flex; align-items:center; gap:12px;
  padding:10px 0; border-bottom:1px solid var(--border-subtle);
}
.card-row:last-child{ border-bottom:none; }
.card-row.superseded{ opacity:.45; }
.cr-thumb{
  width:64px; height:48px; object-fit:cover; border-radius:5px;
  border:1px solid var(--border); cursor:pointer; flex-shrink:0;
}
.cr-meta{ flex:1; min-width:0; }
.cr-round{
  font-family:var(--font-mono); font-size:11px; font-weight:700;
  color:var(--text); text-transform:uppercase; letter-spacing:.06em;
}
.cr-tag{
  font-size:12px; color:var(--text); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cr-tag.untagged{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent);
}
.cr-when{
  font-family:var(--font-mono); font-size:9.5px; color:var(--text-muted); margin-top:2px;
}
.cr-btns{ display:flex; flex-direction:column; gap:6px; flex-shrink:0; }
.cr-view{
  background:none; border:1px solid var(--accent-dim); color:var(--accent);
  border-radius:12px; padding:5px 12px; cursor:pointer;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.08em;
}

/* ---------- tag picker ---------- */
.cards-tagpicker{
  border:1px solid var(--accent-dim); border-radius:8px; background:var(--bg-sunken);
  padding:13px 14px; margin-top:12px;
}
.tp-title{
  font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); margin-bottom:9px;
}
.cards-tagpicker .tp-select{ width:100%; margin-bottom:9px; }
.tp-choice{
  display:flex; align-items:center; gap:9px; padding:9px 2px;
  font-size:14px; color:var(--text); border-bottom:1px solid var(--border-subtle);
  cursor:pointer;
}
.tp-choice:last-of-type{ border-bottom:none; }
.tp-choice input{ width:18px; height:18px; accent-color:var(--accent); flex-shrink:0; }
.tp-hint{
  font-family:var(--font-mono); font-size:9.5px; color:var(--text-muted);
  letter-spacing:.06em; margin:6px 0 2px;
}
.tp-actions{ display:flex; gap:10px; align-items:center; margin-top:11px; }

/* ---------- full-screen card viewer ---------- */
.card-viewer{
  position:fixed; inset:0; z-index:1200;
  display:flex; align-items:center; justify-content:center;
  background:rgba(6,11,8,.94); padding:16px;
}
.card-viewer img{
  max-width:100%; max-height:100%;
  border-radius:6px; border:1px solid var(--border);
}
/* Hide the broken-image glyph while the photo is still downloading. */
.card-viewer img:not([src]){ display:none; }
.cv-note{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  text-align:center; color:var(--text-muted);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em;
}
.cv-close{
  position:absolute; top:calc(14px + env(safe-area-inset-top)); right:16px;
  background:var(--accent); color:var(--pine-950); border:none;
  border-radius:14px; padding:7px 15px; cursor:pointer;
  font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.1em;
}

/* ---------- bottom tab bar ---------- */
body{ padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
footer{ margin-bottom:8px; }
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:999;
  display:flex; justify-content:space-around; align-items:stretch;
  background:color-mix(in srgb, var(--bg-sunken) 82%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-top:1px solid var(--border);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
.tabbar a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  text-decoration:none; padding:5px 2px; border-radius:8px;
  color:var(--text-muted);
  font-family:var(--font-mono); font-size:9px; font-weight:500; letter-spacing:.08em;
}
.tabbar a svg{
  width:21px; height:21px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.tabbar a.active{ color:var(--accent); }
@media(min-width:740px){
  .tabbar{
    max-width:520px; left:50%; transform:translateX(-50%);
    border:1px solid var(--border); border-bottom:none; border-radius:14px 14px 0 0;
  }
}

/* ---------- per-round reset (admin only) ---------- */
.round-reset{
  display:none; gap:16px; justify-content:flex-end;
  margin-top:10px; padding-top:8px; border-top:1px dashed var(--border-subtle);
}
body.admin-live .round-reset{ display:flex; }
.round-reset a{
  cursor:pointer; text-decoration:none; display:inline-flex; align-items:center;
  font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--team-a);
  border:1px solid var(--team-a-dim); border-radius:12px; padding:7px 13px;
  min-height:32px; box-sizing:border-box;
}
.round-reset a:active{ background:var(--team-a); color:#fff; }

/* ---------- back-to-top chevron under each section ---------- */
.totop{ display:flex; justify-content:flex-end; margin:6px 2px 0; }
.totop a{
  display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  font-family:var(--font-mono); font-size:9.5px; font-weight:600; letter-spacing:.14em;
  color:var(--accent-dim); text-decoration:none; padding:6px 8px; border-radius:6px;
}
.totop a svg{
  width:12px; height:12px; fill:none; stroke:currentColor;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
}
.totop a:active{ color:var(--accent); }