/* Shared styling. The palette and layout are lifted verbatim from the
   game night page's inline <style>, so the hub cannot drift away from
   the invite it links to. */
:root {
    --navy: #002e5d;
    --royal: #002E5D;
    --bg: #f4f6f9;
    --panel: #ffffff;
    --ink: #1b2430;
    --ink-soft: #5d6a7a;
    --line: #dfe5ec;
    --shadow: 0 1px 2px rgba(20,30,45,.05),0 8px 24px rgba(20,30,45,.07);
  }
  
    :root[data-theme="dark"] {
      --bg: #11161d; --panel: #19202a; --ink: #e9eef5; --ink-soft: #9dabbd;
      --line: #2a3440; --royal: #7ba7dd;
      --shadow: 0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
    }
  
  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--bg); color: var(--ink);
    font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
  }
  .wrap { max-width: 620px; margin: 0 auto; padding: 0 18px 64px; }

  header.hero {
    background: var(--navy); color: #fff;
    padding: 38px 18px 32px; text-align: center;
  }
  header.hero .kicker {
    margin: 0 0 10px; font-size: 12px; letter-spacing: .2em;
    text-transform: uppercase; opacity: .8; font-weight: 700;
  }
  header.hero h1 {
    margin: 0; font-size: clamp(30px, 8vw, 44px); line-height: 1.05;
    letter-spacing: -.02em; font-weight: 800;
  }
  header.hero .vs {
    margin: 14px auto 0; display: inline-block;
    padding: 8px 18px; border: 2px solid rgba(255,255,255,.4);
    border-radius: 999px; font-size: 15px; font-weight: 700;
    letter-spacing: .02em;
  }

  .when-strip {
    background: #10203a; color: #fff; text-align: center;
    padding: 15px 18px; font-size: clamp(17px, 4.6vw, 21px); font-weight: 700;
  }
  .when-strip .sep { opacity: .4; margin: 0 10px; font-weight: 400; }

  .card {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: 14px; padding: 22px; margin-top: 20px; box-shadow: var(--shadow);
  }
  .card h2 { margin: 0 0 10px; font-size: 19px; letter-spacing: -.01em; }
  .card p { margin: 0 0 12px; }
  .card p:last-child { margin-bottom: 0; }
  .lead { color: var(--ink-soft); }

  .where { text-align: center; }
  .where .house { font-size: 21px; font-weight: 700; margin: 0 0 2px; }
  .where .addr { font-size: 17px; margin: 0 0 4px; }
  .where .note {
    display: inline-block; margin-top: 10px; padding: 6px 14px;
    background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
    font-size: 14px; color: var(--ink-soft);
  }
  .map {
    display: inline-block; margin-top: 16px; padding: 11px 20px;
    background: var(--royal); color: #fff; text-decoration: none;
    border-radius: 9px; font-weight: 700; font-size: 15px;
  }
  .map:hover { filter: brightness(1.1); }

  .flyer-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
  .btn-file {
    flex: 1 1 180px; display: flex; align-items: center; gap: 12px;
    padding: 13px 15px; text-decoration: none; color: var(--ink);
    background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
    font-size: 13.5px; line-height: 1.35;
  }
  .btn-file:hover { border-color: var(--royal); }
  .btn-file .ft {
    flex: none; padding: 5px 9px; background: var(--navy); color: #fff;
    border-radius: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  }
   :root[data-theme="dark"] .btn-file .ft { background: var(--royal); } 
  .shot { display: block; margin-top: 16px; }
  .shot img {
    display: block; width: 100%; border: 1px solid var(--line);
    border-radius: 8px; box-shadow: var(--shadow);
  }

  .rsvp-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
  .rsvp-form label {
    flex: 0 0 100%; font-weight: 700; font-size: 14px; margin-bottom: -2px;
  }
  .rsvp-form input[type=number] {
    /* Longhands: "inherit" is not allowed inside the font shorthand, and a
       browser drops the whole declaration when it sees it. */
    flex: 0 0 110px; padding: 13px 12px;
    font-family: inherit; font-size: 20px; font-weight: 700; line-height: 1;
    text-align: center; color: var(--ink); background: var(--bg);
    border: 1px solid var(--line); border-radius: 10px;
  }
  .rsvp-form input:focus { outline: 2px solid var(--royal); outline-offset: 1px; }
  .rsvp-form button {
    flex: 1 1 160px; padding: 14px 20px;
    font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1;
    color: #fff; background: var(--navy); border: 0; border-radius: 10px;
    cursor: pointer;
  }
   :root[data-theme="dark"] .rsvp-form button { background: var(--royal); } 
  .rsvp-form button:hover { filter: brightness(1.12); }
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .done {
    margin: 0 0 14px; padding: 11px 14px; border-radius: 9px;
    background: #e7f3ea; border: 1px solid #a9cdb4; color: #23562f;
    font-size: 14.5px; font-weight: 600;
  }
  
    :root[data-theme="dark"] .done { background: #16281c; border-color: #2f5c3b; color: #9fd6ae; }
  

  .tabs { display: flex; gap: 4px; margin-top: 18px; border-bottom: 2px solid var(--line); }
  .tabs .tab {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 15px; margin-bottom: -2px;
    font-size: 14.5px; font-weight: 700; text-decoration: none;
    color: var(--royal); border-bottom: 2px solid var(--royal);
    border-radius: 8px 8px 0 0;
  }
  .tabs .badge {
    display: inline-block; min-width: 20px; padding: 1px 7px;
    background: var(--royal); color: #fff; border-radius: 999px;
    font-size: 12px; font-weight: 700; text-align: center;
  }

  footer.foot {
    margin-top: 30px; text-align: center; font-size: 13px; color: var(--ink-soft);
  }

/* --- what's on: the strip and the activity cards --- */
.ways{background:var(--panel);border-bottom:1px solid var(--line);padding:12px 18px 0}
.ways .wl{max-width:620px;margin:0 auto 7px;font-size:11px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.wrow{max-width:620px;margin:0 auto;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.wrow::-webkit-scrollbar{display:none}
.way{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:10px 14px;
  margin-bottom:-1px;font-size:14px;font-weight:700;text-decoration:none;
  color:var(--ink-soft);border-bottom:3px solid transparent;white-space:nowrap}
.way:hover{color:var(--ink)}
.way.on{color:var(--royal);border-bottom-color:var(--royal)}
.way.soon{opacity:.75;cursor:default}
.sn{padding:1px 7px;border-radius:999px;font-size:10px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;background:#fff3dc;color:#8a6420;
  border:1px solid #d8b872;margin-left:7px}
:root[data-theme="dark"] .sn {background:#2a2418;color:#d8b872}

.acard{display:block;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:20px;margin-top:18px;box-shadow:var(--shadow);
  text-decoration:none;color:var(--ink)}
a.acard:hover{border-color:var(--royal)}
.acard.soon{opacity:.8;border-style:dashed}
.aname{margin:0;font-size:20px;font-weight:800;letter-spacing:-.015em}
.awhen{margin:4px 0 0;font-weight:700;color:var(--royal)}
.awhere{margin:2px 0 0;font-size:14.5px;color:var(--ink-soft)}
.ablurb{margin:10px 0 0;font-size:15px;color:var(--ink-soft)}
.ago{display:inline-block;margin-top:12px;font-weight:700;color:var(--royal);font-size:14.5px}

/* --- past activities ------------------------------------------------------
   Finished events stay on the hub and the Archive tab but must not read as
   invitations: muted, and the link says "See the page", never "RSVP". */
.pasth{max-width:640px;margin:34px auto 0;padding:0 18px;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#6b7280);font-weight:700}
.acard.was{opacity:.72;cursor:default}
a.acard.was{cursor:pointer}
a.acard.was:hover{opacity:1}
/* The "this was on …" notice at the top of a finished activity's page. */
.card.over{border-left:4px solid var(--royal)}
.acard.was .awhen{color:var(--muted,#6b7280)}
.athanks{margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(0,0,0,.09);
  font-size:14.5px;line-height:1.5}
.athanks .tl{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted,#6b7280);font-weight:700;margin-bottom:3px}
:root[data-theme="dark"] .athanks {border-top-color:rgba(255,255,255,.14)}

/* The LAN-only RSVP link at the end of the strip. */
.way.adm{margin-left:auto}
.way .badge{display:inline-block;min-width:19px;padding:1px 6px;margin-left:5px;
  border-radius:999px;background:var(--royal,#002E5D);color:#fff;
  font-size:11.5px;font-weight:700;text-align:center}

/* Add to my calendar. */
.addcal{margin:10px auto 6px;max-width:640px;padding:0 18px;display:flex;align-items:center;justify-content:center;
  gap:8px;flex-wrap:wrap;font-size:14px;color:var(--ink-soft)}
.addcal a{padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);
  color:var(--royal);font-weight:600;text-decoration:none}
.addcal a:hover{border-color:var(--royal)}
.acard + .addcal{margin:-4px auto 14px;justify-content:flex-start;padding:0 4px}

/* theme-kit: light by default; dark only when chosen */
:root{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}

/* theme-kit toggle (~/theme-kit). Uses the site's own surface/ink/line variables; fallbacks if it has none. */
.theme-toggle{position:fixed;top:10px;right:10px;z-index:9999;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;font:16px/1 system-ui,sans-serif;
  background:var(--tk-bg,#ffffff);color:var(--tk-fg,#222222);border:1px solid var(--tk-line,rgba(0,0,0,.18));
  box-shadow:0 1px 4px rgba(0,0,0,.18);opacity:.9}
.theme-toggle:hover,.theme-toggle:focus-visible{opacity:1}
.theme-toggle.inline{position:static;box-shadow:none}
:root[data-theme="dark"] .theme-toggle{--tk-bg:#26262b;--tk-fg:#f0efec;--tk-line:rgba(255,255,255,.22)}
@media print{.theme-toggle{display:none}}
.theme-toggle,:root[data-theme="dark"] .theme-toggle{--tk-bg:var(--panel);--tk-fg:var(--ink);--tk-line:var(--line)}