/* The Shed — Nocturne design system tokens (see design handoff) + app styles. */
:root {
  --color-bg: #161826;
  --color-surface: #232532;
  --color-text: #e9e9ed;
  --color-accent: #9184d9;
  --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);

  --color-neutral-100: #f3f5fe;
  --color-neutral-200: #e4e7f5;
  --color-neutral-300: #cfd3e5;
  --color-neutral-400: #b2b6ca;
  --color-neutral-500: #9397ab;
  --color-neutral-600: #75798c;
  --color-neutral-700: #595d6c;
  --color-neutral-800: #3f424d;
  --color-neutral-900: #292b31;

  --color-accent-100: #f5f4ff;
  --color-accent-200: #e7e5fe;
  --color-accent-300: #d2cefd;
  --color-accent-400: #b5abfc;
  --color-accent-500: #968ae0;
  --color-accent-600: #796cbf;
  --color-accent-700: #5d5294;
  --color-accent-800: #423a6a;
  --color-accent-900: #2b2741;

  --font-heading: "Inter", system-ui, -apple-system, sans-serif;
  --font-heading-weight: 500;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --shadow-sm: 0 0 0 1px #3f424d;
  --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0,0,0,0.55);
  --shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0,0,0,0.65);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --app-width: 480px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--color-bg); }
body {
  margin: 0; min-height: 100dvh;
  background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: 15px; line-height: 1.55; font-weight: 400;
  -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none;
}
h1, h2, h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 1.12; letter-spacing: -0.015em; margin: 0; }
p { margin: 0; }
a { color: var(--color-accent); text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
button, a, .cell, .key { touch-action: manipulation; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inline { display: inline; margin: 0; }
[hidden] { display: none !important; }

/* Fading rule + heading, a Nocturne signature */
.rule-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.rule-head h2 { font-size: 15px; line-height: 1.2; white-space: nowrap; }
.rule { flex: 1; height: 1px; background: linear-gradient(to right, var(--color-divider), var(--color-divider) calc(100% - 48px), transparent); }

/* ── Unlock ─────────────────────────────────────────────────────────── */
.gate {
  min-height: 100dvh; display: flex; flex-direction: column;
  max-width: var(--app-width); margin: 0 auto;
  padding: calc(24px + var(--safe-top)) calc(28px + var(--safe-right)) calc(36px + var(--safe-bottom)) calc(28px + var(--safe-left));
}
.gate-top { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 8px; padding-bottom: 36px; }
.gate-title { font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; margin-top: 8px; }
.gate-addr { font-size: 14px; color: var(--color-neutral-400); }
.gate-msg { font-size: 13px; color: var(--color-neutral-500); margin-top: 14px; min-height: 1.4em; }
.gate-msg.is-error { color: var(--color-accent-300); }
.pin-dots { display: flex; gap: 14px; margin-top: 6px; }
.dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--color-neutral-600); transition: background .12s, box-shadow .12s; }
.dot.on { background: var(--color-accent); border-color: var(--color-accent); box-shadow: 0 0 10px color-mix(in srgb, var(--color-accent) 50%, transparent); }
.pin-form { position: relative; }
.pin-input { position: absolute; opacity: 0; width: 1px; height: 1px; top: 0; left: 0; pointer-events: none; }
.pin-input:focus-visible ~ .keypad { outline: 2px solid var(--color-accent); outline-offset: 6px; border-radius: var(--radius-md); }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.key {
  height: 64px; border-radius: var(--radius-md); border: 1px solid var(--color-divider);
  background: transparent; color: var(--color-text); font: 400 24px var(--font-body); cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.key:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.key:disabled { opacity: .45; cursor: not-allowed; }
.key.del { font-size: 20px; color: var(--color-neutral-400); }
.key.blank { visibility: hidden; }
.gate-foot { font-size: 11px; color: var(--color-neutral-600); text-align: center; margin-top: 18px; }
.inline-link { display: inline-flex; padding: 0 16px; margin-top: 12px; }

/* ── Home ───────────────────────────────────────────────────────────── */
.app { position: relative; max-width: var(--app-width); margin: 0 auto; min-height: 100dvh; }
.top {
  display: flex; align-items: center; gap: 10px;
  padding: calc(12px + var(--safe-top)) calc(20px + var(--safe-right)) 10px calc(20px + var(--safe-left));
}
.top h1 { font-size: 18px; line-height: 1.1; }
.top .place { margin-left: auto; font-size: 12px; color: var(--color-neutral-500); }
.lock-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -13px -13px -13px -8px;
  background: none; border: 0; padding: 0; color: var(--color-neutral-500); cursor: pointer; border-radius: var(--radius-md);
}
.lock-btn:hover { color: var(--color-text); }
.lock-btn:active { background: color-mix(in srgb, var(--color-text) 7%, transparent); }

.content { padding: 0 calc(20px + var(--safe-right)) calc(120px + var(--safe-bottom)) calc(20px + var(--safe-left)); }

.banner {
  background: var(--color-surface); border-radius: var(--radius-md); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 3px; box-shadow: var(--shadow-sm);
}
.banner-kicker { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent); }
.banner-title { font: 500 17px/1.2 var(--font-heading); }
.banner-sub { font-size: 12px; color: var(--color-neutral-400); }

.hint { font-size: 12px; color: var(--color-neutral-500); margin: 16px 0 4px; min-height: 18px; line-height: 1.5; }
.hint.is-flash, .hint.is-active { color: var(--color-accent-300); }

/* Calendar */
.month { margin-top: 14px; }
.dow {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 4px;
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-600); text-align: center;
}
.grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cell {
  display: block; width: 100%; height: 46px; border-radius: 6px; padding: 4px 5px; margin: 0;
  background: var(--color-surface); border: 1px solid transparent; overflow: hidden;
  text-align: left; color: var(--color-text); cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: background .12s, box-shadow .12s;
}
.cell.pad { background: transparent; pointer-events: none; }
.cell.past { opacity: .45; cursor: default; }
.cell .num { display: block; font-size: 12px; line-height: 1.2; }
.cell.booked { background: var(--color-accent-900); }
.cell.booked .num { color: var(--color-accent-300); }
.cell.arrive { border-left: 2px solid var(--color-accent); }
.cell .guest { display: block; font-size: 9.5px; line-height: 1.15; color: var(--color-accent-200); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell.today { box-shadow: inset 0 0 0 1px var(--color-accent); }
.cell.selected { background: var(--color-accent-800); border-color: var(--color-accent); box-shadow: 0 0 12px color-mix(in srgb, var(--color-accent) 35%, transparent); }
@media (hover: hover) {
  .cell.free:hover { border-color: color-mix(in srgb, var(--color-text) 25%, transparent); }
  .cell.booked:hover { background: var(--color-accent-800); }
}

/* Stays */
.stays-head { margin: 22px 0 4px; }
.stays-grid { display: grid; grid-template-columns: minmax(52px, max-content) 1fr; }
.stay-when { position: relative; padding: 14px 0 14px 14px; font-size: 11px; line-height: 1.3; color: var(--color-neutral-500); white-space: nowrap; }
.stay-dot { position: absolute; left: 0; top: 19px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }
.stay-dot.now { box-shadow: 0 0 10px var(--color-accent); }
.stay-card {
  display: block; width: 100%; margin: 8px 0; padding: 12px 14px; text-align: left;
  background: var(--color-surface); border: 0; border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  color: inherit; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.stay-card.now { border-left: 2px solid var(--color-accent); }
.stay-card:hover { background: color-mix(in srgb, var(--color-surface) 90%, var(--color-text)); }
.stay-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.stay-title { font: 500 16px/1.2 var(--font-heading); }
.stay-nights { font-size: 11px; color: var(--color-accent-300); white-space: nowrap; }
.stay-range { display: block; font-size: 12px; color: var(--color-neutral-400); margin-top: 3px; }
.stay-note { display: block; font-size: 12px; color: var(--color-neutral-300); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--color-divider); white-space: pre-line; }
.empty { font-size: 13px; color: var(--color-neutral-500); padding: 14px 0; }

/* Install tip */
.install-tip {
  margin-top: 28px; padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--color-divider);
  font-size: 12px; line-height: 1.5; color: var(--color-neutral-500); display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.install-tip strong { font-weight: 500; color: var(--color-neutral-300); }
.install-tip .ios-only, .install-tip .android-only { display: none; }
.install-tip.ios .ios-only, .install-tip.android .android-only { display: inline; }
.tip-dismiss { background: none; border: 0; padding: 4px 0; color: var(--color-accent); font: 500 12px var(--font-heading); cursor: pointer; }
@media (display-mode: standalone), (display-mode: fullscreen) { .install-tip { display: none !important; } }

/* Bottom bar */
.bottom-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; pointer-events: none;
  max-width: var(--app-width); margin: 0 auto;
  padding: 24px calc(20px + var(--safe-right)) max(20px, calc(12px + var(--safe-bottom))) calc(20px + var(--safe-left));
  background: linear-gradient(to top, var(--color-bg) 60%, transparent);
  display: flex; justify-content: space-between; align-items: center;
}
.bar-btn {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px;
  border-radius: var(--radius-md); border: 1px solid var(--color-divider); background: var(--color-bg); color: var(--color-text);
  font: 500 14px var(--font-heading); cursor: pointer; text-decoration: none; -webkit-appearance: none; appearance: none;
}
.bar-btn:hover { background: color-mix(in srgb, var(--color-text) 7%, var(--color-bg)); }
.bar-btn:active { background: color-mix(in srgb, var(--color-text) 14%, var(--color-bg)); }
.bar-btn-accent { border-color: var(--color-accent); color: var(--color-accent); box-shadow: 0 0 18px color-mix(in srgb, var(--color-accent) 25%, transparent); }
.bar-btn-accent:hover { background: color-mix(in srgb, var(--color-accent) 12%, var(--color-bg)); }
.bar-btn-accent:active { background: color-mix(in srgb, var(--color-accent) 22%, var(--color-bg)); }

/* Sheet */
@keyframes sheetUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center;
  background: color-mix(in srgb, var(--color-neutral-900) 60%, transparent);
}
.sheet {
  width: 100%; max-width: var(--app-width); max-height: 94dvh; overflow: auto;
  background: var(--color-surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 14px calc(20px + var(--safe-right)) calc(28px + var(--safe-bottom)) calc(20px + var(--safe-left));
  display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-lg);
  animation: sheetUp .25s ease-out;
}
@media (prefers-reduced-motion: reduce) { .sheet { animation: none; } }
.grab { width: 36px; height: 4px; border-radius: 2px; background: var(--color-neutral-700); margin: 0 auto; flex: none; }
.sheet-form, .sheet-done { display: flex; flex-direction: column; gap: 14px; }
.sheet-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sheet-head h2 { font-size: 20px; line-height: 1.15; overflow-wrap: anywhere; flex: 1 1 auto; min-width: 0; }
.sheet-meta { font-size: 12px; color: var(--color-neutral-500); flex: 0 1 auto; max-width: 46%; text-align: right; line-height: 1.3; }
.dates { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.date-box {
  position: relative; display: block; background: var(--color-bg); border: 1px solid var(--color-divider);
  border-radius: var(--radius-md); padding: 8px 10px; cursor: pointer; min-height: 52px;
}
.date-box:focus-within { border-color: var(--color-accent); }
.date-label { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-500); }
.date-value { display: block; font-size: 14px; margin-top: 2px; white-space: nowrap; }
.date-box input {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; padding: 0; border: 0;
  font-size: 16px; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.nights { font-size: 12px; color: var(--color-accent); text-align: center; white-space: nowrap; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 12px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.input {
  width: 100%; min-height: 44px; padding: 8px 10px; font: inherit; font-size: 16px;
  color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-bg); border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input::placeholder { color: var(--color-neutral-600); }
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 64px; font-size: 15px; resize: vertical; }
.sheet-error { font-size: 13px; color: var(--color-accent-300); line-height: 1.5; }

.btn-primary, .btn-secondary, .btn-cancel {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  border-radius: var(--radius-md); background: transparent; cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: 500; -webkit-appearance: none; appearance: none;
}
.btn-primary { height: 46px; border: 1px solid var(--color-accent); color: var(--color-accent); font-size: 15px; }
.btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-secondary { height: 44px; border: 1px solid var(--color-divider); color: var(--color-text); font-size: 14px; }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-cancel { height: 40px; border: 1px solid transparent; color: var(--color-neutral-400); font-size: 14px; }
.btn-cancel:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.btn-cancel.confirm { color: var(--color-accent-300); border-color: var(--color-divider); }
.cancel-form { margin: 0; }

.done { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 6px; }
.done h2 { font-size: 22px; line-height: 1.15; }
.done-range { font-size: 14px; color: var(--color-neutral-300); }
.done-sub { font-size: 12px; color: var(--color-neutral-500); }