/* Shared WRKLS wordmark face, identical to the other three tools.
   PATH DEPTH: this file is /events/assets/styles.css, so the root asset needs
   two levels up. The root pages declare the same face with "./" because their
   HTML sits at the deploy root. */
@font-face {
  font-family: "WRKLS Blackletter";
  src: url("../../wrkls-blackletter.otf") format("opentype");
  font-display: swap;
  font-weight: normal;
  font-style: normal;
}

/* ===========================================================================
   WRKLS Events — styles.css

   Visual language inherited from the existing WRKLS tools: near-black ground
   with a violet cast, violet accent, compact utility surfaces, quiet type.
   The one loud element on the page is the rollout strip — that is the thing
   this tool knows that a plain calendar does not. Everything else stays flat
   and legible so a long list stays scannable on a phone.

   Mobile-first: base rules target ~320px; the two media queries widen it.
   =========================================================================== */

:root {
  --bg:        #050506;   /* matches the shared WRKLS page ground */
  --surface:   #150f1f;
  --surface-2: #1c1430;
  --line:      #2b2145;
  --line-soft: #201936;

  --text:      #ece7f6;
  --text-dim:  #a396c2;
  --text-mute: #7c6f9b;

  --violet:    #a855f7;
  --violet-lo: #7c3aed;
  --violet-hi: #c9a2ff;

  /* Shared with the other WRKLS tools: same mono stack and the same muted
     title grey, so the tool titles read as one family. */
  --mono-stack: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --title-muted: #b4b4bb;

  --warn:      #f0b232;
  --error:     #f4736c;

  --r:    10px;
  --r-sm: 7px;

  --pad: 16px;
  --gap: 12px;

  --maxw: 760px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
}

/* Fixed full-page artwork behind all UI. A dark overlay keeps the existing
   near-black WRKLS look and lets the art show through only subtly, so text
   and panels stay readable. If the image fails to load, body's --bg shows.
   Shared with the other WRKLS pages (same wrkls-bg.webp, same treatment).

   This is the EXACT declaration used by the other WRKLS tool pages
   — byte-identical apart from the relative URL. index.html uses a bespoke
   multi-stop variant for its landing treatment; Events is a secondary tool page
   like the other two, so it follows theirs.

   PATH DEPTH: a CSS url() resolves against the STYLESHEET, not the HTML
   document. This file is /events/assets/styles.css, so reaching the root asset
   needs TWO levels up:
       /events/assets/  + ../../wrkls-bg.webp  ->  /wrkls-bg.webp
   A single '../' resolves to /events/wrkls-bg.webp, which does not exist — the
   layer silently 404s and the page renders flat near-black. That was the v0.2.3
   defect. Note events/sw.js needs only ONE '../' because it sits at /events/,
   not /events/assets/; the two references are correctly asymmetric.

   Event cards stay fully opaque (--surface). The artwork is meant to read in
   the page gutters and the spacing around panels, not through them. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(5, 5, 6, 0.82), rgba(5, 5, 6, 0.9)),
    url("../../wrkls-bg.webp");
  background-size: cover, cover;
  background-position: center center, center center;
  background-repeat: no-repeat, no-repeat;
  pointer-events: none;
}

/* Keep page content above the fixed artwork layer. */
.wrap { position: relative; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--pad);
}

.skip {
  position: absolute;
  left: -9999px;
  background: var(--violet);
  color: #fff;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  z-index: 10;
}
.skip:focus { left: 12px; top: 12px; }

/* ── Header ───────────────────────────────────────────────────────────────── */

.top {
  border-bottom: 1px solid var(--line-soft);
  padding-block: 12px;
}

/* iOS safe area — declared HERE, at (0,2,0), on purpose.

   v0.2.5 relied on the shared shell's `.wrkls-safe-top { padding-top: ... }`.
   Both that rule and `.top { padding-block: 12px }` above are specificity
   (0,1,0), and this stylesheet is linked AFTER the shell — so `padding-block`,
   a shorthand that sets padding-top, won the cascade and the inset was never
   applied at all. In the installed PWA the header kept a flat 12px and the
   wordmark and menu button sat inside the status bar / Dynamic Island.

   `.top.wrkls-safe-top` is (0,2,0), so it wins regardless of link order.

   The inset is ADDED to the same 12px base: in a browser tab
   env(safe-area-inset-top) resolves to 0px, so Safari keeps exactly its
   previous spacing and gains no blank band. Only standalone mode, where iOS
   reports a real inset, grows.

   Everything interactive in this header — wordmark and the ☰ trigger — sits in
   normal flow inside this padding (the nav is data-wrkls-nav="inline", so the
   shared shell does not absolutely position it out of the padded area). */
.top.wrkls-safe-top {
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
}

/* Keep the header above page content so the dropdown is never covered. */
.top { position: relative; z-index: 40; }
.top__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  /* The wordmark is now 2.7rem, so guard the row explicitly: neither child may
     be forced to wrap, and neither may push the page wider than the viewport. */
  min-width: 0;
  flex-wrap: nowrap;
}
.brand { flex: none; min-width: 0; }

/* Three tool links (one of them "Coordinate Converter") do not fit beside the
   wordmark at 320px. Stack them under the brand on narrow screens and let the
   row scroll rather than wrap into a ragged block or push the page wide. */
@media (max-width: 559px) {
  /* NO-JS FALLBACK ONLY.
     These rules predate the shared hamburger. They stack the header into a
     column and give the nav its own horizontal scroller so four links fit.
     Both are actively harmful once the menu exists:
       - column + align-items:flex-start drops the nav below the wordmark and
         starts it at the LEFT, so the trigger renders on the wrong side;
       - overflow-x:auto makes the nav a scroll container, which CLIPS the
         absolutely positioned popover — the button toggles state but nothing
         is ever visible.
     They are therefore scoped to the un-enhanced nav. `.wnav-parent` /
     `.wnav--ready` are added by the shared shell only when JS has built the
     menu. */
  .top__inner:not(.wnav-parent) {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .nav:not(.wnav--ready) {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .nav:not(.wnav--ready)::-webkit-scrollbar { display: none; }
  .nav__link { white-space: nowrap; flex: none; }

  /* ENHANCED: keep the header a single row so the wordmark stays top-left and
     the ☰ trigger sits top-right, and let the popover escape the nav box. */
  .top__inner.wnav-parent {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .nav.wnav--ready {
    width: auto;
    flex: none;
    overflow: visible;          /* must not clip the popover */
    padding-bottom: 0;
  }
}
.brand { text-decoration: none; }
.brand__mark {
  /* Gothic WRKLS wordmark — metrics copied verbatim from the root tools, which
     all declare an identical `.brand` with no responsive override:
         font-family: "WRKLS Blackletter", Georgia, serif;
         font-size: 2.7rem; font-weight: 400;
         letter-spacing: 0.05em; line-height: 1.05;
     v0.2.8 used 1.65rem here on the theory that a compact header bar wanted a
     smaller mark. On device it just read as inconsistent, so the size now
     matches the rest of the suite rather than being chosen by eye.
     The soft violet glow is Events-specific and was approved earlier; it is
     additive and does not affect the rendered size. */
  font-family: "WRKLS Blackletter", Georgia, serif;
  font-weight: 400;
  font-size: 2.7rem;
  letter-spacing: 0.05em;
  line-height: 1.05;
  color: var(--text);
  text-shadow: 0 0 18px rgba(168, 85, 247, .55);
}
.nav { display: flex; gap: 4px; }
.nav__link {
  color: var(--text-dim);
  text-decoration: none;
  font-size: .85rem;
  padding: 6px 10px;
  border-radius: var(--r-sm);
}
.nav__link:hover { color: var(--text); background: var(--surface); }
.nav__link--on {
  color: var(--violet-hi);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* ── Lede ─────────────────────────────────────────────────────────────────── */

/* Gap under the header bar.
   The wordmark already matches the root tools at 2.7rem, so the residual
   "empty gap" between the header and `Events.` is spacing, not size. The root
   tools put only 8px between wordmark and title; Events adds a bordered header
   band plus this padding. Trimmed 22px -> 12px so the title sits closer,
   without collapsing the separation a bordered bar needs. */
.main { padding-block: 12px 40px; }

/* Page-level tool title.
   Matched to the naming language the other three tools use beneath the gothic
   wordmark: the shared monospace stack, 1.05rem, weight 500, +0.02em tracking,
   muted grey rather than bright white — their h1 is
   `font-size:1.05rem; font-weight:500; letter-spacing:0.02em; color:var(--muted)`
   in var(--mono). The trailing period carries the WRKLS purple.

   Scoped to the page title ONLY. Cards, tabs, chips, countdowns and body copy
   keep the sans UI, because scanning a long event list is what that type is
   there for. */
.lede__h {
  margin: 0 0 6px;
  font-family: var(--mono-stack);
  font-size: 1.05rem;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--title-muted);
}
.lede__dot { color: var(--violet); }
.lede__p {
  margin: 0 0 18px;
  color: var(--text-dim);
  font-size: .93rem;
  max-width: 60ch;
}

/* ── Rollout strip — the one loud element ─────────────────────────────────── */

.rollout {
  border: 1px solid rgba(168, 85, 247, .38);
  background:
    linear-gradient(180deg, rgba(124, 58, 237, .20), rgba(124, 58, 237, .06));
  border-radius: var(--r);
  padding: 12px 14px;
  margin-bottom: 18px;
}
.rollout__line { margin: 0; font-size: .95rem; }
.rollout__zone { color: var(--violet-hi); font-weight: 700; }
.rollout__note { color: var(--text-dim); }

/* ── Controls ─────────────────────────────────────────────────────────────── */

.controls {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
}

.tabs {
  display: flex;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 4px;
  grid-column: 1 / -1;
}
.tab {
  flex: 1;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: .9rem;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.tab--on {
  background: var(--violet-lo);
  color: #fff;
  font-weight: 600;
}

.zonebox { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.zonebox__label {
  font-size: .76rem;
  color: var(--text-mute);
}
.zonebox__select {
  appearance: none;
  width: 100%;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: .9rem;
  padding: 9px 30px 9px 10px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
    linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: right 14px center, right 9px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.refresh {
  appearance: none;
  background: var(--surface);
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: .85rem;
  padding: 9px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.refresh:hover:not(:disabled) { color: var(--text); border-color: var(--violet-lo); }
.refresh:disabled { opacity: .5; cursor: progress; }

/* ── Filter chips ─────────────────────────────────────────────────────────── */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  appearance: none;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-dim);
  font: inherit;
  font-size: .8rem;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.chip:hover { color: var(--text); }
.chip--on {
  background: var(--surface-2);
  border-color: var(--violet-lo);
  color: var(--text);
}
.chip__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: none;
}
.chip__count { color: var(--text-mute); font-variant-numeric: tabular-nums; }
.chip--clear { color: var(--violet-hi); }

/* ── Status ───────────────────────────────────────────────────────────────── */

.status {
  border-radius: var(--r);
  padding: 11px 13px;
  margin-bottom: 14px;
  font-size: .88rem;
  border: 1px solid var(--line);
  background: var(--surface);
}
.status--warn  { border-color: rgba(240, 178, 50, .45); background: rgba(240, 178, 50, .09); }
.status--error { border-color: rgba(244, 115, 108, .45); background: rgba(244, 115, 108, .09); }
.status--note  { color: var(--text-dim); }
.status__text { margin: 0; }
.status__detail { margin: 6px 0 0; color: var(--text-mute); font-size: .8rem; }

/* ── Event list ───────────────────────────────────────────────────────────── */

.events { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.event {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--evt, var(--violet));
  border-radius: var(--r-sm);
}
.event__hit {
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  padding: 11px 13px;
  cursor: pointer;
  border-radius: var(--r-sm);
}
.event:hover { border-color: var(--line); background: var(--surface-2); }

.event__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}
.event__type {
  font-size: .74rem;
  color: var(--evt, var(--violet-hi));
  font-weight: 600;
}
.event__tag {
  font-size: .68rem;
  color: var(--text-mute);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 7px;
}
.event__name {
  margin: 0 0 5px;
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.3;
  /* Feed names run long — one live entry is 105 characters. Clamp in the list
     so cards stay uniform and scannable; the detail view shows the full name.
     overflow-wrap keeps an unbroken token from pushing the card wide. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.detail__name { overflow-wrap: anywhere; }
.event__meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: baseline;
  font-size: .84rem;
}
.event__count {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.event__when { color: var(--text-mute); font-variant-numeric: tabular-nums; }

.more {
  display: block;
  width: 100%;
  margin-top: 10px;
  appearance: none;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-dim);
  font: inherit;
  font-size: .88rem;
  padding: 11px;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.more:hover { color: var(--text); border-color: var(--violet-lo); }

/* ── Empty ────────────────────────────────────────────────────────────────── */

.empty {
  border: 1px dashed var(--line);
  border-radius: var(--r);
  padding: 26px 18px;
  text-align: center;
}
.empty__head { margin: 0 0 5px; font-weight: 600; }
.empty__sub { margin: 0; color: var(--text-dim); font-size: .88rem; }

/* ── Skeleton ─────────────────────────────────────────────────────────────── */

.event--skeleton { padding: 13px; display: grid; gap: 8px; border-left-color: var(--line); }
.sk {
  display: block;
  height: 9px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--surface-2), var(--line), var(--surface-2));
  background-size: 200% 100%;
  animation: sk 1.4s linear infinite;
}
.sk--type { width: 26%; }
.sk--name { width: 74%; height: 12px; }
.sk--meta { width: 44%; }
@keyframes sk { to { background-position: -200% 0; } }

/* ── Detail ───────────────────────────────────────────────────────────────── */

.detail {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--evt, var(--violet));
  border-radius: var(--r);
  padding: 14px;
}
.detail__bar { margin-bottom: 10px; }
.detail__back {
  appearance: none;
  background: none;
  border: 0;
  color: var(--violet-hi);
  font: inherit;
  font-size: .86rem;
  padding: 4px 0;
  cursor: pointer;
}
.detail__type { margin: 0 0 2px; font-size: .78rem; color: var(--evt, var(--violet-hi)); font-weight: 600; }
.detail__name { margin: 0 0 8px; font-size: 1.22rem; line-height: 1.25; }
.detail__count {
  margin: 0 0 14px;
  font-size: 1rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.detail__note {
  margin: 12px 0 0;
  font-size: .84rem;
  color: var(--text-dim);
}
.detail__note--warn { color: var(--warn); }
.detail__link {
  display: inline-block;
  margin-top: 16px;
  color: var(--violet-hi);
  font-size: .88rem;
}

.times {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px 12px;
  margin: 0;
  padding: 11px 0 0;
  border-top: 1px solid var(--line-soft);
}
.times__k { font-size: .76rem; color: var(--text-mute); }
.times__v {
  margin: 0 0 9px;
  font-size: .93rem;
  font-variant-numeric: tabular-nums;
}

.facts { margin-top: 16px; }
.facts__h { margin: 0 0 7px; font-size: .8rem; color: var(--text-mute); font-weight: 600; }
.facts__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.facts__item {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: .82rem;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.updated {
  margin: 16px 0 0;
  font-size: .76rem;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}

.foot {
  border-top: 1px solid var(--line-soft);
  padding-block: 18px 30px;
  margin-top: 26px;
}
.foot__id, .foot__src, .foot__note {
  margin: 0 0 5px;
  font-size: .78rem;
  color: var(--text-mute);
  max-width: 70ch;
}
/* Product identity: name on its own line with the tagline beneath, at the same
   small size as the rest of the footer. Only the name is lifted out of the
   muted colour — the point is clearer structure, not a louder or taller block,
   so line-height is tightened to offset the extra line. */
.foot__id { line-height: 1.4; }
.foot__name {
  display: block;
  color: var(--text-dim);
  font-weight: 600;
}
.foot a { color: var(--text-dim); }

/* ── Focus ────────────────────────────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--violet-hi);
  outline-offset: 2px;
}

/* ── Wider screens ────────────────────────────────────────────────────────── */

@media (min-width: 560px) {
  .controls {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: end;
  }
  .tabs { grid-column: auto; flex: none; }
  .tab { flex: none; min-width: 108px; }
  .times { grid-template-columns: max-content 1fr; align-items: baseline; }
  .times__k { padding-top: 1px; }
  .times__v { margin-bottom: 4px; }
}

@media (min-width: 900px) {
  :root { --pad: 24px; }
  .main { padding-block: 20px 56px; }
  .events { gap: 9px; }
}

/* ── Motion ───────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .sk { animation: none; }
  * { transition: none !important; }
}