/* AiX Bazaar — one stylesheet for all four pages.
   The look is deliberately editorial: condensed uppercase headings, monospaced
   labels, hairline rules, no decoration for its own sake. What follows keeps
   that identity but fixes the things that made it hard to use on a phone —
   tap targets, contrast, and the absence of any feedback when you press
   something.

   Layout rules the scripts depend on are marked; don't change those without
   reading weekgrid.js. */

:root {
  /* ---- palette ---------------------------------------------------------
     ink-3 is the quietest text we use. It sits at 5.2:1 on white rather than
     the 3.4:1 it used to, because it carries real information — dates, counts,
     who did what — not decoration. */
  --bg:#EFEFE9; --surface:#FFFFFF; --surface-2:#F6F6F0; --surface-3:#EDEDE4;
  --ink:#15170E; --ink-2:#4F5343; --ink-3:#6A6E5A;
  --line:#D3D4C6; --line-2:#E4E5D8;
  --over:#96331A; --over-mk:#C4451F;
  --soon:#7A5C00; --soon-mk:#DFB300;
  --done:#356338; --done-mk:#6B9C6D;
  --backlog:#43467F; --backlog-mk:#6266A8;
  --veil: rgba(23,25,15,.52);

  --body: "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;
  --cond: "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: Consolas, "SF Mono", Menlo, "DejaVu Sans Mono", monospace;

  /* ---- 4px spacing rhythm ---- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;

  /* ---- shape & depth ----
     A small radius and a very restrained shadow scale. Enough to tell a
     surface from the page behind it; not enough to turn a working tool into
     a set of floating cards. */
  --r: 4px; --r-lg: 8px;
  --sh-1: 0 1px 2px rgba(23,25,15,.05);
  --sh-2: 0 2px 6px rgba(23,25,15,.07), 0 1px 2px rgba(23,25,15,.05);
  --sh-3: 0 12px 32px rgba(23,25,15,.16), 0 2px 8px rgba(23,25,15,.10);

  /* ---- motion ----
     One duration and one curve for everything, so the whole app moves with
     the same rhythm. Entering uses ease-out; nothing here needs more. */
  --t: 150ms;
  --ease: cubic-bezier(.2, .7, .3, 1);

  /* ---- the minimum comfortable tap target ---- */
  --tap: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:#12140C; --surface:#1A1D13; --surface-2:#22261A; --surface-3:#2A2E20;
    --ink:#F0F1E5; --ink-2:#ADB19A; --ink-3:#8D9280;
    --line:#363B29; --line-2:#282C1E;
    --over:#EE8E6F; --over-mk:#D5643F;
    --soon:#E7C557; --soon-mk:#C9A422;
    --done:#8CC084; --done-mk:#5E8E58;
    --backlog:#AFB2ED; --backlog-mk:#8B8FD4;
    --veil: rgba(0,0,0,.68);
    --sh-1: 0 1px 2px rgba(0,0,0,.35);
    --sh-2: 0 2px 6px rgba(0,0,0,.40), 0 1px 2px rgba(0,0,0,.30);
    --sh-3: 0 14px 36px rgba(0,0,0,.60), 0 2px 8px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"] {
  --bg:#12140C; --surface:#1A1D13; --surface-2:#22261A; --surface-3:#2A2E20;
  --ink:#F0F1E5; --ink-2:#ADB19A; --ink-3:#8D9280;
  --line:#363B29; --line-2:#282C1E;
  --over:#EE8E6F; --over-mk:#D5643F;
  --soon:#E7C557; --soon-mk:#C9A422;
  --done:#8CC084; --done-mk:#5E8E58;
  --backlog:#AFB2ED; --backlog-mk:#8B8FD4;
  --veil: rgba(0,0,0,.68);
  --sh-1: 0 1px 2px rgba(0,0,0,.35);
  --sh-2: 0 2px 6px rgba(0,0,0,.40), 0 1px 2px rgba(0,0,0,.30);
  --sh-3: 0 14px 36px rgba(0,0,0,.60), 0 2px 8px rgba(0,0,0,.45);
}
:root[data-theme="light"] {
  --bg:#EFEFE9; --surface:#FFFFFF; --surface-2:#F6F6F0; --surface-3:#EDEDE4;
  --ink:#15170E; --ink-2:#4F5343; --ink-3:#6A6E5A;
  --line:#D3D4C6; --line-2:#E4E5D8;
  --over:#96331A; --over-mk:#C4451F;
  --soon:#7A5C00; --soon-mk:#DFB300;
  --done:#356338; --done-mk:#6B9C6D;
  --backlog:#43467F; --backlog-mk:#6266A8;
  --veil: rgba(23,25,15,.52);
}

* { box-sizing: border-box; }

html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--body); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}

/* Kill the grey flash on tap; every control below defines its own press state. */
button, a, [role="button"], input, select, textarea, summary {
  -webkit-tap-highlight-color: transparent;
}
button, a, [role="button"], summary { touch-action: manipulation; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.wrap {
  max-width: 1440px; margin: 0 auto;
  padding: var(--s5) clamp(var(--s3), 3vw, var(--s6)) 72px;
  display: flex; flex-direction: column; gap: var(--s5);
}

/* ---------- buttons ---------- */

.btn {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .07em;
  text-transform: uppercase; cursor: pointer; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 0 12px;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--r);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
              color var(--t) var(--ease), transform var(--t) var(--ease);
}
.btn:hover { border-color: var(--ink-3); color: var(--ink); background: var(--surface-2); }
.btn:active { transform: scale(.97); }
.btn[aria-pressed="true"] {
  background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 700;
}
.btn.solid {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
  box-shadow: var(--sh-1);
}
.btn.solid:hover { background: var(--ink); color: var(--bg); opacity: .88; }
.btn.danger { color: var(--over); border-color: var(--over-mk); background: var(--surface); }
.btn.danger:hover { background: var(--over-mk); color: #fff; border-color: var(--over-mk); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn[disabled]:hover { background: var(--surface); border-color: var(--line); color: var(--ink-2); }

/* ---------- masthead ---------- */

.top {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  border-bottom: 2px solid var(--ink); padding-bottom: var(--s3);
}
.top h1 {
  margin: 0; font-family: var(--cond); font-size: clamp(22px, 5vw, 32px);
  font-weight: 700; line-height: 1; letter-spacing: -.01em; text-transform: uppercase;
}
.top .grow { flex: 1 1 20px; }

.live {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.live .pip {
  width: 8px; height: 8px; border-radius: 50%; background: var(--done-mk);
  transition: background var(--t) var(--ease);
}
.live.off .pip { background: var(--over-mk); }
.live.off { color: var(--over); }

/* Nav sits with the identity chip, so where you are and who you are read as
   one group rather than two loose scraps of text. */
.navlink {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; text-decoration: none;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--r);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
              color var(--t) var(--ease);
}
.navlink:hover { border-color: var(--ink-3); color: var(--ink); background: var(--surface-2); }

.actor {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; cursor: pointer;
  background: var(--surface-3); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color var(--t) var(--ease);
}
.actor:hover { border-color: var(--ink-3); }
.actor b { font-weight: 700; }
.actor span { color: var(--ink-3); }
.actor.static { cursor: default; }
.actor.static:hover { border-color: var(--line); }

/* ---------- stats ---------- */

/* The summary tiles are filters, so they read as controls: compact, pressable,
   and obviously selected when they are. */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: var(--s2);
}
.stat {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--surface); padding: 9px var(--s3);
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh-1);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease),
              transform var(--t) var(--ease);
}
.stat:hover { border-color: var(--ink-3); background: var(--surface-2); }
.stat:active { transform: scale(.98); }
.stat .n {
  font-family: var(--cond); font-weight: 700; font-size: 21px; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.stat .k {
  font-family: var(--mono); font-size: 9.5px; line-height: 1.2;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
}
.stat.is-over .n { color: var(--over); }
.stat.is-soon .n { color: var(--soon); }

/* Selected: inverted, so which one you're looking at is unmistakable. */
.stat.on {
  background: var(--ink); border-color: var(--ink); box-shadow: var(--sh-2);
}
.stat.on .n, .stat.on .k { color: var(--bg); }
.stat.on:hover { background: var(--ink); border-color: var(--ink); opacity: .9; }

@media (pointer: coarse) { .stat { min-height: var(--tap); } }

/* ---------- control bars ---------- */

.bar { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.bar .sep { width: 1px; height: 22px; background: var(--line); margin: 0 var(--s1); }
.bar input[type="search"] {
  flex: 1 1 180px; min-width: 0; max-width: 300px;
  font-family: var(--body); font-size: 16px; min-height: 34px; padding: 0 12px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color var(--t) var(--ease);
}
.bar input[type="search"]:hover { border-color: var(--ink-3); }

.bar.areas { border-top: 1px solid var(--line-2); padding-top: var(--s3); }

/* A closed log book keeps its chip so its history stays reachable, but reads
   as retired rather than as somewhere you'd file new work. */
.btn.shut { border-style: dashed; color: var(--ink-3); }
.btn.shut:hover { color: var(--ink-2); border-color: var(--ink-3); }
.prow.shut .pn { color: var(--ink-2); }
.prow.shut .pr { font-style: italic; }
.barlabel {
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3); margin-right: var(--s1);
}

/* area tag on a card */
.area {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-3);
  padding: 2px 6px; border: 1px solid var(--line-2); border-radius: 3px;
}
.card .top-line { display: flex; align-items: center; gap: var(--s2); }
.card .top-line .id { margin-right: auto; }

td.c-area {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}

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

.board {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s3); align-items: start;
}
@media (max-width: 1080px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .board { grid-template-columns: 1fr; } }

/* Shown when filters are hiding every task — spans the whole board so it is
   read before the empty lanes underneath it. */
.board-note {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s3) var(--s4); font-size: 14.5px; line-height: 1.45;
  background: var(--surface); border: 1px solid var(--soon-mk);
  border-left: 4px solid var(--soon-mk); border-radius: var(--r);
  box-shadow: var(--sh-1);
}
.board-note .bt-n {
  font-family: var(--cond); font-weight: 700; font-size: 24px; line-height: 1;
  color: var(--soon); font-variant-numeric: tabular-nums;
}
.board-note .btn { margin-left: auto; }

.lane { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.lane-head {
  display: flex; align-items: center; gap: var(--s2);
  padding-bottom: var(--s2); border-bottom: 2px solid var(--ink);
}
.lane-head .name { font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.lane-head .count {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; margin-left: auto;
}
.lane-head .add {
  font-family: var(--mono); font-size: 16px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; cursor: pointer;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--r);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
              color var(--t) var(--ease), transform var(--t) var(--ease);
}
.lane-head .add:hover { border-color: var(--ink); color: var(--ink); background: var(--surface-2); }
.lane-head .add:active { transform: scale(.92); }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--line); border-radius: var(--r);
  padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2);
  cursor: pointer; text-align: left; width: 100%; font: inherit; color: inherit;
  box-shadow: var(--sh-1);
  transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease),
              transform var(--t) var(--ease);
}
.card:hover { border-color: var(--ink-3); box-shadow: var(--sh-2); transform: translateY(-1px); }
.card:active { transform: translateY(0) scale(.995); }
.card:hover.over { border-left-color: var(--over-mk); }
.card:hover.soon { border-left-color: var(--soon-mk); }
.card:hover.shut { border-left-color: var(--done-mk); }
.card.over { border-left-color: var(--over-mk); }
.card.soon { border-left-color: var(--soon-mk); }
.card.shut { border-left-color: var(--done-mk); background: var(--surface-2); }

.card .id { font-family: var(--mono); font-size: 10px; letter-spacing: .09em; color: var(--ink-3); }
.card .title { margin: 0; font-size: 15px; line-height: 1.4; font-weight: 600; text-wrap: pretty; }
.card.shut .title { color: var(--ink-2); }
.card .note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); }

.meta { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.who {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 3px;
  border: 1px solid var(--line); color: var(--ink-2); background: var(--surface-2);
}
.who.none { color: var(--ink-3); border-style: dashed; }
.who.mine { border-color: var(--ink); color: var(--ink); font-weight: 700; }
.due {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
  font-variant-numeric: tabular-nums; margin-left: auto;
  display: inline-flex; align-items: center; gap: 5px;
}
.due .pip { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.due.over { color: var(--over); font-weight: 700; }
.due.over .pip { background: var(--over-mk); }
.due.soon { color: var(--soon); font-weight: 700; }
.due.soon .pip { background: var(--soon-mk); }
.due.fine { color: var(--ink-3); }
.due.fine .pip { background: var(--line); }
.due.shut { color: var(--done); }
.due.shut .pip { background: var(--done-mk); }

.empty {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-3);
  border: 1px dashed var(--line); border-radius: var(--r);
  padding: var(--s4) var(--s3); text-align: center; margin: 0; line-height: 1.5;
}

/* ---------- backlog ---------- */

.backlog-sec {
  border: 1px solid var(--line); border-left: 3px solid var(--backlog-mk);
  border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1);
}
.backlog-sec > summary {
  display: flex; align-items: center; gap: var(--s2); cursor: pointer;
  padding: var(--s3) var(--s4); list-style: none; user-select: none;
  min-height: var(--tap);
  font-family: var(--cond); font-weight: 700; font-size: 16px;
  text-transform: uppercase; letter-spacing: .01em; color: var(--backlog);
}
.backlog-sec > summary::-webkit-details-marker { display: none; }
.backlog-sec > summary::before {
  content: "▸"; font-size: 11px; display: inline-block;
  transition: transform var(--t) var(--ease);
}
.backlog-sec[open] > summary::before { transform: rotate(90deg); }
.backlog-sec > summary .count {
  font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .07em;
  color: var(--ink-3); margin-left: auto; text-transform: none;
}
.backlog-sec > summary .add {
  font-family: var(--mono); font-size: 16px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; cursor: pointer;
  background: var(--surface); color: var(--backlog);
  border: 1px solid var(--backlog-mk); border-radius: var(--r);
  transition: background var(--t) var(--ease), color var(--t) var(--ease),
              transform var(--t) var(--ease);
}
.backlog-sec > summary .add:hover { background: var(--backlog); color: var(--surface); }
.backlog-sec > summary .add:active { transform: scale(.92); }
.backlog-body {
  padding: var(--s1) var(--s4) var(--s4); display: flex; flex-direction: column;
  gap: var(--s2); border-top: 1px solid var(--line-2);
}
.backlog-body .card { border-left-color: var(--backlog-mk); }
.backlog-body .empty { margin-top: var(--s3); }

/* ---------- log ---------- */

.logsec { display: flex; flex-direction: column; gap: var(--s3); }
.logsec h2 {
  margin: 0; font-family: var(--cond); font-weight: 700; font-size: 21px;
  text-transform: uppercase; border-bottom: 2px solid var(--ink);
  padding-bottom: var(--s2); display: flex; align-items: baseline; gap: var(--s3);
}
.logsec h2 .of {
  font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .09em;
  color: var(--ink-3); margin-left: auto; text-transform: uppercase;
}
.logscroll {
  overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); box-shadow: var(--sh-1);
}
table { border-collapse: collapse; width: 100%; min-width: 700px; }
th, td {
  text-align: left; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line-2);
  font-size: 13.5px; vertical-align: top;
}
thead th {
  font-family: var(--mono); font-size: 10px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 400; border-bottom: 1px solid var(--line);
  background: var(--surface-2); position: sticky; top: 0; z-index: 1;
}
tbody tr { transition: background var(--t) var(--ease); }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: none; }
td.c-at, td.c-task {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  white-space: nowrap; color: var(--ink-2); font-size: 12.5px;
}
td.c-who { white-space: nowrap; font-size: 13px; color: var(--ink); font-weight: 600; }
td.c-who.anon { color: var(--ink-3); font-weight: 400; font-style: italic; }
td.c-ev { white-space: nowrap; }
.ev {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 7px; border: 1px solid var(--line); border-radius: 3px; color: var(--ink-2);
  display: inline-block;
}
.ev.e-done { color: var(--done); border-color: var(--done-mk); }
.ev.e-deleted { color: var(--over); border-color: var(--over-mk); }
.ev.e-created { color: var(--ink); border-color: var(--ink-3); }
td.c-detail { color: var(--ink-2); }

/* ---------- dialogs ---------- */

dialog {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); color: var(--ink);
  padding: 0; width: min(560px, calc(100vw - 24px)); max-height: 88vh;
  box-shadow: var(--sh-3);
}
dialog.wide { width: min(860px, calc(100vw - 24px)); }
dialog::backdrop { background: var(--veil); backdrop-filter: blur(2px); }
.dlg { display: flex; flex-direction: column; max-height: 88vh; }
.dlg-head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4); border-bottom: 2px solid var(--ink);
}
.dlg-head h2 {
  margin: 0; font-family: var(--cond); font-size: 22px; font-weight: 700;
  text-transform: uppercase; letter-spacing: -.005em; line-height: 1.1;
}
.dlg-head .tid {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  letter-spacing: .09em; margin-left: auto; text-align: right;
}
.dlg-body {
  padding: var(--s4); overflow-y: auto; display: flex; flex-direction: column;
  gap: var(--s4); -webkit-overflow-scrolling: touch;
}
/* Children keep their natural height and the body scrolls past them.
   Without this, flex happily shrinks a child to make things fit — and a child
   that also has overflow:hidden (the people list, the duty list) then clips
   its own rows with no scrollbar anywhere to reveal them. */
.dlg-body > * { flex-shrink: 0; }
.dlg-foot {
  display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap;
  padding: var(--s3) var(--s4); border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.dlg-foot .grow { flex: 1 1 10px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-3);
}
.field input, .field select, .field textarea {
  font-family: var(--body); font-size: 16px; min-height: 42px; padding: 9px 12px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r); width: 100%;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus { background: var(--surface); }
.field textarea { resize: vertical; min-height: 64px; font-size: 15px; line-height: 1.5; }
.field input[disabled], .field select[disabled] {
  opacity: .55; cursor: not-allowed; background: var(--surface-2);
}
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (max-width: 480px) { .row2 { grid-template-columns: 1fr; } }

/* An opt-in that lives in the form, so the choice is visible while you make
   the change rather than sprung on you after Save. */
.check {
  display: flex; align-items: center; gap: var(--s3); cursor: pointer;
  min-height: var(--tap); padding: 10px var(--s3);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r); font-size: 14px; line-height: 1.4;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.check:hover { border-color: var(--ink-3); }
.check input[type="checkbox"] {
  width: 20px; height: 20px; flex: none; margin: 0; cursor: pointer;
  accent-color: var(--ink);
}
.check:has(input:checked) { border-color: var(--ink); background: var(--surface); }
.check b { font-weight: 700; }
.check em {
  display: block; font-style: normal; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .04em; color: var(--ink-3); margin-top: 2px;
}

.quick { display: flex; gap: 6px; flex-wrap: wrap; }
.quick button {
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  min-height: 34px; padding: 0 11px; cursor: pointer; background: var(--surface);
  color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
              color var(--t) var(--ease), transform var(--t) var(--ease);
}
.quick button:hover { border-color: var(--ink); color: var(--ink); background: var(--surface-2); }
.quick button:active { transform: scale(.96); }

/* Errors sit with the field and carry an icon, so the message doesn't rely on
   colour alone to read as a problem. */
.err {
  font-size: 13.5px; color: var(--over); font-weight: 600; display: none;
  align-items: flex-start; gap: 6px; line-height: 1.45;
}
.err.on { display: flex; }
/* A plain "!" rather than ⚠ — the warning emoji renders as a colour glyph on
   some platforms and as flat text on others, which reads as a rendering bug. */
.err::before { content: "!"; flex: none; font-weight: 700; }

.plist {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.prow {
  display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line-2); flex-wrap: wrap; min-height: 48px;
  transition: background var(--t) var(--ease);
}
.prow:hover { background: var(--surface-2); }
.prow:last-child { border-bottom: none; }
.prow .pn { font-weight: 600; font-size: 15px; }
.prow .pr {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .07em;
}
/* A role that carries power is worth spotting without reading every row. */
.prow .pr.can {
  color: var(--ink); font-weight: 700;
  border: 1px solid var(--line); border-radius: 3px; padding: 2px 6px;
  background: var(--surface-2);
}
.prow .pe {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.prow .pe.none { color: var(--ink-3); font-style: italic; }
.prow .pc { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); margin-left: auto; }
.prow .px {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  min-height: 32px; padding: 0 10px; cursor: pointer; background: var(--surface);
  color: var(--ink-3); border: 1px solid var(--line); border-radius: var(--r);
  display: inline-flex; align-items: center;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease),
              background var(--t) var(--ease), transform var(--t) var(--ease);
}
.prow .px:hover { color: var(--ink); border-color: var(--ink-3); background: var(--surface-2); }
.prow .px:active { transform: scale(.96); }

.hint { font-size: 13.5px; color: var(--ink-2); margin: 0; line-height: 1.5; }
.hint.undo {
  padding-left: var(--s3); border-left: 2px solid var(--line);
  color: var(--ink-3); font-size: 13px;
}
.hint.undo.permanent { border-left-color: var(--over-mk); color: var(--over); }
.hint code {
  font-family: var(--mono); font-size: 12px; border-radius: 3px;
  background: var(--surface-2); padding: 1px 5px; border: 1px solid var(--line-2);
}

/* who-are-you picker */
.pickers { display: flex; flex-direction: column; gap: var(--s2); }
.picker {
  display: flex; align-items: baseline; gap: var(--s3); width: 100%;
  padding: var(--s3) var(--s4); cursor: pointer; text-align: left; font: inherit;
  min-height: var(--tap);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease),
              transform var(--t) var(--ease);
}
.picker:hover { border-color: var(--ink); background: var(--surface-2); }
.picker:active { transform: scale(.99); }
.picker .n { font-family: var(--cond); font-size: 22px; font-weight: 700; text-transform: uppercase; }
.picker .r {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); margin-left: auto;
}

/* toast */
.toast {
  position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); z-index: 200;
  max-width: min(520px, calc(100vw - 24px));
  padding: var(--s3) var(--s4); font-size: 14px; line-height: 1.4;
  background: var(--ink); color: var(--bg); border: 1px solid var(--ink);
  border-radius: var(--r); box-shadow: var(--sh-3);
  display: none; animation: toast-in 200ms var(--ease);
}
.toast.on { display: block; }
.toast.bad { background: var(--over-mk); border-color: var(--over-mk); color: #fff; }
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

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

.weeklabel {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.calscroll {
  overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--line-2); box-shadow: var(--sh-1);
  -webkit-overflow-scrolling: touch;
}

/* Columns are set from JS — the count changes when you filter to one day —
   as is --hour, the pixel height of one hour and the unit every block position
   in weekgrid.js is measured in. Don't restyle these two without reading it. */
.cal {
  --timecol: 60px;
  --colmin: 104px;
  display: grid; gap: 1px; background: var(--line-2);
  width: max-content; min-width: 100%;
}

.cal-corner { background: var(--surface-2); }
.cal-day {
  background: var(--surface-2); padding: var(--s2) var(--s3);
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.cal-day .dn {
  font-family: var(--cond); font-weight: 700; font-size: 15px;
  text-transform: uppercase; letter-spacing: .02em;
}
.cal-day .dd { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.cal-day.wknd { background: var(--surface-3); }
.cal-day.wknd .dn { color: var(--ink-2); }
.cal-day.today { box-shadow: inset 0 -3px 0 var(--ink); }
.cal-day.today .dn { color: var(--ink); }

.cal-gutter { background: var(--surface-2); }
.cal-gutter .gh {
  height: var(--hour); padding: 3px var(--s2) 0; white-space: nowrap;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .03em;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
  border-top: 1px solid var(--line-2);
}
.cal-gutter .gh:first-child { border-top: 0; }

/* The hour rules are a background gradient rather than real elements — the
   column only ever holds the blocks people booked.
   touch-action: none hands every gesture to weekgrid.js, which is what makes
   drag-to-create possible with a mouse. It is lifted on touch screens below —
   there it swallowed the page scroll instead. */
.col {
  position: relative; background-color: var(--surface); touch-action: none;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--line-2) 0, var(--line-2) 1px,
    transparent 1px, transparent var(--hour)
  );
  transition: background-color var(--t) var(--ease);
}
.col:hover { background-color: var(--surface-2); }

.nowline {
  position: absolute; left: 0; right: 0; height: 2px;
  background: var(--over-mk); pointer-events: none; z-index: 2;
}
.nowline::before {
  content: ""; position: absolute; left: 0; top: -3px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--over-mk);
}

.ghost {
  position: absolute; left: 3px; right: 3px; z-index: 3; pointer-events: none;
  background: var(--surface-3); border: 1px dashed var(--ink-3); border-radius: 3px;
}

.blk {
  position: absolute; overflow: hidden; cursor: pointer; z-index: 1;
  padding: 4px 7px; text-align: left; font: inherit;
  display: flex; flex-direction: column; gap: 1px;
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--line); border-left: 3px solid var(--ink-3);
  border-radius: 3px;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease),
              background var(--t) var(--ease);
}
.blk:hover { border-color: var(--ink-3); box-shadow: var(--sh-2); z-index: 4; }
.blk.mine {
  background: var(--surface); color: var(--ink);
  border-color: var(--done-mk); border-left-color: var(--done);
}
.blk .bn {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em;
  text-transform: uppercase; font-weight: 700; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.blk .bt {
  font-family: var(--mono); font-size: 9.5px; line-height: 1.2;
  color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.blk .bd {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .07em;
  text-transform: uppercase; line-height: 1.2; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Name and note sit on one line. The name holds its width and the note gives
   way first, so a long note ellipsises instead of squeezing out who it's about. */
.blk .brow { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.blk .brow .bn { flex: 0 1 auto; }

/* A shift's own note. Italic rather than uppercase mono, so it reads as
   somebody's words and not as another label. */
.blk .bnote {
  flex: 1 1 0; min-width: 0;
  font-size: 10px; line-height: 1.3; font-style: italic; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.blk .bnote::before { content: "· "; font-style: normal; color: var(--ink-3); }

/* Too short to stack lines — keep the name and its note, drop the times. */
.blk.tight { flex-direction: row; align-items: center; gap: 5px; padding: 0 6px; }
.blk.tight .brow { flex: 1 1 auto; }
.blk.tight .bt { display: none; }
.blk.tight .bd { font-size: 9px; }
.blk.tight .bnote { font-size: 9.5px; }

/* ---------- duty colours ---------- */
/* Six slots, assigned by the duty's position in the list. Mid-tone on purpose
   so the same value reads on both the light and the dark surface. */

.k0 { --duty: #3F6E9B; }
.k1 { --duty: #356338; }
.k2 { --duty: #8E5416; }
.k3 { --duty: #614281; }
.k4 { --duty: #96331A; }
.k5 { --duty: #14706B; }

@media (prefers-color-scheme: dark) {
  .k0 { --duty: #8CB4DA; }
  .k1 { --duty: #8CC084; }
  .k2 { --duty: #DFA463; }
  .k3 { --duty: #B39AD4; }
  .k4 { --duty: #EE8E6F; }
  .k5 { --duty: #6AC6BF; }
}
:root[data-theme="dark"] .k0 { --duty: #8CB4DA; }
:root[data-theme="dark"] .k1 { --duty: #8CC084; }
:root[data-theme="dark"] .k2 { --duty: #DFA463; }
:root[data-theme="dark"] .k3 { --duty: #B39AD4; }
:root[data-theme="dark"] .k4 { --duty: #EE8E6F; }
:root[data-theme="dark"] .k5 { --duty: #6AC6BF; }

.blk.k0, .blk.k1, .blk.k2, .blk.k3, .blk.k4, .blk.k5 { border-left-color: var(--duty); }
.blk.mine.k0, .blk.mine.k1, .blk.mine.k2,
.blk.mine.k3, .blk.mine.k4, .blk.mine.k5 { border-color: var(--duty); border-left-width: 4px; }
.blk .bd { color: var(--duty); }

.btn.duty { border-left: 3px solid var(--duty); }
.prow .dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--duty); }

/* ---------- notices ---------- */

.notices:empty { display: none; }
.notices { display: flex; flex-direction: column; gap: var(--s2); }

.notice {
  display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s3) var(--s4); background: var(--surface);
  border: 1px solid var(--line); border-left: 4px solid var(--soon-mk);
  border-radius: var(--r); box-shadow: var(--sh-1);
}
.notice.today { border-left-color: var(--over-mk); background: var(--surface-2); }
.notice.past { opacity: .6; }

/* The icon means a notice reads as a warning without depending on the colour. */
.notice .nwhen {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--soon); font-weight: 700;
  white-space: nowrap;
}
.notice .nwhen::before { content: "!"; }
.notice.today .nwhen { color: var(--over); }
.notice .ntext { margin: 0; flex: 1 1 240px; font-size: 14.5px; line-height: 1.45; text-wrap: pretty; }
.notice .nby {
  font-family: var(--mono); font-size: 10px; letter-spacing: .05em;
  color: var(--ink-3); white-space: nowrap;
}
.notice .px {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  min-height: 32px; padding: 0 10px; cursor: pointer; background: var(--surface);
  color: var(--ink-3); border: 1px solid var(--line); border-radius: var(--r);
  display: inline-flex; align-items: center;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease),
              transform var(--t) var(--ease);
}
.notice .px:hover { color: var(--over); border-color: var(--over-mk); }
.notice .px:active { transform: scale(.96); }

/* the same warning, carried onto the day column so it's visible in the grid */
.cal-day.flagged { box-shadow: inset 0 -3px 0 var(--soon-mk); }
.cal-day.flagged.today { box-shadow: inset 0 -3px 0 var(--over-mk); }
.cal-day .flag {
  font-family: var(--mono); font-size: 11px; font-weight: 700; line-height: 1;
  margin-left: auto; padding: 3px 7px; cursor: help; border-radius: 3px;
  color: var(--soon); border: 1px solid var(--soon-mk);
}
.cal-day.today .flag { color: var(--over); border-color: var(--over-mk); }

/* ---------- time on duty ---------- */

.hours { display: flex; flex-direction: column; gap: var(--s3); }
.hours h2 {
  margin: 0; font-family: var(--cond); font-weight: 700; font-size: 21px;
  text-transform: uppercase; border-bottom: 2px solid var(--ink);
  padding-bottom: var(--s2); display: flex; align-items: center; gap: var(--s3);
  flex-wrap: wrap;
}
.hours h2 .of {
  font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .08em;
  color: var(--ink-3); text-transform: uppercase;
}
.hours h2 .btn { margin-left: auto; }

.hscroll {
  overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); box-shadow: var(--sh-1);
  -webkit-overflow-scrolling: touch;
}
#hours-table { min-width: 620px; }

#hours-table th.num, #hours-table td.num {
  text-align: right; white-space: nowrap;
  font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px;
}
#hours-table thead th .dn { display: block; font-family: var(--cond); font-size: 13px; }
#hours-table thead th .dd { display: block; font-size: 9.5px; color: var(--ink-3); }
#hours-table thead th.today { box-shadow: inset 0 -3px 0 var(--ink); }
#hours-table td.today { background: var(--surface-2); }

#hours-table th.week, #hours-table td.week { border-left: 1px solid var(--line); font-weight: 700; }
#hours-table th.month, #hours-table td.month { color: var(--ink); font-weight: 700; }
#hours-table td.month { background: var(--surface-2); }

#hours-table td.has-extra { color: var(--soon); font-weight: 700; }
#hours-table .xmark {
  display: block; font-size: 9.5px; letter-spacing: .03em;
  color: var(--soon); font-weight: 400;
}

#hours-table tfoot td {
  border-top: 2px solid var(--ink); border-bottom: 0;
  font-weight: 700; background: var(--surface-2);
}

/* ---------- wiki ---------- */

.wiki {
  display: grid; grid-template-columns: minmax(240px, 330px) minmax(0, 1fr);
  gap: var(--s4); align-items: start;
}
@media (max-width: 860px) { .wiki { grid-template-columns: 1fr; } }

.wiki-list {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); box-shadow: var(--sh-1);
  max-height: 72vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.wrow {
  display: flex; flex-direction: column; gap: 4px; width: 100%;
  padding: var(--s3) var(--s4); cursor: pointer; text-align: left; font: inherit;
  background: transparent; color: inherit; border: 0;
  border-bottom: 1px solid var(--line-2); border-left: 3px solid transparent;
  transition: background var(--t) var(--ease), border-left-color var(--t) var(--ease);
}
.wrow:last-child { border-bottom: 0; }
.wrow:hover { background: var(--surface-2); border-left-color: var(--line); }
.wrow.on { background: var(--surface-2); border-left-color: var(--ink); }
.wrow .wt { font-weight: 700; font-size: 15px; line-height: 1.3; }
.wrow .area { align-self: flex-start; }
.wrow .wx {
  font-size: 13px; color: var(--ink-2); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wrow .wm {
  font-family: var(--mono); font-size: 10px; letter-spacing: .05em; color: var(--ink-3);
}

.wiki-page {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); box-shadow: var(--sh-1);
  padding: var(--s5) clamp(var(--s4), 2.5vw, var(--s6)) var(--s6); min-width: 0;
}
.wiki-head { border-bottom: 2px solid var(--ink); padding-bottom: var(--s3); margin-bottom: var(--s4); }
.wiki-head h2 {
  margin: 0; font-family: var(--cond); font-size: clamp(24px, 4vw, 30px); font-weight: 700;
  text-transform: uppercase; line-height: 1.05; text-wrap: balance;
}
.wmeta {
  margin: var(--s2) 0 0; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; color: var(--ink-3);
}
.wacts { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }

/* ---------- rendered page text ---------- */

.prose { max-width: 68ch; font-size: 16px; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose h2, .prose h3, .prose h4 {
  font-family: var(--cond); text-transform: uppercase; font-weight: 700;
  line-height: 1.15; margin: var(--s5) 0 var(--s2); letter-spacing: .01em;
}
.prose h2 { font-size: 22px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.prose h3 { font-size: 18px; }
.prose h4 { font-size: 15px; color: var(--ink-2); }
.prose p { margin: 0 0 var(--s3); line-height: 1.65; text-wrap: pretty; }
.prose ul, .prose ol { margin: 0 0 var(--s3); padding-left: var(--s5); }
.prose li { margin-bottom: 6px; line-height: 1.6; }
.prose a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--over); }
.prose strong { font-weight: 700; }
.prose code {
  font-family: var(--mono); font-size: 13px; border-radius: 3px;
  background: var(--surface-2); padding: 2px 5px; border: 1px solid var(--line-2);
}
.prose pre {
  margin: 0 0 var(--s3); padding: var(--s3) var(--s4); overflow-x: auto;
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--ink-3); border-radius: var(--r);
  -webkit-overflow-scrolling: touch;
}
.prose pre code { background: none; border: 0; padding: 0; font-size: 13px; line-height: 1.55; }
.prose blockquote {
  margin: 0 0 var(--s3); padding: var(--s2) var(--s4); color: var(--ink-2);
  border-left: 3px solid var(--soon-mk); background: var(--surface-2);
  border-radius: 0 var(--r) var(--r) 0;
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin: var(--s5) 0; }

/* ---------- wiki editor ---------- */

.editor {
  min-height: 46vh; font-family: var(--mono); font-size: 14px; line-height: 1.6;
  resize: vertical; tab-size: 2;
}
.cheat > summary {
  cursor: pointer; list-style: none; user-select: none; min-height: 32px;
  display: flex; align-items: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-3);
}
.cheat > summary::-webkit-details-marker { display: none; }
.cheat > summary::before { content: "▸ "; }
.cheat[open] > summary::before { content: "▾ "; }
.cheat-body {
  margin-top: var(--s2); padding: var(--s3); font-size: 13px; line-height: 2;
  color: var(--ink-2); background: var(--surface-2);
  border: 1px solid var(--line-2); border-radius: var(--r);
}
.cheat-body code {
  font-family: var(--mono); font-size: 12px; border-radius: 3px;
  background: var(--bg); padding: 2px 5px; border: 1px solid var(--line-2);
}

/* The manual's technical half — folded away so the page stays short for the
   shop floor, and open to anyone who needs the detail. */
.tech {
  margin-top: var(--s5); border-top: 2px solid var(--ink); padding-top: var(--s4);
}
.tech > summary {
  cursor: pointer; list-style: none; user-select: none;
  display: flex; align-items: center; gap: var(--s2); min-height: var(--tap);
  font-family: var(--cond); font-weight: 700; font-size: 17px;
  text-transform: uppercase; letter-spacing: .01em; color: var(--ink-2);
}
.tech > summary::-webkit-details-marker { display: none; }
.tech > summary::before {
  content: "▸"; font-size: 12px; display: inline-block;
  transition: transform var(--t) var(--ease);
}
.tech[open] > summary::before { transform: rotate(90deg); }
.tech > summary:hover { color: var(--ink); }
.tech .prose { margin-top: var(--s3); }
.tech .prose h3 {
  font-size: 16px; margin-top: var(--s5);
  border-bottom: 1px solid var(--line-2); padding-bottom: 4px;
}
.tech .prose h3:first-child { margin-top: 0; }

.histview {
  margin-top: var(--s4); padding: var(--s4); border: 1px solid var(--line);
  border-radius: var(--r); background: var(--surface-2);
}
.histview h3 {
  margin: 0 0 var(--s3); font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 400;
}

/* ---------- touch ----------
   Anything you tap gets a full-size target on a touch screen. Kept behind
   pointer:coarse so a mouse-driven desktop doesn't turn into oversized
   furniture. */

@media (pointer: coarse) {
  /* Give the gestures back to the browser. With touch-action: none the column
     ate every swipe, so a grid that fills the screen left nowhere to scroll
     from — the page simply would not move. Dragging out a new block is a mouse
     gesture now; on touch you tap a day, which opens the same dialog with the
     times ready to set. */
  .col { touch-action: auto; }

  .btn, .quick button, .navlink, .actor, .prow .px, .notice .px { min-height: var(--tap); }
  .btn, .quick button { padding: 0 14px; }
  .navlink, .actor { padding: 0 12px; }
  .lane-head .add, .backlog-sec > summary .add { width: var(--tap); height: 38px; }
  .wrow { padding: var(--s4); }
  .bar { gap: 10px; }
  .field input, .field select, .field textarea { min-height: var(--tap); }
  /* Hover states are meaningless without a pointer and stick after a tap. */
  .card:hover { transform: none; box-shadow: var(--sh-1); }
  .col:hover { background-color: var(--surface); }
  tbody tr:hover { background: transparent; }
}

/* ---------- small screens ---------- */

@media (max-width: 700px) {
  /* A narrower week: 7 days at 104px forced the grid past 780px, so a phone
     showed barely two of them and had to be dragged sideways for the rest.
     Tighter columns and a slimmer hour gutter fit more of the week per look.
     For one day at a time, the day chips above are still the better tool. */
  .cal { --colmin: 76px; --timecol: 42px; }
  .cal-day { padding: 6px; }
  .cal-day .dn { font-size: 13px; }
  .cal-day .dd { font-size: 9.5px; }
  .cal-gutter .gh { padding: 2px 5px 0; font-size: 9.5px; }
  .blk { padding: 3px 4px; }
  .blk .bn { font-size: 9.5px; letter-spacing: .03em; }

  .wrap { gap: var(--s4); padding-bottom: 56px; }
  /* Title takes its own line so the nav and identity chip get a clean row
     instead of being squeezed against it. */
  .top { align-items: center; }
  .top h1 { flex: 1 1 100%; }
  .top .grow { display: none; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: var(--s3); }
  .stat .n { font-size: 26px; }
  .logsec h2, .hours h2, .wiki-head h2 { font-size: 19px; }
  .hours h2 .btn { margin-left: 0; }
}

@media (max-width: 600px) {
  /* Dialogs become bottom sheets: on a phone the bottom of the screen is
     where your thumb already is, and a full-width sheet gives form fields
     room they don't have in a floating box. */
  dialog, dialog.wide {
    width: 100%; max-width: 100%; max-height: 92vh;
    margin: 0 auto 0; position: fixed; bottom: 0; left: 0; right: 0; top: auto;
    border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0;
    animation: sheet-up 220ms var(--ease);
  }
  .dlg { max-height: 92vh; }
  .dlg-body { padding-bottom: max(var(--s4), env(safe-area-inset-bottom, 0px)); }
  .dlg-foot {
    padding-bottom: max(var(--s3), env(safe-area-inset-bottom, 0px));
    position: sticky; bottom: 0;
  }
  /* Buttons share the row rather than clustering right, so the primary action
     is where the thumb already is. The spacer has nothing left to push. */
  .dlg-foot .btn { flex: 1 1 auto; }
  .dlg-foot .grow { display: none; }
  .toast { left: var(--s3); right: var(--s3); transform: none; max-width: none; }
  @keyframes toast-in { from { opacity: 0; } to { opacity: 1; } }
}

@keyframes sheet-up {
  from { transform: translateY(12px); opacity: .6; }
  to   { transform: translateY(0); opacity: 1; }
}

@media print {
  .bar, .lane-head .add, .toast, .wacts, .navlink, .live, .actor { display: none; }
  .board { grid-template-columns: repeat(2, 1fr); }
  .wiki { grid-template-columns: 1fr; }
  .wiki-list { display: none; }
  body { background: #fff; }
  .card, .stat, .notice, .wiki-page { box-shadow: none; }
}

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