/* GAMMA Tennessee — Availability System
   Design language taken from the GAMMA Tennessee logo:
   heavy uppercase display type, the red bar behind a line of text,
   silver for secondary information, cage mesh as background texture. */

/* The palette is deliberately a lifted slate rather than near-black.
   Eye strain in dark interfaces comes from the gap between an almost black
   ground and almost white type — so the ground is raised and the type is
   pulled back a little. Contrast stays well above the accessibility
   threshold, it just stops glaring. */
:root{
  --ink:#232B35;
  --surface:#2E3742;
  --surface-2:#38424E;
  --line:#46515E;
  --line-soft:#3D4854;
  --text:#E7EAEE;
  --silver:#C3CAD3;
  --muted:#A7B0BB;
  --muted-dim:#8C959F;
  --brand:#C82A35;
  --brand-deep:#9A1C25;
  --brand-soft:#F2A0A7;
  --yes:#46A971;
  --yes-dim:#1F3F2C;
  --yes-text:#AEE0C2;
  --maybe:#D8A544;
  --maybe-text:#EDCB8E;
  --no:#828C99;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono","Cascadia Mono","Segoe UI Mono",Consolas,monospace;

  --fs-xs:.6875rem;
  --fs-sm:.8125rem;
  --fs-base:.9375rem;
  --fs-lg:1.0625rem;
  --fs-xl:1.3125rem;

  --radius:10px;
  --shell:460px;
}

*,*::before,*::after{box-sizing:border-box;}

body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:var(--sans);font-size:var(--fs-base);line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

.backdrop{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(45deg, transparent 0 24px, rgba(200,42,53,.05) 24px 25px),
    repeating-linear-gradient(-45deg, transparent 0 24px, rgba(170,190,215,.05) 24px 25px),
    radial-gradient(130% 90% at 50% -10%, #33404F 0%, var(--ink) 64%);
}
.backdrop::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(35,43,53,.25) 0%, rgba(35,43,53,.85) 58%, var(--ink) 100%);
}

.strip{
  position:relative;z-index:2;
  background:var(--surface-2);border-bottom:1px solid var(--line);
  color:var(--muted);font-family:var(--mono);font-size:var(--fs-xs);
  letter-spacing:.06em;text-transform:uppercase;text-align:center;
  padding:7px 14px;margin:0;
}

.shell{
  position:relative;z-index:1;
  width:100%;max-width:var(--shell);margin:0 auto;padding:0 18px 56px;
}

/* ---------- logo system ---------- */
.logo{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line);}

.wordmark{display:flex;flex-direction:column;align-items:flex-start;gap:3px;}
.wordmark__name{font-size:var(--fs-lg);font-weight:800;letter-spacing:.13em;line-height:1;}
.wordmark__bar{
  background:var(--brand);color:#fff;font-family:var(--mono);font-size:var(--fs-xs);
  letter-spacing:.18em;text-transform:uppercase;padding:3px 7px;line-height:1.2;
}

.barhead{
  display:inline-block;background:var(--brand);color:#fff;
  font-size:var(--fs-sm);font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  padding:5px 11px;margin:0;
}
.quiethead{
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-dim);margin:0;
}
.eyebrow{
  font-family:var(--mono);font-size:var(--fs-xs);
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dim);
}

h1{font-size:var(--fs-xl);font-weight:800;line-height:1.22;margin:0;text-wrap:balance;}
h2{margin:0;}
p{margin:0;}

.field{display:flex;flex-direction:column;gap:7px;}
label{
  font-family:var(--mono);font-size:var(--fs-xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--silver);
}
input[type=email],input[type=tel]{
  width:100%;min-height:52px;padding:0 14px;background:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius);
  color:var(--text);font-family:var(--sans);font-size:var(--fs-base);
}
input::placeholder{color:var(--muted-dim);}
input:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;
}

.btn{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:54px;padding:0 18px;
  border:1px solid transparent;border-radius:var(--radius);
  background:var(--brand);color:#fff;font-family:var(--sans);
  font-size:var(--fs-base);font-weight:700;letter-spacing:.02em;cursor:pointer;
}
.btn:hover{background:var(--brand-deep);}
.btn--quiet{background:transparent;border-color:var(--line);color:var(--silver);}
.btn--quiet:hover{background:var(--surface-2);}
.btn--go{background:var(--yes);color:#06170E;border-color:var(--yes);}
.btn--go:hover{background:#48B173;}
.btn--small{min-height:46px;font-size:var(--fs-sm);}

/* ---------- sign in ---------- */
.signin{display:flex;flex-direction:column;gap:22px;padding:34px 0 0;}
.card{
  background:color-mix(in srgb, var(--surface) 94%, transparent);
  border:1px solid var(--line);border-radius:14px;
  padding:24px 20px;display:flex;flex-direction:column;gap:20px;
}
.card__head{display:flex;flex-direction:column;gap:12px;align-items:flex-start;}
.helptext{font-size:var(--fs-sm);color:var(--muted);}
.helptext strong{color:var(--text);font-weight:600;}
.helptext--center{text-align:center;}

/* ---------- app chrome ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:20px 0 16px;border-bottom:1px solid var(--line-soft);
}
.greeting{padding:18px 0 0;display:flex;flex-direction:column;gap:2px;}
.greeting strong{font-size:var(--fs-xl);font-weight:800;}
.linkbtn{
  background:none;border:none;padding:0;cursor:pointer;
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.linkbtn:hover{color:var(--text);}

/* ---------- assignment ---------- */
.assignment{
  margin-top:20px;border:1px solid var(--yes);border-left-width:4px;border-radius:var(--radius);
  background:var(--yes-dim);padding:16px;display:flex;flex-direction:column;gap:12px;
}
.assignment .tag{
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--yes-text);
}
.assignment .what{font-weight:800;font-size:var(--fs-lg);display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.assignment .when{font-family:var(--mono);font-size:var(--fs-sm);color:#9FC5AF;letter-spacing:.04em;}
/* inside the green box a green note would disappear — keep only the outline */
.assignment .cardnote--saved{background:transparent;}
.rolechip{
  display:inline-block;font-family:var(--mono);font-size:var(--fs-xs);
  letter-spacing:.14em;text-transform:uppercase;font-weight:400;
  padding:4px 8px;border:1px solid var(--yes);border-radius:5px;color:var(--yes-text);
}

/* ---------- sections ---------- */
.section{margin-top:34px;display:flex;flex-direction:column;gap:14px;}
.section__head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.section__hint{font-size:var(--fs-sm);color:var(--muted);}

/* ---------- full event card ---------- */
.event{
  background:var(--surface);
  border:1px solid var(--line);
  border-left:4px solid var(--brand);
  border-radius:12px;
  padding:16px 15px 15px;
  display:flex;flex-direction:column;gap:13px;
}
.event[data-s=yes]{border-left-color:var(--yes);}
.event[data-s=maybe]{border-left-color:var(--maybe);}
.event[data-s=no]{border-left-color:var(--no);}

.event__date{font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:.08em;color:var(--silver);}
.event__name{font-size:var(--fs-xl);font-weight:800;line-height:1.15;letter-spacing:.01em;}
.event__place{font-size:var(--fs-base);color:var(--silver);}
.event__info{
  font-size:var(--fs-sm);color:var(--muted);
  padding-top:10px;border-top:1px solid var(--line-soft);
}
.event__deadline{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.05em;color:var(--brand-soft);
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--brand);flex:none;}

.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.choice{
  min-height:60px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface-2);color:var(--silver);
  font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;cursor:pointer;
  transition:background .12s ease,color .12s ease,border-color .12s ease;
}
.choice:hover:not(:disabled){color:var(--text);border-color:var(--muted-dim);}
/* While an answer is on its way to the server the buttons must look busy.
   Without this the page appears frozen and people tap again. */
.choice:disabled{cursor:progress;}
.choices:has(.choice:disabled){opacity:.65;}
.choice[aria-pressed=true][data-v=yes]{background:var(--yes);border-color:var(--yes);color:#06170E;}
.choice[aria-pressed=true][data-v=maybe]{background:var(--maybe);border-color:var(--maybe);color:#1C1405;}
.choice[aria-pressed=true][data-v=no]{background:var(--no);border-color:var(--no);color:#0E1218;}

/* Feedback that sits inside the card it belongs to, directly under the
   buttons that produced it — never at the top of a page somebody has
   already scrolled past. */
.cardnote{
  display:flex;align-items:center;gap:8px;padding:11px 13px;
  border:1px solid var(--line);border-radius:var(--radius);
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.06em;
  text-transform:uppercase;color:var(--silver);
  background:var(--surface-2);
}
.cardnote[hidden]{display:none;}
.cardnote--saved{background:var(--yes-dim);border-color:var(--yes);color:var(--yes-text);}
.cardnote--working{background:var(--surface-2);border-color:var(--line);color:var(--muted);}
.cardnote--error{
  background:#3B1F24;border-color:var(--brand);border-left-width:4px;
  color:#F7CFD3;text-transform:none;letter-spacing:0;
  font-family:var(--sans);font-size:var(--fs-sm);line-height:1.4;
}

/* ---------- compact row ---------- */
.row{
  display:flex;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--line);
  border-left:4px solid var(--line);border-radius:10px;
  padding:12px 13px;
}
.row[data-s=yes]{border-left-color:var(--yes);}
.row[data-s=maybe]{border-left-color:var(--maybe);}
.row[data-s=no]{border-left-color:var(--no);}
.row--closed{opacity:.6;}
.row__main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.row__top{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.08em;color:var(--muted);}
.row__name{font-size:var(--fs-base);font-weight:700;line-height:1.25;}
.row__status{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;}
.row[data-s=yes] .row__status{color:var(--yes-text);}
.row[data-s=maybe] .row__status{color:var(--maybe-text);}
.row[data-s=no] .row__status{color:var(--silver);}
.row--closed .row__status{color:var(--muted-dim);}
.row__change{
  flex:none;background:transparent;border:1px solid var(--line);border-radius:8px;
  color:var(--silver);font-family:var(--sans);font-size:var(--fs-sm);font-weight:600;
  /* at least 46px high — below ~44px older fingers start missing */
  min-height:46px;padding:0 16px;cursor:pointer;
}
.row__change:hover{background:var(--surface-2);color:var(--text);}

/* A closed event keeps its explanation attached underneath: what to do now
   that the buttons are gone. */
.row-wrap{display:flex;flex-direction:column;}
.row-wrap .row{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none;}
.closed-note{
  padding:11px 13px 12px 16px;
  background:var(--surface-2);
  border:1px solid var(--line);border-top:none;
  border-bottom-left-radius:10px;border-bottom-right-radius:10px;
  font-size:var(--fs-sm);color:var(--silver);line-height:1.4;
}

.allclear{
  display:flex;align-items:center;gap:9px;padding:14px;
  background:var(--yes-dim);border:1px solid var(--yes);border-radius:var(--radius);
  font-size:var(--fs-sm);color:var(--yes-text);
}
.allclear--quiet{
  background:var(--surface);border-color:var(--line);color:var(--silver);
}

/* ---------- errors ---------- */
.errorwrap{padding-top:14px;padding-bottom:0;}
.errorbox{
  padding:13px 15px;
  background:#3B1F24;border:1px solid var(--brand);border-left-width:4px;
  border-radius:var(--radius);
  font-size:var(--fs-sm);color:#F7CFD3;
}

/* ---------- disclosure ---------- */
details{margin-top:28px;border:1px solid var(--line);border-radius:12px;background:var(--surface);}
summary{
  list-style:none;cursor:pointer;padding:16px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-weight:700;font-size:var(--fs-base);
}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+";color:var(--muted);font-size:var(--fs-lg);line-height:1;}
details[open] summary::after{content:"–";}
.details__body{padding:16px;display:flex;flex-direction:column;gap:16px;border-top:1px solid var(--line-soft);}

.homescreen{
  margin-top:28px;padding:16px;border:1px dashed var(--line);border-radius:12px;
  font-size:var(--fs-sm);color:var(--silver);
}
.homescreen strong{color:var(--text);font-weight:700;}

footer{
  margin-top:38px;padding-top:20px;border-top:1px solid var(--line-soft);
  font-size:var(--fs-sm);color:var(--muted-dim);text-align:center;
}

[hidden]{display:none !important;}
@media (prefers-reduced-motion:reduce){*{transition:none !important;}}