/* Fairway Access
   Night-turf palette: the venue is open 24 hours and most of these screens are
   read on a phone in a dark car park, so the whole system is dark-first with a
   brass accent rather than a bright default. */

:root {
  --bg: #0d1411;
  --bg-2: #121c17;
  --panel: #16211b;
  --panel-2: #1b2821;
  --line: #24332b;
  --line-2: #32463a;
  --ink: #e9f1ea;
  --ink-2: #9db0a3;
  --ink-3: #6c8175;
  --brass: #d6b06a;
  --brass-dim: #8c7442;
  --go: #4fb477;
  --go-dim: #1f3a2b;
  --warn: #e0a95a;
  --stop: #e07a68;
  --stop-dim: #3a211d;
  --r: 14px;
  --r-sm: 9px;
  --shell: 1120px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  background-image:
    radial-gradient(900px 500px at 15% -10%, #16261d 0%, transparent 60%),
    radial-gradient(700px 400px at 95% 0%, #1a2119 0%, transparent 55%);
  background-repeat: no-repeat;
  min-height: 100vh;
}

h1, h2, h3 {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 .5rem;
}
h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); }
h2 { font-size: clamp(1.3rem, 2.6vw, 1.75rem); }
h3 { font-size: 1.1rem; }

a { color: var(--brass); text-decoration: none; }
a:hover { text-decoration: underline; }
p { margin: 0 0 1rem; }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 680px; }
.muted { color: var(--ink-2); }
.small { font-size: .86rem; }
.tiny { font-size: .78rem; }
.mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.stack > * + * { margin-top: 1rem; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.spread { display: flex; gap: 14px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.grow { flex: 1 1 auto; }

/* ------------------------------------------------------------- chrome -- */

.top {
  border-bottom: 1px solid var(--line);
  background: rgba(13, 20, 17, .82);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 30;
}
.top .shell { display: flex; align-items: center; gap: 20px; min-height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink);
         font-family: Georgia, serif; font-size: 1.12rem; min-width: 0; }
.brand-name { min-width: 0; }
.brand:hover { text-decoration: none; }
.brand .mark {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(145deg, var(--brass), var(--brass-dim));
  display: grid; place-items: center; color: #16211b; font-weight: 700; font-size: .82rem;
  font-family: -apple-system, sans-serif;
}
.nav { margin-left: auto; display: flex; gap: 22px; align-items: center; }
.nav a { color: var(--ink-2); font-size: .93rem; }
.nav a:hover, .nav a.on { color: var(--ink); text-decoration: none; }

.foot {
  border-top: 1px solid var(--line);
  margin-top: 72px; padding: 28px 0 44px;
  color: var(--ink-3); font-size: .84rem;
}
.foot a { color: var(--ink-2); }

/* ------------------------------------------------------------ surfaces -- */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
}
.card.tight { padding: 16px; }
.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.hero { padding: 72px 0 40px; }
.hero .lede { font-size: 1.12rem; color: var(--ink-2); max-width: 46ch; }
.eyebrow {
  text-transform: uppercase; letter-spacing: .16em; font-size: .72rem;
  color: var(--brass); margin-bottom: .9rem; font-weight: 600;
}

.stat { display: flex; flex-direction: column; gap: 2px; }
.stat b { font-size: 1.8rem; font-family: Georgia, serif; font-weight: 600; }
.stat span { color: var(--ink-2); font-size: .82rem; }

/* --------------------------------------------------------------- forms -- */

label { display: block; font-size: .85rem; color: var(--ink-2); margin-bottom: 6px; }
input[type=text], input[type=tel], input[type=email], input[type=password],
input[type=number], input[type=date], select, textarea {
  width: 100%; padding: 11px 13px;
  background: var(--bg-2); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font: inherit; font-size: .96rem;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--brass-dim); outline-offset: 1px; border-color: var(--brass-dim);
}
.field + .field { margin-top: 14px; }
.grid-2 { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px; border: 1px solid transparent;
  background: var(--brass); color: #16211b; font-weight: 600; font-size: .95rem;
  cursor: pointer; font-family: inherit;
}
.btn:hover { text-decoration: none; filter: brightness(1.07); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover { border-color: var(--brass-dim); }
.btn.danger { background: transparent; color: var(--stop); border-color: #4a2a25; }
.btn.sm { padding: 7px 14px; font-size: .85rem; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.note {
  border-radius: var(--r-sm); padding: 12px 15px; font-size: .9rem;
  border: 1px solid var(--line-2); background: var(--panel-2);
}
.note.ok { border-color: #2c5d42; background: var(--go-dim); }
.note.warn { border-color: #5c4a28; background: #2a2318; }
.note.stop { border-color: #5c332b; background: var(--stop-dim); }

/* --------------------------------------------------------------- pills -- */

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 600;
  border: 1px solid var(--line-2); color: var(--ink-2); background: var(--panel-2);
  text-transform: uppercase; letter-spacing: .05em;
}
.pill.go { color: #9fe0bb; border-color: #2c5d42; background: var(--go-dim); }
.pill.warn { color: #e8c88c; border-color: #5c4a28; background: #2a2318; }
.pill.stop { color: #f0a496; border-color: #5c332b; background: var(--stop-dim); }
.pill.brass { color: var(--brass); border-color: var(--brass-dim); background: #241f14; }

/* ---------------------------------------------------------------- grid -- */

.daystrip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 10px; }
.daystrip a {
  flex: 0 0 auto; min-width: 82px; text-align: center; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--panel); color: var(--ink-2);
}
.daystrip a.on { border-color: var(--brass-dim); color: var(--ink); background: #221e14; }
.daystrip a:hover { text-decoration: none; border-color: var(--line-2); }
.daystrip b { display: block; color: var(--ink); font-size: .95rem; font-weight: 600; }
.daystrip span { font-size: .76rem; }

.gridwrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
table.slots { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 760px; }
table.slots th, table.slots td { padding: 9px 8px; border-bottom: 1px solid var(--line); }
table.slots thead th {
  position: sticky; top: 0; background: var(--panel-2); z-index: 2;
  font-size: .74rem; font-weight: 600; color: var(--ink-2); text-align: center;
  letter-spacing: .03em; white-space: nowrap;
}
table.slots tbody th {
  text-align: left; font-weight: 500; white-space: nowrap;
  position: sticky; left: 0; background: var(--panel); z-index: 1; min-width: 190px;
  border-right: 1px solid var(--line);
}
table.slots tbody th small { display: block; color: var(--ink-3); font-size: .76rem; }
table.slots tr:last-child td, table.slots tr:last-child th { border-bottom: 0; }

.slot {
  display: block; width: 100%; padding: 8px 4px; border-radius: var(--r-sm);
  font-size: .8rem; text-align: center; border: 1px solid transparent; cursor: pointer;
  background: var(--go-dim); color: #9fe0bb; font-weight: 600;
  font-family: inherit;
}
.slot:hover { border-color: var(--go); }
.slot.on { background: var(--brass); color: #16211b; }
.slot.taken { background: #20282d; color: var(--ink-3); cursor: not-allowed; }
.slot.past, .slot.closed { background: transparent; color: var(--ink-3); cursor: not-allowed; opacity: .5; }

.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: .8rem; color: var(--ink-2); }
.legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; margin-right: 6px; vertical-align: -1px; }

.picker {
  position: sticky; bottom: 0; z-index: 20; margin-top: 16px;
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 14px 18px;
}

/* ----------------------------------------------------------------- pin -- */

.pinbox {
  border: 1px solid var(--brass-dim); border-radius: var(--r);
  background: linear-gradient(160deg, #241f14, #16211b 65%);
  padding: 26px; text-align: center;
}
.pinbox .code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(2.1rem, 9vw, 3.1rem); letter-spacing: .16em;
  color: var(--brass); font-weight: 600; margin: 8px 0 4px;
}
.pinbox.locked { border-color: var(--line-2); background: var(--panel); }
.pinbox.locked .code { color: var(--ink-3); letter-spacing: .22em; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line);
  font-size: .9rem;
}
.timeline li:last-child { border-bottom: 0; }
.timeline .when { color: var(--ink-3); min-width: 132px; font-size: .84rem; }

/* -------------------------------------------------------------- keypad -- */

.door {
  min-height: 100vh; display: grid; place-items: center; padding: 28px 18px;
  background: radial-gradient(600px 400px at 50% 0%, #1a2620, #0a0f0c 70%);
}
.panel {
  width: 100%; max-width: 360px;
  background: linear-gradient(175deg, #1c2822, #121a15);
  border: 1px solid #2b3b32; border-radius: 22px; padding: 24px;
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
}
.panel .doorname { text-align: center; color: var(--ink-2); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; }
.readout {
  margin: 14px 0 16px; height: 62px; border-radius: 11px; background: #0a100d;
  border: 1px solid #2b3b32; display: grid; place-items: center;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.9rem;
  letter-spacing: .34em; color: var(--go); text-indent: .34em;
}
.keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.keys button {
  aspect-ratio: 1 / .78; border-radius: 12px; border: 1px solid #33473c;
  background: linear-gradient(180deg, #223029, #1a241f);
  color: var(--ink); font-size: 1.3rem; font-family: inherit; cursor: pointer;
}
.keys button:active { background: #2c3d34; }
.keys button.act { color: var(--brass); font-size: .9rem; letter-spacing: .05em; }
.keys button.go { color: #9fe0bb; border-color: #2c5d42; }
.verdict { margin-top: 16px; border-radius: 11px; padding: 14px; text-align: center; font-size: .92rem; }
.verdict.granted { background: var(--go-dim); border: 1px solid #2c5d42; color: #9fe0bb; }
.verdict.denied { background: var(--stop-dim); border: 1px solid #5c332b; color: #f0a496; }

/* --------------------------------------------------------------- admin -- */

.admin { display: grid; grid-template-columns: 218px 1fr; min-height: 100vh; }
.side { border-right: 1px solid var(--line); background: var(--bg-2); padding: 20px 0; }
.side .brand { padding: 0 20px 18px; }
.side nav { display: flex; flex-direction: column; }
.side nav a {
  padding: 9px 20px; color: var(--ink-2); font-size: .91rem;
  border-left: 2px solid transparent;
}
.side nav a:hover { color: var(--ink); text-decoration: none; background: var(--panel); }
.side nav a.on { color: var(--ink); border-left-color: var(--brass); background: var(--panel); }
.main { padding: 26px 30px 70px; min-width: 0; }
@media (max-width: 860px) {
  .admin { grid-template-columns: 1fr; }
  /* A grid item defaults to min-width:auto, so the eight-item nav set the
     track to its own min-content width (720px) and the overflow-x:auto below
     never engaged - the whole staff console scrolled sideways instead of the
     nav scrolling inside it. Both need min-width:0 for the scroll to land on
     the element that is supposed to do it. */
  .side, .main { min-width: 0; }
  .side { border-right: 0; border-bottom: 1px solid var(--line); }
  .side nav {
    flex-direction: row; overflow-x: auto; min-width: 0;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .side nav::-webkit-scrollbar { display: none; }
  .side nav a {
    border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap;
    min-height: 44px; display: flex; align-items: center;
  }
  .side nav a.on { border-left: 0; border-bottom-color: var(--brass); }
  .side .brand { padding: 0 20px 14px; }
  /* Sign out / Site were 46x16 - a real control, not prose. */
  .side .tiny a { display: inline-block; padding: 12px 8px; min-width: 44px;
                  text-align: center; }
  .side .tiny { margin-left: -8px; }
  .main { padding: 20px; }
  .main .cards { grid-template-columns: 1fr !important; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dt { margin-top: 8px; }
}

table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th, table.data td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
table.data th { color: var(--ink-2); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
table.data tr:hover td { background: var(--panel-2); }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }

.kv { display: grid; grid-template-columns: 148px 1fr; gap: 8px 16px; font-size: .92rem; }
.kv dt { color: var(--ink-2); }
.kv dd { margin: 0; }


/* The bay-then-hour picker. Hidden on desktop, where the table is better:
   a manager comparing four bays across a day wants them side by side. */
.mgrid { display: none; }

/* ======================================================================
   PHONES
   Written after looking at the thing on an actual handset rather than a
   narrowed desktop window. Three faults, three fixes:

     1. The header was one 66px row holding the venue name AND the nav. The
        name wrapped to three lines, the row did not grow, and it printed
        through the page heading. Brand and nav are now separate rows.
     2. The availability table is 24 columns behind a sticky name column. On
        a 390px screen that leaves roughly two readable hours. The phone gets
        a different layout instead: pick the bay, then the hour.
     3. Nav links were 33x24px. Apple and Google both publish 44px as the
        floor for a touch target, and a booking flow you miss-tap is not a
        booking flow.
   ====================================================================== */

@media (max-width: 860px) {

  /* ---- header: two rows, the nav scrolls ---- */
  .top .shell {
    flex-wrap: wrap; min-height: 0; gap: 0;
    padding-top: 12px; padding-bottom: 0;
  }
  .brand { width: 100%; font-size: 1.04rem; padding: 8px 0; }
  .brand-name {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .nav {
    width: 100%; margin: 8px -20px 0; padding: 0 20px; gap: 2px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a {
    display: flex; align-items: center; min-height: 44px;
    padding: 0 13px; white-space: nowrap; font-size: .95rem;
  }
  .nav a.on { box-shadow: inset 0 -2px 0 var(--brass); }

  /* ---- touch targets ---- */
  .btn { min-height: 46px; padding: 12px 22px; }
  .btn.sm { min-height: 44px; padding: 10px 16px; }
  .foot .row a, .foot a { display: inline-block; padding: 12px 10px; }
  .foot .row { margin-left: -10px; }

  /* ---- the booking grid swaps shape ---- */
  .gridwrap { display: none; }
  .mgrid { display: block; }

  .hero { padding: 40px 0 28px; }
  .shell { padding: 0 18px; }
  .card { padding: 18px; }
  .cards { grid-template-columns: 1fr; }
  .spread { gap: 10px; }
  /* The phone grid shows only bookable hours, so a key for Taken and
     Closed describes something that is not on screen. */
  .legend { display: none; }
  .kv { grid-template-columns: 104px 1fr; gap: 6px 12px; }

  /* A sticky bar that is a single row on a phone squeezes the button to
     nothing. Stack it and let the action be full width. */
  .picker { padding: 12px 14px; margin-left: -18px; margin-right: -18px;
            border-radius: 14px 14px 0 0; }
  .picker .spread { flex-direction: column; align-items: stretch; gap: 10px; }
  .picker .row { width: 100%; gap: 10px; }
  .picker .row > div { flex: 1 1 auto; }
  .picker select { min-height: 46px; }
  .picker .btn { flex: 1 1 auto; }

  .timeline .when { min-width: 96px; }

  /* The door panel's own links, 67x16 before this. */
  .door .center a { display: inline-block; padding: 13px 10px; }
  .panel { max-width: 100%; }
}


.baychips {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.baychips::-webkit-scrollbar { display: none; }
.baychip {
  flex: 0 0 auto; text-align: left; cursor: pointer; font: inherit;
  padding: 10px 14px; min-height: 52px; border-radius: var(--r-sm);
  background: var(--panel); color: var(--ink-2);
  border: 1px solid var(--line);
}
.baychip b { display: block; color: var(--ink); font-size: .95rem; font-weight: 600; }
.baychip span { font-size: .74rem; }
.baychip.on { border-color: var(--brass-dim); background: #221e14; }
.baychip.on b { color: var(--brass); }

.mslots {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
}
/* `display: grid` beats the user agent's own [hidden] { display: none }, so
   without this every bay's hours render at once and the chips do nothing.
   The audit counted 96 visible slots where it should have counted 24. */
.mslots[hidden] { display: none; }
.mslot {
  min-height: 48px; display: flex; align-items: center; justify-content: center;
  font-size: .86rem; padding: 6px 4px;
}
.mslot.taken, .mslot.past, .mslot.closed { display: none; }
.mhint { margin: 0 0 10px; }

@media (max-width: 400px) {
  .mslots { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .baychip { min-height: 48px; }
}

/* Stelix PWA right-click menu (assets/pwa/stelix-pwa.css, Kit copy): the night-turf tokens.
   Without these the menu falls back to a white sheet with this palette's pale ink on it. */
.rmenu { --paper: var(--panel-2); --hair: var(--line-2); --wash: var(--panel); --muted: var(--ink-2); --bad: var(--stop); }