@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* Backstage - The Awakening Summit.

   Rebuilt 2026-08-10. The first version looked like an analytics dashboard and
   the people who actually run this event are not dashboard people. Two rules
   now govern everything in here:

     1. It looks like the Summit website. Same palette, same font, same dark
        blue and green. Familiar surroundings do a lot of the reassuring.
     2. One idea per screen, in plain words. Big numbers, few of them,
        labelled the way somebody would say it out loud.

   Brand tokens are copied from landing/style.css deliberately rather than
   imported: this app must keep working if the public site is ever restyled. */
:root{
  --primary-green:#7cb342;
  --green-dk:#5f9327;
  --primary-blue:#1565c0;
  --primary-blue-light:#1976d2;
  --bg-dark:#1565c0;
  --bg-darker:#0d4a8a;
  --card-bg:rgba(255,255,255,.08);
  --card-line:rgba(255,255,255,.16);
  --text-white:#ffffff;
  --text-gray:#b3d4fc;
  --footer-bg:#0a3d6e;
  --warn:#ffcf6a;
  --bad:#ff9b9b;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{background:var(--bg-darker);overscroll-behavior-y:none;}
body{font-family:'Inter',-apple-system,Segoe UI,Arial,sans-serif;
  color:var(--text-white);line-height:1.6;
  background:linear-gradient(180deg,var(--bg-dark) 0%,var(--bg-darker) 100%);
  background-attachment:fixed;min-height:100vh;-webkit-text-size-adjust:100%;}
.hidden{display:none !important;}

/* ---------------- sign in ---------------- */
.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:22px;}
.gate-card{width:100%;max-width:400px;background:rgba(255,255,255,.07);
  border:1px solid var(--card-line);border-radius:18px;padding:34px 28px;
  box-shadow:0 26px 60px rgba(0,0,0,.35);backdrop-filter:blur(6px);}
.gate-card h1{font-size:1.6rem;font-weight:900;text-transform:uppercase;
  letter-spacing:.08em;color:var(--primary-green);}
.gate-sub{color:var(--text-gray);font-size:.88rem;margin-bottom:24px;}
.gate-card label{display:block;margin-bottom:16px;}
.gate-card label span{display:block;font-size:.76rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.09em;color:var(--text-gray);margin-bottom:7px;}
.gate-card input{width:100%;padding:14px;border:1px solid var(--card-line);
  border-radius:10px;font-size:1rem;font-family:inherit;color:#fff;
  background:rgba(0,0,0,.25);}
.gate-card input:focus{outline:2px solid var(--primary-green);outline-offset:1px;}
.hint{font-size:.8rem;color:var(--text-gray);margin:-6px 0 18px;}
.btn{width:100%;padding:15px 18px;border:none;border-radius:10px;
  background:var(--primary-green);color:#fff;font-weight:900;font-size:1rem;
  font-family:inherit;cursor:pointer;text-transform:uppercase;letter-spacing:.06em;}
.btn:hover{background:var(--green-dk);}
.btn:disabled{opacity:.6;cursor:default;}
.msg{margin-top:14px;font-size:.88rem;min-height:1.2em;color:var(--text-gray);}
.msg.err{color:var(--bad);font-weight:600;}
.msg.ok{color:var(--primary-green);font-weight:700;}

/* ---------------- top bar ---------------- */
.top{position:sticky;top:0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;gap:12px;padding:14px 18px;
  background:rgba(13,74,138,.97);border-bottom:1px solid var(--primary-blue-light);}
.brand{font-weight:900;text-transform:uppercase;letter-spacing:.06em;
  color:var(--primary-green);font-size:1.05rem;line-height:1.15;}
.brand span{display:block;font-size:.62rem;font-weight:600;letter-spacing:.1em;
  color:rgba(255,255,255,.55);text-transform:uppercase;}
.top-right{display:flex;align-items:center;gap:14px;}
.countdown{background:rgba(124,179,66,.18);border:1px solid rgba(124,179,66,.5);
  color:#cfe3b4;padding:5px 13px;border-radius:20px;font-weight:800;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;}
.burger{display:none;background:none;border:none;cursor:pointer;padding:6px;}
.burger i{display:block;width:24px;height:2.5px;background:#fff;margin:5px 0;border-radius:2px;}

/* ---------------- desktop nav ---------------- */
.tabs{display:flex;gap:4px;padding:0 12px;background:rgba(10,61,110,.95);
  border-bottom:1px solid rgba(255,255,255,.08);overflow-x:auto;}
.tab{background:none;border:none;color:rgba(255,255,255,.7);font-family:inherit;
  font-size:.9rem;font-weight:700;padding:14px 16px;cursor:pointer;white-space:nowrap;
  border-bottom:3px solid transparent;}
.tab:hover{color:#fff;}
.tab.active{color:#fff;border-bottom-color:var(--primary-green);}

/* ---------------- mobile menu ---------------- */
.mnav{position:fixed;inset:0;z-index:80;background:linear-gradient(180deg,#0d4a8a,#06305e);
  display:none;flex-direction:column;padding:18px;overflow-y:auto;}
.mnav.open{display:flex;}
.mnav-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;}
.mnav-close{background:none;border:none;color:#fff;font-size:2rem;line-height:1;cursor:pointer;padding:4px 10px;}
.mnav a{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:18px 16px;border-radius:12px;background:rgba(255,255,255,.07);
  border:1px solid var(--card-line);color:#fff;text-decoration:none;
  font-weight:800;font-size:1.05rem;margin-bottom:10px;}
.mnav a small{display:block;font-weight:500;font-size:.78rem;color:var(--text-gray);margin-top:2px;}
.mnav a.active{border-color:var(--primary-green);background:rgba(124,179,66,.16);}
.mnav a .arrow{color:var(--primary-green);font-size:1.2rem;}
.mnav-foot{margin-top:auto;padding-top:18px;color:var(--text-gray);font-size:.8rem;text-align:center;}

main{padding:22px 18px 40px;max-width:1120px;margin:0 auto;}
.foot{padding:10px 18px 40px;text-align:center;color:rgba(255,255,255,.45);font-size:.76rem;}
.link{background:none;border:none;color:var(--primary-green);font-weight:700;
  cursor:pointer;font-family:inherit;font-size:.85rem;padding:4px;}
.link:hover{text-decoration:underline;}

/* ---------------- page heading ---------------- */
.page-h{margin-bottom:6px;font-size:1.5rem;font-weight:900;text-transform:uppercase;
  letter-spacing:.02em;}
.page-h .green{color:var(--primary-green);}
.page-sub{color:var(--text-gray);margin-bottom:22px;font-size:.95rem;}

h2.sec{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;
  color:var(--primary-green);margin:30px 0 12px;}

/* ---------------- big simple numbers ---------------- */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
/* Fixed-width rows where the grouping is the point: the home screen reads as
   three deliberate lines (how it is selling / what to order / what came in),
   which auto-fit would reflow into an arbitrary shape at some widths. */
.grid.g3{grid-template-columns:repeat(3,1fr);}
.grid.g2{grid-template-columns:repeat(2,1fr);}
@media (max-width:900px){ .grid.g3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .grid.g3,.grid.g2{grid-template-columns:1fr;} }
.card{background:var(--card-bg);border:1px solid var(--card-line);border-radius:16px;
  padding:20px;}
.stat .k{font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  color:var(--text-gray);}
.stat .v{font-size:2.3rem;font-weight:900;color:#fff;line-height:1.1;margin-top:6px;}
.stat .s{font-size:.84rem;color:var(--text-gray);margin-top:4px;}
.stat.hero{background:linear-gradient(160deg,rgba(124,179,66,.22),rgba(124,179,66,.06));
  border-color:rgba(124,179,66,.45);}
.stat.hero .v{color:var(--primary-green);font-size:2.7rem;}

/* money: three lines, nothing else */
.money{background:var(--card-bg);border:1px solid var(--card-line);border-radius:16px;
  overflow:hidden;max-width:560px;}
.money .row{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.1);}
.money .row:last-child{border-bottom:none;}
.money .row .lbl{font-weight:700;}
.money .row .lbl small{display:block;font-size:.76rem;color:var(--text-gray);font-weight:500;}
.money .row .amt{font-variant-numeric:tabular-nums;font-weight:900;font-size:1.15rem;white-space:nowrap;}
.money .row.total{background:rgba(124,179,66,.16);}
.money .row.total .amt{color:var(--primary-green);font-size:1.5rem;}
.money .row.neg .amt{color:var(--warn);}

.alert{display:flex;gap:10px;padding:14px 16px;border-radius:12px;font-size:.92rem;
  margin-bottom:12px;}
.alert.warn{background:rgba(255,190,60,.14);border:1px solid rgba(255,190,60,.45);color:#ffe0a3;}
.alert.info{background:rgba(255,255,255,.08);border:1px solid var(--card-line);color:var(--text-gray);}

/* ---------------- tables ---------------- */
.tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px;}
.search{flex:1;min-width:200px;padding:13px 14px;border:1px solid var(--card-line);
  border-radius:10px;font-size:1rem;font-family:inherit;background:rgba(0,0,0,.25);color:#fff;}
.search::placeholder{color:rgba(179,212,252,.7);}
.btn-sm{padding:13px 16px;border:1px solid var(--card-line);background:rgba(255,255,255,.08);
  border-radius:10px;font-family:inherit;font-size:.88rem;font-weight:800;color:#fff;
  cursor:pointer;text-decoration:none;display:inline-block;white-space:nowrap;}
.btn-sm:hover{border-color:var(--primary-green);color:var(--primary-green);}
.btn-sm.go{background:var(--primary-green);border-color:var(--primary-green);}
.btn-sm.go:hover{background:var(--green-dk);color:#fff;}
.tablewrap{background:var(--card-bg);border:1px solid var(--card-line);border-radius:16px;
  overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:.92rem;}
th{text-align:left;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  color:var(--text-gray);padding:13px 15px;border-bottom:1px solid var(--card-line);white-space:nowrap;}
td{padding:13px 15px;border-bottom:1px solid rgba(255,255,255,.07);vertical-align:top;}
tr:last-child td{border-bottom:none;}
td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.7rem;
  font-weight:800;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;}
.pill.vip{background:rgba(186,104,255,.2);color:#dcb8ff;}
.pill.std{background:rgba(25,118,210,.3);color:#bcdcff;}
.pill.in{background:rgba(124,179,66,.25);color:#cfe3b4;}
.pill.out{background:rgba(255,255,255,.1);color:var(--text-gray);}
.pill.void{background:rgba(255,120,120,.2);color:var(--bad);}
.empty{padding:38px 20px;text-align:center;color:var(--text-gray);}
.muted{color:var(--text-gray);}
.nowrap{white-space:nowrap;}
/* A multi-panel cap colourway ("Heather Grey + Birch + Army Olive") is ONE
   product. Keep it on a single line so it cannot break into what looks like
   a list of separate items; the table scrolls or wraps around it instead. */
.combo{white-space:nowrap;}
@media (max-width:760px){
  /* inside a phone card there is a whole row to play with, so let it wrap
     rather than force the card wider than the screen */
  .combo{white-space:normal;}
}

/* ---------------- phone ---------------- */
/* ----------------------------------------------------------------------
   TABLES BECOME CARDS ON A PHONE

   A table with seven columns cannot fit a 375px screen, and making it scroll
   sideways hides exactly the thing people came for -- on the attendee list
   that was the Print ticket button, off the right-hand edge.

   So below 760px every row turns into its own card: the name across the top,
   then one line per field labelled from the column heading (via data-label,
   which the table() helper writes automatically), and any action button full
   width at the bottom. Nothing is hidden and nothing scrolls sideways.
   ---------------------------------------------------------------------- */
@media (max-width:760px){
  .tablewrap{overflow-x:visible;background:none;border:none;border-radius:0;}
  table,tbody,tr,td{display:block;width:100%;}
  thead{display:none;}
  tr{background:var(--card-bg);border:1px solid var(--card-line);border-radius:14px;
     margin-bottom:12px;padding:4px 0;}
  tr:hover td{background:none;}
  td{border:none;display:flex;justify-content:space-between;align-items:baseline;
     gap:16px;padding:9px 16px;text-align:right;}
  td::before{content:attr(data-label);font-weight:800;font-size:.68rem;
     text-transform:uppercase;letter-spacing:.09em;color:var(--text-gray);
     text-align:left;flex:0 0 auto;white-space:nowrap;}
  /* the name leads the card, so it gets no label and its own line */
  td.lead{display:block;text-align:left;font-size:1.05rem;padding:12px 16px 10px;
     border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:4px;}
  td.lead::before{content:none;}
  /* a button fills the card width and needs no label either */
  td.act{display:block;padding:6px 16px 14px;}
  td.act::before{content:none;}
  td.act .btn-sm{display:block;width:100%;text-align:center;}
  td.num{text-align:right;}
}

@media (max-width:820px){
  .tabs{display:none;}          /* replaced by the burger menu */
  .burger{display:block;}
  /* The countdown STAYS on a phone. It used to be hidden here because the
     home screen repeated it, and the home screen no longer does -- hiding it
     now would leave phone users with no countdown anywhere. Room is made by
     dropping the top-bar Sign out instead, which is already in the menu. */
  #logoutBtn{display:none;}
  .countdown{font-size:.66rem;padding:4px 10px;}
  .top{padding:12px 14px;}
  .brand{font-size:.95rem;}
  main{padding:18px 14px 34px;}
  .stat .v{font-size:2rem;}
  .stat.hero .v{font-size:2.3rem;}
  .page-h{font-size:1.3rem;}
  th,td{padding:11px 12px;}
  table{font-size:.86rem;}
  .btn-sm{flex:1;text-align:center;}
}