/* ═══════════════════════ CSS VARIABLES ═══════════════════════ */
/* The greys are darker than a designer would pick. Every one of them was
   measured against the surface it sits on: --gray-600 on the page background
   is 5.5:1, and nothing here reads below the 4.5:1 that WCAG 1.4.3 asks for
   at these sizes. Several of these students have low vision; a grey that
   "looks about right" on a good monitor is not evidence. */
:root {
  --green-dark:   #1B5E20;
  --green:        #2E7D32;
  --green-mid:    #388E3C;
  --green-light:  #4CAF50;
  --green-pale:   #E8F5E9;
  --green-faint:  #F1F8F2;
  --yellow:       #F9A825;
  --yellow-light: #FFF8E1;
  --yellow-pale:  #FFFDE7;
  --yellow-ink:   #8A5800;   /* yellow is unreadable as text; this is its voice */
  --white:        #FFFFFF;
  --gray-50:      #FAFAFA;
  --gray-100:     #F5F5F5;
  --gray-200:     #EEEEEE;
  --gray-400:     #BDBDBD;   /* dots and rules only — never text */
  --gray-600:     #5A6660;
  --gray-800:     #424242;
  --red-pale:     #FFEBEE;
  --red:          #EF5350;
  --red-ink:      #C62828;
  --shadow-sm:    0 1px 3px rgba(27,94,32,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:    0 4px 16px rgba(27,94,32,.10), 0 2px 6px rgba(0,0,0,.06);
  --shadow-lg:    0 10px 40px rgba(27,94,32,.15);
  --radius:       14px;
  --radius-sm:    10px;
  --radius-xl:    22px;
}

/* ═══════════════════════ RESET & BASE ═══════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--green-faint);
  color: var(--gray-800);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ═══════════════════════ KEYBOARD AND FOCUS ═══════════════════════ */
/* M-02. Everything here can be driven from the keyboard, which is worth
   nothing unless you can see where you are. :where() keeps this at zero
   specificity, so the dark sidebar and the kiosk can still draw their own
   brighter ring over the top of it. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--green-dark);
  outline-offset: 2px;
}

/* The top bar is sticky, so an element scrolled to by Tab can end up
   underneath it and effectively invisible (WCAG 2.2's 2.4.11). Leave it
   room. */
a, button, summary, input, select, textarea, [tabindex] { scroll-margin-top: 88px; }

/* Said only to a screen reader. Used for labels on controls whose meaning is
   obvious to the eye from the row they sit in, and for nothing else. */
/* A table wider than the screen scrolls inside this rather than pushing the
   whole page sideways. position: relative is the load-bearing half: the
   visually-hidden spans inside the table are absolutely positioned, and
   with no positioned ancestor they anchor to the document itself - outside
   this box's clipping - and quietly widen every staff page on a phone. */
.scroll-x { overflow-x: auto; position: relative; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Some of these students have conditions that movement makes worse. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ═══════════════════════ SHARED COMPONENTS ═══════════════════════ */

/* Card */
.card {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid #D7EED8;
  box-shadow: var(--shadow-sm);
}

/* Button system */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 20px; border-radius: var(--radius-sm);
  font-family: 'DM Sans', sans-serif; font-size: .875rem; font-weight: 600;
  cursor: pointer; border: none; transition: all .14s ease; white-space: nowrap; text-decoration: none;
}
.btn:hover { opacity: .88; transform: translateY(-1px); }
.btn:active { transform: scale(.97); opacity: 1; }
.btn-primary   { background: var(--green); color: #fff; }
.btn-secondary { background: #fff; color: var(--green); border: 2px solid var(--green); }
.btn-yellow    { background: var(--yellow); color: #0E1A14; }
.btn-ghost     { background: transparent; color: var(--green); }
.btn-danger    { background: var(--red-pale); color: var(--red-ink); }
.btn-lg        { padding: 13px 28px; font-size: 1rem; border-radius: var(--radius); }
.btn-sm        { padding: 6px 14px; font-size: .8rem; }
.btn-full      { width: 100%; }

/* Form elements. Date, time, number and file boxes are listed too — they were
   left out once and the settings page came out looking like two different
   systems bolted together. */
input[type="text"], input[type="password"], input[type="email"], input[type="tel"],
input[type="date"], input[type="time"], input[type="number"], input[type="search"],
input[type="file"], select {
  font-family: 'DM Sans', sans-serif;
  width: 100%; padding: 10px 16px;
  border: 1.5px solid #C8E6C9; border-radius: var(--radius-sm);
  font-size: .875rem; background: #FAFFF9;
  transition: border-color .15s, box-shadow .15s;
}
input[type="file"] { padding: 8px; }
input:focus, select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(46,125,50,.14);
}
label.field-label { display: block; font-size: .8rem; font-weight: 600; color: var(--green-dark); margin-bottom: 5px; }
.field { display: flex; flex-direction: column; margin-bottom: 14px; }
.field-note { font-size: .74rem; color: var(--gray-600); margin-top: 4px; }

/* Logo */
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-img { height: 50px; object-fit: contain; }
.logo-img--seal { width: 50px; flex-shrink: 0; }

/* Top nav */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 28px; background: #fff;
  border-bottom: 1px solid var(--green-pale);
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 1px 4px rgba(27,94,32,.06);
}
.topbar-nav { display: flex; align-items: center; gap: 2px; }
.nav-btn {
  padding: 7px 13px; border-radius: 8px; font-size: .84rem; font-weight: 500;
  cursor: pointer; border: none; background: transparent; color: var(--gray-600);
  transition: all .14s; font-family: 'DM Sans', sans-serif; text-decoration: none;
}
.nav-btn:hover { background: var(--green-pale); color: var(--green); }
.nav-btn.active { background: var(--green-pale); color: var(--green); font-weight: 600; }
.topbar-user { display: flex; align-items: center; gap: 10px; border-left: 1px solid var(--green-pale); padding-left: 14px; margin-left: 8px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; flex-shrink: 0; }
/* Padded so the tap target clears 24px square (WCAG 2.2's 2.5.8) — it used to
   be a 12px line of pale grey. */
.signout-btn { font-size: .75rem; color: var(--gray-600); padding: 5px 8px; border-radius: 6px; text-decoration: none; }
.signout-btn:hover { color: var(--green-dark); background: var(--green-pale); }

/* Badge */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 99px; font-size: .7rem; font-weight: 700;
  white-space: nowrap;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.badge-green  { background: var(--green-pale);  color: #1B5E20; }
.badge-green::before  { background: var(--green-light); }
.badge-yellow { background: var(--yellow-pale); color: var(--yellow-ink); }
.badge-yellow::before { background: var(--yellow); }
.badge-red    { background: var(--red-pale);    color: var(--red-ink); }
.badge-red::before    { background: var(--red); }
.badge-gray   { background: var(--gray-100);    color: var(--gray-600); }
.badge-gray::before   { background: var(--gray-400); }

/* Grid helpers */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

/* Page layout */
.page-wrap { max-width: 960px; margin: 0 auto; padding: 36px 28px; }
.page-title { font-family: 'Lora', serif; font-size: 1.55rem; font-weight: 700; color: var(--green-dark); }
.page-sub { font-size: .84rem; color: var(--gray-600); margin-top: 4px; }

/* Table */
table { width: 100%; border-collapse: collapse; font-size: .84rem; }
th { text-align: left; padding: 10px 14px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-600); border-bottom: 2px solid var(--green-pale); }
td { padding: 12px 14px; border-bottom: 1px solid var(--green-faint); }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--green-faint); }

/* Info box */
.info-box { padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid; }
.info-box-green  { background: var(--green-pale);  border-color: #A5D6A7; }
.info-box-yellow { background: var(--yellow-pale); border-color: #FFE082; }
.info-box p { font-size: .82rem; color: var(--gray-600); line-height: 1.55; }
.info-box strong { color: var(--green-dark); }

/* Split layout (sign in, verify, set password) */
.split { display: flex; min-height: 100vh; }
.split-left {
  width: 340px; flex-shrink: 0; padding: 40px 36px;
  background: linear-gradient(160deg, var(--green-dark), var(--green));
  display: flex; flex-direction: column; justify-content: space-between; color: #fff;
}
/* White at 65% over this green is 3.2:1. The panel carries the only
   explanation of what "Get started" means, so it is text, not decoration. */
.split-left p { color: rgba(255,255,255,.92); }
.split-left .panel-note { color: rgba(255,255,255,.92); }
.split-left .split-foot { color: rgba(255,255,255,.72); }
.split-right { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; background: var(--green-faint); }
.split-form  { width: 100%; max-width: 400px; }

/* ═══════════════════════ THE LABORATORY RIGHT NOW ═══════════════════════ */
/* Each computer on the student home page is drawn as a little monitor whose
   screen shows its state: lit green when free, warm amber while somebody is
   on it, dark when it is off, taped-off stripes while being repaired. The
   word underneath always says the same thing — the drawing is never the only
   signal (WCAG 1.4.1). */
.lab-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 14px; }
@media (max-width: 720px) { .lab-grid { grid-template-columns: repeat(3, 1fr); } }

.lab-pc { text-align: center; }
.lab-pc-mon { position: relative; margin: 0 auto 20px; max-width: 92px; }
.lab-pc-screen {
  position: relative; height: 54px; border-radius: 7px;
  border: 3px solid #2C3A31;
  background: #17201A;
  overflow: hidden;
}
/* a soft window-light reflection across every lit screen */
.lab-pc-screen::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(105deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 45%);
}
/* the stand */
.lab-pc-mon::before {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: -8px; width: 12px; height: 8px; background: #2C3A31;
}
.lab-pc-mon::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: -12px; width: 42px; height: 4px; border-radius: 2px; background: #2C3A31;
}

.lab-pc--free .lab-pc-screen,
.lab-pc--not_set_up .lab-pc-screen {
  background: linear-gradient(135deg, #66BB6A, #2E7D32);
  box-shadow: 0 0 16px rgba(76, 175, 80, .40);
}
.lab-pc--in_use .lab-pc-screen {
  background: linear-gradient(135deg, #F2B33D, #C77D00);
}
.lab-pc--reserved .lab-pc-screen {
  background: linear-gradient(135deg, #5C9CE6, #1565C0);
}
/* switched off: no light, no reflection, just a standby dot in the bezel */
.lab-pc--offline .lab-pc-screen::after { display: none; }
.lab-pc--offline .lab-pc-screen::before {
  content: ''; position: absolute; right: 5px; bottom: 4px;
  width: 4px; height: 4px; border-radius: 50%; background: #EF5350;
}
.lab-pc--maintenance .lab-pc-screen {
  background: repeating-linear-gradient(45deg, #9E9E9E 0 9px, #7B7B7B 9px 18px);
}
.lab-pc--maintenance .lab-pc-screen::after { display: none; }
/* G-07. Standing open at the desk's say-so: lit, because nothing is wrong
   with it, but plainly not the green of a machine a student may take. */
.lab-pc--unlocked .lab-pc-screen {
  background: linear-gradient(135deg, #A05BC4, #6A1B9A);
}

/* the code in Lora, the same face the real kiosk screens use */
.lab-pc-name { font-family: 'Lora', serif; font-weight: 700; font-size: .9rem; color: var(--green-dark); }
.lab-pc-word { font-size: .72rem; font-weight: 700; margin-top: 1px; }
.lab-pc-detail { font-size: .68rem; color: var(--gray-600); margin-top: 2px; }

/* status words dark enough to read at this size (WCAG 1.4.3) —
   the screen drawing carries the bright colour instead */
.lab-pc--free .lab-pc-word, .lab-pc--not_set_up .lab-pc-word { color: #1B5E20; }
.lab-pc--in_use .lab-pc-word { color: #8A5800; }
.lab-pc--reserved .lab-pc-word { color: #0D47A1; }
.lab-pc--offline .lab-pc-word, .lab-pc--maintenance .lab-pc-word { color: #5F6A62; }
.lab-pc--unlocked .lab-pc-word { color: #5B1580; }

/* On a phone the room keeps all its machines in view rather than turning
   into a scroll of poster-sized monitors: three smaller drawings to a row,
   so thirteen computers are four rows, not seven. This block sits below the
   full-size rules on purpose - at equal specificity the later rule wins,
   and above them it silently loses. */
@media (max-width: 460px) {
  .lab-grid { grid-template-columns: repeat(3, 1fr); gap: 16px 10px; }
  .lab-pc-mon { max-width: 56px; margin-bottom: 14px; }
  .lab-pc-screen { height: 34px; border-width: 2px; border-radius: 5px; }
  .lab-pc-mon::before { bottom: -6px; width: 9px; height: 6px; }
  .lab-pc-mon::after { bottom: -9px; width: 30px; height: 3px; }
  .lab-pc-name { font-size: .8rem; }
  .lab-pc-word { font-size: .66rem; }
  .lab-pc-detail { font-size: .62rem; }
}

/* ═══════════════════════ RESERVE A COMPUTER ═══════════════════════ */
/* Every step of booking is a grid of identical cells: pick a day, pick a
   time, pick a computer. One shape, learned once, used three times. */
.step-title {
  display: flex; align-items: center;
  font-weight: 700; font-size: .97rem; color: var(--green-dark);
  margin-bottom: 16px; padding: 0;
}
.step-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; margin-right: 10px;
  background: var(--green-dark); color: #fff;
  font-family: 'Lora', serif; font-size: .8rem; font-weight: 700; flex-shrink: 0;
}

.pick-grid { display: grid; gap: 10px; list-style: none; padding: 0; margin: 0; }
/* The days and times are a real list of real links, so a screen reader can
   say how many there are and Tab can reach every one. The li is only there to
   carry that meaning; the cell inside it does the looking. */
.pick-grid > li { display: flex; }
.pick-grid > li > .pick { flex: 1; }
.pick-days     { grid-template-columns: repeat(8, 1fr); }
.pick-times    { grid-template-columns: repeat(3, 1fr); }
.pick-pcs      { grid-template-columns: repeat(4, 1fr); }
.pick-purposes { grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) {
  .pick-days { grid-template-columns: repeat(4, 1fr); }
  .pick-pcs  { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 460px) {
  .pick-pcs      { grid-template-columns: repeat(2, 1fr); }
  .pick-purposes { grid-template-columns: 1fr; }
}

.pick {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 12px 6px; text-align: center;
  border: 2px solid #C8E6C9; border-radius: var(--radius-sm); background: #FAFFF9;
  text-decoration: none; transition: border-color .14s, background .14s, transform .14s;
}
a.pick:hover, label.pick:hover { border-color: var(--green); transform: translateY(-1px); }
.pick.selected {
  border-color: var(--green-dark); background: var(--green-pale);
  box-shadow: 0 0 0 3px rgba(46, 125, 50, .12);
}
.pick.disabled { border-color: var(--gray-200); background: var(--gray-50); }
.pick-top { font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-600); }
.pick-big { font-family: 'Lora', serif; font-size: 1.2rem; font-weight: 700; color: var(--green-dark); line-height: 1.2; }
.pick-sub { font-size: .7rem; color: var(--gray-600); }
/* "Closed", "Gone" and "Full" are the reason a student stops looking at a
   cell. Greying them into invisibility hid the only useful thing on them. */
.pick.disabled .pick-top, .pick.disabled .pick-big, .pick.disabled .pick-sub { color: var(--gray-600); }

/* picking a computer: the same little monitors as the home page */
label.pick { cursor: pointer; }
.pick .lab-pc-mon { margin: 6px auto 18px; width: 72px; }
.pick .lab-pc-screen { height: 42px; }
.pick .lab-pc-name { font-size: .84rem; }
.pick-chosen { display: none; font-size: .7rem; font-weight: 700; color: var(--green-dark); }
.choice-input:checked + .pick {
  border-color: var(--green-dark); background: var(--green-pale);
  box-shadow: 0 0 0 3px rgba(46, 125, 50, .12);
}
.choice-input:checked + .pick .pick-chosen { display: block; }
.choice-input:checked + .pick .lab-pc-word { display: none; }
.choice-input:focus-visible + .pick { outline: 3px solid var(--green-dark); outline-offset: 2px; }

/* the check-and-confirm facts, and the same boxes on the home page */
.fact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fact { text-align: center; padding: 14px; background: var(--green-pale); border-radius: 8px; }
.fact-val { font-family: 'Lora', serif; font-size: 1.1rem; font-weight: 700; color: var(--green-dark); }
.fact-val.mono { font-family: monospace; }
.fact-lbl { font-size: .72rem; color: var(--gray-600); margin-top: 2px; }

/* ═══════════════════════ BOOKING CONFIRMED (A TICKET) ═══════════════════════ */
/* The confirmation is drawn as a lab pass: the machine on top, the facts of
   the hour, then a tear line and the code on the stub — the one thing the
   student has to keep. The notches are circles of the page's own colour, so
   the card reads as two halves of a perforated ticket. */
.ticket { max-width: 430px; margin: 0 auto; padding: 36px 32px; text-align: center; }
.ticket-eyebrow {
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--green); margin-bottom: 6px;
}
.ticket-title { font-family: 'Lora', serif; font-size: 1.45rem; font-weight: 700; color: var(--green-dark); }
.ticket .lab-pc-mon { width: 110px; margin: 22px auto 30px; }
.ticket .lab-pc-screen { height: 62px; }
.ticket-tear { position: relative; border-top: 2px dashed #C8E6C9; margin: 26px -32px 22px; }
.ticket-tear::before, .ticket-tear::after {
  content: ''; position: absolute; top: -12px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--green-faint);
}
.ticket-tear::before { left: -11px; }
.ticket-tear::after  { right: -11px; }
.ticket-after { max-width: 430px; margin: 16px auto 0; }

.ref-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--green); margin-bottom: 6px; }
.ref-code  { font-family: 'Lora', serif; font-size: 2.4rem; font-weight: 700; color: var(--green-dark); letter-spacing: 4px; }

/* ═══════════════════════ MY BOOKINGS ═══════════════════════ */
/* One row per booking, each anchored by the same square: the day it is for,
   drawn like a leaf of a desk calendar. Past days go grey. */
.res-row { display: flex; align-items: center; gap: 14px; padding: 14px 20px; }
.res-row + .res-row { border-top: 1px solid var(--green-faint); }
.res-cal {
  width: 54px; height: 54px; border-radius: var(--radius-sm); flex-shrink: 0;
  background: var(--green-pale); border: 1px solid #C8E6C9;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.res-cal-day { font-family: 'Lora', serif; font-size: 1.2rem; font-weight: 700; color: var(--green-dark); line-height: 1.15; }
.res-cal-mon { font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-600); }
.res-mid { flex: 1; min-width: 0; }
.res-line1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 700; font-size: .9rem; color: var(--green-dark); }
.res-line2 { font-size: .78rem; color: var(--gray-600); margin-top: 3px; }
.res-btns  { display: flex; gap: 8px; flex-shrink: 0; }
.chip-code { font-family: monospace; font-size: .72rem; font-weight: 400; background: var(--gray-100); color: var(--gray-600); padding: 2px 8px; border-radius: 6px; }
.res-row--past .res-cal { background: var(--gray-100); border-color: var(--gray-200); }
.res-row--past .res-cal-day, .res-row--past .res-line1 { color: var(--gray-600); }
@media (max-width: 560px) {
  .res-row { flex-wrap: wrap; }
  .res-row .res-btns { margin-left: 68px; }
}

/* ═══════════════════════ FLASH MESSAGES ═══════════════════════ */
.flash { border: 1px solid; border-left-width: 4px; border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 16px; }
.flash-word { display: block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.flash-text { font-size: .88rem; }
.flash ul { margin: 0; padding-left: 1.1em; font-size: .88rem; }
.flash--problem { background: #FDECEA; border-color: #F5C6C2; border-left-color: #C62828; }
.flash--problem .flash-word { color: #C62828; }
.flash--problem .flash-text, .flash--problem ul { color: #5F2120; }
.flash--done { background: var(--green-pale); border-color: #A5D6A7; border-left-color: #2E7D32; }
.flash--done .flash-word { color: #2E7D32; }
.flash--done .flash-text { color: #1B5E20; }
.flash--dev { background: #FFF8E1; border: 1px dashed #C77D00; border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 16px; }
.flash--dev .flash-word { color: #8A5A00; font-size: .72rem; }
.flash--dev a { font-size: .78rem; word-break: break-all; color: #8A5A00; }

/* ═══════════════════════ STAFF SIDEBAR ═══════════════════════ */
/* The SSN Head's side wears the same dark green as the kiosk screens —
   one identity for the machinery of the room, while the student side
   stays daylight. Groups, because eight destinations in one flat row
   stopped being a glance long ago. */
.staff-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 232px; flex-shrink: 0;
  background: #0E1A14; color: #EAF2EC;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 20px 18px 16px; }
.sidebar-logo img { flex-shrink: 0; }
.sidebar-logo-name { font-family: 'Lora', serif; font-weight: 700; font-size: 1.05rem; color: #EAF2EC; line-height: 1.1; }
.sidebar-logo-sub { font-size: .58rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #9FB5A8; }

.sidebar-group { padding: 14px 10px 4px; }
.sidebar-group-name {
  font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #9FB5A8; padding: 0 10px 6px;
}
.sidebar a.side-link {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 8px; margin-bottom: 2px;
  color: #C9D8CD; font-size: .86rem; font-weight: 500; text-decoration: none;
  border-left: 3px solid transparent; transition: background .14s, color .14s;
}
.sidebar a.side-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar a.side-link.active {
  background: rgba(111,207,151,.14); color: #fff; font-weight: 700;
  border-left-color: #6FCF97;
}
.sidebar a:focus-visible { outline: 3px solid #6FCF97; outline-offset: 2px; }

.sidebar-user {
  margin-top: auto; padding: 16px 18px; border-top: 1px solid #24382D;
  display: flex; align-items: center; gap: 10px;
}
.sidebar-user .avatar { background: #6FCF97; color: #0E1A14; }
.sidebar-user-name { font-size: .78rem; font-weight: 700; color: #EAF2EC; line-height: 1.2; }
.sidebar-user a { font-size: .74rem; color: #C9D8CD; display: inline-block; padding: 4px 6px; border-radius: 6px; }
.sidebar-user a:hover { color: #fff; background: rgba(255,255,255,.08); }
.sidebar-user a.active { color: #fff; background: rgba(111,207,151,.14); font-weight: 700; }

/* Her own details, read rather than filled in. */
.account-facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; font-size: .85rem; }
.account-facts dt { font-weight: 700; color: var(--gray-600); }
.account-facts dd { margin: 0; }

.staff-main { flex: 1; min-width: 0; }

/* Narrow screens: the sidebar folds into a strip along the top. */
/* The Menu control exists only on a phone. On a desktop the drawer is held
   open by the script and this summary is not part of the page. */
.nav-toggle { display: none; }
.drawer-panel { display: contents; }
.sidebar-group--account { display: none; }

@media (max-width: 860px) {
  .staff-shell { flex-direction: column; }
  /* One app-bar row on one 16px rail: Menu on the left where every phone
     puts it, the seal and name beside it, who-is-signed-in and Sign out on
     the right. The row is the whole header. */
  .sidebar { display: flex; flex-direction: row; flex-wrap: wrap;
             align-items: center; width: 100%; height: auto;
             position: relative; padding: 8px 16px; gap: 0 10px;
             /* the desktop sidebar scrolls its own column; kept, that
                overflow CLIPS the menu panel hanging below this bar */
             overflow: visible; }
  .sidebar-logo { order: 2; margin: 0; flex: 1; padding: 8px 0;
                  justify-content: flex-start; }
  /* In a one-row app bar the seal and the name carry the identity; the
     sub-line wrapped the whole block into three ragged lines. */
  .sidebar-logo-sub { display: none; }
  .sidebar-logo-name { white-space: nowrap; }

  /* The Menu button, leftmost. A native disclosure, so the keyboard and a
     screen reader open and close it the same way a mouse does, and with no
     JavaScript it stays open. */
  .sidebar-groups { order: 1; }
  .nav-toggle { display: flex; align-items: center; gap: 8px;
                width: max-content; padding: 0 14px; min-height: 44px;
                border: 1px solid rgba(255,255,255,.25); border-radius: 8px;
                color: #EAF2EC; font-size: .82rem; font-weight: 700;
                cursor: pointer; list-style: none; user-select: none; }
  .nav-toggle::-webkit-details-marker { display: none; }
  .nav-toggle-glyph { font-size: 1rem; line-height: 1; }
  details[open] > .nav-toggle { background: rgba(255,255,255,.10); }

  /* Open, the menu hangs below the header as a panel over the page rather
     than shoving it down: the header keeps its shape, the panel comes and
     goes. The sidebar above is the positioning context. */
  .drawer-panel { display: block; position: absolute; z-index: 40;
                  top: 100%; left: 0; right: 0;
                  background: #0E1A14; border-top: 1px solid #24382D;
                  box-shadow: 0 14px 28px rgba(0,0,0,.35);
                  padding: 4px 16px 14px; }
  .drawer-panel .sidebar-group { display: block; padding: 8px 4px 0; }
  .drawer-panel .sidebar-group-name { display: block; }
  .sidebar a.side-link { display: flex; border-left: 0; padding: 10px 12px; }

  /* In the drawer, the account group exists and carries My account; the
     header's right side keeps only the avatar and Sign out. */
  .sidebar-group--account { display: block; border-top: 1px solid #24382D;
                            margin-top: 10px; }
  .sidebar-user { order: 3; margin: 0 0 0 auto; padding: 0; border-top: 0;
                  gap: 8px; }
  .sidebar-user-name { display: none; }
  .sidebar-user a[href*="account"] { display: none; }
  .sidebar-user a { padding: 12px 10px; font-size: .78rem; }
}

/* ═══════════════════════ STAFF SCREENS ═══════════════════════ */
/* One card per computer, the whole room in one look. The drawing and the
   words are the same ones students see, so the two sides of the counter
   are never describing different rooms. */
.staff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .staff-grid { grid-template-columns: repeat(2, 1fr); } }
/* The phone rules for these cards sit further down, below the rules they
   override - at equal specificity the later rule wins. */

/* The card carries its state on a coloured edge, so the room can be read at
   a glance from across the desk without stopping to read twelve words. */
.staff-pc {
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
  border-left: 4px solid var(--gray-400);
}
.lab-pc--free.staff-pc, .lab-pc--not_set_up.staff-pc { border-left-color: #2E7D32; }
.lab-pc--in_use.staff-pc      { border-left-color: #C77D00; }
.lab-pc--reserved.staff-pc    { border-left-color: #1565C0; }
.lab-pc--unlocked.staff-pc    { border-left-color: #6A1B9A; }
.lab-pc--offline.staff-pc,
.lab-pc--maintenance.staff-pc { border-left-color: #9E9E9E; }

/* A machine whose student has their hand up should catch the eye before
   anything else on the card does (D-07). */
.staff-pc--asked { box-shadow: 0 0 0 2px #C62828 inset; }

.staff-pc-head { display: flex; align-items: center; gap: 12px; }
.staff-pc-head .lab-pc-mon { display: block; width: 40px; margin: 0 0 8px; }
.staff-pc-head .lab-pc-screen { display: block; height: 24px; border-width: 2px; }
.staff-pc-head .lab-pc-mon::before { bottom: -5px; width: 8px; height: 5px; }
.staff-pc-head .lab-pc-mon::after { bottom: -8px; width: 24px; height: 3px; }
.staff-pc-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.staff-pc-name { font-family: 'Lora', serif; font-weight: 700; font-size: 1.05rem; color: var(--green-dark); }

/* The state as a word in a pill, never colour alone (WCAG 1.4.1). */
.pc-pill {
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; background: var(--gray-100); color: var(--gray-800);
  white-space: nowrap;
}
.lab-pc--free .pc-pill, .lab-pc--not_set_up .pc-pill { background: #E8F5E9; color: #1B5E20; }
.lab-pc--in_use .pc-pill    { background: #FFF4E0; color: #8A5800; }
.lab-pc--reserved .pc-pill  { background: #E3F0FC; color: #0D47A1; }
.lab-pc--unlocked .pc-pill  { background: #F3E6F9; color: #5B1580; }

.staff-pc-who { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: .85rem; }
.staff-pc-left { font-weight: 700; color: #8A5800; white-space: nowrap; }
.staff-pc-detail { font-size: .75rem; color: var(--gray-600); }

/* An hour draining away, drawn. The number beside it says the same thing in
   words, so nothing here depends on seeing the bar. */
.time-bar { height: 5px; border-radius: 3px; background: var(--gray-200); overflow: hidden; }
.time-bar span { display: block; height: 100%; background: linear-gradient(90deg, #F2B33D, #C77D00); }

.staff-pc-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.staff-pc-actions form { display: inline; }

/* On a phone the room is a glance, not a corridor. Two smaller cards to a
   row keeps all thirteen machines inside two screens; one full-width card
   each was a seventeen-hundred-pixel walk to learn the room was free. */
@media (max-width: 560px) {
  .staff-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .staff-pc { padding: 10px 12px; gap: 6px; }
  .staff-pc-head { gap: 8px; }
  .staff-pc-head .lab-pc-mon { width: 30px; margin-bottom: 6px; }
  .staff-pc-head .lab-pc-screen { height: 18px; }
  .staff-pc-head .lab-pc-mon::after { width: 18px; }
  .staff-pc-name { font-size: .92rem; }
  .staff-pc-detail { font-size: .7rem; }
  .staff-pc summary { font-size: .72rem; }

  /* An unwatched machine keeps that fact on the desk's big screen and in
     the phone card's drawer, but not printed under all twelve cards at
     once - a wall of "not being watched yet" says nothing thirteen times. */
  .lab-pc--not_set_up .staff-pc-detail { display: none; }

  /* The drawer's tools stack full width, and a button may wrap its words.
     Left to nowrap, "Open the sign-up form on this machine" was wider than
     the card and quietly shoved the whole page sideways. */
  .pc-more-body form { display: block; }
  .pc-more-body .btn { white-space: normal; width: 100%; }
  .pc-more-body .msg-row { flex-wrap: wrap; }
  .pc-more-body .msg-row .btn { width: auto; flex: 1; }
}

/* One drawer per card rather than four stacked ones. */
.pc-more { margin-top: 2px; font-size: .78rem; }
.pc-more > summary {
  cursor: pointer; color: var(--gray-600); padding: 4px 0; list-style: none;
  display: flex; align-items: center; gap: 5px;
}
.pc-more > summary::-webkit-details-marker { display: none; }
.pc-more > summary::before { content: '▸'; font-size: .7rem; }
.pc-more[open] > summary::before { content: '▾'; }
.pc-more-body {
  display: flex; flex-direction: column; gap: 12px;
  padding: 10px 0 2px; border-top: 1px solid var(--gray-200); margin-top: 4px;
}
.pc-tool-name { display: block; font-size: .72rem; font-weight: 700; color: var(--gray-800); }
.pc-tool-hint { font-size: .7rem; color: var(--gray-600); margin: 5px 0 0; }
.pc-tool--links { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.pc-tool--links .btn-ghost { padding-left: 0; }

.msg-row { display: flex; gap: 6px; margin-top: 6px; }
.msg-row input, .msg-row select { flex: 1; padding: 8px 12px; font-size: .8rem; min-width: 0; }

/* The log's filter row: five things that have to fit on a laptop screen and
   stack sensibly on anything narrower. */
.log-filters { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.log-pages { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }

/* D-07. The hands up, at the top of her screen. */
.asks-card { padding: 16px 20px; border-left: 4px solid #C62828; }
.asks-head { font-size: .95rem; margin: 0 0 10px; color: #C62828; }
.ask-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding: 9px 0; border-top: 1px solid var(--gray-200);
}
.ask-what { font-size: .85rem; flex: 1; min-width: 240px; }
.ask-note { color: var(--gray-800); font-style: italic; }
.ask-when { color: var(--gray-600); font-size: .75rem; white-space: nowrap; }
.ask-do { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ask-do .msg-row { margin: 0; }
.ask-do select { min-width: 92px; }

/* ═══════════════════════ SETTINGS ═══════════════════════ */
/* Short forms that sit on one line — a field or two and the button that acts
   on them. The button lines up with the boxes on its own, rather than being
   nudged into place with a different margin every time. */
.inline-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.inline-form .field { margin-bottom: 0; }
/* Sits on the same line as the boxes rather than below them. Every one of
   these used to carry its own hand-picked margin, and no two agreed. */
.inline-form .hint { margin: 0 0 9px; }

/* One padding for every card on these pages, rather than 24px here and
   20px 24px there. */
.card-pad { padding: 24px; }

/* The rules lay themselves out. Three fixed columns left a ragged last row
   whenever a setting was added or taken away, and the whole point of this
   page is that settings can be added. */
.rules-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px 16px; }
/* Labels are one line or two, so without a floor under them the boxes in a
   row start at different heights and the grid reads as broken. */
.rules-grid .field-label { min-height: 2.5em; display: flex; align-items: flex-end; }

/* The days the laboratory opens: one even row, not seven differently spaced
   ones. */
.day-picker { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.day-picker .opt { border: 0; padding: 4px 0; }

/* A heading followed straight away by the sentence explaining it. The heading
   already carries its own space underneath, so the two were drifting apart. */
.section-title + .small { margin-top: -8px; }

/* One button saves the hours and the rules together, so it belongs to neither
   card and sits under both, saying what it covers. */
.save-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }

/* A short list that is added to and taken from: holidays, closures. */
.thin-list { list-style: none; padding: 0; margin: 0 0 16px; }
.thin-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--green-faint); }
.thin-list li:last-child { border-bottom: 0; }
.thin-list .empty { display: block; padding: 8px 0; border: 0; }

/* Utility helpers */
.mt-4  { margin-top: 4px; }  .mt-8  { margin-top: 8px; }   .mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }  .mt-32 { margin-top: 32px; }
.mb-4  { margin-bottom: 4px; }.mb-8  { margin-bottom: 8px; }.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.flex  { display: flex; }     .flex-col { flex-direction: column; }
.items-center { align-items: center; }    .items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.gap-8  { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; }
.text-center { text-align: center; }
.bold  { font-weight: 700; } .green { color: var(--green-dark); } .gray { color: var(--gray-600); }
.small { font-size: .82rem; } .xsmall { font-size: .73rem; }
.lora  { font-family: 'Lora', serif; } .mono  { font-family: monospace; }
.section-title { font-weight: 700; font-size: .97rem; color: var(--green-dark); margin-bottom: 14px; }
.hint { font-size: .78rem; color: var(--gray-600); margin-top: 6px; }

/* Report charts, and the bars that ride the report tables. The bar colour is
   the dark green on purpose: it measures 5.1:1 against white, while
   --green-light measures 2.8:1 and fails the 3:1 floor for graphics. */
.chart-figure { margin: 0 0 4px; }
.lens-th { width: 30%; min-width: 120px; }
.lens-td { vertical-align: middle; }
.lens-bar { display: block; height: 10px; min-width: 3px; background: var(--green);
            border-radius: 0 3px 3px 0; }

/* The quiet half of a sign-in page: a rule with a word resting on it, the
   other door as a real button, and the small print in one row at the foot. */
.auth-or { display: flex; align-items: center; gap: 12px; margin: 24px 0;
           color: var(--gray-600); font-size: .78rem; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--gray-200); }
.auth-foot { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap;
             margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--gray-100);
             font-size: .78rem; }
.auth-foot a { color: var(--gray-600); text-decoration: underline; text-underline-offset: 3px; }
.auth-foot a:hover, .auth-foot a:focus { color: var(--green-dark); }

/* ═══════════════════════ RESPONSIVE ═══════════════════════ */
@media (max-width: 640px) {
  /* Sixteen pixels, exactly. iPhone Safari zooms the whole page in when a
     tapped input's text is any smaller, and the student then has to pinch
     their way back out. No emulator shows this - only a real iPhone. */
  input[type="text"], input[type="password"], input[type="email"], input[type="tel"],
  input[type="date"], input[type="time"], input[type="number"], input[type="search"],
  select, textarea { font-size: 1rem; }

  .split { flex-direction: column; }
  .split-left { width: 100%; padding: 28px 24px; }
  /* On a phone the form is the page. The panel keeps its greeting and its
     one paragraph, and its side notes wait below the fold instead of
     pushing the sign-in fields there - the same words are already beside
     the form itself. */
  .split-left .panel-note { display: none; }
  .split-left h1 { font-size: 1.5rem; }
  .split-left p { font-size: .82rem; }
  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .page-wrap { padding: 24px 16px; }
  /* The navigation used to be hidden outright on a phone, which left a
     student holding one no way to reach Reserve, My Bookings or Help. It
     wraps onto its own line instead. */
  .topbar { flex-wrap: wrap; gap: 8px; padding: 10px 16px; }
  .logo-img { height: 30px; }
  .logo-img--seal { width: 30px; }
  /* The name and the sign-out share the logo's row; the ID number is theirs
     already and earns no space here. */
  .topbar-user { margin-left: auto; border-left: 0; padding-left: 0; gap: 8px; }
  .topbar-user .avatar { width: 26px; height: 26px; font-size: .7rem; }
  .topbar-user .xsmall.gray { display: none; }
  /* The row must hold five labels on the narrowest phones. If a language
     or a zoom level ever makes them wider anyway, the row scrolls sideways
     rather than pushing the whole page wide. */
  .topbar-nav { order: 3; width: 100%; justify-content: space-between; gap: 2px;
                overflow-x: auto; }
  .nav-btn { padding: 7px 7px; font-size: .76rem; white-space: nowrap; }
}

/* ═══════════════════════ THE PUBLIC LANDING PAGE ═══════════════════════ */
/* Everything below is seen by somebody who is not signed in and may never
   have heard of the laboratory. It is the only part of the site a stranger
   can reach, so it explains rather than sells. */

.hero {
  background: linear-gradient(160deg, var(--green-dark), var(--green));
  color: #fff;
  padding: 56px 28px 58px;
}
.hero-in { max-width: 900px; margin: 0 auto; }
.hero h1 {
  font-family: 'Lora', serif; font-size: 2.2rem; font-weight: 700;
  line-height: 1.18; margin: 0 0 14px; color: #fff;
}
.hero-sub { font-size: 1rem; line-height: 1.7; color: rgba(255,255,255,.95); max-width: 42rem; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
/* The page's own focus ring. The site-wide one is dark green, which on this
   band is a dark outline on a dark background and cannot be seen at all. */
.hero a:focus-visible { outline: 3px solid #FFD54F; outline-offset: 3px; }
.hero .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.75); }
.hero .btn-secondary:hover { background: rgba(255,255,255,.12); opacity: 1; }

/* ═══════════════════════ THE GUIDE ═══════════════════════ */
/* Set a step larger than the rest of the site. This is long-form reading for
   students who include the low-vision and the dyslexic, and 13px is the wrong
   size to ask them to read six hundred words at. */
.guide-wrap { max-width: 820px; margin: 0 auto; padding: 40px 28px 64px; }
.guide-card { padding: 26px 28px; margin-bottom: 18px; }
.guide-card > h2 {
  font-family: 'Lora', serif; font-size: 1.16rem; font-weight: 700;
  color: var(--green-dark); margin: 0 0 12px;
}
.guide-card h3 { font-size: .95rem; font-weight: 700; color: var(--green-dark); margin: 0 0 8px; }
.guide-card p, .guide-card li { font-size: .92rem; line-height: 1.75; color: var(--gray-800); }
.guide-card p { margin: 0 0 12px; }
.guide-card > :last-child { margin-bottom: 0; }
.guide-card ol, .guide-card ul { margin: 0 0 12px 1.3rem; }
.guide-card li { margin-bottom: 7px; }
.guide-card li:last-child { margin-bottom: 0; }
.guide-card strong { color: var(--green-dark); }

/* The fourteen equity groups. One column ran to most of a phone screen and
   pushed the two ways to get an account below the fold, so it is set in
   columns where there is room. Still one list, so a screen reader still
   announces fourteen of them. */
.guide-groups { columns: 2; column-gap: 28px; }
.guide-groups li { break-inside: avoid; }
@media (max-width: 560px) { .guide-groups { columns: 1; } }

/* Jump links, so somebody with one question does not read six hundred words
   to reach it. A real list, so a screen reader announces how many there are. */
.guide-jump { padding: 20px 24px; margin-bottom: 22px; }
.guide-jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.guide-jump a {
  display: inline-block; padding: 7px 13px; border-radius: 99px;
  background: var(--green-pale); color: var(--green-dark);
  font-size: .82rem; font-weight: 600; text-decoration: none;
}
.guide-jump a:hover { background: #C8E6C9; }

/* The two ways to get an account, side by side, because the whole risk is a
   student reading one and assuming it is the only one. */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.path {
  border: 2px solid #C8E6C9; border-radius: var(--radius-sm);
  padding: 18px 20px; background: var(--green-faint);
}
.path-tag {
  display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--gray-600); margin-bottom: 6px;
}

/* Something that has to be noticed. The colour is never the whole signal:
   each of these opens with a word that says what it is. */
.guide-note, .guide-warn {
  padding: 20px 24px; margin-bottom: 18px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.guide-note { background: var(--yellow-pale); border-left: 5px solid var(--yellow); }
.guide-warn { background: var(--red-pale);    border-left: 5px solid var(--red-ink); }
.guide-note > h2 { font-family: 'Lora', serif; font-size: 1.05rem; margin: 0 0 10px; color: var(--yellow-ink); }
.guide-warn > h2 { font-family: 'Lora', serif; font-size: 1.05rem; margin: 0 0 10px; color: var(--red-ink); }
.guide-note p, .guide-warn p { font-size: .92rem; line-height: 1.75; color: var(--gray-800); margin: 0 0 12px; }
.guide-note > :last-child, .guide-warn > :last-child { margin-bottom: 0; }

/* The closing pair of buttons, and the footer under everything. */
.guide-end { text-align: center; padding: 30px 28px; }
.guide-end .hero-actions { justify-content: center; }

.public-foot { border-top: 1px solid var(--green-pale); background: #fff; padding: 22px 28px; }
.public-foot-in { max-width: 900px; margin: 0 auto; text-align: center; }

/* The two buttons in the public bar. */
.topbar-actions { display: flex; align-items: center; gap: 8px; }

@media (max-width: 720px) {
  .hero { padding: 40px 20px 44px; }
  .hero h1 { font-size: 1.75rem; }
  .paths { grid-template-columns: 1fr; }
  .guide-wrap { padding: 28px 16px 48px; }
  .guide-card { padding: 20px 18px; }
}

/* On a phone the wordmark and two buttons together are wider than the screen,
   so the bar wraps and the buttons take half each. Full width beats clever
   here: they are the only two things a stranger can do. */
@media (max-width: 560px) {
  .topbar { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
  .topbar .logo img:first-child { width: 40px; height: 40px; }
  .topbar .logo img:last-child  { height: 32px; }
  .topbar-actions { width: 100%; }
  .topbar-actions .btn { flex: 1; }
}