/* Mission Control home (issue #40). Look taken from
   docs/design/mission-control.html (look only, not its code or data).
   Colour tokens, fonts, the top bar and base styles come from shell.css,
   which every page loads before this sheet.
   Colours: yellow (--flag) = dated 0 to 7 days away; red (--bad) = date
   passed, please confirm. Same rule as the Clients pages.
   Layout uses a container query on <main>, so it follows the space the page
   really has: with the chat panel open on a wide screen the page is 380px
   narrower and drops to one column by itself. */

.mc { container-type: inline-size; container-name: mc; }
.mc-hello { margin-bottom: 14px; }
.mc-hello .lead { font-family: var(--mono); font-size: 12px; }
.mc-error { margin: 0 0 12px; color: var(--bad); font-size: 13px; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; min-width: 0; }
.card h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 10px; font-weight: 600; }
.empty { color: var(--muted); font-size: 13px; margin: 0; }

/* --- Alerts --- */
.mc-alerts { margin-bottom: 16px; }
.mc-alert-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mc-alert-list .empty { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }

/* --- One dated item (alert, Today, T-minus): the whole row is a link --- */
.mc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); color: var(--ink); text-decoration: none; }
.item:hover { border-color: var(--accent); }
.item .who { font-weight: 600; display: block; overflow-wrap: anywhere; }
.item .what { font-size: 12px; color: var(--muted); display: block; overflow-wrap: anywhere; }
.item .confirm { font-size: 12px; color: var(--bad); font-weight: 500; display: block; }

.tag { font-family: var(--mono); font-size: 12px; font-weight: 600; text-align: center; padding: 6px 4px; border-radius: 6px; background: var(--soft); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.item.soon .tag { background: var(--flag); color: var(--flag-ink); }
.item.passed .tag { background: var(--bad); color: var(--panel);
  /* "2 days ago"; a long one ("200 days ago") may wrap, only between words. */
  white-space: normal; overflow-wrap: normal; word-break: normal; }

/* Alerts are louder: the whole row is tinted. */
.mc-alert-list .item.soon { background: var(--flag); border-color: var(--flag); color: var(--flag-ink); }
.mc-alert-list .item.soon .what { color: var(--flag-ink); }
.mc-alert-list .item.soon .tag { background: var(--flag-ink); color: var(--flag); }
.mc-alert-list .item.passed { background: var(--bad-soft); border-color: var(--bad); }

/* --- T-minus filter --- */
.filters { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.filters button { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 4px 12px; font-size: 12px; cursor: pointer; min-height: 32px; }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.mc-key { font-size: 12px; color: var(--muted); margin: 0 0 10px; }

/* --- Readiness checklist on each T-minus row (issue #41) ---
   The row is a button that opens the checklist; the client page link sits
   beside it. Chip colours: green = GO, red = NO-GO / Confirm date, grey =
   Choose a checklist. */
.tm-row { display: flex; gap: 6px; align-items: stretch; }
.tm-toggle { grid-template-columns: 96px minmax(0, 1fr) auto; flex: 1; min-width: 0; width: 100%; text-align: left; cursor: pointer; font: inherit; }
.tm-toggle[aria-expanded="true"] { border-color: var(--accent); }
.tm-client { align-self: center; font-size: 12px; color: var(--accent); white-space: nowrap; padding: 4px 2px; }
.go { font-family: var(--mono); font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.go.yes { background: var(--ok-soft); color: var(--ok); }
.go.no { background: var(--bad-soft); color: var(--bad); }
.go.dl { background: var(--soft); color: var(--muted); border: 1px solid var(--line); }
.check { margin-top: 6px; padding: 10px 12px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--soft); display: grid; gap: 8px; font-size: 13px; }
.check .note { font-size: 12px; color: var(--muted); margin: 0; }
.check .needs { font-size: 12px; color: var(--bad); background: var(--bad-soft); border-radius: 4px; padding: 2px 8px; margin: 0; justify-self: start; }
.check-error { margin: 0; color: var(--bad); font-size: 12px; }
.kids { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.kids .note { flex-basis: 100%; }
.tpl-bar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tpl-bar select { border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; background: var(--panel); max-width: 100%; min-width: 0; }
.confirm { margin-top: 6px; border: 1px solid var(--bad); border-radius: 6px; padding: 8px 10px; background: var(--panel); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.confirm p { margin: 0; flex-basis: 100%; }
.btn { border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 5px 10px; cursor: pointer; font-size: 12px; white-space: nowrap; min-height: 32px; }
.btn.pri { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.ci-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ci { display: flex; align-items: flex-start; gap: 8px; justify-content: space-between; }
.ci label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; min-width: 0; overflow-wrap: anywhere; }
.ci input { accent-color: var(--ok); width: 16px; height: 16px; margin-top: 2px; flex: none; }
.chip { font-size: 11px; padding: 2px 6px; border-radius: 4px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.srcx { font-size: 11px; color: var(--muted); font-family: var(--mono); }
.x { background: none; border: 0; color: var(--muted); font-size: 11px; cursor: pointer; padding: 2px 4px; flex: none; }
.x:hover { color: var(--bad); }
.addi { display: flex; gap: 6px; }
.addi input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; background: var(--panel); color: var(--ink); font-size: 13px; }

/* --- This week: 7-day strip ---
   One row of seven days whenever the strip has room, otherwise four days
   per row (4 + 3). Words are never broken in the middle: a kind may only wrap
   at its space ("Response / due").
   The strip's card is its own container, so this follows the strip's real
   width (two-column layout, chat panel open, phone).
   Threshold 580px: seven boxes need room for the longest single word
   ("Response", about 55px in 12px semibold IBM Plex Sans) plus the entry
   padding (8px), box padding (12px) and border (2px), about 77px each, and
   6 gaps of 6px: 7 x 77 + 36 = 575, rounded up to 580. "Response due" itself
   (about 78px) fits on one line once the strip is about 710px wide.
   From 418px up to 580px the strip is always exactly four columns, so the
   days wrap 4 + 3 (never 5 + 2 or 3 + 3 + 1). 418px keeps each box at least
   100px ((418 - 3 gaps x 6px) / 4 = 100: "Response due", about 78px, plus
   22px of padding and border), so "Response due" stays on one line.
   Below 418px the fallback keeps boxes at least 100px and lets them wrap
   onto as many rows as needed (it can never fit five). Today no layout gets
   there: the narrowest wrapped strip is about 443px, and narrower pages use
   the phone rule below, which stacks the days. */
.mc-week { container-type: inline-size; container-name: week; }
.week { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 6px; }
@container week (min-width: 418px) {
  .week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container week (min-width: 580px) {
  .week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
.wd { border: 1px solid var(--line); border-radius: 6px; padding: 6px; min-height: 78px; background: var(--soft); font-size: 12px; min-width: 0; overflow-wrap: normal; word-break: normal; hyphens: none; }
.wd.is-today { border-color: var(--accent); background: var(--accent-soft); }
.wd .dn { font-weight: 600; display: flex; justify-content: space-between; gap: 4px; white-space: nowrap; }
.wd .dn span { font-family: var(--mono); color: var(--muted); font-weight: 400; }
.wd ul { list-style: none; margin: 0; padding: 0; }
/* Each entry: the kind on its own line (never cut off; it can only wrap
   between words, never inside one), then the client name, which alone is
   shortened with "...". */
.pip { display: block; margin-top: 4px; padding: 2px 4px; border-radius: 3px; background: var(--accent-soft); color: var(--accent); text-decoration: none; min-width: 0; }
.pip-kind { display: block; font-weight: 600; overflow-wrap: normal; word-break: normal; hyphens: none; }
.pip-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pip:hover { text-decoration: underline; }
.wd .none { color: var(--muted); display: block; margin-top: 4px; }

/* --- Coming cards --- */
.mc-coming { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.coming p { margin: 0; color: var(--muted); font-size: 13px; }

/* --- Layout. One column (phone order) unless the page itself is wide. --- */
.mc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start;
  grid-template-areas: "today" "tminus" "week" "coming"; }
.mc-today { grid-area: today; }
.mc-tminus { grid-area: tminus; }
.mc-week { grid-area: week; }
.mc-coming { grid-area: coming; }

@container mc (min-width: 900px) {
  .mc-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-areas: "today tminus" "week tminus" "coming coming";
    /* Today keeps its own height and This week sits right under it; any
       extra height from the taller T-minus column goes below This week. */
    grid-template-rows: auto 1fr auto; }
}

/* Narrow page (phone): days stack as rows, day name on the left. */
@container mc (max-width: 620px) {
  .week { grid-template-columns: minmax(0, 1fr); }
  .wd { min-height: 0; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; align-items: start; }
  .wd .dn { justify-content: flex-start; }
  .wd .pip, .wd .none { margin-top: 0; }
  .wd li + li .pip { margin-top: 4px; }
  .item { grid-template-columns: 84px minmax(0, 1fr); }
  /* The chip moves under the name on a phone. */
  .item.tm-toggle { grid-template-columns: 84px minmax(0, 1fr); }
  .tm-toggle .go { grid-column: 2; justify-self: start; }
  .tm-row { flex-wrap: wrap; }
}