/* Copied verbatim from Sam Workflow (pd-live origin/main 9073b821) static/fb19/fb-home.css. Do not edit: override in styles.css. */
/* Home on the prototype's sample summaries (fb19 fb-home; the owner's decisions c and d, 19.10.2026), linked by
   templates/fb19/fb-home_head.html after mission.css. Her Mission Control rules are mission.css's (.mcbanner,
   .mctitle, .mctool, .mcfilters, .mckpis, .mcchart, .mcacc, .mccards, .mccard); these are the parts only this
   round adds: her tabs on their own class (Sam's real tabs keep .mctabs and data-mcmode for their scripts and
   tests), the pointer under the banner, "More from Sam" (details#mc-more) and the answer line inside it, her tile
   units and her chart's place under the sticky banner. Tokens only, so light and dark both follow the theme; no
   inline style (CSP). */

/* ---------- her tabs (as .mctabs in mission.css) ---------- */
.mc .fbh-tabs { display: flex; gap: 26px; }
.mc .fbh-acc { scroll-margin-top: 88px; }   /* r11: a tab brings its section into view, clear of the sticky banner */
.mc .fbh-tabs button { all: unset; cursor: pointer; padding: 15px 0; font-size: 13px; color: var(--faint);
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.mc .fbh-tabs button.sel { color: var(--ink); border-bottom-color: var(--ink); }
.mc .fbh-tabs button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- the banner's hours line and the pointer under it ---------- */
.mc .fbh-line { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink); }
.mc .fbh-hrs { font-variant-numeric: tabular-nums; }
.mc .fbh-point { margin: 16px 0 0; }
.mc .fbh-pointer { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px;
  background: var(--warn-soft); color: var(--warn); font-size: 12px; line-height: 1.3; text-decoration: none; }
.mc .fbh-pointer:hover { filter: brightness(.97); }
.mc .fbh-pointer:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.mc .fbh-pointer-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.mc .fbh-pointer-go { font-size: 11px; }
.mc .fbh-point + .mctitle { margin-top: 22px; }

/* ---------- her KPI tiles: the unit after the figure, the change line as hers ---------- */
/* her figure keeps the body's line height (proto 01: 160 px tiles); the unit about 3 px after it, as hers */
.mc .fbh-kpis .mckpi strong { line-height: 1.5; word-spacing: -3px; }
.mc .fbh-kpis .mckpi strong small { margin: 0; word-spacing: normal; letter-spacing: inherit; }
/* her tile's ↗ is a plain span in the label, so it takes the label's muted colour (r13 size lane: 119, not 155) */
.mc .fbh-kpis .mckl .mcgo { color: inherit; }
.mc .fbh-kpis .mckpi .chg { margin-right: 1px; }
.mc .fbh-kpis .mcgo:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 3px; }

/* ---------- her chart: below the sticky banner when a link lands on it ---------- */
.mc #mcVolume { scroll-margin-top: 104px; }
.mc .fbh-toggle { white-space: nowrap; }

/* ---------- her cards ---------- */
.mc .fbh-card .mch3, .mc .fbh-group .mch3 { overflow-wrap: anywhere; }
.mc .fbh-card .mcbot, .mc .fbh-group .mcbot { flex-wrap: wrap; gap: 4px 8px; }
.mc .fbh-dlg .mcdetail { overflow-wrap: anywhere; }

/* ---------- "More from Sam": Sam's real Home, folded at load ---------- */
.mc .fbh-more { margin: 40px 0 0; border-top: 1px solid var(--border); }
.mc .fbh-more > summary { list-style: none; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 24px 2px 22px; cursor: pointer; border-radius: 12px; }
.mc .fbh-more > summary::-webkit-details-marker { display: none; }
.mc .fbh-more > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.mc .fbh-more-t { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mc .fbh-more-h { font-size: 17px; font-weight: 500; letter-spacing: -.3px; color: var(--ink); }
.mc .fbh-more-sub { font-size: 13px; line-height: 1.5; color: var(--muted); }
.mc .fbh-more-chev { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--panel);
  box-shadow: 0 0 0 1px var(--border2); display: grid; place-items: center; color: var(--muted); }
.mc .fbh-more-chev::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .18s ease; }
.mc .fbh-more[open] .fbh-more-chev::before { transform: translateY(2px) rotate(225deg); }
.mc .fbh-more > summary:hover .fbh-more-chev { background: var(--panel2); color: var(--ink); }
.mc .fbh-more-body { padding: 0 0 8px; }
/* Folded, it lays nothing out: a browser may keep boxes for a closed details' content, and a script that measures
   (the toast's place over the composer) would then count "Things to look at" as on screen */
.mc .fbh-more:not([open]) > .fbh-more-body { display: none; }
.mc .fbh-more-body > .mcsam { margin-top: 4px; }
.mc .fbh-more-body > .mctool { margin-top: 26px; }
.mc .fbh-answer { margin: 0 0 6px; }
.mc .fbh-answer .answer { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.mc #lookAt { scroll-margin-top: 104px; }
/* Home's Ask Sam is her floating composer (templates/fb19/fb-home-ask.html); the row restore/ask.js also adds to
   "Things to look at" would be a second box for the same question, so it stays out of sight here. */
.mc #lookAt .ask-row { display: none; }

/* ---------- the top bar only grows (a colleague, 20.10.2026: "we just wanted the top bar to be bigger"; the rest of
   Home is back at her sizes, then the page's size scale in fb19/SIZES.md) ---------- */
/* the banner: her bar a quarter bigger from 901 px (the meeting of 19.10.2026, evening), the one part that grows */
@media (min-width: 901px) {
  .mc .mcbanner { min-height: 84px; padding: 0 36px 0 32px; border-radius: 26px; font-size: 18px; }
  .mc .mcspark { width: 22px; margin-right: 20px; font-size: 25px; }
  .mc .mcspark svg { width: 21px; height: 21px; }
  .mc .fbh-line, .mc .mcbanner .answer { font-size: 18px; }
  .mc .mcpulse { width: 14px; height: 14px; margin: 0 28px 0 18px; }
  .mc .mcbdet { width: 240px; padding-left: 28px; font-size: 14px; }
}

/* r13 protofix: the client filter is as wide as hers (151 px, "All clients" to the arrow); a longer client name is
   cut inside the closed select, never widening the row (her filters start at x 923 at 1512 px) */
@media (min-width: 701px) {
  .mc .mcfilters #fbhClient { width: 151px; text-overflow: ellipsis; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .mc .fbh-more-chev::before { transition: none; }
}

/* ---------- narrower screens (her breakpoints) ---------- */
@media (max-width: 700px) {
  .mc .fbh-tabs { gap: 22px; }
  /* a filter never cuts its words ("All workflo"): one too many for the row goes to the next line */
  .mc .mcfilters select { flex: 1 1 auto; min-width: fit-content; }
  .mc .fbh-more > summary { padding: 20px 0 18px; }
  .mc .fbh-more-sub { font-size: 12.5px; }
}

/* ---------- r9: what is not pressable does not answer the pointer (her prototype v2) ---------- */
/* The banner's right line and each tile's ↗ are inert on this Home (spans, not links); her sheet gives them no hover,
   so the pointer passes through them (they keep their colour, never turning darker as if they opened something). A
   link in their place keeps mission.css's hover. Her tabs have no hover colour either (r9 dropped this sheet's muted
   hover): the chosen one is ink, the others stay faint. */
.mc span.mcbdet, .mc span.mcgo { pointer-events: none; }