/* ============================================================================
   Marketing work management — application styles.
   Values here are taken from the wireframes. Where a number looks oddly
   specific (10.5px, .14em) it is deliberate and comes from the design.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box }

html, body { margin:0; padding:0 }
body {
  background: var(--mh-white);
  color: var(--text-body);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--text-link); text-decoration: none }
a:hover { text-decoration: underline }
button { font-family: inherit }
[hidden] { display: none !important }

/* ---------------------------------------------------------------- suite bar */
.suitebar {
  height:48px; background:var(--mh-black); display:flex; align-items:center;
  gap:18px; padding:0 16px; flex:none;
}
.waffle { display:grid; grid-template-columns:repeat(3,3px); gap:2px; flex:none }
.waffle i { width:3px; height:3px; background:var(--mh-grey-500); display:block }
.suitebar .wordmark {
  font:var(--fw-black) 13px/1 var(--font-display);
  letter-spacing:.06em; color:var(--mh-white); white-space:nowrap;
}
.suitebar .spacer { flex:1 }
.avatar {
  width:28px; height:28px; border-radius:var(--radius-pill); flex:none;
  display:flex; align-items:center; justify-content:center;
  font:var(--fw-bold) 11px var(--font-sans); color:var(--mh-white);
  background:var(--mh-blue);
}
.avatar.guest { background:var(--mh-grey-500) }
.avatar.sm { width:22px; height:22px; font-size:9.5px; background:var(--mh-grey-200); color:var(--text-muted) }
.avatar.xs { width:20px; height:20px; font-size:9px;   background:var(--mh-grey-200); color:var(--text-muted) }
.avatar.ring { width:30px; height:30px; font-size:11px; background:var(--mh-grey-200);
               color:var(--text-muted); border:1px solid var(--border-default) }

/* -------------------------------------------------------------- site header */
.siteheader {
  height:62px; border-bottom:1px solid var(--border-default); flex:none;
  display:flex; align-items:center; gap:14px; padding:0 20px; background:var(--mh-white);
}
.sitemark {
  width:34px; height:34px; background:var(--mh-black); color:var(--mh-white); flex:none;
  display:flex; align-items:center; justify-content:center;
  font:var(--fw-black) 13px var(--font-display); letter-spacing:.02em;
}
.sitetitle { font:var(--fw-bold) 15px/1.2 var(--font-sans); color:var(--mh-black) }
.sitesub   { font:var(--fw-regular) 12px/1.2 var(--font-sans); color:var(--text-subtle) }
.headeractions { display:flex; gap:8px; font:var(--fw-regular) 12.5px var(--font-sans); color:var(--text-muted) }

/* Flat header chips: the wireframes use bare padded spans, not buttons. */
.chip {
  padding:6px 10px; background:none; border:none; cursor:pointer;
  font:var(--fw-regular) 12.5px var(--font-sans); color:var(--text-muted);
  transition:background var(--dur-fast) var(--ease-standard);
}
.chip:hover { background:var(--mh-grey-200) }
.chip.bordered { border:1px solid var(--border-default) }
.chip.solid { background:var(--mh-black); color:var(--mh-white) }
.chip.solid:hover { background:var(--mh-grey-900) }

/* Describes what the view is showing. Deliberately not a button: no border, no
   pointer, no hover — it carries information, not an action. */
.viewnote {
  padding:6px 0; font:var(--fw-regular) 12.5px var(--font-sans);
  color:var(--text-subtle); white-space:nowrap;
}

/* ------------------------------------------------------------------ shell */
.shell { display:flex; flex-direction:column; min-height:100vh }
.shell-body { display:flex; flex:1; min-height:0; align-items:stretch }

nav.sidenav {
  width:210px; flex:none; border-right:1px solid var(--border-subtle);
  padding:16px 12px; display:flex; flex-direction:column; gap:2px;
  background:var(--mh-white);
}
.overline {
  font:var(--fw-bold) 10.5px var(--font-sans); letter-spacing:var(--ls-overline);
  text-transform:uppercase; color:var(--text-subtle);
}
nav.sidenav .overline { padding:6px 10px 8px }
nav.sidenav a.nav {
  position:relative; padding:8px 10px 8px 13px; text-decoration:none;
  font:var(--fw-regular) 13px var(--font-sans); color:var(--text-muted);
  display:flex; align-items:center; gap:7px;
}
nav.sidenav a.nav:hover { background:var(--mh-grey-100); text-decoration:none }
nav.sidenav a.nav.active {
  font-weight:var(--fw-bold); color:var(--mh-black); background:var(--mh-grey-200);
}
nav.sidenav a.nav.active::before {
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px; background:var(--mh-black);
}
nav.sidenav a.nav .count { font-family:var(--font-mono); font-size:11px; color:var(--mh-danger) }
.navfoot {
  margin-top:auto; padding:10px; border-top:1px solid var(--border-subtle);
  font:var(--fw-regular) 11px/1.5 var(--font-sans); color:var(--text-subtle);
}
.navnote {
  margin-top:22px; padding:12px 10px; border-top:1px solid var(--border-subtle);
  font:var(--fw-regular) 11.5px/1.6 var(--font-sans); color:var(--text-subtle);
}

main.canvas {
  flex:1; min-width:0; background:var(--surface-page);
  padding:26px 28px; display:flex; flex-direction:column; gap:20px;
}
main.canvas.tight { gap:20px; padding:24px 28px }
main.canvas.paper { background:var(--mh-white); padding:0 }

/* ------------------------------------------------------------- page titles */
.pagehead { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap }
h1.page {
  margin:0; font:var(--fw-extrabold) 30px/1.05 var(--font-display);
  letter-spacing:var(--ls-tight); color:var(--mh-black);
}
.eyebrow { margin-bottom:6px }
.breadcrumb { font:var(--fw-regular) 12px var(--font-sans); color:var(--text-subtle) }
.breadcrumb .sep { color:var(--border-default); margin:0 4px }
.breadcrumb a { color:var(--text-subtle) }

/* -------------------------------------------------------------------- card */
.card { background:var(--surface-card); border:1px solid var(--border-default) }
.card.accent  { background:var(--mh-blue-pale); border-color:var(--mh-blue-pale) }
/* "My week" on My Work. Was solid black, which is hard on the eyes for a panel
   you look at every morning. The warm pair is already in the palette — the On
   hold pill and the Badge component use it — so this adds no new colour.
   Separate from .card.accent, which is the pale blue the project screen uses.
   .overline is overridden here because its --text-subtle grey measures 3.2:1
   against this background, and measured no better on the black it replaced. The
   warm ink is 5.0:1. Body text is --text-muted at 6.4:1, black at 18.6:1. */
.card.warm { background:var(--mh-warning-soft); color:var(--mh-black);
             border-color:var(--mh-warning) }
.card.warm .overline { color:var(--mh-warning-ink) }
.card-pad { padding:18px 20px }
.card-head {
  display:flex; align-items:center; gap:12px; padding:14px 18px;
  border-bottom:1px solid var(--border-subtle);
}
.card-head .t { font:var(--fw-bold) 14px var(--font-sans); color:var(--mh-black) }
.card-head .sub { font:var(--fw-regular) 12px var(--font-sans); color:var(--text-subtle) }
.card-head .spacer { flex:1 }

/* --------------------------------------------------------------- stat tiles */
.tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:14px }
.tile { background:var(--surface-card); border:1px solid var(--border-default); padding:16px 18px }
.tile .label { font:var(--fw-regular) 11.5px var(--font-sans); color:var(--text-subtle); margin-bottom:8px }
.tile .value { font:var(--fw-extrabold) 26px/1 var(--font-display); letter-spacing:var(--ls-tight); color:var(--mh-black) }
.tile .sub   { font:var(--fw-regular) 11.5px var(--font-sans); color:var(--text-muted); margin-top:6px }

/* ------------------------------------------------------------------- table */
.tbl { display:block; width:100% }
.tbl .th, .tbl .tr { display:grid; align-items:center; gap:0 }
.tbl .th {
  padding:9px 18px; background:var(--surface-page); border-bottom:1px solid var(--border-subtle);
  font:var(--fw-bold) 10.5px var(--font-sans); letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-subtle);
}
.tbl .tr {
  padding:12px 18px; border-bottom:1px solid var(--border-subtle);
  font:var(--fw-regular) 13px var(--font-sans); color:var(--text-body);
  text-align:left; width:100%; background:none; border-left:0; border-right:0; border-top:0;
}
button.tr { cursor:pointer; transition:background var(--dur-fast) var(--ease-standard) }
button.tr:hover { background:var(--mh-grey-100) }
.tbl .tr .name { font-weight:var(--fw-semibold) }
.tbl .grouprow {
  display:flex; align-items:center; gap:10px; padding:12px 18px;
  background:var(--mh-grey-200); border-bottom:1px solid var(--border-default);
}
.tbl .grouprow .g { font:var(--fw-bold) 12.5px var(--font-sans); color:var(--mh-black) }
.tbl .grouprow .n { font:var(--fw-regular) 11.5px var(--font-mono); color:var(--text-subtle) }
.rowlink { color:var(--text-link) }
.mono { font-family:var(--font-mono); font-size:12px; color:var(--text-muted) }
.mono.warn { color:var(--mh-danger) }
.emptyrow { padding:22px 18px; font:var(--fw-regular) 13px var(--font-sans); color:var(--text-subtle) }

/* status dot + label */
.status { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text-muted) }
.dot { width:7px; height:7px; border-radius:var(--radius-pill); flex:none }
.dot.lg { width:8px; height:8px }
.sq { width:8px; height:8px; flex:none }

/* --------------------------------------------------------------- RAG pills */
.pill {
  display:inline-flex; align-items:center; padding:4px 9px;
  font:var(--fw-bold) 10.5px var(--font-sans); letter-spacing:.08em; text-transform:uppercase;
}
.pill.sm { padding:3px 8px; font-size:10px }
.badge {
  display:inline-flex; align-items:center; gap:6px; padding:3px 9px;
  border-radius:var(--radius-pill); font:var(--fw-bold) 11px var(--font-sans);
  letter-spacing:.08em; text-transform:uppercase; line-height:1.4;
}

/* -------------------------------------------------------------------- board */
.board { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; align-items:start }
.boardcol {
  background:var(--mh-grey-200); padding:12px; display:flex; flex-direction:column;
  gap:10px; min-height:560px;
}
.boardcol > .head { display:flex; align-items:center; gap:8px; padding:0 2px 6px }
.boardcol > .head .t { font:var(--fw-bold) 12px var(--font-sans); letter-spacing:.02em; color:var(--mh-black) }
.boardcol > .head .n { font-family:var(--font-mono); font-size:11px; color:var(--text-subtle) }
.boardcol > .head .spacer { flex:1 }
.boardcol > .head .d { font-family:var(--font-mono); font-size:11px; color:var(--text-muted) }
.taskcard {
  background:var(--surface-card); border:1px solid var(--border-default);
  padding:12px 13px; display:flex; flex-direction:column; gap:9px;
  text-align:left; cursor:pointer; width:100%;
  transition:box-shadow var(--dur-fast) var(--ease-standard);
}
.taskcard:hover { box-shadow:var(--shadow-md) }
.taskcard .t { font:var(--fw-semibold) 13px/1.35 var(--font-sans); color:var(--mh-black); text-wrap:pretty }
.taskcard .p { font:var(--fw-regular) 11.5px/1.3 var(--font-sans); color:var(--text-link) }
/* Requesting team. Set as a label rather than a second link so it does not
   compete with the project name directly beneath it. align-self keeps the hit
   area to the text, since the card is a flex column and a button would
   otherwise stretch the full width. */
.taskcard .g { align-self:flex-start; background:none; border:0; padding:0; cursor:pointer;
               font:var(--fw-semibold) 10px var(--font-sans); letter-spacing:.09em;
               text-transform:uppercase; color:var(--text-subtle) }
.taskcard .g:hover { color:var(--mh-black); text-decoration:underline }
.taskcard .foot { display:flex; align-items:center; gap:8px }
.taskcard .foot .spacer { flex:1 }
.boardcol.dragover { outline:2px dashed var(--mh-blue); outline-offset:-2px }
.taskcard.dragging { opacity:.4 }

/* ------------------------------------------------------------------ meters */
.meter { height:8px; background:var(--mh-grey-200); position:relative }
.meter > i { display:block; height:100%; }
.meter .cap { position:absolute; top:-2px; bottom:-2px; left:100%; width:1px; background:var(--mh-grey-500) }
.meter.thin { height:5px }
.meter.hair { height:4px }
.meter.dark { background:var(--mh-grey-800); height:6px }

.legend { display:flex; gap:16px; font:var(--fw-regular) 11.5px var(--font-sans); color:var(--text-muted); flex-wrap:wrap }
.legend > span { display:flex; align-items:center; gap:6px }
.legend i { width:10px; height:10px; display:block }

/* ----------------------------------------------------------- capacity grid */
.capgrid { --cap-weeks:4 }
.capgrid .th, .capgrid .tr, .capgrid .captotal {
  display:grid; grid-template-columns:240px repeat(var(--cap-weeks),1fr);
}
.capgrid .th {
  padding:12px 18px; background:var(--surface-page);
  border-bottom:1px solid var(--border-subtle);
  font:var(--fw-bold) 10.5px var(--font-sans); letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-subtle);
}
.capgrid .tr { padding:16px 18px; border-bottom:1px solid var(--border-subtle); align-items:center }
.capgrid .who .n { font:var(--fw-semibold) 13.5px var(--font-sans); color:var(--mh-black) }
.capgrid .who .r { font:var(--fw-regular) 11.5px var(--font-sans); color:var(--text-subtle) }
.capcell { padding-right:18px }
.capcell .top { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px }
.capcell .top .v { font:var(--fw-bold) 13px var(--font-mono) }
.capcell .top .p { font:var(--fw-regular) 10.5px var(--font-sans); color:var(--text-subtle) }
.captotal { align-items:center; padding:16px 18px;
            background:var(--mh-black); color:var(--mh-white) }
.captotal .l { font:var(--fw-bold) 13px var(--font-sans) }
.captotal .v { padding-right:18px; font:var(--fw-bold) 15px var(--font-mono) }
.capweek { display:none; font:var(--fw-bold) 10px var(--font-sans); letter-spacing:.1em;
           text-transform:uppercase; color:var(--text-subtle); margin-bottom:4px }

/* ------------------------------------------------------------------ digest */
.digest-split { flex:1; display:flex; background:var(--mh-white); min-height:0 }
.digest-main { flex:1; padding:34px 40px; border-right:1px solid var(--border-subtle); min-width:0 }
.digest-main h1 {
  margin:8px 0 4px; font:var(--fw-extrabold) 44px/1 var(--font-display);
  letter-spacing:-.03em; color:var(--mh-black);
}
.digest-lede { font:var(--fw-regular) 14px/1.6 var(--font-sans); color:var(--text-muted); max-width:520px; margin-bottom:28px }
.digest-item { border-top:1px solid var(--border-default); padding:18px 0 20px; display:flex; align-items:baseline; gap:14px }
.digest-item .tag {
  font:var(--fw-bold) 11px var(--font-mono); min-width:104px; flex:none;
  letter-spacing:.06em; text-transform:uppercase;
}
.digest-item .head { font:var(--fw-bold) 18px/1.3 var(--font-sans); color:var(--mh-black); text-wrap:pretty }
.digest-item .body { font:var(--fw-regular) 13.5px/1.55 var(--font-sans); color:var(--text-muted); margin-top:5px; max-width:560px; text-wrap:pretty }
.digest-item .meta { font:var(--fw-regular) 11.5px var(--font-mono); color:var(--text-subtle); margin-top:8px }
.digest-rail { width:330px; flex:none; padding:34px 26px; background:var(--surface-page); display:flex; flex-direction:column; gap:26px }
.railblock { border-top:1px solid var(--border-default); padding-top:20px }
.reqcard { background:var(--mh-white); border:1px solid var(--border-default); padding:12px 13px; margin-bottom:10px }
.reqcard .n { font:var(--fw-semibold) 13px/1.35 var(--font-sans); color:var(--mh-black) }
.reqcard .m { font:var(--fw-regular) 11.5px var(--font-sans); color:var(--text-subtle); margin-top:4px }
.reqcard .actions { margin-top:10px; display:flex; gap:7px }
.minibtn { padding:5px 9px; font:var(--fw-semibold) 11px var(--font-sans); border:1px solid var(--border-default);
           background:var(--mh-white); color:var(--text-muted); cursor:pointer }
.minibtn.solid { background:var(--mh-black); color:var(--mh-white); border-color:var(--mh-black) }
.minibtn:hover { filter:brightness(.94) }

/* --------------------------------------------------------------- side panel */
.scrim { position:fixed; inset:0; background:rgba(0,0,0,.28); z-index:40; border:0; padding:0; cursor:default }
.panel {
  position:fixed; top:0; right:0; bottom:0; width:452px; z-index:41;
  background:var(--mh-white); border-left:1px solid var(--border-default);
  box-shadow:-8px 0 24px rgba(0,0,0,.12); display:flex; flex-direction:column;
}
.panel-head { padding:20px 26px 16px; border-bottom:1px solid var(--border-subtle);
              display:flex; align-items:flex-start; gap:14px; flex:none }
.panel-head .t { font:var(--fw-bold) 19px/1.3 var(--font-sans); color:var(--mh-black); text-wrap:pretty }
.panel-body { flex:1; overflow-y:auto; padding:22px 26px; display:flex; flex-direction:column; gap:18px }
.panel-foot { padding:16px 26px; border-top:1px solid var(--border-subtle);
              display:flex; flex-direction:column; gap:14px; flex:none }
.iconbtn { width:28px; height:28px; flex:none; border:1px solid var(--border-default);
           background:var(--mh-white); display:flex; align-items:center; justify-content:center;
           font:var(--fw-regular) 15px var(--font-sans); color:var(--text-muted); cursor:pointer }
.iconbtn:hover { background:var(--mh-grey-100) }
.panelmeta { display:grid; grid-template-columns:1fr 1fr; gap:8px 16px }
.panelmeta div { font:var(--fw-regular) 11px var(--font-sans); color:var(--text-subtle) }
.panelmeta span { font-family:var(--font-mono); color:var(--text-muted) }
/* ------------------------------------------------------------------ burn-up */
/* Fixed drawing surface, scaled by CSS. Below its minimum the card scrolls
   rather than shrinking the labels into illegibility — same treatment as the
   wide tables. */
.burnup-wrap { overflow-x:auto }
.burnup { display:block; width:100%; min-width:560px; height:auto }
/* --text-subtle (#878787) measured 3.59:1 on white, which fails WCAG AA for
   small text. --text-muted (#54575c) is 7.25:1. */
.burnup-axis {
  font-family:var(--font-mono); font-size:10.5px; fill:var(--text-muted);
}
.burnup-value {
  font-family:var(--font-mono); font-size:10.5px; font-weight:var(--fw-bold);
}
/* The progress figure sits inside the remaining band, so it needs to hold up
   against a grey fill rather than white. */
.burnup-pct {
  font-family:var(--font-display); font-size:30px; font-weight:var(--fw-bold);
  fill:var(--text-muted); letter-spacing:-0.02em;
}
.burnup-pct-note {
  font-family:var(--font-sans); font-size:10.5px; fill:var(--text-muted);
}

/* A task line inside the person panel — dense, clickable, opens the editor. */
.personrow {
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:8px 0; background:none; border:0;
  border-bottom:1px solid var(--border-subtle); cursor:pointer;
}
.personrow:hover { background:var(--mh-grey-100) }
.personrow .t { font:var(--fw-semibold) 12.5px/1.35 var(--font-sans); color:var(--mh-black) }
.personrow .p { font:var(--fw-regular) 11px/1.3 var(--font-sans); color:var(--text-link) }

/* The person cell on a capacity row, and the avatars, become drill-downs. */
.persondrill {
  background:none; border:0; padding:0; text-align:left; cursor:pointer; width:100%;
}
.persondrill:hover .n { text-decoration:underline }
button.avatar { border:0; cursor:pointer; font:inherit }
button.avatar.ring { border:1px solid var(--border-default) }
button.avatar:hover { outline:2px solid var(--mh-blue); outline-offset:1px }

.dangerlink { background:none; border:none; cursor:pointer;
              font:var(--fw-semibold) 12px var(--font-sans); color:var(--mh-danger); padding:0 }
.dangerlink:hover { text-decoration:underline }

/* -------------------------------------------------------------------- forms */
.field { display:flex; flex-direction:column; gap:6px; font-family:var(--font-sans) }
.field > label { font:var(--fw-semibold) 13px var(--font-sans); color:var(--text-body) }
.field .hint { font-size:12px; color:var(--text-subtle) }
.field .hint.err { color:var(--mh-danger) }
.field input, .field select, .field textarea {
  font-family:var(--font-sans); font-size:15px; color:var(--text-body);
  background:var(--mh-white); border:1px solid var(--border-default);
  border-radius:var(--radius-md); outline:none;
  transition:border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.field input, .field select { height:42px; padding:0 14px; width:100% }
.field select { padding-right:38px; appearance:none; cursor:pointer }
.field textarea { width:100% }
.field input[type="date"] { max-width:100% }
.field textarea { padding:10px 14px; line-height:1.5; resize:vertical }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color:var(--mh-blue); box-shadow:0 0 0 3px rgba(0,160,222,.18);
}
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color:var(--mh-danger) }
.field.invalid input:focus, .field.invalid textarea:focus { box-shadow:0 0 0 3px rgba(192,57,43,.15) }
.selwrap { position:relative }
.selwrap .caret { position:absolute; right:14px; top:50%; transform:translateY(-50%);
                  pointer-events:none; font-size:.7rem; color:var(--text-muted) }
.fieldlabel { font:var(--fw-semibold) 12.5px var(--font-sans); color:var(--mh-black); margin-bottom:8px }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:18px }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-sans); font-weight:var(--fw-semibold); letter-spacing:.01em;
  line-height:1; height:42px; padding:0 20px; font-size:15px;
  border-radius:var(--radius-md); border:2px solid transparent; cursor:pointer;
  transition:background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard),
             border-color var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.btn:active:not(:disabled) { transform:translateY(1px) }
.btn:disabled { opacity:.45; cursor:not-allowed }
.btn.primary   { background:var(--mh-black); color:var(--mh-white); border-color:var(--mh-black) }
.btn.secondary { background:transparent; color:var(--mh-black); border-color:var(--mh-black) }
.btn.accent    { background:var(--mh-blue); color:var(--mh-white); border-color:var(--mh-blue) }
.btn.ghost     { background:transparent; color:var(--mh-black); border-color:transparent }
.btn.ghost:hover:not(:disabled) { background:var(--mh-grey-200) }
.btn.sm { height:34px; padding:0 14px; font-size:13px }

/* choice chips (status / effort in the task panel) */
.chips { display:flex; gap:7px; flex-wrap:wrap }
.choice {
  display:flex; align-items:center; gap:7px; padding:7px 12px; cursor:pointer;
  border:1px solid var(--border-default); background:var(--mh-white); color:var(--text-muted);
  font:var(--fw-semibold) 12px var(--font-sans);
  transition:background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.choice:hover { background:var(--mh-grey-100) }
.choice.on { background:var(--mh-black); border-color:var(--mh-black); color:var(--mh-white) }
.choice.num { min-width:52px; justify-content:center; padding:9px 0; font:var(--fw-semibold) 13px var(--font-mono) }

.check { display:inline-flex; align-items:center; gap:10px; font-size:15px;
         color:var(--text-body); cursor:pointer; font-family:var(--font-sans) }
.check input { position:absolute; opacity:0; width:0; height:0 }
.check .box { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px;
              border-radius:var(--radius-sm); border:2px solid var(--border-default);
              background:var(--mh-white); color:var(--mh-white); flex-shrink:0;
              transition:background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard) }
.check input:checked + .box { background:var(--mh-black); border-color:var(--mh-black) }
.check .box svg { display:none }
.check input:checked + .box svg { display:block }
.check.radio .box { border-radius:var(--radius-pill) }
.check.radio .box i { width:10px; height:10px; border-radius:var(--radius-pill); background:var(--mh-black); display:none }
.check.radio input:checked + .box { background:var(--mh-white) }
.check.radio input:checked + .box i { display:block }
.check input:focus-visible + .box { box-shadow:0 0 0 3px rgba(0,160,222,.35) }

.callout { display:flex; gap:14px; border-radius:var(--radius-md);
           padding:var(--space-4) var(--space-5); font-family:var(--font-sans); color:var(--text-body) }
.callout .title { font-weight:var(--fw-bold); font-size:15px; margin-bottom:4px; color:var(--text-strong) }
.callout .msg { font-size:14px; line-height:1.55 }
.callout.info    { background:var(--mh-grey-100); border-left:3px solid var(--mh-blue) }
.callout.accent  { background:var(--mh-blue-pale); border-left:3px solid var(--mh-blue-deep) }
.callout.success { background:#f2f4e6; border-left:3px solid var(--mh-olive) }
.callout.warning { background:#fbf3e2; border-left:3px solid var(--mh-warning) }
.callout.danger  { background:#f9e8e6; border-left:3px solid var(--mh-danger) }

.inlinewarn { background:var(--mh-warning-soft); padding:12px 14px;
              font:var(--fw-regular) 12.5px/1.5 var(--font-sans); color:var(--mh-warning-ink) }

/* --------------------------------------------------------- communication site */
.comms { max-width:none }
.comms-hero { padding:40px 48px 34px; border-bottom:1px solid var(--border-default);
              display:flex; align-items:flex-end; gap:40px; flex-wrap:wrap; background:var(--mh-white) }
.comms-hero h1 { margin:0 0 10px; font:var(--fw-extrabold) 46px/1 var(--font-display);
                 letter-spacing:-.03em; color:var(--mh-black) }
.comms-hero .lede { font:var(--fw-regular) 15px/1.6 var(--font-sans); color:var(--text-muted); max-width:620px }
.comms-body { padding:26px 48px 44px; background:var(--surface-page); min-height:640px }
.filterrow { display:flex; gap:9px; margin-bottom:24px; flex-wrap:wrap }
.filterchip { padding:7px 13px; background:var(--mh-white); border:1px solid var(--border-default);
              color:var(--text-muted); font:var(--fw-regular) 12px var(--font-sans); cursor:pointer;
              display:inline-flex; align-items:center; gap:7px }
.filterchip.on { background:var(--mh-black); border-color:var(--mh-black); color:var(--mh-white);
                 font-weight:var(--fw-semibold) }
/* Optional count inside a chip. Chips without one are unaffected — inline-flex
   with a single child lays out as the padded box it always was. The selected
   state inverts to white-on-black, where the subtle grey would disappear, so it
   gets its own colour rather than inheriting. */
.filterchip .n { font:var(--fw-regular) 11px var(--font-mono); color:var(--text-subtle) }
.filterchip.on .n { color:var(--mh-grey-400) }
.custgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.custcard { background:var(--mh-white); border:1px solid var(--border-default); padding:20px 22px;
            display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow-sm) }
.custcard .top { display:flex; align-items:center; justify-content:space-between; gap:10px }
.custcard .grp { font:var(--fw-bold) 10.5px var(--font-sans); letter-spacing:.12em;
                 text-transform:uppercase; color:var(--text-subtle) }
.custcard .rag { width:9px; height:9px; flex:none }
.custcard .n { font:var(--fw-bold) 18px/1.28 var(--font-sans); color:var(--mh-black); text-wrap:pretty }
.custcard .b { font:var(--fw-regular) 13px/1.55 var(--font-sans); color:var(--text-muted); text-wrap:pretty }
.custcard .rule { height:1px; background:var(--border-subtle); margin:2px 0 }
.custcard .who { display:flex; align-items:center; gap:8px;
                 font:var(--fw-regular) 12px var(--font-sans); color:var(--text-muted) }

/* Two-state signal, in words. Replaces a bare coloured square whose only
   explanation was a hover title. */
.custcard .signal {
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font:var(--fw-semibold) 10.5px var(--font-sans);
  letter-spacing:.06em; text-transform:uppercase;
}

/* "We need something from you." The only part of the customer window a
   requestor can act on, so it is the loudest thing on the card. */
.awaiting {
  margin:10px 0 2px; padding:10px 12px;
  background:var(--mh-danger-soft); border-left:3px solid var(--mh-danger);
}
.awaiting-head {
  font:var(--fw-bold) 11px var(--font-sans); letter-spacing:.08em;
  text-transform:uppercase; color:var(--mh-danger-ink); margin-bottom:4px;
}
.awaiting-body {
  font:var(--fw-regular) 12.5px/1.5 var(--font-sans); color:var(--mh-danger-ink);
}
.awaiting-inline {
  font:var(--fw-semibold) 12px var(--font-sans); color:var(--mh-danger-ink);
  margin-bottom:3px;
}

/* Said once at the top, so it is not something to spot by scrolling a grid. */
.withyou {
  margin-bottom:22px; padding:14px 18px;
  background:var(--mh-danger-soft); border-left:3px solid var(--mh-danger);
}
.withyou-head {
  font:var(--fw-bold) 14px var(--font-sans); color:var(--mh-danger-ink);
  margin-bottom:4px;
}
/* Sign in / sign out in the top bar: an offer, not a call to action, so it is
   quieter than a button but still clearly clickable. */
/* 404 page. Deliberately plain — it exists to give an honest status code more
   than to be looked at. */
.notfound {
  max-width: 620px;
  padding: 56px 48px;
  font: 400 15px/1.65 var(--font-sans);
  color: var(--text-muted);
}
.notfound h1 {
  font: var(--fw-black) 34px/1.1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--mh-black);
  margin: 8px 0 16px;
}
.notfound ul { padding-left: 20px; margin-top: 18px; }
.notfound li { margin-bottom: 10px; }
.notfound a { color: var(--mh-black); }

/* The no-JavaScript fallback. A class rather than a style attribute so the
   Content-Security-Policy can forbid inline styles outright — stylesheets load
   with scripting disabled, so nothing is lost. */
.noscript {
  padding: 40px;
  font: 400 15px/1.6 system-ui, sans-serif;
  color: #1a1a1a;
}

/* Separates the two sign-in routes without implying they are equivalent: the
   preferred one is above the rule, the fallback below it. */
.orrule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 18px;
  color: var(--text-muted);
  font: var(--fw-semibold) 11px/1 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.orrule::before,
.orrule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

.barlink {
  background: none;
  border: 0;
  padding: 6px 10px;
  margin-right: 4px;
  font: var(--fw-semibold) 12px/1 var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mh-white);
  opacity: 0.72;
  cursor: pointer;
}
.barlink:hover { opacity: 1; text-decoration: underline; }
.barlink:focus-visible { outline: 2px solid var(--mh-white); outline-offset: 2px; opacity: 1; }

.withyou-team {
  font-weight: var(--fw-semibold);
  /* Distinguishes the team from the project name without a second colour. */
  letter-spacing: 0.01em;
}
.withyou-body {
  font:var(--fw-regular) 13px/1.55 var(--font-sans); color:var(--mh-danger-ink);
}

/* Whether the page is current. Quiet, but present on every item — not knowing
   is what makes people email to ask. */
.updated {
  margin-top:8px; font:var(--fw-regular) 11px var(--font-sans);
  color:var(--text-subtle);
}
.tbl .updated { margin-top:0 }

/* timeline */
.tl-head { display:grid; grid-template-columns:300px 1fr; border-bottom:1px solid var(--border-default); padding-bottom:10px }
.tl-months { display:grid; }
.tl-group { padding:20px 0 8px; font:var(--fw-bold) 12px var(--font-sans); letter-spacing:.04em; color:var(--mh-black) }
.tl-row { display:grid; grid-template-columns:300px 1fr; align-items:center; padding:9px 0;
          border-top:1px solid var(--border-subtle) }
.tl-row .lbl { padding-right:24px }
.tl-row .lbl .n { font:var(--fw-semibold) 13.5px var(--font-sans); color:var(--mh-black) }
.tl-row .lbl .s { font:var(--fw-regular) 11.5px var(--font-sans); color:var(--text-subtle) }
.tl-track { position:relative; height:34px }
.tl-bar { position:absolute; top:7px; bottom:7px; display:flex; align-items:center; padding:0 10px;
          font:var(--fw-semibold) 11px var(--font-sans); color:var(--mh-white); white-space:nowrap;
          overflow:hidden; min-width:8px }

/* --------------------------------------------------------------- sign-in */
.signin { min-height:100vh; display:flex; flex-direction:column; background:var(--surface-page) }
.signin-body { flex:1; display:flex; align-items:center; justify-content:center; padding:40px 24px }
.signin-card { width:100%; max-width:440px; background:var(--mh-white);
               border:1px solid var(--border-default); padding:34px 36px }
.signin-card h1 { margin:0 0 10px; font:var(--fw-extrabold) 30px/1.05 var(--font-display);
                  letter-spacing:var(--ls-tight); color:var(--mh-black) }

/* --------------------------------------------------------------- utilities */
.row { display:flex; align-items:center; gap:12px }
.row.wrap { flex-wrap:wrap }
.spacer { flex:1 }
.stack { display:flex; flex-direction:column }
.muted { color:var(--text-muted) }
.subtle { color:var(--text-subtle) }
.small { font-size:12.5px }
/* Clip rather than wrap. A wrapping cell grows its row and drags every
   neighbouring column out of line, which reads as a layout fault; a clipped
   one does not. Only for content whose tail is predictable or recoverable
   from a title — never where the end of the string carries the meaning. */
.trunc { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.tinynote { font:var(--fw-regular) 11.5px/1.6 var(--font-sans); color:var(--text-subtle) }
.footnote { padding:20px 40px; font:var(--fw-regular) 12px var(--font-sans); color:var(--text-subtle) }
.linkish { background:none; border:none; padding:0; cursor:pointer;
           font:var(--fw-semibold) 12.5px var(--font-sans); color:var(--text-link) }
.linkish:hover { text-decoration:underline }
.addrow { padding:12px 18px; font:var(--fw-semibold) 12.5px var(--font-sans); color:var(--text-link);
          background:none; border:none; cursor:pointer; text-align:left; width:100% }
.addrow:hover { background:var(--mh-grey-100) }

.toast {
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:60;
  background:var(--mh-black); color:var(--mh-white); padding:12px 18px;
  font:var(--fw-semibold) 13px var(--font-sans); box-shadow:var(--shadow-lg); max-width:min(560px,90vw);
}
.toast.err { background:var(--mh-danger) }

.loading { padding:40px 28px; font:var(--fw-regular) 13px var(--font-sans); color:var(--text-subtle) }

/* Narrow screens: the wireframes are desktop designs, but the app must not
   break on a laptop or tablet. Columns collapse rather than overflow. */
@media (max-width:1180px) {
  .tiles { grid-template-columns:repeat(2,1fr) }
  .board { grid-template-columns:repeat(2,1fr) }
  .custgrid { grid-template-columns:repeat(2,1fr) }
}
@media (max-width:900px) {
  nav.sidenav { display:none }
  .digest-split { flex-direction:column }
  .digest-rail { width:auto; border-top:1px solid var(--border-default) }
  .digest-main { border-right:none }
  .comms-hero, .comms-body { padding-left:24px; padding-right:24px }
  .grid2 { grid-template-columns:1fr }
  /* The four-week grid stops being a grid: each row becomes a stacked block
     with the week named on every cell, since the column header is gone. */
  .capgrid .th { display:none }
  .capgrid .tr, .capgrid .captotal { grid-template-columns:1fr; gap:14px }
  .capgrid .who { padding-bottom:4px; border-bottom:1px solid var(--border-subtle) }
  .capcell, .captotal .v { padding-right:0 }
  .capweek { display:block }
  .captotal { gap:12px }
  .captotal .capweek { color:var(--mh-grey-500) }
  .panel { width:100% }
}
@media (max-width:640px) {
  .tiles, .board, .custgrid { grid-template-columns:1fr }
  h1.page { font-size:24px }
  .comms-hero h1 { font-size:32px }
  .digest-main h1 { font-size:32px }
  main.canvas { padding:18px 16px }
  .digest-main { padding:24px 18px }
  .digest-rail { padding:24px 18px }

  /* Tag above the item rather than beside it — 104px of gutter is too much
     of a 375px screen. */
  .digest-item { flex-direction:column; gap:6px }
  .digest-item .tag { min-width:0 }

  /* The site header has three things competing for one line. */
  .siteheader { height:auto; min-height:56px; padding:10px 16px; flex-wrap:wrap; row-gap:8px }
  .sitesub { display:none }
  .suitebar { gap:12px }

  /* Wide tables scroll inside their own card instead of pushing the page. */
  .card.tbl { overflow-x:auto }
  .tbl .th, .tbl .tr { min-width:640px }
  .comms-hero, .comms-body { padding-left:16px; padding-right:16px }
  .footnote { padding:18px 16px }
}