/* ============================================================================
   SYHF 2026 — My Pass

   The stage at night, seen through glass. The page sits on the forum's own
   stage photograph, dimmed to night-violet; everything you use floats over it
   as frosted panels with deep radii — the pass in the middle, your schedule
   beside it, the countdown and the venue to the side.

   The one bright thing is the QR. It sits in a frame that glows in the colour
   of your pass (your surgical track, or your tier), because that square is
   the thing the whole page exists to put in front of a volunteer's scanner.

   WHY THE PASS IS SELF-CONTAINED
   The attendees table is deliberately unreadable with the public key, so the
   pass is built once from the record in hand and lives on this device, in a
   link, and on paper. The door is the authority — the scanner checks the
   reference against the real record — so the pass opens with no signal.
   ========================================================================== */

/* ---- Tier and track hue ------------------------------------------------------
   All from the locked palette. A surgical pass wears its track (--tk-hue, set by
   tracks.css from [data-track]); every other pass wears its tier. */
[data-tier="general"]       { --pf-tier: var(--syhs-signal-alt); }
[data-tier="vip"]           { --pf-tier: var(--syhs-tint-sky); }
[data-tier="vvip"]          { --pf-tier: var(--syhs-tint-violet); }
[data-tier="closed-door"]   { --pf-tier: var(--syhs-navy); }
[data-tier="undergraduate"] { --pf-tier: var(--syhs-tint-mint); }
[data-tier="postgraduate"]  { --pf-tier: var(--syhs-signal); }
:root { --pass-hue: var(--tk-hue, var(--pf-tier, var(--syhs-tint-mint))); }

.pass-page {
  --pv-text: #f5f1fb;
  --pv-soft: #c4bcd6;
  --pv-mute: #948ba9;
  --pv-line: rgba(255, 255, 255, 0.14);
  --pv-glass: linear-gradient(155deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.045));
  --pv-glow: color-mix(in srgb, var(--pass-hue) 70%, #ffffff);
  --pv-r: 34px;
  min-height: 100dvh; color: var(--pv-text); background: #120b20;
}
/* tracks.css paints a flat track tint on :root[data-track] body — built for
   track-detail.html. The pass keeps its own night ground regardless. */
:root[data-track] .pass-page { background: #120b20; }
.pass-page::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(48rem 30rem at 50% 12%, color-mix(in srgb, var(--pass-hue) 26%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(18, 11, 32, 0.55) 0%, rgba(18, 11, 32, 0.82) 45%, #120b20 100%),
    url("assets/img/stage-hero.webp") center 30% / cover no-repeat;
}
.pass-page .app-bar { background: rgba(18, 11, 32, 0.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--pv-line); color: var(--pv-text); }
.pass-page .app-bar a, .pass-page .app-bar__brand, .pass-page .app-bar__back { color: var(--pv-text); }
.pass-page :focus-visible { outline: 2px solid var(--pv-glow); outline-offset: 3px; }

.glass {
  position: relative; border-radius: var(--pv-r);
  background: var(--pv-glass); border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(24px) saturate(1.15); -webkit-backdrop-filter: blur(24px) saturate(1.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 40px 80px -48px rgba(0, 0, 0, 0.85);
}
.pv-k { margin: 0 0 0.55rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pv-soft); }

/* ---- Gate (no pass on this device yet) ----------------------------------------- */
.gate { max-width: 34rem; margin: clamp(2rem, 8vh, 5rem) auto; padding: clamp(1.6rem, 5vw, 2.6rem); border-radius: var(--pv-r);
  background: var(--pv-glass); border: 1px solid rgba(255,255,255,0.16); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.gate__eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--syhs-tint-mint); margin: 0 0 var(--space-1); }
.gate__title { font-size: clamp(2rem, 6vw, 3rem); line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 var(--space-2); color: var(--pv-text); text-wrap: balance; }
.gate__title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--syhs-tint-mint); }
.gate__lede { color: var(--pv-soft); max-width: 42ch; margin: 0 0 var(--space-3); }
.gate__form { display: flex; flex-direction: column; gap: var(--space-2); }
.gate__hint { font-size: 0.86rem; color: var(--pv-mute); margin: 0; }
.gate__err { color: var(--syhs-error-on-dark); font-size: 0.9rem; margin: 0; min-height: 1.2em; }
.gate__err--ok { color: var(--syhs-tint-mint); }
.gate__tabs { display: flex; gap: 0.4rem; margin: 0 0 var(--space-2); }
.gate__tab { flex: 1; min-height: 44px; padding: 0.55rem 0.5rem; border-radius: 999px; border: 1px solid var(--pv-line); background: rgba(255,255,255,0.05);
  color: var(--pv-soft); font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.gate__tab.is-active { background: var(--pv-text); color: #120b20; border-color: var(--pv-text); }
.gate__ref-row { display: flex; align-items: stretch; border: 1px solid rgba(255,255,255,0.22); border-radius: 18px; background: rgba(0,0,0,0.25); overflow: hidden; }
.gate__ref-row:focus-within { outline: 2px solid var(--syhs-tint-mint); outline-offset: 2px; }
.gate__ref-prefix, .gate__ref { font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace); font-variant-numeric: tabular-nums;
  font-size: 1.5rem; letter-spacing: 0.14em; }
.gate__ref-prefix { display: flex; align-items: center; padding-inline: 1rem 0; color: var(--pv-mute); user-select: none; }
.gate__ref { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--pv-text); text-transform: uppercase; padding: 0.95rem 1rem 0.95rem 0.2rem; }
.gate__ref:focus { outline: none; }
.gate__ref::placeholder { color: rgba(255,255,255,0.3); }
.gate__id { font-size: 1.05rem; padding: 0.9rem 1rem; text-align: center; border-radius: 18px; background: rgba(0,0,0,0.25); color: var(--pv-text);
  border: 1px solid rgba(255,255,255,0.22); }
.gate .btn--primary { min-height: 52px; border-radius: 999px; background: var(--syhs-tint-mint); color: #0f2a1f; border: 0; font-weight: 700; }

/* ---- Layout ---------------------------------------------------------------------- */
.pv { max-width: 84rem; margin: 0 auto; padding: clamp(1.2rem, 3vw, 2.4rem) clamp(1rem, 3vw, 2rem) 4rem; }
.pv-grid { display: grid; gap: 1.2rem; align-items: start;
  grid-template-columns: minmax(15rem, 19rem) minmax(21rem, 25rem) minmax(0, 1fr);
  grid-template-areas: "side hero plan"; }
.pv-hero { grid-area: hero; }
.pv-side { grid-area: side; display: flex; flex-direction: column; gap: 1.2rem; }
.pv-plan { grid-area: plan; }
@media (max-width: 78em) {
  .pv-grid { grid-template-columns: minmax(21rem, 25rem) minmax(0, 1fr); grid-template-areas: "hero plan" "side plan"; }
}
@media (max-width: 52em) {
  .pv-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "plan" "side"; }
}

/* ---- The pass ---------------------------------------------------------------------- */
.pv-hero { padding: 1.3rem 1.4rem 1.5rem; text-align: center; overflow: hidden; }
.pv-hero::after { /* a thread of the pass colour along the top, like a lanyard clip */
  content: ""; position: absolute; top: 0; left: 50%; width: 5rem; height: 4px; margin-left: -2.5rem; border-radius: 0 0 4px 4px; background: var(--pv-glow); }

.pv-next { display: grid; grid-template-columns: auto 1fr; gap: 0.1rem 0.6rem; align-items: center; text-align: left;
  margin: 0.4rem 0 1.3rem; padding: 0.65rem 0.95rem; border-radius: 22px; background: rgba(0,0,0,0.28); border: 1px solid var(--pv-line); }
.pv-next[hidden] { display: none; }
.pv-next svg { grid-row: span 3; width: 22px; height: 22px; fill: none; stroke: var(--pv-glow); stroke-width: 1.8; stroke-linecap: round; }
.pv-next__k { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pv-mute); }
.pv-next__t { font-size: 0.95rem; }
.pv-next__s { font-size: 0.8rem; color: var(--pv-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The frame: the glow that makes this page recognisable from across a room. */
.pv-frame { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; padding: 10px; border-radius: 30px;
  background: conic-gradient(from 210deg, var(--pv-glow), color-mix(in srgb, var(--pv-glow) 20%, transparent) 30%, transparent 45%,
    color-mix(in srgb, var(--syhs-tint-mint) 60%, transparent) 70%, var(--pv-glow));
  box-shadow: 0 0 60px -10px color-mix(in srgb, var(--pv-glow) 70%, transparent), 0 0 0 1px rgba(255,255,255,0.1); }
.pv-frame::before { content: ""; position: absolute; inset: 3px; border-radius: 27px; background: rgba(18, 11, 32, 0.8); }
/* qr.js draws a 240px canvas with its own white quiet zone and sets that size
   inline — the tile, not the canvas, decides the size here. */
.badge__qr { position: relative; width: min(252px, calc(100vw - 6.5rem)); height: auto; aspect-ratio: 1; padding: 6px; border-radius: 22px; background: #fff; display: grid; place-items: center; overflow: hidden; }
.badge__qr canvas, .badge__qr img { display: block; width: 100% !important; height: 100% !important; image-rendering: pixelated; }
.badge__qr--fallback { color: #4a4458; font-size: 0.78rem; line-height: 1.5; padding: 1.4rem 1rem; }
.pv-scan { margin: 0.8rem 0 1.3rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pv-mute); }

.pv-hello__k { display: none; }
.pv-hello { margin: 0; font-size: clamp(1.9rem, 1.3rem + 2vw, 2.4rem); font-weight: 300; letter-spacing: -0.035em; line-height: 1.05; text-wrap: balance; }
.pv-hello em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--pv-glow); letter-spacing: -0.015em; }
.pv-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.4rem; margin: 0.8rem 0 1.1rem; }
.badge__tier, .badge__status { display: inline-flex; align-items: center; min-height: 28px; padding: 0.2rem 0.75rem; border-radius: 999px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; }
.badge__tier { background: var(--pv-glow); color: #120b20; text-transform: uppercase; }
.badge__status { background: rgba(255,255,255,0.1); border: 1px solid var(--pv-line); color: var(--pv-text); }
.badge__status--wait { background: #f5d76b; color: #3b2c00; border-color: transparent; }
.badge__status--bad  { background: #f0b4bc; color: #4a0d16; border-color: transparent; }

.pv-who { padding: 1rem 0 0.2rem; border-top: 1px solid var(--pv-line); }
.badge__name { margin: 0; font-size: 1.12rem; font-weight: 600; letter-spacing: -0.01em; }
.badge__name--long { font-size: 1rem; }
.badge__role { margin: 0.2rem 0 0; font-size: 0.86rem; color: var(--pv-soft); }
.badge__contact { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.1rem 0.9rem; margin: 0.35rem 0 0; font-size: 0.78rem; color: var(--pv-mute); }
.badge__contact span { overflow-wrap: anywhere; }

.pv-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 1rem 0 1.2rem; text-align: left; }
.pv-meta div { padding: 0.6rem 0.8rem; border-radius: 16px; background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.08); min-width: 0; }
.pv-meta dt { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pv-mute); }
.pv-meta dd { margin: 0.15rem 0 0; font-size: 0.9rem; font-weight: 600; overflow-wrap: anywhere; }
.badge__ref { font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace); font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }

/* ---- Actions dock --------------------------------------------------------------------- */
.pv-dock { display: flex; flex-direction: column; gap: 0.6rem; }
.pv-pill { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 50px; padding: 0 1.3rem; border-radius: 999px;
  appearance: none; cursor: pointer; font: inherit; font-size: 0.95rem; font-weight: 700; text-decoration: none;
  color: var(--pv-text); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); transition: background 160ms, border-color 160ms, transform 160ms; }
.pv-pill:hover { border-color: var(--pv-glow); }
.pv-pill:active { transform: scale(0.98); }
.pv-pill:disabled { opacity: 0.45; cursor: not-allowed; }
.pv-pill[hidden] { display: none; }
.pv-pill svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.pv-pill--primary { background: var(--pv-glow); color: #120b20; border-color: transparent; }
.pv-pill--primary:hover { background: color-mix(in srgb, var(--pv-glow) 85%, #fff); }
.pv-pill--ghost { background: transparent; }
.pv-pill--sm { min-height: 42px; padding: 0 1rem; font-size: 0.85rem; }

/* Icon circles. The icon is drawn in CSS so pass.js can keep rewriting the
   label ("Link copied", "Added") without losing it. */
.pv-circles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; margin-top: 0.5rem; }
.pv-circle { appearance: none; cursor: pointer; font: inherit; color: var(--pv-soft); background: none; border: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 0.45rem; font-size: 0.72rem; font-weight: 600; min-height: 44px; }
.pv-circle::before { content: ""; width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2);
  background-color: rgba(255,255,255,0.07); transition: border-color 160ms, background-color 160ms; }
.pv-circle::after { content: ""; position: absolute; top: 17px; left: 50%; width: 22px; height: 22px; margin-left: -11px; background: var(--pv-text);
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.pv-circle { position: relative; }
.pv-circle:hover { color: var(--pv-text); }
.pv-circle:hover::before { border-color: var(--pv-glow); background-color: rgba(255,255,255,0.12); }
.pv-circle--cal   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.pv-circle--share { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3.5M7.5 8 12 3.5 16.5 8M5 12.5V19a1.5 1.5 0 0 0 1.5 1.5h11A1.5 1.5 0 0 0 19 19v-6.5'/%3E%3C/svg%3E"); }
.pv-circle--link  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3.3-3.3a4 4 0 0 0-5.7-5.7L12 6.3M14 10a4 4 0 0 0-5.7 0L5 13.3a4 4 0 0 0 5.7 5.7L12 17.7'/%3E%3C/svg%3E"); }
.pv-circle--print { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M7 8V3.5h10V8M7 16.5H5A1.5 1.5 0 0 1 3.5 15v-5.5A1.5 1.5 0 0 1 5 8h14a1.5 1.5 0 0 1 1.5 1.5V15a1.5 1.5 0 0 1-1.5 1.5h-2M7 13h10v7.5H7z'/%3E%3C/svg%3E"); }
/* The share-card trigger pass.js wires up; the schedule panel's own button
   clicks it, so it never needs to be seen. */
#act-share-schedule { display: none !important; }
.pass-note { margin: 1.1rem 0 0; font-size: 0.8rem; line-height: 1.55; color: var(--pv-mute); }

/* ---- Side: countdown, stats, venue ---------------------------------------------------- */
.pv-count, .pv-stats, .pv-venue { padding: 1.3rem 1.3rem 1.35rem; }
.cd { display: flex; gap: 0.5rem; }
.cd__u { flex: 1; text-align: center; padding: 0.7rem 0.3rem; border-radius: 18px; background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.08); }
.cd__n { display: block; font-size: 2rem; font-weight: 300; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--pv-text); }
.cd__l { display: block; margin-top: 0.35rem; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pv-mute); }
.cd__u--live .cd__n { font-size: 1.1rem; font-weight: 700; color: var(--syhs-tint-mint); }
.pv-count__d { margin: 0.8rem 0 0; font-size: 0.8rem; color: var(--pv-soft); }

.pv-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(4.2rem, 1fr)); gap: 0.5rem; }
.pv-stat { padding: 0.75rem 0.4rem; border-radius: 18px; text-align: center; background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.08); }
.pv-stat b { display: block; font-size: 1.55rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1; color: var(--pv-glow); font-variant-numeric: tabular-nums; }
.pv-stat span { display: block; margin-top: 0.3rem; font-size: 0.68rem; color: var(--pv-soft); }
.pv-stat--warn b { color: #f5d76b; }
.pv-stats__empty { margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--pv-soft); }

.pv-venue__n { margin: 0; font-size: 1.05rem; font-weight: 600; }
.pv-venue__a { margin: 0.25rem 0 1rem; font-size: 0.84rem; color: var(--pv-soft); line-height: 1.5; }
.pv-venue__acts { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ---- My schedule --------------------------------------------------------------------- */
.pv-plan { padding: 1.5rem 1.5rem 1.4rem; }
.pp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.pp-title { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1.05; }
.pp-title b { font-weight: 500; color: var(--pv-glow); }
.pp-title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.pp-sync { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600;
  background: rgba(0,0,0,0.28); border: 1px solid var(--pv-line); color: var(--pv-soft); }
.pp-sync::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pv-mute); }
.pp-sync--synced::before { background: var(--syhs-tint-mint); box-shadow: 0 0 8px var(--syhs-tint-mint); }
.pp-sync--saving::before { background: #f5d76b; }
.pp-sync--offline::before { background: var(--syhs-error-on-dark); }

.pp-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.45rem; margin-bottom: 0.8rem; }
.pp-day { position: relative; appearance: none; cursor: pointer; font: inherit; color: var(--pv-soft); min-height: 60px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; border-radius: 20px;
  background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.1); transition: background 160ms, color 160ms, border-color 160ms; }
.pp-day__wd { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.pp-day__n { font-size: 1.25rem; font-weight: 500; color: var(--pv-text); line-height: 1; }
.pp-day__c { position: absolute; top: 6px; right: 8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-style: normal;
  font-size: 0.66rem; font-weight: 800; display: grid; place-items: center; background: var(--pv-glow); color: #120b20; }
.pp-day:hover { border-color: rgba(255,255,255,0.3); }
.pp-day.is-on { background: var(--pv-text); color: #3d3552; border-color: var(--pv-text); }
.pp-day.is-on .pp-day__n { color: #120b20; }
.pp-dayline { margin: 0 0 1rem; font-size: 0.84rem; color: var(--pv-soft); }

.pp-mine { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.pp-item { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) auto; gap: 0.9rem; align-items: start; padding: 0.85rem 0.8rem 0.85rem 1rem;
  border-radius: 20px; background: rgba(0,0,0,0.26); border: 1px solid rgba(255,255,255,0.08); box-shadow: inset 3px 0 0 var(--c); }
.pp-item.is-clash { border-color: rgba(245, 215, 107, 0.55); }
.pp-item__time { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.pp-item__time b { font-size: 0.95rem; }
.pp-item__time span { font-size: 0.74rem; color: var(--pv-mute); }
.pp-item__body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.pp-item__title { font-weight: 600; line-height: 1.3; }
.pp-item__meta, .pp-row__meta { display: flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--pv-soft); }
.pp-item__meta i, .pp-row__meta i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: 0 0 7px; }
.pp-item__flag { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 700; color: #f5d76b; }
.pp-item__flag svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pp-item__note { font-size: 0.72rem; color: var(--pv-mute); }
.pp-item__acts { display: flex; gap: 0.3rem; }
.pp-icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; appearance: none; cursor: pointer; color: var(--pv-soft);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); }
.pp-icon:hover { color: var(--pv-text); border-color: var(--pv-glow); }
.pp-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.pp-empty { margin: 0 0 1rem; padding: 1.2rem 1.2rem; border-radius: 20px; border: 1px dashed rgba(255,255,255,0.2); }
.pp-empty__t { margin: 0 0 0.3rem; font-weight: 600; }
.pp-empty__b { margin: 0; font-size: 0.86rem; color: var(--pv-soft); }
.pp-empty__b a { color: var(--pv-glow); font-weight: 700; }

.pp-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 1rem; border-radius: 16px;
  appearance: none; cursor: pointer; font: inherit; font-weight: 600; color: var(--pv-text); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); }
.pp-toggle__n { min-width: 1.6rem; padding: 0.1rem 0.45rem; border-radius: 999px; background: rgba(255,255,255,0.12); font-size: 0.75rem; text-align: center; }
.pp-browse { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; }
.pp-row { display: grid; grid-template-columns: 4.3rem minmax(0, 1fr) auto; gap: 0.8rem; align-items: center; padding: 0.65rem 0.2rem 0.65rem 0.4rem;
  border-bottom: 1px solid rgba(255,255,255,0.07); }
.pp-row__time { font-size: 0.82rem; font-weight: 600; color: var(--pv-soft); font-variant-numeric: tabular-nums; }
.pp-row__body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.pp-row__title { font-size: 0.9rem; font-weight: 600; line-height: 1.3; }
.pp-add { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; appearance: none; cursor: pointer;
  color: var(--pv-text); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.2); }
.pp-add svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pp-add:hover { border-color: var(--pv-glow); }
.pp-add[aria-pressed="true"] { background: var(--pv-glow); color: #120b20; border-color: transparent; }

.pp-acts { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px solid var(--pv-line); }
.pp-foot { flex-basis: 100%; margin: 0.2rem 0 0; font-size: 0.78rem; line-height: 1.55; color: var(--pv-mute); }

/* ---- Live mode (forum hours only) --------------------------------------------------------- */
.pv-live { grid-area: live; padding: 1.2rem 1.4rem 1.3rem; }
.pv-live[hidden] { display: none; }
.pv-grid.is-live { grid-template-areas: "live live live" "side hero plan"; }
@media (max-width: 78em) { .pv-grid.is-live { grid-template-areas: "live live" "hero plan" "side plan"; } }
@media (max-width: 52em) { .pv-grid.is-live { grid-template-areas: "live" "hero" "plan" "side"; } }
.pl-head { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.pl-badge { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; padding: 0.3rem 0.75rem; border-radius: 999px;
  background: var(--syhs-tint-mint); color: #0f2a1f; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.pl-badge i { width: 8px; height: 8px; border-radius: 50%; background: #0f2a1f; animation: pl-pulse 1.6s ease-in-out infinite; }
@keyframes pl-pulse { 50% { opacity: 0.25; } }
.pl-day { margin: 0; font-size: 0.9rem; color: var(--pv-soft); font-variant-numeric: tabular-nums; }
.pl-mine { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; margin: 0 0 1rem; font-size: 1.05rem; }
.pl-mine__k { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pv-glow); }
.pl-mine__m { font-size: 0.86rem; color: var(--pv-soft); }
.pl-rooms { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.pl-room { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.85rem 0.9rem 0.9rem 1rem; border-radius: 20px;
  background: rgba(0,0,0,0.26); border: 1px solid rgba(255,255,255,0.08); box-shadow: inset 3px 0 0 var(--c, rgba(255,255,255,0.3)); }
.pl-room--quiet { opacity: 0.72; }
.pl-room__k, .pl-room__t, .pl-room__m { margin: 0; }
.pl-room__k { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pv-mute); }
.pl-room__t { font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pl-room__m { font-size: 0.78rem; color: var(--pv-soft); }
.pl-room__bar { display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.1); overflow: hidden; margin-top: 0.2rem; }
.pl-room__bar i { display: block; height: 100%; background: var(--c); }
.pl-room__ask { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.4rem; min-height: 38px; padding: 0 0.85rem;
  border-radius: 999px; border: 1px solid rgba(255,255,255,0.2); color: var(--pv-text); font-size: 0.8rem; font-weight: 600; text-decoration: none; }
.pl-room__ask:hover, .pl-room__ask:focus-visible { border-color: var(--pv-glow); background: rgba(255,255,255,0.06); }
.pl-room__ask svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Bring your people ------------------------------------------------------------------ */
.pv-invite, .pv-meet { padding: 1.2rem 1.25rem 1.3rem; }
.pi-lead, .pm-lead { margin: 0 0 0.8rem; font-size: 0.86rem; line-height: 1.5; color: var(--pv-soft); }
.pi-link { display: flex; gap: 0.4rem; align-items: center; margin-bottom: 0.6rem; }
.pi-url { flex: 1; min-width: 0; min-height: 42px; padding: 0 0.9rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.28); color: var(--pv-text); font: inherit; font-size: 0.78rem; }
.pi-share { width: 100%; }
.pi-count { min-height: 1.3em; margin: 0.7rem 0 0; font-size: 0.84rem; color: var(--pv-soft); }
.pi-count b { color: var(--pv-glow); font-size: 1.1rem; }

/* ---- Connect ------------------------------------------------------------------------------ */
.pm-form { display: flex; flex-direction: column; gap: 0.45rem; }
.pm-label { font-size: 0.78rem; font-weight: 600; color: var(--pv-text); }
.pm-input { min-height: 46px; padding: 0 1rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: rgba(0,0,0,0.28);
  color: var(--pv-text); font: inherit; font-size: 0.9rem; }
.pm-input[aria-invalid="true"], .pm-err:not(:empty) + .pm-input { border-color: var(--syhs-error-on-dark); }
.pm-err { margin: 0; font-size: 0.78rem; color: #ffb4a8; }
.pm-err:empty { display: none; }
.pm-fine { margin: 0.7rem 0 0; font-size: 0.74rem; line-height: 1.5; color: var(--pv-mute); }
.pm-code { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: center; }
.pm-qr { width: 132px; height: 132px; padding: 5px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--syhs-tint-violet, #9682ca) 70%, transparent); }
.pm-qr canvas { width: 100% !important; height: 100% !important; display: block; border-radius: 12px; }
.pm-code__t { margin: 0 0 0.25rem; font-weight: 700; }
.pm-code__b { margin: 0; font-size: 0.8rem; line-height: 1.5; color: var(--pv-soft); }
.pm-li { margin: 0.8rem 0 0; font-size: 0.8rem; color: var(--pv-soft); overflow-wrap: anywhere; }
.pm-li a { color: var(--pv-glow); }
.pm-sub { display: flex; align-items: center; gap: 0.45rem; margin: 1rem 0 0.5rem; font-size: 0.78rem; font-weight: 700; color: var(--pv-text); }
.pm-n { min-width: 1.5rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: rgba(255,255,255,0.12); text-align: center; font-size: 0.72rem; }
.pm-met { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pm-met li { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.55rem 0; border-bottom: 1px solid rgba(255,255,255,0.07); }
.pm-met__who { display: flex; flex-direction: column; min-width: 0; }
.pm-met__who b { font-size: 0.9rem; }
.pm-met__who span { font-size: 0.74rem; color: var(--pv-mute); }
.pp-icon svg.is-fill { fill: currentColor; stroke: none; }
.pm-off { margin-top: 0.9rem; padding: 0.4rem 0; appearance: none; background: none; border: 0; cursor: pointer; font: inherit; font-size: 0.8rem;
  color: var(--pv-mute); text-decoration: underline; text-underline-offset: 3px; }
.pm-off:hover { color: var(--pv-text); }

/* ---- Share a card -------------------------------------------------------------------------- */
.pv-share { width: min(40rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 0; background: transparent; color: var(--pv-text); }
.pv-share::backdrop { background: rgba(10, 6, 20, 0.72); backdrop-filter: blur(6px); }
.pv-share__box { padding: 1.3rem 1.3rem 1.5rem; border-radius: var(--pv-r); background: linear-gradient(160deg, #2a1845, #140d22);
  border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
.pv-share__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pv-share__head h2 { margin: 0; font-size: 1.3rem; font-weight: 500; }
.pv-share__sub { margin: 0.35rem 0 1.1rem; font-size: 0.84rem; color: var(--pv-soft); }
.pv-share__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.ps-card { width: 100%; appearance: none; cursor: pointer; font: inherit; color: var(--pv-text); background: none; border: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.5rem; align-items: stretch; text-align: center; }
.ps-card__img { display: block; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14); transition: transform 180ms, border-color 180ms; }
.ps-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-card:hover .ps-card__img, .ps-card:focus-visible .ps-card__img { transform: translateY(-3px); border-color: var(--pv-glow); }
.ps-card__l { font-size: 0.86rem; font-weight: 600; }
.ps-card:disabled { opacity: 0.6; cursor: progress; }

/* ---- Phone ------------------------------------------------------------------------------ */
@media (max-width: 30em) {
  .pv { padding-inline: 0.75rem; }
  .pv-hero, .pv-plan { padding-inline: 1rem; }
  .pp-item { grid-template-columns: minmax(0, 1fr) auto; }
  .pp-item__time { grid-column: 1 / -1; flex-direction: row; gap: 0.4rem; }
  .pp-row { grid-template-columns: minmax(0, 1fr) auto; }
  .pp-row__time { grid-column: 1 / -1; }
}

/* ---- Print: paper gets a clean badge and nothing else -------------------------------------- */
@media print {
  .app-bar, .site-header, .site-footer, .pv-dock, .pass-note, .pv-side, .pv-plan, .pv-next, .gate, .skip-link { display: none !important; }
  .pass-page, body { background: #fff !important; color: #16121f !important; }
  .pass-page::before { display: none !important; }
  .pv-grid { display: block; }
  .pv-hero { max-width: 24rem; margin: 0 auto; background: #fff !important; border: 2px solid #16121f; box-shadow: none; backdrop-filter: none; color: #16121f;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pv-frame { background: none; box-shadow: none; }
  .pv-frame::before { display: none; }
  .pv-hello, .badge__name, .pv-meta dd { color: #16121f; }
  .pv-meta div { background: #f4f1f8; border-color: #ddd; }
  .pv-meta dt, .pv-scan, .badge__role { color: #4a4458; }
  .badge__status { color: #16121f; border-color: #ccc; }
}

@media (prefers-reduced-motion: reduce) {
  .pass-page *, .pass-page *::before, .pass-page *::after { transition: none !important; animation: none !important; }
}