/* ============================================================
   Doors Open — shared styles
   Mobile-first. Dark + light. No framework.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --accent:        #F58A3F;
  --accent-strong: #EE7620;
  --accent-ink:    #FFFFFF;

  --bg:            #F4F4F6;
  --surface:       #FFFFFF;
  --surface-2:     #FAFAFB;
  --line:          #E3E3E8;
  --line-strong:   #D2D2DA;
  --text:          #16161A;
  --text-2:        #5C5C68;
  --text-3:        #8A8A96;

  --ok:            #1F9D5B;
  --ok-bg:         #E9F7EF;
  --warn:          #B4690E;
  --warn-bg:       #FDF3E3;
  --err:           #C6382C;
  --err-bg:        #FDECEA;

  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px;
  --shadow-sm: 0 1px 2px rgba(16,16,22,.06), 0 1px 3px rgba(16,16,22,.04);
  --shadow-md: 0 4px 16px rgba(16,16,22,.07), 0 1px 3px rgba(16,16,22,.05);
  --shadow-lg: 0 18px 48px rgba(16,16,22,.13), 0 2px 8px rgba(16,16,22,.06);

  --maxw: 560px;
  --pad:  clamp(16px, 4.5vw, 24px);
  --sat:  env(safe-area-inset-top, 0px);
  --sab:  env(safe-area-inset-bottom, 0px);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
}

html[data-theme="dark"]{
  --bg:            #08080A;
  --surface:       #131317;
  --surface-2:     #1A1A20;
  --line:          #26262E;
  --line-strong:   #33333D;
  --text:          #F3F3F5;
  --text-2:        #A2A2AE;
  --text-3:        #70707E;

  --ok:            #4ADE80;
  --ok-bg:         #10241A;
  --warn:          #FBBF5C;
  --warn-bg:       #2A1F0C;
  --err:           #F87171;
  --err-bg:        #2A1312;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 4px 18px rgba(0,0,0,.5);
  --shadow-lg: 0 20px 56px rgba(0,0,0,.62);
}

/* ---------- light / dark image swap ----------
   Applied globally so every logo pair behaves the same everywhere. */
.dark-only{ display:none !important; }
html[data-theme="dark"] .dark-only{ display:block !important; }
html[data-theme="dark"] .light-only{ display:none !important; }

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; border:0; background:none; }
a{ color:var(--accent-strong); }
html[data-theme="dark"] a{ color:var(--accent); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
.sr{ position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.wrap-wide{ max-width:1120px; }
.stack > * + *{ margin-top:var(--gap, 16px); }

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  padding-top:var(--sat);
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .2s;
}
.topbar.is-stuck{ border-bottom-color:var(--line); }
.topbar-in{
  max-width:var(--maxw); margin:0 auto; padding:10px var(--pad);
  display:flex; align-items:center; gap:12px;
}
.topbar-in.wide{ max-width:1120px; }
/* colour is pinned so the generic link rules cannot tint the wordmark */
.topbar .brand{ display:flex; align-items:center; gap:10px; min-width:0;
  text-decoration:none; color:var(--text); }
html[data-theme="dark"] .topbar .brand{ color:var(--text); }
.brand img{ height:30px; width:auto; }
.brand-meta{ min-width:0; }
.brand-meta b{ display:block; font-size:13px; font-weight:650; letter-spacing:-.01em; line-height:1.2; }
.brand-meta span{ display:block; font-size:11px; color:var(--text-3); line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar .spacer{ flex:1; }

.icon-btn{
  width:44px; height:44px; flex:none; display:grid; place-items:center;
  border-radius:50%; border:1px solid var(--line); background:var(--surface);
  color:var(--text-2); transition:background .15s, color .15s, border-color .15s;
}
.icon-btn:hover{ color:var(--text); border-color:var(--line-strong); }
.icon-btn svg{ width:18px; height:18px; }
.icon-btn .moon{ display:none; }
html[data-theme="dark"] .icon-btn .sun{ display:none; }
html[data-theme="dark"] .icon-btn .moon{ display:block; }

/* ---------- pills ---------- */
.pills{ display:flex; flex-wrap:wrap; gap:8px; }
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:999px;
  font-size:11.5px; font-weight:700; letter-spacing:.055em; text-transform:uppercase;
  border:1px solid var(--line);
  background:var(--surface); color:var(--text-2);
  white-space:nowrap;
}
.pill-accent{ background:var(--accent); border-color:var(--accent); color:#241203; }
.pill-quiet{ background:transparent; }
.pill-ok{   background:var(--ok-bg);   border-color:transparent; color:var(--ok); }
.pill-warn{ background:var(--warn-bg); border-color:transparent; color:var(--warn); }
.pill-err{  background:var(--err-bg);  border-color:transparent; color:var(--err); }

/* ---------- cards ---------- */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
}
.card-pad{ padding:clamp(18px, 5vw, 26px); }

/* ---------- headings ---------- */
h1,h2,h3{ margin:0; letter-spacing:-.028em; font-weight:750; line-height:1.14; }
h1{ font-size:clamp(29px, 8.2vw, 40px); }
h2{ font-size:clamp(20px, 5.4vw, 25px); letter-spacing:-.024em; }
h3{ font-size:16.5px; letter-spacing:-.015em; font-weight:680; }
p{ margin:0; }
.lede{ color:var(--text-2); font-size:15.5px; line-height:1.62; }
.eyebrow{
  font-size:11.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--text-3);
}

/* ---------- fact grid (date / time / location / admission) ---------- */
.facts{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-md); overflow:hidden;
}
.fact{ background:var(--surface); padding:13px 14px; min-width:0; }
.fact .k{
  display:flex; align-items:center; gap:6px;
  font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent-strong); margin-bottom:3px;
}
html[data-theme="dark"] .fact .k{ color:var(--accent); }
.fact .k svg{ width:12px; height:12px; flex:none; }
.fact .v{ font-size:14.5px; font-weight:640; letter-spacing:-.012em; line-height:1.35; }

/* ---------- buttons ---------- */
.btn{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; min-height:54px; padding:15px 20px;
  border-radius:var(--r-md);
  font-size:16px; font-weight:700; letter-spacing:-.005em;
  background:var(--accent); color:#231103;
  box-shadow:0 2px 10px rgba(238,118,32,.28);
  transition:transform .12s ease, box-shadow .18s ease, background .15s ease, opacity .15s;
  -webkit-tap-highlight-color:transparent; text-decoration:none;
}
.btn:hover{ background:var(--accent-strong); box-shadow:0 4px 18px rgba(238,118,32,.36); }
.btn:active{ transform:scale(.985); }
.btn[disabled],.btn.is-busy{ opacity:.6; pointer-events:none; box-shadow:none; }
.btn svg{ width:18px; height:18px; flex:none; }

.btn-ghost{
  background:var(--surface); color:var(--text);
  border:1px solid var(--line-strong); box-shadow:none; font-weight:640;
}
.btn-ghost:hover{ background:var(--surface-2); border-color:var(--text-3); box-shadow:none; }
.btn-sm{ min-height:42px; padding:9px 15px; font-size:14px; border-radius:var(--r-sm); width:auto; }

/* ---------- form ---------- */
.field{ position:relative; }
.field + .field{ margin-top:10px; }
.field .ico{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; color:var(--text-3); pointer-events:none; transition:color .15s;
}
.field input{
  width:100%; min-height:54px;
  padding:15px 15px 15px 42px;
  font-size:16px; /* 16px prevents the iOS zoom-on-focus jump */
  background:var(--surface-2); color:var(--text);
  border:1px solid var(--line-strong); border-radius:var(--r-md);
  transition:border-color .15s, background .15s, box-shadow .15s;
  appearance:none; -webkit-appearance:none;
}
.field input::placeholder{ color:var(--text-3); }
.field input:focus{
  outline:none; background:var(--surface);
  border-color:var(--accent);
  box-shadow:0 0 0 3.5px color-mix(in srgb, var(--accent) 20%, transparent);
}
.field input:focus + .ico, .field:focus-within .ico{ color:var(--accent); }
.field.has-error input{ border-color:var(--err); background:var(--err-bg); }
.field .msg{ display:none; margin:6px 0 0 3px; font-size:12.5px; color:var(--err); font-weight:560; }
.field.has-error .msg{ display:block; }

.reg-form{ position:relative; }
.form-note{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin-top:12px; font-size:12px; color:var(--text-3);
}
.form-note svg{ width:12px; height:12px; }
.form-note b{ color:var(--accent-strong); font-weight:680; }
html[data-theme="dark"] .form-note b{ color:var(--accent); }

/* ---------- alert ---------- */
.alert{
  display:none; gap:10px; padding:13px 15px; border-radius:var(--r-md);
  font-size:14px; line-height:1.5; margin-bottom:14px;
}
.alert.show{ display:flex; }
.alert svg{ width:17px; height:17px; flex:none; margin-top:1px; }
.alert-err{  background:var(--err-bg);  color:var(--err); }
.alert-warn{ background:var(--warn-bg); color:var(--warn); }
.alert-ok{   background:var(--ok-bg);   color:var(--ok); }

/* ---------- spinner ---------- */
.spin{
  width:17px;height:17px;border-radius:50%;
  border:2.5px solid currentColor; border-right-color:transparent;
  animation:sp .7s linear infinite; flex:none;
}
@keyframes sp{ to{ transform:rotate(360deg); } }

/* ---------- skeleton ---------- */
.skel{
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--line) 50%,var(--surface-2) 75%);
  background-size:200% 100%; animation:sk 1.4s ease-in-out infinite; border-radius:6px; color:transparent;
}
@keyframes sk{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ---------- public event cards (home + /events) ---------- */
.ecard{
  display:flex;
  gap:16px;
  align-items:stretch;
  min-width:0;
  height:100%;
  text-decoration:none;
  color:inherit;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:18px 16px 16px;
  box-shadow:var(--shadow-sm);
  transition:border-color .15s, box-shadow .18s;
}
@media (hover: hover) and (pointer: fine){
  .ecard{ transition:border-color .15s, transform .12s, box-shadow .18s; }
  .ecard:hover{
    border-color:color-mix(in srgb, var(--accent) 55%, var(--line));
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
  }
}
.ecard-date{
  flex:none;
  width:58px;
  height:fit-content;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:10px 6px 11px;
  border-radius:12px;
  background:var(--surface-2);
  border:1px solid var(--line);
}
.ecard-date .mo{
  font-size:10px;
  font-weight:750;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent-strong);
  line-height:1;
  margin-bottom:5px;
}
html[data-theme="dark"] .ecard-date .mo{ color:var(--accent); }
.ecard-date .dy{
  font-size:22px;
  font-weight:750;
  letter-spacing:-.04em;
  line-height:1;
  color:var(--text);
}
.ecard-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}
.ecard-main > .eyebrow{ margin-bottom:6px; }
.ecard-kicker{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}
.ecard-kicker .eyebrow{ margin:0; }
.next-pill{
  flex:none;
  font-size:10px;
  font-weight:750;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#241203;
  background:var(--accent);
  border-radius:999px;
  padding:3px 8px;
}
.ecard h2{
  font-size:clamp(18px, 4.4vw, 22px);
  margin-bottom:6px;
  overflow-wrap:anywhere;
}
.ecard .tag{
  color:var(--text-2);
  font-size:14.5px;
  line-height:1.45;
  margin-bottom:12px;
}
.ecard .meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  font-size:13px;
  color:var(--text-3);
}
.ecard .meta span{ display:inline-flex; align-items:center; gap:6px; min-width:0; }
.ecard .meta svg{ width:14px; height:14px; flex:none; }
.ecard .card-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:auto;
  padding-top:16px;
}
.ecard .cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:8px 14px;
  width:auto;
  border-radius:var(--r-sm);
  font-size:13.5px;
  font-weight:700;
  background:var(--accent);
  color:#231103;
  text-decoration:none;
}
.ecard.is-closed .cta{
  background:var(--surface-2);
  color:var(--text-2);
  border:1px solid var(--line-strong);
}
.spots{ font-size:12.5px; font-weight:620; color:var(--text-2); }
.spots.is-tight{ color:var(--warn); }
.spots.is-closed{ color:var(--text-3); font-weight:560; }

@media (max-width: 479px){
  .ecard .card-foot{ flex-direction:column; align-items:stretch; }
  .ecard .cta{ width:100%; }
}

@media (min-width: 640px){
  .ecard{ padding:20px 20px 18px; gap:18px; }
  .ecard-date{ width:64px; padding:12px 6px 13px; }
  .ecard-date .dy{ font-size:24px; }
}

/* ---------- footer ---------- */
.foot{
  padding:30px var(--pad) calc(34px + var(--sab));
  text-align:center; font-size:12.5px; color:var(--text-3);
}
.foot a{ color:var(--text-2); text-decoration:none; font-weight:560; }
.foot a:hover{ color:var(--accent-strong); }
.foot .plq{ display:inline-flex; align-items:center; gap:6px; margin-top:9px; }
.foot .plq img{ height:13px; opacity:.55; }

/* ---------- admin list / edit pages ---------- */
.gate{ min-height:100dvh; display:grid; place-items:center; padding:24px var(--pad); }
.gate .card{ width:100%; max-width:390px; }
.gate .logo{ height:44px; margin:0 auto 20px; }
.gate h1{ font-size:23px; text-align:center; margin-bottom:5px; }
.gate .sub{ text-align:center; font-size:13.5px; color:var(--text-3); margin-bottom:22px; }
body.authed .gate{ display:none; }
body.admin-page:not(.authed) .app{ display:none !important; }

.admin-page{ padding-bottom:48px; }
.admin-page .bar{ padding:18px 0 8px; }
.admin-page .bar h1{ font-size:22px; letter-spacing:-.026em; }
.admin-page .bar .row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.admin-nav{
  display:flex; gap:6px; flex-wrap:wrap; margin-left:auto;
}
.admin-nav a.btn, .admin-nav .btn{ width:auto; }

.tools{ display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin:14px 0; }
.search{ position:relative; flex:1 1 220px; min-width:0; }
.search .ico{ position:absolute; left:13px; top:50%; transform:translateY(-50%);
  width:16px;height:16px;color:var(--text-3); pointer-events:none; }
.search input{
  width:100%; min-height:44px; padding:11px 13px 11px 39px; font-size:16px;
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--r-sm); appearance:none;
}
.search input:focus{ outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent); }
.seg{ display:flex; border:1px solid var(--line-strong); border-radius:var(--r-sm); overflow:hidden; }
.seg button{
  padding:10px 13px; font-size:13px; font-weight:600; color:var(--text-2);
  background:var(--surface); white-space:nowrap;
}
.seg button + button{ border-left:1px solid var(--line); }
.seg button.on{ background:var(--accent); color:#231103; }

.tablewrap{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); overflow:hidden; }
.scroller{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.admin-page table{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:760px; }
.admin-page th,.admin-page td{ padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle; }
.admin-page th{
  font-size:10.5px; font-weight:730; letter-spacing:.075em; text-transform:uppercase;
  color:var(--text-3); background:var(--surface-2); white-space:nowrap;
}
.admin-page tbody tr:last-child td{ border-bottom:0; }
.admin-page tbody tr:hover{ background:var(--surface-2); }
.admin-page td.nm{ font-weight:650; letter-spacing:-.012em; }
.admin-page td.dim{ color:var(--text-2); }
.admin-page .row-actions{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.admin-page .row-actions .btn{ width:auto; min-height:36px; padding:7px 12px; font-size:13px; }
.admin-page .mob{ display:none; }
.pager{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border-top:1px solid var(--line); font-size:13px; color:var(--text-2);
}
.pager .btn{ width:auto; min-height:40px; padding:8px 14px; }
.empty{ padding:52px 22px; text-align:center; color:var(--text-3); }
.empty b{ display:block; color:var(--text-2); font-size:15px; margin-bottom:4px; }

.check-row{
  display:flex; align-items:center; gap:10px;
  margin-top:14px; font-size:14px; font-weight:600; color:var(--text);
}
.check-row input{ width:18px; height:18px; accent-color:var(--accent); }
.form-page{ max-width:640px; margin:0 auto; padding:8px 0 48px; }
.form-page textarea{
  width:100%; margin-top:4px; padding:12px 14px;
  border:1px solid var(--line-strong); border-radius:var(--r-md);
  background:var(--surface-2); font:inherit; resize:vertical; min-height:96px;
}
.dt-local{
  width:100%; min-height:44px; margin-top:4px; padding:8px 10px;
  border:1px solid var(--line-strong); border-radius:var(--r-sm);
  background:var(--surface-2); font:inherit; color:inherit;
}

@media (max-width:760px){
  .admin-page .scroller, .admin-page table{ display:none; }
  .admin-page .mob{ display:block; }
  .mrow{ padding:14px 15px; border-bottom:1px solid var(--line); }
  .mrow:last-child{ border-bottom:0; }
  .mrow .nm{ font-weight:670; font-size:15px; }
  .mrow .meta{ font-size:12.5px; color:var(--text-2); margin-top:4px; line-height:1.5; }
  .mrow .row-actions{ margin-top:10px; justify-content:flex-start; }
}

/* ---------- dialogs (confirm / notice) ---------- */
.modal{
  position:fixed; inset:0; z-index:80;
  display:grid; place-items:center;
  padding: max(20px, var(--sat)) var(--pad) max(20px, var(--sab));
  background: color-mix(in srgb, #000 48%, transparent);
}
.modal[hidden]{ display:none !important; }
.modal-card{
  width:100%; max-width:520px; max-height:min(90dvh, 820px);
  overflow:auto;
}
#doDialog{ z-index:90; }
#doDialog .modal-card{ max-width:420px; }
#doDialog h3{
  font-size:20px; letter-spacing:-.03em; margin:0 0 8px;
}
#doDialog .dlg-body{
  font-size:14.5px; line-height:1.55; color:var(--text-2); margin:0;
}
#doDialog .dlg-err{
  display:none; margin-top:12px; font-size:13.5px; color:var(--err); font-weight:600;
}
#doDialog .dlg-err.show{ display:block; }
.dlg-actions{
  display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap;
  margin-top:20px;
}
.dlg-actions .btn{
  width:auto; min-height:44px; padding:10px 16px; font-size:14.5px;
}
.btn-danger{
  background:var(--err); color:#fff; box-shadow:none;
}
.btn-danger:hover{ background:color-mix(in srgb, var(--err) 86%, #000); box-shadow:none; }