/* Near-black ground, hairline edges, a grotesk for words and a mono only where
   digits need to line up. Chrome stays quiet so provider colour reads.

   The tokens are the landing page's (app/web/styles/orbit.css) on purpose. The
   app used to be warm cream and orange while the page selling it was near-black
   and green, so a screenshot of the product looked like a screenshot of some
   other product. One palette, one typeface, one radius language. */

:root {
  --bg: #070a0e;    /* orbit --ink */
  --card: #0e141b;  /* orbit --ink-lift */
  --sunk: #05080b;
  /* On a dark ground a hairline does the work a border did on paper; a solid
     grey line at this scale reads as a seam. */
  --line: rgba(174, 190, 204, .16);   /* orbit --hair */
  --line-2: rgba(174, 190, 204, .3);

  --ink: #eaf1f7;   /* orbit --paper */
  --ink-2: #ccd9e4; /* orbit --soft */
  /* Measured against the three surfaces it appears on -- page, card, sunk --
     rather than picked by eye. It carries the column headings, the day-of-week
     row and every count in the fairness table, and comes out at 9.0:1 on the
     page ground. */
  --ink-3: #a9b9c7; /* orbit --mute */

  /* Green is the working colour: the sweep line, the solved state, anything
     that says the engine did its job. It is never a button fill -- the landing
     CTA is a paper pill and so is this one, which keeps the loudest thing on
     screen the provider colours rather than the chrome. */
  --accent: #35d47c;
  --accent-soft: rgba(53, 212, 124, .14);
  --accent-deep: #4ade8f;

  --ok: #35d47c;
  --ok-soft: rgba(53, 212, 124, .13);
  --warn: #f0b429;
  --warn-soft: rgba(240, 180, 41, .13);
  --bad: #ff6b5e;
  --bad-soft: rgba(255, 107, 94, .13);

  --pad: 22px;
  --r: 16px;
  --r-sm: 11px;
  --pill: 999px;

  --font: "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --track: -.021em;  /* orbit --display-track */

  /* Drop shadows are close to invisible against near-black, so depth comes
     from a lifted surface plus a top highlight instead. */
  --shadow: 0 1px 0 rgba(255, 255, 255, .03), 0 8px 24px rgba(0, 0, 0, .45);
  --shadow-lift: 0 1px 0 rgba(255, 255, 255, .05), 0 18px 44px rgba(0, 0, 0, .6);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: var(--track); }
h1 { font-size: 17px; }
h2 { font-size: 16px; }
h3 { font-size: 15px; }
p { margin: 0; }
a { color: var(--accent-deep); }

.num, td.num, .tabular { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: 5px;
}

/* ---------------------------------------------------------------- controls */

button, select, input, textarea {
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--pill);
  padding: 9px 16px;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s;
}
button { cursor: pointer; font-weight: 500; }
button:hover { background: var(--sunk); border-color: var(--ink-3); }
button:active { transform: translateY(1px); }

/* The landing's CTA: a paper pill with near-black type. Highest contrast on
   the page by a wide margin, which is what a single primary action wants. */
button.primary {
  background: var(--ink);
  border-color: var(--ink);
  color: #05080b;
  box-shadow: 0 2px 10px rgba(234, 241, 247, .12);
  transition: background-color .15s ease, border-color .15s ease,
              transform .12s ease, box-shadow .15s ease;
}
button.primary:hover { background: #fff; border-color: #fff; }
button.primary:active { transform: translateY(1px); box-shadow: 0 1px 4px rgba(234, 241, 247, .14); }
button.primary[disabled] { opacity: .55; cursor: progress; box-shadow: none; }
button.big { padding: 11px 22px; font-size: 15px; }
button.small { padding: 6px 13px; font-size: 13px; }
button.quiet { background: transparent; border-color: transparent; color: var(--ink-2); }
button.quiet:hover { background: var(--sunk); border-color: transparent; }
button.danger { color: var(--bad); border-color: rgba(255, 107, 94, .35); }
button.danger:hover { background: var(--bad-soft); border-color: var(--bad); }

input, select, textarea { border-radius: var(--r-sm); padding: 8px 12px; }
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
/* Everything else that takes focus -- links, tabs, the day buttons in the
   calendar -- rather than only the form controls. */
a:focus-visible, [tabindex]:focus-visible, .day:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px; border-radius: var(--r-sm);
}
::selection { background: var(--accent-soft); }
input[type="color"] { padding: 3px; width: 38px; height: 38px; border-radius: var(--pill); cursor: pointer; }
/* The swatch itself needs rounding too, or it stays a square inside the pill. */
input[type="color"]::-webkit-color-swatch { border: none; border-radius: var(--pill); }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-moz-color-swatch { border: none; border-radius: var(--pill); }
input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }
input[type="range"] { accent-color: var(--accent); padding: 0; border: none; background: none; }
::placeholder { color: var(--ink-3); }

.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer; }

/* ------------------------------------------------------------------- shell */

/* The field the schedule is made of: one canvas behind everything, drifting.
   It shows through the gutters between month cards at rest, and is lifted over
   the whole page while a build is running -- that is the moment the year comes
   apart into it and is pulled back out. See app/web/field.js.

   Named `.drift`, to match the landing page's canvas and because `.field` is
   already this stylesheet's form-field wrapper. */
.drift {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Frosted, not confetti. Sharp little circles drifting in the gutters of a
     calendar are a moving thing next to a thing you are trying to read, and
     the eye goes to the movement every time. Out of focus they are a colour
     wash, which is what a background is for. */
  filter: blur(3.4px);
  transition: filter 320ms ease;
}
/* Less blur while the field is holding the year, because for those few seconds
   it is not a background: it is the schedule. Not zero -- the softness is what
   keeps a year of balls looking like weather rather than like a bad render of
   the calendar it is about to become. */
body.field-front .drift { z-index: 45; filter: blur(1.4px); }

/* The year gets out of the way while the field is holding the picture, and
   comes back once the balls have landed on its cells. It goes all the way out
   rather than merely dim: for those few seconds the balls are the schedule,
   and a ghost of the old year showing through them reads as a rendering
   glitch.

   The fade is one-way. Going out it is instant, because the balls are seeded at
   the day cells' own positions and colours on that same frame -- fading the
   real year out over a quarter second on top of them shows the picture twice,
   slightly out of register, which reads as a rendering fault. Coming back it
   eases, so the landed balls and the year they turn into overlap. */
/* 380ms to match `HAND_MS` in field.js: the year comes up over exactly as long
   as the balls that drew it take to dim, so the two cross rather than one
   arriving on top of the other. */
.year { transition: opacity 380ms ease; }
body.field-front .year { opacity: 0; transition: none; }
body.field-front .people-strip { opacity: .25; transition: opacity 300ms ease; }

@media (prefers-reduced-motion: reduce) {
  .year, body.field-front .year,
  .people-strip, body.field-front .people-strip { transition: none; opacity: 1; }
}

.shell { display: grid; grid-template-columns: 208px minmax(0, 1fr); min-height: 100vh; }

.sidebar {
  padding: 20px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* The mark signs the sidebar rather than heading it. See the note in the
   markup: it is last in the column, under a hairline, and quieter than the
   navigation above it because it is not something anybody needs to find. */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 8px 0;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}
.brand .mark {
  width: 24px; height: 24px; flex: none;
  /* A wheel built from call blocks: "rota" is the wheel, the arcs are stints. */
  overflow: visible;
}
.brand .name {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  color: var(--ink-2);
}

.nav { display: flex; flex-direction: column; gap: 3px; }
.nav button {
  border: none;
  background: none;
  border-radius: var(--pill);
  text-align: left;
  padding: 9px 15px;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.nav button:hover { background: rgba(234, 241, 247, .06); }
.nav button.active { background: var(--ink); color: #05080b; }
.nav .count {
  min-width: 21px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  /* Same reason as the primary button: a 12px numeral is small enough that it
     wants the maximum contrast pair, so it is near-black on full green rather
     than green type on a tinted ground. */
  color: #05080b;
  background: var(--accent);
  border-radius: var(--pill);
  padding: 0 6px;
}
.nav button.active .count { background: rgba(5, 8, 11, .12); color: #05080b; }
.nav .count[hidden] { display: none; }

.sidebar .foot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding: 0 8px; }
.sidebar .foot select { width: 100%; }

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

main { min-width: 0; padding: 20px 24px 60px 8px; position: relative; }

.topbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.topbar .title h1 { font-size: 20px; }

/* The heading is the switcher.
   A native <select> laid transparently over it: the caret and the hover are
   drawn here, everything else -- keyboard, screen reader, the platform's own
   menu on a phone -- comes from the control that is actually there. A custom
   dropdown would have had to re-earn all of that. */
.switcher { position: relative; display: inline-flex; align-items: baseline; gap: 7px; }
.switcher::after { content: "▾"; font-size: 12px; color: var(--ink-3); }
.switcher select {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
  border: none; padding: 0; margin: 0;
}
.switcher:hover h1, .switcher:hover::after { color: var(--accent); }
/* The select carries the focus but cannot show it, being invisible. */
.switcher:focus-within { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-sm); }
.topbar .meta { font-size: 12.5px; color: var(--ink-3); }
.topbar .spacer { flex: 1; }
.topbar .group { display: flex; align-items: center; gap: 9px; }

.menu { position: relative; }
.menu-items {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-lift);
  padding: 6px; min-width: 230px; z-index: 40;
  display: flex; flex-direction: column;
}
.menu-items[hidden] { display: none; }
.menu-items a, .menu-items button {
  padding: 9px 13px; border-radius: var(--r-sm); border: none; background: none;
  text-align: left; color: var(--ink); text-decoration: none; font-size: 13.5px; font-weight: 400;
}
.menu-items a:hover, .menu-items button:hover { background: var(--sunk); }

.banner {
  padding: 11px 16px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  margin-bottom: 16px;
  background: var(--warn-soft);
  color: var(--warn);
}
.banner.bad { background: var(--bad-soft); color: var(--bad); }
.banner.good { background: var(--ok-soft); color: var(--ok); }

/* ------------------------------------------------------------------ panels */

.panel-body { display: none; }
.panel-body.active { display: block; }
.panel-body[data-panel="schedule"].active {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: 18px;
  align-items: start;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 20px 22px;
}
.card + .card { margin-top: 18px; }
.card-head { display: flex; justify-content: space-between; align-items: start; gap: 18px; margin-bottom: 14px; }
.hint { color: var(--ink-3); font-size: 13px; margin-top: 5px; max-width: 74ch; }
.stack { display: flex; flex-direction: column; gap: 18px; }
.row { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.field { display: flex; flex-direction: column; }

details.more { margin-top: 14px; }
details.more > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-2);
  background: var(--sunk);
  border-radius: var(--pill);
  padding: 6px 14px;
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::after { content: "▾"; font-size: 10px; }
details.more[open] > summary::after { content: "▴"; }
details.more > summary:hover { background: rgba(234, 241, 247, .07); }
details.more > .inner { padding-top: 14px; }

/* ---------------------------------------------------------------- calendar */

.people-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.person-pill {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--pill); padding: 6px 14px 6px 8px;
  cursor: pointer; font-size: 13px;
}
.person-pill:hover { border-color: var(--ink-3); }
.person-pill.dim { opacity: .4; }
.person-pill .dot { width: 14px; height: 14px; border-radius: var(--pill); flex: none; }
.person-pill .n { color: var(--ink-3); font-family: var(--mono); font-size: 12px; }

.year { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 14px; }
.month {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow); padding: 14px 15px 16px;
}
.month h3 { font-size: 13.5px; margin-bottom: 9px; }
.month table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.month th { font-size: 10.5px; font-weight: 500; color: var(--ink-3); padding-bottom: 5px; }
/* No horizontal gap, so a run of days touches and reads as one capsule. */
.month td { padding: 2px 0; }

.day {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid transparent;
  border-radius: var(--pill);
  background: var(--sunk);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.day:hover { box-shadow: 0 0 0 2px var(--ink); z-index: 2; transform: none; }
.day.empty { background: none; cursor: default; }
.day.empty:hover { box-shadow: none; }
.day.sel { box-shadow: 0 0 0 2px var(--ink); z-index: 2; }
.day.dim { opacity: .25; }
/* A run of days reads as one capsule: only the ends get rounded. */
.day.cont { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.day.cont-right { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.day.holiday::after {
  content: ""; position: absolute; top: 3px; right: 5px;
  width: 4px; height: 4px; border-radius: var(--pill); background: var(--ink-3);
}
.day.major::after { background: var(--bad); width: 5px; height: 5px; }
.day.locked { box-shadow: inset 0 0 0 1.5px var(--ink); }

@keyframes settle { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.year.fresh .month { animation: settle .26s ease-out backwards; }
@media (prefers-reduced-motion: reduce) { .year.fresh .month { animation: none; } }

/* -------------------------------------------------------------------- rail */

.rail {
  position: sticky; top: 20px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow);
  padding: 20px 21px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.rail-empty h3 { margin-bottom: 7px; }
.rail-empty p { color: var(--ink-3); font-size: 13px; }
.rail .date-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rail .date-sub { color: var(--ink-3); font-size: 13px; margin-bottom: 16px; }
.tag {
  font-size: 11.5px; padding: 3px 10px; border-radius: var(--pill);
  background: var(--sunk); color: var(--ink-2);
}
.tag.major { background: var(--bad-soft); color: var(--bad); }
.tag.ok { background: var(--ok-soft); color: var(--ok); }
.tag.warn { background: var(--warn-soft); color: var(--warn); }
.tag.bad { background: var(--bad-soft); color: var(--bad); }

.slot { background: var(--sunk); border-radius: var(--r-sm); padding: 13px 14px; margin-bottom: 11px; }
.slot .duty { font-size: 12px; color: var(--ink-3); }
.slot .who { display: flex; align-items: center; gap: 9px; margin: 5px 0 11px; font-weight: 600; }
.slot .who .dot { width: 14px; height: 14px; border-radius: var(--pill); flex: none; }
.slot select { width: 100%; background: var(--card); }
.slot .actions { display: flex; gap: 7px; margin-top: 9px; }
.slot .actions button { flex: 1; background: var(--card); }

.why h4 { font-size: 13px; margin: 18px 0 10px; }
.why ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.why li { font-size: 13px; }
.why li b { font-weight: 600; }
.why li span { color: var(--ink-3); display: block; }

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

.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th {
  text-align: left; font-size: 12px; font-weight: 500; color: var(--ink-3);
  padding: 0 12px 9px; white-space: nowrap;
}
tbody td { padding: 11px 12px; border-top: 1px solid var(--line); white-space: nowrap; }
tbody tr:hover { background: rgba(234, 241, 247, .04); }
td.num, th.num { text-align: right; }
.pill-name { display: inline-flex; align-items: center; gap: 9px; font-weight: 500; }
.pill-name .dot { width: 13px; height: 13px; border-radius: var(--pill); }
.delta { font-family: var(--mono); font-size: 12.5px; padding: 2px 9px; border-radius: var(--pill); }
.delta.ok { background: var(--ok-soft); color: var(--ok); }
.delta.warn { background: var(--warn-soft); color: var(--warn); }
.delta.bad { background: var(--bad-soft); color: var(--bad); }
.muted { color: var(--ink-3); }

.bar-row { display: grid; grid-template-columns: 178px minmax(0, 1fr) 60px; align-items: center; gap: 14px; padding: 5px 0; font-size: 13px; }
.bar { height: 7px; background: var(--sunk); border-radius: var(--pill); }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: var(--pill); }
.bar-row .v { text-align: right; font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }

.notes { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.notes li { font-size: 13px; color: var(--warn); background: var(--warn-soft); border-radius: var(--r-sm); padding: 10px 14px; }
.notes li.clear { color: var(--ok); background: var(--ok-soft); }

/* --------------------------------------------------------------- providers */

.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 16px; }
.person {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow); padding: 17px 18px;
}
.person-top { display: flex; align-items: center; gap: 10px; }
.person-top input[type="text"] { flex: 1; font-weight: 600; }
.person-summary { font-size: 12.5px; color: var(--ink-3); margin: 11px 0 0; }
.person-note {
  font-size: 12.5px; color: var(--ink-2); margin-top: 8px;
  background: var(--sunk); border-radius: var(--r-sm); padding: 8px 12px;
}
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.grid-2 input, .grid-2 select, .grid-3 input, .grid-3 select { width: 100%; }
.wide { grid-column: 1 / -1; }

.dows { display: flex; gap: 4px; }
.dows button { flex: 1; padding: 7px 0; font-size: 12px; border-radius: var(--pill); }
.dows button.on { background: var(--accent); color: #05080b; border-color: var(--accent); }
.dows button.avoid { background: var(--bad-soft); color: var(--bad); border-color: rgba(255, 107, 94, .35); }

.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chips button { font-size: 12px; padding: 4px 12px; background: var(--sunk); border-color: transparent; }
.chips button:hover { background: var(--bad-soft); color: var(--bad); }
.chips input[type="date"] { font-size: 12.5px; padding: 5px 10px; }

/* ------------------------------------------------------------------- inbox */

.inbox { display: flex; flex-direction: column; gap: 10px; }
.item {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px 17px; display: flex; justify-content: space-between;
  align-items: center; gap: 16px; flex-wrap: wrap;
}
.item.pending { border-left: 4px solid var(--accent); }
.item.approved { border-left: 4px solid var(--ok); }
.item.denied { border-left: 4px solid var(--line-2); opacity: .62; }
.item .what { font-size: 14px; }
.item .when { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.item .acts { display: flex; gap: 8px; }
.state { font-size: 12.5px; color: var(--ink-3); text-transform: capitalize; }
.empty-note {
  padding: 26px; color: var(--ink-3); font-size: 13.5px;
  background: var(--card); border: 1px dashed var(--line-2); border-radius: var(--r);
}

.stat-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.stat {
  flex: 1 1 150px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow); padding: 15px 17px;
}
.stat .v { font-size: 25px; font-family: var(--mono); line-height: 1.15; }
.stat .k { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }

/* ---------------------------------------------------------------------- me */

.me-wrap { max-width: 1120px; margin: 0 auto; padding: 30px 24px 70px; }
.me-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.me-head .swatch { width: 44px; height: 44px; border-radius: var(--pill); flex: none; }
.me-head h1 { font-size: 22px; }
.me-head .meta { color: var(--ink-3); font-size: 13.5px; }
.me-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.my-days { display: flex; flex-direction: column; gap: 8px; max-height: 560px; overflow-y: auto; padding-right: 4px; }
.my-day {
  background: var(--sunk); border-radius: var(--pill); padding: 9px 10px 9px 18px;
  display: grid; grid-template-columns: 132px 1fr auto; gap: 12px; align-items: center; font-size: 13.5px;
}
.my-day .d { font-family: var(--mono); }
.my-day.is-holiday { background: var(--warn-soft); }
.my-day select { background: var(--card); font-size: 13px; padding: 6px 12px; }

@media (max-width: 1160px) {
  .panel-body[data-panel="schedule"].active { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; max-height: none; }
  .me-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 780px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; height: auto; flex-direction: row; align-items: center; overflow-x: auto; gap: 14px; }
  .nav { flex-direction: row; }
  .nav button { white-space: nowrap; }
  .sidebar .foot { margin: 0; }
  /* The column becomes a scrolling row here, and last in a scrolling row is
     off the side of a phone. The mark leads it instead, as a mark on its own:
     the word would eat a third of the strip the tabs have to fit in. */
  .brand {
    order: -1;
    margin: 0;
    padding-top: 0;
    border-top: none;
    flex: none;
  }
  .brand .name { display: none; }
  main { padding: 0 16px 50px; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* House rules reuses the weekday chips from the People cards, but sits in a
   full-width card where they would otherwise stretch out of proportion. */
#houseRules .dows { max-width: 560px; }
#houseRules h3 { margin-bottom: 2px; }

/* ------------------------------------------------------------------- board

   Every call list the hospital runs, side by side. A grid rather than a table
   because the interesting part of a row is the people on call today, which is
   a handful of coloured names and does not fit a cell. auto-fill so a hospital
   with three services fills the width and one with fifteen wraps, without
   either being told a column count. */

.board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
/* The stacked-cards rule does not apply here: these are side by side, and an
   18px top margin on every card but the first made each one 18px shorter than
   its row and hung it off the bottom edge. */
.board .card + .card { margin-top: 0; }
.board-card { display: flex; flex-direction: column; }
.board-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.board-facts {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
  margin-top: 8px; font-size: 13px; color: var(--ink-3);
}
.board-today { display: flex; flex-direction: column; gap: 7px; }
/* The button sits on the bottom edge of every card whatever is above it, so a
   row of cards reads as a row rather than as a staircase. Its own class rather
   than an inline margin, which an earlier version had and which beat this. */
.board-act { margin-top: auto; padding-top: 16px; }

/* ------------------------------------------------------------ the lock screen

   The office side asks for its password in the page rather than through the
   browser's own dialog: that dialog cannot say what it is for, cannot be
   styled, and on a phone asks again far too often. This asks once per device
   and remembers.

   Every colour here is one of the app's own tokens. Written with hard-coded
   fallbacks first time round, it rendered a white card with white type on a
   dark page -- a login screen you cannot read is the worst one to get wrong. */

.lock {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: 24px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(6px);
}
.lock-card {
  width: min(380px, 100%);
  display: flex; flex-direction: column; gap: 10px;
  padding: 26px 26px 24px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 60px -26px rgba(0, 0, 0, .8);
}
.lock-card h2 { margin: 0; font-size: 21px; letter-spacing: -.02em; color: var(--ink); }
.lock-card p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.45; }
.lock-card label {
  margin-top: 6px; font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.lock-card input {
  font: inherit; font-size: 16px;   /* 16px, or iOS zooms the page on focus */
  padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--bg); color: var(--ink);
}
.lock-card input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lock-card button {
  margin-top: 4px; font: inherit; font-weight: 700; font-size: 15px;
  padding: 12px 18px; border: 0; border-radius: 9px; cursor: pointer;
  background: var(--accent-deep); color: #062012;
}
.lock-card button:hover { background: var(--accent); }
.lock-bad { color: #ff9a90; font-weight: 600; }