/* portal.css - THE SITE'S LOOK (2026-10-11, user: 'I love the home page - all our other pages, except the admin dashboard, to sit inside
   the main page theme'). The shell (a fixed top bar with the network clock, the banner, the breadcrumb, the footer - drawn by portal.js)
   and the shared parts: panels with dark header bars, buttons, forms, tables, tags. Flat, square, dense; colour only for state. */
:root {
  --bg: #eef1f5; --panel: #ffffff; --line: #d9dfe7; --line2: #e8ecf1; --text: #18212d; --dim: #4a5666; --muted: #7a8696;
  --bar: #1b212c; --head: #2b3242; --head2: #323a4d; --link: var(--net); --soft: #f7f9fb; --hover: #f4f6f9;
  --ok: #1e8a4c; --okbg: #e3f4ea; --warn: #b36b00; --warnbg: #fdf1dc; --bad: #c2352b; --badbg: #fbe7e5; --info: #1d5fa6; --infobg: #e6eef8;
  --amber: #ffbf47; --violet: #6b46c1; --violetbg: #efe9fb;
  --chip: #edf0f4; --infotx: #1a4a7a; --badtx: #8f261e; --oktx: #155f36; --warntx: #7a4a00;
}
/* EACH NETWORK ITS OWN COLOUR (user 2026-10-14): <html data-net> (portal.js) - links, primary buttons, focus rings, the top bar's
   highlight, the banner and the switch take the network's accent, so you always know which railway you are on. ECML claret (kept apart
   from the orange-red of late / errors), WCML teal. --net = buttons / links (light), --net-dk = hover, --net-lt = links on dark, --net-btn =
   buttons on dark, --net-hi = highlights on the dark bar, --net-b1 / b2 = the banner. Blue stays the colour of INFORMATION (--info). */
:root, :root[data-net="ecml"] { --net: #9b1b3a; --net-dk: #7a1430; --net-lt: #ef8fa8; --net-btn: #b0244a; --net-hi: #e0577a; --net-ring: rgba(155,27,58,.16);
  --net-b1: #382430; --net-b2: #221a21; }
:root[data-net="wcml"] { --net: #00756f; --net-dk: #005a55; --net-lt: #4fd1c5; --net-btn: #008a82; --net-hi: #2fbdb3; --net-ring: rgba(0,117,111,.16);
  --net-b1: #1e3536; --net-b2: #172324; }
/* DARK (2026-10-11, the sun / moon button in the top bar - portal.js; remembered per browser, light by default). The attribute selector
   outranks any page's own :root (bookings keeps a few names of its own - they are set here too). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #12161e; --panel: #1b212c; --line: #323a4d; --line2: #2a3141; --text: #e6ebf2; --dim: #b3bfce; --muted: #8592a6;
  --head: #2b3242; --head2: #323a4d; --link: var(--net-lt); --soft: #202736; --hover: #252d3d; --chip: #2a3242;
  --ok: #4cc483; --okbg: rgba(76,196,131,.14); --warn: #f0b257; --warnbg: rgba(240,178,87,.14); --bad: #f07a6f; --badbg: rgba(240,122,111,.15);
  --info: #7fb2f0; --infobg: rgba(127,178,240,.14); --violet: #b39af0; --violetbg: rgba(179,154,240,.15);
  --infotx: #a9cbf5; --badtx: #f5a39b; --oktx: #8fe0b2; --warntx: #f5c98a;
  --panel2: #202736; --green: #4cc483; --blue: #7fb2f0; --red: #f07a6f; --amber: #f0b257; --accent: var(--net-btn);
}
:root[data-theme="dark"] .vr-crumb, :root[data-theme="dark"] .vr-foot { border-color: var(--line); }
:root[data-theme="dark"] img[src*="logo"] { filter: none; }
/* the light / dark button, top right */
.vr-theme { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-left: 6px; border: 1px solid #3a4456; border-radius: 3px; background: transparent; color: #c9d2de; cursor: pointer; }
.vr-theme:hover { color: #fff; border-color: #56637c; }
.vr-theme svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="dark"] .btn.go, :root[data-theme="dark"] .btn-primary { background: var(--net-btn); border-color: var(--net-btn); color: #fff; }
:root[data-theme="dark"] .btn.go:hover, :root[data-theme="dark"] .btn-primary:hover { background: var(--net); }
:root[data-theme="dark"] .route ol::before { background: var(--muted); }
:root[data-theme="dark"] .route li::before { border-color: var(--muted); }
.vr-theme .sun { display: none; } :root[data-theme="dark"] .vr-theme .sun { display: block; } :root[data-theme="dark"] .vr-theme .moon { display: none; }
* { box-sizing: border-box; }
html { scroll-padding-top: 56px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 Inter, "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; }
[hidden] { display: none !important; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.wrap.wide { max-width: 1600px; }
svg.i { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.num, .tnum { font-variant-numeric: tabular-nums; }

/* ---- the shell (portal.js) ---- */
.vr-util { background: var(--bar); color: #c9d2de; font-size: 13px; position: sticky; top: 0; z-index: 40; box-shadow: 0 1px 0 #0f1319; }
.vr-util .wrap { display: flex; align-items: center; height: 42px; gap: 4px; }
.vr-util a { color: #c9d2de; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; height: 42px; white-space: nowrap; }
.vr-util a:hover { color: #fff; background: rgba(255,255,255,.06); text-decoration: none; }
.vr-util a.on { color: #fff; box-shadow: inset 0 -2px var(--net-hi); }
.vr-util .sp { flex: 1; }
/* the page links: in the bar on a wide screen; behind the burger on a phone (2026-10-14) */
.vr-util .nav { display: contents; }
.vr-burger { display: none; place-items: center; width: 38px; height: 34px; margin-right: 6px; padding: 0; border: 1px solid #3a4456; border-radius: 3px; background: transparent; color: #c9d2de; cursor: pointer; flex: none; }
.vr-burger svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.vr-burger .x, .vr-util.open .vr-burger .b { display: none; } .vr-util.open .vr-burger .x { display: inline; }
.vr-util .acct { display: inline-flex; align-items: center; white-space: nowrap; flex: none; } .vr-util .acct a { font-weight: 600; }
/* a mid-width window (2026-10-11: 'Log in' and 'Register' wrapped onto two lines at ~760px): the clock keeps its time, loses its label */
@media (max-width: 900px) { .vr-util a { padding: 0 9px; } .vr-util .ntime .vr-lbl { display: none; } .vr-util .ntime { margin-right: 4px; } }
/* the ECML | WCML switch (2026-10-14) - on the dark bar in both themes */
.vr-util .vr-net { display: inline-flex; margin-right: 12px; border: 1px solid #3a4456; border-radius: 3px; overflow: hidden; flex: none; }
.vr-util .vr-net[hidden] { display: none; }
.vr-util .vr-net button { font: 600 12px Inter, "Segoe UI", sans-serif; letter-spacing: .05em; color: #8f9bad; background: transparent; border: 0; padding: 0 11px; height: 26px; cursor: pointer; }
.vr-util .vr-net button + button { border-left: 1px solid #3a4456; }
.vr-util .vr-net button:hover { color: #fff; background: rgba(255,255,255,.06); }
.vr-util .vr-net button.on { color: #fff; background: var(--net-btn); }
.vr-util .vr-net button[data-net="ecml"]:not(.on):hover { box-shadow: inset 0 -2px #e0577a; } .vr-util .vr-net button[data-net="wcml"]:not(.on):hover { box-shadow: inset 0 -2px #2fbdb3; }
@media (max-width: 700px) { .vr-util .vr-net { margin-right: 6px; } .vr-util .vr-net button { padding: 0 7px; } }
.vr-util .ntime { display: inline-flex; align-items: center; gap: 8px; margin-right: 10px; color: #8f9bad; font-size: 12px; white-space: nowrap; }
.vr-util .ntime b { font-size: 13.5px; font-weight: 700; color: #ffbf47; background: #11151c; border: 1px solid #3a4456; border-radius: 2px; padding: 1px 8px; font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.vr-banner { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--net-b1), var(--net-b2)); border-bottom: 3px solid var(--net-btn); }
.vr-banner svg.track { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .07; filter: blur(1.2px); }
.vr-banner .wrap { position: relative; display: flex; align-items: center; min-height: 120px; padding-top: 14px; padding-bottom: 14px; }
.vr-banner.tall .wrap { min-height: 168px; }
.vr-banner img { height: 64px; display: block; } .vr-banner.tall img { height: 74px; }
/* the line shown, on the banner's right (2026-10-14) */
.vr-bnet { margin-left: auto; text-align: right; color: #eef2f7; font: 700 22px/1.15 Inter, "Segoe UI", sans-serif; letter-spacing: .14em; text-transform: uppercase;
  border-right: 4px solid var(--net-btn); padding: 4px 14px 4px 0; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.vr-bnet b { display: block; font: inherit; } .vr-bnet span { display: block; margin-top: 5px; font: 500 14px/1.2 Inter, "Segoe UI", sans-serif; letter-spacing: .04em; text-transform: none; color: #b9c4d3; }   /* the route (user 2026-10-14) */
.vr-crumb { background: var(--panel); border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.vr-crumb .wrap { height: 30px; display: flex; align-items: center; gap: 8px; }
.vr-crumb a { color: var(--muted); } .vr-crumb a:hover { color: var(--text); }
.vr-foot { border-top: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 12px; margin-top: 12px; }
.vr-foot .wrap { padding-top: 16px; padding-bottom: 20px; }
.vr-foot .l { color: var(--dim); font-size: 13px; margin-bottom: 8px; } .vr-foot .l a { color: var(--dim); text-decoration: underline; text-underline-offset: 2px; }
.vr-foot p { margin: 4px 0; }

/* ---- page content ---- */
.page { padding-top: 20px; padding-bottom: 32px; }
.page-h { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 0 0 16px; }
.page-h h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.page-h p { margin: 2px 0 0; color: var(--dim); }
.page-h .r { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.col { display: grid; gap: 20px; min-width: 0; align-content: start; }

.p { background: var(--panel); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.ph { display: flex; align-items: center; gap: 10px; background: var(--head); color: #f1f4f8; padding: 9px 14px; font-size: 13.5px; font-weight: 600; }
.ph .r { margin-left: auto; font-weight: 500; font-size: 12.5px; color: #b9c4d3; display: flex; gap: 8px; align-items: center; }
.ph a.r, .ph .r a { color: #b9c4d3; } .ph a.r:hover, .ph .r a:hover { color: #fff; }
.pb { padding: 16px; }
.pf { padding: 10px 14px; background: var(--soft); border-top: 1px solid var(--line2); color: var(--muted); font-size: 12px; }
.empty { color: var(--muted); padding: 14px; font-size: 13px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 14px; font: 600 13px Inter, "Segoe UI", sans-serif; border-radius: 3px; border: 1px solid var(--head); background: var(--head); color: #fff; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { background: #3a4458; text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.alt, .btn.ghost { background: var(--panel); color: var(--text); border-color: var(--line); } .btn.alt:hover, .btn.ghost:hover { background: var(--hover); border-color: #c3ccd8; }
.btn.go { background: var(--net); border-color: var(--net); } .btn.go:hover { background: var(--net-dk); border-color: var(--net-dk); }
.btn.danger { background: var(--panel); color: var(--bad); border-color: var(--line); } .btn.danger:hover { background: var(--badbg); }
.btn.small, .btn.sm { padding: 4px 10px; font-size: 12px; }
.btn.block { width: 100%; }

.tag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 1px 6px; border-radius: 2px; white-space: nowrap; }
.tag.on, .tag.ok { background: var(--okbg); color: var(--ok); } .tag.idle { background: var(--chip); color: var(--dim); } .tag.off, .tag.bad { background: var(--badbg); color: var(--bad); }
.tag.warn { background: var(--warnbg); color: var(--warn); } .tag.info { background: var(--infobg); color: var(--info); } .tag.vio { background: var(--violetbg); color: var(--violet); }

table.t { width: 100%; border-collapse: collapse; font-size: 13px; }
table.t th { text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 8px 12px; border-bottom: 1px solid var(--line2); background: var(--soft); white-space: nowrap; }
table.t td { padding: 8px 12px; border-bottom: 1px solid var(--line2); vertical-align: top; }
table.t tbody tr:nth-child(even) td { background: var(--soft); }
table.t tbody tr:last-child td { border-bottom: 0; }

label.f { display: block; font-size: 13px; font-weight: 600; color: var(--dim); margin: 14px 0 5px; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=time], input[type=date], input[type=number], select, textarea {
  width: 100%; font: 14px Inter, "Segoe UI", sans-serif; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 8px 10px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px var(--net-ring); }
/* the network in the breadcrumb (a network's page) */
.vr-crumb a.netc { color: var(--link); }
.note { padding: 10px 12px; border-radius: 3px; margin-bottom: 14px; font-size: 13px; border: 1px solid; }
.note.ok { background: var(--okbg); color: var(--oktx); border-color: var(--line); }
.note.warn { background: var(--warnbg); color: var(--warntx); border-color: var(--line); }
.note.bad { background: var(--badbg); color: var(--badtx); border-color: var(--line); }
.note.info { background: var(--infobg); color: var(--infotx); border-color: var(--line); }

@media (max-width: 980px) { .grid2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .vr-util .ntime .vr-lbl { display: none; } .vr-util a { padding: 0 9px; }
  .vr-burger { display: inline-grid; }
  .vr-util .nav { display: none; position: absolute; top: 42px; left: 0; right: 0; flex-direction: column; background: var(--bar); border-top: 1px solid #0f1319;
    box-shadow: 0 8px 18px rgba(0,0,0,.35); padding: 4px 0; }
  .vr-util.open .nav { display: flex; }
  .vr-util .nav a { height: 46px; padding: 0 20px; gap: 12px; font-size: 15px; }
  .vr-util .nav a.on { box-shadow: inset 3px 0 var(--net-hi); background: rgba(255,255,255,.04); }
  .vr-util .nav .i { width: 19px; height: 19px; }
  .vr-util .acct a + a { display: none; }   /* a phone: Log in only (Register is on the log-in page) */
  .vr-util .ntime { margin-right: 2px; }
  .vr-banner .wrap, .vr-banner.tall .wrap { min-height: 88px; } .vr-banner img, .vr-banner.tall img { height: 48px; } .vr-bnet { font-size: 13px; letter-spacing: .1em; max-width: 11em; padding-right: 10px; border-right-width: 3px; } .vr-bnet span { display: none; }   /* no route line on a phone (user: too tight) */
}

/* a count on a header link (Support: replies waiting) - a <b>, so it stays when the labels hide on a phone */
.vr-util a .vr-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e2554b; color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; line-height: 1; margin-left: -2px; }

/* AN ONGOING TIMED EXAM (2026-10-14): the banner under the top bar while a timed exam's clock runs and the member is elsewhere (portal.js) */
.vr-exam { background: var(--warnbg); color: var(--warntx); border-bottom: 1px solid var(--line); font-size: 13.5px; }
.vr-exam .wrap { display: flex; align-items: center; gap: 16px; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }
.vr-exam .t { flex: 1 1 360px; } .vr-exam .m { opacity: .85; } .vr-exam .s { font-size: 12px; margin-top: 3px; opacity: .9; }
.vr-exam .c { display: flex; align-items: baseline; gap: 8px; } .vr-exam .c .lbl { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.vr-exam .c b { font-size: 20px; font-variant-numeric: tabular-nums; }
.vr-exam .go { background: #1d5fa6; color: #fff; padding: 7px 14px; border-radius: 4px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.vr-exam.red { background: var(--badbg); color: var(--badtx); } .vr-exam.red .c b { animation: vrExPulse 1s infinite; }
@keyframes vrExPulse { 50% { opacity: .35; } }
/* iPHONE (2026-10-14): Safari zooms the page into any field under 16 px when it is tapped - fields are 16 px on a phone */
@media (max-width: 640px) { input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important; } }