/* =====================================================================================================
   LTFC UI kit: the look and feel shared by every Luton Town FC app (Stadium Events, Pipeline, and the next one).
   Do not edit this file inside an app. It is copied unchanged from the design kit, and `node design-kit/verify.js`
   fails if an app's copy has drifted. App-specific styles go in the app's own stylesheet, loaded after this one.
   ===================================================================================================== */
/* 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);
}

/* 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; }
/* A registration edited in place on a parking row */
form.reg-edit { flex-wrap: wrap; }
form.reg-edit input.reg { min-width: 10.5em; width: 10.5em; }

/* ---------- 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; }

/* ---------- 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="month"],
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; }

/* ---------- 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); } }

/*
 * 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; }

/* ---------- 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; }

.backlink { display:inline-block; margin:0 0 10px; font-size:14px; text-decoration:none; }
.backlink:hover { text-decoration:underline; }
.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; }
.page-head > div:first-child { min-width: 0; flex: 1 1 280px; }
.page-head .head-actions { flex: 0 1 auto; justify-content: flex-end; }
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; }

.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; } }

.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; }

/* 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 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; }
}

/* 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; }
}

/* ---------- 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="month"], 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="month"]::-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; }

/* 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;
}

/* 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); }

/* 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; }

/* The red number on a menu link (a count waiting for somebody), and the dot on More when the link is inside it. */
.nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; margin-left: 6px;
  border-radius: 999px; background: #d92d20; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; border: 2px solid #fff; box-sizing: border-box; }
.nav-dot { display: none; width: 10px; height: 10px; border-radius: 50%; background: #d92d20; border: 2px solid var(--navy-800, #16203a); margin-left: 2px; }
@media (max-width: 1180px) { .nav-dot { display: inline-block; } }
.head-sub { margin: 8px 0 0; }
/* =====================================================================================================
   The glossy look (the default; Your account > How it looks can switch it off).

   Matches Pipeline, so the tools of the club look like one family. The values are in STYLE.md. The
   black-and-white Kenilworth Road photograph sits under a navy wash with frosted near-white cards on
   top, and on a wide screen a navy glass menu runs down the left. Text sits on a card, so it stays dark
   on near-white; only the page title, the links above it and the footer sit on the photograph, and
   those are white. Below 901px the top bar and the phone menu are used, as before.
   ===================================================================================================== */

:root[data-skin="glass"] { --orange: #ea5d29; --orange-d: #c94a1b; --radius: 16px; --radius-sm: 10px; }

/* The page itself is bare background. Cards carry the content.
   Unlike Pipeline, text stays dark by default here: Events has many kinds of light surface that are not cards
   (pop-up menus, the room picker, choice cards, count boxes) and every one would otherwise inherit white. Only what
   really sits on the photograph is made light, in the rules below. */
html[data-skin="glass"] main {
  background: none; border: 0; border-radius: 0; width: auto; margin: 0 auto; padding: 24px 28px 48px;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* On the photograph: the title block, the words and links straight under it, and the footer. */
html[data-skin="glass"] .page-head h1 { color: #fff; font-weight: 600; }
html[data-skin="glass"] .page-head h1 small, html[data-skin="glass"] .page-head h1 .muted { color: #d6e2fa; font-weight: 400; }
html[data-skin="glass"] .page-head > div:first-child p, html[data-skin="glass"] .page-head > div:first-child .sub,
html[data-skin="glass"] .head-sub, html[data-skin="glass"] .crumb,
html[data-skin="glass"] main > p, html[data-skin="glass"] main > .hint { color: #dbe4f7; }
html[data-skin="glass"] .page-head > div:first-child a:not(.btn), html[data-skin="glass"] .crumb a, html[data-skin="glass"] main > p a:not(.btn),
html[data-skin="glass"] main > .hint a, html[data-skin="glass"] .backlink, html[data-skin="glass"] .backlink:hover { color: #d6e4ff; }
html[data-skin="glass"] .backlink:hover { background: rgba(255,255,255,.14); }
html[data-skin="glass"] main > h2, html[data-skin="glass"] main > h3 { color: #fff; }
html[data-skin="glass"] .foot, html[data-skin="glass"] .foot a { color: #dbe4f7; }
/* A quiet button that sits straight on the photograph needs a surface of its own. */
html[data-skin="glass"] main > form .actions .btn.ghost, html[data-skin="glass"] main > .actions .btn.ghost {
  background: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.8); color: var(--text);
}

/* The tabs on a booking sit on the photograph, not in a card. */
html[data-skin="glass"] .tabs { border-bottom-color: rgba(255,255,255,.3); }
html[data-skin="glass"] .tabs a { color: #dbe4f7; }
html[data-skin="glass"] .tabs a:hover { color: #fff; }
html[data-skin="glass"] .tabs a.on { color: #fff; border-bottom-color: var(--orange); }

/* Cards and tiles: frosted glass with a bright top edge. */
html[data-skin="glass"] .card, html[data-skin="glass"] .stat {
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.84));
  border: 1px solid rgba(255,255,255,.8); border-radius: 16px;
  box-shadow: 0 10px 32px rgba(6,14,40,.28), inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
html[data-skin="glass"] .stat::before { display: none; }
html[data-skin="glass"] .stat, html[data-skin="glass"] .stat.amber, html[data-skin="glass"] .stat.green {
  padding: 16px 18px; border-top: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 10px 32px rgba(6,14,40,.28), inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-skin="glass"] .stat b { color: var(--navy-800); }
.stat .stat-ico { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-bottom: 10px;
  border-radius: 10px; background: #e8eaf1; color: #0f1d41; }
.stat.green .stat-ico { background: var(--green-bg); color: var(--green); }
.stat.amber .stat-ico { background: var(--amber-bg); color: var(--amber); }
a.stat { text-decoration: none; }
a.stat:focus-visible { outline: 2px solid var(--navy-800); outline-offset: 2px; }

/* ---------- The menu down the left (wide screens) ---------- */
.sidenav, .side-toggle, .who-out .ico { display: none; }
@media (min-width: 901px) {
  /* Rows: the two bars an administrator can see, the page, the footer. An empty row takes no room. */
  html[data-skin="glass"] body:not(.plain):not(.public) {
    display: grid; grid-template-columns: var(--side-w, 272px) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; min-height: 100vh;
  }
  html[data-skin="glass"] body:not(.plain):not(.public) > .topbar {
    grid-column: 1; grid-row: 1 / span 4; position: sticky; top: 0; height: 100vh; overflow-y: auto;
    background: linear-gradient(180deg, rgba(10,22,58,.78), rgba(8,18,48,.62));
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border-bottom: 0; border-right: 1px solid rgba(255,255,255,.14);
    /* the club's double stripe down the left edge */
    box-shadow: inset 17px 0 0 #ea5d29, inset 22px 0 0 #fff, inset 31px 0 0 #ea5d29;
  }
  html[data-skin="glass"] body:not(.plain):not(.public) .topbar-inner {
    flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 20px; height: 100%; max-width: none; margin: 0;
    padding: 24px 16px 20px 46px;
  }
  html[data-skin="glass"] body:not(.plain):not(.public) .brand { gap: 12px; }
  html[data-skin="glass"] body:not(.plain):not(.public) .brand-crest { width: 56px; height: 56px; padding: 3px; }
  html[data-skin="glass"] body:not(.plain):not(.public) .brand strong { font-size: 19px; }
  /* The top bar's own links give way to the grouped list. */
  html[data-skin="glass"] body:not(.plain):not(.public) .topbar .topnav { display: none; }
  html[data-skin="glass"] body:not(.plain):not(.public) .sidenav { display: flex; flex-direction: column; flex: 1 1 auto; gap: 2px; }
  html[data-skin="glass"] body:not(.plain):not(.public) .sidenav a {
    position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 44px; font-size: 14px;
    border-radius: 10px; color: #fff; text-decoration: none; white-space: nowrap;
  }
  html[data-skin="glass"] body:not(.plain):not(.public) .sidenav a:hover { background: rgba(255,255,255,.1); }
  html[data-skin="glass"] body:not(.plain):not(.public) .sidenav a.on { background: rgba(255,255,255,.2); font-weight: 600; }
  html[data-skin="glass"] body:not(.plain):not(.public) .sidenav .ico { display: inline-block; flex: none; }
  html[data-skin="glass"] body:not(.plain):not(.public) .sidenav .nav-badge { margin-left: auto; }
  html[data-skin="glass"] body:not(.plain):not(.public) .sidenav .nav-group {
    display: block; padding: 16px 12px 4px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #b4bfdc;
  }
  html[data-skin="glass"] body:not(.plain):not(.public) .whobox {
    margin-top: auto; flex-direction: column; align-items: stretch; gap: 6px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14);
  }
  html[data-skin="glass"] body:not(.plain):not(.public) .who { justify-content: center; max-width: none; }
  html[data-skin="glass"] body:not(.plain):not(.public) .who-out {
    display: flex; align-items: center; justify-content: center; gap: 8px; color: #d6e4ff; font-size: 13px; padding: 8px;
  }
  html[data-skin="glass"] body:not(.plain):not(.public) .who-out .ico { display: block; }
  html[data-skin="glass"] body:not(.plain):not(.public) > .preview-bar { grid-column: 2; grid-row: 1; }
  html[data-skin="glass"] body:not(.plain):not(.public) > .test-bar { grid-column: 2; grid-row: 2; }
  html[data-skin="glass"] body:not(.plain):not(.public) > main { grid-column: 2; grid-row: 3; width: 100%; }
  html[data-skin="glass"] body:not(.plain):not(.public) > .foot { grid-column: 2; grid-row: 4; }
}
@media (max-width: 560px) {
  html[data-skin="glass"] main { width: auto; margin: 0; padding: 16px 12px 32px; border-radius: 0; }
}
@media (prefers-reduced-transparency: reduce) {
  html[data-skin="glass"] .card, html[data-skin="glass"] .stat { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media print {
  html[data-skin="glass"] body { background: #fff; display: block; }
  html[data-skin="glass"] main, html[data-skin="glass"] .page-head h1, html[data-skin="glass"] .page-head p { color: #000; }
  html[data-skin="glass"] .topbar { display: none; }
}

/* ---------- Collapsing the menu ----------
   A button at the top of the menu (wide screens, and only when side.js has run) shrinks it to a strip of icons. The names stay
   in the page for screen readers and appear as tooltips. The choice is remembered per browser by side.js. */
@media (min-width: 901px) {
  html.has-side-js[data-skin="glass"] body:not(.plain):not(.public) .side-toggle {
    display: inline-flex; align-items: center; justify-content: center; align-self: flex-end;
    width: 34px; height: 34px; margin: -8px 0 -6px; padding: 0; cursor: pointer; color: #fff;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.28); border-radius: 10px;
  }
  html.has-side-js[data-skin="glass"] body:not(.plain):not(.public) .side-toggle:hover { background: rgba(255,255,255,.2); }
  html.has-side-js[data-skin="glass"] body:not(.plain):not(.public) .side-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  html[data-skin="glass"] body:not(.plain):not(.public) .side-toggle .ico { display: block; transition: transform .2s; }
  html[data-skin="glass"] body:not(.plain):not(.public) { transition: grid-template-columns .2s ease; }

  html.side-collapsed[data-skin="glass"] { --side-w: 92px; }
  html.side-collapsed[data-skin="glass"] body:not(.plain):not(.public) .topbar-inner { padding: 20px 8px 16px 38px; align-items: center; gap: 14px; }
  html.side-collapsed[data-skin="glass"] body:not(.plain):not(.public) .brand > span { display: none; }
  html.side-collapsed[data-skin="glass"] body:not(.plain):not(.public) .brand-crest { width: 44px; height: 44px; }
  html.side-collapsed[data-skin="glass"] body:not(.plain):not(.public) .side-toggle { align-self: center; }
  html.side-collapsed[data-skin="glass"] body:not(.plain):not(.public) .side-toggle .ico { transform: rotate(180deg); }
  html.side-collapsed[data-skin="glass"] body:not(.plain):not(.public) .sidenav { align-self: stretch; }
  html.side-collapsed[data-skin="glass"] body:not(.plain):not(.public) .sidenav .nav-group { display: none; }
  html.side-collapsed[data-skin="glass"] body:not(.plain):not(.public) .sidenav a { justify-content: center; padding: 10px 0; }
  /* The number on Car parking becomes a dot on its icon. */
  html.side-collapsed[data-skin="glass"] body:not(.plain):not(.public) .sidenav .nav-badge {
    position: absolute; top: 4px; right: 12px; margin: 0; min-width: 0; width: 12px; height: 12px; padding: 0; font-size: 0;
  }
  /* The words leave the screen but stay in the page, so a screen reader still hears them. */
  html.side-collapsed[data-skin="glass"] body:not(.plain):not(.public) .sidenav a > .nav-label,
  html.side-collapsed[data-skin="glass"] body:not(.plain):not(.public) .who-out > span,
  html.side-collapsed[data-skin="glass"] body:not(.plain):not(.public) .who .who-full,
  html.side-collapsed[data-skin="glass"] body:not(.plain):not(.public) .who .who-role {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  html.side-collapsed[data-skin="glass"] body:not(.plain):not(.public) .who .who-init { display: inline; }
  html.side-collapsed[data-skin="glass"] body:not(.plain):not(.public) .who { padding: 6px 0; min-width: 0; width: 100%; }
  html.side-collapsed[data-skin="glass"] body:not(.plain):not(.public) .who-out { padding: 10px 0; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-skin="glass"] body:not(.plain):not(.public), html[data-skin="glass"] body:not(.plain):not(.public) .side-toggle .ico { transition: none; }
}

/* ---------- Moving and folding cards ---------- */
html[data-skin="glass"] .card.collapsible > details > summary { border-radius: 10px; }
html[data-skin="glass"] .drag-ghost { background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.9)); color: var(--text); border-radius: 16px; }
html[data-skin="glass"] .drag-slot { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.12); border-radius: 16px; }

/* ---------- The main action in a page header is orange, with white text ----------
   A deeper orange than the brand's, so white lettering stays readable (4.7 to 1). Never blue lettering on orange. */
.page-head .btn.primary { background: #c94a1b; border-color: #c94a1b; color: #fff; }
.page-head .btn.primary:hover { background: #b34016; border-color: #b34016; color: #fff; text-decoration: none; }
.page-head .btn.primary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px #c94a1b; }

/* The menu down the left has eleven links, so it is a little tighter than Pipeline's eight, to keep Sign out on screen. */
@media (min-width: 901px) {
  html[data-skin="glass"] body:not(.plain):not(.public) .topbar-inner { gap: 14px; padding-top: 20px; padding-bottom: 14px; }
  html[data-skin="glass"] body:not(.plain):not(.public) .brand strong { font-size: 17px; white-space: nowrap; }
  html[data-skin="glass"] body:not(.plain):not(.public) .sidenav a { min-height: 40px; padding: 8px 12px; }
  html[data-skin="glass"] body:not(.plain):not(.public) .sidenav .nav-group { padding: 12px 12px 2px; }
  html[data-skin="glass"] body:not(.plain):not(.public) .whobox { padding-top: 10px; }
}

/* ---------- The menu on a short window ----------
   The crest and the account box stay put; only the list of links scrolls, with no scrollbar drawn (wheel, touchpad, touch and
   keyboard all still work).
   And the menu closes up a step at a time as the window gets shorter, so a laptop with a bookmarks bar and some zoom
   usually fits all of it without scrolling at all. */
@media (min-width: 901px) {
  html[data-skin="glass"] body:not(.plain):not(.public) > .topbar { overflow: hidden; }
  html[data-skin="glass"] body:not(.plain):not(.public) .topbar-inner { min-height: 0; }
  html[data-skin="glass"] body:not(.plain):not(.public) .brand, html[data-skin="glass"] body:not(.plain):not(.public) .side-toggle, html[data-skin="glass"] body:not(.plain):not(.public) .whobox { flex: none; }
  html[data-skin="glass"] body:not(.plain):not(.public) .sidenav {
    min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  html[data-skin="glass"] body:not(.plain):not(.public) .sidenav::-webkit-scrollbar { display: none; }
}
@media (min-width: 901px) and (max-height: 860px) {
  html[data-skin="glass"] body:not(.plain):not(.public) .topbar-inner { gap: 10px; padding-top: 16px; padding-bottom: 10px; }
  html[data-skin="glass"] body:not(.plain):not(.public) .brand-crest { width: 48px; height: 48px; }
  html[data-skin="glass"] body:not(.plain):not(.public) .sidenav a { min-height: 36px; padding: 6px 12px; }
  html[data-skin="glass"] body:not(.plain):not(.public) .sidenav .nav-group { padding: 8px 12px 0; }
  html[data-skin="glass"] body:not(.plain):not(.public) .whobox { gap: 2px; }
  html[data-skin="glass"] body:not(.plain):not(.public) .who-out { padding: 5px; }
}
@media (min-width: 901px) and (max-height: 720px) {
  html[data-skin="glass"] body:not(.plain):not(.public) .topbar-inner { gap: 6px; padding-top: 12px; padding-bottom: 8px; }
  html[data-skin="glass"] body:not(.plain):not(.public) .brand-crest { width: 40px; height: 40px; }
  html[data-skin="glass"] body:not(.plain):not(.public) .brand strong { font-size: 16px; }
  html[data-skin="glass"] body:not(.plain):not(.public) .brand small { display: none; }
  html[data-skin="glass"] body:not(.plain):not(.public) .sidenav a { min-height: 32px; padding: 4px 12px; font-size: 13.5px; }
  html[data-skin="glass"] body:not(.plain):not(.public) .sidenav .nav-group { padding: 6px 12px 0; font-size: 11px; }
  html[data-skin="glass"] body:not(.plain):not(.public) .whobox { padding-top: 6px; }
}
@media (min-width: 901px) and (max-height: 600px) {
  html[data-skin="glass"] body:not(.plain):not(.public) .sidenav .nav-group { display: none; }
  html[data-skin="glass"] body:not(.plain):not(.public) .sidenav a { min-height: 30px; padding: 3px 12px; }
}
html[data-skin="glass"] .admin-pick { padding: 10px 8px; }

/* ---------- Table switches (see data-ltfc-tables in ltfc-ui.js): the search box, clickable rows, a pinned total row ----------
   Nothing here changes a table that has not turned the switch on. */
.table-search { height: 32px; min-width: 220px; max-width: 100%; padding: 2px 10px; font-size: 13px; }
.table-tools .table-search { width: 260px; flex: 0 1 260px; }
tr.row-link { cursor: pointer; }
tr.row-link:hover > td { background: rgba(15, 29, 65, .07); }
tr.table-total, tr.pl-total, tr.table-total:hover > td, tr.pl-total:hover > td { cursor: default; }

/* ---------- Tiles that can be moved ----------
   A tile wrapped by ui.stat(..., { movable: true }) or LTFC.stat(..., { movable: true }) has a grip, like a card. */
.stat-wrap { position: relative; min-width: 0; display: flex; }
.stat-wrap > .stat { flex: 1; min-width: 0; }
.stat-wrap > .drag-handle { position: absolute; top: 6px; right: 6px; z-index: 1; opacity: 0; }
.stat-wrap:hover > .drag-handle, .stat-wrap:focus-within > .drag-handle { opacity: 1; }
@media (hover: none) { .stat-wrap > .drag-handle { opacity: .7; } }
.stat-wrap.drag-away { visibility: hidden; height: 0; margin: 0; padding: 0; overflow: hidden; }
.stat-wrap.drag-ghost > .drag-handle { display: none; }

/* ---------- Two-level section menu: tabs, and pills for the pages inside the current tab (ui.tabs) ---------- */
.pills { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.pills a {
  display: inline-flex; align-items: center; min-height: 34px; padding: 5px 14px; font-size: 13.5px; text-decoration: none;
  border: 1px solid var(--border-2); border-radius: 999px; background: var(--surface); color: var(--text);
}
.pills a:hover { background: var(--surface-2); text-decoration: none; }
.pills a.on { background: var(--navy-800); border-color: var(--navy-800); color: #fff; font-weight: 600; }
.pills a:focus-visible, .tabs a:focus-visible { outline: none; box-shadow: var(--focus); }
/* Inside a card the tabs are on white, not on the photograph. */
html[data-skin="glass"] .card .tabs { border-bottom-color: var(--border); }
html[data-skin="glass"] .card .tabs a { color: var(--text-dim); }
html[data-skin="glass"] .card .tabs a:hover { color: var(--text); }
html[data-skin="glass"] .card .tabs a.on { color: var(--navy-800); border-bottom-color: var(--orange); }

/* ---------- The greeting at the top of a dashboard (ui.greeting) ---------- */
.greeting h1 i { font-style: normal; color: var(--orange); }
.greeting .lede { max-width: 80ch; }

/* ---------- Search: the button in the menu, and the box it opens (ltfc-ui.js; ui.page({ search })) ---------- */
.side-tools { display: contents; }
.search-open { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 10px; cursor: pointer; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.28); font: inherit; }
.search-open:hover { background: rgba(255,255,255,.2); }
.search-open .ico { display: block; }
.search-open .search-label, .search-open kbd { display: none; }
.side-tools .side-toggle { order: 2; }
@media (min-width: 901px) {
  html[data-skin="glass"] body:not(.plain):not(.public) .side-tools { display: flex; align-items: center; gap: 8px; margin: -4px 0 -2px; }
  html[data-skin="glass"] body:not(.plain):not(.public) .side-tools .search-open { flex: 1; min-width: 0; width: auto; height: 40px; justify-content: flex-start; gap: 12px; padding: 0 12px; font-size: 14px; }
  html[data-skin="glass"] body:not(.plain):not(.public) .side-tools .search-open .search-label { display: block; flex: 1; text-align: left; }
  html[data-skin="glass"] body:not(.plain):not(.public) .side-tools .search-open kbd { display: inline-block; }
  html.has-side-js[data-skin="glass"] body:not(.plain):not(.public) .side-tools .side-toggle { align-self: auto; width: 40px; height: 40px; margin: 0; flex: none; }
  html.side-collapsed[data-skin="glass"] body:not(.plain):not(.public) .side-tools { flex-direction: column; align-self: stretch; margin: 0; }
  html.side-collapsed[data-skin="glass"] body:not(.plain):not(.public) .side-tools .search-open { flex: none; width: 100%; justify-content: center; padding: 0; }
  html.side-collapsed[data-skin="glass"] body:not(.plain):not(.public) .side-tools .search-open .search-label, html.side-collapsed[data-skin="glass"] body:not(.plain):not(.public) .side-tools .search-open kbd { display: none; }
  html.side-collapsed[data-skin="glass"] body:not(.plain):not(.public) .side-tools .side-toggle { width: 100%; }
}
.search-open kbd, .search-hint kbd { font: 600 11px/1 inherit; padding: 3px 6px; border-radius: 5px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: inherit; }
.search-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(8,16,36,.62); display: grid; justify-items: center; align-items: start; padding: max(12px, 9vh) 16px 16px; }
.search-overlay[hidden] { display: none; }
.search-box { width: min(680px, 100%); max-height: 82vh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border-radius: 18px; background: var(--surface); color: var(--text); box-shadow: 0 24px 70px rgba(0,0,0,.5); }
.search-input { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.search-input .ico { color: var(--text-mute); flex: none; }
.search-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; box-shadow: none; padding: 0; font: inherit; font-size: 18px; color: var(--text); }
.search-results { overflow-y: auto; padding: 6px 8px 10px; }
.search-group { display: flex; justify-content: space-between; padding: 10px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }
.search-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 9px 10px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: 14.5px; }
.search-item:hover { text-decoration: none; background: var(--surface-2); }
.search-item.act { background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--orange); }
.search-item small { display: block; font-size: 12.5px; color: var(--text-mute); }
.search-item .si-meta { text-align: right; font-size: 13px; color: var(--text-dim); white-space: pre-line; font-variant-numeric: tabular-nums; flex: none; }
.search-item mark { background: color-mix(in srgb, var(--orange) 28%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.search-note { padding: 22px 16px; color: var(--text-dim); font-size: 14px; }
.search-note button { margin: 6px 6px 0 0; padding: 4px 12px; border: 1px solid var(--border-2); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.search-hint { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 9px 18px; border-top: 1px solid var(--border); background: var(--surface-2); font-size: 12px; color: var(--text-mute); }
.search-hint kbd { color: var(--text-dim); border-color: var(--border-2); background: var(--surface); margin-right: 3px; }
.search-hint .search-count { margin-left: auto; }

/* ---------- The sign-in page (ui.signIn): photograph, stripe, frosted card ---------- */
html[data-skin="glass"] body.signin { background: #0f1d41; }
html[data-skin="glass"] main.signin-ground {
  box-sizing: border-box; width: 100%; max-width: none; min-height: 100vh; margin: 0; border: 0; border-radius: 0; background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 48px 32px 48px 72px;
  /* the club's double stripe down the left edge, as on the menu */
  box-shadow: inset 17px 0 0 #ea5d29, inset 22px 0 0 #fff, inset 31px 0 0 #ea5d29;
}
.signin-card {
  box-sizing: border-box; width: 100%; max-width: 480px; padding: 40px 40px 32px; display: flex; flex-direction: column; align-items: center;
  gap: 20px; text-align: center; border-radius: 16px; border: 1px solid rgba(255,255,255,.8);
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.84));
  box-shadow: 0 10px 32px rgba(6,14,40,.28), inset 0 1px 0 rgba(255,255,255,.9); color: #101a33;
}
.signin-crest { width: 128px; height: auto; display: block; }
.signin-title { display: flex; flex-direction: column; gap: 4px; }
.signin-title h1 { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 600; color: #101a33; }
.signin-title h1 i { font-style: normal; color: #ea5d29; }
.signin-title p { margin: 0; font-size: 15px; line-height: 1.55; color: #38435b; }
.signin-flash { width: 100%; text-align: left; }
.signin-flash .flash { margin: 0; }
.signin-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; box-sizing: border-box; min-height: 48px; padding: 14px 20px;
  border-radius: 10px; background: #c94a1b; color: #fff; font-size: 16px; font-weight: 600; line-height: 1.3; text-decoration: none;
}
.signin-btn:hover { background: #b34016; color: #fff; text-decoration: none; }
.signin-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px #c94a1b; }
.signin-btn .ms-logo { width: 18px; height: 18px; }
.signin-btn .ico { display: block; }
.signin-note { margin: 0; font-size: 13.5px; line-height: 1.5; color: #4a556c; }
.signin-foot { margin: 0; font-size: 12.5px; line-height: 1.4; color: #dbe4f7; }
@media (max-width: 560px) {
  html[data-skin="glass"] main.signin-ground { padding: 40px 20px 40px 36px; gap: 20px; box-shadow: inset 8.5px 0 0 #ea5d29, inset 11px 0 0 #fff, inset 15.5px 0 0 #ea5d29; }
  .signin-card { padding: 28px 24px 24px; gap: 18px; }
  .signin-crest { width: 104px; }
  .signin-title h1 { font-size: 26px; }
  .signin-btn { font-size: 15px; padding: 12px 16px; }
  .signin-note { font-size: 13px; }
}
@media (prefers-reduced-transparency: reduce) { .signin-card { background: #fff; } }