/* The dashboard.
 *
 * Structure ported from owlsom-site/dashboard — the shell, the sidebar, the
 * narrow-screen drawer, the topbar — and re-tokened to this site's palette.
 * The Content Hub derives everything from a --brand the client can change;
 * this event has one identity and uses it, so the tokens below are the same
 * ones css/styles.css declares and the two sheets cannot drift apart.
 *
 * SEPARATE FROM css/styles.css on purpose. That sheet is loaded by every
 * visitor to the public site, and none of them will ever see a sidebar.
 */

:root {
  --green-950: #0D1A12;
  --green-900: #12241A;
  --green-800: #1A3325;
  --green-700: #22422F;
  --amber: #E9A13B;
  --amber-hover: #F0B45A;
  --paper: #F4F0E7;
  --surface: #FFFFFF;
  --ink: #1A1A16;
  --muted: #6E6C62;
  --faint: #8E8C82;
  --line: rgba(26, 26, 22, 0.14);
  --line-soft: rgba(26, 26, 22, 0.08);
  --on-dark: rgba(255, 255, 255, 0.92);
  --radius: 6px;
  --font-display: "Archivo", "Helvetica Neue", sans-serif;
  --font-body: "Inter", "Helvetica Neue", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); margin: 0; text-wrap: balance; }
ul, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
a { color: var(--green-700); text-decoration: none; }
a:hover { color: var(--green-900); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }

/* Nothing removes the focus ring; these pages are operated with a keyboard as
   often as a mouse, and on a laptop in a longhouse with one hand full. */
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* ============================================================ app shell */

.app { display: flex; min-height: 100vh; }

/* Sticky rather than fixed: a long roster scrolls under a nav that stays put,
   and nothing below needs a padding offset to avoid sliding underneath it.
   align-self keeps it one viewport tall instead of stretching to the height of
   the page; overflow-y is for the short-window case, where the nav is taller
   than the screen and the sign-out button would otherwise be unreachable. */
.sidebar {
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  width: 236px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 26px 0 20px;
  background: var(--green-950);
}

.sidebar__brand { padding: 0 22px 26px; }
.sidebar__wordmark {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 800; letter-spacing: 1.1px;
  color: #fff;
}
.sidebar__eyebrow {
  margin-top: 3px;
  font-size: 9.5px; font-weight: 600; letter-spacing: 2.4px;
  color: var(--amber);
}

.sidebar__nav { display: flex; flex-direction: column; gap: 3px; padding: 0 12px; }

.navitem {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, .78);
}
.navitem:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.navitem--active {
  background: rgba(255, 255, 255, .13);
  color: var(--amber);
  font-weight: 700;
}
.navitem--active:hover { background: rgba(255, 255, 255, .13); color: var(--amber); }

/* A section that does not exist yet is muted and unclickable rather than
   hidden. The shape of the thing stays visible and nobody clicks into a 404. */
.navitem--pending { color: rgba(255, 255, 255, .36); cursor: default; }
.navitem--pending:hover { background: none; color: rgba(255, 255, 255, .36); }
.navitem__soon {
  margin-left: auto;
  font-size: 8.5px; font-weight: 700; font-style: normal; letter-spacing: .8px;
  color: rgba(255, 255, 255, .32);
}

.sidebar__foot {
  margin-top: auto;
  margin-inline: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  align-items: center;
  gap: 8px;
}
/* The whole name-and-avatar block is the link: a 32px circle is a small target,
   and the name beside it is what people aim at anyway. */
.sidebar__me {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 5px 6px; margin: -5px -6px;
  border-radius: var(--radius);
}
.sidebar__me:hover { background: rgba(255, 255, 255, .12); }
.sidebar__who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sidebar__who strong { font-size: 12.5px; font-weight: 700; color: #fff; }
/* The address is long and the sidebar is 236px. Truncated rather than wrapped:
   two lines here push the sign-out button out of the foot. */
.sidebar__who span {
  font-size: 10px; font-weight: 500; color: rgba(255, 255, 255, .55);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 118px;
}
.sidebar__out { margin-left: auto; }
.sidebar__out button {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  color: rgba(255, 255, 255, .6);
  background: none; border: 0; border-radius: var(--radius); cursor: pointer;
}
.sidebar__out button:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.langtoggle {
  font: 600 10px var(--font-body);
  text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255, 255, 255, .72);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  padding: 4px 8px;
  cursor: pointer;
}
.langtoggle:hover { background: rgba(255, 255, 255, .18); color: #fff; }

.avatar {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--amber); color: var(--green-950);
  font-family: var(--font-display);
  font-size: 12px; font-weight: 800;
}
.avatar--sm { width: 26px; height: 26px; font-size: 10px; }

.main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }

/* ------------------------------------------------- narrow-screen chrome */

/* Both of these belong to the drawer, and the drawer exists only below 900px.
   Declared here so the shell reads in one piece; turned on in one place, at
   the foot of this file. */
.mobilebar { display: none; }
.navscrim { display: none; }

.mobilebar__burger {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  margin-left: -8px;
  padding: 0; cursor: pointer;
  color: #fff; background: none; border: 0; border-radius: var(--radius);
}
.mobilebar__brand { display: flex; flex-direction: column; min-width: 0; }
.mobilebar__wordmark {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 800; letter-spacing: .9px; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mobilebar__eyebrow { font-size: 8px; font-weight: 600; letter-spacing: 2px; color: var(--amber); }
.mobilebar__me { margin-left: auto; display: flex; }
.mobilebar .langtoggle { margin-left: auto; }
.mobilebar__me + .langtoggle { margin-left: 0; }

/* ---------------------------------------------------------------- topbar */

.topbar {
  display: flex; align-items: flex-end; gap: 20px;
  padding: 24px 30px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.topbar h1 { font-size: 24px; font-weight: 800; letter-spacing: -.3px; }
.topbar p { margin: 5px 0 0; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.topbar__action { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ------------------------------------------------------------- the page */

.page { padding: 24px 30px 48px; display: flex; flex-direction: column; gap: 20px; }
.page--narrow { max-width: 44rem; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.card h2 { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.card h2 + * { margin-top: 14px; }
.card + .card { margin-top: 0; }
.card--attention { border-left: 3px solid var(--amber); }

.tasklist { display: flex; flex-direction: column; gap: 6px; }
.tasklist li { display: flex; gap: 8px; align-items: baseline; }
.tasklist strong { font-family: var(--font-display); font-size: 18px; font-weight: 800; }

.empty { color: var(--muted); font-size: 13px; margin: 0; }
.hint { color: var(--muted); font-size: 12px; }
small.hint { display: block; margin-top: 4px; font-weight: 400; }

/* --------------------------------------------------------------- totals */

/* One grid with a 1px gap over a coloured ground, so the dividers are the
   background showing through rather than six borders that have to agree. */
.totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.total { background: var(--surface); padding: 14px 16px; }
.total b {
  display: block;
  font-family: var(--font-display);
  font-size: 22px; font-weight: 800; letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
}
.total span {
  display: block; margin-top: 2px;
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted);
}

/* --------------------------------------------------------------- tables */

/* The table is the one thing here that can be wider than the column it sits
   in. It scrolls inside its own box so the page body never does. */
.tablewrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th {
  text-align: left;
  padding: 0 12px 8px 0;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line-soft); }
.table tr:last-child td { border-bottom: 0; }
.table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* A table whose cells are FIELDS — the participants editor on a registration,
   one row per traveller and five controls across.

   It is a table and not a stack of labelled inputs because five fields repeated
   up to five times needs its headings said once, at the top, the way a manifest
   says them. The controls have to be told to fill their cell: .form input and
   .form select are otherwise the browser's default size=20, which leaves five
   ragged boxes with the widest field (a name) no wider than the narrowest (a
   shirt size). The min-width is what keeps them legible once .tablewrap starts
   scrolling instead of squeezing.

   Attribute-scoped to text inputs on purpose: the payments queue puts a
   CHECKBOX in a table cell and sizes it itself, and a bare `.table input` here
   would stretch it across the column. */
.table input[type="text"],
.table select { width: 100%; min-width: 7.5rem; }

.pill {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  white-space: nowrap;
}
/* State reads as colour as well as a word, so what needs attention is visible
   before anything is read. Same four as the public form writes. */
.pill--pending          { color: var(--muted); border-color: rgba(26,26,22,.28); background: rgba(26,26,22,.04); }
.pill--awaiting_payment { color: #8A5D12; border-color: var(--amber); background: rgba(233,161,59,.14); }
.pill--paid             { color: #2F5C3C; border-color: #4E8760; background: rgba(78,135,96,.12); }
.pill--cancelled        { color: #8C2F2F; border-color: #E57373; background: rgba(229,115,115,.12); }

/* Organiser account states. Named for what they are rather than reusing the
   payment pills above: an organiser is not "paid", and a class that means two
   unrelated things is one somebody restyles for the wrong reason. */
.pill--active           { color: #2F5C3C; border-color: #4E8760; background: rgba(78,135,96,.12); }
.pill--invited          { color: var(--muted); border-color: rgba(26,26,22,.28); background: rgba(26,26,22,.04); }
.pill--stale            { color: #8A5D12; border-color: var(--amber); background: rgba(233,161,59,.14); }

/* A heading a screen reader announces and nobody sees — the actions column has
   no visible title but still needs one, or the column is read as unlabelled. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ----------------------------------------------------------------- facts */

.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; font-size: 13px; }
.facts dt { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); align-self: center; }
.facts dd { margin: 0; }

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

.form { display: flex; flex-direction: column; gap: 14px; max-width: 26rem; }
.form label { display: flex; flex-direction: column; gap: 5px; }
.form label > span {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted);
}
.form input {
  font: 400 14px var(--font-body);
  color: var(--ink);
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.form input:focus { outline: 2px solid var(--amber); outline-offset: 1px; border-color: transparent; }

.button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 20px;
  font: 700 11.5px var(--font-body);
  text-transform: uppercase; letter-spacing: .11em;
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer;
}
.button--primary { background: var(--amber); color: var(--green-950); }
.button--primary:hover { background: var(--amber-hover); color: var(--green-950); }
.button--ghost { background: none; border-color: var(--line); color: var(--ink); }
.button--ghost:hover { background: rgba(26,26,22,.05); color: var(--ink); }
.form .button { align-self: flex-start; }

/* ---------------------------------------------------------------- alerts */

.alert {
  padding: 11px 14px;
  border: 1px solid;
  border-left-width: 3px;
  border-radius: var(--radius);
  font-size: 13px;
}
.alert--error { color: #8C2F2F; border-color: #E57373; background: rgba(229,115,115,.10); }
.alert--ok    { color: #2F5C3C; border-color: #4E8760; background: rgba(78,135,96,.10); }
.alert--info  { color: var(--ink); border-color: var(--amber); background: rgba(233,161,59,.12); }
.form + .alert, .alert + .form, .alert + * { margin-top: 14px; }

/* ------------------------------------------------------------- state bar */

/* Whether the door is open was a constant in config.php until now, which meant
   the only way to know was to ask a developer. It belongs at the top of the
   first page anybody sees. */
.statebar {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  padding: 11px 16px;
  border: 1px solid; border-left-width: 3px;
  border-radius: var(--radius);
  font-size: 13px;
}
.statebar strong { font-weight: 700; }
.statebar__go { margin-left: auto; font-weight: 600; font-size: 12px; }
.statebar--open   { color: #2F5C3C; border-color: #4E8760; background: rgba(78,135,96,.10); }
.statebar--full   { color: #8A5D12; border-color: var(--amber); background: rgba(233,161,59,.12); }
.statebar--closed { color: var(--muted); border-color: var(--line); background: rgba(26,26,22,.03); }
.statebar--open .statebar__go   { color: #2F5C3C; }
.statebar--full .statebar__go   { color: #8A5D12; }

/* A capacity denominator, quieter than the number it qualifies. */
.total b em { font-style: normal; font-size: .62em; color: var(--muted); font-weight: 700; }

.notelist { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; font-size: 13px; }
.notelist li { line-height: 1.45; }

.tasklist a { font-size: 12px; font-weight: 600; margin-left: 4px; }

/* --------------------------------------------------------------- filters */

.filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.filters label { display: flex; flex-direction: column; gap: 5px; }
.filters label > span {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted);
}
.filters input, .filters select {
  font: 400 13px var(--font-body);
  color: var(--ink);
  padding: 7px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-width: 11rem;
}
.filters .button { padding: 8px 16px; }

/* ------------------------------------------------------ two-column detail */

/* The record on the left, the two things you DO to it on the right. Below
   1100px they stack, and the record comes first — reading precedes acting. */
.split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
@media (max-width: 1100px) { .split { grid-template-columns: minmax(0, 1fr); } }

.subhead {
  margin-top: 20px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted);
}
/* The registrant's own words, set apart so they read as a quotation rather
   than as another field somebody typed. */
.quoted {
  margin: 8px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--line);
  font-size: 13px;
  white-space: pre-wrap;
}

.form--wide { max-width: none; gap: 20px; }
.form--wide .card { display: flex; flex-direction: column; gap: 14px; }
.form textarea {
  font: 400 14px var(--font-body);
  color: var(--ink);
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  resize: vertical;
}
.form textarea:focus { outline: 2px solid var(--amber); outline-offset: 1px; border-color: transparent; }
.form select {
  font: 400 14px var(--font-body);
  color: var(--ink);
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.alert ul { display: flex; flex-direction: column; gap: 4px; }

/* ---------------------------------------------------------- the queue */

.table .tick { width: 2.2rem; }
.table .tick input { width: 17px; height: 17px; accent-color: var(--amber); }
/* Seven days without payment is the point at which somebody gets a phone call
   rather than another week of waiting. */
.table .overdue { color: #8C2F2F; font-weight: 700; }

.bulkbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* -------------------------------------------------------------- vouchers */

/* A code that cannot be used right now — switched off, used up, expired, or not
   started. Dimmed rather than hidden: the row is the record of a discount that
   was given, and it is still the answer to "what was MERDEKA20". */
.table .rowmuted td { opacity: .55; }
/* The code itself stays legible, because it is what somebody is scanning for. */
.table .rowmuted code { opacity: 1; }

/* Two dates that belong together. Not .split — that is the page's record-and-
   actions layout at 1.15fr/1fr, and a start date is not 15% more important
   than an end date. */
.form .daterange { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .form .daterange { grid-template-columns: 1fr; } }

.form input[type="date"] {
  font: 400 14px var(--font-body);
  color: var(--ink);
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.form input[type="date"]:focus { outline: 2px solid var(--amber); outline-offset: 1px; border-color: transparent; }

/* The code, wherever it is printed. Tabular figures so 0 and O are told apart
   at a glance — the alphabet the generator uses excludes both, and this is what
   makes that visible to somebody reading a code back over the phone. */
.table code, .voucher-code {
  font: 600 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .04em;
}

/* ------------------------------------------------------------- the paper */

.sheetpick { display: flex; flex-wrap: wrap; gap: 8px; }
.sheetpick .is-on { background: var(--amber); border-color: var(--amber); color: var(--green-950); }

.sheet {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.sheet__head { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.sheet__head h2 { font-size: 16px; font-weight: 800; }
.sheet__head p { margin: 4px 0 0; font-size: 11.5px; color: var(--muted); }
.sheet__table { font-size: 12.5px; }
.sheet__note { margin-top: 14px; font-size: 12px; color: var(--muted); }
/* Somewhere to write a plate that was never recorded, and a time nobody knew
   in advance. Boxes rather than blank space, because a blank cell on a printed
   sheet reads as "nothing to put here". */
.sheet .box {
  display: inline-block; width: 15px; height: 15px;
  border: 1.5px solid var(--ink); border-radius: 2px;
}
.sheet .writein { min-width: 5rem; border-bottom: 1px solid var(--line); }

@media print {
  /* Everything that is chrome, and everything that is a control. What is left
     is the sheet, which is the only thing the paper is for. */
  .sidebar, .mobilebar, .navscrim, .topbar, .filters, .bulkbar,
  .button, .no-print { display: none !important; }
  body { background: #fff; }
  .app, .main { display: block; }
  .page { padding: 0; gap: 0; }
  .sheet { border: 0; border-radius: 0; padding: 0; }
  .sheet__table { font-size: 10.5pt; }
  .table td, .table th { padding: 5px 8px 5px 0; }
  /* A roster runs to several pages and the header row has to survive the break,
     or page two is a grid of unlabelled columns. */
  thead { display: table-header-group; }
  tr { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

/* ================================================= the signed-out screens */

.auth { display: flex; min-height: 100vh; }

.auth__brand {
  width: 42%;
  max-width: 30rem;
  padding: 44px 40px;
  background: var(--green-950);
  color: var(--on-dark);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}
.auth__wordmark { font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: 1.2px; color: #fff; }
.auth__eyebrow { margin-top: 3px; font-size: 9.5px; font-weight: 600; letter-spacing: 2.4px; color: var(--amber); }
.auth__rule { width: 46px; height: 3px; background: var(--amber); margin-bottom: 18px; }
.auth__pitch h1 { font-size: 30px; font-weight: 800; line-height: 1.15; color: #fff; }
.auth__pitch p { margin: 12px 0 0; font-size: 14px; color: rgba(255,255,255,.72); max-width: 24rem; }
.auth__place {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 500; color: rgba(255,255,255,.55);
}

.auth__panel {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px 32px;
}
.auth__form { width: 100%; max-width: 24rem; display: flex; flex-direction: column; gap: 14px; }
/* The toggle sits above the heading and right-aligned: it is a setting, not a
   step in signing in, and putting it in the flow would read as one. */
.auth__lang { display: flex; justify-content: flex-end; }
/* The one place this control is on paper rather than on green. */
.langtoggle--light {
  color: var(--muted);
  background: rgba(26, 26, 22, .05);
  border-color: var(--line);
}
.langtoggle--light:hover { background: rgba(26, 26, 22, .1); color: var(--ink); }
.auth__form h2 { font-size: 22px; font-weight: 800; }
.auth__note { font-size: 12.5px; color: var(--muted); margin: 0; }
.auth__form .form { max-width: none; }
.auth__secure { font-size: 11px; color: var(--faint); margin: 0; }

/* ========================================================= narrow screens
 *
 * 900px is where the sidebar stops fitting beside the content and becomes a
 * drawer. No rule below this line reaches a desktop window.
 */

@media (max-width: 900px) {
  .mobilebar {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 11px; flex-shrink: 0;
    height: 54px; padding: 0 14px;
    background: var(--green-950);
  }

  /* The drawer. Fixed rather than sticky, and off to the left until
     .is-navopen brings it back.
     visibility, not only transform: a panel merely translated off the left
     edge is still rendered, which means still focusable and still read out —
     on a phone the first several Tab stops would be an invisible nav sitting
     ahead of the button that opens it. The `0s .22s` delay is on the closed
     state only: going away the panel stays visible for the length of the
     slide, and coming back it must turn visible at once, because nav.js
     focuses it as soon as the class lands and a hidden box cannot take focus. */
  html.js .sidebar {
    position: fixed; top: 0; left: 0; z-index: 60;
    width: 276px; max-width: 84vw;
    /* Stated rather than stretched: the base rule's 100vh has to be beaten
       either way, and dvh is the honest height on a phone whose address bar
       comes and goes. */
    height: 100vh; height: 100dvh;
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform .22s ease, visibility 0s .22s;
    box-shadow: 0 0 34px rgba(13, 26, 18, .34);
  }
  html.js .app.is-navopen .sidebar {
    visibility: visible; transform: none;
    transition: transform .22s ease, visibility 0s;
  }
  html.js .sidebar:focus-visible { outline: 0; }

  /* While the drawer is open the page behind it must not scroll under the
     finger aiming at the drawer. nav.js sets and clears the class; the rule
     lives in here so that above this width it means nothing whatever state
     the class is left in. */
  body.is-drawerlocked { overflow: hidden; }

  html.js .navscrim {
    position: fixed; inset: 0; z-index: 50;
    background: rgba(13, 26, 18, .5);
  }
  html.js .app.is-navopen .navscrim { display: block; }

  /* Scripting off: there is no drawer to open, so the sidebar is an ordinary
     block at the top of the page and everything stacks under it. Every link
     reachable, no toggle to press — which is the point. The bar goes with the
     drawer, because its only control would be a dead button. */
  html:not(.js) .mobilebar { display: none; }
  html:not(.js) .app { flex-direction: column; }
  html:not(.js) .sidebar { position: static; width: 100%; height: auto; }

  .topbar { padding: 18px 18px 14px; }
  .topbar h1 { font-size: 20px; }
  .page { padding: 18px 18px 40px; }

  .auth { flex-direction: column; }
  .auth__brand { width: 100%; max-width: none; padding: 30px 24px 34px; }
  .auth__pitch h1 { font-size: 24px; }
  .auth__place { display: none; }
  .auth__panel { padding: 30px 24px 48px; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html.js .sidebar, html.js .app.is-navopen .sidebar { transition: none; }
}