/* Hallmark · v2.0.0 · theme: wayfind (dealt 2/3, seed live-sheet-style-ops-table-943e) · wayfind: platform, night in dark mode · shape: app screen · genre: modern-minimal · signature: the board of what posts where and when */
/* critique: a departure board for reminders: ids down the left edge, next fire in cobalt, a gone channel is the late row in amber. waive 64: mono is the theme's material. */
:root {
  --color-paper: oklch(95.5% 0.006 250); --color-paper-2: oklch(91% 0.009 250); --color-paper-3: oklch(99.5% 0.005 250);
  --color-ink: oklch(16% 0.014 262); --color-ink-2: oklch(29% 0.014 262); --color-muted: oklch(47% 0.016 260);
  --color-rule: oklch(80% 0.011 250);
  --color-accent: oklch(45% 0.22 264); --color-accent-2: oklch(81% 0.16 82); --color-accent-ink: oklch(99.5% 0.003 250); --color-focus: oklch(45% 0.22 264);
  --color-on-amber: oklch(16% 0.014 262);
  --line-0: oklch(58% 0.19 25); --line-1: oklch(66% 0.16 55); --line-2: oklch(60% 0.15 140); --line-3: oklch(60% 0.11 190);
  --line-4: oklch(55% 0.15 235); --line-5: oklch(52% 0.18 300); --line-6: oklch(60% 0.18 345); --line-7: oklch(62% 0.13 100);
  --font-body: "Chivo Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --rule-hair: 1px; --rule-bar: 2px;
  --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-md: 0.875rem; --text-lg: 1.125rem;
  --space-2xs: 0.125rem; --space-xs: 0.375rem; --space-sm: 0.5rem; --space-md: 0.75rem; --space-lg: 1rem; --space-xl: 1.5rem;
  --dur-micro: 120ms;
  --wrap: 90rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-paper: oklch(15% 0.012 262); --color-paper-2: oklch(20% 0.013 262); --color-paper-3: oklch(18% 0.012 262);
    --color-ink: oklch(96% 0.005 250); --color-ink-2: oklch(85% 0.008 250); --color-muted: oklch(72% 0.012 255);
    --color-rule: oklch(31% 0.014 262);
    --color-accent: oklch(72% 0.15 264); --color-focus: oklch(72% 0.15 264); --color-accent-ink: oklch(15% 0.012 262);
    color-scheme: dark;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper-2); caret-color: var(--color-accent); }
::selection { background: var(--color-accent-2); color: var(--color-on-amber); }
body {
  margin: 0; background: var(--color-paper); color: var(--color-ink);
  font: 400 var(--text-md)/1.55 var(--font-body); font-variant-numeric: tabular-nums;
}
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--space-md); }
.bar { border-bottom: var(--rule-bar) solid var(--color-ink); background: var(--color-paper-3); }
.bar__inner { display: flex; align-items: center; gap: var(--space-md); min-height: 3.5rem; flex-wrap: wrap; padding-block: var(--space-xs); }
.mark { margin: 0; font-size: var(--text-lg); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.stamp { margin: 0; flex: 1 1 12rem; min-width: 0; color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: 0 var(--space-md);
  border: var(--rule-bar) solid var(--color-accent); border-radius: 0; background: var(--color-accent); color: var(--color-accent-ink);
  font: 800 var(--text-sm)/1 var(--font-body); cursor: pointer;
  transition: background-color var(--dur-micro) steps(1), color var(--dur-micro) steps(1);
}
.btn:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.btn:active { transform: translateY(1px); }
.btn:disabled { background: var(--color-paper-2); border-color: var(--color-muted); color: var(--color-muted); cursor: progress; }
.btn--quiet { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
:focus-visible { outline: var(--rule-bar) solid var(--color-focus); outline-offset: 2px; transition: none; }
.tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 45%), 1fr)); margin: var(--space-lg) var(--rule-bar) var(--space-md) 0; }
.tab {
  display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 2.25rem; padding: 0 var(--space-md);
  border: var(--rule-bar) solid var(--color-ink); margin: 0 calc(-1 * var(--rule-bar)) calc(-1 * var(--rule-bar)) 0; justify-content: center;
  color: var(--color-ink); text-decoration: none; font-weight: 500; white-space: nowrap;
  transition: background-color var(--dur-micro) steps(1), color var(--dur-micro) steps(1);
}
.tab:hover { background: var(--color-paper-2); }
.tab[aria-current="page"] { background: var(--color-ink); color: var(--color-paper); }
.count { font-weight: 800; }
.tools { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.search { display: grid; gap: var(--space-2xs); flex: 1 1 16rem; font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
input {
  width: 100%; min-height: 2.5rem; padding: 0 var(--space-sm); border: var(--rule-bar) solid var(--color-ink); border-radius: 0;
  background: var(--color-paper-3); color: var(--color-ink); font: 400 var(--text-md) var(--font-body);
}
input::placeholder { color: var(--color-muted); }
.note { min-height: 1.55em; margin: 0 0 var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.note[data-kind="error"] { background: var(--color-accent-2); padding: var(--space-xs) var(--space-sm); color: var(--color-on-amber); }
.frame { overflow: auto; max-height: calc(100vh - 11rem); min-height: 12rem; border: var(--rule-bar) solid var(--color-ink); background: var(--color-paper-3); }
table { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: var(--text-sm); }
th, td { padding: var(--space-2xs) var(--space-sm); text-align: left; vertical-align: top; border-bottom: var(--rule-hair) solid var(--color-rule); }
td { max-width: 24rem; overflow-wrap: anywhere; white-space: pre-wrap; }
td.num, td.date { white-space: nowrap; }
thead th { position: sticky; z-index: 2; background: var(--color-paper-2); font-weight: 500; color: var(--color-ink); white-space: nowrap; }
thead tr.heads th { top: 0; border-bottom: var(--rule-bar) solid var(--color-ink); }
thead tr.filters th { top: var(--head-h, 2.4rem); padding: var(--space-2xs) var(--space-xs); background: var(--color-paper-2); }
thead tr.filters input { min-height: 1.75rem; min-width: 6rem; font-size: var(--text-sm); border-width: var(--rule-hair); }
th:first-child, td:first-child { position: sticky; left: 0; z-index: 1; max-width: min(16rem, 40vw); min-width: 7rem; background: var(--color-paper-3); border-right: var(--rule-bar) solid var(--color-ink); font-weight: 500; }
thead th:first-child { z-index: 3; background: var(--color-paper-2); }
.sort {
  all: unset; display: inline-flex; gap: var(--space-2xs); cursor: pointer; min-height: 1.75rem; align-items: center;
}
.sort:hover { color: var(--color-accent); }
.sort:focus-visible { outline: var(--rule-bar) solid var(--color-focus); outline-offset: 2px; }
.sort[aria-sort="ascending"]::after { content: "\2191"; }
.sort[aria-sort="descending"]::after { content: "\2193"; }
.clip { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; min-width: 16rem; }
.clip.open { display: block; }
.clip:focus-visible { outline: var(--rule-bar) solid var(--color-focus); outline-offset: 2px; }
.live { color: var(--color-accent); font-weight: 500; }
.off { color: var(--color-muted); }
.state { display: inline-flex; align-items: center; gap: var(--space-xs); white-space: nowrap; }
.state::before { content: ""; width: 0.75rem; height: 0.75rem; border: var(--rule-bar) solid var(--color-ink); background: transparent; flex: none; }
.state[data-ok="yes"]::before { background: var(--color-accent); border-color: var(--color-accent); }
.state[data-ok="no"] { background: var(--color-accent-2); color: var(--color-on-amber); padding: 0 var(--space-2xs); }
.state[data-ok="no"]::before { background: var(--color-on-amber); border-color: var(--color-on-amber); }
a { color: var(--color-ink); text-underline-offset: 0.2em; }
a:hover { color: var(--color-accent); }
.skeleton td { color: transparent; }
.skeleton td::after { content: ""; display: block; height: 0.9em; background: var(--color-paper-2); }
.line { display: inline-block; width: 0.75rem; height: 0.75rem; flex: none; background: var(--line, var(--color-muted)); }
.line-0 { --line: var(--line-0); } .line-1 { --line: var(--line-1); } .line-2 { --line: var(--line-2); } .line-3 { --line: var(--line-3); }
.line-4 { --line: var(--line-4); } .line-5 { --line: var(--line-5); } .line-6 { --line: var(--line-6); } .line-7 { --line: var(--line-7); }
tr.group td { background: var(--color-paper-2); border-top: var(--rule-bar) solid var(--color-ink); border-bottom: var(--rule-hair) solid var(--color-ink); padding-block: var(--space-xs); }
.group__label { display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: 800; white-space: nowrap; }
.group__count { font-weight: 400; color: var(--color-muted); }
td.soon { color: var(--color-accent); font-weight: 800; }
tr.is-off td { color: var(--color-muted); }
tr.row td:first-child { box-shadow: inset 0.3rem 0 0 var(--line); padding-left: calc(var(--space-sm) + 0.3rem); }
.btn--quiet[aria-pressed="true"] { background: var(--color-paper-2); }
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: "\25BE"; margin-left: var(--space-xs); }
.menu[open] > summary { background: var(--color-paper-2); }
.menu__list {
  position: absolute; z-index: 10; top: calc(100% + var(--space-2xs)); left: 0; min-width: 15rem; max-width: calc(100vw - 2rem);
  margin: 0; padding: var(--space-2xs) 0; list-style: none;
  background: var(--color-paper-3); border: var(--rule-bar) solid var(--color-ink);
}
.menu__list a { display: block; padding: var(--space-xs) var(--space-md); color: var(--color-ink); text-decoration: none; overflow-wrap: anywhere; }
.menu__list a:hover { background: var(--color-paper-2); color: var(--color-ink); }
.menu__list a[aria-current="page"] { font-weight: 800; box-shadow: inset 0.3rem 0 0 var(--color-accent); }
.menu__empty { padding: var(--space-xs) var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }
.mark { display: flex; align-items: center; }
.logo { display: block; height: 2rem; width: auto; }
@media (prefers-color-scheme: dark) { .logo { filter: brightness(0) invert(1); } }
.foot { margin-block: var(--space-lg) var(--space-xl); font-size: var(--text-sm); color: var(--color-muted); }
.foot code { overflow-wrap: anywhere; color: var(--color-ink); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } .btn:active { transform: none; } }