/* Stadium Events — Luton Town FC
   Navy / orange, drawn from the club's palette. Light and dark. */

:root {
  --navy-900: #0b1a33;
  --navy-800: #14284b;
  --navy-700: #1d3763;
  --orange:   #f5851f;
  --orange-d: #d96f0c;

  --bg:        #f4f6fa;
  --surface:   #ffffff;
  --surface-2: #eef1f7;
  --border:    #d7dde9;
  --border-2:  #c3ccdd;
  --text:      #16203a;
  --text-dim:  #5b6780;
  --text-mute: #8792a8;

  --green:  #1f8a4c;  --green-bg:  #e4f4ea;
  --amber:  #b06a00;  --amber-bg:  #fdf1dd;
  --red:    #c02627;  --red-bg:    #fce8e8;
  --blue:   #1c5fbe;  --blue-bg:   #e5eefb;
  --violet: #6b3fa0;  --violet-bg: #efe8f8;
  --slate:  #5b6780;  --slate-bg:  #eaeef5;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(11,26,51,.06), 0 4px 14px rgba(11,26,51,.06);
  --focus: 0 0 0 3px rgba(245,133,31,.45);
  --max: 1240px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0d1524;
    --surface:   #141d30;
    --surface-2: #1b2640;
    --border:    #26334f;
    --border-2:  #35446a;
    --text:      #e6ecf7;
    --text-dim:  #9fadc7;
    --text-mute: #74829d;

    --green:  #4ecb84;  --green-bg:  #12291d;
    --amber:  #e8a33c;  --amber-bg:  #2c2008;
    --red:    #f0736f;  --red-bg:    #2e1414;
    --blue:   #6aa5f5;  --blue-bg:   #10203a;
    --violet: #b28df0;  --violet-bg: #201634;
    --slate:  #9fadc7;  --slate-bg:  #1b2440;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
  }
}

:root[data-theme="dark"] {
  --bg: #0d1524; --surface: #141d30; --surface-2: #1b2640;
  --border: #26334f; --border-2: #35446a;
  --text: #e6ecf7; --text-dim: #9fadc7; --text-mute: #74829d;
  --green: #4ecb84; --green-bg: #12291d;
  --amber: #e8a33c; --amber-bg: #2c2008;
  --red: #f0736f; --red-bg: #2e1414;
  --blue: #6aa5f5; --blue-bg: #10203a;
  --violet: #b28df0; --violet-bg: #201634;
  --slate: #9fadc7; --slate-bg: #1b2440;
}

* { box-sizing: border-box; }

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

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--orange);
  color: #fff; padding: 10px 16px; z-index: 100; border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; }

/* ---------- Top bar ---------- */

.topbar {
  background: var(--navy-800);
  border-bottom: 3px solid var(--orange);
  position: sticky; top: 0; z-index: 30;
}
.topbar-inner {
  max-width: var(--max); margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 24px; min-height: 58px; flex-wrap: nowrap;
}
.brand { display: flex; align-items: center; gap: 10px; color: #fff; }
.brand:hover { text-decoration: none; }
/* The crest is drawn on a white roundel here. Its lettering is club navy, the
   same navy as this bar, so on bare topbar it would read as a floating shield
   with the ring of text invisible. The crest artwork is circular, so a round
   background fits it exactly. */
.brand-crest {
  width: 34px; height: 34px; flex: none; object-fit: contain;
  background: #fff; border-radius: 50%; padding: 2px;
}
.brand strong { display: block; font-size: 15px; letter-spacing: .01em; }
.brand small { display: block; font-size: 11px; color: rgba(255,255,255,.62); }

/* Never wrap. Below the breakpoint the overflow menu takes the strain, and a
   second row of links pushing the page down is what this replaced. */
.topbar nav { display: flex; gap: 2px; flex: 1; flex-wrap: nowrap; min-width: 0; }
.topbar nav a {
  color: rgba(255,255,255,.78); padding: 7px 11px; border-radius: var(--radius-sm);
  font-size: 14px; white-space: nowrap;
}
.topbar nav a:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }
.topbar nav a.on { background: var(--orange); color: #fff; font-weight: 600; }

/* ---------- The "More" menu ----------
   A checkbox and a label rather than a button and a script: the CSP forbids
   inline script, and every other control here works without JavaScript.
   On a wide screen the menu is not a menu at all — `display: contents` drops
   its links straight into the nav row, so there is one set of links in the
   markup rather than a duplicate set for each layout. */
.navmore-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; }
.navmore-btn { display: none; }
.topbar nav .navmore { display: contents; }

.whobox { display: flex; align-items: center; gap: 8px; }
.who {
  color: rgba(255,255,255,.82); font-size: 13px; padding: 4px 12px;
  border: 1px solid rgba(255,255,255,.22); border-radius: 999px;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  /* Capped so that a long name cannot be what pushes the bar over its width. */
  max-width: 190px; overflow: hidden; text-overflow: ellipsis;
}
.whobox { flex: none; }
.who:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }
.who-role {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  background: rgba(255,255,255,.16); padding: 1px 6px; border-radius: 999px;
}
.who-out { color: rgba(255,255,255,.6); font-size: 12.5px; white-space: nowrap; }
.who-out:hover { color: #fff; }

/* Sign-in page: no chrome, just the form */
body.plain .topbar nav, body.plain .whobox { display: none; }

/* ---------- Narrow screens ----------
   Two steps. Under 900px the bar cannot hold nine links, so everything past
   the first two folds into "More". Under 560px — a phone — the club name and
   the role chip go too, leaving the crest, the two links, the menu and a way
   out. Nothing becomes unreachable at any width; it only moves. */

/* 1200px, not a rounder number: the bar caps at --max (1240px) and the full
   set of nine links plus the crest and the account chip needs every pixel of
   it. Below this the row genuinely does not fit, whatever the screen size. */
@media (max-width: 1200px) {
  .topbar-inner { gap: 12px; padding: 0 14px; min-height: 54px; }
  .topbar nav { flex-wrap: nowrap; }

  .navmore-btn {
    display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
    color: rgba(255,255,255,.78); padding: 7px 12px; border-radius: var(--radius-sm);
    font-size: 14px; white-space: nowrap; -webkit-user-select: none; user-select: none;
  }
  .navmore-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
  .navmore-btn.has-current { color: #fff; box-shadow: inset 0 -2px 0 var(--orange); }
  /* The checkbox is off-screen, so the focus ring has to be drawn on the label. */
  .navmore-toggle:focus-visible + .navmore-btn {
    outline: 2px solid var(--orange); outline-offset: 2px;
  }

  .bars { position: relative; }
  .bars, .bars::before, .bars::after {
    display: block; width: 17px; height: 2px; background: currentColor; border-radius: 2px;
  }
  .bars::before, .bars::after { content: ""; position: absolute; left: 0; }
  .bars::before { top: -6px; }
  .bars::after { top: 6px; }
  .navmore-toggle:checked + .navmore-btn .bars { background: transparent; }
  .navmore-toggle:checked + .navmore-btn .bars::before { top: 0; transform: rotate(45deg); }
  .navmore-toggle:checked + .navmore-btn .bars::after { top: 0; transform: rotate(-45deg); }

  /* .topbar is sticky, so it is the containing block for this panel. */
  .topbar nav .navmore {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 2px; padding: 8px;
    background: var(--navy-800);
    border-top: 1px solid rgba(255,255,255,.14);
    border-bottom: 3px solid var(--orange);
    box-shadow: 0 14px 28px rgba(0,0,0,.3);
    z-index: 40;
  }
  .navmore-toggle:checked ~ .navmore { display: flex; }
  .topbar nav .navmore a { padding: 12px 14px; font-size: 15px; }
}

/* 760px: measured, not guessed. The crest, the club name, two links, the menu
   button and the account chip need about 713px between them; below that the
   links start running underneath the chip. The name is the piece worth losing
   first — the crest still says whose site this is, and still goes home. */
@media (max-width: 760px) {
  .brand > span { display: none; }
  .navmore-label { display: none; }
  .navmore-btn { padding: 8px 10px; }
  .who-role { display: none; }
  .who { max-width: 120px; padding: 4px 10px; }
}

/* At 375px the bar measures 361px used of 375, so the account chip stays —
   it is the only way to reach your own account from the top of the page. */
@media (max-width: 420px) {
  .topbar nav a { padding: 7px 9px; }
  .who { max-width: 104px; }
}

@media (max-width: 560px) {
  main { padding: 18px 16px 48px; }
  .page-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .page-head h1 { font-size: 21px; }
  .head-actions > * { flex: 1 1 auto; }

  /* One number per row reads better than four squeezed columns. */
  .counts .count { flex: 1 1 calc(50% - 1px); border-right: 0; border-bottom: 1px solid var(--border); }
  .counts .count:nth-last-child(-n+2) { border-bottom: 0; }

  .card { padding: 14px; }
  table.grid { font-size: 13.5px; }
  table.grid th, table.grid td { padding: 8px 9px; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; }
  .tabs a { white-space: nowrap; }
  .foot { flex-direction: column; gap: 6px; text-align: center; }
}

/* A touch target of 24px minimum, per WCAG 2.2, once there is no mouse. */
@media (pointer: coarse) {
  .topbar nav a, .navmore-btn, .who, .who-out { min-height: 34px; display: inline-flex; align-items: center; }
  .tabs a { min-height: 40px; display: inline-flex; align-items: center; }
}
.login-card { margin-top: 8vh; text-align: center; }
/* No roundel needed here — the card is white, so the navy lettering reads. */
.login-card .login-crest {
  width: 132px; height: 132px; margin: 0 auto 14px; display: block;
  object-fit: contain;
}
.login-card h1 { margin: 0 0 2px; font-size: 22px; }
.login-card .form, .login-card .flash { text-align: left; }
.login-card .field { margin-bottom: 12px; }
.login-card .flash pre { margin: 6px 0; }

.sso-btn { gap: 10px; padding: 11px 16px; font-size: 15px; }
.ms-logo {
  width: 17px; height: 17px; flex: none;
  background:
    linear-gradient(to bottom right, #f25022 0 50%, transparent 50%) 0 0 / 51% 51% no-repeat,
    linear-gradient(to bottom left,  #7fba00 0 50%, transparent 50%) 100% 0 / 51% 51% no-repeat,
    linear-gradient(to top right,    #00a4ef 0 50%, transparent 50%) 0 100% / 51% 51% no-repeat,
    linear-gradient(to top left,     #ffb900 0 50%, transparent 50%) 100% 100% / 51% 51% no-repeat;
}

.or-rule {
  display: flex; align-items: center; gap: 12px; margin: 18px 0;
  color: var(--text-mute); font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
}
.or-rule::before, .or-rule::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ---------- Home and away on the calendar ---------- */

.ev-venue {
  display:inline-block; min-width:15px; padding:0 3px; margin-right:4px;
  border-radius:3px; font-size:9.5px; font-weight:700; line-height:14px;
  text-align:center; vertical-align:1px; letter-spacing:.02em;
}
.ev.v-home .ev-venue { background:var(--green);  color:#fff; }
.ev.v-away .ev-venue { background:var(--slate);  color:#fff; }
/* An away game is somewhere else, so it should not read as loudly as a
   matchday at the ground. */
.ev.v-away { opacity:.82; }
.ev.v-away .ev-title { font-weight:400; }

/* ---------- Matchday ---------- */

.rooms-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; }
.room-card { border:1px solid var(--border-2); border-radius:var(--radius);
  padding:10px 12px; display:flex; flex-direction:column; gap:6px; min-width:0; }
.room-card .room-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.room-card .room-head strong { font-size:14px; }
.room-card .room-head span { font-size:12px; color:var(--text-dim); font-variant-numeric:tabular-nums; }
.room-card .bar { height:5px; border-radius:3px; background:var(--surface-2); overflow:hidden; }
.room-card .bar i { display:block; height:100%; background:var(--green); }
.room-card.tight .bar i { background:var(--amber); }
.room-card .room-foot { font-size:11.5px; color:var(--text-mute); }
.room-links { display:flex; flex-wrap:wrap; gap:8px; font-size:11.5px; }
/* A card body that needs its own padding, unlike the flush tables. */
.card.flush-pad > *:not(h2) { padding-inline:16px; }
.card.flush-pad > *:last-child { padding-bottom:14px; }

/* ---------- Table plans ---------- */

/* The strip of figures above the plan. */
.counts { display:flex; flex-wrap:wrap; gap:0; margin-bottom:14px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.counts .count { flex:1 1 130px; min-width:0; padding:10px 13px; border-right:1px solid var(--border); }
.counts .count:last-child { border-right:0; }
.counts .k { display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-mute); }
.counts .v { display:block; font-size:20px; font-weight:700; margin-top:2px; font-variant-numeric:tabular-nums; }
.counts .count.warn .v { color:var(--red); }

.zonebar { display:flex; align-items:baseline; gap:10px; margin:14px 2px 8px; }
.zonebar h3 { margin:0; font-size:13px; font-weight:600; }
.zonebar span { font-size:11.5px; color:var(--text-mute); font-variant-numeric:tabular-nums; }

.tbl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(216px,1fr)); gap:9px; }
.tbl { background:var(--surface); border:1px solid var(--border-2); border-radius:var(--radius);
  padding:10px 11px; display:flex; flex-direction:column; gap:7px; min-width:0; }
.tbl.full { background:var(--surface-2); }
.tbl.over { border-color:var(--red); background:var(--red-bg); }
.tbl-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.tbl-cap { font-size:12px; color:var(--text-dim); font-variant-numeric:tabular-nums; }
.tbl.over .tbl-cap { color:var(--red); font-weight:600; }
.tbl-bar { height:5px; border-radius:3px; background:var(--surface-2); overflow:hidden; }
.tbl-bar i { display:block; height:100%; background:var(--green); }
.tbl.over .tbl-bar i { background:var(--red); }
.tbl-seated { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.tbl-seated li { display:flex; align-items:center; gap:6px; font-size:12.5px;
  background:var(--surface-2); border-radius:6px; padding:4px 7px; }
.tbl-seated .nm { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tbl-seated .n { font-size:11.5px; color:var(--text-dim); font-variant-numeric:tabular-nums; }
.tbl-free { font-size:11.5px; color:var(--text-mute); }

.unseated { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.unseated li { border:1px solid var(--border); border-radius:var(--radius);
  padding:9px 10px; background:var(--surface-2); display:flex; flex-direction:column; gap:7px; }
.u-who { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; }
.u-seats { font-size:11.5px; color:var(--text-dim); font-variant-numeric:tabular-nums; }
.u-org, .u-note { flex-basis:100%; font-size:11.5px; color:var(--text-mute); }
.unseated select { max-width:100%; }
.hint.mt { margin-top:14px; }

/* On the printed function sheet. */
.sheet-sub { margin:2px 0 10px; font-size:12px; color:#444; }
.sheet-zone { margin:14px 0 6px; font-size:13px; }

/* ---------- Building an approval route ---------- */

/* Collapsed by default. Five routes fully open is several screens of forms to
   scroll past before you reach the one you came for. */
details.route-card { padding:0; }
details.route-card > summary {
  list-style:none; cursor:pointer; padding:13px 16px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  border-radius:var(--radius);
}
details.route-card > summary::-webkit-details-marker { display:none; }
/* The disclosure triangle is drawn rather than inherited, so it can sit on the
   left at a size that matches the text and turn when the route opens. */
details.route-card > summary::before {
  content:""; flex:none; width:0; height:0;
  border-left:6px solid var(--text-mute);
  border-top:4.5px solid transparent; border-bottom:4.5px solid transparent;
  transition:transform .12s ease;
}
details.route-card[open] > summary::before { transform:rotate(90deg); }
details.route-card > summary:hover { background:var(--surface-2); }
details.route-card > summary:focus-visible { outline:2px solid var(--orange); outline-offset:-2px; }
.route-title { font-weight:600; font-size:15px; }
/* Pushed right so the counts line up down the list and can be skimmed. */
.route-sum { margin-left:auto; font-size:12.5px; color:var(--text-mute); }
.route-body { padding:0 16px 14px; }

/* Modules on an access profile: two or three columns so the whole set can be
   taken in at once rather than scrolled. */
.module-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:6px 18px; margin-bottom:12px;
}
.module-grid .check label small { display:block; color:var(--text-mute); font-size:11.5px; }

.route-when, .route-then { padding:10px 0; border-top:1px solid var(--border); }
.route-lab {
  display:block; font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-mute); margin-bottom:6px;
}
.cond-list, .appr-chips { list-style:none; margin:0 0 8px; padding:0;
  display:flex; flex-wrap:wrap; gap:6px; }
.cond-list li, .appr-chips li {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:999px; padding:3px 6px 3px 11px; font-size:12.5px;
}
.appr-chips li.muted { color:var(--text-mute); font-style:italic; padding-right:11px; }
.linkbtn {
  border:0; background:transparent; cursor:pointer; font-size:15px; line-height:1;
  color:var(--text-mute); padding:0 3px;
}
.linkbtn:hover { color:var(--red); }
.step-list { margin:0 0 10px; padding-left:20px; display:flex; flex-direction:column; gap:12px; }
.step-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:5px; }
.route-acts { border-top:1px solid var(--border); padding-top:10px; }
.route-card .inline-form { border:0; padding:0; margin:0 0 6px; }
.hint.em { font-style:italic; }
.flash.warn {
  background:var(--amber-bg); border:1px solid var(--amber);
  color:var(--amber); border-radius:var(--radius); padding:11px 14px; margin-bottom:14px;
}

/* ---------- Approval route on a booking ---------- */

.appr-route { margin:0 0 10px; font-weight:600; font-size:13.5px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.appr-steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.appr-step { border-left:3px solid var(--border-2); padding-left:10px; }
.appr-step.done     { border-left-color: var(--green); }
.appr-step.waiting  { border-left-color: var(--orange); }
.appr-step.rejected { border-left-color: var(--red); }
.appr-step.queued   { opacity:.6; }
.appr-step-head { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font-size:13px; }
.appr-note { font-size:11.5px; color:var(--text-mute); }
.appr-list { list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:5px; }
.appr { display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:12.5px; }
.appr-who { flex:1 1 auto; min-width:0; }
.appr-by { font-size:11px; color:var(--text-mute); flex-basis:100%; }
.appr-acts { display:flex; gap:5px; flex-basis:100%; margin-top:2px; }

/* ---------- Checking guests in at the door ---------- */

/* Worked with a thumb on a tablet, so the tick is a 44px target — the size
   below which taps start missing. */
.tick {
  width: 44px; height: 44px; padding: 0; cursor: pointer;
  border: 2px solid var(--border-2); border-radius: var(--radius);
  background: var(--surface); font-size: 20px; line-height: 1; color: var(--green);
  -webkit-tap-highlight-color: transparent;
}
.tick:hover  { border-color: var(--green); }
.tick:focus-visible { outline: none; box-shadow: var(--focus); }
.tick.on     { background: var(--green); border-color: var(--green); color: var(--surface); }
.tick[disabled] { opacity: .5; }
.tick-cell   { width: 56px; text-align: center; }
tr.is-in input { background: var(--green-bg); }
.arrivals { margin: 0 0 10px; font-size: 13px; color: var(--text-mute); }
.arrivals-count { font-weight: 700; color: var(--text); font-size: 15px; }

/* A form's first submit button is what Enter triggers. This one sits before
   the check-in tick purely so Enter still means Save. */
.default-submit {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); border: 0;
}

/* Someone else changed the list while this tablet had it open. */
.live-pill {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 60; display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 999px;
  background: var(--navy-800); color: #fff; font-size: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,.28);
}
.live-pill .btn { background: #fff; border-color: #fff; color: var(--navy-800); }
@media print { .live-pill { display: none; } }

/* Feedback for a row that saved in place, instead of reloading the page */
.save-state {
  display: inline-block; min-width: 54px; font-size: 12px;
  vertical-align: middle; transition: opacity .15s;
}
.save-state.saving { color: var(--text-mute); }
.save-state.saved  { color: var(--green); font-weight: 600; }
.save-state.saved::before { content: '✓ '; }
.save-state.failed { color: var(--red); font-weight: 600; }
form[data-inline-save] button[disabled] { opacity: .5; }

/* ---------- Layout ---------- */

main { max-width: 860px; margin: 0 auto; padding: 24px 20px 60px; }
main.wide { max-width: var(--max); }

.page-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.page-head h1 { margin: 0; font-size: 26px; letter-spacing: -.015em; }
.lede { margin: 4px 0 0; color: var(--text-dim); font-size: 14px; }
.crumb { font-size: 12px; color: var(--text-mute); margin-bottom: 4px; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
@media (max-width: 960px) { .cols { grid-template-columns: 1fr; } }

.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }

.foot {
  max-width: var(--max); margin: 0 auto; padding: 18px 20px 30px;
  display: flex; justify-content: space-between; gap: 12px;
  color: var(--text-mute); font-size: 12px; flex-wrap: wrap;
}

/* ---------- Cards ---------- */

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.card.flush { padding: 0; overflow: hidden; }
.card.narrow { max-width: 620px; margin-inline: auto; }
.card.accent { border-left: 4px solid var(--orange); }
.card.danger { border-color: color-mix(in srgb, var(--red) 40%, var(--border)); }
.card > h2 {
  margin: 0 0 14px; font-size: 15px; letter-spacing: .01em;
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.card > h2 .card-action { font-size: 13px; font-weight: 400; }
.card h3 { font-size: 15px; margin: 18px 0 6px; }
.card h4 { font-size: 13px; margin: 14px 0 4px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .05em; }
.card h4:first-child { margin-top: 0; }

.hint { color: var(--text-dim); font-size: 13px; margin: 0 0 12px; }
.empty { color: var(--text-mute); padding: 22px; text-align: center; font-size: 14px; margin: 0; }
.muted { color: var(--text-mute); }
.strike { text-decoration: line-through; }
.warn-text { color: var(--amber); }
.danger-text { color: var(--red) !important; }

/* ---------- Stats ---------- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; display: block; color: var(--text); box-shadow: var(--shadow);
  border-top: 3px solid var(--border-2);
}
a.stat:hover { border-color: var(--orange); text-decoration: none; transform: translateY(-1px); }
.stat { transition: transform .12s, border-color .12s; }
.stat b { display: block; font-size: 26px; line-height: 1.1; letter-spacing: -.02em; }
.stat span { font-size: 12px; color: var(--text-dim); }
.stat.amber { border-top-color: var(--amber); }
.stat.green { border-top-color: var(--green); }

/* ---------- Badges & chips ---------- */

.badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.5;
}
.badge.sm { font-size: 11px; padding: 1px 7px; }
.badge.green  { background: var(--green-bg);  color: var(--green); }
.badge.amber  { background: var(--amber-bg);  color: var(--amber); }
.badge.red    { background: var(--red-bg);    color: var(--red); }
.badge.blue   { background: var(--blue-bg);   color: var(--blue); }
.badge.violet { background: var(--violet-bg); color: var(--violet); }
.badge.slate  { background: var(--slate-bg);  color: var(--slate); }

.tag {
  display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  background: var(--surface-2); color: var(--text-dim); padding: 1px 6px;
  border-radius: 3px; margin-left: 6px; vertical-align: middle;
}

.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.chips-label { font-size: 12px; color: var(--text-mute); margin-right: 4px; min-width: 48px; }
.chip {
  padding: 3px 11px; border-radius: 999px; font-size: 12.5px;
  border: 1px solid var(--border-2); color: var(--text-dim); background: var(--surface);
}
.chip:hover { border-color: var(--orange); text-decoration: none; }
.chip.on { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }

.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.dot.green { background: var(--green); } .dot.amber { background: var(--amber); }
.dot.blue { background: var(--blue); } .dot.violet { background: var(--violet); }
.dot.slate { background: var(--slate); } .dot.red { background: var(--red); }

.legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--text-dim); }
.legend-item { display: inline-flex; align-items: center; }

/* ---------- Tables ---------- */

/* ---------- Table tools: sort, filter, save all ----------
   Added by app.js, so none of this shows without JavaScript — and without
   JavaScript the tables still render and read exactly as before. */

/* "Select all" beside a site heading in the room picker. Added by app.js. */
.room-all {
  float: right; font-size: 12px; font-weight: 500;
  background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-dim); padding: 2px 9px; cursor: pointer;
}
.room-all:hover { border-color: var(--orange); color: var(--orange); }

.table-tools {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 0 0 8px;
}
.card.flush .table-tools { padding: 10px 14px 8px; }
.table-tools .btn.on { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }
.filter-count { font-size: 12.5px; color: var(--text-mute); margin-left: auto; }
.filter-count.on { color: var(--orange); font-weight: 600; }
/* Sits next to "Save all", so it stays left rather than being pushed right. */
.save-summary { font-size: 12.5px; color: var(--text-mute); }
.save-summary.on { color: var(--amber); font-weight: 600; }

th.sortable { cursor: pointer; -webkit-user-select: none; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--navy-800); }
th.sortable:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
/* A faint marker on every sortable column, so it is discoverable without
   hovering every heading to find out which ones move. */
th.sortable::after {
  content: "\2195"; margin-left: 5px; opacity: .3; font-size: 11px;
}
th.sorted-asc::after { content: "\2191"; opacity: 1; color: var(--orange); }
th.sorted-desc::after { content: "\2193"; opacity: 1; color: var(--orange); }

tr.filter-row th { padding: 5px 8px; background: var(--surface-2); }
tr.filter-row input, tr.filter-row select {
  width: 100%; min-width: 70px; font-size: 12.5px; padding: 4px 6px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
}

/* An edited row that has not landed yet. */
tr.row-dirty > td { background: var(--amber-bg); }
.save-state.dirty { color: var(--amber); }

.table-wrap { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; font-size: 14px; }
table.grid th, table.grid td {
  padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top;
}
table.grid thead th {
  background: var(--surface-2); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-dim); font-weight: 700; white-space: nowrap;
  position: sticky; top: 0;
}
table.grid tbody tr:hover { background: var(--surface-2); }
table.grid tfoot th { background: var(--surface-2); font-size: 13px; padding: 10px 12px; }
table.grid .num, .num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid .right { text-align: right; }
.nowrap { white-space: nowrap; }
.ref { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; }
.strong { font-weight: 600; color: var(--text); }
.sub { font-size: 12px; color: var(--text-mute); margin-top: 1px; }
tr.fixture-row { background: color-mix(in srgb, var(--violet-bg) 50%, transparent); }

table.grid input, table.grid select {
  width: 100%; padding: 4px 7px; font-size: 13px; border: 1px solid var(--border-2);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
}
table.grid input.n { max-width: 72px; text-align: right; }
table.grid input[type="checkbox"] { width: auto; }

/* Car park load bar */
.meter {
  width: 100%; min-width: 70px; height: 7px; border-radius: 999px;
  background: var(--surface-2); overflow: hidden; margin-top: 5px;
}
.meter span { display: block; height: 100%; border-radius: 999px; }
.meter span.green { background: var(--green); }
.meter span.amber { background: var(--amber); }
.meter span.red   { background: var(--red); }

.meter.lg { height: 10px; }

/* ---------- Checklists ---------- */

.progress-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.progress-row .meter { flex: 1; min-width: 140px; margin-top: 0; }
.progress-text { font-size: 13px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; }

.phase-head {
  display: flex; align-items: baseline; gap: 6px; margin: 16px 0 6px;
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim);
}
.phase-head:first-of-type { margin-top: 4px; }

table.checklist td { padding: 6px 10px; vertical-align: middle; }
table.checklist td.check-cell { width: 40px; padding-right: 0; }
table.checklist tr.item-done .item-label { color: var(--text-mute); text-decoration: line-through; }
.item-label { font-size: 13.5px; }

.tick {
  width: 22px; height: 22px; border-radius: 6px; cursor: pointer;
  border: 2px solid var(--border-2); background: var(--surface);
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  color: transparent; padding: 0; line-height: 1;
}
.tick:hover { border-color: var(--green); }
.tick.done { background: var(--green); border-color: var(--green); color: #fff; }
.tick.na { background: var(--surface-2); border-color: var(--border-2); color: var(--text-mute); }

.note-input {
  width: 150px; padding: 3px 8px !important; font-size: 12px !important;
  display: inline-block; vertical-align: middle;
}
.mt { margin-top: 12px; }

/* ---------- Comms outbox ---------- */

.msg {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 10px; background: var(--surface);
}
.msg.pending { border-left: 4px solid var(--orange); }
.msg.sent { opacity: .75; }
.msg.dismissed { opacity: .55; }
.msg-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.msg-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.msg-subject { font-weight: 600; font-size: 13.5px; margin: 8px 0 4px; }
.msg-body {
  background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 12px;
  font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; margin: 6px 0 0;
  font-family: inherit; max-height: 320px; overflow: auto;
}
.msg details summary { cursor: pointer; font-size: 12.5px; color: var(--text-dim); margin-top: 6px; }

.distribute { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }

/* Vehicle registrations read better in a fixed-width face */
.reg {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px; letter-spacing: .02em; text-transform: uppercase;
}

table.grid th.pick, table.grid td.pick { width: 34px; padding-right: 0; }
table.grid td.pick input, table.grid th.pick input { width: auto; }

.bulk-bar {
  position: sticky; bottom: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  background: var(--navy-800); color: #fff; padding: 10px 14px;
  border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 16px;
}
.bulk-bar[hidden] { display: none; }
.bulk-bar input[type="text"] {
  flex: 1; min-width: 160px; background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.25); color: #fff;
}
.bulk-bar input::placeholder { color: rgba(255,255,255,.5); }
.bulk-bar .btn { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #fff; }
.bulk-bar .btn:hover { background: rgba(255,255,255,.22); }
.bulk-bar .btn.primary { background: var(--orange); border-color: var(--orange); }
.bulk-bar .btn.danger { background: transparent; border-color: rgba(255,160,160,.55); color: #ffbdbd; }

table.totals, table.rates { width: 100%; border-collapse: collapse; font-size: 14px; }
table.totals td, table.rates td { padding: 5px 0; }
table.totals tr.rule td { border-top: 1px solid var(--border); padding-top: 9px; }
table.totals tr.grand td { border-top: 2px solid var(--navy-700); font-weight: 700; font-size: 16px; padding-top: 9px; }
table.rates td small { display: block; color: var(--text-mute); font-size: 11px; }
table.compare td { font-size: 13.5px; }

/* ---------- Forms ---------- */

.form { margin: 0; }
fieldset {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; margin: 0 0 16px; background: var(--surface);
}
legend {
  padding: 2px 10px; font-weight: 700; font-size: 13px; color: var(--navy-700);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) legend { color: var(--orange); } }

.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 14px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field.full, .fields > .full { grid-column: 1 / -1; }
.field > label { font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
.field .req { color: var(--orange); }
.field small { font-size: 11.5px; color: var(--text-mute); }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="time"], input[type="number"], input[type="search"], input:not([type]),
select, textarea {
  width: 100%; padding: 8px 10px; font: inherit; font-size: 14px;
  border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); min-width: 0;
}
textarea { resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: none; box-shadow: var(--focus); border-color: var(--orange);
}
input[readonly] { background: var(--surface-2); color: var(--text-dim); }

.check { display: flex; align-items: flex-start; gap: 8px; }
.check input { margin-top: 3px; flex: none; }
.check label { font-size: 14px; cursor: pointer; }
.check label small { display: block; color: var(--text-mute); font-size: 11.5px; }
.check-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 6px 12px; }

.conditional { display: none; }
.conditional.show { display: block; }
.conditional > .fields {
  border-left: 3px solid var(--orange); padding: 12px 0 4px 14px; margin-top: 4px;
}

.actions { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.actions-inline { justify-content: flex-end; flex-direction: row; align-items: flex-end; gap: 8px; }
.sticky-actions {
  position: sticky; bottom: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 16px; box-shadow: 0 -4px 14px rgba(11,26,51,.08);
  z-index: 10;
}

.inline { display: inline-flex; gap: 4px; align-items: center; }
.inline-form { border-top: 1px dashed var(--border); padding-top: 14px; margin-top: 14px; }
.add-row { display: flex; gap: 6px; margin-top: 10px; padding: 0 18px 16px; flex-wrap: wrap; }
.card:not(.flush) .add-row { padding: 0; }
.add-row input, .add-row select { flex: 1; min-width: 120px; }

.filters .filter-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 12px; align-items: end;
}
.filters.compact .filter-form { grid-template-columns: repeat(auto-fit, minmax(150px, 220px)); }

.danger-form input { margin-bottom: 8px; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 15px; border-radius: var(--radius-sm); border: 1px solid var(--border-2);
  background: var(--surface); color: var(--text); font: inherit; font-size: 14px;
  font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--surface-2); border-color: var(--text-mute); text-decoration: none; }
.btn.primary { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.btn.primary:hover { background: var(--navy-700); border-color: var(--navy-700); }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn.danger:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-dim); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.btn.sm { padding: 4px 10px; font-size: 12.5px; }
.btn.block { display: flex; width: 100%; margin-top: 8px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Flash & panels ---------- */

.flash {
  padding: 11px 15px; border-radius: var(--radius); margin-bottom: 14px;
  font-size: 14px; border: 1px solid; line-height: 1.5;
}
.flash ul { margin: 6px 0 0; padding-left: 20px; }
.flash li + li { margin-top: 3px; }
.flash.info    { background: var(--blue-bg);  border-color: color-mix(in srgb, var(--blue) 35%, transparent);  color: var(--blue); }
.flash.success { background: var(--green-bg); border-color: color-mix(in srgb, var(--green) 35%, transparent); color: var(--green); }
.flash.warn    { background: var(--amber-bg); border-color: color-mix(in srgb, var(--amber) 35%, transparent); color: var(--amber); }
.flash.error   { background: var(--red-bg);   border-color: color-mix(in srgb, var(--red) 35%, transparent);   color: var(--red); }
.flash a { color: inherit; text-decoration: underline; }

/* ---------- Decision bar ---------- */

.decision-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--navy-800); color: #fff; padding: 12px 16px;
  border-radius: var(--radius); margin-bottom: 14px;
}
.decision-bar.closed { background: var(--surface-2); color: var(--text-dim); }
.decision-what { display: flex; flex-direction: column; min-width: 160px; }
.decision-what small { font-size: 11.5px; color: rgba(255,255,255,.65); }
.decision-what small.warn { color: #ffd08a; }
.decision-note { flex: 1; min-width: 180px; background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.25); color: #fff; }
.decision-note::placeholder { color: rgba(255,255,255,.5); }
.decision-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.decision-bar .btn { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #fff; }
.decision-bar .btn:hover { background: rgba(255,255,255,.22); }
.decision-bar .btn.primary { background: var(--orange); border-color: var(--orange); }
.decision-bar .btn.primary:hover { background: var(--orange-d); }
.decision-bar .btn.danger { background: transparent; border-color: rgba(255,160,160,.55); color: #ffbdbd; }
.decision-bar .btn:disabled { opacity: .35; }

/* ---------- Tabs ---------- */

.tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--border); margin-bottom: 16px; flex-wrap: wrap; }
.tabs a {
  padding: 9px 15px; color: var(--text-dim); font-size: 14px; font-weight: 600;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a.on { color: var(--navy-800); border-bottom-color: var(--orange); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tabs a.on { color: var(--orange); } }

/* ---------- Room picker ---------- */

.room-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.room-picker.compact { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px; }
.room-group h4 { margin: 0 0 6px; }
.room-option {
  display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; margin-bottom: 5px; background: var(--surface);
}
.room-option:hover { border-color: var(--border-2); background: var(--surface-2); }
.room-option.on { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 8%, var(--surface)); }
.room-option input { margin-top: 3px; flex: none; }
.room-option strong { display: block; font-size: 13.5px; font-weight: 600; }
.room-option small { display: block; font-size: 11px; color: var(--text-mute); }
.room-option.clash { border-color: var(--red); background: var(--red-bg); }
.room-option.soft-clash { border-color: var(--amber); background: var(--amber-bg); }

/* ---------- Checklist & lists ---------- */

.checklist { list-style: none; margin: 0 0 10px; padding: 0; }
.checklist li {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13.5px;
}
.checklist li:last-child { border-bottom: 0; }

.editable-list { list-style: none; margin: 0; padding: 0; }
.editable-list li {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 13.5px;
}

.dl { margin: 0; }
.dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0;
  border-bottom: 1px solid var(--border); font-size: 13.5px; }
.dl > div:last-child { border-bottom: 0; }
.dl dt { color: var(--text-dim); flex: none; }
.dl dd { margin: 0; text-align: right; }
.dl.tight > div { padding: 4px 0; }

.note-block {
  background: var(--surface-2); border-radius: var(--radius-sm); padding: 9px 11px;
  font-size: 13px; line-height: 1.55; margin-bottom: 10px; white-space: normal;
}

.steps, .flow { padding-left: 20px; }
.steps li, .flow li { margin-bottom: 7px; }
.feed-opts { list-style: none; padding: 0; margin: 8px 0; }
.feed-opts li { padding: 4px 0; font-size: 13px; }
code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px;
  background: var(--surface-2); padding: 1px 5px; border-radius: 3px;
}

.copy-row { display: flex; gap: 6px; margin: 10px 0; }
.copy-row input { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: grid; grid-template-columns: 130px 1fr; gap: 14px;
  padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13.5px;
}
.timeline li:last-child { border-bottom: 0; }
.timeline .when { color: var(--text-mute); font-size: 12px; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .timeline li { grid-template-columns: 1fr; gap: 2px; } }

table.signoff td { vertical-align: middle; }

/* ---------- Calendar ---------- */

table.calendar { width: 100%; border-collapse: collapse; table-layout: fixed; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
table.calendar th {
  background: var(--navy-800); color: #fff; padding: 7px; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .06em;
}
table.calendar td {
  border: 1px solid var(--border); vertical-align: top; height: 108px;
  padding: 4px; width: 14.28%;
}
table.calendar td.pad { background: var(--surface-2); }
table.calendar td.weekend { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
table.calendar td.today { box-shadow: inset 0 0 0 2px var(--orange); }
.daynum { display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--text-dim); font-weight: 700; padding: 1px 3px 3px; }
.daynum em { font-style: normal; font-size: 10px; background: var(--surface-2);
  color: var(--text-mute); padding: 0 5px; border-radius: 999px; }
.day-events { display: flex; flex-direction: column; gap: 2px; }
.ev {
  display: block; padding: 3px 5px; border-radius: 4px; font-size: 11px;
  line-height: 1.3; border-left: 3px solid var(--slate);
  background: var(--surface-2); color: var(--text); overflow: hidden;
}
.ev:hover { text-decoration: none; filter: brightness(.97); }
.ev-time { font-weight: 700; margin-right: 3px; font-variant-numeric: tabular-nums; }
.ev-title { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-room { display: block; color: var(--text-mute); font-size: 10px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev.green  { border-left-color: var(--green);  background: var(--green-bg); }
.ev.amber  { border-left-color: var(--amber);  background: var(--amber-bg); }
.ev.blue   { border-left-color: var(--blue);   background: var(--blue-bg); }
.ev.violet { border-left-color: var(--violet); background: var(--violet-bg); }
.ev.slate  { border-left-color: var(--slate);  background: var(--slate-bg); }
.ev.fixture { font-weight: 700; }
@media (max-width: 760px) { table.calendar td { height: auto; min-height: 60px; } .ev-room { display: none; } }

/* ---------- Success page ---------- */

.success-card { text-align: center; }
.success-card .tick {
  width: 52px; height: 52px; border-radius: 50%; background: var(--green-bg); color: var(--green);
  display: grid; place-items: center; font-size: 27px; margin: 0 auto 12px; font-weight: 700;
}
.success-card .dl, .success-card .steps { text-align: left; }
.success-card h2 { font-size: 14px; margin: 20px 0 6px; text-align: left; }
.success-card .actions { justify-content: center; }

.error-card h1 { font-size: 52px; margin: 0; color: var(--text-mute); }
pre.err { background: var(--surface-2); padding: 12px; border-radius: var(--radius-sm);
  overflow: auto; font-size: 12px; text-align: left; }

/* ---------- Clash panel (built by app.js) ---------- */

.clash-panel { border-radius: var(--radius); padding: 12px 14px; font-size: 13.5px; border: 1px solid; }
.clash-panel.ok    { background: var(--green-bg); border-color: color-mix(in srgb, var(--green) 30%, transparent); color: var(--green); }
.clash-panel.soft  { background: var(--amber-bg); border-color: color-mix(in srgb, var(--amber) 35%, transparent); color: var(--amber); }
.clash-panel.hard  { background: var(--red-bg);   border-color: color-mix(in srgb, var(--red) 35%, transparent);   color: var(--red); }
.clash-panel.info  { background: var(--blue-bg);  border-color: color-mix(in srgb, var(--blue) 30%, transparent);  color: var(--blue); }
.clash-panel ul { margin: 6px 0 0; padding-left: 20px; }
.clash-panel a { color: inherit; text-decoration: underline; }
.clash-panel .alts { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.clash-panel .alt {
  background: var(--surface); border: 1px solid currentColor; border-radius: 999px;
  padding: 2px 10px; font-size: 12px; cursor: pointer; color: inherit; font: inherit;
  font-size: 12px; line-height: 1.6;
}
.clash-panel .alt:hover { filter: brightness(.96); }
.clash-panel .spin { opacity: .6; }

/*
 * The filters reload the page as soon as you change them, so the Apply button
 * next to them is only there for anyone running without JavaScript. Hidden by
 * default and switched back on by a <noscript> rule in the page head — the
 * other way round would show it for a moment on every load.
 */
.nojs-only { display: none; }

/* ---------- Room layout diagrams ----------
 *
 * Drawn in lib/layouts.js as inline SVG. Colours come from the same tokens as
 * everything else so they follow light and dark without a second set, and the
 * print rules below matter most: the function sheet is what the people laying
 * the room out actually hold.
 */

.lay { width: 100%; height: auto; display: block; }
.lay-room  { fill: var(--bg); stroke: var(--border); stroke-width: 1.5; }
.lay-table { fill: var(--slate-bg); stroke: var(--text-dim); stroke-width: 1.2; }
.lay-chair { fill: var(--surface); stroke: var(--text-mute); stroke-width: 1; }
.lay-front { fill: var(--orange); }
.lay-note  { fill: var(--text-mute); font-size: 9px; text-anchor: middle;
  font-family: inherit; }

/*
 * The picker. Radios rather than a dropdown, so the pictures are the choice
 * rather than a hint beside it — and so it still works with JavaScript off,
 * which a dropdown that swaps an image would not.
 */
.layout-pick { display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-top: 4px; }
.layout-pick input { position: absolute; opacity: 0; pointer-events: none; }
.layout-pick label { display: block; cursor: pointer; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px; background: var(--surface); }
.layout-pick label:hover { border-color: var(--text-mute); }
.layout-pick input:checked + label { border-color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange); }
.layout-pick input:focus-visible + label { box-shadow: var(--focus); }
.layout-pick .lay-name { display: block; font-weight: 600; font-size: 13px;
  margin-top: 6px; }
.layout-pick .lay-blurb { display: block; font-size: 11.5px; color: var(--text-dim);
  line-height: 1.35; margin-top: 2px; }

/* Shown beside a booking's room, where the choice is already made. */
.layout-shown { display: flex; gap: 12px; align-items: flex-start; }
.layout-shown .lay { width: 128px; flex: 0 0 auto; }
.layout-shown .lay-blurb { font-size: 12.5px; color: var(--text-dim); }

@media (max-width: 480px) {
  .layout-shown { flex-direction: column; }
  .layout-shown .lay { width: 100%; max-width: 220px; }
}

/* On paper the diagram is the point, so it must not be dropped or shrunk. */
@media print {
  .lay-room  { fill: #fff; stroke: #777; }
  .lay-table { fill: #e8e8e8; stroke: #555; }
  .lay-chair { fill: #fff; stroke: #777; }
  .lay-front { fill: #333; }
  .lay-note  { fill: #555; }
}

@media print {
  .topbar, .foot, .tabs, .decision-bar, .head-actions, .skip { display: none !important; }
  body { background: #fff; }
  .card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
}

/* Admin "preview as" banner (lib/views.js previewBar). Sits under the sticky
   top bar on every page while a preview runs, in the warning colours, so it
   cannot be mistaken for the admin's own view. */
.preview-bar {
  background: var(--amber-bg);
  border-bottom: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);
  color: var(--amber);
  font-size: 14px;
}
.preview-bar-inner {
  max-width: 1200px; margin: 0 auto; padding: 8px 16px;
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between;
}
.preview-bar form { margin: 0; }

/* The Switch menu in the preview banner. A <details>, so it opens without
   script; the panel drops below the banner rather than pushing the page. */
.preview-bar-actions { display: flex; gap: 8px; align-items: center; }
.preview-switch { position: relative; }
.preview-switch > summary { list-style: none; cursor: pointer; }
.preview-switch > summary::-webkit-details-marker { display: none; }
.preview-switch-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  width: min(92vw, 360px);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
  padding: 12px; display: grid; gap: 12px;
}
.preview-switch-form { display: grid; gap: 8px; margin: 0; }
.preview-switch-form + .preview-switch-form { border-top: 1px solid var(--border); padding-top: 12px; }
.preview-switch-form label { display: grid; gap: 4px; font-size: 13px; color: var(--text-dim); }
.preview-switch-form .btn { justify-self: start; }

/* Reason box on an approval step: rejecting a step needs one. */
.appr-note { min-width: 12rem; flex: 1 1 12rem; }

/* Stadium tours on the calendar: a violet "T" badge, like the H and A on fixtures. */
.ev.tour .ev-venue { background: var(--violet); color: #fff; }

/* ---- The public external-request pages (routes/external.js) ---- */
.public-main { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }
.public .topbar { position: static; }
/* The trap field: off-screen rather than hidden, so a bot that reads the markup still sees it. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.choice-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 16px 0; }
.choice-card { display: block; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px;
  text-decoration: none; color: inherit; background: var(--surface); }
.choice-card:hover { border-color: var(--orange); }
.choice-card strong { display: block; font-size: 16px; margin-bottom: 2px; }
.choice-card span { color: var(--text-dim); font-size: 14px; }
.check.full { grid-column: 1 / -1; }

/* External requests waiting for email confirmation, above the Bookings list. */
.ext-waiting { border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); background: var(--amber-bg);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 16px; }
.ext-waiting h2 { font-size: 15px; margin: 0 0 8px; color: var(--amber); display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ext-waiting h2 small { font-weight: 400; font-size: 12px; }

/* The "who can use it" choice on the External requests admin card. */
fieldset.stack { border: 0; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
fieldset.stack legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
fieldset.stack .check { display: flex; gap: 10px; align-items: flex-start; }

/* ---------- Live gate list (a steward's phone) ---------- */

.gate-link { margin: 4px 0 12px; }
.gate-link-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.gate-link-row input { flex: 1 1 280px; min-width: 0; font: 12px Consolas, monospace; padding: 7px 9px;
  border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); }
.gate-reset { margin: 18px 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

body.gate .public-main { max-width: 640px; margin: 0 auto; padding: 12px 14px 40px; }
.g-head h1 { margin: 4px 0 2px; font-size: 24px; }
.g-sub { margin: 0; color: var(--text-dim); }
.g-note { margin: 10px 0 0; padding: 8px 10px; background: var(--amber-bg); color: var(--text);
  border: 1px solid var(--amber); border-radius: var(--radius-sm); font-size: 14px; }
.g-summary { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0; font-size: 16px; }
.g-summary .g-in strong { color: var(--green); font-size: 22px; }
.g-summary .g-to strong { font-size: 22px; }
.g-summary .g-of { color: var(--text-dim); align-self: center; }

.g-search input { width: 100%; box-sizing: border-box; font-size: 18px; padding: 14px 14px; min-height: 52px;
  border: 2px solid var(--border-2); border-radius: var(--radius); background: var(--surface); color: var(--text); }
.g-search input:focus { outline: none; border-color: var(--orange); box-shadow: var(--focus); }

.g-chips { display: flex; gap: 8px; margin: 10px 0; }
.g-chip { flex: 1; min-height: 44px; font: inherit; font-weight: 600; border: 1px solid var(--border-2);
  background: var(--surface); color: var(--text); border-radius: 999px; cursor: pointer; }
.g-chip.on { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }

.g-status { min-height: 1.4em; margin: 6px 0; font-weight: 600; }
.g-status.ok { color: var(--green); }
.g-status.error { color: var(--red); }

.g-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.g-row { display: flex; gap: 10px; align-items: center; justify-content: space-between;
  padding: 10px 12px; background: var(--surface); border: 1px solid var(--border);
  border-left: 6px solid var(--border-2); border-radius: var(--radius); }
.g-row[hidden] { display: none; }
.g-row.in { border-left-color: var(--green); background: var(--green-bg); }
.g-row.part { border-left-color: var(--orange); }
.g-who { display: grid; gap: 1px; min-width: 0; }
.g-reg { font: 700 20px Consolas, monospace; letter-spacing: .5px; }
.g-name { font-size: 16px; overflow-wrap: anywhere; }
.g-meta, .g-memo { font-size: 13px; color: var(--text-dim); }
.g-empty { padding: 16px; text-align: center; color: var(--text-dim); }
.g-act { margin: 0; flex: none; }
.g-tick { min-width: 96px; min-height: 52px; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer;
  border: 2px solid var(--navy-800); background: var(--surface); color: var(--navy-800); border-radius: var(--radius); }
.g-tick.on { background: var(--green); border-color: var(--green); color: #fff; }
.g-step { display: flex; align-items: center; gap: 8px; }
.g-step button { width: 52px; height: 52px; font-size: 26px; font-weight: 700; cursor: pointer;
  border: 2px solid var(--navy-800); background: var(--surface); color: var(--navy-800); border-radius: var(--radius); }
.g-step button:disabled, .g-tick:disabled { opacity: .45; cursor: default; }
.g-count { min-width: 56px; text-align: center; font-size: 15px; }
.g-count strong { font-size: 20px; }
.g-none { margin: 14px 0; text-align: center; }

.g-add { margin: 20px 0 8px; border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--surface); }
.g-add summary { padding: 14px; font-weight: 700; cursor: pointer; min-height: 24px; }
.g-addform { display: grid; gap: 12px; padding: 0 14px 14px; border: 0; }
.g-addform label { display: grid; gap: 4px; font-weight: 600; }
.g-addform input { font-size: 18px; padding: 12px; min-height: 48px; border: 1px solid var(--border-2);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
body.gate .foot { text-align: center; }

.g-sync { margin: 8px 0 0; padding: 8px 12px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; }
.g-sync.ok { background: var(--green-bg); color: var(--green); }
.g-sync.wait { background: var(--amber-bg); color: var(--amber); }
.g-sync.bad { background: var(--red-bg); color: var(--red); }
.g-row.pending { border-left-style: dashed; }
.g-wait { color: var(--amber); font-weight: 600; }
.g-offline { margin: 16px 0 0; font-size: 13px; color: var(--text-dim); text-align: center; }
.g-offline.ok { color: var(--green); }

/* ---------- Cards that fold away ---------- */
.card.collapsible > details > summary { display: flex; align-items: center; gap: 10px; cursor: pointer;
  list-style: none; margin: -4px -4px 0; padding: 4px; border-radius: var(--radius-sm); }
.card.collapsible > details > summary::-webkit-details-marker { display: none; }
.card.collapsible > details > summary::before { content: ""; flex: none; width: 8px; height: 8px;
  border-right: 2px solid var(--text-dim); border-bottom: 2px solid var(--text-dim);
  transform: rotate(-45deg); transition: transform .12s; margin: 0 4px 0 2px; }
.card.collapsible > details[open] > summary::before { transform: rotate(45deg); }
.card.collapsible > details > summary:hover { background: var(--surface-2); }
.card.collapsible > details > summary:focus-visible { outline: none; box-shadow: var(--focus); }
.card.collapsible > details > summary h2 { margin: 0; flex: 1; font-size: 15px; letter-spacing: .01em; }
.card.collapsible > details > summary .card-action { font-size: 13px; font-weight: 400; }
.card.collapsible .fold-body { margin-top: 12px; }
.card.collapsible > details:not([open]) > summary { margin-bottom: -4px; }

.g-testmode { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 14px;
  background: var(--blue-bg); color: var(--blue); border: 1px dashed var(--blue); }
.g-testmode[hidden] { display: none; }

/* ---------- Gate: cars per person, different car, other lists ---------- */
.g-row { flex-direction: column; align-items: stretch; }
.g-main { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.g-row.asking { border-color: var(--border-accent); }
.g-link { display: block; margin: 6px 0 0 auto; background: none; border: 0; color: var(--blue); font: inherit;
  font-size: 13px; text-decoration: underline; cursor: pointer; padding: 4px 0; min-height: 28px; }
.g-choose { margin-top: 10px; padding-top: 10px; border-top: 0.5px solid var(--border); }
.g-q { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.g-cars { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.g-car { min-height: 46px; padding: 0 14px; font: 600 15px Consolas, monospace; border: 2px solid var(--border-2);
  background: var(--surface); color: var(--text); border-radius: var(--radius); cursor: pointer; }
.g-car.on { border-color: var(--blue); background: var(--blue-bg); color: var(--blue); }
.g-lab, .g-confirm { display: grid; gap: 4px; font-size: 13px; margin: 8px 0 0; }
.g-lab input { font-size: 18px; padding: 10px; min-height: 46px; border: 1px solid var(--border-2);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text); text-transform: uppercase; }
.g-confirm { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; padding: 10px;
  border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: var(--surface-2); }
.g-confirm input { margin-top: 3px; width: 20px; height: 20px; flex: none; }
.g-err { min-height: 18px; margin: 4px 0 0; font-size: 13px; color: var(--red); font-weight: 600; }
.g-go { width: 100%; min-height: 50px; font: 700 16px inherit; border: 0; border-radius: var(--radius);
  background: var(--navy-800); color: #fff; cursor: pointer; }
.g-cancel { width: 100%; margin-top: 6px; min-height: 40px; background: none; border: 0; color: var(--text-dim);
  font: inherit; cursor: pointer; }
.g-hint { margin: 8px 0 0; font-size: 12px; color: var(--text-dim); }
.g-else { margin: 12px 0; padding: 12px; background: var(--surface-2); border: 1px solid var(--border-2);
  border-left: 6px solid var(--orange); border-radius: var(--radius); }
.g-else[hidden] { display: none; }
.g-else-h { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); font-weight: 600; }
.g-else-row + .g-else-row { margin-top: 10px; padding-top: 10px; border-top: 0.5px solid var(--border); }
.g-else-t { margin: 0; font-size: 15px; }
.g-else-msg { margin: 0; font-size: 14px; color: var(--text-dim); }
.g-addform .g-confirm { margin-top: 4px; }

.g-entry { margin-top: 14px; }
.g-entry .g-lab input { font-size: 24px; letter-spacing: 2px; text-align: center; }
.gate-code { margin: 4px 0 10px; font-size: 14px; }
.gate-code .code { font: 700 20px Consolas, monospace; letter-spacing: 1px; margin: 0 6px; }

/* ---------- Approving from the email ---------- */
.g-facts { margin: 0; display: grid; gap: 8px; }
.g-facts > div { display: grid; grid-template-columns: 90px 1fr; gap: 10px; font-size: 15px; }
.g-facts dt { color: var(--text-dim); font-size: 13px; padding-top: 2px; }
.g-facts dd { margin: 0; overflow-wrap: anywhere; }
.g-decide { margin: 14px 0 8px; }
.g-no { margin: 6px 0 24px; border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--surface); }
.g-no summary { padding: 14px; font-weight: 600; cursor: pointer; min-height: 24px; }
.g-no form { padding: 0 14px 14px; display: grid; gap: 10px; border: 0; }
.g-no textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 10px;
  border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.g-decline { background: var(--red-bg); color: var(--red); font-weight: 700; border: 1px solid var(--red);
  border-radius: var(--radius); min-height: 48px; cursor: pointer; }

/* ---------- Season holders ---------- */
.season-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.season-tabs a { padding: 6px 12px; border: 1px solid var(--border-2); border-radius: 999px; text-decoration: none;
  color: var(--text); font-size: 13px; background: var(--surface); }
.season-tabs a.on { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }
.season-tabs a.on .muted { color: rgba(255,255,255,.7); }
.muted-row td { opacity: .55; }
details.move { display: inline-block; text-align: left; }
details.move summary { list-style: none; cursor: pointer; display: inline-block; }
details.move summary::-webkit-details-marker { display: none; }
.move-form { display: flex; gap: 4px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.move-form select, .move-form input { font-size: 12px; padding: 4px 6px; }

.g-barrier { display: block; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--red); }
.g-vipn strong { color: var(--red); font-size: 22px; }
.g-row .badge.red { font-weight: 700; }

/* ---------- Car park plans ---------- */
.pl-tiles { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; font-size: 13px; }
.pl-tiles span { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 12px; }
.pl-tiles b { font-size: 18px; margin-right: 4px; }
.pl-tiles .g b { color: var(--green); }
.pl-tiles .w { background: var(--amber-bg); border-color: var(--amber); }
.pl-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; margin: 0 0 8px; align-items: center; }
.pl-legend .lg { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -3px; margin-right: 5px; border: 1px solid var(--border-2); }
.pl-tools { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0 0 8px; }
.pl-moving { background: var(--blue-bg); color: var(--blue); border-radius: var(--radius-sm); padding: 6px 12px; font-size: 13px; }
.pl-scroll { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 8px; max-height: 72vh; }
.pl-scroll.sm { max-height: 340px; }
.planmap { display: block; }
.pl-bay { cursor: pointer; }
.pl-bay rect, .pl-bay polygon { stroke: var(--border-2); stroke-width: 1; fill: var(--surface); }
.pl-bay.sel rect, .pl-bay.sel polygon { stroke: var(--orange); stroke-width: 3; }
.pl-bay:focus-visible rect, .pl-bay:focus-visible polygon { stroke: var(--orange); stroke-width: 3; }
.pl-bay rect.pl-band { stroke: none; }
.s-vip rect, .s-vip polygon, .lg.s-vip { fill: var(--red-bg); stroke: var(--red); background: var(--red-bg); }
.s-season rect, .s-season polygon, .lg.s-season { fill: var(--blue-bg); stroke: var(--blue); background: var(--blue-bg); }
.s-booked rect, .s-booked polygon, .lg.s-booked { fill: var(--violet-bg); stroke: var(--violet); background: var(--violet-bg); }
.s-walkup rect, .s-walkup polygon, .lg.s-walkup { fill: var(--amber-bg); stroke: var(--amber); background: var(--amber-bg); }
.s-in rect, .s-in polygon, .lg.s-in { fill: var(--green-bg); stroke: var(--green); background: var(--green-bg); }
.s-flexible rect, .s-flexible polygon { fill: var(--surface); stroke: var(--green); stroke-width: 2; stroke-dasharray: 5 3; }
.lg.s-flexible { background: var(--surface); border: 1px dashed var(--green); }
.s-free rect, .s-free polygon, .lg.s-free { fill: var(--surface); background: var(--surface); }
.s-blocked rect, .s-blocked polygon, .lg.s-blocked { fill: var(--surface-2); stroke: var(--text-mute); background: var(--surface-2); opacity: .8; }
.pl-n { font: 10px sans-serif; fill: var(--text-dim); pointer-events: none; }
.pl-i { font: 700 13px sans-serif; fill: var(--text); pointer-events: none; }
.pl-t { font: 9px sans-serif; fill: var(--text-dim); pointer-events: none; }
.pl-vip { fill: var(--red); pointer-events: none; }
.pl-ok { font: 700 13px sans-serif; fill: var(--green); pointer-events: none; }
.pl-feature rect { fill: var(--surface-2); stroke: var(--border-2); stroke-dasharray: 3 3; }
.pl-feature text { font: 12px sans-serif; fill: var(--text-dim); }
.planmap.moving .pl-bay.s-booked, .planmap.moving .pl-bay.s-vip, .planmap.moving .pl-bay.s-season, .planmap.moving .pl-bay.s-in { opacity: .45; }
.pl-detail { margin: 10px 0; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); font-size: 14px; min-height: 60px; }
.pl-detail h3 { margin: 0 0 6px; font-size: 15px; }
.pl-detail p { margin: 0 0 8px; }
.pl-warn { color: var(--red); font-weight: 600; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }

.rowsearch { display:flex; align-items:center; gap:10px; margin:10px 0 4px; }
.rowsearch input[type=search] { flex:1; max-width:460px; }
tr[hidden] { display:none; }

.backlink { display:inline-block; margin:0 0 10px; font-size:14px; text-decoration:none; }
.backlink:hover { text-decoration:underline; }
@media print { .backlink { display:none; } }

/* The Move form floats over the table so it never widens or cuts off the row. */
details.move { position: relative; }
details.move[open] > summary { background: var(--surface-2); }
details.move .move-form { position: absolute; right: 0; top: 100%; z-index: 20; width: 230px; flex-direction: column; align-items: stretch;
  gap: 6px; padding: 10px; background: var(--surface); border: 1px solid var(--border, #cfd6e4); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
details.move .move-form select, details.move .move-form input { width: 100%; box-sizing: border-box; }
.table-wrap:has(details.move[open]) { padding-bottom: 150px; margin-bottom: -150px; }

.head-actions { flex-wrap: wrap; }
.head-actions .btn, .head-actions input[type=date] { padding-top: 5px; padding-bottom: 5px; font-size: 13px; }
details.menu-btn { position: relative; display: inline-block; }
details.menu-btn > summary { list-style: none; cursor: pointer; }
details.menu-btn > summary::-webkit-details-marker { display: none; }
.menu-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 260px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px; padding: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.menu-pop > a, .menu-pop > button { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; background: none;
  font: inherit; font-size: 14px; color: inherit; text-decoration: none; border-radius: 6px; cursor: pointer; }
.menu-pop > a:hover, .menu-pop > button:hover { background: var(--surface-2); }
.menu-h { font-size: 11px; color: var(--muted, #6b7280); padding: 6px 10px 2px; text-transform: none; }
.card.collapsible > details > summary .card-action { display: flex; align-items: center; gap: 8px; }
.card.collapsible > details > summary .card-action input[type=search] { height: 30px; font-size: 13px; padding: 2px 10px; width: 240px; max-width: 40vw; }
.linkrow { display: flex; gap: 16px; font-size: 13px; margin: 0 0 6px; }
.addrow .fields { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.addrow .fields > * { flex: 1 1 130px; min-width: 110px; }
.addrow .fields > .btn { flex: 0 0 auto; }
.addrow details.opts { margin-top: 8px; }
.addrow details.opts > summary { cursor: pointer; font-size: 13px; color: var(--text-secondary, #555); }
.addrow .hint { margin: 6px 0 0; }

.page-head > div:first-child { min-width: 0; flex: 1 1 280px; }
.page-head .head-actions { flex: 0 1 auto; justify-content: flex-end; }
.event-line { margin: 2px 0 0; font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }

table.grid.aligned { table-layout: fixed; }
table.grid.aligned th:first-child, table.grid.aligned td:first-child { width: 26%; }
table.grid.aligned th:last-child, table.grid.aligned td:last-child { width: 22%; }
table.grid.aligned td, table.grid.aligned th { overflow-wrap: anywhere; }

.preq { border-top: 1px solid var(--border); padding: 12px 0; display: grid; gap: 8px; }
.preq:first-child { border-top: 0; }
.req-do { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.req-do input, .req-do select { max-width: 240px; }

.code-pill { font-family: var(--mono, ui-monospace, Consolas, monospace); font-size: 13px; font-weight: 700; letter-spacing: .06em;
  padding: 3px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); white-space: nowrap; cursor: help; }
.vh { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--link, #1d4ed8); cursor: pointer; }
.linkbtn:hover { text-decoration: underline; }
.linkrow { align-items: center; flex-wrap: wrap; }
.linkrow-sep { color: var(--border-strong, #cbd5e1); }

.drag-handle { flex: none; border: 0; background: none; color: var(--text-secondary, #6b7280); cursor: grab; font-size: 16px; line-height: 1;
  padding: 4px 2px; letter-spacing: -2px; touch-action: none; user-select: none; border-radius: 6px; }
.drag-handle:hover { background: var(--surface-2); color: inherit; }
.drag-handle:focus-visible { outline: 2px solid var(--accent, #2563eb); }
.card.dragging { opacity: .85; box-shadow: 0 8px 24px rgba(0,0,0,.18); outline: 2px dashed var(--border-strong, #94a3b8); }
.card.dragging .drag-handle { cursor: grabbing; }
@media print { .drag-handle { display: none; } }

.cp-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 12px; }
.cp-tools .btn.sm { padding: 5px 12px; font-size: 13px; }
.menu-pop.left { left: 0; right: auto; min-width: 230px; }

.card.drag-gap { height: 60px; overflow: hidden; border: 2px dashed var(--border-strong, #94a3b8); background: transparent; box-shadow: none; }
.card.drag-gap > * { visibility: hidden; }
.drag-ghost { position: fixed; z-index: 1000; margin: 0; pointer-events: none; max-height: 120px; overflow: hidden;
  background: var(--surface, #fff); border-radius: 12px; transform-origin: 30px 24px;
  transition: transform .14s ease, box-shadow .14s ease; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.drag-ghost.lifted { transform: scale(1.025) rotate(.7deg); box-shadow: 0 18px 40px rgba(0,0,0,.28), 0 4px 10px rgba(0,0,0,.16); }
.drag-ghost.settling { transition: top .16s ease, left .16s ease, transform .16s ease, box-shadow .16s ease; }
body.is-dragging, body.is-dragging * { cursor: grabbing !important; user-select: none; }

.card.drag-away { visibility: hidden; height: 0; margin: 0; padding: 0; border: 0; overflow: hidden; }
.drag-slot { height: 60px; margin: 0 0 16px; border: 2px dashed var(--border-strong, #94a3b8); border-radius: 12px; background: transparent; }

.menu-pop.sync-pop { width: min(400px, 92vw); padding: 14px; right: 0; left: auto; }
.sync-lead { margin: 0 0 10px; font-size: 14px; }
.sync-actions { display: flex; flex-direction: column; gap: 8px; }
.sync-actions .btn { text-align: center; justify-content: center; }
.sync-steps { margin: 12px 0 0; font-size: 13px; }
.sync-steps > summary { cursor: pointer; color: var(--link, #1d4ed8); }
.sync-steps ol { margin: 8px 0 4px 18px; padding: 0; display: grid; gap: 6px; }
.sync-note { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-secondary, #555); }

/* The top of every page: the same gap above the title, whatever the page, and a quiet Back. */
main { padding-top: 14px; }
.backlink { display: inline-flex; align-items: center; gap: 4px; height: 26px; margin: 0 0 10px; padding: 0 10px 0 6px;
  font-size: 13px; line-height: 1; color: var(--text-mute, #64748b); text-decoration: none; border-radius: 999px; }
.backlink:hover { background: var(--surface-2); color: var(--text, inherit); text-decoration: none; }
.backlink span { font-size: 18px; line-height: 1; margin-top: -2px; }
.backlink.spacer { display: block; padding: 0; pointer-events: none; }
.backlink.spacer:hover { background: none; }
.page-head { align-items: flex-start; }
.page-head .head-actions { padding-top: 2px; }

/* The small calendar on the dashboard */
.minical { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.minical.loading { opacity: .6; transition: opacity .15s; }
.mc-month { width: 250px; flex: none; }
.mc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 14px; }
.mc-nav { text-decoration: none; padding: 2px 10px; border-radius: 6px; font-size: 18px; line-height: 1; color: var(--text-mute, #64748b); }
.mc-nav:hover { background: var(--surface-2); }
.mc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.mc-grid > b { font-size: 10px; font-weight: 500; color: var(--text-mute, #64748b); padding: 2px 0; }
.mc-day, .mc-pad { display: block; padding: 4px 0 2px; border-radius: 8px; font-size: 12px; line-height: 1.2; text-decoration: none; color: inherit; border: 1.5px solid transparent; }
.mc-day:hover { background: var(--surface-2); }
.mc-day.today { border-color: var(--orange, #e8710a); font-weight: 600; }
.mc-day.sel { background: var(--blue-50, #e0ecff); color: var(--navy, #14213d); font-weight: 600; }
.mc-dots { display: flex; justify-content: center; gap: 2px; height: 6px; margin-top: 2px; }
.mc-dots i, .mc-key i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; }
.mc-home { background: #2f7d32; } .mc-away { background: #b26a00; } .mc-booking { background: #1c64b8; } .mc-tour { background: #6a4bb8; }
.mc-foot { display: flex; justify-content: space-between; font-size: 12px; margin-top: 8px; }
.mc-key { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--text-mute, #64748b); margin-top: 8px; }
.mc-key span { display: inline-flex; align-items: center; gap: 4px; }
.mc-day-list { flex: 1 1 260px; min-width: 240px; }
.mc-title { font-size: 13px; color: var(--text-mute, #64748b); margin-bottom: 4px; }
.mc-item { display: flex; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); text-decoration: none; color: inherit; align-items: flex-start; }
.mc-item:first-of-type { border-top: 0; }
.mc-item:hover .mc-what { text-decoration: underline; }
.mc-time { min-width: 44px; font-size: 12px; color: var(--text-mute, #64748b); padding-top: 1px; font-variant-numeric: tabular-nums; }
.mc-what { flex: 1; font-size: 14px; }
.mc-sub { display: block; font-size: 12px; color: var(--text-mute, #64748b); }
.mc-badge { display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 4px; vertical-align: 1px; }
.mc-b-home { background: #e3f1e4; color: #1e5a21; } .mc-b-away { background: #f1ece0; color: #5a3f00; } .mc-b-tour { background: #ece8f7; color: #3c2a80; }
.mc-none { font-size: 14px; color: var(--text-mute, #64748b); margin: 6px 0; }
.mc-next { font-size: 13px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }

/* ---------- The bar, in three tiers ----------
   The bar has eleven links and the page is never wider than --max, so they cannot all sit on it.
   Dashboard and New request always do. Bookings, Calendar, Car parking and Enquiries do too on a wide
   screen, and move into the menu on a narrower one. Everything else is in the menu at every width.
   The More button is therefore always there, and its panel drops down under it. */
.topbar nav { position: relative; }
.navmore-btn {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  color: rgba(255,255,255,.78); padding: 7px 12px; border-radius: var(--radius-sm);
  font-size: 14px; white-space: nowrap; -webkit-user-select: none; user-select: none;
}
.navmore-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.navmore-btn.has-current { color: #fff; box-shadow: inset 0 -2px 0 var(--orange); }
.navmore-toggle:focus-visible + .navmore-btn { outline: 2px solid var(--orange); outline-offset: 2px; }
.bars { position: relative; }
.bars, .bars::before, .bars::after { display: block; width: 17px; height: 2px; background: currentColor; border-radius: 2px; }
.bars::before, .bars::after { content: ""; position: absolute; left: 0; }
.bars::before { top: -6px; }
.bars::after { top: 6px; }
.navmore-toggle:checked + .navmore-btn .bars { background: transparent; }
.navmore-toggle:checked + .navmore-btn .bars::before { top: 0; transform: rotate(45deg); }
.navmore-toggle:checked + .navmore-btn .bars::after { top: 0; transform: rotate(-45deg); }
.topbar nav .navmore {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; left: auto; min-width: 230px;
  flex-direction: column; gap: 2px; padding: 8px; background: var(--navy-800);
  border: 1px solid rgba(255,255,255,.14); border-bottom: 3px solid var(--orange); border-radius: 10px;
  box-shadow: 0 14px 28px rgba(0,0,0,.3); z-index: 40;
}
.navmore-toggle:checked ~ .navmore { display: flex; }
.topbar nav .navmore a { padding: 11px 14px; font-size: 15px; }
.nav-mid-copy { display: none !important; }
@media (max-width: 1180px) {
  .nav-mid { display: none !important; }
  .nav-mid-copy { display: inline-flex !important; }
  .navmore-btn.has-current-mid { color: #fff; box-shadow: inset 0 -2px 0 var(--orange); }
}
@media (max-width: 1200px) {
  .topbar nav { position: static; }
  .topbar nav .navmore { left: 0; right: 0; min-width: 0; border-radius: 0; border-left: 0; border-right: 0; top: 100%; padding: 8px; }
}

/* A home match day, in the mini calendar */
.mc-day.homeday { background: #dff0e0; color: #1e5a21; font-weight: 600; }
.mc-day.homeday:hover { background: #cfe8d1; }
.mc-day.homeday.sel { background: #2f7d32; color: #fff; }
.mc-day.homeday.sel .mc-dots i { background: #fff; }
.mc-item.home { background: #eef7ee; border-left: 3px solid #2f7d32; padding-left: 9px; border-radius: 0 6px 6px 0; }
.mc-item.home + .mc-item { border-top-color: transparent; }

/* The small-screen sizes above are re-stated after the tiered-bar rules, which would otherwise win. */
@media (max-width: 760px) {
  .navmore-btn { padding: 8px 10px; }
}

/* A phone: the crest, Dashboard, New request, the menu and the account chip have to share 375px. */
@media (max-width: 480px) {
  .topbar-inner { gap: 8px; padding: 0 10px; }
  .topbar nav a { padding: 7px 7px; font-size: 13px; }
  .navmore-btn { padding: 8px 8px; }
  .who { max-width: 62px; padding: 4px 8px; }
  .who-out { font-size: 12px; }
}

/* The smallest phones: Sign out moves into the menu so the account chip keeps its room. */
.nav-signout { display: none !important; }
@media (max-width: 480px) {
  .who { max-width: 54px; }
}
@media (max-width: 380px) {
  .who { max-width: 44px; padding: 4px 6px; }
  .who-out { display: none; }
  .nav-signout { display: block !important; margin-top: 6px; border-top: 1px solid rgba(255,255,255,.14); border-radius: 0 0 6px 6px; }
  .brand-crest { width: 30px; height: 30px; }
}

/* An event away from the stadium */
.ev.offsite .ev-venue { background: #0f766e; color: #fff; }
.mc-offsite { background: #0f766e; } .mc-b-offsite { background: #d5efec; color: #0b4a45; }
.offsite-box { border: 1px dashed var(--border-strong, #94a3b8); border-radius: 10px; padding: 10px 12px; }


/* ---------- Glass look (opt-in, per person: Your account > How it looks) ----------
   Frosted panels over the club's black-and-white Kenilworth Road photograph, under a flat navy
   wash. Soft rounded panels with a gentle shadow. Always the light palette, whatever the device is
   set to. */

:root[data-skin="glass"] {
  color-scheme: light;
  --bg: #0f1d41;
  --surface: rgba(255,255,255,.92);
  --surface-2: rgba(238,241,247,.9);
  --border: rgba(15,29,65,.16);
  --border-2: rgba(15,29,65,.3);
  --text: #101a33;
  --text-dim: #38435b;
  --text-mute: #4a556c;
  --green:  #1f8a4c;  --green-bg:  #e4f4ea;
  --amber:  #9a5c00;  --amber-bg:  #fdf1dd;
  --red:    #c02627;  --red-bg:    #fce8e8;
  --blue:   #1c5fbe;  --blue-bg:   #e5eefb;
  --violet: #6b3fa0;  --violet-bg: #efe8f8;
  --slate:  #38435b;  --slate-bg:  #eaeef5;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 6px 24px rgba(5,12,30,.16);
}

html[data-skin="glass"] body {
  background: #0f1d41 url(/glass-backdrop.jpg) center top / cover fixed;
}
html[data-skin="glass"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(15,29,65,.74);
}

html[data-skin="glass"] .topbar {
  background: rgba(15,29,65,.78);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.2);
}

/* The page itself is one soft frosted sheet, so anything that is not in a card stays readable. */
html[data-skin="glass"] main {
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 24px;
  width: calc(100% - 28px);
  margin-top: 20px; margin-bottom: 20px; padding: 24px 22px 36px;
}
html[data-skin="glass"] .card,
html[data-skin="glass"] .stat {
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 16px;
}
html[data-skin="glass"] .stat { border-top: 1px solid rgba(255,255,255,.7); box-shadow: var(--shadow), inset 0 3px 0 var(--border-2); }
html[data-skin="glass"] .stat.amber { box-shadow: var(--shadow), inset 0 3px 0 var(--orange); }
html[data-skin="glass"] .stat.green { box-shadow: var(--shadow), inset 0 3px 0 var(--green); }
html[data-skin="glass"] .card.flush { overflow: hidden; }
html[data-skin="glass"] .foot,
html[data-skin="glass"] .foot a { color: rgba(255,255,255,.88); }

/* Softer edges all round. */
html[data-skin="glass"] .btn, html[data-skin="glass"] input, html[data-skin="glass"] select,
html[data-skin="glass"] textarea, html[data-skin="glass"] .topbar nav a, html[data-skin="glass"] .who,
html[data-skin="glass"] .tabs a, html[data-skin="glass"] .season-tabs a { border-radius: 10px; }
html[data-skin="glass"] input[type="checkbox"], html[data-skin="glass"] input[type="radio"] { border-radius: revert; }
html[data-skin="glass"] .badge, html[data-skin="glass"] .chip, html[data-skin="glass"] .pill,
html[data-skin="glass"] .live-pill { border-radius: 999px; }
html[data-skin="glass"] .flash, html[data-skin="glass"] .navmore, html[data-skin="glass"] .preview-bar { border-radius: 14px; }

/* No blur available, or the device asks for less transparency: plain solid panels. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-skin="glass"] main { background: rgba(255,255,255,.96); }
  html[data-skin="glass"] .topbar { background: #14284b; }
}
@media (prefers-reduced-transparency: reduce) {
  html[data-skin="glass"] main, html[data-skin="glass"] .card, html[data-skin="glass"] .stat { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html[data-skin="glass"] .topbar { background: #14284b; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media print {
  html[data-skin="glass"] body { background: #fff; }
  html[data-skin="glass"] body::before { display: none; }
  html[data-skin="glass"] main { background: #fff; border: 0; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Phone fixes ---------- */

/* The title block asks for 280px of room; in a stacked header that became 280px of height. */
@media (max-width: 560px) {
  .page-head > div:first-child { flex: 0 0 auto; }
}
.stat { min-width: 0; }
.stat span { display: block; overflow-wrap: anywhere; }

/* On a phone the account chip shows initials, so a long name can never crowd the bar. */
.who-init { display: none; font-weight: 600; letter-spacing: .02em; }
@media (max-width: 560px) {
  .who-full { display: none; }
  .who-init { display: inline; }
  .who, .who:hover { max-width: none; min-width: 34px; justify-content: center; padding: 4px 9px; }
}

/* Glass tiles: a clipped bar across the top, not an inset shadow that bends round the corners. */
html[data-skin="glass"] .stat,
html[data-skin="glass"] .stat.amber,
html[data-skin="glass"] .stat.green {
  position: relative; overflow: hidden; border-top: 1px solid rgba(255,255,255,.7);
  box-shadow: var(--shadow); padding-top: 17px;
}
html[data-skin="glass"] .stat::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--border-2);
}
html[data-skin="glass"] .stat.amber::before { background: var(--orange); }
html[data-skin="glass"] .stat.green::before { background: var(--green); }

/* Glass on a phone: thinner margins so tables and panels get the width. */
@media (max-width: 560px) {
  html[data-skin="glass"] main { width: calc(100% - 16px); margin-top: 10px; margin-bottom: 10px; padding: 16px 10px 28px; border-radius: 20px; }
  html[data-skin="glass"] .card { padding: 12px; }
  html[data-skin="glass"] .card.collapsible > details > summary { min-width: 0; flex-wrap: wrap; }
}

/* Phones draw date and time boxes with their own size and centre the text, so a form's boxes stopped lining up. */
input[type="date"], input[type="time"], input[type="datetime-local"] {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; min-width: 0; box-sizing: border-box;
  min-height: 38px; line-height: 1.3; text-align: left;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value { text-align: left; min-height: 1.3em; }

/* The dashboard's "In the past" tag with its Close button beside it. */
form.close-past { display: inline-flex; align-items: center; gap: 8px; margin: 0; }

/* Glass hover: no nested blur and no lifting tile. Blur inside blur makes browsers redraw the panel
   as the pointer crosses it (a box that flashes), and hover backgrounds are solid so nothing shows through. */
html[data-skin="glass"] .card,
html[data-skin="glass"] .stat { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.92); }
html[data-skin="glass"] a.stat:hover { transform: none; box-shadow: var(--shadow), 0 0 0 2px var(--orange); }
html[data-skin="glass"] { --surface-2: #eef1f7; }
html[data-skin="glass"] .stat { transition: none; }

/* The photo lives on its own fixed layer, not as a fixed body background: a blurred panel over a
   fixed background is redrawn every time the pointer moves over it, which showed as a flashing box. */
html[data-skin="glass"] body { background: #0f1d41; }
html[data-skin="glass"] body::after {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: url(/glass-backdrop.jpg) center top / cover no-repeat;
}

/* ---------- Admin: a menu down the left (a drop-down on a phone) ---------- */
.admin-pick { display: none; }
.admin-side { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.admin-group { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.admin-group h2 { margin: 6px 10px 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); }
.admin-side a, .admin-pick nav a { padding: 8px 10px; border-radius: var(--radius-sm); color: var(--text-dim); }
.admin-side a:hover, .admin-pick nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.admin-side a.on, .admin-pick nav a.on { background: var(--navy-800, #0f1d41); color: #fff; font-weight: 600; }

/* The page's own children sit in the right-hand column; the menu spans the full height on the left. */
main:has(> .admin-side) {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 24px;
  grid-template-rows: repeat(24, auto) 1fr; align-content: start;
}
main:has(> .admin-side) > * { grid-column: 2; min-width: 0; }
main:has(> .admin-side) > .admin-side { grid-column: 1; grid-row: 1 / -1; align-self: start; }
main:has(> .admin-side) > .admin-pick { display: none; }

@media (max-width: 860px) {
  main:has(> .admin-side) { display: block; }
  main:has(> .admin-side) > .admin-side { display: none; }
  main:has(> .admin-side) > .admin-pick { display: block; margin: 0 0 14px; }
  .admin-pick summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 14px; font-size: 15px; font-weight: 600; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-sm); }
  .admin-pick summary::-webkit-details-marker { display: none; }
  .admin-pick summary::after { content: "\25BE"; font-size: 12px; order: 3; }
  .admin-pick summary small { font-weight: 400; font-size: 12px; color: var(--text-mute); margin-left: auto; order: 2; }
  .admin-pick nav { margin-top: 8px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); display: flex; flex-direction: column; }
}

/* Admin tables full of boxes: the menu takes a column, so the boxes keep a readable width and the table scrolls inside its card. */
main:has(> .admin-side) table.grid input[type="text"],
main:has(> .admin-side) table.grid input[type="email"],
main:has(> .admin-side) table.grid input:not([type]) { min-width: 11em; }
main:has(> .admin-side) table.grid input[type="date"],
main:has(> .admin-side) table.grid input[type="time"] { min-width: 9em; }
main:has(> .admin-side) table.grid select { min-width: 8em; }
main:has(> .admin-side) table.grid th, main:has(> .admin-side) table.grid td { white-space: nowrap; }

/* Not enough width for a menu and a wide table side by side: use the drop-down up to a small laptop. */
@media (min-width: 861px) and (max-width: 1280px) {
  main:has(> .admin-side) { display: block; }
  main:has(> .admin-side) > .admin-side { display: none; }
  main:has(> .admin-side) > .admin-pick { display: block; margin: 0 0 14px; }
  .admin-pick summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-size: 15px; font-weight: 600;
    background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-sm); }
  .admin-pick summary::-webkit-details-marker { display: none; }
  .admin-pick summary::after { content: "\25BE"; font-size: 12px; order: 3; }
  .admin-pick summary small { font-weight: 400; font-size: 12px; color: var(--text-mute); margin-left: auto; order: 2; }
  .admin-pick nav { margin-top: 8px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); display: flex; flex-direction: column; }
}

/* No live blur anywhere. Some graphics drivers redraw a blurred panel whenever the pointer moves over it,
   which showed as a flashing box. The panels are slightly more solid instead, so the photo still shows through softly. */
html[data-skin="glass"] main { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.8); }
html[data-skin="glass"] .topbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(15,29,65,.93); }
html[data-skin="glass"] .card, html[data-skin="glass"] .stat { background: rgba(255,255,255,.95); }

/* Number columns in Admin tables: one width each, so the boxes sit under their headings in even columns. */
main:has(> .admin-side) table.grid td:has(> input[type="number"]) { width: 8.5em; min-width: 8.5em; }
main:has(> .admin-side) table.grid td > input[type="number"] { width: 100%; min-width: 0; text-align: center; }
main:has(> .admin-side) table.grid th:has(+ th), main:has(> .admin-side) table.grid th { vertical-align: middle; }

/* A short value (a site name) needs less room than a name does. */
main:has(> .admin-side) table.grid input.narrow:not([type="number"]) { min-width: 0; width: 7em; }

/* ---------- Calendar: day and week views ---------- */

.view-switch { display: inline-flex; border: 1px solid var(--border-2); border-radius: var(--radius-sm); overflow: hidden; }
.view-switch a { padding: 7px 14px; font-size: 14px; color: var(--text-dim); background: var(--surface); }
.view-switch a + a { border-left: 1px solid var(--border-2); }
.view-switch a:hover { background: var(--surface-2); text-decoration: none; color: var(--text); }
.view-switch a.on { background: var(--navy-800, #0f1d41); color: #fff; font-weight: 600; }
.check.inline { display: inline-flex; align-items: center; gap: 6px; align-self: end; padding-bottom: 8px; font-size: 13.5px; }
.check.inline input { margin-top: 0; }

.tl-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 18px; }
.tl { min-width: calc(52px + var(--cols) * var(--mincol)); }
.tl-head, .tl-allday, .tl-body { display: grid; grid-template-columns: 52px repeat(var(--cols), minmax(0, 1fr)); }
.tl-head { background: var(--navy-800, #0f1d41); color: #fff; }
.tl-colhead { text-align: center; padding: 9px 4px; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-left: 1px solid rgba(255,255,255,.14); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-colhead a { color: #fff; display: block; }
.tl-colhead a:hover { text-decoration: none; opacity: .85; }
.tl-h2 { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; }
.tl-colhead.today .tl-h2 { background: var(--orange); }
.tl-allday { border-bottom: 1px solid var(--border); background: var(--surface-2); }
.tl-allday > div { border-left: 1px solid var(--border); padding: 3px; min-width: 0; }
.tl-gutter { font-size: 11px; color: var(--text-mute); text-align: right; padding: 6px 8px 0 0; }
.tl-body { position: relative; margin-top: 8px; }
.tl-hours { position: relative; }
.tl-hours span { position: absolute; right: 8px; transform: translateY(-7px); font-size: 11.5px; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.tl-col { position: relative; border-left: 1px solid var(--border);
  background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--hp) - 1px), var(--border) calc(var(--hp) - 1px), var(--border) var(--hp)); }
.tl-col.today { background-color: rgba(234, 93, 41, .07); }
.tl-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--orange); z-index: 3; pointer-events: none; }

.tl-ev { position: absolute; display: block; box-sizing: border-box; padding: 4px 6px; font-size: 12px; line-height: 1.3; overflow: hidden;
  color: var(--text); border-radius: 8px; border-left: 4px solid var(--border-2); background: var(--surface-2); }
.tl-ev:hover { text-decoration: none; filter: brightness(.96); z-index: 2; }
.tl-ev.green  { border-left-color: var(--green);  background: var(--green-bg); }
.tl-ev.amber  { border-left-color: var(--amber);  background: var(--amber-bg); }
.tl-ev.blue   { border-left-color: var(--blue);   background: var(--blue-bg); }
.tl-ev.violet { border-left-color: var(--violet); background: var(--violet-bg); }
.tl-ev.slate  { border-left-color: var(--slate);  background: var(--slate-bg); }
.tl-ev.fixture .tl-title { font-weight: 700; }
.tl-ev.v-away { opacity: .85; }
.tl-ev.v-home .ev-venue { background: var(--green); color: #fff; }
.tl-ev.v-away .ev-venue { background: var(--slate); color: #fff; }
.tl-ev.tour .ev-venue { background: var(--violet); color: #fff; }
.tl-ev.offsite .ev-venue { background: #0f766e; color: #fff; }
.tl-time { font-weight: 700; margin-right: 4px; font-variant-numeric: tabular-nums; }
.tl-title { font-weight: 600; }
.tl-room { display: block; color: var(--text-dim); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-flat { position: static; margin: 2px 0; }
.tl-none { color: var(--text-dim); font-size: 14px; margin: 6px 4px 14px; }

/* A phone shows a list under each day (week) or one column with the room named (day). */
.tl-phone { display: none; }
.tl-card { position: static; padding: 10px 12px; margin: 0 0 8px; font-size: 14px; border-radius: 12px; }
.tl-card .tl-room { font-size: 12.5px; }
.tl-agenda-day h3 { margin: 16px 4px 8px; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); }
.tl-agenda-day h3 a { color: inherit; }
.tl-todaytag { margin-left: 6px; background: var(--orange); color: #fff; padding: 1px 9px; border-radius: 999px; font-size: 11.5px; letter-spacing: 0; text-transform: none; }
@media (max-width: 760px) {
  .tl-desktop { display: none; }
  .tl-phone { display: block; }
  .view-switch { width: 100%; }
  .view-switch a { flex: 1; text-align: center; padding: 10px; }
}
@media print { .view-switch { display: none; } }

/* The day number in the month view opens that day. */
.daylink { color: inherit; font: inherit; padding: 1px 6px; margin: -1px -6px; border-radius: 6px; }
.daylink:hover { background: var(--surface-2); text-decoration: none; }

/* Day, Week and Month use different words ("Previous day", "September 2026"), so every control in the header
   has one fixed width. Switching view then changes the page underneath and leaves the header where it is. */
.view-switch a { width: 4.8em; text-align: center; box-sizing: border-box; }
@media (max-width: 760px) { .view-switch a { width: auto; } }
.cal-nav { min-width: 10.5em; text-align: center; }
.cal-today { min-width: 5.5em; text-align: center; }
.head-actions:has(.view-switch) { flex-wrap: nowrap; }
@media (max-width: 1100px) { .head-actions:has(.view-switch) { flex-wrap: wrap; } }
@media (max-width: 760px) { .cal-nav, .cal-today { min-width: 0; } }

/* Dashboard tables on a phone: each row becomes a small card, so nothing scrolls sideways. */
@media (max-width: 640px) {
  table.grid.stack, table.grid.stack tbody { display: block; width: 100%; }
  table.grid.stack thead { display: none; }
  table.grid.stack tr { display: flex; flex-direction: column; padding: 10px 12px; margin: 0 0 10px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
  table.grid.stack td { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; padding: 3px 0; border: 0;
    white-space: normal; text-align: left; min-width: 0; }
  table.grid.stack td::before { content: attr(data-label); flex: 0 0 5.8em; font-size: 11.5px; letter-spacing: .04em;
    text-transform: uppercase; color: var(--text-mute); }
  table.grid.stack td:empty { display: none; }
  table.grid.stack td:has(> a.strong) { order: -1; display: block; font-size: 15px; padding-bottom: 4px; }
  table.grid.stack td:has(> a.strong)::before { display: none; }
  table.grid.stack td .sub { display: inline; }
  table.grid.stack td.num { text-align: left; }
}

/* A phone: a one-column grid must be allowed to shrink below its widest child (a table, a long address),
   or the whole page grows wider than the screen and has to be dragged sideways. */
@media (max-width: 960px) { .cols { grid-template-columns: minmax(0, 1fr); } }
.cols > * { min-width: 0; }
.two-col { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.col-main, .col-side { overflow-wrap: anywhere; }

/* Password and web-address boxes were missing from the base form styling, so they drew in the browser's own style. */
input[type="password"], input[type="url"] {
  width: 100%; padding: 8px 10px; font: inherit; font-size: 14px;
  border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); min-width: 0; box-sizing: border-box;
}
html[data-skin="glass"] input[type="password"], html[data-skin="glass"] input[type="url"] { border-radius: 10px; }

/* Testing mode banner (lib/views.js testBar): the same warning colours as the preview bar, so it is hard to miss. */
.test-bar { background: var(--amber-bg); border-bottom: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); color: var(--amber); font-size: 14px; }
.test-bar-inner { max-width: 1200px; margin: 0 auto; padding: 8px 16px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
html[data-skin="glass"] .test-bar { background: #fdf1dd; color: #7a4700; }
@media print { .test-bar { display: none; } }

/* ---------- Calendar: year view ---------- */

.yr-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--text-dim); margin: 0 0 8px; }
.yr-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; box-sizing: border-box; }
.yr-dot.home { background: var(--green); }
.yr-dot.away { background: var(--slate); }
.yr-dot.other { border: 2px solid var(--blue); }
.yr-dot.today { box-shadow: 0 0 0 2px var(--orange); }

.yr-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 26px; padding: 18px 22px; margin-bottom: 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.yr-mhead { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.yr-mhead a { font-weight: 700; font-size: 15px; color: var(--text); }
.yr-mhead span { font-size: 12px; color: var(--text-dim); }
.yr-dow, .yr-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; }
.yr-dow { font-size: 11px; color: var(--text-mute); margin-bottom: 2px; }
.yr-days { row-gap: 2px; justify-items: center; }
.yr-d { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 28px; aspect-ratio: 1; box-sizing: border-box;
  border-radius: 50%; font-size: 12px; color: var(--text); }
a.yr-d { font-weight: 700; }
a.yr-d:hover { text-decoration: none; filter: brightness(.92); }
.yr-d.home { background: var(--green); color: #fff; }
.yr-d.away { background: var(--slate); color: #fff; }
.yr-d.other { border: 2px solid var(--blue); }
.yr-d.today { box-shadow: 0 0 0 2px var(--orange); }

.yr-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr)); gap: 16px; align-items: start; margin-bottom: 18px; }
.yr-group { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.yr-group header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 12px 18px; background: var(--navy-800, #0f1d41); color: #fff; }
.yr-group h2 { margin: 0; font-size: 15px; }
.yr-group header span { font-size: 12.5px; opacity: .85; }
.yr-row { display: grid; grid-template-columns: 7.5em 3.6em minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 18px;
  border-top: 1px solid var(--border); font-size: 13.5px; color: var(--text); }
.yr-group header + .yr-row { border-top: 0; }
.yr-row:hover { background: var(--surface-2); text-decoration: none; }
.yr-date { font-weight: 600; }
.yr-time { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.yr-what { min-width: 0; }
.yr-title { font-weight: 600; }
.yr-place { display: block; color: var(--text-mute); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yr-what .ev-venue { margin-right: 6px; }
.yr-what .ev-venue.v-home { background: var(--green); color: #fff; }
.yr-what .ev-venue.v-away { background: var(--slate); color: #fff; }
.yr-what .ev-venue.tour { background: var(--violet); color: #fff; }
.yr-what .ev-venue.offsite { background: #0f766e; color: #fff; }

@media (max-width: 960px) { .yr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .yr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 12px; }
  .yr-d { max-width: 22px; font-size: 11px; }
  .yr-mhead a { font-size: 14px; }
  .yr-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "date time status" "what what what"; gap: 4px 10px; padding: 10px 14px; }
  .yr-date { grid-area: date; } .yr-time { grid-area: time; } .yr-status { grid-area: status; } .yr-what { grid-area: what; }
}
@media print { .yr-row:hover { background: none; } }

/* ---------- Room use: choosing rooms, and the rooms-by-day grid ---------- */
.room-pick { position: relative; }
.room-pick-box > summary { list-style: none; cursor: pointer; min-width: 14em; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 10px; font-size: 14px; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-sm); }
.room-pick-box > summary::-webkit-details-marker { display: none; }
.room-pick-box[open] > summary { border-color: var(--orange); }
.room-pick-panel { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: min(380px, calc(100vw - 48px)); max-height: 70vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius); box-shadow: 0 12px 36px rgba(5, 12, 30, .3); padding: 10px 0 0; }
.room-pick-tools { display: flex; gap: 8px; align-items: center; padding: 0 14px 10px; border-bottom: 1px solid var(--border); }
.room-pick-tools .sub { margin-left: auto; font-size: 12.5px; }
.room-pick-group { border: 0; margin: 0; padding: 0; }
.room-pick-group .check { display: flex; align-items: center; gap: 10px; padding: 7px 14px; margin: 0; font-size: 14px; }
.room-pick-group .check.grp { background: var(--surface-2); padding-top: 9px; padding-bottom: 9px; }
.room-pick-group .check.grp .sub { margin-left: auto; font-size: 12.5px; }
.room-pick-group .check.room { padding-left: 44px; }
.room-pick-group input { margin: 0; }
.room-pick-nogroup { margin: 0; padding: 9px 14px; background: var(--surface-2); font-weight: 700; }
.room-pick-panel .actions { padding: 10px 14px; border-top: 1px solid var(--border); position: sticky; bottom: 0; background: var(--surface); display: flex; justify-content: flex-end; }

.ru-grid th.num, .ru-grid td.num { text-align: center; }
.ru-grid .ru-cell { min-width: 4.5em; font-variant-numeric: tabular-nums; }
.ru-grid .ru-off { color: var(--text-mute); background: rgba(15, 29, 65, .04); }
.ru-grid tr.ru-group td { background: var(--surface-2); }
.ru-grid td.ru-indent { padding-left: 28px; }
.ru-grid tfoot th { text-align: left; }
.ru-grid tfoot th, .ru-grid tfoot td { border-top: 2px solid var(--border-2); font-weight: 700; }
@media (max-width: 640px) { .room-pick-box > summary { min-width: 0; width: 100%; } .room-pick { width: 100%; } }

/* The People table: room for a full name and a full email address. The page scrolls sideways before the boxes get squashed. */
main:has(> .admin-side) table.people-grid input[name="name"] { min-width: 12em; }
main:has(> .admin-side) table.people-grid input[name="email"] { min-width: 17em; }
main:has(> .admin-side) table.people-grid select { min-width: 8.5em; }
table.people-grid td, table.people-grid th { padding: 8px 7px; }
table.people-grid td.right { min-width: 9em; }