/* Moore Innovation brand tokens — mirrored from mooreinnovationllc.com */
:root {
  --brand: #2f5838;          /* forest green (site --primary) */
  --brand-dark: #24422b;
  --brand-soft: #d3edd7;     /* site --accent / --primary-soft */
  --brand-soft-fg: #0d2814;
  --bg: #fbfaf6;             /* site --background */
  --cream: #f6f1e7;
  --stone: #eae7e2;
  --card: #ffffff;
  --text: #13110d;           /* site --foreground */
  --muted: #57554f;          /* site --muted-foreground */
  --muted-bg: #f0eeeb;       /* site --muted */
  --border: #dfdeda;         /* site --border */
  --green: #2f5838;
  --amber: #8a5f1d;
  --red: #d40c1a;            /* site --destructive */
  --red-soft: #fbe3e4;
  --accent: var(--brand);
  --navy: var(--brand);       /* legacy aliases */
  --navy-dark: var(--brand-dark);
  --on-brand: #fbfaf6;
  --red-fg: #a01019;
  --stone-fg: #3d3b35;
  --approval-fg: #9a4a08;
  --approval-border: #e4c69a;
  --clientinput-bg: #e4ecf6;
  --clientinput-fg: #234a7d;
  --clientinput-border: #c2d4ea;
  --topbar-bg: rgba(251, 250, 246, .92);
  --backdrop: rgba(19, 17, 13, .4);
  --radius: 10px;
  --shadow: 0 1px 2px rgba(19, 17, 13, .04), 0 8px 24px -12px rgba(19, 17, 13, .08);
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Headings used to be Fraunces (serif). Dropped Sep 18 2026: it was hard to read
     at the sizes it actually appeared at (ticket headers, calendar months).
     The variable stays so a heading still says it is one, and so the serif is
     one line to bring back. */
  --font-display: var(--font-body);
  font-size: 15px;
  color-scheme: light;
}

/* Dark mode — warm dark neutrals, same forest-green brand */
:root[data-theme="dark"] {
  --brand: #3f7049;
  --brand-dark: #4f8759;      /* hover lightens in the dark */
  --brand-soft: #263f2c;
  --brand-soft-fg: #b9e3c1;
  --bg: #171511;
  --cream: #292317;
  --stone: #2c2923;
  --card: #201d18;
  --text: #f0eee8;
  --muted: #a6a299;
  --muted-bg: #26231d;
  --border: #38342a;
  --green: #6fae7d;
  --amber: #d3a558;
  --red: #ff7b84;
  --red-soft: #3f2225;
  --red-fg: #ffb0b5;
  --stone-fg: #c9c5bb;
  --approval-fg: #e2b276;
  --approval-border: #6a5531;
  --clientinput-bg: #1e2a3a;
  --clientinput-fg: #9dc2ea;
  --clientinput-border: #35506e;
  --on-brand: #f4faf4;
  --topbar-bg: rgba(23, 21, 17, .9);
  --backdrop: rgba(0, 0, 0, .55);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
}
.hidden { display: none !important; }

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--topbar-bg);
  backdrop-filter: blur(6px);
  color: var(--text);
  padding: 0 20px;
  height: 58px;
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.brand-mark {
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 700;
  border-radius: 7px;
  padding: 3px 7px;
  font-size: 13px;
  letter-spacing: .5px;
}
/* Moore Innovation cascade mark (see "Moore Innovation logo concepts/logo").
   Five bars, 126x108 grid: widths 18, gap 9, heights 108/74/42/74/108. Plays the
   cascade once on page load, then rests as the static logo. Motion is always downward. */
.brand-mark.moore-mark {
  --mi-ink: #2A4A33; --mi-mid: #7E9C86;
  --mi-tall: 26px; --mi-bar: calc(var(--mi-tall) * 18 / 108);
  display: inline-flex; align-items: flex-start; gap: calc(var(--mi-bar) / 2);
  height: var(--mi-tall); background: none; padding: 0; border-radius: 0;
}
:root[data-theme="dark"] .brand-mark.moore-mark { --mi-ink: #F2EBE1; }
.moore-mark i {
  display: block; width: var(--mi-bar); border-radius: calc(var(--mi-bar) / 2);
  background: var(--mi-ink); transform-origin: top center;
  animation: moore-casc-fall 1.6s ease-in-out 1, moore-casc-in .45s ease-out 1 1.6s forwards;
}
.moore-mark i:nth-child(1), .moore-mark i:nth-child(5) { height: var(--mi-tall); }
.moore-mark i:nth-child(2), .moore-mark i:nth-child(4) { height: calc(var(--mi-tall) * 0.685); opacity: .8; }
.moore-mark i:nth-child(3) { height: calc(var(--mi-tall) * 0.389); background: var(--mi-mid); }
.moore-mark i:nth-child(2) { animation-delay: .12s, 1.72s; }
.moore-mark i:nth-child(3) { animation-delay: .24s, 1.84s; }
.moore-mark i:nth-child(4) { animation-delay: .36s, 1.96s; }
.moore-mark i:nth-child(5) { animation-delay: .48s, 2.08s; }
@keyframes moore-casc-fall {
  0%, 6%    { transform: translateY(0) scaleY(0); opacity: 0; }
  12%       { opacity: 1; }
  34%, 62%  { transform: translateY(0) scaleY(1); opacity: 1; }
  94%, 100% { transform: translateY(100%) scaleY(0); opacity: 1; }
}
@keyframes moore-casc-in {
  from { transform: translateY(0) scaleY(0); }
  to   { transform: none; }
}
/* Deliberately NOT gated on prefers-reduced-motion: it is a single 2.5s pass per page load, and Bill's
   Windows has animations turned off system-wide, which would otherwise hide it entirely (Aug 17). */
.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -.3px;
}
.brand-sub { color: var(--muted); font-weight: 400; font-family: var(--font-body); font-size: 13.5px; }
.tabs { display: flex; gap: 4px; height: 100%; }
.tab {
  background: none;
  border: none;
  color: var(--muted);
  font: inherit;
  font-weight: 500;
  padding: 0 16px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  height: 100%;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--brand); }
.topbar-right { margin-left: auto; }
.person-picker { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.person-picker select {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 4px 8px;
  font: inherit;
}
.theme-toggle {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 7px;
  padding: 4px 9px;
  font-size: 14px;
  line-height: 1.3;
  cursor: pointer;
}
.theme-toggle:hover { background: var(--cream); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ---------- Layout ---------- */
main { padding: 20px; max-width: 1400px; margin: 0 auto; }

/* ---------- PM view ---------- */
.pm-toolbar { display: flex; justify-content: flex-end; margin-bottom: 14px; gap: 8px; }
.client-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 20px;
  overflow: hidden;
}
.client-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.client-head h2 {
  margin: 0;
  font-size: 18px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.3px;
}
.client-head .contact { color: var(--muted); font-size: 13px; }
.client-head .spacer { margin-left: auto; }
.chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  border-radius: 999px;
  padding: 3px 9px;
}
.chip-lead { background: var(--stone); color: var(--muted); }
.chip-discovery { background: var(--brand-soft); color: var(--brand-soft-fg); }
.chip-active { background: var(--brand); color: var(--on-brand); }
.chip-closed { background: var(--muted-bg); color: var(--muted); }
.chip-internal { background: var(--cream); color: var(--amber); }
.client-body { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 0; }
@media (max-width: 1000px) { .client-body { grid-template-columns: 1fr; } }
.client-col { padding: 14px 18px; border-right: 1px solid var(--border); min-width: 0; }
.client-col:last-child { border-right: none; }
.col-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--muted);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
}
.col-title .btn { margin-left: auto; }
.next-step { font-size: 14px; line-height: 1.45; }
.next-step .due { color: var(--amber); font-weight: 600; font-size: 12.5px; }
.time-total { color: var(--muted); font-size: 12.5px; margin-top: 10px; }
.item-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 13.5px;
  cursor: pointer;
}
.item-row:last-child { border-bottom: none; }
.item-row:hover { background: var(--cream); }
.item-row .when { color: var(--muted); white-space: nowrap; font-size: 12.5px; min-width: 74px; }
.item-row .what { flex: 1; min-width: 0; }
.item-row .amount { font-weight: 600; white-space: nowrap; }
.badge {
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 5px;
  padding: 1px 6px;
  text-transform: uppercase;
  letter-spacing: .3px;
  white-space: nowrap;
}
.badge-meeting { background: var(--brand-soft); color: var(--brand-soft-fg); }
.badge-unfiled { background: var(--cream); color: var(--amber); text-transform: none; letter-spacing: 0; }
.filing-note { background: var(--cream); color: var(--amber); border-radius: var(--radius); padding: 8px 10px; border-top: 0; font-size: 12.5px; }
.filing-note h4 { margin: 0 0 4px; }
.badge-deadline { background: var(--red-soft); color: var(--red-fg); }
.badge-milestone { background: var(--cream); color: var(--amber); }
.badge-planned { background: var(--muted-bg); color: var(--muted); }
.badge-invoiced { background: var(--cream); color: var(--amber); }
.badge-due { background: var(--red-soft); color: var(--red-fg); }
.badge-paid { background: var(--brand-soft); color: var(--brand-soft-fg); }
.badge-waived { background: var(--muted-bg); color: var(--muted); }
.badge-visible { background: var(--brand-soft); color: var(--brand-soft-fg); }
.empty { color: var(--muted); font-size: 13px; font-style: italic; padding: 4px 0; }

/* ---------- Board view ---------- */
.board-toolbar { display: flex; justify-content: flex-end; margin-bottom: 14px; gap: 8px; }
/* ---------- Swimlane board (Feedback 5.0) ----------
   The board is rows, not columns: one band per parent ticket, its children in
   the column matching their own status. --swim-cols is the one place the column
   widths are declared; the header strip and every band's row share it, so they
   cannot drift apart. */
.board {
  --swim-cols: repeat(5, minmax(0, 1fr));
  display: block;
}
/* Closed collapsed: the lane keeps a sliver so it is still there to drag onto,
   and the four working lanes get the width back. */
.board.closed-collapsed { --swim-cols: repeat(4, minmax(0, 1fr)) 40px; }
.swim-cols, .swim-row { display: grid; grid-template-columns: var(--swim-cols); gap: 14px; }
.swim-cols {
  position: sticky; top: 58px; z-index: 2;
  background: var(--bg);
  padding: 2px 0 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.swim-col-head { min-width: 0; }
.swimlane { margin-bottom: 14px; }
.swim-head {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; margin-bottom: 8px;
  background: var(--muted-bg);
  border-radius: var(--radius);
  cursor: pointer;
}
.swim-head:hover { background: var(--stone); }
.swim-caret { color: var(--muted); font-size: 10px; flex: none; }
.swim-title {
  flex: 1 1 auto; min-width: 0;
  font-weight: 600; font-size: 13.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.swim-title[data-open] { cursor: pointer; }
.swim-title[data-open]:hover { color: var(--brand); }
.swim-title-none { color: var(--muted); font-weight: 500; }
.swim-client { color: var(--muted); font-size: 12px; white-space: nowrap; }
.swim-progress {
  margin-left: auto; display: flex; align-items: center; gap: 7px;
  color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; flex: none;
}
.swim-bar { width: 64px; height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; }
.swim-bar i { display: block; height: 100%; background: var(--brand); }
.swim-move {
  display: block; flex: none; width: auto; margin: 0;
  font: inherit; font-size: 12px; padding: 3px 6px;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--card); color: var(--muted);
}
.swimlane.collapsed .swim-head { margin-bottom: 0; }
@media (max-width: 1000px) { .board { --swim-cols: repeat(2, minmax(0, 1fr)); } .board.closed-collapsed { --swim-cols: repeat(2, minmax(0, 1fr)); } }
.badge-review { background: #fff4d6; color: #7a5200; }
@media (max-width: 1000px) { .board { grid-template-columns: repeat(2, 1fr); } }
.lane {
  background: var(--muted-bg);
  border-radius: var(--radius);
  padding: 8px;
  min-height: 56px;
  min-width: 0;
}
/* Most cells in a band are empty; they still have to be a drop target, so they
   stay the height of the row but stop looking like content. */
.lane-empty { background: none; border: 1px dashed var(--border); }
.lane.drag-over { outline: 2px dashed var(--brand); outline-offset: -2px; }
/* The Closed column collapsed: the header keeps its caret and count but drops the
   word, so it cannot stretch the sticky strip, and the cells become slivers that
   are still there to drop onto. */
.board.closed-collapsed .swim-col-head:last-child .lane-title {
  padding: 2px 0 10px;
  gap: 4px;
  justify-content: center;
  font-size: 0; /* hides the word, the caret and count set their own size back */
}
.board.closed-collapsed .swim-col-head:last-child .lane-caret { font-size: 10px; }
.board.closed-collapsed .swim-col-head:last-child .count { margin-left: 0; font-size: 11px; }
.board.closed-collapsed .swim-row > .lane:last-child { padding: 8px 2px; }
.lane-toggle {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--muted);
  cursor: pointer;
  align-items: center;
  gap: 5px;
}
.lane-toggle:hover { color: var(--brand); }
.lane-caret { font-size: 10px; }
.lane-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--muted);
  padding: 2px 6px 10px;
  display: flex;
}
.lane-title .count { margin-left: auto; font-weight: 500; }
.ticket {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 10px 12px;
  margin-bottom: 10px;
  cursor: grab;
}
.ticket.dragging { opacity: .45; }
.ticket-title { font-size: 13.5px; font-weight: 600; line-height: 1.35; margin-bottom: 8px; cursor: pointer; }
.ticket-title:hover { color: var(--brand); }
.ticket-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.filter-search { min-width: 170px; }
.badge-client { background: var(--stone); color: var(--stone-fg); }
/* Priority is high-or-not since Feedback 5.0: a dot on the card, and nothing at
   all for the rest. The old .badge-high/-medium/-low chips are gone; .badge-internal
   is what the PM view's "internal" chip used to borrow from .badge-low. */
.badge-internal { background: var(--muted-bg); color: var(--muted); }
.dot-high {
  display: inline-block; vertical-align: middle;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red-fg); flex: none;
  margin-right: 6px; margin-top: -2px;
}
.badge-approval { background: var(--cream); color: var(--approval-fg); border: 1px solid var(--approval-border); }
.badge-approved { background: var(--brand-soft); color: var(--brand-soft-fg); }
.badge-changes { background: var(--red-soft); color: var(--red-fg); }
/* Parked on the client: a stripe down the card rather than another badge.
   The note is in the card's title attribute. */
.ticket[data-ask] { border-left: 3px solid var(--clientinput-fg); }
.badge-clientdone { background: var(--brand-soft); color: var(--brand-soft-fg); }
/* "Waiting on them" on the PM client card: the mirror of Next up. */
.asks-block { border-top: 1px dashed var(--border); margin-top: 2px; }
.asks-block .next-steps-head { color: var(--clientinput-fg); }
.ask-row { cursor: pointer; }
.ask-row:hover .what { color: var(--brand); }
.ask-row .when { min-width: 44px; text-align: right; }
.ask-row .ask-aged { color: var(--red-fg); font-weight: 600; }
.ticket-time { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }

/* ---------- Buttons ---------- */
.btn {
  font: inherit;
  font-size: 13px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn:hover { border-color: #cbc9c3; background: var(--cream); }
.btn:disabled { opacity: .45; cursor: default; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-danger { color: var(--red); }
.btn-ghost { border-color: transparent; background: none; color: var(--muted); }
.btn-ghost:hover { color: var(--text); background: var(--muted-bg); border-color: transparent; }
.btn-sm { font-size: 12px; padding: 4px 9px; }

/* ---------- Timer ---------- */
.timer {
  position: fixed;
  right: 18px;
  bottom: 18px;
  background: var(--brand);
  color: var(--on-brand);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(19, 17, 13, .3);
  padding: 12px 14px;
  z-index: 50;
  min-width: 172px;
  text-align: center;
}
.timer-display {
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.timer.running .timer-display { color: var(--brand-soft); }
.timer-buttons { display: flex; gap: 6px; justify-content: center; }
.timer .btn { border-color: rgba(251, 250, 246, .3); background: rgba(251, 250, 246, .1); color: #fbfaf6; }
.timer .btn:hover { background: rgba(251, 250, 246, .22); }
.timer .btn-primary { background: #fbfaf6; border-color: #fbfaf6; color: var(--brand); font-weight: 600; }
.timer .btn-primary:hover { background: var(--brand-soft); border-color: var(--brand-soft); }
.timer .btn-ghost { border-color: transparent; background: none; color: rgba(251, 250, 246, .75); }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--backdrop);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px;
  z-index: 60;
  overflow-y: auto;
}
.modal {
  background: var(--card);
  border-radius: 12px;
  width: 560px;
  max-width: 100%;
  box-shadow: 0 20px 50px rgba(19, 17, 13, .3);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 96px);
  max-height: calc(100dvh - 96px);
}
.modal-body { overflow-y: auto; }
.modal-head {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.modal-head h3 { margin: 0; font-size: 15.5px; font-family: var(--font-display); font-weight: 700; letter-spacing: -.1px; }
.modal-head .close { margin-left: auto; }
.modal-body { padding: 16px 18px; }
.modal-foot {
  display: flex;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
}
.modal-foot .right { margin-left: auto; display: flex; gap: 8px; }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.field input, .field select, .field textarea {
  width: 100%;
  font: inherit;
  font-size: 13.5px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  background: var(--card);
  color: var(--text);
}
.field textarea { min-height: 74px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
.field-row { display: flex; gap: 10px; }
.field-row .field { flex: 1; }
.field-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin-bottom: 10px; }
.field-check input { width: auto; accent-color: var(--brand); }
.subsection { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 12px; }
.subsection h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }

/* ---------- Feedback round 1 additions ---------- */
.chip-intro-call { background: var(--stone); color: var(--stone-fg); }
.chip-contracting { background: var(--cream); color: var(--amber); }
.chip-payment { background: var(--cream); color: var(--amber); }
.chip-complete { background: var(--brand); color: var(--on-brand); }

.client-logo { width: 22px; height: 22px; border-radius: 5px; object-fit: contain; align-self: center; }
.assignee-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-soft-fg);
  font-size: 11px;
  font-weight: 700;
}

.next-steps-block {
  background: var(--brand-soft);
  border-bottom: 1px solid var(--border);
  padding: 12px 18px;
}
.next-steps-head {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--brand-soft-fg);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.next-steps-head .due { color: var(--amber); text-transform: none; letter-spacing: 0; font-size: 12px; }
.next-steps-head .btn { margin-left: auto; }
.step-item {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 500;
  padding: 4px 0;
  cursor: pointer;
  color: var(--text);
}
.step-item input { accent-color: var(--brand); }
.step-item.done span { text-decoration: line-through; opacity: .5; }
.next-steps-empty { padding: 6px 14px; border-bottom: 1px solid var(--border); }

.client-body.two-col { grid-template-columns: 1.3fr 1fr; }
@media (max-width: 1000px) { .client-body.two-col { grid-template-columns: 1fr; } }
.client-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border-top: 1px solid var(--border);
  color: var(--muted);
}

.file-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 4px; }
.file-chip {
  display: inline-block;
  font-size: 11.5px;
  color: var(--brand);
  text-decoration: none;
  background: var(--muted-bg);
  border-radius: 5px;
  padding: 1px 6px;
  white-space: nowrap;
}
.file-chip:hover { background: var(--brand-soft); }

.filter-select {
  font: inherit;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  background: var(--card);
  color: var(--text);
}
.board-toolbar { justify-content: flex-start; gap: 8px; }

.badge-kids { background: var(--stone); color: var(--stone-fg); }
.badge-duedate { background: var(--cream); color: var(--amber); }
.child-mark { color: var(--muted); font-weight: 500; font-size: 12px; }

.timer-min {
  position: absolute;
  top: 4px;
  right: 6px;
  background: none;
  border: none;
  color: rgba(251, 250, 246, .7);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
}
.timer-min:hover { color: #fff; }
.timer { position: fixed; }
.timer.min { min-width: 0; padding: 8px 34px 8px 12px; }
.timer.min .timer-buttons { display: none; }
.timer.min .timer-display { font-size: 14px; margin: 0; letter-spacing: .5px; }
body.gated .timer { display: none; }

/* ---------- Notifications bell ---------- */
.bell-wrap { position: relative; display: inline-flex; }
.bell-count { position: absolute; top: -5px; right: -6px; background: var(--red); color: #fff; font-size: 10px;
  border-radius: 999px; padding: 0 5px; line-height: 15px; min-width: 15px; text-align: center; pointer-events: none; }
.bell-count.hidden { display: none; }
.bell-panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(360px, calc(100vw - 24px)); max-height: 60vh;
  overflow-y: auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); z-index: 60; padding: 6px; }
.bell-panel .bell-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 8px; font-weight: 600; font-size: 13.5px; }
.bell-panel .notif { padding: 7px 8px; border-radius: 8px; font-size: 12.5px; cursor: pointer; }
.bell-panel .notif:hover { background: var(--muted-bg); }
.bell-panel .notif.unread { background: var(--brand-soft); color: var(--brand-soft-fg); }
.bell-panel .notif.unread:hover { filter: brightness(.97); }
.bell-panel .notif .nwhen { color: var(--muted); font-size: 11px; display: block; margin-top: 1px; }
.bell-panel .notif.unread .nwhen { color: inherit; opacity: .75; }
.bell-panel .empty { padding: 10px 8px; }
body.gated .bell-wrap { display: none; }

/* ---------- Calendar ---------- */
.cal-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.cal-month { font-family: var(--font-display); font-weight: 700; font-size: 17px; min-width: 150px; text-align: center; }
.cal-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.cal-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.cal-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  min-width: 640px;
}
#view-cal { overflow-x: auto; }
.cal-head {
  background: var(--muted-bg);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  padding: 6px 8px;
}
.cal-cell { background: var(--card); min-height: 92px; padding: 4px 6px; }
.cal-pad { background: var(--bg); }
.cal-today { outline: 2px solid var(--brand); outline-offset: -2px; }
.cal-day { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 3px; }
.cal-item {
  font-size: 11.5px;
  line-height: 1.3;
  padding: 2px 5px;
  border-radius: 4px;
  margin-bottom: 3px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--muted-bg);
}
.cal-item:hover { background: var(--brand-soft); }
.cal-meeting { background: var(--brand-soft); color: var(--brand-soft-fg); }
.cal-deadline { background: var(--red-soft); color: var(--red-fg); }
.cal-milestone { background: var(--cream); color: var(--amber); }
.cal-due { background: var(--red-soft); color: var(--red-fg); }
.cal-dev { background: var(--muted-bg); }
.cal-hint { color: var(--muted); font-size: 12.5px; }

/* ---------- Touch drag ---------- */
.drag-clone {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  opacity: .93;
  transform: rotate(2deg);
  box-shadow: 0 14px 34px rgba(19, 17, 13, .35);
  margin: 0;
}
.ticket.touch-armed { outline: 2px solid var(--brand-soft); outline-offset: -1px; }

/* ---------- Mobile ---------- */
/* Mobile-only helpers (hidden on desktop) */
.tab-short, .lane-tabs, .move-select:not(.swim-move), .cal-agenda { display: none; }

@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; }
  /* ---- top bar: never wider than the screen; tabs scroll if needed ---- */
  .topbar { gap: 6px; padding: 0 8px; height: 50px; overflow: hidden; }
  .brand { gap: 7px; flex: none; }
  .brand-mark.moore-mark { --mi-tall: 22px; }
  .brand-sub, .brand-name { display: none; }
  .tabs { gap: 0; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 0 7px; font-size: 12.5px; white-space: nowrap; flex: none; }
  .theme-toggle { display: none; } /* theme follows the system setting on phones */
  .tab-long { display: none; }
  .tab-short { display: inline; }
  .topbar-right { flex: none; gap: 6px; }
  .person-picker span { display: none; }
  .person-picker select { padding: 4px 4px; font-size: 12.5px; }
  .theme-toggle { padding: 4px 7px; }
  main { padding: 10px 10px 88px; } /* room for the timer pill */

  /* ---- PM cards ---- */
  .client-card { margin-bottom: 14px; }
  .client-head { padding: 10px 12px; gap: 6px 8px; }
  .client-head h2 { font-size: 16px; }
  .client-head .contact { flex: 1 1 100%; order: 3; }
  .client-head .spacer { flex-basis: 100%; margin: 0; height: 0; order: 4; }
  .client-head .btn { order: 5; padding: 5px 8px; font-size: 12px; }
  .client-col { padding: 12px; }
  .next-steps-block { padding: 10px 12px; }
  .next-steps-head { flex-wrap: wrap; gap: 4px 6px; }
  .next-steps-head .btn { margin-left: 0; padding: 3px 7px; }
  .item-row { flex-wrap: wrap; gap: 4px 8px; padding: 8px 0; }
  .item-row .when { min-width: 0; }
  .item-row .what { flex: 1 1 60%; }
  .item-row input[type=checkbox] { margin-left: auto; width: 20px; height: 20px; }
  .step-item { padding: 6px 0; }
  .step-item input { width: 20px; height: 20px; }
  .client-foot { flex-wrap: wrap; padding: 8px 12px; gap: 6px 10px; }
  .pay-list { flex-basis: 100%; }
  .btn { padding: 7px 11px; }
  .btn-sm { padding: 5px 9px; }

  /* ---- Board: one lane at a time, switched with tabs; move tickets with a picker ---- */
  .board-toolbar { flex-wrap: wrap; gap: 6px; }
  .board-toolbar .filter-select { flex: 1 1 45%; min-width: 0; font-size: 12.5px; padding: 6px 8px; }
  .board-toolbar .filter-toggle { flex: 1 1 45%; }
  .board-toolbar #add-ticket { flex: 1 1 100%; }
  .lane-tabs { display: flex; gap: 4px; margin: 10px 0 8px; overflow-x: auto; scrollbar-width: none; }
  .lane-tabs::-webkit-scrollbar { display: none; }
  .lane-tab { flex: none; border: 1px solid var(--border); background: var(--card); color: var(--muted); border-radius: 999px; padding: 6px 11px; font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
  .lane-tab .n { margin-left: 5px; font-weight: 600; }
  .lane-tab.active { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
  .board { display: block; }
  .swim-cols { display: none; }
  .swim-row { display: block; }
  .lane { display: none; min-height: 0; padding: 0; background: none; }
  .lane.mobile-active { display: block; }
  .lane-title { display: none; }
  .swim-head { margin-bottom: 6px; flex-wrap: wrap; gap: 8px; row-gap: 6px; }
  .swim-head .swim-move { width: auto; max-width: 45%; margin-top: 0; }
  .swim-client { flex: none; }
  .swim-progress { margin-left: auto; }
  /* A band with nothing in the column you are looking at is just noise here. */
  .swimlane:not(.collapsed):not(:has(.lane.mobile-active .ticket)) { display: none; }
  .ticket { padding: 12px 12px 10px; margin-bottom: 8px; cursor: default; }
  .ticket-title { font-size: 14px; }
  .move-select { display: block; margin-top: 8px; width: 100%; font: inherit; font-size: 12.5px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--muted-bg); color: var(--muted); }

  /* ---- Calendar: dots in the grid, details in an agenda list ---- */
  .cal-toolbar { gap: 6px; }
  .cal-legend { display: none; }
  .cal-month { min-width: 0; flex: 1; font-size: 15px; }
  .cal-grid { gap: 1px; }
  .cal-cell { min-height: 46px; padding: 3px 4px; }
  .cal-day { font-size: 11px; margin-bottom: 2px; }
  .cal-item { font-size: 0; padding: 0; margin: 0 2px 2px 0; display: inline-block; border: 0 !important; background: none !important; }
  .cal-item .cal-dot { width: 7px; height: 7px; }
  .cal-item.cal-dev:not(.cal-edge) { display: none; }
  .cal-item.cal-dev::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 2px; background: var(--muted); }
  .cal-agenda { display: block; margin-top: 12px; }
  .cal-agenda h3 { font-family: var(--font-display); font-weight: 600; font-size: 15px; margin: 0 0 6px; }
  .cal-agenda .agenda-day { color: var(--muted); font-size: 12px; font-weight: 600; margin: 10px 0 2px; }
  .cal-agenda .agenda-item { display: flex; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 13.5px; }
  .cal-agenda .agenda-item .badge { margin-left: auto; }
  .cal-hint { display: none; }

  /* ---- Meetings tab ---- */
  #view-meetings .client-head { align-items: flex-start; }
  #view-meetings select, #view-meetings input[type=text] { flex: 1 1 100%; }

  /* ---- Timer: a slim pill that stays out of the way ---- */
  .timer { right: 10px; bottom: 10px; padding: 8px 10px; min-width: 0; border-radius: 12px; max-width: calc(100vw - 20px); }
  .timer-display { font-size: 17px; margin-bottom: 6px; }
  .timer.min { padding: 6px 30px 6px 10px; }
  .timer.min .timer-display { font-size: 13px; }
  .timer-min { top: 2px; right: 4px; }
  .toast { bottom: 64px; max-width: calc(100vw - 24px); }
}
@media (max-width: 620px) {
  .modal-backdrop { padding: 10px; }
  .modal-head, .modal-body, .modal-foot { padding-left: 14px; padding-right: 14px; }
  .field input, .field select, .field textarea { font-size: 16px; } /* keeps iOS from zooming the page on focus */
  .modal { width: 100%; max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); }
  .field-row { flex-direction: column; gap: 0; }
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--bg);
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 13.5px;
  z-index: 70;
  box-shadow: 0 8px 24px rgba(19, 17, 13, .3);
}
.toast.error { background: var(--red); }

/* feedback 2.0 */
.badge-sprint { background: #e8ecff; color: #2b3a8f; }
.done-block { margin-top: 8px; font-size: 12.5px; }
.done-block summary { cursor: pointer; color: var(--muted); }
.done-block .step-item { opacity: .7; }
.step-item.done span { text-decoration: line-through; }
/* payments: one row each, stacked (T-116) */
.pay-list { flex: 0 1 460px; min-width: 0; font-size: 12.5px; }
.pay-head { font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.pay-head .btn { margin-left: 6px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.pay-row { font-size: 12.5px; padding: 3px 0; color: var(--text); }
.pay-row .when { min-width: 0; }
.client-foot { align-items: flex-end; }
.next-steps-head .btn { margin-left: 6px; }
.item-row input[type=checkbox] { margin-left: 8px; }

/* feedback 3.0 */
.filter-toggle { font-size: 12.5px; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.select-search { width: 100%; margin-bottom: 4px; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; }

/* onboarding form wording editor (hub: 📋 Onboarding → ✏️ Edit wording) */
.ob-edit-note { font-size: 12.5px; color: var(--muted); margin: 0 0 12px; }
.ob-edit-section { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; }
.ob-edit-section summary { cursor: pointer; font-weight: 600; font-size: 13.5px; margin: 2px 0 10px; }
.ob-edit-section summary .muted { color: var(--muted); font-weight: 400; font-size: 12px; }
.ob-edit-field { border-top: 1px dashed var(--border); padding-top: 8px; margin-top: 8px; }
.ob-edit-kind { font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }

/* ---------- Roadmap tab: the Gantt (Sep 23 2026; roadmap.js) ---------- */
:root { --rm-red: #d40c1a; --rm-yellow: #c98a1e; --rm-green: #2f5838; --rm-done: #b9b5ad; --rm-none: #dfdeda; --rm-band: rgba(19, 17, 13, .035); --rm-arrow: #7d7a72; }
:root[data-theme="dark"] { --rm-red: #ff7b84; --rm-yellow: #d3a558; --rm-green: #6fae7d; --rm-done: #4a463d; --rm-none: #38342a; --rm-band: rgba(255, 255, 255, .045); --rm-arrow: #8d897f; }
.rm-toolbar { margin-bottom: 10px; flex-wrap: wrap; justify-content: flex-start; }
.rm-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--card); }
.rm-seg-btn { border: 0; background: none; padding: 6px 10px; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; }
.rm-seg-btn + .rm-seg-btn { border-left: 1px solid var(--border); }
.rm-seg-btn.active { background: var(--brand-soft); color: var(--brand-soft-fg); font-weight: 600; }
.rm-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.rm-head { display: flex; width: max-content; min-width: 100%; border-bottom: 1px solid var(--border); background: var(--muted-bg); }
.rm-corner {
  position: sticky; left: 0; z-index: 4; flex: none; width: 380px; box-sizing: border-box;
  padding: 8px 12px; font-weight: 600; font-size: 13.5px; background: var(--muted-bg); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: center;
}
.rm-corner-sub { font-weight: 400; font-size: 12px; color: var(--muted); }
.rm-hlane { position: relative; flex: none; }
.rm-hrow { position: relative; height: 40px; }
.rm-hrow2 { height: 22px; border-top: 1px solid var(--border); }
.rm-hcell {
  position: absolute; top: 0; bottom: 0; box-sizing: border-box; overflow: hidden; white-space: nowrap;
  border-right: 1px solid var(--border); padding: 3px 6px; font-size: 12px; color: var(--muted); line-height: 1.25;
}
.rm-hsprint { cursor: pointer; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.rm-hsprint:hover { background: var(--stone); }
.rm-hsprint.rm-current { color: var(--text); }
.rm-hsprint.rm-picked { background: var(--brand-soft); color: var(--brand-soft-fg); }
.rm-hname { font-weight: 600; font-size: 12.5px; color: var(--text); }
.rm-hsprint.rm-picked .rm-hname { color: var(--brand-soft-fg); }
.rm-hdates { font-size: 11px; }
.rm-hsub { font-size: 11px; font-variant-numeric: tabular-nums; }
.rm-hmonth { font-weight: 600; color: var(--text); display: flex; align-items: center; }
.rm-hweek { font-size: 11px; padding: 3px 4px; }
.rm-body { position: relative; width: max-content; min-width: 100%; }
.rm-bands { position: absolute; top: 0; bottom: 0; z-index: 0; pointer-events: none; }
.rm-band { position: absolute; top: 0; bottom: 0; border-right: 1px solid var(--border); }
.rm-band-alt { background: var(--rm-band); }
.rm-band-current { box-shadow: inset 0 3px 0 var(--brand); }
.rm-band-picked { background: color-mix(in srgb, var(--brand) 9%, transparent); }
.rm-today { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--brand); opacity: .8; }
.rm-row { display: flex; width: max-content; min-width: 100%; height: 36px; box-sizing: border-box; border-bottom: 1px solid var(--border); position: relative; z-index: 1; }
.rm-row:last-child { border-bottom: 0; }
.rm-row.rm-hl .rm-label { background: var(--brand-soft); }
.rm-label {
  position: sticky; left: 0; z-index: 3; flex: none; width: 380px; box-sizing: border-box; height: 100%;
  display: flex; align-items: center; gap: 6px; padding: 0 10px 0 8px; background: var(--card); border-right: 1px solid var(--border);
  font-size: 13px; overflow: hidden;
}
.rm-row-ms .rm-label, .rm-row-client .rm-label { background: var(--muted-bg); }
.rm-row-parent .rm-label { font-weight: 600; }
.rm-depth-1 .rm-label { padding-left: 30px; font-weight: 400; }
.rm-closed .rm-label { color: var(--muted); }
.rm-closed .rm-title { text-decoration: line-through; text-decoration-color: var(--rm-done); }
.rm-caret { flex: none; width: 16px; height: 20px; border: 0; background: none; padding: 0; font: inherit; font-size: 11px; color: var(--muted); cursor: pointer; text-align: center; }
.rm-caret:hover { color: var(--brand); }
.rm-rag { flex: none; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--rm-none); vertical-align: middle; }
.rm-rag-red { background: var(--rm-red); }
.rm-rag-yellow { background: var(--rm-yellow); }
.rm-rag-green { background: var(--rm-green); }
.rm-rag-done { background: var(--rm-done); }
.rm-title { flex: 1 1 auto; min-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-title[data-open] { cursor: pointer; }
.rm-title[data-open]:hover { color: var(--brand); }
.rm-title-muted { color: var(--muted); font-weight: 500; }
.rm-id { color: var(--muted); font-size: 11.5px; margin-right: 5px; font-variant-numeric: tabular-nums; }
.rm-meta { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rm-meta .assignee-chip { width: 18px; height: 18px; font-size: 10px; }
.rm-status { font-size: 10.5px; padding: 1px 6px; background: var(--muted-bg); color: var(--muted); }
.rm-status-development { background: #e8ecff; color: #2b3a8f; }
.rm-status-testing { background: var(--cream); color: var(--amber); }
.rm-status-needs-review { background: #fff4d6; color: #7a5200; }
.rm-status-closed { background: var(--brand-soft); color: var(--brand-soft-fg); }
:root[data-theme="dark"] .rm-status-development { background: #232a4a; color: #b7c2ff; }
:root[data-theme="dark"] .rm-status-needs-review { background: #3d3115; color: #ecc98a; }
.rm-deps { color: var(--muted); font-size: 11px; cursor: help; }
.rm-deps-open { color: var(--rm-yellow); font-weight: 600; }
.rm-client-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; line-height: 1.2; }
.rm-client-text .rm-title { font-weight: 600; }
.rm-sub { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.rm-lane { position: relative; flex: none; height: 100%; }
.rm-bar {
  position: absolute; top: 10px; height: 16px; border-radius: 4px; box-sizing: border-box; cursor: pointer;
  background: var(--rm-none); overflow: hidden;
}
.rm-bar.rm-rag-red { background: color-mix(in srgb, var(--rm-red) 35%, var(--card)); border: 1px solid var(--rm-red); }
.rm-bar.rm-rag-yellow { background: color-mix(in srgb, var(--rm-yellow) 35%, var(--card)); border: 1px solid var(--rm-yellow); }
.rm-bar.rm-rag-green { background: color-mix(in srgb, var(--rm-green) 30%, var(--card)); border: 1px solid var(--rm-green); }
.rm-bar.rm-rag-done { background: var(--rm-done); opacity: .6; }
.rm-bar.rm-rag-none { background: var(--rm-none); border: 1px dashed var(--muted); }
.rm-bar i { display: block; height: 100%; opacity: .55; }
.rm-bar.rm-rag-red i { background: var(--rm-red); }
.rm-bar.rm-rag-yellow i { background: var(--rm-yellow); }
.rm-bar.rm-rag-green i { background: var(--rm-green); }
.rm-row-child .rm-bar, .rm-row-loose .rm-bar { top: 12px; height: 12px; }
.rm-bar-client { top: 8px; height: 20px; border-radius: 5px; }
.rm-bar:hover { filter: brightness(.95); outline: 2px solid var(--brand); outline-offset: 1px; }
.rm-own { position: absolute; top: 6px; height: 24px; box-sizing: border-box; border: 1px dashed var(--muted); border-radius: 5px; pointer-events: none; opacity: .7; }
.rm-duetick { position: absolute; top: 6px; height: 24px; width: 0; border-left: 2px solid var(--amber); pointer-events: none; }
.rm-ms { position: absolute; top: 12px; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg); border-radius: 2px; cursor: pointer; background: var(--brand); }
.rm-ms-meeting { background: var(--brand); }
.rm-ms-deadline { background: var(--rm-red); }
.rm-ms-milestone { background: var(--amber); }
.rm-ms:hover { outline: 2px solid var(--brand); outline-offset: 1px; }
.rm-arrows { position: absolute; top: 0; z-index: 2; pointer-events: none; overflow: visible; }
.rm-arrows path { fill: none; stroke: var(--rm-arrow); stroke-width: 1.2; opacity: .55; pointer-events: stroke; }
.rm-arrows marker path { fill: var(--rm-arrow); stroke: none; opacity: 1; }
.rm-arrows path.rm-arrow-late { stroke: var(--rm-red); opacity: .8; }
.rm-arrows path.rm-hl { stroke: var(--brand); stroke-width: 2; opacity: 1; }
.rm-unsched { margin-top: 12px; font-size: 13px; }
.rm-unsched summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.rm-unsched-item { display: flex; align-items: center; gap: 6px; padding: 5px 0 5px 4px; border-bottom: 1px dashed var(--border); }
.rm-unsched-item.rm-depth-1 { padding-left: 26px; }
.rm-unsched-parent { font-weight: 600; }
.rm-unsched-item .rm-title { flex: 0 1 auto; }
.rm-unsched-item .rm-title[data-open] { cursor: pointer; }
.rm-legend { margin-top: 12px; line-height: 1.7; }
.rm-legend .rm-rag { margin: 0 3px 0 10px; }
.rm-legend .rm-rag:first-child { margin-left: 0; }
.rm-list { display: none; }
@media (max-width: 760px) {
  .rm-scroll, .rm-unsched, .rm-legend, #rm-today, #rm-expand, #rm-collapse, [data-rm-zoom] { display: none; }
  .rm-list { display: block; }
  .rm-list .agenda-day { color: var(--muted); font-size: 12px; font-weight: 600; margin: 12px 0 2px; }
  .rm-list .agenda-item { display: flex; gap: 8px; align-items: baseline; padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 13.5px; }
  .rm-list .agenda-item .badge { margin-left: auto; }
  .rm-list .rm-rag { position: relative; top: 1px; }
  .rm-toolbar .filter-search { min-width: 0; flex: 1 1 120px; }
}