/* Slack Tide, Events section. Component layer over design/tokens.css (the --st-* variables),
   built to design/DESIGN.md, Revision B. One responsive template: the phone artboard below
   700 px, the desktop artboard above it. Only the frame and the tab tops are rounded. */

:root {
  /* Phone values of the tokens that switch at the breakpoint. */
  --radius-frame: var(--st-radius-frame-phone);
  --radius-tab: var(--st-radius-tab-phone);
  --margin-inset: var(--st-margin-inset-phone);
  --margin-line: var(--st-margin-line);
  --content-pad: var(--st-content-pad-phone);
  --gap: var(--st-gap-phone);
  --unit: var(--st-grid-size);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--st-canvas); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding: var(--st-frame-margin-phone);
  min-height: 100vh;
  font: 500 14px/1.4 var(--st-font-sans);
  color: var(--st-ink);
  background: var(--st-canvas);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--st-ink); text-decoration: none; }
a:hover { color: var(--st-coral); }
button, select { font-family: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
svg { display: block; }
[hidden] { display: none !important; }
.long { display: none; }
.short { display: inline; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--st-ink); color: var(--st-paper); padding: 8px 12px; z-index: 20; }
.skip:focus { left: 8px; }

/* Frame: 2 px ink, rounded, 28 px blue grid, margin lines in front of everything */
.frame {
  position: relative;
  max-width: var(--st-frame-max-width);
  margin: 0 auto;
  border: var(--st-border-frame) solid var(--st-ink);
  border-radius: var(--radius-frame);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: var(--st-paper);
  background-image:
    linear-gradient(var(--st-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--st-grid) 1px, transparent 1px);
  background-size: var(--unit) var(--unit);
}
.frame::before, .frame::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: var(--margin-line);
  background: var(--st-margin);
  z-index: 5;
  pointer-events: none;
}
.frame::before { left: calc(var(--margin-inset) - var(--st-border-frame)); }
.frame::after { right: calc(var(--margin-inset) - var(--st-border-frame)); }

/* Header: yellow wordmark block registered on the left margin line, 2 px blue rule */
.head { display: flex; flex-direction: column; position: relative; }
.brandbar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding: 0 calc(var(--margin-inset) + 10px) 0 calc(var(--margin-inset) - var(--st-border-frame));
  border-bottom: var(--st-border-rule) solid var(--st-rule);
  position: relative;   /* no z-index: the margin lines (z 5) paint over the yellow block */
}
.wordmark {
  display: flex;
  align-items: center;
  padding: 10px 18px;
  background: var(--st-yellow);
  color: var(--st-ink);
  font: var(--st-wordmark-phone);
  letter-spacing: -0.02em;
}
.wordmark:hover { color: var(--st-ink); }
.tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 14px calc(var(--margin-inset) - var(--st-border-frame)) 0;
  position: relative;
  z-index: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 10px;
  border: var(--st-border-tab) solid var(--st-rule);
  border-radius: var(--radius-tab);
  background: var(--st-tab-idle);
  color: var(--st-ink);
  font: 700 12px/1.1 var(--st-font-sans);
  text-align: center;
  white-space: nowrap;
}
.tab[aria-current="page"] {
  height: 40px;
  padding: 0 16px;
  border-bottom: 0;
  background: var(--st-green);
  font: var(--st-tab-phone);
}
.tab:hover { color: var(--st-ink); }
/* Phone: the tabs stand on a second blue rule that runs margin line to margin line. */
.head::after {
  content: ""; display: block;
  height: var(--st-border-rule); background: var(--st-rule);
  margin: 0 calc(var(--margin-inset) - var(--st-border-frame) - 1px) 0 calc(var(--margin-inset) - var(--st-border-frame));
}

/* Content */
.content {
  position: relative;
  padding: 16px var(--content-pad) 18px;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
/* Stickers: a small cluster laid out after the heading, so it lands in the empty space past the
   end of the title on every page. site.js adds .is-nudged while a section tab is hovered or
   focused, and the splats drift aside. */
.hero-title { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.stickers { position: relative; flex: 0 0 auto; width: 54px; height: 44px; pointer-events: none; }
.sticker { position: absolute; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sticker-1 { left: 0; top: 0; width: 26px; height: 26px; }
.sticker-2 { left: 30px; top: 22px; width: 18px; height: 18px; }
.sticker-3 { display: none; }
.stickers.is-nudged .sticker-1 { transform: translate(8px, -6px) rotate(25deg); }
.stickers.is-nudged .sticker-2 { transform: translate(10px, 4px) rotate(-30deg); }
.stickers.is-nudged .sticker-3 { transform: translate(6px, -10px) rotate(40deg); }
@media (max-width: 359px) { .stickers { display: none; } }   /* DESIGN.md: drop them when they would collide */

.hero { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; position: relative; }
.hero-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* Phone: no room after the heading beside the tide panel, so the cluster takes the artboard's
   spot at the panel's lower right corner instead of wrapping under the title. */
.hero .stickers { position: absolute; right: 0; bottom: -10px; }
.hero h1 { font: var(--st-h1-phone); letter-spacing: -0.02em; }
.dateline { font: 400 11px/14px var(--st-font-mono); letter-spacing: var(--st-letterspacing-caps); text-transform: uppercase; }

/* Tide panel */
.tide {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--st-paper);
  border: var(--st-border-control) solid var(--st-ink);
  padding: 6px 8px;
}
.tide-staff { width: 22px; height: 84px; flex: 0 0 auto; }
.tide-staff .staff { fill: var(--st-paper); stroke: var(--st-ink); stroke-width: 1.5; }
.tide-staff .tick { stroke: var(--st-ink); stroke-width: 1.2; }
.tide-staff .tide-water { fill: var(--st-blue); }
.tide-staff .tide-mark path { stroke: var(--st-coral); stroke-width: 2; }
.tide-readings {
  display: flex; flex-direction: column; gap: 2px;
  font: 400 9px/12px var(--st-font-mono); letter-spacing: var(--st-letterspacing-caps); text-transform: uppercase;
}
.tide-now { font-size: 13px; font-weight: 500; line-height: 16px; }
.tide-hilo span { display: block; }
.tide-hilo .sep { display: none; }
.tide-source { opacity: 0.6; }
.tide-unavailable { font-size: 11px; line-height: 14px; }

/* Filters: town select with Calendar and Map beside it, then the category and section selects,
   then the category tiles. The category select mirrors the tiles; the section select goes
   where the tabs go. */
.filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "select links" "more more" "tiles tiles";
  gap: 8px 8px;
}
.filters > .select { grid-area: select; }
.select { position: relative; min-width: 0; }
.more { grid-area: more; display: flex; gap: 8px; margin-bottom: calc(var(--gap) - 8px); }
.more .select { flex: 1 1 0; }
.select select {
  width: 100%;
  height: var(--st-tap-target);
  border: var(--st-border-control) solid var(--st-ink);
  border-radius: var(--st-radius-control);
  background: var(--st-paper);
  color: var(--st-ink);
  font: var(--st-control);
  padding: 0 36px 0 12px;
  appearance: none;
  -webkit-appearance: none;
}
.select svg { position: absolute; right: 12px; top: 18px; pointer-events: none; }
.links { grid-area: links; display: flex; gap: 8px; align-items: center; font: var(--st-control); }
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--st-tap-target); padding: 0 12px;
  border: var(--st-border-control) solid var(--st-ink); border-radius: var(--st-radius-control);
  background: var(--st-paper); color: var(--st-ink);
  white-space: nowrap;
}
.btn:hover { color: var(--st-coral); }
/* DESIGN.md routes the phone to the calendar through "See the whole month"; the button is kept
   at every width by request, so the select gives up the room on the phone. */
.tiles { grid-area: tiles; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  height: var(--st-tile-size-phone);
  border: var(--st-border-control) solid var(--st-ink);
  border-radius: var(--st-radius-control);
  background: var(--st-paper);
  color: var(--st-ink);
  font: var(--st-tile-label); letter-spacing: var(--st-letterspacing-caps); text-transform: uppercase;
  padding: 0 2px;
}
.tile svg { width: 28px; height: 28px; }
.tile[aria-pressed="true"], .tile:hover { background: var(--st-yellow); color: var(--st-ink); }

/* Cards: title cell, image with a category label block, date and price strip */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.card {
  display: flex; flex-direction: column;
  background: var(--st-paper); color: var(--st-ink);
  border: var(--st-border-card) solid var(--st-ink); border-radius: var(--st-radius-card);
}
.card:hover { color: var(--st-ink); }
.card:hover .card-title { color: var(--st-coral); }
.card-title { padding: 8px; font: var(--st-card-title-phone); border-bottom: var(--st-border-card) solid var(--st-ink); min-height: 34px; display: flex; align-items: center; }
.card-media { display: flex; position: relative; border-bottom: var(--st-border-card) solid var(--st-ink); }
/* Two kinds of picture (DESIGN.md, Images): a photograph takes the halftone (.ht); a scene from
   design/art/ renders as drawn (.ill). */
.ht, .ill { position: relative; overflow: hidden; }
.ill img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ht img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.2) brightness(1.05); mix-blend-mode: multiply; }
.ht::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--st-ink) 0.8px, transparent 1.3px);
  background-size: 4px 4px;
  mix-blend-mode: multiply; opacity: 0.3; pointer-events: none;
}
.card-art { flex: 1; height: var(--st-card-image-phone); background: var(--cat); }
.card-badge { display: none; }
.card-strip {
  flex: 0 0 26px; border-left: var(--st-border-card) solid var(--st-ink); background: var(--cat);
  display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl;
  font: 400 9px/1 var(--st-font-mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.card-when { display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; font: var(--st-meta-phone); border-bottom: var(--st-border-card) solid var(--st-ink); background: var(--st-yellow); }
.card-where { padding: 6px 8px; font: 400 9px/1.3 var(--st-font-mono); }
.card-prov { padding: 0 8px 7px; font: 400 8px/1.3 var(--st-font-mono); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; }
.empty { font: 400 11px/28px var(--st-font-mono); }

/* The week ahead: a card grid (DESIGN.md, option 5A). One column on the phone, two on the
   desktop. The 28 px rhythm does not govern this list. */
.week { display: flex; flex-direction: column; gap: 10px; }
.week h2 {
  font: var(--st-section-heading); letter-spacing: var(--st-letterspacing-heading); text-transform: uppercase;
  height: var(--unit);
  border-bottom: 2px solid var(--st-ink);
  display: flex; justify-content: space-between; gap: 12px;
}
.week-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.week-card {
  display: flex; min-height: var(--st-week-card-min-h-phone);
  background: var(--st-paper); color: var(--st-ink);
  border: var(--st-border-card) solid var(--st-ink);
}
.week-card:hover { color: var(--st-ink); }
.week-card:hover .wk-title { color: var(--st-coral); }
.wk-date {
  flex: 0 0 var(--st-week-date-w-phone); background: var(--st-yellow);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 6px 4px; text-align: center;
}
.wk-day { font: 700 13px/1 var(--st-font-sans); }
.wk-time { font: 400 10px/1.2 var(--st-font-mono); }
.wk-body { flex: 1; min-width: 0; padding: 9px 10px; display: flex; flex-direction: column; gap: 4px; }
.wk-title { font: 700 14px/1.2 var(--st-font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-place { font: 400 10px/1.3 var(--st-font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-chips { display: flex; gap: 5px; margin-top: 2px; min-width: 0; }
.wk-chip {
  font: 400 9px/1.2 var(--st-font-mono); letter-spacing: var(--st-letterspacing-caps); text-transform: uppercase;
  padding: 2px 6px; border: 1px solid var(--st-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wk-band {
  flex: 0 0 var(--st-week-band-w-phone); background: var(--cat);
  display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font: 400 9px/1 var(--st-font-mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.week-more { align-self: flex-start; font: 400 11px/28px var(--st-font-mono); text-decoration: underline; }

/* Organiser call to action and footer */
.cta { display: flex; align-items: center; justify-content: center; height: 48px; background: var(--st-yellow); color: var(--st-ink); font: 700 14px/1 var(--st-font-sans); }
.cta:hover { color: var(--st-ink); }
.footer {
  padding: 0 var(--content-pad) 18px;
  font: 400 10px/14px var(--st-font-mono);
  display: flex; flex-direction: column; gap: 2px;
}
.footer .towns { display: none; }
.footer a { text-decoration: underline; }

/* Placeholder pages */
.placeholder h1 { font: var(--st-h1-phone); letter-spacing: -0.02em; }
.placeholder p { font: 400 11px/14px var(--st-font-mono); max-width: 52ch; }
.placeholder .back { font: 400 11px/28px var(--st-font-mono); text-decoration: underline; }

/* Desktop */
@media (min-width: 700px) {
  :root {
    --radius-frame: var(--st-radius-frame-desktop);
    --radius-tab: var(--st-radius-tab-desktop);
    --margin-inset: var(--st-margin-inset-desktop);
    --margin-line: 2px;
    --content-pad: var(--st-content-pad-desktop);
    --gap: var(--st-gap-desktop);
  }
  body { padding: 16px 24px 32px; }
  .long { display: inline; }
  .short { display: none; }
  /* Between the phone and 960 px the header keeps the phone's two rows (wordmark, then the tabs
     on their own rule) at desktop sizes, because the three tabs do not fit beside the wordmark. */
  .wordmark { padding: 14px 26px; font: var(--st-wordmark-desktop); letter-spacing: -0.02em; }
  .tabs { gap: 6px; flex-wrap: wrap; overflow: visible; }
  .tab { height: 40px; padding: 0 18px; font: 700 14px/1 var(--st-font-sans); }
  .tab[aria-current="page"] { height: 46px; padding: 0 24px; font: var(--st-tab-desktop); }
  .content { padding-top: 28px; padding-bottom: 28px; }
  /* The artboard's cluster: three splats spread over about 136 x 56, starting just past the headline. */
  .hero-title { gap: 24px; }
  .hero .stickers { position: relative; right: auto; bottom: auto; }
  .stickers { width: 140px; height: 56px; }
  .sticker-1 { left: 0; top: 0; width: 34px; height: 34px; }
  .sticker-2 { left: 42px; top: 34px; width: 22px; height: 22px; }
  .sticker-3 { display: block; left: 110px; top: 8px; width: 26px; height: 26px; }
  .hero { flex-wrap: wrap; gap: 16px 32px; }
  .hero-text { gap: 6px; }
  .hero h1 { font: var(--st-h1-desktop); letter-spacing: -0.02em; }
  .dateline { font-size: 12px; letter-spacing: 0.06em; }
  .tide { gap: 14px; padding: 10px 14px; }
  .tide-staff { width: 30px; height: 124px; }
  .tide-readings { gap: 3px; font-size: 11px; line-height: 14px; }
  .tide-now { font-size: 20px; line-height: 24px; }
  .tide-hilo span, .tide-hilo .sep { display: inline; }
  .filters { grid-template-areas: "select more" "tiles links"; gap: var(--gap) 12px; align-items: center; }
  .select { width: 220px; }
  .select select { height: 40px; }
  .select svg { top: 16px; }
  .more { justify-self: start; gap: 12px; margin-bottom: 0; }
  .more .select { flex: 0 0 220px; }
  .links { justify-self: end; }
  .btn { padding: 0 14px; }
  .tiles { display: flex; flex-wrap: wrap; gap: 6px; }
  .tile { width: var(--st-tile-size-desktop); height: var(--st-tile-size-desktop); gap: 3px; }
  .tile svg { width: 30px; height: 30px; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
  .card-title { padding: 10px 12px; font: var(--st-card-title-desktop); min-height: 40px; }
  .card-art { height: var(--st-card-image-desktop); }
  .card-badge {
    display: block; position: absolute; top: 8px; left: 8px; z-index: 1;
    background: var(--st-paper); color: var(--st-ink);
    font: 400 10px/1.2 var(--st-font-mono); letter-spacing: 0.06em; text-transform: uppercase;
    padding: 3px 8px; border: 1.5px solid var(--st-ink);
  }
  .card-strip { flex-basis: 34px; font-size: 10px; letter-spacing: 0.1em; }
  .card-when { padding: 8px 12px; font: var(--st-meta-desktop); }
  .card-where { padding: 8px 12px 2px; font: var(--st-meta-desktop); }
  .card-prov { padding: 2px 12px 10px; font-size: 9px; }
  .week { gap: 14px; }
  .week h2 { font-size: 12px; }
  .week-grid { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: var(--st-week-gap); }
  .week-card { min-height: var(--st-week-card-min-h); }
  .wk-date { flex-basis: var(--st-week-date-w); padding: 8px 6px; }
  .wk-day { font-size: 15px; }
  .wk-time { font-size: 11px; }
  .wk-body { padding: 12px 14px; gap: 5px; }
  .wk-title { font-size: 15px; }
  .wk-place { font-size: 11px; }
  .wk-chips { gap: 6px; margin-top: 3px; }
  .wk-chip { font-size: 10px; padding: 3px 8px; }
  .wk-band { flex-basis: var(--st-week-band-w); font-size: 10px; }
  .week-more { font-size: 12px; margin-top: 4px; }
  /* The desktop placement of the call to action is an open item in DESIGN.md; this is the artboard's. */
  .cta { align-self: flex-start; height: 39px; padding: 0 18px; border: 2px solid var(--st-ink); background: var(--st-coral); }
  .footer {
    flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 8px 40px;
    border-top: var(--st-border-rule) solid var(--st-rule); background: var(--st-paper);
    padding: 14px var(--content-pad) 18px;
    font: var(--st-meta-desktop); line-height: 1.7;
  }
  .footer .towns { display: inline; }
  .footer .lead { max-width: 70ch; }
  .placeholder h1 { font: var(--st-h1-desktop); letter-spacing: -0.02em; }
  .placeholder p { font: var(--st-meta-desktop); line-height: 1.6; }
}

/* Short tab labels until the long ones fit on one tabs row. */
@media (min-width: 700px) and (max-width: 819px) {
  .tab .long { display: none; }
  .tab .short { display: inline; }
}

/* Wide desktop: the artboard's 81 px header with the tabs beside the wordmark. */
@media (min-width: 960px) {
  .head {
    flex-direction: row; align-items: stretch;
    height: var(--st-header-height-desktop);
    padding-left: calc(var(--margin-inset) - var(--st-border-frame));
    border-bottom: var(--st-border-rule) solid var(--st-rule);
  }
  .head::after { display: none; }
  .brandbar { padding: 0; border: 0; }
  .tabs { flex: 1 1 auto; flex-wrap: nowrap; padding: 14px 20px 0 24px; }
}

/* Add your event: the page and the pop-up share one form. Same vocabulary as the controls:
   1 px ink outlines, mono labels, yellow submit, nothing rounded. */
.add-intro { font: 400 11px/14px var(--st-font-mono); max-width: 60ch; }
.add h1 { font: var(--st-h1-phone); letter-spacing: -0.02em; }
.add .back { font: 400 11px/28px var(--st-font-mono); text-decoration: underline; }
.add-form { display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 140px; }
.field label, .check { font: 400 10px/14px var(--st-font-mono); letter-spacing: var(--st-letterspacing-caps); text-transform: uppercase; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 40px; padding: 8px 10px;
  border: var(--st-border-control) solid var(--st-ink); border-radius: 0;
  background: var(--st-paper); color: var(--st-ink); font: 400 13px/1.3 var(--st-font-mono);
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .rev-btn:focus, .submit:focus { outline: 2px solid var(--st-coral); outline-offset: 1px; }
.field-row { display: flex; gap: 10px; flex-wrap: wrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.check { display: flex; gap: 8px; align-items: flex-start; text-transform: none; letter-spacing: 0; font-size: 11px; cursor: pointer; }
.check input { margin: 1px 0 0; }
.form-note { font: 400 10px/14px var(--st-font-mono); opacity: 0.75; }
.form-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.submit {
  height: 44px; padding: 0 18px; border: 2px solid var(--st-ink); border-radius: 0;
  background: var(--st-yellow); color: var(--st-ink); font: 700 14px/1 var(--st-font-sans);
}
.submit:disabled { opacity: 0.4; cursor: default; }
.form-status { font: 400 11px/14px var(--st-font-mono); }
.form-status.is-bad { color: var(--st-coral); }
.add-dialog {
  width: min(600px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
  padding: 20px; margin: auto;
  border: 2px solid var(--st-ink); border-radius: 0; background: var(--st-paper); color: var(--st-ink);
}
.add-dialog::backdrop { background: rgba(26, 26, 26, 0.45); }
.add-dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.add-dialog h2 { font: 900 22px/1 var(--st-font-sans); letter-spacing: -0.02em; }
.add-dialog .add-intro { margin-bottom: 14px; }
.dialog-close {
  width: 36px; height: 36px; border: 1px solid var(--st-ink); border-radius: 0; background: var(--st-paper);
  font: 400 20px/1 var(--st-font-mono);
}
.dialog-close:hover { background: var(--st-yellow); }

/* Calendar: a month at a time. Phone: a list of days, each a card in the week card's
   vocabulary (yellow date cell, list beside it), empty days left out. Desktop: the Sunday-first
   grid, 1 px ink rules, three events per cell before "+N more". */
.cal h1 { font: var(--st-h1-phone); letter-spacing: -0.02em; }
.cal .back { font: 400 11px/28px var(--st-font-mono); text-decoration: underline; }
.cal-nav { display: flex; justify-content: space-between; gap: 8px; font: var(--st-control); }
.cal-nav .btn.is-off { opacity: 0.35; }
.cal-head { display: none; }
.cal-grid { display: flex; flex-direction: column; gap: 10px; }
.cal-day { display: flex; border: var(--st-border-card) solid var(--st-ink); background: var(--st-paper); min-height: 56px; }
.cal-day[data-outside], .cal-day[data-empty], .cal-day[data-hidden] { display: none; }
.cal-num {
  flex: 0 0 var(--st-week-date-w-phone); background: var(--st-yellow);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font: 700 15px/1 var(--st-font-sans); padding: 6px 4px; text-align: center;
}
.cal-dow { font: 400 10px/1.2 var(--st-font-mono); letter-spacing: var(--st-letterspacing-caps); }
.cal-day[data-past] .cal-num { background: var(--st-paper); border-right: 1px solid var(--st-ink); }
.cal-list { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 6px 0; }
.cal-ev {
  display: grid; grid-template-columns: 8px 44px minmax(0, 1fr); grid-template-areas: "sw time title" "sw time where";
  column-gap: 6px; align-items: baseline; padding: 4px 10px; color: var(--st-ink);
}
.cal-ev:hover { color: var(--st-ink); }
.cal-ev:hover .cal-title { color: var(--st-coral); }
.cal-sw { grid-area: sw; width: 8px; height: 8px; align-self: center; border: 1px solid var(--st-ink); background: var(--cat); }
.cal-time { grid-area: time; font: 400 10px/1.3 var(--st-font-mono); white-space: nowrap; }
.cal-title { grid-area: title; font: 700 12px/1.3 var(--st-font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-where { grid-area: where; font: 400 9px/1.3 var(--st-font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.8; }
.cal-more {
  align-self: flex-start; margin: 2px 10px 4px; padding: 2px 6px;
  border: 1px solid var(--st-ink); border-radius: 0; background: var(--st-paper); color: var(--st-ink);
  font: 400 9px/1.2 var(--st-font-mono); letter-spacing: var(--st-letterspacing-caps); text-transform: uppercase;
}
.cal-more:hover { background: var(--st-yellow); }

/* Admin page: the sign-in strip, four tabs, the review queue, the source tables, the run
   tiles and the approvers list. Same vocabulary as the controls: 1 px ink, mono labels. */
.admin h1 { font: var(--st-h1-phone); letter-spacing: -0.02em; }
.admin .back { font: 400 11px/28px var(--st-font-mono); text-decoration: underline; }
.gate { border: 2px solid var(--st-ink); background: var(--st-paper); padding: 10px 12px; display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; justify-content: space-between; }
.gate .who { font: 400 11px/16px var(--st-font-mono); }
.gate .who b { font-weight: 500; }
.gate .who a { text-decoration: underline; }
.gate .setup { border: 0; padding: 0; flex: 1 1 100%; }
.adm-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 2px solid var(--st-ink); }
.adm-tab { padding: 8px 12px; border: 1px solid var(--st-ink); border-bottom: 0; background: var(--st-paper); color: var(--st-ink); font: 700 12px/1 var(--st-font-sans); }
.adm-tab[aria-current] { background: var(--st-yellow); }
.adm-tab:hover { color: var(--st-ink); }
.adm-tab .n { font: 400 10px/1 var(--st-font-mono); margin-left: 6px; padding: 1px 5px; border: 1px solid var(--st-ink); }
.adm-section { display: flex; flex-direction: column; gap: 10px; }
.adm-section h2 { font: var(--st-section-heading); letter-spacing: var(--st-letterspacing-heading); text-transform: uppercase; height: var(--unit); border-bottom: 2px solid var(--st-ink); display: flex; justify-content: space-between; gap: 12px; }
.adm-section h2 span:last-child { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.adm-filters .select { flex: 1 1 150px; max-width: 220px; }
.adm-filters .select select { height: 36px; }
.adm-filters .select svg { top: 14px; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.stat { border: 1px solid var(--st-ink); background: var(--st-paper); padding: 8px 10px; }
.stat b { display: block; font: 900 22px/1 var(--st-font-sans); }
.stat span { font: 400 9px/12px var(--st-font-mono); letter-spacing: var(--st-letterspacing-caps); text-transform: uppercase; }
.stat.bad { background: color-mix(in srgb, var(--st-coral) 30%, var(--st-paper)); }
.stat.ok { background: color-mix(in srgb, var(--st-green) 30%, var(--st-paper)); }
.tbl { width: 100%; border-collapse: collapse; font: 400 11px/1.3 var(--st-font-mono); background: var(--st-paper); border: 1px solid var(--st-ink); }
.tbl th { text-align: left; font: 500 9px/12px var(--st-font-mono); letter-spacing: var(--st-letterspacing-caps); text-transform: uppercase; padding: 6px 8px; border-bottom: 2px solid var(--st-ink); background: var(--st-yellow); }
.tbl td { padding: 6px 8px; border-bottom: 1px solid var(--st-grid); vertical-align: top; }
.tbl td.t { font: 700 12px/1.3 var(--st-font-sans); }
.tbl td.note { max-width: 36ch; }
.tbl .sub { display: block; font: 400 9px/1.3 var(--st-font-mono); opacity: 0.7; }
.tbl select, .tbl input { height: 28px; width: 100%; min-width: 120px; border: 1px solid var(--st-ink); border-radius: 0; background: var(--st-paper); color: var(--st-ink); font: 400 10px/1 var(--st-font-mono); padding: 0 6px; }
.tbl tr[hidden] { display: none; }
.tag { display: inline-block; padding: 1px 6px; border: 1px solid var(--st-ink); font: 400 9px/14px var(--st-font-mono); letter-spacing: var(--st-letterspacing-caps); text-transform: uppercase; }
.tag.src { background: var(--st-blue); } .tag.sub { background: var(--st-coral); } .tag.ok { background: var(--st-green); } .tag.warn { background: var(--st-yellow); } .tag.off { opacity: 0.5; }
a.rev-btn { display: inline-flex; align-items: center; text-decoration: none; }
.rev-bar .form-note { flex: 1 1 100%; }
@media (max-width: 699px) {
  .tbl { display: block; overflow-x: auto; }
}
.setup { border: 1px solid var(--st-ink); padding: 10px 12px; max-width: 560px; display: flex; flex-direction: column; gap: 10px; }
.setup summary { font: 500 11px/28px var(--st-font-mono); letter-spacing: var(--st-letterspacing-caps); text-transform: uppercase; cursor: pointer; }
.rev-list { display: flex; flex-direction: column; gap: 10px; }
.rev {
  display: flex; gap: 12px; justify-content: space-between; align-items: stretch;
  border: 1px solid var(--st-ink); background: var(--st-paper); padding: 10px 12px;
}
.rev[data-decision="approved"] { background: color-mix(in srgb, var(--st-green) 35%, var(--st-paper)); }
.rev[data-decision="rejected"] { background: color-mix(in srgb, var(--st-coral) 30%, var(--st-paper)); }
.rev[data-saved] { display: none; }
.rev-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rev-top { display: flex; align-items: center; gap: 8px; font: 400 9px/14px var(--st-font-mono); letter-spacing: var(--st-letterspacing-caps); text-transform: uppercase; }
.rev-swatch { width: 12px; height: 12px; border: 1.5px solid var(--st-ink); background: var(--cat); }
.rev-soon { background: var(--st-yellow); padding: 0 6px; border: 1px solid var(--st-ink); }
.rev-title { font: 700 15px/1.25 var(--st-font-sans); }
.rev-meta, .rev-source { font: 400 11px/16px var(--st-font-mono); }
.rev-summary { font: 400 11px/15px var(--st-font-mono); opacity: 0.85; margin: 4px 0; max-width: 70ch; }
.rev-source { opacity: 0.8; }
.rev-source a { text-decoration: underline; }
.rev-source code { font-size: 10px; }
.rev-actions { display: flex; flex-direction: column; gap: 6px; justify-content: center; flex: 0 0 auto; }
.rev-btn {
  min-height: 36px; padding: 0 12px; border: 1px solid var(--st-ink); border-radius: 0;
  background: var(--st-paper); color: var(--st-ink); font: 400 11px/1 var(--st-font-mono); letter-spacing: var(--st-letterspacing-caps); text-transform: uppercase;
}
.rev-btn:hover { background: var(--st-yellow); }
.rev[data-decision="approved"] .rev-approve, .rev-approve[aria-pressed="true"] { background: var(--st-green); }
.rev[data-decision="rejected"] .rev-reject { background: var(--st-coral); }
.rev-bar {
  position: sticky; bottom: 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  border: 1px solid var(--st-ink); background: var(--st-paper); padding: 10px 12px;
}
.rev-count { font: 500 11px/1 var(--st-font-mono); letter-spacing: var(--st-letterspacing-caps); text-transform: uppercase; }

@media (min-width: 700px) {
  .add h1, .admin h1, .cal h1 { font: var(--st-h1-desktop); letter-spacing: -0.02em; }
  .adm-tab { padding: 10px 16px; font-size: 14px; }
  .add-intro { font: var(--st-meta-desktop); line-height: 1.6; }
  .add-dialog { padding: 28px; }
  /* Calendar grid */
  .cal-head {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    font: var(--st-section-heading); letter-spacing: var(--st-letterspacing-heading); text-transform: uppercase;
    border-bottom: 2px solid var(--st-ink); height: var(--unit); margin-bottom: -1px;
  }
  .cal-head span { padding-left: 6px; }
  .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; border: 1px solid var(--st-ink); border-top: 0; }
  .cal-day { display: flex; flex-direction: column; min-height: 124px; border: 0; border-right: 1px solid var(--st-ink); border-bottom: 1px solid var(--st-ink); background: transparent; }
  .cal-day:nth-child(7n) { border-right: 0; }
  .cal-day:nth-last-child(-n+7) { border-bottom: 0; }
  .cal-day[data-outside], .cal-day[data-empty] { display: flex; }
  .cal-day[data-hidden] { display: flex; }
  .cal-day[data-outside] { background-image: repeating-linear-gradient(135deg, transparent 0 6px, var(--st-grid) 6px 7px); }
  .cal-day[data-outside] .cal-num, .cal-day[data-outside] .cal-list { visibility: hidden; }
  .cal-num {
    flex: 0 0 auto; align-self: flex-start; background: transparent; padding: 4px 6px;
    font: 500 11px/1 var(--st-font-mono); flex-direction: row; gap: 0;
  }
  .cal-dow { display: none; }
  .cal-day[data-past] .cal-num { border: 0; opacity: 0.45; }
  .cal-day[data-today] .cal-num { background: var(--st-yellow); opacity: 1; }
  .cal-list { padding: 0 0 4px; }
  .cal-ev { grid-template-columns: 8px minmax(0, 1fr); grid-template-areas: "sw time" "sw title"; row-gap: 0; padding: 3px 6px; }
  .cal-where { display: none; }
  .cal-time { font-size: 9px; }
  .cal-title { font-size: 11px; }
  .cal-more { margin: 0 6px 6px; }
}