/* Static browser UI styling for the text-first availability report. */

:root {
  color-scheme: light dark;
  font-family:
    ui-monospace,
    SFMono-Regular,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    Liberation Mono,
    monospace;
  line-height: 1.5;
  --color-bg: #f5f4ef;
  --color-bg-overlay: rgba(255, 255, 255, 0.75);
  --color-surface: rgba(255, 255, 255, 0.85);
  --color-border: rgba(20, 20, 20, 0.12);
  --color-border-muted: rgba(32, 32, 32, 0.1);
  --color-text: #1d1b16;
  --color-text-muted: #564f42;
  --color-shadow: rgba(24, 24, 24, 0.05);
  background: var(--color-bg);
  color: var(--color-text);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #17150f;
    --color-bg-overlay: rgba(20, 20, 20, 0.82);
    --color-surface: rgba(32, 32, 32, 0.9);
    --color-border: rgba(246, 246, 246, 0.16);
    --color-border-muted: rgba(246, 246, 246, 0.12);
    --color-text: #f5f4ef;
    --color-text-muted: #cbc1ae;
    --color-shadow: rgba(0, 0, 0, 0.28);
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(180deg, var(--color-bg-overlay), var(--color-bg-overlay)),
    var(--color-bg);
}

.page {
  width: min(100%, 72rem);
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

.page-header {
  margin-bottom: 1rem;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 2rem;
  text-transform: lowercase;
  margin-bottom: 0.5rem;
}

.subtitle,
.helper,
.freshness,
.status,
.slot-duration,
.slot-time {
  color: var(--color-text-muted);
}

.subtitle,
.helper {
  max-width: 44rem;
}

.subtitle {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

.helper {
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.meta-panel {
  display: grid;
  gap: 0.25rem;
  min-height: 1.5rem;
  padding: 0.75rem 0 0;
}

.freshness {
  user-select: none;
  cursor: default;
  font-size: 0.82rem;
  opacity: 0.58;
}

.status:empty,
.freshness:empty {
  display: none;
}

.report {
  display: grid;
  gap: 1.25rem;
  padding-top: 1.25rem;
}

.state-card,
.day {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.25rem;
  padding: 0.9rem 1rem;
  box-shadow: 0 8px 24px var(--color-shadow);
}

.page-footer {
  padding-top: 1rem;
  border-top: 1px solid var(--color-border-muted);
  margin-top: 1.5rem;
}

.credit {
  margin-top: 1rem;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-align: end;
  opacity: 0.5;
}

.credit a {
  color: inherit;
}

.state-card {
  white-space: pre-wrap;
}

.day {
  display: grid;
  gap: 0.75rem;
}

.day-label {
  font-size: 1rem;
}

.slot-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  font-size: 0.9rem;
}

.slot-line {
  display: grid;
  gap: 0.05rem 0.75rem;
  align-items: baseline;
  grid-template-columns: minmax(0, 1fr) auto;
  padding-top: 0.75rem;
}

.slot-facility {
  grid-column: 1 / -1;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

@media (min-width: 28rem) {
  .page {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .slot-line {
    grid-template-columns: 15ch 6ch minmax(0, 1fr);
    padding-top: 0.05rem;
  }

  .slot-facility {
    grid-column: auto;
    font-size: inherit;
  }
}