/* Copied verbatim from Sam Workflow (pd-live origin/main 9073b821) static/mission.css. Do not edit: override in styles.css. */
/* Home: Trang's "Mission Control" (scr-home), linked only by home.html, after review.css. Her rules (styles.css
   "Home · Mission Control" and the floating Ask Sam composer), scoped under .mc and body:has(#mc); her token names
   (app.css aliases), and [data-theme="dark"] for dark. Her banner, pulse dot and divider are literal colours in her
   sheet in both themes; they stay literal here, scoped by theme (no token exists for them yet).
   CSP: no inline style, no web fonts. Sam's markup kept for tests and the walk: #answer, #scoreboard, ol.stations
   li.station, li.card.next-card and #lookAt. fb19 (the owner's decisions of 19.10.2026): her banner, tiles, chart and
   cards show her sample summaries (static/fb19/fb-home.css adds what only that round needs: her tabs on their own
   class, the pointer, "More from Sam"); Sam's real Home, every hook above, sits in "More from Sam" (details#mc-more)
   in the same look. A tile's unit follows its figure, as hers (no "US$" before a figure any more: decision b), and
   in dark the tiles, the chart and the cards have no border, as hers (decision d: her shadow line only). */

body:has(#mc) { background: var(--wf-home-bg); }
.mc { max-width: 1120px; margin: 0 auto; }
main.page:has(#mc) { padding-bottom: 170px; }
/* bigger (the meeting of 19.10.2026, evening: "much bigger"): from 901 px Home uses the room beside the rail, up to
   1440 px of content; fb19/fb-home.css scales its parts up to match */
/* (20.10.2026) the 1440 px widening is gone: her centred 1120 px column, as the prototype (fb19/SIZES.md) */

/* ---------- the banner (Sam's answer line) ---------- */
.mcbanner { position: sticky; top: 12px; z-index: 15; display: flex; align-items: center; gap: 0; min-height: 70px;
  box-sizing: border-box; padding: 0 30px 0 26px; border-radius: 22px;
  background: linear-gradient(90deg, #ffffff 0%, #fbfbfb 35%, #f4f4f4 75%, #efefef 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #fff, inset 0 -3px 0 rgba(0, 0, 0, .035), 0 0 0 1px rgba(0, 0, 0, .025),
    0 2px 2px -1px rgba(0, 0, 0, .06), 0 14px 26px -8px rgba(0, 0, 0, .27), 0 4px 10px -6px rgba(0, 0, 0, .12);
  font-size: 15px; letter-spacing: -.15px; color: var(--ink); animation: mcfloat 7s ease-in-out infinite; }
[data-theme="dark"] .mcbanner { background: linear-gradient(90deg, #2a2a2a 0%, #222 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -2px 0 rgba(0, 0, 0, .25), 0 12px 26px -8px rgba(0, 0, 0, .7); }
.mcspark { font-size: 21px; line-height: 1; width: 18px; margin-right: 17px; display: inline-flex; justify-content: center;
  transform: translateY(1px); flex: none; }
.mcbtext { flex: 1; min-width: 0; padding: 12px 0; }
.mcbanner .answer { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink); }
.mcpulse { all: unset; position: relative; flex: none; width: 12px; height: 12px; border-radius: 50%; background: #2b2b2b;
  margin: 0 24px 0 16px; cursor: pointer; }
.mcpulse::before, .mcpulse::after { content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid var(--muted); opacity: 0; }
.mcpulse[aria-pressed="true"]::before, .mcpulse[aria-pressed="true"]::after { animation: mcring 2.8s ease-out infinite; }
.mcpulse[aria-pressed="true"]::after { animation-delay: 1.4s; }
.mcpulse:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.mcbdet { font-size: 12.5px; line-height: 1.4; color: #9a9a9a; border-left: 1px solid #dedede; padding: 0 0 0 25px;
  width: 200px; flex: none; display: flex; align-items: center; min-height: 36px; text-decoration: none; }
.mcbdet:hover { color: var(--muted); }
/* dark (checked with the app's Appearance toggle): her near-black pulse dot vanished into the dark banner and her
   light divider glared; the dot takes the ink and the divider the theme's line, as the rest of the dark page */
[data-theme="dark"] .mcpulse { background: var(--ink); }
[data-theme="dark"] .mcbdet { border-left-color: var(--border2); }
@keyframes mcring { 0% { transform: scale(1); opacity: .6; } 85%, 100% { transform: scale(2.7); opacity: 0; } }
@keyframes mcfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ---------- the title ---------- */
.mctitle { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 40px; }
.mceye { font-size: 10px; letter-spacing: 1.6px; color: var(--faint); font-weight: 600; }
.mc h1 { font-size: 34px; letter-spacing: -1.3px; font-weight: 500; line-height: 1.5; margin: 10px 0 8px; }
.mctitle p, .mchead p { color: var(--muted); font-size: 13px; margin: 0; }
.mc a.mcprimary, .mc a.mcghost { text-decoration: none; }
.mctitle .mcprimary { flex: none; }

/* ---------- tabs and filters ---------- */
.mctool { display: flex; justify-content: space-between; align-items: center; gap: 14px;
  border-bottom: 1px solid var(--border); margin-top: 34px; }
.mctabs { display: flex; gap: 26px; }
.mctabs button { all: unset; cursor: pointer; padding: 15px 0; font-size: 13px; color: var(--faint);
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.mctabs button.sel { color: var(--ink); border-bottom-color: var(--ink); }
.mctabs button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.mcfilters { display: flex; gap: 8px; }
.mcfilters select { background: var(--panel); color: var(--muted); border: 1px solid var(--border2); border-radius: 9px;
  font-size: 12px; padding: 8px 10px; font-family: inherit; }
.mcfilters select[disabled] { opacity: 1; cursor: default; }
/* r-home: her client filter lists Sam's clients, some long: the filters wrap rather than push the page sideways, and
   a card that filters Home brings the tabs back into view below the sticky banner */
.mcfilters { flex-wrap: wrap; min-width: 0; max-width: 100%; }
.mcfilters select { max-width: 100%; }
.mcfilters #mcClient { max-width: 220px; }
.mc .mctool { scroll-margin-top: 96px; }
.mc #homeError { margin: 20px 0 0; }

/* ---------- the KPI row (Sam's scoreboard) ---------- */
.mckpis { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--panel); border-radius: 16px; margin: 26px 0;
  box-shadow: 0 1px 0 var(--border); }
.mckpi { padding: 24px; border-right: 1px solid var(--border); min-width: 0; }
.mckpi:last-child { border-right: 0; }
.mckl { font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }
.mcgo { color: var(--faint); text-decoration: none; flex: none; }
.mcgo::after { content: "↗"; }
.mcgo:hover { color: var(--ink); }
.mckpi strong { display: block; font-size: 36px; letter-spacing: -1.4px; font-weight: 500; line-height: 1.2; margin: 14px 0 10px;
  color: var(--ink); white-space: nowrap; }
.mckpi strong small { font-size: 17px; color: var(--faint); margin-left: 3px; letter-spacing: -.3px; }
.mckpi p { font-size: 11px; color: var(--faint); margin: 0; }
.mckpi .chg { color: var(--ink); margin-right: 5px; }
.mckpis-msg { display: block; }
.mckmsg { padding: 26px 24px; text-align: center; color: var(--faint); font-size: 13px; }
.mckmsg p { margin: 0 0 8px; }
.mckmsg p:last-child { margin-bottom: 0; }
.mckmsg .empty { color: var(--muted); }
.mckmsg strong { color: var(--ink); font-weight: 600; }
.mckmsg .notice { display: inline-block; }
.mckmsg .actions { justify-content: center; }
.mckmsg .station-link a { color: var(--muted); font-size: 12px; }

/* ---------- the chart ---------- */
.mcchart { background: var(--panel); border-radius: 16px; padding: 26px 26px 0; box-shadow: 0 1px 0 var(--border); }
.mchead { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.mc h2 { font-size: 17px; font-weight: 500; letter-spacing: -.3px; margin: 0 0 6px; color: var(--ink); }
.mclegend { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; font-size: 11px;
  color: var(--muted); flex: none; max-width: 100%; }
.mclegend > .mclegend-dot { width: 6px; height: 6px; background: var(--ink); border-radius: 50%; flex: none; }
.mclegend a { color: var(--muted); text-underline-offset: 2px; white-space: nowrap; margin-left: 8px; }
.mclegend a:hover { color: var(--ink); }
.mclegend a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.mclegend button { all: unset; cursor: pointer; margin-left: 12px; font-size: 12px; padding: 8px 12px; border-radius: 9px;
  background: var(--panel); border: 1px solid var(--border2); color: var(--ink); }
.mclegend button:hover { background: var(--panel2); }
.mclegend button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.mcsvg { height: 240px; margin-top: 22px; }
.mcsvg svg { width: 100%; height: 100%; overflow: visible; display: block; }
.mcsvg text { font-size: 10px; fill: var(--faint); font-family: var(--sans); }
.mcsvg .gl { stroke: var(--border); }
.mcsvg .ln { stroke: var(--ink); }
.mcsvg .ar { fill: var(--ink); opacity: .06; }
.mcsvg circle { cursor: pointer; }
.mcfoot { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--border); padding: 16px 0;
  font-size: 11px; color: var(--faint); }
.mcdot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--good); margin-right: 7px;
  vertical-align: 1px; }
.mcdot.off { background: var(--warn); }

/* ---------- the cards ---------- */
.mcacc { margin-top: 40px; padding-bottom: 20px; }
.mccards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 22px 0 0; padding: 0; list-style: none; }
.mc .mccard { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; position: relative;
  background: var(--panel); border-radius: 16px; padding: 24px; box-shadow: 0 1px 0 var(--border); margin: 0; min-width: 0;
  transition: transform .18s ease, box-shadow .18s ease; }
.mc .mccard:hover { transform: translateY(-3px); box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .18); }
.mc .mccard:focus-visible, .mc .mccard:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.mctop { display: flex; justify-content: space-between; align-items: center; }
.mcicon { width: 36px; height: 36px; border-radius: 10px; background: var(--panel2); display: grid; place-items: center;
  font-size: 17px; color: var(--ink); flex: none; }
.mc .mccard h3, .mc .mch3 { display: block; font-size: 15px; font-weight: 500; letter-spacing: -.25px; line-height: 1.45;
  margin: 18px 0 8px; color: var(--ink); }
.mc .mcp { display: block; font-size: 12.5px; line-height: 1.7; color: var(--muted); margin: 0; flex: 1; }
.mcbot { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid var(--border); margin-top: 20px;
  padding-top: 14px; font-size: 11px; color: var(--faint); }
.mcbot b { font-weight: 500; color: var(--muted); }
.mcempty { grid-column: 1 / -1; padding: 50px; text-align: center; color: var(--faint); }

/* the seven stations as her cards: number in her icon box, the count as her tag (warn when a person is needed) */
.mc .station.mccard { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr auto;
  grid-template-areas: "icon tag" "title title" "lines lines" "foot foot"; }
.mc .station .mcicon { grid-area: icon; }
.mc .station-n { all: unset; font-size: 15px; font-weight: 500; color: var(--ink); font-family: var(--sans); }
.mc .station .h3 { grid-area: title; margin: 18px 0 8px; }
.mc .station-count { grid-area: tag; justify-self: end; align-self: center; margin: 0; }
.mc .mclines { grid-area: lines; }
.mc .station-line { font-size: 12.5px; line-height: 1.7; color: var(--muted); margin: 0; }
.mc .station-link.mcbot { grid-area: foot; margin: 20px 0 0; }
.mc .station .station-link a { flex: 1; display: flex; justify-content: space-between; gap: 8px; color: var(--faint);
  text-decoration: none; }
.mc .station .station-link a::after { content: "↗"; color: var(--muted); font-weight: 500; }
.mc .station .station-link a::before { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.mc .station .station-link a:focus-visible { outline: none; }

/* Sam's "Next, not built yet": her card look, a "Not built yet" tag drawn by CSS (the line text is pinned) */
.mc .next-card.card { display: block; background: var(--panel); border-radius: 16px; padding: 24px;
  box-shadow: 0 1px 0 var(--border); margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--muted); cursor: default; }
.mc .next-card::before { content: "Not built yet"; display: table; margin: 0 0 14px; font-size: 10.5px; line-height: 1.5;
  border-radius: 6px; background: var(--badge); color: var(--badge-ink); padding: 4px 8px; letter-spacing: .1px; }

/* ---------- her Ask Sam composer, holding "Things to look at" ---------- */
/* In the page flow, right under the page's title, at every width (the fix round, 19.10.2026). Fixed at the bottom of
   the screen (r-home put it beside the sidebar there), the card (the look-at line and its button, Ask Sam's input
   row, the pills) was about twice her one-row composer's height and sat on Sam's figures on first view: at 1440 x
   900 over "Approved as is" and the safety figure "Missed SARS actions (must be 0)", at 800 to 1024 px over the
   second tile row, at 400 px over about 29% of the screen. In the flow it covers no figure and never the sidebar's
   gear, role switch or Sign out, and the keyboard still reaches it first in the content. */
.mcsam { position: relative; z-index: 1; width: min(720px, 100%); margin: 18px 0 26px; }
.mcsam .fab-card { padding: 11px 10px 10px 16px; }
.mcsam h2.fab-ctx { font-size: 11px; font-weight: 400; letter-spacing: .01em; color: var(--faint); margin: 0 0 4px; }
.mcsam .fab-row { min-height: 34px; }
.mcsam .mclead { flex: 1; min-width: 0; margin: 0; padding: 6px 0; font-size: 15px; line-height: 1.4; color: var(--ink); }
.mcsam .mcnone { color: var(--faint); }
.mcsam .btn.primary { flex: none; border-radius: 999px; padding: 8px 14px; text-decoration: none; }
.mcsam .look-list { margin: 12px 0 0; padding: 0; list-style: none; }
.mcsam .look-list > li { margin: 0; }
.mcsam .fab-sug { display: inline-block; text-decoration: none; animation: sugin .3s ease forwards; }
[data-theme="dark"] .mcsam .fab-sug { background: var(--wf-glass-pill); }
[data-theme="dark"] .mcsam .fab-sug:hover { background: var(--raise); }
/* "+N more" (r-home): her pill as a button, shown only at 600 px or less with the script on; one of its two words */
.mcsam .look-more { display: none; }
.mcsam .look-more .fab-sug { color: var(--ink); font-weight: 500; }
.mcsam .look-more-less, .mcsam.mcopen .look-more-n { display: none; }
.mcsam.mcopen .look-more-less { display: inline; }

/* her work cards: one item each; a long title or line folds after three lines (the dialog shows it whole) */
.mc .mcitem .mch3, .mc .mcitem .mcp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden; overflow-wrap: anywhere; }
.mc .mcitem .mcbot { flex-wrap: wrap; gap: 4px 8px; }
.mcgated { font-size: 12px; color: var(--faint); margin: 16px 0 0; }
.mcgated a { color: var(--muted); }

/* ---------- the dialog and the toast ---------- */
.mc .mcdlg .mcbtns a { text-decoration: none; }
.mc .mcdlg h2 { font-size: 25px; font-weight: 500; letter-spacing: -.6px; line-height: 1.3; margin: 14px 0; }
.mc .mcdlg h2#mcItemTitle2 { margin-top: 0; }
.mc .mcdlg .mcdetail { overflow-wrap: anywhere; }
.mc .mcdlg dl { grid-template-columns: 100px minmax(0, 1fr); }
.mc .mcdlg dd { overflow-wrap: anywhere; min-width: 0; }
.mc .mcdlg .mcbtns form { display: contents; }
.mc .mcdlg .mcnote { font-size: 12px; line-height: 1.5; color: var(--faint); margin: 14px 0 0; }
.mc .mcdlg .mcsay { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: 12px 0 0; }
.mc .mcdlg .mcsay.bad { color: var(--bad); }
.mc .mcdlg button:disabled { opacity: .55; cursor: default; }
.mc .mcdlg .mcprimary:focus-visible, .mc .mcdlg .mcghost:focus-visible, .mc .mcdlg .mcclose:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- narrower screens (her breakpoints) ---------- */
@media (max-width: 1180px) {
  .mccards { grid-template-columns: repeat(2, 1fr); }
  .mctool { flex-direction: column; align-items: flex-start; }
  .mcfilters { padding-bottom: 12px; }
}
@media (max-width: 860px) {
  .mcbdet { display: none; }
}
/* r-home: from 721 to 900 px the sidebar stays open beside a narrow column, so her four tiles take two rows and a
   figure such as "US$ 0,0021" is never cut off at the screen's edge */
@media (min-width: 721px) and (max-width: 900px) {
  .mckpis { grid-template-columns: repeat(2, 1fr); }
  .mckpi:nth-child(2) { border-right: 0; }
  .mckpi:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}
@media (max-width: 700px) {
  .mclegend { justify-content: flex-start; }
  .mckpis { grid-template-columns: repeat(2, 1fr); }
  .mckpi { padding: 20px 16px; }
  .mckpi:nth-child(2) { border-right: 0; }
  .mckpi:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .mckpi strong { font-size: 30px; }
  .mckpi strong small { font-size: 14px; }
  .mccards { grid-template-columns: 1fr; }
  .mc h1 { font-size: 28px; }
  .mcbanner { font-size: 15px; padding: 16px; }
  .mcbtext { padding: 0; }
  .mcfilters { width: 100%; }
  .mcfilters select { flex: 1; min-width: 0; }
  .mchead { flex-wrap: wrap; }
  .mcfoot { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .mcsam .mclead { font-size: 13.5px; }
  .mcsam .btn.primary { padding: 7px 12px; }
  /* every "Things to look at" line on a phone (r-home): her pills wrap; with the script on, the first one shows with
     "+N more", which unfolds the others in place (a capped list with a thin visible scroll) and folds them again */
  .mcsam .look-list { justify-content: flex-start; margin-top: 10px; max-height: 122px; overflow-y: auto; padding: 4px;
    scrollbar-width: thin; }
  .mcsam .look-list::-webkit-scrollbar { display: block; width: 6px; }
  .mcsam .look-list::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
  .mcsam .look-list > li { max-width: 100%; min-width: 0; }
  .mcsam .look-list .fab-sug { box-sizing: border-box; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .mcsam.mcfold .look-more { display: block; }
  .mcsam.mcfold:not(.mcopen) .look-list > li:not(:first-child):not(.look-more) { display: none; }
}