/* HagiLunch – app styles. Built only from the gen live design tokens (design/tokens.css); do not hard-code
   colours, type sizes or spacing here. Mobile first, 0 radius, no shadows, structure from 1px hairlines. */

:root {
  --page-narrow: 760px;
  --page-wide: 1040px;
  --gutter: var(--sp-4);
  --logo-h: 28px;
  --control-h: 44px;
}
@media (min-width: 768px) {
  :root {
    --gutter: var(--page-gutter);
    --logo-h: 34px;
  }
}

body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }

/* ---- header ---------------------------------------------------------------------------------- */
.ui-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(0, 0, 0, .82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: var(--hairline) solid var(--gl-snow-200);
}
.ui-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) var(--gutter);
}
.ui-header__logo { display: block; line-height: 0; }
.ui-header__logo img { height: var(--logo-h); width: auto; }
.ui-nav { display: flex; align-items: center; gap: var(--sp-6); }
.ui-nav a, .ui-nav button {
  font-family: var(--font-condensed); font-weight: var(--fw-label); font-size: var(--fs-label-lg);
  letter-spacing: var(--ls-label); text-transform: uppercase; line-height: var(--lh-label);
  color: var(--gl-white); background: none; border: 0; padding: var(--sp-2) 0; cursor: pointer;
  transition: var(--transition-hover);
}
.ui-nav a:hover, .ui-nav button:hover, .ui-nav a[aria-current="page"] { color: var(--gl-red); }
.ui-nav form { margin: 0; }

/* ---- page frame ---------------------------------------------------------------------------------- */
.page { width: 100%; max-width: var(--page-narrow); margin: 0 auto; padding: var(--sp-10) var(--gutter) var(--sp-16); }
.page--wide { max-width: var(--page-wide); }
.page__head { margin-bottom: var(--sp-8); }
.page__head h1 { margin-top: var(--sp-3); }
.page__head--mark { position: relative; }
.page__mark { position: absolute; top: 0; right: 0; width: var(--sp-12); height: var(--sp-12); border-radius: var(--radius-0); }
.page__lede { max-width: 46ch; margin: var(--sp-4) 0 0; font-size: var(--fs-body-sm); color: var(--text-secondary); }
h1 { font-size: var(--fs-display-2); }
@media (min-width: 768px) { h1 { font-size: var(--fs-display-1); } }
.stack > * + * { margin-top: var(--sp-6); }
.stack--lg > * + * { margin-top: var(--sp-10); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.row--between { justify-content: space-between; }
.muted { color: var(--text-muted); }
.small { font-size: var(--fs-body-xs); color: var(--text-secondary); }

.ui-footer {
  flex-shrink: 0; padding: var(--sp-6) var(--gutter); border-top: var(--hairline) solid var(--border-hairline);
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); justify-content: space-between;
}

/* ---- labels, rec dot, status --------------------------------------------------------------------- */
.ui-label { display: inline-flex; align-items: center; gap: var(--sp-2); }
.ui-label--md { font-size: var(--fs-label-md); }
.ui-rec { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--gl-red); flex: 0 0 auto; }
.ui-status { display: flex; flex-direction: column; gap: var(--sp-1); }
.ui-status__detail { font-size: var(--fs-body-xs); color: var(--text-secondary); text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: var(--fw-body); }
@media (min-width: 640px) { .ui-status { align-items: flex-end; text-align: right; } }

/* ---- links ----------------------------------------------------------------------------------------- */
.ui-link {
  font-family: var(--font-condensed); font-weight: var(--fw-label); font-size: var(--fs-label-md);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-primary);
}
.ui-link:hover { color: var(--gl-red); }
.ui-text-link { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: var(--hairline); }

/* ---- buttons ----------------------------------------------------------------------------------------- */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-condensed); font-weight: var(--fw-label); text-transform: uppercase;
  letter-spacing: var(--ls-label); line-height: 1; border-radius: var(--radius-0);
  border: var(--hairline) solid transparent; cursor: pointer; text-decoration: none;
  transition: var(--transition-hover);
}
.ui-btn:active { transform: translateY(var(--press-shift)); }
.ui-btn--sm { min-height: 30px; padding: 0 var(--sp-4); font-size: var(--fs-label-sm); }
.ui-btn--md { min-height: var(--control-h); padding: 0 var(--sp-5); font-size: var(--fs-label-md); }
.ui-btn--lg { min-height: 48px; padding: 0 var(--sp-8); font-size: var(--fs-label-lg); }
.ui-btn--primary { background: var(--gl-red); color: var(--gl-white); }
.ui-btn--primary:hover { background: var(--gl-red-hover); color: var(--gl-white); }
.ui-btn--primary:active { background: var(--gl-red-press); }
.ui-btn--secondary { background: transparent; color: var(--text-primary); border-color: var(--text-primary); }
.ui-btn--secondary:hover { background: var(--text-primary); color: var(--surface-card); }
.ui-btn--ghost { background: transparent; color: var(--text-primary); padding: 0; min-height: 0; }
.ui-btn--ghost:hover { color: var(--gl-red); }
.ui-btn[disabled] { opacity: .38; cursor: not-allowed; }
.ui-btn__arrow { font-family: var(--font-body); font-weight: var(--fw-body-strong); }

/* ---- card, rule, tape -------------------------------------------------------------------------------- */
.ui-card {
  background: var(--surface-card); border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius-0); padding: var(--sp-5);
}
.ui-card--accent { border-top: var(--border-thick) solid var(--border-accent); }
.ui-card--invert { background: var(--gl-black); border-color: var(--gl-black); color: var(--gl-white); }
.ui-card--invert .gl-label { color: var(--gl-snow-500); }
.ui-card__eyebrow { margin-bottom: var(--sp-3); }
.ui-card__title { font-size: var(--fs-display-4); line-height: var(--lh-tight); margin-bottom: var(--sp-2); }
.ui-card__head {
  display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-5);
}
@media (min-width: 640px) { .ui-card__head { flex-direction: row; justify-content: space-between; align-items: flex-start; } }
.ui-card__head a { color: inherit; }
.ui-card__head a:hover { color: var(--gl-red); }
.ui-card > .gl-rule { margin: var(--sp-5) 0; }

.ui-tape { display: inline-block; padding: var(--sp-2) var(--sp-5) var(--sp-2) var(--sp-4); font-family: var(--font-condensed);
  font-weight: var(--fw-label-strong); font-size: var(--fs-label-md); letter-spacing: var(--ls-label); text-transform: uppercase; line-height: 1.1; }
.ui-tape--black { background: var(--gl-black); color: var(--gl-white); }
.ui-tape--red { background: var(--gl-red); color: var(--gl-white); }

/* ---- menu rows (SpecRow) --------------------------------------------------------------------------------- */
.ui-menu + .ui-menu { margin-top: var(--sp-8); }
.ui-menu__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-2); }
.ui-menu__notice { margin: var(--sp-3) 0; }
.ui-menu__sub { padding: var(--sp-4) 0 var(--sp-1); }
.ui-menu__error { padding: var(--sp-3) 0; }
.ui-row {
  display: grid; grid-template-columns: var(--sp-12) 1fr auto; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-bottom: var(--hairline) solid var(--border-hairline);
}
.ui-row:last-child { border-bottom: 0; }
.ui-row--accent { background: var(--gl-red-12); }
.ui-row__index {
  font-family: var(--font-condensed); font-weight: var(--fw-label); font-size: var(--fs-label-md);
  letter-spacing: var(--ls-label-tight); text-transform: uppercase; color: var(--text-muted);
}
.ui-row__title { font-size: var(--fs-body); line-height: var(--lh-tight); }
.ui-row__desc { margin: var(--sp-1) 0 0; font-size: var(--fs-body-xs); color: var(--text-secondary); }
.ui-row__meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin-top: var(--sp-1); }
.ui-row__value {
  text-align: right; white-space: nowrap; font-family: var(--font-condensed); font-weight: var(--fw-label-strong);
  font-size: var(--fs-label-lg); letter-spacing: var(--ls-label); text-transform: uppercase;
}
.ui-row--hit { grid-template-columns: 1fr auto; }

/* ---- tabs (months, admin sections) ---------------------------------------------------------------------- */
.ui-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ui-tab {
  font-family: var(--font-condensed); font-weight: var(--fw-label); font-size: var(--fs-label-md); letter-spacing: var(--ls-label);
  text-transform: uppercase; padding: var(--sp-2) var(--sp-4); min-height: 36px; display: inline-flex; align-items: center;
  border: var(--hairline) solid var(--border-hairline); color: var(--text-secondary); background: transparent;
}
.ui-tab:hover { border-color: var(--text-primary); color: var(--text-primary); }
.ui-tab[aria-current="page"] { background: var(--text-primary); border-color: var(--text-primary); color: var(--surface-card); }

/* ---- forms -------------------------------------------------------------------------------------------------- */
.ui-form-section { padding-top: var(--sp-8); border-top: var(--rule-strong) solid var(--border-strong); }
.ui-form-section > h2 { font-size: var(--fs-display-3); margin: var(--sp-3) 0 var(--sp-6); }
.ui-grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 640px) { .ui-grid--3 { grid-template-columns: repeat(3, 1fr); } .ui-grid--2 { grid-template-columns: repeat(2, 1fr); } }
.ui-field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.ui-field__hint { font-size: var(--fs-body-xs); color: var(--text-secondary); margin: 0; }
.ui-input, .ui-textarea {
  width: 100%; font: inherit; font-size: var(--fs-body); color: var(--text-primary); background: var(--surface-card);
  border: var(--hairline) solid var(--border-hairline); border-radius: var(--radius-0); padding: var(--sp-3);
  min-height: var(--control-h); transition: var(--transition-hover);
}
.ui-input:hover, .ui-textarea:hover { border-color: var(--border-strong); }
.ui-textarea { min-height: calc(var(--control-h) * 2); resize: vertical; line-height: var(--lh-body); }
.ui-checks { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); }
.ui-check { display: inline-flex; align-items: center; gap: var(--sp-3); min-height: var(--control-h); cursor: pointer; font-size: var(--fs-body-sm); }
.ui-check input {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 20px; height: 20px; margin: 0; cursor: pointer;
  background: var(--surface-card); border: var(--hairline) solid var(--border-strong); border-radius: var(--radius-0);
  transition: var(--transition-hover);
}
.ui-check input:checked { background: var(--text-primary); }
.ui-check input:checked:hover { background: var(--gl-red); border-color: var(--gl-red); }
.ui-notice { border: var(--hairline) solid var(--border-hairline); border-left: var(--border-thick) solid var(--border-strong); padding: var(--sp-4); background: var(--surface-card); }
.ui-notice--error { border-left-color: var(--gl-red); }
.ui-notice p { margin: 0; font-size: var(--fs-body-sm); }
.ui-notice ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); font-size: var(--fs-body-sm); }
.ui-notice .gl-label { display: block; margin-bottom: var(--sp-2); }
.ui-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.ui-actions form { margin: 0; }
.ui-inline-form { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; align-items: end; }
@media (min-width: 640px) { .ui-inline-form { grid-template-columns: 1fr 1fr 2fr auto; } }

/* ---- key figures (admin status) ----------------------------------------------------------------------------- */
.ui-meta { display: grid; gap: var(--sp-5); grid-template-columns: 1fr 1fr; }
@media (min-width: 768px) { .ui-meta { grid-template-columns: repeat(4, 1fr); } }
.ui-meta__label { display: block; margin-bottom: var(--sp-2); }
.ui-meta__value { font-family: var(--font-display); font-size: var(--fs-display-4); line-height: var(--lh-tight); text-transform: lowercase; }

/* ---- tables (run log): hairline rows only --------------------------------------------------------------------- */
.ui-table-wrap { overflow-x: auto; }
.ui-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body-sm); }
.ui-table th {
  text-align: left; font-family: var(--font-condensed); font-weight: var(--fw-label); font-size: var(--fs-label-md);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted);
  padding: var(--sp-2) var(--sp-4) var(--sp-2) 0; border-bottom: var(--rule-strong) solid var(--border-strong); white-space: nowrap;
}
.ui-table td { padding: var(--sp-3) var(--sp-4) var(--sp-3) 0; border-bottom: var(--hairline) solid var(--border-hairline); vertical-align: top; }
.ui-table td.num { text-align: right; }
.ui-table .err { color: var(--text-accent); }
.ui-table .nowrap { white-space: nowrap; }
.ui-table .wrap { min-width: 16ch; max-width: 48ch; overflow-wrap: anywhere; }

/* ---- Slack preview ----------------------------------------------------------------------------------------------- */
.ui-slack { background: var(--surface-card); border: var(--hairline) solid var(--border-hairline); border-left: var(--border-thick) solid var(--border-strong); padding: var(--sp-5); font-size: var(--fs-body-sm); }
.ui-slack__header { font-weight: var(--fw-body-strong); font-size: var(--fs-body-lg); margin: 0 0 var(--sp-3); }
.ui-slack__block { margin: 0; line-height: var(--lh-body); overflow-wrap: anywhere; }
.ui-slack__block a { text-decoration: underline; text-underline-offset: 3px; }
.ui-slack__block--context { color: var(--text-secondary); font-size: var(--fs-body-xs); }
.ui-slack .gl-rule { margin: var(--sp-3) 0; }

.ui-empty { padding: var(--sp-10) 0; text-align: left; }
.ui-search { display: flex; gap: var(--sp-3); }
.ui-search .ui-input { flex: 1; }