/* Night Out (17 Oct 2026): the dark, photo-forward look Clinton picked from four directions
   (design/directions-2026-10-17/d-night-out). Loaded after app.css and the theme's variables when the site's theme row
   says look: "night"; every rule is scoped to body.look-night, so other skins never see it. The palette lives here, not
   in the theme row, because the look is designed around it. */
:root {
  --bg: #0A1426; --surface: #111E36; --ink: #F4F1EA; --muted: #A6B0C4; --line: #22314F; --soft: #16243F;
  --gold: #E8B84A; --gold2: #F2D48E; --deep: #081020;
  --brand-text: #F4F1EA;      /* headings and links that were navy */
  --green-text: #F2D48E;      /* times and small labels that were green */
  --focus: #F2D48E;
  --r: 16px; --r-sm: 12px;
  color-scheme: dark;
}
body.look-night { background: var(--bg); color: var(--ink); }
.look-night ::selection { background: rgb(232 184 74 / .35); }

/* ---------- header: the page's own dark, a hairline under it ---------- */
.look-night .site-header { background: rgb(10 20 38 / .88); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  box-shadow: inset 0 -1px 0 var(--line); }
.look-night .bar { max-width: 1240px; height: 76px; padding: 0 24px; }
.look-night .brand .mark { width: 44px; height: 44px; }
.look-night .wordmark { font-weight: 700; font-size: 21px; }
.look-night .wm2 { color: var(--gold); }
.look-night .nav a { font-weight: 500; color: rgb(244 241 234 / .78); border-radius: 999px; padding: 0 16px; }
.look-night .nav a:hover { color: #fff; background: rgb(255 255 255 / .06); }
.look-night .nav a[aria-current="page"] { color: #fff; background: transparent; box-shadow: inset 0 -2px 0 var(--gold); border-radius: 0; }
.look-night .nav .nav-account, .look-night .nav summary.nav-account { border-radius: 999px; border: 1px solid rgb(255 255 255 / .35); background: rgb(255 255 255 / .06);
  color: #fff; font-weight: 600; box-shadow: none; }
.look-night .nav .nav-account:hover, .look-night .nav summary.nav-account:hover { border-color: #fff; background: rgb(255 255 255 / .1); }
.look-night .nav .nav-account[aria-current="page"], .look-night .nav summary.nav-account[aria-current="page"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
@media (max-width: 520px) {
  .look-night .bar { height: auto; padding: 8px 14px; }
  .look-night .brand .mark { width: 36px; height: 36px; }
  .look-night .wordmark { font-size: 17px; }
  .look-night .nav a { padding: 0 10px; }
  /* app.css's phone rule (.bar:has(.nav a:nth-child(3)) .nav a, specificity 0,4,2) stretches every link; not this one */
  .look-night .bar .nav .nav-account, .look-night .bar .nav-menu { flex: none !important; margin-left: auto; }
}

/* ---------- home hero: the headline beside a fanned stack of real flyers ---------- */
.look-night .night-hero { position: relative; overflow: hidden; border-bottom: 0;
  background: radial-gradient(900px 500px at 78% 35%, rgb(232 184 74 / .16), transparent 60%),
              radial-gradient(700px 420px at 15% 90%, rgb(46 107 80 / .28), transparent 60%), var(--bg); }
.look-night .night-hero .hero-inner { max-width: 1240px; padding: 64px 24px 56px; display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 40px; align-items: center; }
.look-night .night-hero .hero-title { color: var(--ink); font-weight: 700; font-size: clamp(34px, 5vw, 60px); line-height: 1.04; letter-spacing: -.02em; max-width: 12.5em; }
.look-night .hero-sub { color: var(--muted); font-size: 18px; margin: 16px 0 0; }
.look-night .flyer-stack { position: relative; height: 340px; }
.look-night .flyer-stack figure { position: absolute; inset: 0; margin: 0; display: grid; place-items: center;
  transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .7s; }
.look-night .flyer-stack img { width: auto; height: auto; max-width: 400px; max-height: 300px; border-radius: 14px;
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .08); background: var(--soft); }
.look-night .flyer-stack figure:nth-last-child(3) { transform: rotate(-7deg) translate(-40px, 14px); opacity: .55; }
.look-night .flyer-stack figure:nth-last-child(2) { transform: rotate(6deg) translate(44px, 8px); opacity: .75; }
.look-night .flyer-stack figure:last-child { transform: rotate(-1deg); z-index: 2; }
.look-night .flyer-stack.turn figure:last-child { transform: rotate(9deg) translate(120px, 30px); opacity: 0; }
@media (max-width: 900px) {
  .look-night .night-hero .hero-inner { grid-template-columns: 1fr; gap: 20px; padding: 36px 16px 28px; }
  .look-night .flyer-stack { height: 230px; }
  .look-night .flyer-stack img { max-width: min(300px, 78vw); max-height: 200px; }
}
@media (prefers-reduced-motion: reduce) { .look-night .flyer-stack figure { transition: none; } }
/* the old navy band (other pages that use .hero) */
.look-night .hero:not(.night-hero) { background: var(--surface); border-bottom: 1px solid var(--line); }

/* ---------- page shell, headings, text ---------- */
.look-night .page { max-width: 1240px; padding: 28px 24px 72px; }
.look-night .page.event-page, .look-night .page.policy, .look-night .page.auth, .look-night .page.me { max-width: 820px; }
.look-night .page.manage { max-width: 1040px; }
@media (max-width: 520px) { .look-night .page { padding: 20px 16px 64px; } }
.look-night h1, .look-night .headline { color: var(--ink); font-weight: 700; letter-spacing: -.015em; }
.look-night .section-head, .look-night .policy h2, .look-night .me-section h2, .look-night .cal-head h2 { color: var(--ink); font-weight: 600; }
.look-night .note a, .look-night .link-btn, .look-night .gcard-more, .look-night .org-all a, .look-night .admin-links a,
.look-night .best-link a, .look-night .quieter a, .look-night .my-orgs a, .look-night .claim-more > summary, .look-night .pw summary,
.look-night .help-cancel, .look-night .hidden-row button { color: var(--gold2); }
.look-night .lede { color: var(--muted); }

/* ---------- buttons, pills ---------- */
.look-night .btn { border-radius: 999px; font-weight: 600; background: var(--surface); border-color: rgb(255 255 255 / .18); color: var(--ink); }
.look-night .btn:hover { border-color: rgb(255 255 255 / .45); }
.look-night .btn-accent { background: var(--gold); border-color: var(--gold); color: var(--bg); }
.look-night .btn-accent:hover { background: var(--gold2); border-color: var(--gold2); }
.look-night .btn-danger { background: #B4412F; border-color: #B4412F; color: #fff; }

/* ---------- toolbar: search, selects, view switch, chips ---------- */
.look-night .views { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.look-night .views a { border-radius: 999px; color: var(--muted); font-weight: 600; }
.look-night .views a[aria-current="page"] { background: var(--ink); color: var(--bg); }
.look-night .search, .look-night .select select { border-radius: 999px; background: var(--surface); border-color: var(--line); }
.look-night .select select { padding: 0 14px; color: var(--ink); }
.look-night .search input::placeholder { color: var(--muted); }
.look-night .chip { border-color: var(--line); background: var(--surface); color: var(--muted); font-weight: 600; }
.look-night .chip:hover { color: var(--ink); }
.look-night .chip:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.look-night .quick-chip { min-height: 40px; padding: 0 16px; font-size: 14px; }
.look-night .quick-chip:not(:has(input:checked)) { border-style: solid; text-decoration: line-through; text-decoration-color: rgb(166 176 196 / .5); }
.look-night .tag-chip:has(input:checked)::before { box-shadow: 0 0 0 2px var(--bg); }
.look-night .more-panel, .look-night .menu-list { background: #13213D; border-color: var(--line); box-shadow: 0 18px 40px rgb(0 0 0 / .45); }
.look-night .menu-list a:hover, .look-night .menu-list a:focus-visible, .look-night .menu-list button:hover, .look-night .menu-list button:focus-visible,
.look-night .org-pick:hover { background: rgb(255 255 255 / .07); }
.look-night .org-picks { border-color: var(--line); }

/* ---------- the date page (list view, my events, queues) ---------- */
.look-night .tile { background: var(--surface); border-color: var(--line); }
.look-night .tile-wd { background: var(--gold); color: var(--bg); }
.look-night .tile-day { color: var(--ink); }
.look-night .tile-mon { color: var(--gold2); }

/* ---------- cards (list view and grid) ---------- */
.look-night .card { background: var(--surface); border-color: var(--line); border-radius: 18px; }
.look-night .card-org { color: var(--muted); font-weight: 500; }
.look-night .card-org:hover { color: var(--ink); }
.look-night .card-time { color: var(--gold2); font-weight: 600; }
.look-night .card-title { font-weight: 600; }
.look-night .card:has(.card-pick input:checked) { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.look-night .card-pick input, .look-night .check input, .look-night .org-pick input, .look-night .layer input { accent-color: var(--gold); }
.look-night .tags a { background: transparent; border-color: var(--line); color: var(--muted); }
.look-night .tags a:hover { color: var(--ink); }
.look-night .cost { color: var(--muted); }
.look-night .members-tag { background: rgb(10 20 38 / .85); color: var(--ink); border: 1px solid rgb(255 255 255 / .25); }
.look-night .members-note { background: var(--surface); color: var(--ink); border-color: var(--line); }
.look-night .save-btn[aria-pressed="true"] { color: var(--gold); }
.look-night .gcard-photo, .look-night .lcard-photo, .look-night .event-photo { background: var(--soft); }

/* ---------- Night Out rails: this week, next week, later ---------- */
.look-night .rail-sec + .rail-sec { margin-top: 34px; }
.look-night .rail-head { margin: 0 0 14px; font-size: 24px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.look-night .rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(290px, 1fr); gap: 16px; align-items: stretch;
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 16px; scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  overscroll-behavior-x: contain; }
/* an open menu (Add to Calendar, Get Directions, hide) must not be clipped by the scrolling row: give it room below */
.look-night .rail:has(.menu[open]) { padding-bottom: 260px; margin-bottom: -244px; }
@media (min-width: 1100px) { .look-night .rail { grid-auto-columns: calc((100% - 48px) / 4); } }
@media (max-width: 640px) { .look-night .rail { grid-auto-columns: 84%; } }
.look-night .rail > .gcard { scroll-snap-align: start; }
.look-night .gcard { border-radius: 18px; transition: transform .25s ease, border-color .25s ease; }
.look-night .gcard:hover { transform: translateY(-3px); border-color: rgb(232 184 74 / .55); }
.look-night .gcard:has(.menu[open]) { transform: none; }
@media (prefers-reduced-motion: reduce) { .look-night .gcard { transition: none; } .look-night .gcard:hover { transform: none; } }
.look-night .gcard > .gcard-photo-link, .look-night .gcard > .gcard-ph { border-radius: 17px 17px 0 0; overflow: hidden; }
/* the whole flyer always shows (never cropped), on a fixed-height panel so a rail's cards line up */
.look-night .gcard-photo-link { aspect-ratio: 16 / 10; background: var(--soft); display: grid; place-items: center; }
.look-night .gcard-photo { width: 100%; height: 100%; max-height: none; object-fit: contain; background: transparent; }
.look-night .gcard .tile { display: none; }
.look-night .gcard-head { gap: 0; }
.look-night .gcard-names { font-size: 14px; }
.look-night .gcard .card-time { order: -1; }
.look-night .gcard .card-title { font-size: 18px; line-height: 1.25; }
.look-night .gcard-desc { -webkit-line-clamp: 2; font-size: 14px; }
/* the buttons share rows on a rail-width card instead of stacking three deep */
.look-night .gcard .card-actions { gap: 6px; }
.look-night .gcard .card-actions .btn { min-height: 38px; padding: 0 13px; font-size: 14px; }

/* no flyer: the Activate Topeka mark big on its category's color (Clinton's pick, 17 Oct 2026) */
.look-night .gcard-ph { aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 70% 20%, color-mix(in srgb, var(--c) 70%, #0A1426), #0F1B31 70%); }
.look-night .ph-mark { width: 96px; height: 96px; opacity: .9; }

/* ---------- several-events bar, toast ---------- */
.look-night.js .pick-bar, .js .look-night .pick-bar { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.look-night .pick-bar { background: var(--surface); }
.js .look-night .pick-bar .pick-clear { color: var(--bg); border-color: rgb(10 20 38 / .4); }
.look-night .toast { background: var(--ink); color: var(--bg); }
.look-night .toast button { color: var(--bg); border-color: rgb(10 20 38 / .45); }

/* ---------- calendar ---------- */
.look-night .cal-grid { border-color: var(--line); background: var(--line); border-radius: 14px; }
.look-night .cal-dow { background: var(--deep); color: var(--muted); font-weight: 600; }
.look-night .cal-cell { background: var(--surface); }
.look-night .cal-cell.empty { background: var(--bg); }
.look-night .cal-cell li a { background: var(--soft); }
.look-night .cal-cell li a:hover { background: rgb(232 184 74 / .22); }
.look-night .cal-cell.today .cal-date, .look-night .tg-day.today b { background: var(--gold); color: var(--bg); }
.look-night .cal-cell.has .cal-count { background: var(--gold); color: var(--bg); }
.look-night .tgrid-scroll { background: var(--surface); border-color: var(--line); border-radius: 14px; }
.look-night .tg-gutter { background: var(--surface); }
.look-night .tg-day b { color: var(--ink); }
.look-night .tg-col.today { background-color: rgb(232 184 74 / .06); }
.look-night .tg-ev { background: #1C2C4D; border-left-color: var(--gold); box-shadow: 0 0 0 1px var(--surface); }
.look-night .tg-ev:hover { background: #24385F; }
.look-night .tg-game { background: var(--soft); }
.look-night .layer { background: var(--surface); border-color: var(--line); color: var(--ink); }
.look-night .layer-connect { color: var(--gold2); }
.look-night .tg-busy span { color: var(--gold2); }

/* ---------- map ---------- */
.look-night .map { border-color: var(--line); border-radius: 18px; overflow: hidden; }
.look-night .leaflet-container { background: var(--soft); }
.look-night .leaflet-popup-content-wrapper, .look-night .leaflet-popup-tip { background: var(--surface); color: var(--ink); }
.look-night .leaflet-popup-content a { color: var(--gold2); }
.look-night .leaflet-tile-pane { filter: brightness(.82) saturate(.75) contrast(1.05); }

/* ---------- event page, organization pages ---------- */
.look-night .facts li .icon { color: var(--gold2); }
.look-night .facts.big { color: var(--ink); }
.look-night .event-photo { border-radius: 18px; }
.look-night .rsvp-box { background: var(--surface); border-color: var(--line); }
.look-night .org-list { background: var(--surface); border-color: var(--line); border-radius: 18px; }
.look-night .org-list a { color: var(--ink); font-weight: 600; }
.look-night .org-list a:hover { color: var(--gold2); }
.look-night .org-logo { background: #fff; border-color: var(--line); }
.look-night .cancelled-note, .look-night .form-error { background: #3A1A16; color: #F6C9BF; border-color: #6B2C22; }
.look-night .form-ok, .look-night .invite-link { background: #12301F; color: #BFE3CC; border-color: #245437; }
.look-night .invite-link p { color: #BFE3CC; }
.look-night .cal-fit.free { background: #12301F; color: #BFE3CC; }
.look-night .cal-fit.busy { background: #3A2C10; color: var(--gold2); }

/* ---------- forms, organizer and admin pages ---------- */
.look-night .field input, .look-night .field select, .look-night .field textarea, .look-night .copy-row input,
.look-night .help-form textarea, .look-night .sub-row input[type="email"] { background: var(--surface); color: var(--ink); border-color: var(--line); color-scheme: dark; }
.look-night .field input::placeholder, .look-night .field textarea::placeholder { color: rgb(166 176 196 / .7); }
.look-night .panel, .look-night .also-panel, .look-night .mine li, .look-night .queue li, .look-night .me-feed, .look-night .me-follows li,
.look-night .going-list li, .look-night .picks li, .look-night .drew-best li, .look-night .tallies li, .look-night .photo-review li { background: var(--surface); border-color: var(--line); }
.look-night .pill { background: var(--soft); color: var(--ink); }
.look-night .status { background: var(--soft); color: var(--muted); }
.look-night .status.s-pending { background: #3A2C10; color: var(--gold2); }
.look-night .status.s-published { background: #12301F; color: #BFE3CC; }
.look-night .status.s-rejected { background: #3A1A16; color: #F6C9BF; }
.look-night .status.s-cancelled { background: var(--soft); color: var(--muted); }
.look-night .part-picker a, .look-night .kind-picker a, .look-night .guide-toc a { background: var(--surface); border-color: var(--line); color: var(--ink); }
.look-night .part-picker a[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.look-night .busy-grid td a, .look-night .drew-grid td { color: #121a33; }
.look-night .tally-n { color: var(--ink); }
.look-night .views-by-day li { background: var(--gold); }
.look-night .outbox-body, .look-night .guide-more { background: var(--soft); }
.look-night .qr svg { background: #fff; }
.look-night .current-img img { background: var(--soft); border-color: var(--line); }

/* ---------- footer: one dark band, the credit on the right ---------- */
.look-night .site-footer { background: var(--deep); border-top: 1px solid var(--line); color: var(--muted); }
.look-night .footer-inner { max-width: 1240px; padding: 40px 24px 92px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 40px;
  justify-items: start; align-items: center; text-align: left; }
.look-night .foot-brand .mark { width: 44px; height: 44px; }
.look-night .foot-brand .wordmark { font-size: 21px; font-weight: 700; }
.look-night .subscribe { max-width: 460px; justify-self: end; }
.look-night .sub-title { color: var(--ink); }
.look-night .sub-row input[type="email"] { border-radius: 999px; padding: 0 16px; }
.look-night .sub-row .btn { border-radius: 999px; }
.look-night .foot-links { justify-content: flex-start; gap: 4px 22px; }
.look-night .powered a { color: var(--muted); }
.look-night .powered a:hover { color: var(--ink); }
.look-night .credit { justify-self: end; }
.look-night .credit a { color: #fff; font-weight: 600; }
@media (max-width: 760px) {
  .look-night .footer-inner { grid-template-columns: 1fr; padding: 32px 16px; }
  .look-night .subscribe, .look-night .credit { justify-self: start; }
}

/* ---------- the Help chat ---------- */
.look-night .help-launch { background: var(--ink); color: var(--bg); box-shadow: 0 8px 26px rgb(0 0 0 / .45); }
.look-night .help-launch[aria-expanded="true"] { background: var(--gold); color: var(--bg); }
.look-night .help-panel { background: #0F1B31; border-color: var(--line); box-shadow: 0 18px 48px rgb(0 0 0 / .55); }
.look-night .help-head { background: var(--surface); border-bottom: 1px solid var(--line); }
.look-night .help-msg.bot { background: var(--soft); }
.look-night .help-msg.me { background: var(--gold); color: var(--bg); }
.look-night .help-msg.bot a { color: var(--gold2); }
.look-night .help-chip { background: transparent; border-color: var(--line); color: var(--ink); }
.look-night .help-chip:hover { border-color: var(--gold); background: rgb(232 184 74 / .08); }
.look-night .help-form { border-top-color: var(--line); }

/* ---------- Night Out cards, as in the mockup (17 Oct 2026) ---------- */
.look-night .ncard { position: relative; padding: 0; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); scroll-snap-align: start; transition: transform .25s ease, border-color .25s ease; }
.look-night .ncard:hover { transform: translateY(-4px); border-color: rgb(232 184 74 / .55); }
.look-night .ncard:focus-within { border-color: var(--gold, #E8B84A); }
@media (prefers-reduced-motion: reduce) { .look-night .ncard { transition: none; } .look-night .ncard:hover { transform: none; } }
/* the whole flyer shows (never cropped), on a fixed panel so a row's cards line up */
.look-night .ncard-ph { aspect-ratio: 16 / 10; background: var(--soft); display: grid; place-items: center; overflow: hidden; }
.look-night .ncard-ph > img:not(.ph-mark) { width: 100%; height: 100%; object-fit: contain; }
.look-night .ncard-ph.none { background: radial-gradient(circle at 70% 20%, color-mix(in srgb, var(--c) 70%, #0A1426), #0F1B31 70%); }
.look-night .ncard-mem { position: absolute; top: 12px; left: 12px; z-index: 2; font-size: 12px; font-weight: 600; color: var(--ink);
  background: rgb(10 20 38 / .85); border: 1px solid rgb(255 255 255 / .25); padding: 4px 10px; border-radius: 999px; }
.look-night .ncard-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.look-night .ncard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.look-night .ncard-when { font-size: 13px; font-weight: 600; color: #F2D48E; }
.look-night .ncard-title { margin: 0; font-size: 18px; line-height: 1.25; font-weight: 600; }
.look-night .ncard-title a { color: var(--ink); text-decoration: none; }
/* the title's link covers the card, so a tap anywhere opens the event; the save star sits above it */
.look-night .ncard-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.look-night .ncard-title a:focus-visible { outline: none; }
.look-night .ncard .save-form { position: relative; z-index: 2; margin: -6px -6px -6px 0; }
.look-night .ncard-org { color: var(--muted); font-size: 14px; }
.look-night .ncard .cal-fit { position: relative; z-index: 2; align-self: flex-start; margin-top: 4px; }