/* rink-manage's own bits on top of the house-ui kit. Keep this file small:
   anything a second app would want belongs in the kit. */

:root { --hue: 230; }

.rail .spacer { flex: 1; }
/* Readable measure on wide screens; the schedule pane will narrow main anyway. */
#content > * { max-width: 1040px; }
/* A view that is itself the schedule (the Schedule tab) floats the pane on
   every width: it slides over from its countdown button, as on a narrow
   window, and the view gets the room. Same rules as the kit's < 840px. */
@media (min-width: 840px) {
  .app.pane-float { grid-template-columns: var(--rail-w) minmax(0, 1fr); grid-template-areas: "rail main"; }
  .app.pane-float > .pane {
    position: fixed; inset: var(--sp-2) var(--sp-2) var(--sp-2) auto; z-index: 20;
    width: min(360px, calc(100vw - var(--sp-4))); margin: 0; box-shadow: var(--elev-3);
    translate: calc(100% + var(--sp-4)) 0; transition: translate var(--dur-medium) var(--ease-standard);
  }
  .app.pane-float.pane-open > .pane { translate: 0 0; }
  .app.pane-float.pane-open::after { content: ""; position: fixed; inset: 0; z-index: 19; background: var(--scrim); }
  .app.pane-float .cut-btn { display: inline-flex; }
}
/* A door with one page (the Rink door): no rail, no bottom bar, just the page. */
.app.solo { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: "main"; }
.app.solo > .rail, .app.solo > .navbar { display: none; }
/* A view's own control in the top bar (the Schedule tab's search). */
.appbar-slot { display: flex; flex: 0 1 440px; min-width: 0; }
.appbar-slot:empty { display: none; }
@media (max-width: 599px) {
  .appbar:has(.appbar-slot:not(:empty)) h1 { display: none; }
  .appbar-slot { flex: 1; }
}
/* Installed on a phone, the page runs under the status bar and the home
   indicator (viewport-fit=cover): the frame and a floating pane keep clear.
   In a browser tab these are all 0. */
.app { padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); }
@media (max-width: 839px) {
  .app > .pane { top: calc(var(--sp-2) + env(safe-area-inset-top)); bottom: calc(var(--sp-2) + env(safe-area-inset-bottom)); }
}
@media (min-width: 840px) {
  .app.pane-float > .pane { top: calc(var(--sp-2) + env(safe-area-inset-top)); bottom: calc(var(--sp-2) + env(safe-area-inset-bottom)); }
}

/* `hidden` must win over any display rule the kit sets (e.g. .pane-toggle). */
[hidden] { display: none !important; }

/* ── identity: person colours ── */
.me {
  display: inline-grid; place-items: center; width: 36px; height: 36px; margin: 0 var(--sp-2);
  border: 0; border-radius: var(--shape-full); cursor: pointer; font: 650 15px/1 var(--font);
  color: light-dark(oklch(0.32 0.09 var(--who-me, 230)), oklch(0.93 0.04 var(--who-me, 230)));
  background: light-dark(oklch(0.88 0.07 var(--who-me, 230)), oklch(0.42 0.09 var(--who-me, 230)));
  transition: border-radius var(--dur-medium) var(--ease-spring);
}
.me:active { border-radius: var(--shape-md); }
.me { position: relative; }
.me::before { content: ""; position: absolute; inset: -4px; }   /* 36 px avatar, 44 px to tap */
.me.big { width: 48px; height: 48px; font-size: 20px; cursor: default; }
.who {
  font: var(--label-m); padding: 1px 8px; border-radius: var(--shape-full);
  color: var(--on-surface-variant); background: var(--surface-container-highest);
}
.who[style*="--p-h"] {
  color: light-dark(oklch(0.34 0.09 var(--p-h)), oklch(0.92 0.04 var(--p-h)));
  background: light-dark(oklch(0.91 0.05 var(--p-h)), oklch(0.38 0.07 var(--p-h)));
}

/* ── expressive touches: brand mark, emphasized titles ── */
.brand {
  display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--sp-3);
  border-radius: var(--shape-lg); text-decoration: none;
  color: var(--on-primary-container); background: var(--primary-container);
  transition: border-radius var(--dur-medium) var(--ease-spring);
}
.brand:hover { border-radius: var(--shape-xl); }
.brand .icon { font-size: 30px; }
.appbar h1 { font: 650 26px/34px var(--font); letter-spacing: -0.015em; }
.section-title { font-weight: 650; }

/* ── density ── */
[data-density="compact"] .list-item { min-height: 44px; padding-block: 3px; gap: var(--sp-3); }
[data-density="compact"] .list-item .headline { font: var(--body-m); }
[data-density="compact"] .list.grouped { gap: 1px; }
[data-density="compact"] .main .content { padding-top: 0; }

/* ── settings sheet: a side panel on desktop, a bottom sheet on phones ── */
dialog.settings-sheet {
  margin: 72px 16px auto auto; width: min(440px, calc(100vw - 32px)); max-width: none;
  max-height: calc(100dvh - 96px); overflow: auto; padding: var(--sp-5);
}
dialog.settings-sheet[open] { animation: slide-in var(--dur-medium) var(--ease-decel); }
@keyframes slide-in { from { opacity: 0; translate: 16px 0; } }
.set-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.set-head > div { flex: 1; }
.set-head h2 { margin: 0; font: 650 22px/28px var(--font); }
.set-row { display: grid; gap: var(--sp-2); padding: var(--sp-3) 0; border-top: 1px solid var(--outline-variant); }
.set-label { font: var(--title-s); display: flex; align-items: baseline; gap: var(--sp-2); }
.set-label .hint { font: var(--body-s); color: var(--on-surface-variant); }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.swatch {
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0; cursor: pointer;
  border: 0; border-radius: var(--shape-full); color: white;
  background: light-dark(oklch(0.62 0.14 var(--sw-h)), oklch(0.70 0.12 var(--sw-h)));
  transition: border-radius var(--dur-medium) var(--ease-spring);
}
.swatch:hover { border-radius: var(--shape-sm); }
.swatch.on { outline: 2px solid var(--on-surface); outline-offset: 2px; }
.swatch .icon { font-size: 18px; }
.swatch.none { color: var(--on-surface-variant); background: var(--surface-container-highest); border: 1px dashed var(--outline); }
.dot-sw { flex: none; width: 14px; height: 14px; border-radius: 50%; background: light-dark(oklch(0.62 0.14 var(--sw-h)), oklch(0.70 0.12 var(--sw-h))); }
.dot-sw.none { background: var(--surface-container-highest); border: 1px dashed var(--outline); }
.set-link {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; margin-top: var(--sp-2);
  padding: var(--sp-3) var(--sp-2); border: 0; border-radius: var(--shape-md); background: none; cursor: pointer;
  font: var(--label-l); color: var(--on-surface); text-decoration: none; text-align: start;
}
.set-link:hover { background: var(--surface-container-highest); }
.set-link > span:not(.icon) { flex: 1; display: flex; align-items: baseline; gap: var(--sp-2); }
.set-link .hint { font: var(--body-s); color: var(--on-surface-variant); }
.set-search {
  width: 100%; margin: 0 0 var(--sp-2); padding: var(--sp-2) var(--sp-3); font: var(--body-m);
  border: 1px solid var(--outline-variant); border-radius: var(--shape-sm); background: var(--surface); color: var(--on-surface);
}
.colors .list-item .swatches { margin-top: var(--sp-2); }
/* Event colours → By name: a rule is [colour] [words] [Aa] [n coming up] [×]. */
.colors .set-hint { margin: 0 0 var(--sp-2); }
.colors .rules { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.colors .rule-row { display: flex; align-items: center; gap: var(--sp-2); }
.colors .rule > .swatches { margin: var(--sp-2) 0 0 44px; }
.colors .dot-btn { position: relative; display: grid; place-items: center; width: 36px; height: 36px; flex: none; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.colors .dot-btn::before { content: ""; position: absolute; inset: -4px; }
.colors .dot-btn .dot-sw { width: 20px; height: 20px; }
.colors .rule-has { flex: 1; min-width: 0; height: 40px; padding: 0 var(--sp-3); border: 1px solid var(--outline-variant); border-radius: var(--shape-sm); background: none; color: inherit; font: var(--body-m); white-space: pre; }
.colors .case .case-aa { font: 600 13px/1 var(--font); letter-spacing: 0.02em; }
.colors .case.on { color: var(--on-secondary-container); background: var(--secondary-container); }
.colors .rule-n { flex: none; min-width: 6.5em; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 479px) { .colors .rule-n { display: none; } }
@media (max-width: 599px) {
  dialog.settings-sheet {
    margin: auto 0 0 0; width: 100vw; max-height: 88dvh;
    border-radius: var(--shape-xl) var(--shape-xl) 0 0; padding-bottom: max(var(--sp-6), env(safe-area-inset-bottom));
  }
  dialog.settings-sheet[open] { animation: rise var(--dur-medium) var(--ease-decel); }
}
.banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3);
  margin: 0 var(--sp-6) var(--sp-2); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--shape-md); font: var(--body-m);
  color: var(--on-error-container); background: var(--error-container);
}
.empty {
  display: grid; justify-items: center; gap: var(--sp-2);
  padding: var(--sp-12) var(--sp-6); text-align: center; color: var(--on-surface-variant);
}
.empty .icon { font-size: 40px; color: var(--outline); }
.empty h2 { margin: 0; font: var(--title-m); color: var(--on-surface); }
.empty p { margin: 0; max-width: 44ch; }
.error-card { color: var(--on-error-container); background: var(--error-container); }
.error-card pre { white-space: pre-wrap; font: var(--body-s); font-family: var(--font-mono); margin: var(--sp-2) 0 0; }
.toast-host {
  position: fixed; left: 50%; bottom: var(--sp-6); translate: -50% 0; z-index: 50;
  display: grid; justify-items: center; gap: var(--sp-2); width: min(560px, calc(100vw - 32px));
  pointer-events: none;
}
.toast-host .snackbar { pointer-events: auto; max-width: 100%; }
/* Phones: above the bottom navigation bar, not over it. */
@media (max-width: 599px) {
  .toast-host { bottom: calc(96px + env(safe-area-inset-bottom)); }
  .toast-host .snackbar { width: 100%; }
}
.page-intro { font: var(--body-m); color: var(--on-surface-variant); margin: 0 var(--sp-4) var(--sp-4); max-width: 70ch; }
.state { font: var(--label-m); padding: 2px 8px; border-radius: var(--shape-xs); }
.state.open { color: var(--on-primary-container); background: var(--primary-container); }
.state.undone { color: var(--on-surface-variant); background: var(--surface-container-highest); }

/* Tag chips: colour from the tag's own hue, so a recolour shows everywhere. */
[style*="--tag-h"] {
  --tag-bg: light-dark(oklch(0.92 0.05 var(--tag-h)), oklch(0.36 0.07 var(--tag-h)));
  --tag-fg: light-dark(oklch(0.36 0.09 var(--tag-h)), oklch(0.92 0.04 var(--tag-h)));
}
.tag-chip { border-color: transparent; background: var(--tag-bg); color: var(--tag-fg); }

/* Catch-up card (top of Todos) */
.catchup-slot:not(:empty) { margin-bottom: var(--sp-4); }
.catchup { display: grid; gap: var(--sp-2); }
.catchup .line { font: var(--body-l); }
.catchup ul { margin: 0; padding-left: var(--sp-5); color: var(--on-surface-variant); }
.catchup .actions { display: flex; justify-content: flex-end; }

/* No keyboard on a touch screen: hide keyboard hints. */
@media (pointer: coarse) { kbd, .kbd-hint { display: none; } }

/* An alert snackbar (timer ran out): stays longer, stands out. */
.snackbar.alert { background: var(--error-container); color: var(--on-error-container); }
.snackbar.alert .btn.text { color: var(--on-error-container); font-weight: 650; }
.snackbar.alert .icon-btn { color: var(--on-error-container); width: 32px; height: 32px; }

/* A warning role the kit lacks (house-ui: build it in the app first, promote
   it once a second app wants it). Made like the kit's error role, on a fixed
   amber hue, so "warning" stays amber whatever accent someone picks. */
:root {
  --hue-warn: 75;
  --warn-container:    light-dark(oklch(0.93 0.07 var(--hue-warn)), oklch(0.42 0.09 var(--hue-warn)));
  --on-warn-container: light-dark(oklch(0.36 0.09 var(--hue-warn)), oklch(0.93 0.06 var(--hue-warn)));
}

/* Visual extras (a personal setting, off by default): the bars are always in
   the page and this is the one switch. They update in place, never animate. */
:root:not([data-visual="on"]) .vx { display: none !important; }
.vx-bar {
  display: block; height: 3px; overflow: hidden; border-radius: var(--shape-full);
  background: color-mix(in oklab, currentColor 18%, transparent);
}
.vx-bar > i { display: block; height: 100%; width: var(--value, 0%); border-radius: inherit; background: currentColor; }

/* ── the tour (core/tour.js) ── */
.tour-layer { position: fixed; inset: 0; z-index: 1000; }
.tour-layer.dim { background: var(--scrim); }
/* The spotlight: a clear hole, everything around it dimmed by its own shadow. It takes the clicks, so the page waits. */
.tour-hole { position: fixed; border-radius: var(--shape-md); box-shadow: 0 0 0 200vmax var(--scrim), 0 0 0 3px var(--primary); pointer-events: auto; }
.tour-card {
  position: fixed; z-index: 1; width: min(400px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto;
  padding: var(--sp-5); border-radius: var(--shape-xl); color: var(--on-surface); background: var(--surface-container-high); box-shadow: var(--elev-3);
}
.tour-card.center { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.tour-card.dock-bottom { left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); }
.tour-card.dock-top { left: 50%; top: max(16px, env(safe-area-inset-top)); transform: translateX(-50%); }
.tour-top { display: flex; align-items: center; justify-content: space-between; }
.tour-art { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--shape-full); color: var(--on-primary-container); background: var(--primary-container); }
.tour-art .icon { font-size: 24px; }
.tour-count { font: var(--label-m); color: var(--on-surface-variant); }
.tour-title { margin: var(--sp-3) 0 var(--sp-2); font: var(--title-l); }
.tour-body { margin: 0 0 var(--sp-2); font: var(--body-m); color: var(--on-surface-variant); }
.tour-dots { display: flex; flex-wrap: wrap; gap: 5px; margin: var(--sp-3) 0; }
.tour-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--outline-variant); }
.tour-dots span.done { background: var(--outline); }
.tour-dots span.on { width: 18px; border-radius: 4px; background: var(--primary); }
.tour-actions { display: flex; align-items: center; gap: var(--sp-2); }
.tour-spacer { flex: 1; }
body.touring { overflow: hidden; }

/* ── help (core/help.js) ── */
.help-top { position: relative; }
.help-top .help-dot { position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--error); box-shadow: 0 0 0 2px var(--surface); display: none; }
.help-top.has-new .help-dot { display: block; }
body.touring .help-top .help-dot { display: none; }   /* no "new" while the tour is showing it */
.help-q {
  display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: 2px; padding: 0; border: 0; border-radius: 50%;
  vertical-align: middle; cursor: pointer; color: var(--on-surface-variant); background: none;
  position: relative;
}
.help-q::before { content: ""; position: absolute; inset: -8px; }   /* 28 px, 44 to tap */
.help-q .icon { font-size: 18px; }
.help-q:hover { color: var(--primary); background: var(--surface-container-high); }
.help-q:focus-visible { outline: 2px solid var(--primary); }
dialog.help-dialog { width: min(460px, calc(100vw - 32px)); }
.help-body p { margin: 0 0 var(--sp-2); color: var(--on-surface-variant); }
.help-topics { display: grid; gap: 2px; margin-top: var(--sp-2); }
.help-topics details { padding: var(--sp-2) var(--sp-3); border-radius: var(--shape-sm); background: var(--surface-container); }
.help-topics summary { font: var(--title-s); cursor: pointer; }
.help-topics p { margin: var(--sp-2) 0 0; font: var(--body-m); color: var(--on-surface-variant); }
.tip-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--sp-3);
  margin: 0 0 var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--shape-lg);
  color: var(--on-tertiary-container); background: var(--tertiary-container);
}
.tip-icon .icon { font-size: 22px; }
.tip-text b { font: var(--title-s); }
.tip-text p { margin: 2px 0 0; font: var(--body-m); }
.tip-card .btn { color: inherit; }