/* One stylesheet, plain CSS. Works on a phone and on a laptop. */
:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --border: #dfe3e8;
  --text: #1c2128;
  --muted: #5d6670;
  --accent: #1f5c3d;
  --accent-soft: #e8f1eb;
  --danger: #b3261e;
  --danger-soft: #fdeceb;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .05);

  /* Sky behind the login card: deeper overhead, paler towards the horizon. */
  --sky-high: #1490e2;
  --sky-low: #9ddbfa;
  --radius: 12px;
  --rail: 268px;
  --topbar-h: 60px;

  /* The parts of a form the browser draws itself — the calendar button inside a date
     field, its pop-up panel, the scrollbars — take their colours from here, not from
     ours. Without it they stay light: a black calendar icon on a dark field. */
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171c;
    --surface: #1c2027;
    --border: #2c323b;
    --text: #e6e9ee;
    --muted: #9aa3ae;
    --accent: #5fbd8d;
    --accent-soft: #17281f;
    --danger: #f2675c;
    --danger-soft: #2a1a19;
    --sky-high: #123055;
    --sky-low: #326694;
    --shadow: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: inherit; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;          /* spans the whole width, above the rail */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.topbar-center { justify-self: center; }

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; min-width: 0; }
.brand strong { display: block; line-height: 1.25; }
.brand small { display: block; color: var(--muted); font-size: 13px; line-height: 1.25; }

.logo { height: 38px; width: auto; flex: none; display: block; }
.logo.big { height: 72px; margin: 0 auto 14px; }

.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.who { color: var(--muted); font-size: 14px; white-space: nowrap; }

.link-button {
  display: inline-block;
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 999px;
  padding: 5px 13px;
  font: inherit;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.link-button:hover { border-color: var(--accent); color: var(--accent); }
.topbar form { margin: 0; }

/* ---------- language switcher: two flags ---------- */
.lang-switch {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
}
.lang-switch button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .03em;
  cursor: pointer;
}
.lang-switch button:hover { color: var(--text); }
.lang-switch button.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
  cursor: default;
}
.flag {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, .15);
  flex: none;
}
.lang-switch button:not(.active) .flag { opacity: .55; }
.lang-switch button:hover .flag { opacity: 1; }

/* ---------- page body ---------- */
.layout { padding: 26px 24px 56px; }
.content { max-width: 840px; margin: 0 auto; }

.content h1 { margin: 0 0 20px; font-size: 26px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
  margin-bottom: 18px;
}
.card h2 { margin: 0 0 12px; font-size: 18px; }
.card p { margin: 0; }
.card.note { border-left: 3px solid var(--accent); }
.card.empty { text-align: center; color: var(--muted); }

.steps { margin: 0; padding-left: 22px; }
.steps li { margin-bottom: 8px; }
.steps li:last-child { margin-bottom: 0; }

.muted { color: var(--muted); }

/* ---------- category rail, docked to the left edge ---------- */
/* The version of the site, small and quiet under everything else in the rail. */
.menu-version {
  margin: 0;
  padding: 16px 12px 20px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.menu-title {
  margin: 0;
  padding: 6px 18px 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
}
/* When no block sits above it, the heading needs the same air as the list would give. */
.menu > .menu-title:first-child { padding-top: 24px; }
.menu ul { list-style: none; margin: 0; }
.menu-primary { padding: 14px 10px; border-bottom: 1px solid var(--border); }
.menu-categories { padding: 0 10px 16px; }
.menu a:not(.tool) {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 15px;
}
/* The blocks above the catalogue are a short list of places rather than a list to read
   down, so they take less height and sit centred. Only the vertical padding is set
   here: the horizontal one differs between the rail and the row of pills on a narrow
   screen, and both should keep their own. */
/* text-align centres the plain links; justify-content does the same for the ones that
   carry an icon, because .with-icon lays them out as a flex row. */
.menu-primary a:not(.tool) { padding-block: 7px; text-align: center; justify-content: center; }
.menu a:not(.tool):hover { background: var(--bg); }
.menu a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* sub-section tiles on a section page */
.tiles {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 10px;
}
.tiles > li > a {
  display: block;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  font-weight: 500;
}
.tiles > li > a:hover { border-color: var(--accent); color: var(--accent); }

.parent-name { margin: 0 0 4px; color: var(--muted); font-size: 14px; }

@media (min-width: 981px) {
  .topbar { height: var(--topbar-h); }

  /* The rail is docked to the left edge and starts below the full-width header. */
  .sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    bottom: 0;
    width: var(--rail);
    overflow-y: auto;
    background: var(--surface);
    border-right: 1px solid var(--border);
    z-index: 20;
  }
  .layout { margin-left: var(--rail); }

  /* The rail is as tall as the window, so the version can sit at its foot rather than
     under the last section. A shorter menu leaves the gap above it, not below. */
  .menu { display: flex; flex-direction: column; min-height: 100%; }
  .menu-version { margin-top: auto; }
}

/* ---------- login ---------- */
.login-page {
  background: linear-gradient(var(--sky-high), var(--sky-low));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 100vh;
  padding: 24px;
}
.login-lang { display: flex; justify-content: center; position: relative; z-index: 1; }

/* Six cats scattered behind the card. They are backgrounds and not <img> on purpose:
   a browser downloads an <img> even inside display:none, so every phone would pay for
   six photos it never sees. The background of a box that is not drawn is never
   fetched, which is why the whole thing lives inside the media query. */
.sky-cats { display: none; }
.sky-cats .cat-5,
.sky-cats .cat-6 { display: none; }

@media (min-width: 1101px) {
  .sky-cats {
    display: block;
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
  }
  .sky-cats div {
    position: absolute;
    background-size: cover;
    background-position: center;
    border: 6px solid #fff;
    border-radius: 4px;
    box-shadow: 0 12px 28px rgba(9, 41, 71, .3);
  }

  /* Where each one landed. No pattern to it on purpose: sizes and angles all differ,
     and no two sit at the same height. The heights are each photo's own proportions —
     a background does not size its box the way an image does. */
  .sky-cats .cat-1 { width: 150px; height: 192px; top: 6%; left: 8%; background-image: url('/cats/cat-1.jpg'); transform: rotate(-9deg); }
  .sky-cats .cat-2 { width: 170px; height: 197px; bottom: 10%; left: 4%; background-image: url('/cats/cat-2b.jpg'); transform: rotate(7deg); }
  .sky-cats .cat-3 { width: 160px; height: 209px; top: 12%; right: 5%; background-image: url('/cats/cat-3.jpg'); transform: rotate(6deg); }
  .sky-cats .cat-4 { width: 185px; height: 243px; bottom: 7%; right: 7%; background-image: url('/cats/cat-4.jpg'); transform: rotate(-11deg); }
}

/* The last two stand in the open ground on either side of the card, level with the
   middle of the window. Both are measured from the centre rather than from the window's
   own edge, so they keep the same gap beside the card — and the same gap as each other —
   whatever the window does. They need a wider window than the rest, because below this
   the corner cats reach across into the ground the two of them stand in. Sizes and
   angles still differ between them; it is the gap that is shared, not the shape. */
@media (min-width: 1380px) {
  .sky-cats .cat-5,
  .sky-cats .cat-6 { display: block; top: 50%; }

  .sky-cats .cat-5 {
    width: 145px;
    height: 193px;
    right: calc(50% + 240px);
    background-image: url('/cats/cat-5.jpg');
    transform: translateY(-50%) rotate(5deg);
  }
  .sky-cats .cat-6 {
    width: 150px;
    height: 200px;
    left: calc(50% + 240px);
    background-image: url('/cats/cat-6.jpg');
    transform: translateY(-50%) rotate(-6deg);
  }
}

/* Below 1101px the margins beside the card are too narrow to hold a photo, and a cat
   sliding under the form is worse than no cat. The number comes from the widest of
   them: a rotated photo needs more room than its width, 185px turning into 245px of
   bounding box, and below about 1013px that one reaches the card. */

.login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px 28px;
  text-align: center;
}
.login-card h1 { margin: 0 0 4px; font-size: 22px; line-height: 1.3; }
.login-card form { margin-top: 24px; text-align: left; }
.login-card > :first-child { margin-top: 0; }

label { display: block; margin-bottom: 6px; font-size: 14px; color: var(--muted); }

input[type="email"],
input[type="password"],
input[type="tel"],
input[type="text"] {
  width: 100%;
  padding: 11px 13px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.primary {
  display: block;
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
.primary:hover { filter: brightness(1.12); }
/* The send button opens a window first, so it is a link wearing the button's clothes. */
.primary.as-link { text-align: center; text-decoration: none; }
.as-button { margin-top: 20px; }

.alert {
  margin: 18px 0 0;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 14px;
}
.hint { margin: 18px 0 0; color: var(--muted); font-size: 13px; }

/* ---------- phones and narrow windows: the rail becomes a row of tabs ---------- */
@media (max-width: 980px) {
  .topbar { padding: 8px 14px; }
  .brand strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand small { display: none; }
  .who { display: none; }
  .logo { height: 32px; }

  .sidebar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }
  .menu-title { display: none; }
  .menu {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .menu::-webkit-scrollbar { display: none; }
  .menu ul { display: flex; gap: 6px; }
  .menu-primary { padding: 0 6px 0 0; border-bottom: 0; border-right: 1px solid var(--border); }
  .menu-categories { padding: 0; }
  .tiles { grid-template-columns: 1fr; }
  .menu li { flex: none; }
  .menu a {
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    white-space: nowrap;
    font-size: 14px;
  }
  .menu a.active { border-color: transparent; }
  /* A row of tabs is no place for a footnote. */
  .menu-version { display: none; }

  .layout { padding: 18px 14px 40px; }
  .content h1 { font-size: 22px; }
  .card { padding: 16px 18px; }
}

/* ---------- items you can request ---------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.items { list-style: none; margin: 16px 0 0; padding: 0; }

.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
}

.item[hidden] { display: none; }

.item-name { min-width: 0; }
.item-note { display: block; color: var(--muted); font-size: 13px; }

.item-add { display: flex; align-items: center; gap: 8px; flex: none; margin: 0; }

.qty {
  width: 72px;
  padding: 7px 9px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  text-align: center;
}
.unit { color: var(--muted); font-size: 14px; min-width: 32px; }
.line-qty { flex: none; font-weight: 600; }

.add-button {
  padding: 8px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.add-button:hover { filter: brightness(1.12); }

.link-button.danger { border-color: transparent; color: var(--danger); }
.link-button.danger:hover { border-color: var(--danger); }

/* ---------- basket and requests ---------- */
textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  resize: vertical;
}
.card .hint { margin: 8px 0 16px; }

.basket-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
}
.basket-link:hover { border-color: var(--accent); color: var(--accent); }
.basket-link.filled { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.record-list { list-style: none; margin: 16px 0 0; padding: 0; }
.record-list a {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 16px;
  margin-bottom: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
}
.record-list a:hover { border-color: var(--accent); }

.notice {
  margin: 0 0 18px;
  padding: 11px 14px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
}

@media (max-width: 620px) {
  .item { flex-wrap: wrap; }
  .item-add { width: 100%; justify-content: flex-end; }
  .basket-link { padding: 5px 10px; }
}

/* ---------- section icons in the menu ---------- */
.menu a.with-icon { display: flex; align-items: center; gap: 10px; }
.cat-icon { width: 20px; height: 20px; flex: none; color: var(--accent); opacity: .85; }
.menu a.with-icon:hover .cat-icon,
.menu a.with-icon.active .cat-icon { opacity: 1; }
@media (max-width: 980px) {
  .cat-icon { width: 17px; height: 17px; }
}

.section-heading {
  margin: 28px 0 0;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.content > .section-heading:first-of-type { margin-top: 20px; }

/* ---------- tabs ---------- */
/* Two plain links wearing tabs. The page is served already showing the one asked for,
   so the only state to draw is which of them is the current page; the halves are equal
   so neither reads as the more important one. */
.tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 22px;
  border-bottom: 1px solid var(--border);
}
.tabs .tab {
  flex: 1 1 0;
  padding: 12px 14px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 15px;
  text-decoration: none;
}
.tabs .tab:hover { color: var(--text); }
.tabs .tab.current { color: var(--text); border-bottom-color: var(--accent); }

/* ---------- the heading block of an order ---------- */
/* Who the order is for, read before the items themselves: two facts taken from the
   account and two the medic fills in. Label and value sit side by side, and fall into
   one column on a phone. */
.order-head-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 10px 18px;
  margin: 0;
  text-align: left;
}
/* These labels are read as part of the order, not as small print, so they keep the
   page's own size — the nested <label> needs it said again, it sets 14px itself. */
.order-head-facts dt { font-size: 16px; color: var(--muted); }
.order-head-facts dt label { margin: 0; font-size: inherit; }
.order-head-facts dd { margin: 0; }

/* The star on a label the order cannot be sent without. It reads as a mark, not as a
   word, so it keeps its distance from the label and does not grow with it. */
.required { margin-left: 4px; color: var(--danger); font-weight: 600; }
.order-head-facts input[type="text"],
.order-head-facts input[type="date"] {
  width: 100%;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

/* A field whose value is a paragraph takes the whole block rather than the value
   column, so the labels beside it keep their short, even column. */
.order-head-facts .wide { grid-column: 1 / -1; }
.order-head-facts dt.wide { margin-top: 6px; }
.order-head-facts textarea { margin: 0; }
.order-head-facts .hint { margin: 6px 0 0; }

@media (max-width: 620px) {
  .order-head-facts { grid-template-columns: 1fr; gap: 4px; }
  .order-head-facts dd { margin-bottom: 10px; }
  .order-head-facts dd:last-of-type { margin-bottom: 0; }
}

/* ---------- a request, split by storage ---------- */
/* Each storage keeps its own heading above its lines, so a medic sees at a glance what
   goes where — and the section name no longer repeats under every single line. */
.order-group { margin-top: 18px; }
.order-group + .order-group { margin-top: 22px; }
.order-group .group-heading {
  margin: 0;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.order-group .items { margin-top: 10px; }

/* ---------- centred page text ---------- */
.content { text-align: center; }

/* Rows that pair a name with controls stay aligned to their edges. */
.content .item-name,
.content .record-list a { text-align: left; }

/* Numbers sit with their text instead of hanging off to the left. */
.steps { list-style-position: inside; padding-left: 0; }

/* Typed text reads better from the left. */
textarea { text-align: left; }

@media (max-width: 620px) {
  .topbar {
    grid-template-columns: auto auto;
    grid-template-areas: "brand actions" "lang lang";
    row-gap: 8px;
  }
  .brand { grid-area: brand; }
  .topbar-center { grid-area: lang; }
  .topbar-actions { grid-area: actions; }
}



/* ---------- editing sections from the side panel ---------- */
.menu-row { display: flex; align-items: center; gap: 2px; }
.menu-row > a.with-icon { flex: 1; min-width: 0; }
.menu-row .with-icon span { overflow-wrap: anywhere; }

.menu-tools { display: flex; gap: 2px; flex: none; padding-left: 4px; }
.menu-tools .tool {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 8px;
  text-decoration: none;
  color: var(--muted);
  opacity: .55;
}
.menu-tools .tool svg { width: 14px; height: 14px; }
.menu-tools .tool:hover { background: var(--bg); color: var(--text); opacity: 1; }
.menu-tools .tool.danger:hover { color: var(--danger); }

.menu-add { margin-top: 6px; }
.add-section {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
}
.add-section:hover { border-color: var(--accent); color: var(--accent); }
.add-section span { font-size: 18px; line-height: 1; }

.menu-form { padding: 10px; margin: 2px 0; background: var(--bg); border-radius: 9px; }
.menu-form input[type="text"],
.menu-form input[type="tel"] {
  width: 100%;
  margin-bottom: 7px;
  padding: 7px 9px;
  font-size: 14px;
  background: var(--surface);
}
.menu-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.menu-form-actions a { color: var(--muted); font-size: 13px; text-decoration: none; }
.menu-form-actions a:hover { color: var(--text); }
.menu-save {
  padding: 5px 13px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.menu-error { margin: 0 0 7px; color: var(--danger); font-size: 12px; }

.row-actions { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.row-actions.centred { justify-content: center; }
.primary.danger-button { background: var(--danger); width: auto; padding: 12px 20px; }

@media (max-width: 980px) {
  .menu-tools, .menu-add, .menu-form { display: none; }
}

/* ---------- adding a sub-section from the section page ---------- */
.tiles > li > a.add-tile {
  gap: 8px;
  border-style: dashed;
  background: none;
  box-shadow: none;
  color: var(--muted);
  font-weight: 500;
}
.tiles > li > a.add-tile:hover { border-color: var(--accent); color: var(--accent); }
.add-tile span { font-size: 18px; line-height: 1; }

.tile-form {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: left;
}
.tile-form input[type="text"],
.tile-form input[type="tel"] {
  width: 100%;
  margin-bottom: 7px;
  padding: 7px 9px;
  font-size: 14px;
  background: var(--bg);
}

/* ---------- rename and delete under a sub-section tile ---------- */
/* Each cell is a column: the tile itself, then its two icons beneath it. Making the
   tile grow keeps every tile in a row the same height and the icons on one line. */
.tiles li { display: flex; flex-direction: column; }
.tiles li > a { flex: 1; display: flex; align-items: center; justify-content: center; }

.tile-tools {
  display: flex;
  justify-content: flex-end;
  gap: 2px;
  margin-top: 4px;
}
.tile-tools .tool {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  border-radius: 8px;
  color: var(--muted);
  opacity: .5;
}
.tile-tools .tool svg { width: 14px; height: 14px; }
.tile-tools .tool:hover { background: var(--surface); color: var(--text); opacity: 1; }
.tile-tools .tool.danger:hover { color: var(--danger); }

/* ---------- dragging sections into a new order ---------- */
[data-order-endpoint] li[data-id] { cursor: grab; }
[data-order-endpoint] { -webkit-user-select: none; user-select: none; }

/* The "add" button keeps the last slot however the list is rearranged. */
[data-order-endpoint] > li { order: 0; }
[data-order-endpoint] > li:not([data-id]) { order: 1; }

/* Where the row will land: shown as an outline, its contents faded out. */
.drag-placeholder { opacity: .5; }
.drag-placeholder .menu-row, .drag-placeholder > a {
  outline: 2px dashed var(--accent);
  outline-offset: 1px;
  border-radius: 9px;
}

/* The row under the cursor. */
.drag-carried { cursor: grabbing; }
.drag-carried .menu-row, .drag-carried > a { box-shadow: 0 10px 22px rgba(16, 24, 40, .22); }

/* While the new order is being saved. */
.saving { opacity: .75; }

/* A form being edited must not drag itself around. */
.menu-form, .tile-form { cursor: auto; }

/* ---------- users and permissions ---------- */
.manage-list .card.inactive { opacity: .6; }
.field-pair.secondary { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.field-pair.secondary .row-actions { margin-top: 6px; }
.field-pair.secondary input[type="text"],
.field-pair.secondary input[type="tel"] { margin-bottom: 0; }

select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}
select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* The add tile has no icons under it, so it reserves their height instead of
   stretching over it — that keeps it the same size as a real sub-section tile. */
.tiles > li.add-cell::after { content: ''; display: block; height: 30px; flex: none; }

/* ---------- a brief word that something was saved ---------- */
/* It floats over the page rather than standing in it: the message is gone in four
   seconds, and nothing under it should move twice because of that. */
.notice.flash {
  position: fixed;
  left: 50%;
  top: calc(var(--topbar-h) + 14px);
  z-index: 55;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--accent-soft);
  background: color-mix(in srgb, var(--accent-soft), transparent 15%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 22px rgba(16, 24, 40, .18);
  animation: settle .25s ease;
}
@keyframes settle {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Dragging never reloads the page, so its confirmation floats the same way. */
.toast {
  position: fixed;
  left: 50%;
  top: calc(var(--topbar-h) + 14px);
  z-index: 50;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 8px 22px rgba(16, 24, 40, .25);
  opacity: 0;
  transform: translate(-50%, -8px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.toast.shown { opacity: 1; transform: translate(-50%, 0); }

/* The header wraps onto two rows on a narrow screen, so both sit lower. */
@media (max-width: 620px) {
  .toast, .notice.flash { top: 104px; }
}

/* Fading out moves nothing: the message is not part of the page to begin with. */
.notice.flash.fading {
  opacity: 0;
  transform: translate(-50%, -8px);
  transition: opacity .22s ease, transform .22s ease;
}

/* ---------- maintaining items ---------- */
.item.managed { text-align: left; }
.item-tools { display: flex; align-items: center; gap: 4px; flex: none; }
.item-tools .unit { margin-right: 6px; }
.item-tools .tool {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 8px;
  color: var(--muted);
  opacity: .55;
  cursor: pointer;
}
.item-tools .tool svg { width: 15px; height: 15px; }
.item-tools .tool:hover { background: var(--bg); color: var(--text); opacity: 1; }
.item-tools .tool.danger:hover { color: var(--danger); }

.item-form { width: 100%; text-align: left; }
.item-form .field-pair { margin-bottom: 10px; }
.item-form input[type="text"],
.item-form input[type="tel"] { margin-bottom: 0; }
.item-form h2 { margin: 0 0 14px; font-size: 18px; }
.item-form textarea { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 14px; }

.item-tools-row { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.add-tile.inline {
  flex: 1;
  min-width: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
}
.add-tile.inline:hover { border-color: var(--accent); color: var(--accent); }
.item-tools-row .card { flex: 1; margin-bottom: 0; }

/* ---------- minus and plus beside a quantity ---------- */
.step {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.step:hover { border-color: var(--accent); color: var(--accent); }
.step:active { transform: translateY(1px); }

/* With buttons either side, the field itself can be narrower. */
.item-add .qty { width: 56px; }

/* The native spinner arrows would sit right next to the plus button. */
.item-add .qty::-webkit-outer-spin-button,
.item-add .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.item-add .qty { -moz-appearance: textfield; appearance: textfield; }

/* Wide enough for its words and no wider. */
.primary.send-order { width: auto; padding: 12px 22px; }

/* The edit button stands beside "to my orders", which is a .link-button, so it takes
   that button's measurements — type size, line height, padding, and a transparent
   border standing in for the outlined one — and the two come out the same size. */
.primary.edit-order {
  width: auto;
  padding: 5px 13px;
  border: 1px solid transparent;
  font-size: 14px;
  line-height: 1.6;
}

/* The same green the menu gives the page you are on: a soft fill with accent
   lettering, rather than the filled accent a plain .primary wears. */
.primary.soft {
  background: var(--accent-soft);
  color: var(--accent);
}
.primary.soft:hover { filter: none; border-color: var(--accent); }
/* Stands off the last group by the same gap the groups keep between themselves. */
.row-actions.send-row { margin-top: 22px; }

/* ---------- what a storage actually gave ---------- */
.given-note {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--danger);
}
.done-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ---------- the accounts table ---------- */
/* On a phone the table keeps its shape and scrolls sideways instead of squeezing. */
.table-scroll { overflow-x: auto; }

.people-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.people-table th,
.people-table td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
}
.people-table thead th {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.people-table tbody tr:last-child td { border-bottom: none; }
.people-table tbody tr.inactive { opacity: .55; }

/* Plain text sits in the middle of its cell, level with the fields beside it. */
.people-table .col-num,
.people-table .col-phone { text-align: center; }

.people-table .col-num { width: 1%; color: var(--muted); white-space: nowrap; }
.people-table .col-phone { white-space: nowrap; }
.people-table .col-access { width: 1%; text-align: center; }
.people-table .col-name { min-width: 180px; }
.people-table .col-role { min-width: 200px; }
.people-table .col-edit { width: 1%; text-align: right; white-space: nowrap; }

.people-table input[type="text"] { margin-bottom: 0; }
.people-table .col-num form { display: none; }

/* The access switch is a button that looks like a tick box: one click sends the row,
   so it works with no JavaScript on the page. */
.access-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--accent);
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.access-switch[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); }
.access-switch:hover { border-color: var(--accent); }
.access-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- page heading with an action beside it ---------- */
/* The table below starts a clear step under the heading and its button. */
.page-head {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.page-head h1 { margin-bottom: 0; }
.link-button.accent { border-color: var(--accent); color: var(--accent); }
.link-button.accent:hover { background: var(--accent-soft); }

/* ---------- a window over the page, opened by the address ending in #id ---------- */
/* No JavaScript: the link sets the fragment, :target shows the window, and any link
   back to "#" closes it again. */
.modal { display: none; }
.modal:target {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 60;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(12, 16, 22, .55);
}
.modal-card {
  position: relative;
  width: min(640px, 100%);
  margin: auto;
  padding: 22px 24px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(16, 24, 40, .25);
  text-align: left;
}
.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.modal-head h2 { margin: 0; font-size: 20px; }
.modal-close {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  margin: -4px -6px 0 0;
  line-height: 1;
  font-size: 26px;
  text-decoration: none;
  color: var(--muted);
}
.modal-close:hover { color: var(--text); }
/* A window that only asks a question reads centred; the ones holding a form keep
   their labels and fields to the left, where a form is read. The cross leaves the row
   and sits in the corner, so the question is centred against the whole window rather
   than against the space the cross leaves beside it. */
.modal-card.confirm { text-align: center; }
.modal-card.confirm .modal-head { display: block; padding: 0 24px; }
.modal-card.confirm .modal-close { position: absolute; top: 18px; right: 18px; margin: 0; }
.modal-card.confirm .modal-actions { justify-content: center; }

.modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}
.modal-actions .primary {
  width: auto;
  padding: 5px 13px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1.6;
}

/* The accounts page is a table first — it uses the whole width rather than the
   reading column the rest of the site keeps. */
.content.wide { max-width: none; }


/* A field switched off by the page still has to read as switched off. */
select:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- storages ---------- */
.storage-field { margin: 16px 0; padding: 0; border: 0; min-width: 0; }
.storage-field:disabled { opacity: .45; }
.storage-field .hint { margin-bottom: 0; }

/* The boxes make a block of their own in the middle of the window: fixed columns,
   centred as a group, each line still reading from its own box outwards. */
.storage-boxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, 190px);
  justify-content: center;
  gap: 6px 16px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  text-align: left;
}
.storage-boxes label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 5px 0;
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
}
.storage-boxes input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); flex: none; }
.storage-field:disabled .storage-boxes label { cursor: not-allowed; }

/* Two storages or more are worth naming, so they sit under the role rather than being
   counted. */
.storage-list {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 14px;
}
.storage-list li { padding-left: 14px; text-indent: -14px; }
.storage-list li::before { content: '– '; }

/* The one action a row offers reads as a button, in the same green the menu uses for
   the page you are on. */
.row-button {
  display: inline-block;
  padding: 5px 13px;
  border: 1px solid transparent;
  border-radius: 999px;
  line-height: 1.6;
  text-align: center;
  background: var(--accent-soft);
  color: var(--accent);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.row-button:hover { filter: brightness(1.06); }

/* The account that can never be switched off shows the state without a control. */
.access-fixed {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid transparent;
  color: var(--muted);
  font-size: 16px;
  cursor: default;
}

/* The second block is headed exactly like the first: same size, weight and colour as
   the page's own title, just further down the page. */
.block-title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
}
.page-head.block-head { margin-top: 28px; }
@media (max-width: 980px) {
  .block-title { font-size: 22px; }
}

.people-table .col-callsign { white-space: nowrap; }

/* ---------- finding one person in the lists ---------- */
.page-head-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.people-search { margin: 0; }

/* The medic's order gets the same box, in the middle of the page under the heading
   block of the order it searches. */
.item-search { display: flex; justify-content: center; margin: 20px 0 0; }

.people-search input[type="search"],
.item-search input[type="search"] {
  width: 280px;
  max-width: 100%;
  margin: 0;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
/* Above an order the box is green-rimmed, the same green the "My requests" button
   wears while something is in the basket — the two are about the same order. Its text
   is centred with the box: a hint against the left edge of a field that is itself
   centred reads as though it slipped, and the typed words follow the hint, since a
   placeholder takes no alignment of its own. */
.item-search input[type="search"] { border-color: var(--accent); text-align: center; }

.people-search input[type="search"]:focus,
.item-search input[type="search"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.search-empty { margin-top: 18px; }

/* A line saying which storage was searched, over the things it turned up. */
.search-found { margin: 18px 0 0; }

/* In a search result the heading over a group is the sub-section the things are kept
   in, and a way there — but it stays as quiet as the headings over an order. */
.order-group .group-heading a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.order-group .group-heading a:hover { color: var(--accent); }

@media (max-width: 620px) {
  .people-search input[type="search"],
  .item-search input[type="search"] { width: 100%; }
}

/* Delete sits away from Save, on the other side of the row, and says what it is. */
.modal-actions .delete-action { margin-right: auto; }
.row-button.danger { background: var(--danger-soft); color: var(--danger); }
.row-button.danger:hover { filter: brightness(1.06); }


/* A note about a field belongs to that field: the input already leaves 16px under
   itself, so the note closes the gap instead of floating between the field and the
   buttons. */
.modal-card input + .hint { margin-top: -8px; text-align: center; }

/* ---------- what can be dragged says so ---------- */
/* Only an admin gets data-order-endpoint on a list, so only an admin sees any of this:
   a faint grip at the left edge of every row that can be reordered, firmer under the
   pointer, and the hand cursor while it is being carried. */
[data-order-endpoint] > li[data-id] {
  position: relative;
  cursor: grab;
}
[data-order-endpoint] > li[data-id]::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 50%;
  width: 7px;
  height: 15px;
  transform: translateY(-50%);
  background-image: radial-gradient(currentColor 1px, transparent 1.2px);
  background-size: 4px 5px;
  color: var(--muted);
  opacity: .25;
  pointer-events: none;
  transition: opacity .15s ease;
}
[data-order-endpoint] > li[data-id]:hover::before { opacity: .6; }
[data-order-endpoint] > li[data-id]:active { cursor: grabbing; }

/* Room for the grip, so it never sits on top of the words. */
.menu-categories[data-order-endpoint] > li[data-id] > .menu-row { padding-left: 14px; }
.items[data-order-endpoint] > li[data-id].item { padding-left: 26px; }
.items[data-order-endpoint] > li[data-id]::before { left: 9px; }
/* A tile's cell holds the card and the icons under it, so a grip centred on the cell
   would sit below the card's middle. It belongs to the card, and centres on that. */
.tiles[data-order-endpoint] > li[data-id]::before { content: none; }
.tiles[data-order-endpoint] > li[data-id] > a { position: relative; padding-left: 28px; }
.tiles[data-order-endpoint] > li[data-id] > a::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  width: 7px;
  height: 15px;
  transform: translateY(-50%);
  background-image: radial-gradient(currentColor 1px, transparent 1.2px);
  background-size: 4px 5px;
  color: var(--muted);
  opacity: .25;
  pointer-events: none;
  transition: opacity .15s ease;
}
.tiles[data-order-endpoint] > li[data-id]:hover > a::before { opacity: .6; }
.drag-chosen > a::before, .drag-carried > a::before { opacity: 0 !important; }

/* While one is being carried, the grip gets out of the way. */
.drag-chosen::before, .drag-carried::before, .drag-placeholder::before { opacity: 0 !important; }

/* ---------- what medics say, on the home page ---------- */
/* One quotation to a card, laid out like the sub-section tiles: a row that fills from
   the left and wraps when it runs out of width. */
.quote-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
  margin-top: 18px;
  align-items: start;
}
.card.quote { width: auto; margin: 0; transform: none; text-align: left; }

.card.quote blockquote {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
}
.card.quote blockquote::before { content: '«'; }
.card.quote blockquote::after { content: '»'; }
.card.quote figcaption { margin-top: 8px; color: var(--muted); font-size: 13px; }

/* The shield marks a medic who was killed. Drawn rather than typed: the emoji is one
   character but a different picture on every system — silver on Windows, red and white
   on Apple — and this one is the same everywhere. */
.card.quote .fallen { display: inline-flex; vertical-align: -3px; margin-left: 3px; }
.card.quote .fallen svg { width: 16px; height: 16px; }

/* Two of the cards are red, two green, each over black — split across the middle the
   way a flag is, not blended: the colour stops and the black starts. Both halves are
   muted so the words stay the loudest thing on the card. The card is dark in either
   theme, so the text is set light here rather than left to --text. */
.card.quote-red,
.card.quote-green {
  border-color: rgba(255, 255, 255, .1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 6px 16px rgba(0, 0, 0, .14);
}
.card.quote-red {
  background: linear-gradient(180deg, #5c2925 0 50%, #16171a 50% 100%);
}
.card.quote-green {
  background: linear-gradient(180deg, #234436 0 50%, #16171a 50% 100%);
}
.card.quote-red blockquote,
.card.quote-green blockquote { color: #f1eeec; }
.card.quote-red figcaption,
.card.quote-green figcaption { color: rgba(241, 238, 236, .72); }

/* The home page runs the whole width so the quotations start at the left edge; the
   four steps keep a narrow reading column of their own, with a chevron either side.
   The steps stay the same width whatever the chevrons do, so the row is centred as a
   whole and each chevron holds its own fixed width. */
.how-to-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.how-to-row .card.how-to { flex: 0 1 620px; max-width: 620px; margin: 0; }
/* Matched on height, not width: the two patches are cut to slightly different
   proportions, and hung level they read as a pair. */
.how-to-row .chevron { flex: none; height: 180px; width: auto; display: block; }

/* Below this the steps need the whole width, so the row wraps: the steps take the
   line to themselves and the two patches hang under them, side by side and still a
   pair. They are ordered rather than moved, so the markup keeps them either side. */
@media (max-width: 900px) {
  .how-to-row { flex-wrap: wrap; gap: 24px 20px; }
  .how-to-row .card.how-to { flex: 1 1 100%; max-width: none; order: 1; }
  .how-to-row .chevron { order: 2; height: 140px; }
}


/* ---------- rotations: two blocks, the one running now and the one after it ---------- */
/* Кейс, Мед, Бус — three words that repeat down the whole column, so they are set as
   tags: at a glance the eye counts the kinds without reading any of them. */
.evac-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* Each block is headed over its own table and centred with it, a step smaller than the
   page's own title so that the h1 still leads the page. */
.rotation-heading {
  margin: 28px 0 16px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}
@media (max-width: 980px) {
  .rotation-heading { font-size: 19px; }
}

/* The rotation table is read as a block in the middle of the page rather than a band
   stretched across it: it takes the width its columns ask for and sits centred, and
   every column is centred inside it so the four of them read as one shape. */
.rotation-table {
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}
.rotation-table th,
.rotation-table td { text-align: center; }

.rotation-table .col-location { min-width: 140px; }
.rotation-table .col-unit { min-width: 140px; }
.rotation-table .col-evac { white-space: nowrap; }
.rotation-table .col-crew { min-width: 220px; }

/* A crew is a handful of callsigns, written one under another so that the seats line
   up between one row and the next. */
.crew { list-style: none; margin: 0; padding: 0; }
/* In a centred column the stack of callsigns is centred as one block, so the seats stay
   lined up with each other instead of each drifting to its own middle. */
.rotation-table .crew { display: inline-block; text-align: center; }
.crew li { line-height: 1.55; }
/* A seat nobody fills this rotation. Muted rather than alarming: it is a thing to
   notice on the way past, not a fault. */
.crew li.vacant { color: var(--muted); font-style: italic; }