/* vestivum.css — the shared shell for the newer pages (My Record, lead pages).
 *
 * The older pages each carry their own copy of these rules. Rather than rip
 * those apart mid-season, anything new builds on this file, so the shell only
 * has to be corrected in one place from here on.
 */

:root{
  --bg:#0f0e0d; --bg2:#1a1916; --bg3:#221f1c;
  --border:#2a2825; --border2:#38342f;
  --ember:#c8102e; --gold:#c9a227;
  --text:#f0ede8; --muted:#8a8078; --subtle:#5a534c;
  --green:#10b981; --green-bg:rgba(16,185,129,0.12); --green-border:rgba(16,185,129,0.32);
  --amber:#f59e0b; --amber-bg:rgba(245,158,11,0.12); --amber-border:rgba(245,158,11,0.32);
  --red:#ef4444;   --red-bg:rgba(239,68,68,0.12);    --red-border:rgba(239,68,68,0.32);

  /* One spacing step, used everywhere, so gaps stop being eyeballed. */
  --s1:6px; --s2:12px; --s3:18px; --s4:26px; --s5:38px; --s6:56px;
  --radius:6px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;min-height:100vh;
     -webkit-font-smoothing:antialiased;}
::-webkit-scrollbar{width:5px;height:5px;} ::-webkit-scrollbar-thumb{background:var(--subtle);border-radius:3px;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--ember);outline-offset:2px;}

/* ── NAV ─────────────────────────────────────────────────────────────── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:16px 36px;display:flex;
    align-items:center;justify-content:space-between;gap:var(--s3);
    background:rgba(15,14,13,0.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);}
.nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none;}
.nav-lockup{display:flex;flex-direction:column;gap:3px;}
.nav-wordmark{font-family:'Cinzel',serif;font-size:13px;font-weight:700;letter-spacing:0.3em;color:var(--text);}
.nav-slogan{font-family:'Cinzel',serif;font-size:7px;font-weight:600;letter-spacing:0.3em;text-transform:uppercase;color:var(--muted);}
.nav-right{display:flex;align-items:center;gap:22px;}
.nav-links{display:flex;align-items:center;gap:24px;}
.nav-links a{font-size:11px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;
             color:var(--muted);text-decoration:none;transition:color 0.2s;}
.nav-links a:hover{color:var(--text);}
.nav-links a.active{color:var(--ember);}
.nav-who{display:none;align-items:center;gap:8px;padding-left:22px;border-left:1px solid var(--border);
         font-size:11.5px;color:var(--muted);}
.nav-who-name{color:var(--text);font-weight:500;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nav-who button{background:none;border:none;color:var(--muted);font-size:11px;font-family:'Inter',sans-serif;
                cursor:pointer;text-decoration:underline;padding:4px 2px;}
.nav-who button:hover{color:var(--text);}

/* ── PAGE ────────────────────────────────────────────────────────────── */
.page{padding:100px 24px 72px;max-width:900px;margin:0 auto;}
.page-eyebrow{font-family:'Cinzel',serif;font-size:10px;letter-spacing:0.5em;text-transform:uppercase;
              color:var(--ember);margin-bottom:var(--s2);}
.page-headline{font-family:'Cinzel',serif;font-size:clamp(24px,4vw,36px);font-weight:700;line-height:1.18;
               text-wrap:balance;}
.page-sub{font-size:14px;color:var(--muted);line-height:1.7;margin-top:var(--s2);max-width:60ch;}

.section{margin-top:var(--s6);}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
              margin-bottom:var(--s3);flex-wrap:wrap;}
.section-title{font-family:'Cinzel',serif;font-size:11px;font-weight:600;letter-spacing:0.28em;
               text-transform:uppercase;color:var(--muted);}
.section-note{font-size:12px;color:var(--subtle);}

.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:var(--s4);}
.card + .card{margin-top:var(--s2);}

/* ── STAT TILES ──────────────────────────────────────────────────────── */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);}
.tile{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:var(--s3) var(--s3) 16px;}
.tile-val{font-family:'Cinzel',serif;font-size:27px;font-weight:700;line-height:1;
          font-variant-numeric:tabular-nums;}
.tile-label{font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-top:9px;}
.tile-note{font-size:11.5px;color:var(--subtle);margin-top:5px;}

/* ── BADGES ──────────────────────────────────────────────────────────── */
.badge{display:inline-block;font-size:10px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;
       padding:4px 9px;border-radius:3px;white-space:nowrap;}
.badge.good{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border);}
.badge.warn{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-border);}
.badge.bad{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border);}
.badge.flat{background:var(--bg3);color:var(--muted);border:1px solid var(--border2);}

/* ── TABLES ──────────────────────────────────────────────────────────── */
.tbl-wrap{border:1px solid var(--border);border-radius:var(--radius);overflow-x:auto;background:var(--bg2);}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px;}
table.tbl th{text-align:left;padding:11px 16px;font-family:'Cinzel',serif;font-size:9px;letter-spacing:0.14em;
             text-transform:uppercase;color:var(--muted);font-weight:400;border-bottom:1px solid var(--border);
             background:var(--bg3);white-space:nowrap;}
table.tbl td{padding:13px 16px;border-bottom:1px solid rgba(42,40,37,0.6);vertical-align:middle;}
table.tbl tr:last-child td{border-bottom:none;}
table.tbl tbody tr.linked{cursor:pointer;}
table.tbl tbody tr.linked:hover td{background:rgba(255,255,255,0.025);}
.num{font-variant-numeric:tabular-nums;}
.empty{padding:40px 20px;text-align:center;color:var(--muted);font-size:13px;font-style:italic;}

/* ── FILTER BAR ──────────────────────────────────────────────────────── */
.filters{display:flex;gap:8px;flex-wrap:wrap;}
.filter-btn{padding:7px 13px;border-radius:3px;font-size:12px;cursor:pointer;font-family:'Inter',sans-serif;
            border:1px solid var(--border);background:var(--bg2);color:var(--muted);transition:all 0.15s;}
.filter-btn:hover{border-color:var(--ember);color:var(--text);}
.filter-btn.active{border-color:var(--ember);color:var(--text);background:rgba(200,16,46,0.1);}

/* ── BUTTONS ─────────────────────────────────────────────────────────── */
/* Every tappable thing: no 300ms double-tap-zoom delay, and no accidental
   text selection on a long press. */
button,.btn,a.btn,.filter-btn,.btn-sm{touch-action:manipulation;-webkit-tap-highlight-color:transparent;}

.btn{padding:11px 22px;border-radius:4px;font-family:'Cinzel',serif;font-size:10px;font-weight:600;
     letter-spacing:0.2em;text-transform:uppercase;cursor:pointer;border:1px solid var(--border2);
     background:transparent;color:var(--muted);transition:all 0.15s;text-decoration:none;display:inline-block;}
.btn:hover{border-color:var(--ember);color:var(--text);}
.btn-primary{background:var(--ember);border-color:var(--ember);color:#fff;}
.btn-primary:hover{background:#a30d25;color:#fff;}

/* ── SIGN-IN GATE ────────────────────────────────────────────────────── */
.gate{display:none;position:fixed;inset:0;z-index:9000;background:rgba(9,8,7,0.97);
      align-items:center;justify-content:center;padding:24px;}
.gate-box{width:100%;max-width:380px;text-align:center;}
.gate-brand{font-family:'Cinzel',serif;font-size:22px;letter-spacing:0.18em;margin-bottom:var(--s1);}
.gate-sub{font-size:12px;color:var(--muted);margin-bottom:var(--s4);}
.gate input[type=password],.gate input[type=text]{width:100%;padding:15px 56px 15px 16px;font-size:20px;
  letter-spacing:0.14em;text-align:center;background:var(--bg2);border:1px solid var(--border);
  border-radius:5px;color:var(--text);font-family:'Inter',sans-serif;outline:none;}
.gate input:focus{border-color:var(--ember);}
.gate-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;
          color:var(--muted);font-size:11px;cursor:pointer;padding:10px;font-family:'Inter',sans-serif;}
.gate-err{display:none;margin-top:14px;font-size:13px;color:var(--red);}
.gate-hint{margin-top:var(--s4);font-size:11.5px;color:var(--subtle);line-height:1.6;}

@media(max-width:680px){
  /* A thumb is about 44px. Anything smaller gets missed, and a control someone
     has to aim at twice reads as a broken control. */
  .btn,a.btn,.filter-btn,.btn-sm{min-height:44px;display:inline-flex;
    align-items:center;justify-content:center;}
  nav{padding:14px 18px;}
  .nav-links{display:none;}
  /* The signed-in name and "Not you?" used to sit beside the logo. On a phone
     there is not room for both, so a long name ran underneath the wordmark and
     the logo sat on top of it. Identity moves into the drawer, which has room
     for the name AND the way to sign out of a shared phone. */
  .nav-who{display:none!important;}
  .nav-logo{min-width:0;flex:0 1 auto;}
  .nav-lockup{min-width:0;}
  .nav-wordmark,.nav-slogan{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .nav-right{flex:0 0 auto;gap:10px;}
  .page{padding:88px 16px 56px;}
  .tiles{grid-template-columns:repeat(2,1fr);}
  /* Eight date buttons wrapped onto three rows and pushed the table off the
     first screen. On a phone they scroll sideways in one row instead. */
  .filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;}
  .filters::-webkit-scrollbar{height:0;}
  .filter-btn{flex:0 0 auto;}
  .card{padding:var(--s3);}
  table.tbl th,table.tbl td{padding:11px 12px;}
  table.tbl{font-size:12.5px;}
  .hide-sm{display:none;}
}

@media print{
  nav,.gate,.no-print{display:none!important;}
  body{background:#fff;color:#111;}
  .page{padding:0;max-width:none;}
  .card,.tile,.tbl-wrap{border-color:#ccc;background:#fff;}
  .tile-val,.page-eyebrow{color:#111;}
  .page-sub,.section-title,.tile-label,.section-note{color:#444;}
}