/* MCF-HOUSE-STYLE:BEGIN v5 2026-09-28 */
/* =====================================================================
   THE MCF HOUSE STYLE - the one shared block. OPS-014, 25 September 2026.
   The rules in plain English: docs/MCF_House_Style.md.

   THIS FILE IS THE ONLY SOURCE. The CRM, Deal Desk and Studio each carry
   an exact copy of everything between the BEGIN and END lines, and
   06-tests/checkhousestyle.mjs refuses a deploy if any copy differs.
   Change it here, then copy it into all three - never edit a copy.

   Everything is prefixed mcf- so it can sit beside a system's old styles
   while that system is rolled over, without either disturbing the other.
   No backticks, no dollar-brace and no backslashes anywhere in this file:
   it is pasted inside the Workers' page template literals, where a
   backslash is eaten on the way through (so the folded More below uses the
   triangle characters themselves, not a CSS escape).

   VERSION 2, 25 September 2026 (Studio build 269). What Studio's first
   pages on the house style had added for themselves, moved in here so the
   CRM and Deal Desk get the same parts rather than drawing their own: tab
   buttons, the bar's name and Log out, count pills, the settings page
   layout, the folded More, the save bar and the day pills. And one fix:
   ".mcf a" used to outrank ".mcf-btn-primary", which would have drawn a
   blue button's words in blue on blue inside any .mcf page. The link rule
   is now written with :where(), which counts for nothing, so every button
   class wins over it.
   VERSION 4, 26 September 2026: the chart's parts (mcf-chart-*), for the
   one chart in 08-house-style/mcf-chart.js - Deal Desk's and Studio's home
   pages first (DD-120, STU-078).
   VERSION 5, 28 September 2026 (CRM-053 step C2): the bar's search box
   (mcf-bar-search), and the signed-in name giving way first on a narrower
   window, since the bar now carries eight items. Martin: "it must show the
   same in all 3 systems. The idea is they all look like one system". The
   bar itself is written once, in 08-house-style/mcf-bar.html, and
   06-tests/checkbar.mjs holds every copy to it.
   ===================================================================== */
:root{
  /* Colour. White and soft grey carry every screen. Steel blue marks ONLY
     what can be clicked. Green, amber and red only ever carry meaning. */
  --mcf-blue:#2F5FB3;        /* buttons, links, the tab you are on */
  --mcf-blue-hover:#274F96;
  --mcf-blue-tint:#EAF0FA;   /* a selected row, the avatar circle */
  --mcf-ink:#1D1D1F;         /* headings and text */
  --mcf-grey:#6E6E73;        /* supporting text - the lightest text allowed */
  --mcf-grey-strong:#48484D; /* a neutral pill's text */
  --mcf-page:#F5F5F7;        /* behind everything */
  --mcf-card:#FFFFFF;        /* cards and tables */
  --mcf-fill:#EFEFF2;        /* a neutral pill, an empty bar, a segmented control */
  --mcf-line:#E5E5EA;        /* dividers and borders */
  --mcf-line-soft:#F0F0F3;   /* rows inside a card */
  --mcf-control:#D2D2D7;     /* an input's or a quiet button's edge, a switch that is off */
  --mcf-icon-off:#AEAEB2;    /* an icon for something not needed - never text */
  --mcf-ok:#1F8A4C;      --mcf-ok-text:#1B6B3A;   --mcf-ok-tint:#E3F4E8;    /* fine, done, active */
  --mcf-wait:#B26B00;    --mcf-wait-text:#7A4B00; --mcf-wait-tint:#FFF1D6;  /* paused, waiting, due */
  --mcf-bad:#C62828;     --mcf-bad-text:#9B1C1C;  --mcf-bad-tint:#FDE7E7; --mcf-bad-line:#F2C4C4; /* a problem */
  /* v5: a dark layer over a video, or behind a dialog - the recorder's
     countdown, timer and teleprompter, and the shade behind a pop-up. */
  --mcf-scrim:rgba(0,0,0,.6);   --mcf-on-scrim-soft:rgba(255,255,255,.45);

  /* Type. Instrument Sans; figures always line up in columns. A fixed
     scale - nothing in between. */
  --mcf-font:'Instrument Sans',Helvetica,Arial,sans-serif;
  --mcf-mono:ui-monospace,Menlo,Consolas,monospace;
  --mcf-size-caption:12px;   /* labels under a figure, table headings */
  --mcf-size-legal:9px;      /* the legal small print at the foot of an email - never on a screen (v3) */
  --mcf-size-small:13px;     /* supporting text, pills */
  --mcf-size-table:14px;     /* table rows, key-value rows */
  --mcf-size-body:15px;      /* reading text, buttons */
  --mcf-size-heading:18px;   /* a card's heading */
  --mcf-size-section:22px;   /* a section of a page */
  --mcf-size-title:28px;     /* a record's name, a figure that matters */
  --mcf-size-page:34px;      /* the page heading */
  --mcf-size-display:48px;   /* the website and the Home page only */

  /* Shape and space. */
  --mcf-r-card:16px;  --mcf-r-inner:12px;  --mcf-r-control:10px;  --mcf-r-pill:999px;
  --mcf-s1:4px; --mcf-s2:8px; --mcf-s3:12px; --mcf-s4:16px; --mcf-s5:24px; --mcf-s6:32px; --mcf-s7:40px; --mcf-s8:48px;
  --mcf-bar-h:60px;   /* the shared top bar */
  --mcf-tabs-h:48px;  /* an area's own row of tabs */
}

/* ---- the page ---- */
.mcf{font-family:var(--mcf-font);font-size:var(--mcf-size-body);color:var(--mcf-ink);background:var(--mcf-page);-webkit-font-smoothing:antialiased}
/* :where() so a link inside .mcf never outranks a button class (v2). */
:where(.mcf) a{color:var(--mcf-blue);text-decoration:none}
:where(.mcf) a:hover{color:var(--mcf-blue-hover)}
.mcf-num{font-variant-numeric:tabular-nums}
.mcf-page-title{margin:0;font-size:var(--mcf-size-page);font-weight:700;letter-spacing:-.02em}
.mcf-muted{color:var(--mcf-grey)}

/* ---- the shared top bar, the same in all three systems ---- */
.mcf-bar{height:var(--mcf-bar-h);background:var(--mcf-card);border-bottom:1px solid var(--mcf-line);display:flex;align-items:center;gap:36px;padding:0 var(--mcf-s7);flex-shrink:0}
.mcf-bar a,.mcf-tabs a{text-decoration:none}
.mcf-bar-mark{font-size:20px;font-weight:700;letter-spacing:.04em;color:var(--mcf-ink);flex-shrink:0}
.mcf-bar-nav{display:flex;gap:28px;height:100%;align-items:stretch;font-size:var(--mcf-size-body);flex-shrink:0}
.mcf-bar-nav a{display:flex;align-items:center;color:var(--mcf-grey);border-bottom:2px solid transparent}
.mcf-bar-nav a[aria-current="page"]{color:var(--mcf-blue);font-weight:600;border-bottom-color:var(--mcf-blue)}
/* The right-hand end (v2): a spacer, who is signed in, and Log out. The
   name gives way first - it shortens with an ellipsis rather than being
   cut off at the edge - and Log out never does. */
.mcf-bar-grow{flex:1 1 0;min-width:0}
.mcf-bar-me{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--mcf-size-small);color:var(--mcf-grey)}
.mcf-bar-me b{color:var(--mcf-ink);font-weight:600}
.mcf-bar-out{flex-shrink:0;font-size:var(--mcf-size-small);white-space:nowrap}
/* The search box (v5): find any company from any screen of any system. */
.mcf-bar-search{flex:0 1 240px;min-width:140px;margin:0}
.mcf-bar-search input{width:100%;height:34px;box-sizing:border-box;border:1px solid var(--mcf-control);border-radius:var(--mcf-r-pill);padding:0 var(--mcf-s4);font-family:inherit;font-size:var(--mcf-size-small);background:var(--mcf-page);color:var(--mcf-ink)}
.mcf-bar-search input:focus{outline:none;border-color:var(--mcf-blue);background:var(--mcf-card)}
@media (max-width:1440px){.mcf-bar-me{display:none}}
/* An area's row of tabs, indented to sit under the first item of the bar.
   A tab is a link when it opens another page and a button when it switches
   a screen on this one; both look the same. */
.mcf-tabs{height:var(--mcf-tabs-h);background:var(--mcf-card);border-bottom:1px solid var(--mcf-line);display:flex;align-items:stretch;gap:26px;padding:0 var(--mcf-s7) 0 118px;font-size:var(--mcf-size-table);flex-shrink:0}
.mcf-tabs a,.mcf-tabs button{display:flex;align-items:center;gap:var(--mcf-s2);color:var(--mcf-grey);background:none;border:none;border-bottom:2px solid transparent;font-family:inherit;font-size:inherit;padding:0;cursor:pointer;white-space:nowrap}
.mcf-tabs a:hover,.mcf-tabs button:hover{color:var(--mcf-ink)}
.mcf-tabs a[aria-current="page"],.mcf-tabs button[aria-current="page"]{color:var(--mcf-ink);font-weight:600;border-bottom-color:var(--mcf-ink)}
/* Tabs inside a page, such as the groups of a settings page (v2). */
.mcf-subtabs{display:flex;gap:var(--mcf-s5);border-bottom:1px solid var(--mcf-line);margin:var(--mcf-s4) 0 var(--mcf-s4);overflow-x:auto}
.mcf-subtabs button{background:none;border:none;border-bottom:2px solid transparent;padding:var(--mcf-s2) 0 10px;font-family:inherit;font-size:var(--mcf-size-body);color:var(--mcf-grey);cursor:pointer;white-space:nowrap}
.mcf-subtabs button:hover{color:var(--mcf-ink)}
.mcf-subtabs button[aria-current="page"]{color:var(--mcf-ink);font-weight:600;border-bottom-color:var(--mcf-ink)}
/* A count beside a tab is a flag, so it carries meaning: red for "needs
   you", amber for "waiting". Empty means nothing to say, and it vanishes. */
.mcf-count{font-size:var(--mcf-size-caption);font-weight:600;min-width:20px;text-align:center;padding:1px 7px;border-radius:var(--mcf-r-pill);background:var(--mcf-bad-tint);color:var(--mcf-bad-text);font-variant-numeric:tabular-nums}
.mcf-count-wait{background:var(--mcf-wait-tint);color:var(--mcf-wait-text)}
.mcf-count:empty{display:none}
/* Narrower windows: the bar and the tabs close up before anything is cut
   off, and a row of tabs too long for the window scrolls sideways. */
.mcf-tabs{overflow-x:auto;overflow-y:hidden}
@media (max-width:1180px){
  .mcf-bar{gap:var(--mcf-s5)}
  .mcf-bar-nav{gap:var(--mcf-s5)}
  .mcf-tabs{padding-left:var(--mcf-s7);gap:var(--mcf-s5)}
}
@media (max-width:900px){
  .mcf-bar{gap:var(--mcf-s4);padding:0 var(--mcf-s4);overflow-x:auto}
  .mcf-bar-nav{gap:var(--mcf-s4)}
  .mcf-bar-me{display:none}
  .mcf-tabs{padding:0 var(--mcf-s4);gap:var(--mcf-s4);overflow-x:auto}
}

/* ---- cards and rows ---- */
.mcf-card{background:var(--mcf-card);border-radius:var(--mcf-r-card);padding:var(--mcf-s5) 28px}
.mcf-card-h{margin:0 0 14px;font-size:var(--mcf-size-heading);font-weight:600}
.mcf-row{display:flex;justify-content:space-between;gap:var(--mcf-s4);padding:11px 0;border-bottom:1px solid var(--mcf-line-soft);font-size:var(--mcf-size-table)}
.mcf-row:last-child{border-bottom:none}
.mcf-row>:first-child{color:var(--mcf-grey)}
.mcf-table{width:100%;border-collapse:collapse;font-size:var(--mcf-size-table);font-variant-numeric:tabular-nums}
.mcf-table th{text-align:left;font-size:var(--mcf-size-caption);font-weight:500;color:var(--mcf-grey);padding:14px 0 10px;border-bottom:1px solid var(--mcf-line)}
.mcf-table td{padding:14px 0;border-bottom:1px solid var(--mcf-line-soft)}
.mcf-table tr:last-child td{border-bottom:none}

/* ---- buttons: one blue button per screen, everything else quieter ---- */
.mcf-btn{font-family:inherit;font-size:var(--mcf-size-body);font-weight:500;border-radius:var(--mcf-r-pill);padding:10px 21px;border:1px solid var(--mcf-control);background:var(--mcf-card);color:var(--mcf-ink);cursor:pointer}
a.mcf-btn{display:inline-block;text-decoration:none}
.mcf-btn:hover{background:var(--mcf-page)}
.mcf-btn-primary{background:var(--mcf-blue);border-color:var(--mcf-blue);color:#FFFFFF}
.mcf-btn-primary:hover{background:var(--mcf-blue-hover);border-color:var(--mcf-blue-hover);color:#FFFFFF}
.mcf-btn-danger{color:var(--mcf-bad-text);border-color:var(--mcf-bad-line)}
.mcf-btn:focus-visible,.mcf-switch:focus-visible,.mcf-field input:focus-visible,.mcf-field select:focus-visible{outline:2px solid var(--mcf-blue);outline-offset:2px}

/* ---- pills: state at a glance ---- */
.mcf-pill{display:inline-flex;align-items:center;gap:6px;font-size:var(--mcf-size-small);font-weight:500;padding:3px 10px;border-radius:var(--mcf-r-pill);background:var(--mcf-fill);color:var(--mcf-grey-strong);white-space:nowrap}
.mcf-pill-ok{background:var(--mcf-ok-tint);color:var(--mcf-ok-text)}
.mcf-pill-wait{background:var(--mcf-wait-tint);color:var(--mcf-wait-text)}
.mcf-pill-bad{background:var(--mcf-bad-tint);color:var(--mcf-bad-text)}

/* ---- fields ---- */
.mcf-field{display:flex;flex-direction:column;gap:6px}
.mcf-field label{font-size:var(--mcf-size-small);font-weight:500}
.mcf-field input,.mcf-field select,.mcf-field textarea{font-family:inherit;font-size:var(--mcf-size-body);padding:10px 12px;border:1px solid var(--mcf-control);border-radius:var(--mcf-r-control);color:var(--mcf-ink);background:var(--mcf-card)}
.mcf-hint{font-size:var(--mcf-size-small);color:var(--mcf-grey)}

/* ---- settings: one card per setting - title, one line, the switch on the right ---- */
.mcf-set{background:var(--mcf-card);border-radius:var(--mcf-r-card);padding:18px 22px;display:flex;align-items:center;gap:var(--mcf-s4)}
.mcf-set-text{flex-grow:1;display:flex;flex-direction:column;gap:3px}
.mcf-set-title{font-size:var(--mcf-size-body);font-weight:600}
.mcf-set-line{font-size:var(--mcf-size-small);color:var(--mcf-grey)}
.mcf-set-list{display:flex;flex-direction:column;gap:var(--mcf-s3);max-width:760px}
.mcf-switch{width:44px;height:26px;flex-shrink:0;border-radius:var(--mcf-r-pill);border:none;background:var(--mcf-control);position:relative;cursor:pointer;padding:0}
.mcf-switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#FFFFFF;transition:left .15s ease}
.mcf-switch[aria-checked="true"]{background:var(--mcf-blue)}
.mcf-switch[aria-checked="true"]::after{left:21px}
@media (prefers-reduced-motion:reduce){.mcf-switch::after{transition:none}}

/* ---- the settings page (v2) ----
   The whole page, one column no wider than is comfortable to read, with
   room at the bottom so the save bar never sits over the last card. A card
   that needs more than a switch stacks: .mcf-set-col, its title row as
   .mcf-set-row, two boxes side by side as .mcf-set-two, buttons as
   .mcf-set-acts. "Saved" has a line of its own under the tabs, so it never
   floats beside the heading. */
.mcf-set-page{max-width:760px;margin:0 auto;padding-bottom:96px}
.mcf-set-intro{font-size:var(--mcf-size-table);color:var(--mcf-grey);line-height:1.6;margin:0}
.mcf-status{min-height:22px;margin:var(--mcf-s1) 0 var(--mcf-s3);font-size:var(--mcf-size-small);color:var(--mcf-grey)}
.mcf-status-ok{color:var(--mcf-ok-text)}
.mcf-status-bad{color:var(--mcf-bad-text)}
.mcf-set-list .mcf-set{min-width:0}
.mcf-set-col{flex-direction:column;align-items:stretch;gap:var(--mcf-s3)}
.mcf-set-row{display:flex;align-items:center;gap:var(--mcf-s4)}
.mcf-set-col .mcf-field{margin:0}
.mcf-set-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--mcf-s3)}
.mcf-set-acts{display:flex;gap:var(--mcf-s2);flex-wrap:wrap;align-items:center}
.mcf-set-sub{font-size:var(--mcf-size-body);font-weight:600;margin-top:var(--mcf-s2)}
@media (max-width:640px){.mcf-set-two{grid-template-columns:1fr}}
/* Anything rarely touched, folded away at the bottom of its tab. */
.mcf-more>summary{list-style:none;cursor:pointer;font-size:var(--mcf-size-body);font-weight:500;color:var(--mcf-blue);padding:var(--mcf-s2) 0;user-select:none}
.mcf-more>summary::-webkit-details-marker{display:none}
.mcf-more>summary::before{content:"▸";display:inline-block;width:1.2em;color:var(--mcf-grey)}
.mcf-more[open]>summary::before{content:"▾"}
.mcf-more>summary:hover{color:var(--mcf-blue-hover)}
.mcf-more>:not(summary){margin-top:var(--mcf-s3)}
/* Only where a list is built up a piece at a time: the one Save button. */
.mcf-savebar{position:sticky;bottom:var(--mcf-s4);z-index:5;margin-top:var(--mcf-s5);background:var(--mcf-card);border-radius:var(--mcf-r-card);border:1px solid var(--mcf-line);padding:var(--mcf-s3) var(--mcf-s3) var(--mcf-s3) 22px;display:flex;align-items:center;gap:var(--mcf-s4);font-size:var(--mcf-size-table)}
.mcf-savebar-text{flex:1}
/* A choice of several, such as the working days: pills that fill in. */
.mcf-days{display:flex;flex-wrap:wrap;gap:6px}
.mcf-days label{position:relative;display:inline-flex;align-items:center;border:1px solid var(--mcf-control);border-radius:var(--mcf-r-pill);padding:5px 12px;margin:0;font-size:var(--mcf-size-small);font-weight:500;color:var(--mcf-grey);background:var(--mcf-card);cursor:pointer}
.mcf-days input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.mcf-days label:has(input:checked){background:var(--mcf-ink);border-color:var(--mcf-ink);color:#FFFFFF}
.mcf-days label:has(input:focus-visible){outline:2px solid var(--mcf-blue);outline-offset:2px}
/* ---- the chart (v4, 26 September 2026): 08-house-style/mcf-chart.js draws
   it, the same on every system's home page. Line colours are house tokens,
   given by each system for what its figures mean. ---- */
.mcf-chart-per{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--mcf-s2)}
.mcf-chart-per button{font-family:inherit;font-size:var(--mcf-size-small);padding:5px 12px;border-radius:var(--mcf-r-pill);border:1px solid var(--mcf-control);background:var(--mcf-card);color:var(--mcf-ink);cursor:pointer}
.mcf-chart-per button[aria-pressed="true"]{background:var(--mcf-blue);border-color:var(--mcf-blue);color:#FFFFFF}
.mcf-chart-per button:focus-visible{outline:2px solid var(--mcf-blue);outline-offset:2px}
.mcf-chart-note{font-size:var(--mcf-size-small);color:var(--mcf-grey);margin:0}
.mcf-chart-figs{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--mcf-s2);margin:var(--mcf-s3) 0}
.mcf-chart-fig{font-family:inherit;text-align:left;cursor:pointer;border-radius:var(--mcf-r-inner);padding:12px 12px 10px;border:1px solid var(--mcf-line);background:var(--mcf-card);color:var(--mcf-ink);display:flex;flex-direction:column;gap:2px}
.mcf-chart-fig[aria-pressed="false"]{color:var(--mcf-grey)}
.mcf-chart-fig:focus-visible{outline:2px solid var(--mcf-blue);outline-offset:2px}
.mcf-chart-fl{font-size:var(--mcf-size-caption);font-weight:500;line-height:1.3}
.mcf-chart-fv{font-size:var(--mcf-size-section);font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
.mcf-chart-fs{font-size:var(--mcf-size-caption);color:var(--mcf-grey)}
.mcf-chart-top{display:flex;justify-content:space-between;gap:var(--mcf-s3);flex-wrap:wrap;align-items:center;margin-bottom:6px}
.mcf-chart-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:var(--mcf-size-small);align-items:center}
.mcf-chart-key{display:inline-flex;align-items:center;gap:6px}
.mcf-chart-sw{width:14px;height:3px;display:inline-block}
.mcf-chart-cmp{font-size:var(--mcf-size-small);display:inline-flex;gap:6px;align-items:center;cursor:pointer}
.mcf-chart-svg{width:100%;height:auto;display:block;color:var(--mcf-ink)}
/* MCF-HOUSE-STYLE:END */