:root {
  --ground: #F4F6F9;
  --surface: #FFFFFF;
  --surface-2: #EDF1F6;
  --ink: #14213A;
  --ink-2: #3A4A66;
  --muted: #6B7B94;
  --line: #D9E0EA;
  --line-soft: #E7ECF3;
  --navy: #1E3A5F;
  --navy-soft: #E3EAF3;
  --on-accent: #FFFFFF;
  --gold: #A67C1F;
  /* The same gold taken down six points of lightness. The brand gold is right
     for a 2px rule or a bar, but at label sizes it lands at 3.5:1 on the page
     background — under the 4.5:1 that text this small needs. Same hue, same
     saturation, legible. Used for every small gold label; the brand gold still
     does the graphic work. */
  --gold-ink: #8E6A1B;
  --gold-soft: #F2E9D2;
  --good: #2E6F52;
  --good-soft: #DFEDE5;
  --warn: #B05E12;
  --warn-soft: #F8E8D6;
  --crit: #9E3227;
  --crit-soft: #F6E0DD;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(20,33,58,.06), 0 8px 24px -14px rgba(20,33,58,.28);
  --display: "Spectral", "Iowan Old Style", Georgia, serif;
  --sans: "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0E1622; --surface: #17212F; --surface-2: #1E293A;
    --ink: #E6ECF5; --ink-2: #BCC8DA; --muted: #8494AB;
    --line: #2A3648; --line-soft: #222D3D;
    --navy: #8FB4DE; --navy-soft: #1D2E44; --on-accent: #0E1622;
    --gold: #D6AC55; --gold-ink: #D6AC55; --gold-soft: #322A17;
    --good: #6FBF95; --good-soft: #14301F;
    --warn: #E0A05C; --warn-soft: #33230F;
    --crit: #E38578; --crit-soft: #3A1D18;
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 28px -16px rgba(0,0,0,.7);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--sans); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* ---- page width ----------------------------------------------------------
   The board grows in steps rather than filling the screen edge to edge. Text
   that runs the full width of a 32" monitor is genuinely harder to read, so
   the extra room goes into more cards per row instead of longer lines. Reading
   pages (a desk, a task, sign-in) stay narrow on purpose. */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 18px; padding-block: 20px 70px; }
.wrap.narrow { max-width: 680px; }
@media (min-width: 1400px) { .wrap:not(.narrow) { max-width: 1280px; } }
@media (min-width: 1680px) { .wrap:not(.narrow) { max-width: 1500px; } }
@media (min-width: 1980px) { .wrap:not(.narrow) { max-width: 1720px; } }

h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; letter-spacing: -.01em; }
h1 { font-size: 28px; line-height: 1.15; }
h2 { font-size: 19px; }
h3 { font-size: 16.5px; }
p { margin: 0; }
a { color: var(--navy); }

.eyebrow { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
           text-transform: uppercase; color: var(--gold-ink); }

/* ---- top bar ---- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px;
          flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.brand strong { font-family: var(--display); font-size: 18px; font-weight: 600; display: block; }
.navlinks { display: flex; gap: 4px; flex-wrap: wrap; }
.navlinks a { font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--ink-2);
              padding: 5px 11px; border-radius: 999px; border: 1px solid transparent; }
.navlinks a:hover { border-color: var(--line); }
.navlinks a.on { background: var(--navy-soft); color: var(--navy); }
.navlinks a.quiet { color: var(--muted); font-weight: 500; }

/* ---- page head ---- */
.pagehead { margin-bottom: 6px; }
.pagehead h1 { margin-top: 3px; }
.pagehead .sub { color: var(--muted); font-size: 13.5px; margin-top: 5px; }
.rule { height: 2px; width: 44px; background: var(--gold); border-radius: 2px; margin-top: 14px; }

/* ---- flash ---- */
.flash { padding: 10px 14px; border-radius: var(--radius); font-size: 14px; margin-bottom: 18px;
         border: 1px solid var(--good); background: var(--good-soft); color: var(--good); }
.flash.err { border-color: var(--crit); background: var(--crit-soft); color: var(--crit); }
.flash.info { border-color: var(--gold); background: var(--gold-soft); color: var(--gold); }

/* ---- stats ---- */
.pulse { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-soft);
         border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 22px; }
.pulse.three { grid-template-columns: repeat(3, 1fr); }
.pulse > div { background: var(--surface); padding: 12px 14px; }
.pulse .n { font-family: var(--display); font-size: 24px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pulse .k { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.pulse .crit .n { color: var(--crit); }
.pulse .warn .n { color: var(--warn); }
.pulse .gold .n { color: var(--gold); }
@media (max-width: 560px) {
  .pulse { grid-template-columns: 1fr 1fr; }
  .pulse.three { grid-template-columns: repeat(3, 1fr); }
  .pulse.three .n { font-size: 21px; }
  .pulse.three .k { font-size: 9.5px; letter-spacing: .04em; }
}

/* ---- sections ---- */
.sec { margin-top: 34px; }

/* Runway and EventSites ride side by side once there's room for both to stay
   readable. Below the breakpoint .topgrid is an ordinary block and its two
   sections stack, which is also what happens when only one of them renders. */
@media (min-width: 1280px) {
  .topgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
             gap: 0 30px; align-items: start; }
}

/* Projects on the left, whatever needs a decision on the right. */
.deskcols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
            gap: 28px; align-items: start; }
@media (max-width: 900px) { .deskcols { grid-template-columns: 1fr; gap: 30px; } }

/* Past a certain width a single stack of project cards is mostly empty space
   to the right of each task. Two across halves the scrolling instead.

   auto-fit rather than two fixed tracks: with one project on the board a fixed
   grid leaves half the column empty, which reads as a layout fault rather than
   as room for the next project. Empty tracks collapse, so a lone card fills the
   width and a second one still lands beside it. */
@media (min-width: 1680px) {
  .projlist { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
              gap: 13px; align-items: start; }
  .projlist > .card + .card { margin-top: 0; }
}
.sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
           border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 16px; }
.sechead .hint { font-size: 12.5px; color: var(--muted); }

/* ---- cards & task rows ---- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.card + .card { margin-top: 13px; }
.card > header { padding: 12px 16px 10px; border-bottom: 1px solid var(--line-soft);
                 display: flex; gap: 4px 12px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.card > header .lead { font-size: 12.5px; color: var(--muted); }
/* .pad is used two ways: as a modifier on the card itself
   (class="card pad") and on a wrapper inside one. Both need to match — a
   descendant-only selector silently skips the first, which is how forms end
   up with their labels and buttons jammed against the border. */
.card.pad, .card .pad { padding: 16px 18px; }

/* The last field in a padded form sits right above the button; give the
   button a little room of its own rather than relying on that margin. */
.card.pad > .btn, .card .pad > .btn { margin-top: 3px; }

ul.tasks { list-style: none; margin: 0; padding: 0; }
li.taskrow { display: flex; gap: 11px; align-items: flex-start; padding: 11px 16px;
             border-bottom: 1px solid var(--line-soft); }
li.taskrow:last-child { border-bottom: 0; }
li.taskrow.done .t { text-decoration: line-through; color: var(--muted); }

.tickform { margin: 0; flex: none; }
.tick { width: 20px; height: 20px; margin-top: 1px; border-radius: 5px; cursor: pointer; padding: 0;
        border: 1.5px solid var(--line); background: var(--surface); position: relative; display: block; }
.tick:hover { border-color: var(--navy); }
.tick[data-on="1"] { background: var(--good); border-color: var(--good); }
.tick[data-on="1"]::after { content: ""; position: absolute; left: 5.5px; top: 2px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg); }

.taskbody { flex: 1; min-width: 0; }
.t { font-size: 14.5px; line-height: 1.4; overflow-wrap: break-word; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 9px; align-items: center; margin-top: 5px;
        font-size: 12px; color: var(--muted); }
.meta .who { color: var(--ink-2); font-weight: 600; }
.due { font-variant-numeric: tabular-nums; }
.due.over { color: var(--crit); font-weight: 600; }
.due.soon { color: var(--warn); font-weight: 600; }
.notes { font-size: 13px; color: var(--ink-2); margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--line); }

.pill { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
        padding: 2px 7px; border-radius: 4px; background: var(--surface-2); color: var(--ink-2); }
.pill.doing { background: var(--navy-soft); color: var(--navy); }
.pill.blocked { background: var(--crit-soft); color: var(--crit); }
.pill.done { background: var(--good-soft); color: var(--good); }

.inlineform { display: inline; margin: 0; }
.mini { font: inherit; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 5px; cursor: pointer;
        border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); text-decoration: none; display: inline-block; }
.mini:hover { border-color: var(--navy); color: var(--navy); }

/* ---- forms ---- */
input, select, textarea {
  font: inherit; font-size: 14px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; min-width: 0; max-width: 100%;
}
textarea { resize: vertical; min-height: 70px; width: 100%; }
label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
        color: var(--muted); margin-bottom: 4px; }
.field { margin-bottom: 13px; }
.field input, .field select, .field textarea { width: 100%; }
.row { display: flex; gap: 9px; flex-wrap: wrap; }
.row > * { flex: 1 1 150px; }

.btn { font: inherit; font-size: 13.5px; font-weight: 600; padding: 8px 16px; border-radius: 7px; cursor: pointer;
       border: 1px solid var(--navy); background: var(--navy); color: var(--on-accent); text-decoration: none; display: inline-block; }
.btn.ghost { background: var(--surface); color: var(--ink-2); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--navy); color: var(--navy); }
.btn.danger { background: var(--surface); color: var(--crit); border-color: var(--crit); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

.addrow { display: flex; gap: 8px; padding: 10px 16px; background: var(--surface-2); flex-wrap: wrap; margin: 0; }
.addrow input, .addrow select { flex: 1 1 140px; font-size: 13.5px; padding: 6px 9px; }
.addrow .grow { flex: 3 1 200px; }

/* ---- team grid ---- */
.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.mate { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
        padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }
.mate.stale { border-left: 3px solid var(--gold); }
.mate .nm { font-family: var(--display); font-size: 15.5px; font-weight: 600; }
.mate .rl { font-size: 12px; color: var(--muted); margin-top: -4px; }
.mate .nums { display: flex; gap: 12px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mate .nums b { font-family: var(--display); font-size: 15px; font-weight: 700; }
.mate .nums .od b { color: var(--crit); }
.mate .warnline { font-size: 11.5px; color: var(--gold); font-weight: 600; }

/* ---- events ---- */
.runway { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 11px; }
.ev { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--navy);
      border-radius: var(--radius); padding: 13px 14px; display: flex; flex-direction: column; gap: 8px; }
.ev.soon { border-top-color: var(--warn); }
.ev.now { border-top-color: var(--crit); }
.ev .name { font-family: var(--display); font-size: 16px; font-weight: 600; line-height: 1.25; }
.ev .days { font-family: var(--display); font-size: 26px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.ev .days span { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .06em;
                 text-transform: uppercase; color: var(--muted); margin-left: 6px; }
.ev.soon .days { color: var(--warn); }
.ev.now .days { color: var(--crit); }
.ev .when, .ev .tally { font-size: 12px; color: var(--muted); }
.bar { height: 5px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--good); }

/* ---- messages ---- */
.msg { padding: 13px 16px; border-bottom: 1px solid var(--line-soft); }
.msg:last-child { border-bottom: 0; }
.msg .from { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 4px; }
.msg .q { font-size: 14.5px; line-height: 1.42; }
.msg .ctx { font-size: 12.5px; color: var(--muted); margin-top: 4px; font-style: italic; }
.msg.answered { background: var(--good-soft); }
.msg .a { font-size: 13.5px; margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--good); color: var(--ink-2); }
/* Who replied, tucked under the reply and aligned with it. */
.msg .byline { font-size: 12px; color: var(--muted); margin-top: 4px; padding-left: 12px; }
.msg .byline b { color: var(--ink-2); font-weight: 600; }
.msg form { margin-top: 9px; }
.msg .acts { display: flex; gap: 7px; margin-top: 8px; }

.empty { padding: 22px 16px; color: var(--muted); font-size: 13.5px; text-align: center; }
.note { font-size: 12.5px; color: var(--muted); margin-top: 10px; line-height: 1.5; }

/* ---- login ---- */
.login { max-width: 380px; margin: 8vh auto 0; }
.login h1 { margin-bottom: 6px; }
.login .card { padding: 22px; margin-top: 22px; }

/* ---- table ---- */
.scroller { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14px; }
th, td { text-align: left; padding: 10px 13px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
thead th { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
           background: var(--surface-2); border-bottom: 1px solid var(--line); }
tbody tr:last-child td { border-bottom: 0; }

code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .88em;
       background: var(--surface-2); padding: 2px 6px; border-radius: 4px; word-break: break-all; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---- notes and the completion archive ---- */
details.noteadd { margin-top: 7px; }
details.noteadd > summary { font-size: 11.5px; font-weight: 600; color: var(--muted); cursor: pointer;
  list-style: none; display: inline-block; padding: 1px 8px; border: 1px solid var(--line);
  border-radius: 5px; background: var(--surface); }
details.noteadd > summary::-webkit-details-marker { display: none; }
details.noteadd > summary:hover { color: var(--navy); border-color: var(--navy); }
details.noteadd[open] > summary { color: var(--navy); border-color: var(--navy); }
details.noteadd form { margin-top: 7px; display: grid; gap: 6px; justify-items: start; }
details.noteadd textarea { font-size: 13.5px; min-height: 52px; }

details.archive { margin-top: 16px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; }
details.archive > summary { cursor: pointer; padding: 12px 16px; list-style: none;
  display: flex; align-items: center; gap: 9px; font-family: var(--display); font-size: 15.5px;
  font-weight: 600; color: var(--ink-2); }
details.archive > summary::-webkit-details-marker { display: none; }
details.archive > summary::before { content: "▸"; color: var(--muted); font-family: var(--sans); font-size: 12px; }
details.archive[open] > summary::before { content: "▾"; }
details.archive[open] > summary { border-bottom: 1px solid var(--line-soft); }
details.archive > summary .count { font-family: var(--sans); font-size: 11px; font-weight: 700;
  background: var(--good-soft); color: var(--good); padding: 2px 8px; border-radius: 999px; }
.archmonth { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
  font-weight: 600; padding: 11px 16px 5px; background: var(--surface-2); }
ul.archlist { list-style: none; margin: 0; padding: 0; }
ul.archlist li { padding: 8px 16px; border-bottom: 1px solid var(--line-soft); display: flex;
  flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
ul.archlist li:last-child { border-bottom: 0; }
ul.archlist .ttl { font-size: 13.5px; color: var(--muted); text-decoration: line-through; flex: 1 1 200px; }
ul.archlist .sub { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

/* ---- events ---- */
.evbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px;
  background: var(--line-soft); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; margin-top: 22px; }
.evbar .evstat { background: var(--surface); padding: 12px 15px; }
.evbar .n { font-family: var(--display); font-size: 24px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.evbar .n.bad { color: var(--crit); }
.evbar .k { display: block; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }

.cd { display: inline-block; font-family: var(--display); font-size: 20px; font-weight: 700;
  line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.cd.now { color: var(--crit); }
.cd.soon { color: var(--warn); }
.cd.past { color: var(--muted); }

.evcols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: start; margin-top: 34px; }
@media (max-width: 900px) { .evcols { grid-template-columns: 1fr; gap: 34px; } }

details.wsblock { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 11px; overflow: hidden; }
details.wsblock > summary { cursor: pointer; padding: 12px 16px; list-style: none; display: flex;
  align-items: center; gap: 9px; font-family: var(--display); font-size: 16px; font-weight: 600; }
details.wsblock > summary::-webkit-details-marker { display: none; }
details.wsblock > summary::before { content: "▸"; color: var(--muted); font-family: var(--sans); font-size: 12px; }
details.wsblock[open] > summary::before { content: "▾"; }
details.wsblock[open] > summary { border-bottom: 1px solid var(--line-soft); }
details.wsblock .donecount { margin-left: auto; font-family: var(--sans); font-size: 11px; font-weight: 600;
  color: var(--muted); background: var(--surface-2); padding: 2px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.wsbody { padding: 15px 16px 4px; }

.savebar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px;
  position: sticky; bottom: 0; background: var(--ground); padding: 10px 0; }
.savebar .hint { font-size: 12.5px; color: var(--muted); }

.readouts { margin: 0; }
.readout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 4px 16px;
  padding: 10px 16px; border-bottom: 1px solid var(--line-soft); }
.readout:last-child { border-bottom: 0; }
@media (max-width: 560px) { .readout { grid-template-columns: 1fr; } }
.readout dt { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  font-weight: 600; padding-top: 3px; }
.readout dd { margin: 0; font-size: 14.5px; color: var(--ink); overflow-wrap: break-word; }
.readout .tbd { color: var(--muted); font-style: italic; }

.evgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.evcard { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--navy);
  border-radius: var(--radius); padding: 14px 15px; display: flex; flex-direction: column; gap: 9px; }
.evcard.soon { border-top-color: var(--warn); }
.evcard.now { border-top-color: var(--crit); }
.evcard.past { border-top-color: var(--line); }
.evcard > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.evcard h3 { font-size: 16px; line-height: 1.25; }
.evcard h3 a { text-decoration: none; color: var(--ink); }
.evcard h3 a:hover { color: var(--navy); }
.evwhen { font-size: 12.5px; color: var(--muted); }
.evmeter { display: grid; gap: 5px; }
.mrow { display: grid; grid-template-columns: 64px minmax(0, 1fr) 34px; gap: 8px; align-items: center;
  font-size: 11px; color: var(--muted); }
.mrow b { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.mrow .bar i.alt { background: var(--gold); }
.evfacts { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.evfacts .bad { color: var(--crit); font-weight: 600; }
.evfacts .muted { color: var(--muted); }
.evacts { display: flex; gap: 7px; flex-wrap: wrap; margin-top: auto; padding-top: 3px; }

/* ---- repeatable EventSite rows ---- */
table.rowgrid { min-width: 640px; font-size: 13.5px; }
table.rowgrid th { padding: 8px 10px; font-size: 10px; }
table.rowgrid td { padding: 5px 6px; vertical-align: top; }
table.rowgrid input, table.rowgrid textarea { width: 100%; font-size: 13px; padding: 5px 7px; border-radius: 5px; }
table.rowgrid textarea { min-height: 40px; }
table.rowgrid tbody tr:nth-child(odd) td { background: transparent; }
table.rowgrid .tbd { color: var(--muted); }
.wsbody .scroller { border-radius: 8px; }

/* the save bar must read as a bar, not as text floating over a table */
.savebar { border-top: 1px solid var(--line); box-shadow: 0 -6px 14px -10px rgba(20,33,58,.4);
  padding: 12px 0 14px; z-index: 5; }
table.rowgrid { min-width: 760px; }
.savebar.plain { position: static; box-shadow: none; }

/* ===========================================================================
   Phones and small tablets.
   Kept in one block at the end so it's obvious what changes on a small screen
   and nothing above has to be read to understand it. The layout above is
   already fluid — this tightens spacing, enlarges the things a thumb has to
   hit, and stops the few fixed-width grids from squeezing.
   ========================================================================= */
@media (max-width: 700px) {
  .wrap { padding: 0 14px; padding-block: 14px 56px; }

  h1 { font-size: 23px; }
  h2 { font-size: 17.5px; }
  .pagehead .sub { font-size: 13px; }

  /* Brand on its own line, then the nav as a full-width row of real buttons. */
  .topbar { padding-bottom: 11px; margin-bottom: 18px; gap: 10px; }
  .navlinks { width: 100%; gap: 6px; }
  .navlinks a { padding: 7px 13px; font-size: 14px; border-color: var(--line); }
  .navlinks a.quiet { margin-left: auto; border-color: transparent; }

  .sec { margin-top: 26px; }
  .sechead { margin-bottom: 13px; }

  /* One card per row beats two half-legible ones. */
  .runway, .evgrid, .team { grid-template-columns: 1fr; }

  /* Stacked add-forms: every control full width, button last and tappable. */
  .addrow { padding: 12px 14px; gap: 9px; }
  .addrow input, .addrow select, .addrow .grow { flex: 1 1 100%; font-size: 16px; padding: 9px 11px; }
  .addrow .btn, .addrow button { width: 100%; padding: 11px 16px; }

  /* 16px stops iOS zooming the page in when a field is focused. */
  input, select, textarea { font-size: 16px; }

  /* Row actions are 11px chips on a desktop; that's not a tap target. */
  .mini { font-size: 13px; padding: 6px 12px; border-radius: 7px; }
  .evacts { gap: 8px; }
  .taskrow .meta { gap: 7px 10px; }
  .tick { width: 24px; height: 24px; }
  .tick[data-on="1"]::after { left: 7px; top: 3.5px; width: 6px; height: 12px; }
  /* The checkbox stays 24px so the row doesn't balloon, but an invisible
     collar around it gives a thumb the ~44px it actually needs. */
  .tick::before { content: ""; position: absolute; inset: -10px; }

  .btn { padding: 10px 18px; }
  .card.pad, .card .pad { padding: 14px 15px; }
  li.taskrow { padding: 12px 14px; }

  /* The sticky save bar eats a phone screen; let it scroll with the form. */
  .savebar { position: static; box-shadow: none; }
  .savebar .btn { width: 100%; }
  .savebar .hint { width: 100%; text-align: center; }

  /* Wide data tables keep their own horizontal scroll rather than shrinking. */
  .scroller { -webkit-overflow-scrolling: touch; }
}

@media (max-width: 430px) {
  .pulse .n { font-size: 21px; }
  .pulse > div { padding: 10px 11px; }
  .evbar { grid-template-columns: 1fr 1fr; }
}

/* A date field has a fixed natural size; letting it stretch to fill a wrapped
   row makes the add-a-task forms look broken in narrow columns. */
.addrow input[type="date"] { flex: 0 1 170px; }
@media (max-width: 700px) { .addrow input[type="date"] { flex: 1 1 100%; } }

/* ---- the public request form ----------------------------------------------
   The honeypot. Off-screen rather than display:none, because some bots skip
   anything explicitly hidden. Real people never reach it: it is out of the
   flow, untabbable and marked aria-hidden. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

input[type="file"] { width: 100%; font-size: 14px; padding: 9px 10px; background: var(--surface-2);
                     border: 1px dashed var(--line); border-radius: 7px; cursor: pointer; }

/* ---- maintenance ---- */
/* align-items:start, or every card in a row stretches to match the tallest —
   one request with a photo leaves its neighbours with a foot of white space. */
.reqgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
           gap: 12px; align-items: start; }
.req { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
       padding: 14px 16px; border-left: 3px solid var(--line); }
.req.urgent { border-left-color: var(--crit); }
.req.soon   { border-left-color: var(--warn); }
.req.fresh  { box-shadow: var(--shadow); }
.req h3 { font-size: 15.5px; line-height: 1.35; }
.req .ref { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px;
            letter-spacing: .04em; color: var(--muted); }
.req .who { font-size: 13px; color: var(--ink-2); margin-top: 7px; }
.req .who b { font-weight: 600; }
.req .said { font-size: 13.5px; color: var(--ink-2); margin-top: 9px; padding-left: 10px;
             border-left: 2px solid var(--line-soft); white-space: pre-wrap; }
.req .reqacts { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.req .thumb { display: block; margin-top: 10px; border-radius: 8px; border: 1px solid var(--line);
              max-height: 190px; width: auto; }
.assignbox { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line-soft); }
.assignbox .people { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 9px; }
.assignbox label.pick { display: inline-flex; align-items: center; gap: 5px; font-size: 13px;
                        text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink-2);
                        margin: 0; cursor: pointer; }
.assignbox label.pick input { width: auto; margin: 0; }
.badge { display: inline-block; min-width: 17px; padding: 0 5px; border-radius: 999px;
         background: var(--crit); color: #fff; font-size: 10.5px; font-weight: 700;
         line-height: 17px; text-align: center; margin-left: 5px; }

/* ---- the clock ------------------------------------------------------------
   Tabular figures so the seconds tick without the line jittering sideways —
   a clock that shoves the text beside it back and forth every second is worse
   than no clock. */
.clock { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ===========================================================================
   The mark
   ========================================================================= */
.mark { display: block; color: var(--navy); flex: none; }

/* The lockup in the top bar. It is the whole logo now — mark and wordmark as
   drawn — so there is no stacking to reproduce here. */
.brand { display: flex; align-items: center; gap: 16px; color: var(--navy); }
.lockup.topbrand { display: block; height: 54px; width: auto; }

/* Logo, a breath, a rule, then the name of the thing you are actually in. */
.brandrule { width: 1px; align-self: stretch; margin: 6px 0; background: var(--line); flex: none; }
.brand .product {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-ink); white-space: nowrap;
}

@media (max-width: 700px) {
  .brand { gap: 12px; }
  .lockup.topbrand { height: 42px; }
  .brand .product { font-size: 11.5px; letter-spacing: .14em; }
}

/* Visible to a screen reader, to nobody else. The logo is a picture; the name
   still needs to be readable by something that cannot see it. */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- the clock panel ------------------------------------------------------
   No dome here. The mark's weight is all along its flat bottom edge, so beside
   a block of type it reads as sinking however it is aligned. The day gets a
   straight bar instead, which sits level with text and says the same thing. */
.clockpanel {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 15px 20px; margin-top: 22px;
}
.cp-read { min-width: 0; }
.cp-time {
  font-family: var(--display); font-weight: 600; font-size: 38px; line-height: 1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink);
  display: flex; align-items: baseline; gap: 2px;
}
.cp-sec { font-size: 20px; color: var(--muted); font-weight: 400; }
.cp-sec::before { content: ":"; }
.cp-ampm { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .08em;
           text-transform: uppercase; color: var(--muted); margin-left: 7px; }
.cp-date { font-size: 14px; color: var(--ink-2); margin-top: 7px; }
.cp-tz { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
         color: var(--gold-ink); margin-top: 3px; }

.cp-day { flex: 1 1 220px; max-width: 380px; margin-left: auto; }
.cp-daylabel { font-size: 12.5px; color: var(--muted); margin-bottom: 7px; }
.cp-track { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.cp-track i { display: block; height: 100%; border-radius: 999px;
              background: linear-gradient(90deg, var(--navy), var(--gold));
              transition: width 800ms cubic-bezier(.4,0,.2,1); }
.cp-ends { display: flex; justify-content: space-between; margin-top: 5px;
           font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 620px) {
  .clockpanel { gap: 14px; padding: 13px 15px; }
  .cp-time { font-size: 31px; }
  .cp-sec { font-size: 17px; }
  .cp-day { flex-basis: 100%; max-width: none; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .cp-track i { transition: none; } }

/* The mark again, very quietly, behind the sign-in card. */
.lockup { display: block; color: var(--navy); height: auto; max-width: 100%; }
.lockup.signin { margin: 0 auto 14px; }
.lockup.pub    { margin: 0 0 12px; }

/* The lockup already says the church's name, so the eyebrow above the page
   title would only say it twice. */
.login .lockup + h1 { margin-top: 4px; }


/* ---- the mark, waking up ---------------------------------------------------
   Only on the sign-in and set-up pages, where nobody is trying to work. Each
   segment carries its own delay, so the light crosses the dome in the order
   the sun would — up from the left, over the top, down to the right — then
   recedes the same way and goes round again.

   It is a loop, not a clock: nothing here is claiming to tell you the time. */
@keyframes markSweep {
  0%,  2%   { opacity: .16; }
  9%,  64%  { opacity: 1; }
  76%, 100% { opacity: .16; }
}
.lockup.live .arc path {
  opacity: .16;
  animation: markSweep 7s ease-in-out infinite;
}
/* The wordmark stays put. Only the dome moves. */
.lockup.live > path,
.lockup.live > g:not(.arc) path { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .lockup.live .arc path { animation: none; opacity: 1; }
}

/* A message in the collapsed list is a record, not something to act on. */
.msg.archived { background: transparent; padding: 11px 16px; }
.msg.archived .q { color: var(--ink-2); }
.msg.archived .a { border-left-color: var(--line); }

/* ---- church calendar ------------------------------------------------------
   The strip on the board and on every desk: the next few things that are not
   the weekly services. Cards rather than a list because it is read at a glance
   on the way past, not studied. */
.calstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 11px; }
.calcard { display: flex; gap: 13px; align-items: flex-start;
           background: var(--surface); border: 1px solid var(--line);
           border-radius: var(--radius); padding: 13px 15px; }
/* The same countdown language the Runway uses, so "soon" means one thing
   across the whole board. */
.calcard.soon { border-color: var(--gold); }
.calcard.now  { border-color: var(--crit); }
.calcard .cdate { flex: 0 0 auto; text-align: center; min-width: 38px;
                  padding-top: 1px; border-right: 1px solid var(--line-soft); padding-right: 12px; }
.calcard .cd { display: block; font-family: var(--display); font-size: 22px; font-weight: 600;
               line-height: 1; color: var(--ink); }
.calcard .cm { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 700;
               letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.calcard.now .cd  { color: var(--crit); }
.calcard.soon .cd { color: var(--gold-ink); }
.calcard .cbody { min-width: 0; }
.calcard .cname { font-weight: 600; line-height: 1.35; color: var(--ink); }
.calcard .cwhen { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
.calcard .cwhere { font-size: 12px; color: var(--muted); margin-top: 2px;
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The calendar page itself: one card per day. */
.calday > header h3 { font-size: 16px; }
.calrow .taskbody { padding: 11px 16px; }
.calrow.routine .t { color: var(--ink-2); font-weight: 500; }
.calrow .meta .due { color: var(--ink-2); font-weight: 500; }
@media (max-width: 560px) {
  .calcard { padding: 11px 13px; gap: 11px; }
  .calcard .cdate { padding-right: 10px; min-width: 34px; }
}

/* The admin strip on the calendar page: state on the left, the two buttons on
   the right. Stays put once configured — "is this still syncing" is a question
   that arrives months later, not during setup. */
.calsync { display: flex; align-items: center; justify-content: space-between;
           gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.calsync-state { font-size: 14px; color: var(--ink); }
.calsync-state .muted { color: var(--muted); font-weight: 400; }
.calsync-state .warnline { display: block; margin-top: 3px; font-size: 12.5px; color: var(--warn); }
.calsync .reqacts { margin: 0; }

/* ---- calendar: month grid beside the list --------------------------------
   The grid is the navigator and the list is the detail. Below 1024px the grid
   goes away entirely rather than shrinking: a month of seven columns on a
   phone gives each day about forty pixels, which is enough for a number and
   nothing else — and the list is what people are reading on a phone anyway. */
.calcols { display: block; }
.calgrid-wrap { display: none; }
/* 1100px, not 1024: .wrap is 1080px wide at that point, and two columns need
   the container to be wide — a media query asks the viewport, which is a
   different question. Splitting a 680px container into two tracks is what put
   the list on top of the grid. */
@media (min-width: 1100px) {
  .calcols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
             gap: 26px; align-items: start; }
  .calgrid-wrap { display: block; }
}
/* Grid children default to min-width:auto, so anything with a wide minimum —
   a table, a long unbroken title — pushes out of its track instead of
   shrinking. Both of these have to be told they may be narrower than their
   contents want. */
.calcols > .calgrid-wrap, .calcols > .callist { min-width: 0; }
.calgrid { max-width: 100%; }

.calnav { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px;
          flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 18px; }
.calnav-month { display: flex; align-items: center; gap: 10px; }
.calnav-month h2 { min-width: 0; }
.calnav-tools { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.calnav-tools select { font-size: 13px; padding: 5px 9px; }
.calnav-tools .inlineform { margin: 0; }

.calgrid { width: 100%; border-collapse: separate; border-spacing: 0;
           background: var(--surface); border: 1px solid var(--line);
           border-radius: var(--radius); overflow: hidden; table-layout: fixed; }
.calgrid th { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
              color: var(--muted); padding: 9px 0; background: var(--surface-2);
              border-bottom: 1px solid var(--line); }
.calgrid td { vertical-align: top; height: 96px; padding: 0;
              border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.calgrid tr td:last-child { border-right: 0; }
.calgrid tbody tr:last-child td { border-bottom: 0; }
.calgrid td > a, .calgrid td > span.dn { display: block; height: 100%; padding: 6px 7px;
                                          text-decoration: none; color: inherit; }
.calgrid td > a:hover { background: var(--surface-2); }
.calgrid .dn { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.calgrid td.out { background: var(--ground); }
.calgrid td.out .dn { color: var(--muted); font-weight: 400; }
/* Today is a fact about the calendar; the selected day is a fact about what
   you are looking at. They need to be distinguishable when they are the same
   cell, so one is a ring and the other a fill. */
.calgrid td.today .dn { color: var(--crit); font-weight: 700; }
.calgrid td.sel { background: var(--navy-soft); box-shadow: inset 0 0 0 2px var(--navy); }
.calgrid td.sel .dn { color: var(--navy); }
.calgrid .chip { display: block; font-size: 11px; line-height: 1.3; margin-bottom: 2px;
                 padding: 2px 5px; border-radius: 4px; background: var(--gold-soft);
                 color: var(--gold-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calgrid .chip.routine { background: var(--surface-2); color: var(--muted); }
.calgrid .more { display: block; font-size: 10.5px; color: var(--muted); padding-left: 5px; }

.callist .sechead { margin-bottom: 14px; }

/* ---- event budget --------------------------------------------------------
   Three figures across the top: what was approved, what is spoken for, what is
   left. Remaining is the one people look for, so it carries the colour. */
.budgetsum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
             background: var(--line-soft); border: 1px solid var(--line);
             border-radius: var(--radius); overflow: hidden; margin: 0 0 14px; }
.budgetsum > div { background: var(--surface); padding: 11px 14px; }
.budgetsum .bk { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
                 text-transform: uppercase; color: var(--muted); }
.budgetsum .bv { display: block; margin-top: 4px; font-family: var(--display);
                 font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.budgetsum .good .bv { color: var(--good); }
.budgetsum .bad .bv  { color: var(--crit); }
.budgetsum .bad .bk  { color: var(--crit); }
@media (max-width: 560px) { .budgetsum { grid-template-columns: 1fr; } }

input.money { text-align: right; font-variant-numeric: tabular-nums; }
.budgetgrid td.bt, .budgetgrid th.bt { text-align: right; font-variant-numeric: tabular-nums;
                                       white-space: nowrap; color: var(--muted); font-size: 13px; }
/* A line with a real cost against it is done being guessed at. */
.budgetgrid tr.settled td.bt { color: var(--ink); font-weight: 600; }

/* The way on to the church calendar is a link out to Planning Center, not a
   form here — so it is stated plainly rather than tucked in with the nav. */
.calrequest { display: flex; align-items: center; justify-content: space-between; gap: 14px;
              flex-wrap: wrap; margin-top: 18px; padding: 14px 16px;
              background: var(--gold-soft); border: 1px solid var(--gold);
              border-radius: var(--radius); }
.calrequest b { display: block; font-size: 14.5px; color: var(--ink); }
.calrequest span { display: block; margin-top: 3px; font-size: 13px; color: var(--ink-2); max-width: 62ch; }

/* ---- the debrief ---------------------------------------------------------
   Reusing .budgetsum's figure styling for the comparison band: expected
   against actual, approved against spent. Same visual grammar, because they
   are the same kind of fact — a number with a number to answer to. */
.dbnums { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
          background: var(--line-soft); border: 1px solid var(--line);
          border-radius: var(--radius); overflow: hidden; margin: 0 0 14px; }
.dbnums > div { background: var(--surface); padding: 11px 14px; }
.dbnums .bk { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
              text-transform: uppercase; color: var(--muted); }
.dbnums .bv { display: block; margin-top: 4px; font-family: var(--display);
              font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.dbnums .bd { display: block; margin-top: 2px; font-size: 12px; color: var(--muted);
              font-variant-numeric: tabular-nums; }
.dbnums .good .bv { color: var(--good); }
.dbnums .bad .bv  { color: var(--crit); }
.dbnums .bad .bk  { color: var(--crit); }

/* Two columns on a desktop so six questions read as one short page rather
   than a long scroll — the length of a form is most of what decides whether
   anyone finishes it. */
.dbgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 18px; }
.dbnudge { max-width: 78ch; margin: 0 0 14px; }

/* Last year's notes are a record, not an input, so they sit on the gold the
   rest of the app uses for "this came from somewhere else". */
.prior { background: var(--gold-soft); border-color: var(--gold); }
.prior .pnums { margin: 0 0 12px; font-family: var(--display); font-size: 15px;
                font-variant-numeric: tabular-nums; color: var(--ink); }
.prior .readouts { margin: 0; }

/* ---- Team One roles ------------------------------------------------------
   The colour on a role card is the vacancy, not the department. Somebody
   scanning this page is looking for holes; departments are already the
   headings, so spending the card's one strong signal on them again would
   waste it. */
.rolegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.rolecard { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--good);
  border-radius: var(--radius); padding: 13px 15px; display: flex; flex-direction: column; gap: 7px; }
.rolecard.short { border-left-color: var(--warn); }
.rolecard.open  { border-left-color: var(--crit); }
.rolecard > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.rolecard h3 { font-size: 15.5px; line-height: 1.25; }
.rolecard h3 a { text-decoration: none; color: var(--ink); }
.rolecard h3 a:hover { color: var(--navy); }
.leadtag { display: inline-block; margin-left: 6px; font-family: var(--sans); font-size: 9.5px;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase; vertical-align: middle;
  background: var(--gold-soft); color: var(--gold-ink); padding: 2px 6px; border-radius: 999px; }

.rstat { font-size: 11px; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
  color: var(--good); font-variant-numeric: tabular-nums; }
.rstat.short { color: var(--warn); }
.rstat.open  { color: var(--crit); }

.rwho { font-size: 14px; color: var(--ink); }
.rwho.empty { color: var(--muted); font-style: italic; }
.rfacts { font-size: 12.5px; color: var(--muted); }
.rfacts:empty { display: none; }
.rwarn { font-size: 12px; color: var(--warn); margin-top: auto; }

.rolecols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 30px;
  align-items: start; margin-top: 26px; }
@media (max-width: 960px) { .rolecols { grid-template-columns: 1fr; gap: 34px; } }

/* One section of the description, set to be read rather than filled in. */
.roledoc { margin-bottom: 11px; }
.roledoc h3 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 7px; }
.roledoc .rbody { font-size: 15px; line-height: 1.6; color: var(--ink); overflow-wrap: break-word; }

/* The huddle box, sitting where it sits on the printed page. */
.huddle { background: var(--gold-soft); border: 1px solid var(--gold); border-radius: var(--radius);
  padding: 13px 16px; margin-bottom: 11px; }
.huddle b { display: block; font-family: var(--display); font-size: 14.5px; color: var(--ink); }
.huddle p { margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.huddle .arr { font-weight: 600; color: var(--ink); }

.holders li { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.chain { font-size: 14.5px; line-height: 1.9; }
.chain .arr { color: var(--muted); margin: 0 3px; }
.chain a { text-decoration: none; }
.chain a:hover { text-decoration: underline; }

/* Team One gaps on the board. Cards, not a list, because a gap should read as
   a thing to pick up rather than a line to scroll past. */
.teamstrip { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.gapcard { display: flex; flex-direction: column; gap: 3px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--warn);
  border-radius: var(--radius); padding: 11px 13px; }
.gapcard.open { border-left-color: var(--crit); }
.gapcard:hover { border-color: var(--navy); }
.gapcard .gname { font-family: var(--display); font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.gapcard .gwhat { font-size: 12px; font-weight: 600; color: var(--warn); font-variant-numeric: tabular-nums; }
.gapcard.open .gwhat { color: var(--crit); }
.gapcard .gdept { font-size: 11.5px; color: var(--muted); }

/* ---- who's out -----------------------------------------------------------
   Today reads differently from next week, because "is she in right now" is the
   question people actually walk down the corridor to ask. */
.offstrip { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.offcard { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: var(--radius); padding: 11px 13px; display: flex; flex-direction: column; gap: 2px; }
.offcard.now { border-left-color: var(--warn); background: var(--warn-soft); }
.offcard .oname { font-family: var(--display); font-size: 15px; font-weight: 600; color: var(--ink); }
.offcard .owhen { font-size: 12.5px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.offcard .okind { font-size: 11.5px; color: var(--muted); }

.offrow { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.offacts { display: flex; gap: 6px; margin-left: auto; }
.mini.go { border-color: var(--good); color: var(--good); }

/* ---- the run sheet -------------------------------------------------------
   Built for two situations that turn out to want the same thing: a phone held
   in one hand in a car park, and a sheet of paper on a clipboard. Both want
   big type, short lines, and nothing that is not needed in the next ten
   minutes. */
.runsheet { max-width: 900px; margin: 0 auto; }
.rshead h1 { font-size: 30px; line-height: 1.15; }
.rswhen { font-size: 16px; color: var(--ink-2); margin-top: 5px; }
.rsback { font-size: 13px; margin-top: 8px; }

.rsfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px;
  background: var(--line-soft); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; margin: 18px 0 26px; }
.rsfacts > div { background: var(--surface); padding: 10px 13px; }
.rsfacts .k { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); }
.rsfacts .v { display: block; margin-top: 3px; font-family: var(--display); font-size: 18px;
  font-weight: 600; color: var(--ink); }

.rsblock { margin-bottom: 30px; }
.rsblock > h2 { font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); padding-bottom: 6px; margin-bottom: 12px;
  border-bottom: 2px solid var(--navy); }
.rsday { margin-bottom: 18px; }
.rsday h3 { font-family: var(--display); font-size: 19px; margin-bottom: 7px; color: var(--ink); }

.rstable { width: 100%; border-collapse: collapse; }
.rstable th, .rstable td { text-align: left; vertical-align: top; padding: 9px 10px 9px 0;
  border-bottom: 1px solid var(--line-soft); }
.rstable th { width: 8.5em; font-weight: 700; font-size: 15.5px; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.rstable td { font-size: 15.5px; color: var(--ink); }
.rstable .what { display: block; }
.rstable .who { display: block; margin-top: 2px; font-size: 13.5px; color: var(--muted); }
.rstable.calls td.who { font-size: 15.5px; color: var(--ink); width: 40%; }
.rstable.calls td.tel { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rstable.calls td.tel a { font-weight: 600; }

.rsnote { margin-bottom: 14px; }
.rsnote h3 { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 3px; }
.rsnote p { font-size: 15px; line-height: 1.55; }
.rsfoot { margin-top: 26px; padding-top: 10px; border-top: 1px solid var(--line-soft);
  font-size: 12px; color: var(--muted); }

@media (max-width: 560px) {
  /* On a phone the time wants its own line above what happens, not 8em of
     column stolen from the thing you are actually reading. */
  .rstable th, .rstable td { display: block; width: auto; border-bottom: 0; padding: 2px 0; }
  .rstable tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
  .rstable th { font-size: 13px; color: var(--muted); letter-spacing: .04em; }
  .rstable.calls td.who { width: auto; }
  .rshead h1 { font-size: 25px; }
}

/* ---- print ---------------------------------------------------------------
   Anything that only exists to be clicked is furniture on paper. Ink is not
   free and a run sheet is photocopied: no backgrounds, no colour, black text
   on white, and a page break rather than a day split across two sheets. */
@media print {
  .topbar, .noprint, .flash, .clock, .clockpanel, .savebar { display: none !important; }
  body { background: #fff; color: #000; }
  .wrap { max-width: none; padding: 0; }
  .runsheet { max-width: none; }
  a { color: #000; text-decoration: none; }
  .rsblock > h2 { border-bottom: 2px solid #000; color: #000; }
  .rsfacts { border: 1px solid #000; background: none; }
  .rsfacts > div { background: none; border-right: 1px solid #000; }
  .rsfacts .k, .rsnote h3, .rstable .who { color: #333; }
  .rstable th, .rstable td { border-bottom: 1px solid #bbb; }
  .rsday, .rsblock { break-inside: avoid; page-break-inside: avoid; }
  .rsday h3 { break-after: avoid; page-break-after: avoid; }
  .card, .wsblock { border: 1px solid #999; background: none; box-shadow: none; }
}

/* Search hits. The match is marked after escaping, never before. */
.searchbox { margin-top: 20px; }
.hits .ttl { text-decoration: none; color: var(--ink); font-weight: 600; }
.hits .ttl:hover { color: var(--navy); text-decoration: underline; }
mark { background: var(--gold-soft); color: var(--ink); padding: 0 2px; border-radius: 3px; }

/* ---- Setup & Reset -------------------------------------------------------
   The colour is the pressure, not the room. Somebody scanning this page is
   deciding what to worry about, and the room names are already the loudest
   thing on each card. */
.roomfilters { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin: 18px 0 4px; }
.roomfilters .mini.on { border-color: var(--navy); color: var(--navy); background: var(--navy-soft); }
.roomfilters .fsep { width: 1px; height: 18px; background: var(--line); margin: 0 3px; }

.roomday { margin-top: 26px; }

.flip { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: var(--radius); padding: 13px 15px; margin-bottom: 10px; }
.flip.soon  { border-left-color: var(--gold); }
.flip.tight { border-left-color: var(--crit); }
.flip.clash { border-left-color: var(--crit); background: var(--crit-soft); }
.flip.done  { opacity: .62; border-left-color: var(--good); }

.flip > header { display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; flex-wrap: wrap; }
.flip .fwho { display: flex; align-items: baseline; gap: 10px; }
.flip h3 { font-size: 16.5px; line-height: 1.2; }
.fgap { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
  color: var(--muted); font-variant-numeric: tabular-nums; }
.fgap.tight, .fgap.clash { color: var(--crit); }
.fgap.soon { color: var(--warn); }

.fwhen { font-size: 13px; color: var(--ink-2); display: flex; align-items: baseline;
  gap: 8px; flex-wrap: wrap; margin-left: auto; }
.fwhen b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.ffrom { color: var(--muted); }
.ffrom b { color: var(--ink-2); }
.farrow { color: var(--muted); }

.fclash { margin-top: 8px; font-size: 13px; color: var(--crit); max-width: 70ch; }
.fform { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-top: 11px; }
.fform .grow { flex: 1 1 260px; }
.fform input, .fform select { font-size: 13.5px; padding: 5px 8px; }
.ftick { margin-top: 8px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.fdone { font-size: 12px; color: var(--good); }
.fnote { margin-top: 8px; font-size: 14px; }
.fowner { margin-top: 6px; font-size: 12.5px; color: var(--muted); }

@media (max-width: 640px) {
  .flip > header { flex-direction: column; gap: 5px; }
  .fwhen { margin-left: 0; }
}

@media print {
  .roomfilters, .fform, .ftick { display: none !important; }
  .flip { break-inside: avoid; page-break-inside: avoid; border: 1px solid #999;
    border-left: 3px solid #000; background: none; }
  .flip.done { opacity: 1; }
  .flip.done h3::after { content: " — done"; font-weight: 400; font-size: 13px; }
}

/* ---- files on an EventSite ----------------------------------------------- */
.filelist { list-style: none; margin: 0; padding: 0; }
.filelist li { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--line-soft); }
.filelist li:last-child { border-bottom: 0; }
.fkind { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: var(--surface-2); color: var(--muted); padding: 2px 7px; border-radius: 999px;
  white-space: nowrap; }
.fname { font-size: 14.5px; font-weight: 600; color: var(--ink); text-decoration: none;
  overflow-wrap: anywhere; }
.fname:hover { color: var(--navy); text-decoration: underline; }
.fmeta { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.forig { font-style: italic; }
.facts { display: flex; gap: 6px; margin-left: auto; }
/* A file that is out on the public link should look different from one that
   is not, at a glance, without having to read the button. */
.facts .mini.on { border-color: var(--gold); color: var(--gold-ink); background: var(--gold-soft); }

/* ---- service coverage ----------------------------------------------------
   A runway, not a list. The interesting thing is where the bar stops being
   full, so the bars are the same width and sit at the same height across the
   row — the eye finds the cliff without reading a single number. */
.servestrip { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.servecard { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--good);
  border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.servecard.nearly { border-top-color: var(--good); }
.servecard.thin   { border-top-color: var(--warn); }
.servecard.bare   { border-top-color: var(--crit); }
.servecard .swhen { font-family: var(--display); font-size: 16px; font-weight: 600; color: var(--ink); }
.servecard .stype { font-size: 11.5px; color: var(--muted); }
.servecard .sbar { height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.servecard .sbar i { display: block; height: 100%; background: var(--good); }
.servecard.thin .sbar i { background: var(--warn); }
.servecard.bare .sbar i { background: var(--crit); }
.servecard .snums { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.servecard .snums b { color: var(--ink); }
.servecard .sneed { color: var(--crit); font-weight: 600; }
.servecard .sok { color: var(--good); font-weight: 600; }
.servecard .mini { margin-top: auto; align-self: flex-start; }

/* The owner pill. Gold rather than the admin blue — it is a different kind of
   thing, not a bigger one. */
.pill.owner { background: var(--gold-soft); color: var(--gold-ink); }