:root {
  --forest: #1c3325;
  --forest-deep: #12241a;
  --forest-soft: #2e4a38;
  --beige: #e9dfc9;
  --beige-soft: #f4efe3;
  --paper: #faf7ef;
  --ink: #1e2a22;
  --muted: #5f6f63;
  --sage: #9db5a0;
  --sage-soft: #dce7dc;
  --gold: #c9b896;
  --danger: #8c3a2b;
  --ok: #2f6b3c;
  --radius: 18px;
  --shadow: 0 18px 45px rgba(18, 36, 26, 0.16);
  --border: 1px solid rgba(28, 51, 37, 0.14);
  --surface: #fffdf8;
  --surface-input: #ffffff;
  --row: #f4efe3;
}

/* Dark theme: surfaces and text remapped; accents stay recognizable. */
html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0f1713;
  --ink: #ede8d8;
  --muted: #9fae9f;
  --forest-soft: #a9c2ab;
  --ok: #62a86b;
  --danger: #c2705c;
  --row: #1c2820;
  --sage-soft: #243830;
  --gold: #d3c096;
  --border: 1px solid rgba(237, 232, 216, 0.16);
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
  --surface: #17211b;
  --surface-input: #101915;
}
html[data-theme="dark"] .bg-ornament {
  background:
    radial-gradient(600px 300px at 10% -5%, rgba(46, 74, 56, 0.5), transparent),
    radial-gradient(700px 340px at 95% 10%, rgba(120, 105, 70, 0.25), transparent),
    linear-gradient(180deg, #101915 0%, #0f1713 100%);
}
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field input,
html[data-theme="dark"] .pill,
html[data-theme="dark"] .time-row input,
html[data-theme="dark"] .clock-selects select {
  border-color: rgba(237, 232, 216, 0.28);
}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] .rules-card summary strong { color: var(--ink); }
html[data-theme="dark"] .pill { color: var(--ink); }
html[data-theme="dark"] .clock-selects { color: var(--ink); }
html[data-theme="dark"] .countdown-fill { background: var(--sage); }
::placeholder { color: var(--muted); opacity: 0.8; }
html[data-theme="dark"] .status-card { background: linear-gradient(to bottom, var(--sage) 0 6px, var(--surface) 6px); }
html[data-theme="dark"] .status-card.available { background: linear-gradient(to bottom, var(--ok) 0 6px, var(--surface) 6px); }
html[data-theme="dark"] .status-card.occupied { background: linear-gradient(to bottom, var(--danger) 0 6px, var(--surface) 6px); }
html[data-theme="dark"] .status-card.booked { background: linear-gradient(to bottom, #b97f26 0 6px, var(--surface) 6px); }
html[data-theme="dark"] .warning {
  background: #2b2113;
  border-color: #8a6a2f;
  color: #e8c07a;
}
html[data-theme="dark"] .form-feedback.success { background: #14251a; color: #8fce93; border-color: #2c4a33; }
html[data-theme="dark"] .form-feedback.error { background: #2b1713; color: #e89a8a; border-color: #5c2b24; }
html[data-theme="dark"] .offline-banner { background: #2b2113; border-color: #8a6a2f; color: #e8c07a; }
html[data-theme="dark"] .skeleton { background: linear-gradient(90deg, #1c2820, #243830, #1c2820); }
html[data-theme="dark"] .footer { background: rgba(0, 0, 0, 0.28); }
html[data-theme="dark"] #mainView .btn-ghost, html[data-theme="dark"] .dialog .btn-ghost { color: var(--ink); border-color: rgba(237, 232, 216, 0.35); }

* { box-sizing: border-box; }

/* The `hidden` attribute must always hide an element, even when a component
   class sets `display` (author styles beat the built-in UA `[hidden]` rule). */
[hidden] { display: none !important; }

html { height: 100%; height: -webkit-fill-available; -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { overflow-x: clip; }

body {
  margin: 0;
  font-family: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  min-height: -webkit-fill-available;
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
}

.bg-ornament {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(600px 300px at 10% -5%, rgba(157, 181, 160, 0.35), transparent),
    radial-gradient(700px 340px at 95% 10%, rgba(201, 184, 150, 0.35), transparent),
    linear-gradient(180deg, #fbf8f0 0%, #f4efe3 100%);
  z-index: -1;
}

.topbar {
  background: linear-gradient(180deg, var(--forest) 0%, var(--forest-deep) 100%);
  color: var(--beige-soft);
  border-bottom: 3px solid var(--gold);
  position: sticky;
  top: 0;
  z-index: 20;
  padding-top: env(safe-area-inset-top);
}

.topbar-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
.brand-text { min-width: 0; }
.brand-logo { width: 44px; height: 44px; flex-shrink: 0; }
.brand-title { display: block; font-weight: 800; letter-spacing: 0.2px; font-size: 1.1rem; white-space: nowrap; }
.brand-sub { display: block; font-size: 0.8rem; color: var(--gold); letter-spacing: 0.6px; text-transform: uppercase; }

.topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.topbar-right .btn { white-space: nowrap; }
.user-badge {
  background: rgba(244, 239, 227, 0.14);
  border: 1px solid rgba(201, 184, 150, 0.5);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
}

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 26px 20px 40px;
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#mainView {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.card {
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}

.card-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--forest-soft);
  font-weight: 700;
  margin-bottom: 8px;
}

h1 { margin: 4px 0; font-size: 2rem; color: var(--forest); }
h2.status-title { margin: 0; font-size: 1.5rem; color: var(--forest); }
h3 { margin: 4px 0 10px; color: var(--forest); }
.subtitle { margin: 0 0 8px; color: var(--gold); font-weight: 700; letter-spacing: 0.4px; }
.muted { color: var(--muted); }
.tiny { font-size: 0.8rem; }

.login-card { max-width: 480px; margin: 30px auto; text-align: left; }

.field { display: block; margin: 14px 0; }
.field span { display: block; font-weight: 700; margin-bottom: 6px; font-size: 0.9rem; }
.field select, .field input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid rgba(28, 51, 37, 0.25);
  font-size: 1rem;
  background: var(--surface-input);
  color: var(--ink);
}
.field select:focus, .field input:focus, .clock-selects select:focus, .time-row input:focus, .btn:focus-visible, .pill:focus-visible, .rules-card summary:focus-visible {
  outline: 3px solid rgba(157, 181, 160, 0.7);
  outline-offset: 2px;
}

.btn {
  border: none;
  border-radius: 12px;
  padding: 13px 18px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn:disabled { opacity: 0.6; cursor: wait; }
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.99); }
@media (hover: none) {
  /* Touchscreens keep :hover stuck after tap — don't float buttons there. */
  .btn-primary:hover:not(:disabled), .btn-secondary:hover:not(:disabled), .btn-ghost:hover { transform: none; }
}
@media (pointer: coarse) {
  /* Touch-first pointers get full-size tap targets at any viewport width. */
  .btn-small { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .skeleton { animation: none; }
  .countdown-fill { transition: none; }
  .overlay .dialog { animation: none; }
}
.btn-primary { background: var(--forest); color: var(--beige-soft); box-shadow: 0 8px 20px rgba(28, 51, 37, 0.3); }
.btn-primary:hover:not(:disabled) { background: var(--forest-soft); transform: translateY(-1px); }
.btn-secondary { background: var(--gold); color: var(--forest-deep); }
.btn-secondary:hover:not(:disabled) { filter: brightness(1.05); }
.btn-ghost { background: transparent; color: var(--beige-soft); border: 1px solid rgba(244, 239, 227, 0.5); }
.btn-ghost:hover { background: rgba(244, 239, 227, 0.12); }
.btn-small { padding: 8px 12px; font-size: 0.85rem; }
.btn-block { width: 100%; }

#mainView .btn-ghost, .dialog .btn-ghost { color: var(--forest); border-color: rgba(28, 51, 37, 0.3); }

.status-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
  align-items: stretch;
}

.main-col { display: grid; gap: 20px; align-content: start; }

.status-card { background: linear-gradient(to bottom, var(--sage) 0 6px, var(--surface) 6px); display: flex; flex-direction: column; }
/* Inner scroller: cards themselves never scroll, so their rounded corners
   and shadows render identically everywhere (like the login box). The card
   padding lives on the scroller so content glows keep real breathing room
   instead of being sliced at the content edge. */
.card.status-card { padding: 0; }
.card-scroll { flex: 1; min-width: 0; min-height: 0; overflow: auto; padding: 24px; border-radius: 0 0 var(--radius) var(--radius); }
.status-card.occupied { background: linear-gradient(to bottom, var(--danger) 0 6px, var(--surface) 6px); }
.status-card.booked { background: linear-gradient(to bottom, #b97f26 0 6px, var(--surface) 6px); }
.status-card.available { background: linear-gradient(to bottom, var(--ok) 0 6px, var(--surface) 6px); }

.status-row { display: flex; gap: 14px; align-items: flex-start; }
.status-dot { width: 18px; height: 18px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; background: var(--sage); box-shadow: 0 0 0 6px rgba(157,181,160,0.25); }
.status-dot.ok { background: var(--ok); box-shadow: 0 0 0 6px rgba(47,107,60,0.18); }
.status-dot.booked { background: #b97f26; box-shadow: 0 0 0 6px rgba(185,127,38,0.2); }
.status-dot.busy { background: var(--danger); box-shadow: 0 0 0 6px rgba(140,58,43,0.18); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 10px rgba(140,58,43,0.1); } }
@media (prefers-reduced-motion: reduce) { .status-dot.busy { animation: none; } }

.status-desc { margin: 6px 0 0; color: var(--muted); font-style: italic; }

.detail-list { display: grid; gap: 8px; margin: 18px 0; padding: 0; }
.detail-list div { display: flex; justify-content: space-between; gap: 12px; background: var(--row); border-radius: 10px; padding: 10px 12px; }
.detail-list dt { font-weight: 700; font-size: 0.85rem; color: var(--forest-soft); }
.detail-list dd { margin: 0; font-size: 0.9rem; text-align: right; }

.countdown-wrap { margin: 12px 0; }
.countdown-bar { height: 10px; background: var(--sage-soft); border-radius: 999px; overflow: hidden; }
.countdown-fill { height: 100%; background: var(--forest); width: 100%; transition: width 1s linear; }
.countdown-fill.urgent { background: var(--danger); }
.countdown-text { font-weight: 800; font-variant-numeric: tabular-nums; }
.warning {
  background: #fdf3e7;
  border: 1px solid #e7c48a;
  color: #7a4a12;
  padding: 10px 12px;
  border-radius: 10px;
}

.action-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

.time-wrap { display: grid; gap: 8px; margin: 2px 0; flex-basis: 100%; }
.duration-label { font-weight: 700; font-size: 0.85rem; color: var(--forest-soft); }
.time-row { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; font-weight: 700; color: var(--forest-soft); flex-wrap: wrap; }
.clock-selects { display: flex; align-items: center; gap: 6px; font-size: 1.2rem; font-weight: 800; color: var(--forest); }
.clock-selects select {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1.5px solid rgba(28, 51, 37, 0.25);
  font-size: 1.05rem;
  font-family: inherit;
  font-weight: 700;
  color: var(--ink);
  background: var(--surface-input);
  min-height: 44px;
}
.time-row input[type="date"] {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1.5px solid rgba(28, 51, 37, 0.25);
  font-size: 1rem;
  font-family: inherit;
  font-weight: 700;
  color: var(--ink);
  background: var(--surface-input);
  min-height: 44px;
  max-width: 100%;
}
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  border: 1.5px solid rgba(28, 51, 37, 0.3);
  background: var(--surface-input);
  border-radius: 999px;
  padding: 10px 18px;
  min-height: 44px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--forest);
  cursor: pointer;
}
.pill[aria-pressed="true"] { background: var(--forest); color: var(--beige-soft); border-color: var(--forest); }
.pill:disabled { opacity: 0.45; cursor: not-allowed; }
.form-error { color: var(--danger); font-weight: 700; }
.form-feedback { font-weight: 700; padding: 10px 12px; border-radius: 10px; }
.form-feedback.success { background: #e9f3ea; color: var(--ok); border: 1px solid #bcd8bf; }
.form-feedback.error { background: #fbecea; color: var(--danger); border: 1px solid #eec2bb; }

.side-col { display: grid; gap: 20px; }

.history-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 260px; overflow: auto; }
.history-list li { background: var(--row); border-radius: 10px; padding: 10px 12px; font-size: 0.88rem; }
.history-list time { font-weight: 800; font-variant-numeric: tabular-nums; margin-right: 6px; }

.stats-row { display: flex; justify-content: space-between; align-items: center; gap: 4px 12px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px dashed rgba(28,51,37,0.2); }
.stats-row > span:first-child { display: flex; align-items: center; gap: 8px; white-space: nowrap; min-width: 0; }
.stats-row > span:last-child { white-space: nowrap; }
.stats-row:last-child { border-bottom: none; }
.leader-badge { background: var(--forest); color: var(--gold); font-size: 0.75rem; font-weight: 800; padding: 3px 8px; border-radius: 999px; flex-shrink: 0; }

.rules { margin: 0; padding-left: 20px; color: var(--muted); gap: 6px; font-size: 0.9rem; }
/* Grid layout only when open: a plain `.rules{display:grid}` would beat the
   built-in rule that hides closed-details content (same trap as [hidden]). */
.rules-card[open] .rules { display: grid; }

.rules-card { padding: 0; }
/* Explicit hiding when closed: never rely on the built-in details hiding,
   since any author `display` value can defeat it (same trap as [hidden]). */
.rules-card:not([open]) > :not(summary) { display: none; }
.rules-card summary { list-style: none; cursor: pointer; padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; border-radius: var(--radius); }
.rules-card summary::-webkit-details-marker { display: none; }
.rules-card summary strong { color: var(--forest); }
.rules-card .rules { padding: 0 18px 14px 38px; }

.toast {
  background: var(--forest-deep);
  color: var(--beige-soft);
  border: 1px solid var(--gold);
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.toast.success { border-left: 6px solid #7fbf7f; }
.toast.error { border-left: 6px solid #d97a6a; }

.offline-banner {
  background: #fff4e0;
  border: 1px solid #e7c48a;
  color: #7a4a12;
  padding: 10px 14px;
  border-radius: 12px;
  margin-bottom: 14px;
  font-weight: 700;
}

.skeleton { background: linear-gradient(90deg, #eee5d2, #f7f1e3, #eee5d2); border-radius: 10px; animation: shimmer 1.2s infinite; }
.skeleton-title { height: 28px; width: 60%; margin-bottom: 10px; }
.skeleton-line { height: 14px; margin-bottom: 8px; }
.skeleton-line.short { width: 55%; }
.skeleton-btn { height: 44px; width: 70%; margin-top: 12px; }
@keyframes shimmer { 50% { opacity: 0.7; } }

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 36, 26, 0.55);
  display: flex;
  padding: 20px;
  z-index: 50;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.dialog { background: var(--surface); border-radius: 16px; padding: 24px; max-width: 420px; width: 100%; box-shadow: var(--shadow); margin: auto; }
.dialog-wide { max-width: 560px; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow: auto; }

.btn-icon { vertical-align: -2px; margin-right: 2px; }

.settings-section { margin: 0 0 8px; }
.settings-section + .settings-section { border-top: 1px dashed rgba(28, 51, 37, 0.25); padding-top: 14px; margin-top: 14px; }
html[data-theme="dark"] .settings-section + .settings-section { border-top-color: rgba(237, 232, 216, 0.2); }
.settings-section h4 { margin: 0 0 8px; color: var(--forest); font-size: 1.05rem; }
html[data-theme="dark"] .settings-section h4 { color: var(--ink); }
.settings-section .sub-heading { margin-top: 16px; }
.settings-section .field { margin: 10px 0; }

.footer {
  text-align: center;
  padding: 10px 16px;
  color: var(--muted);
  font-size: 0.8rem;
  border-top: 1px solid rgba(28, 51, 37, 0.12);
  background: rgba(244, 239, 227, 0.6);
}
.footer p { margin: 2px 0; }

@media (max-width: 860px) {
  html { scroll-padding-top: 12px; }
  /* Static bar on phones: nothing follows the scroll, so navigation can
     never cover content on any engine. Desktop keeps the sticky bar. */
  .topbar { position: static; }
  /* Normal document flow on phones: the flex app-shell is desktop-only.
     Without this, tall stacked content overflows its flex box and runs
     underneath the footer (overlapping text). */
  .container { display: block; }
  #mainView { display: block; }
  .card-scroll { padding: 16px; }
  .status-grid { grid-template-columns: 1fr; }
  h1 { font-size: 1.6rem; }
  h2.status-title { font-size: 1.35rem; }
  .container { padding: 14px 12px calc(16px + env(safe-area-inset-bottom)); padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .card { padding: 16px; }
  .topbar-inner { padding: 8px 12px; gap: 8px; }
  .topbar-right { gap: 6px; }
  /* Compact single-row bar: hide the long subtitle so brand + actions fit. */
  .brand { gap: 8px; }
  .brand-logo { width: 34px; height: 34px; }
  .brand-title { font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; }
  .brand-sub { display: none; }
  .user-badge { font-size: 0.78rem; padding: 6px 10px; white-space: nowrap; }
  .btn-small { min-height: 44px; padding: 8px 10px; font-size: 0.8rem; }
  .btn { min-height: 48px; }
  .action-row .btn { flex: 1; min-width: 200px; }
  .countdown-text { font-size: 1.1rem; }
  .history-list { max-height: 220px; }
  .footer { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  /* Bottom-sheet dialogs on phones: actions land in the thumb zone and the
     sheet scrolls internally instead of floating mid-screen. */
  .overlay { align-items: flex-end; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); }
  .overlay .dialog { margin: 0; width: 100%; max-width: 100%; border-radius: 20px 20px 0 0; animation: sheet-up 220ms cubic-bezier(0.2, 0, 0, 1); }
  @keyframes sheet-up { from { transform: translateY(24px); opacity: 0.6; } }
}

/* Desktop app shell: the whole view fits the viewport, no page scroll.
   The journal list scrolls internally; the status card scrolls internally
   only on unusually short viewports. */
/* Very narrow phones: the badge duplicates info already in About/settings. */
@media (max-width: 480px) {
  .user-badge { display: none; }
}
@media (max-width: 430px) {
  /* Icon-only settings button: keeps one compact topbar row. */
  #settingsBtn { font-size: 0; padding: 8px 14px; }
  #settingsBtn .btn-icon { margin-right: 0; }
}
@media (max-width: 380px) {
  .topbar-inner { gap: 6px; }
}
@media (min-width: 861px) {
  body { height: 100vh; height: 100dvh; overflow: hidden; }
  .container { overflow: hidden; padding: 20px 20px 14px; }
  #mainView { overflow: hidden; }
  .status-grid { flex: 1; min-height: 0; }
  .main-col { display: flex; flex-direction: column; gap: 20px; min-height: 0; max-height: 100%; overflow: auto; }
  .main-col .status-card { flex: 1 1 auto; min-height: 0; }
  .main-col .stats-card { flex: none; }
  .status-card { min-height: 0; }
  .side-col { min-height: 0; max-height: 100%; overflow: hidden; overflow: clip; overflow-clip-margin: 28px; }
  .side-col > .card, .side-col > .rules-card { flex-shrink: 0; }
  .journal-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .history-list { flex: 1 1 auto; min-height: 60px; max-height: none; }
}