/* Structured Collaboration tools — shared look and feel (register D53, D57). Version 1.3.0 (5 Oct 2026: shared status and chart colours; 1.2.0 messages and display; 1.3.0 touch screens).
   Kept identical in every tool's repository, like family.js and org.js; a test fails if a copy differs.
   Change the look here, then copy this file to every tool (see SHARED.md). Loaded after each tool's own styles.css. */
/* ---------- Compact UI (register D53): sentence-case controls, compact start page, side menu ---------- */
body { font-size: 14px; }
.topbar { padding: 6px 20px; border-bottom-color: var(--line-strong); }
.brand-text strong { font-size: 17px; }
.btn, .tab, .tag, .mode-badge, label.f, .add, .grid-table th, .status-pill, select.status, .kpis span, .lbl, .why, .where-grid b, .credit b,
details.history summary, details.numbers summary, figure.run figcaption, .cy-label, .g-row.head { text-transform: none; letter-spacing: 0; }
.btn { font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 4px; border-color: var(--line-strong); background: var(--surface); }
.btn:hover { background: var(--surface-2); color: var(--ink); border-color: var(--petrol); }
.btn.primary { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.btn.primary:hover { background: var(--petrol-dark); color: #fff; }
.btn.ghost { background: transparent; }
.btn.small { font-size: 12px; padding: 3px 9px; }
.btn.quiet { border-color: var(--line); }
label.f { font-size: 12px; font-weight: 600; color: var(--muted); }
.grid-table th { font-size: 12px; font-weight: 600; color: var(--muted); }
.lbl, .cy-label { font-size: 12px; font-weight: 700; }
.mode-badge, .tag { font-size: 11.5px; font-weight: 600; border-radius: 3px; }
.add { font-size: 12.5px; font-weight: 600; }
.site-foot span:first-child { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--muted); }
.icon-btn, .notice, dialog, .toast { border-radius: 4px; }
input, select, textarea { border-radius: 3px; }
.sr { position: absolute; left: -9999px; }
.linkish { all: unset; cursor: pointer; color: var(--petrol); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
/* Start page */
.home { max-width: 1240px; margin: 0 auto; }
.home-head h1 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.1; margin: 0 0 6px; letter-spacing: -.02em; }
.home-head p { margin: 0; max-width: 780px; color: var(--ink-2); font-size: 14px; }
.home-head .formula-line { margin-top: 6px; color: var(--muted); font-size: 12.5px; }
.home-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 20px; }
.home-acts .linkish { margin-left: 6px; }
.home-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.home-list { flex: 999 1 620px; min-width: 0; }
.home-side { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
table.mtable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.mtable th { text-align: left; background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--muted); padding: 7px 14px; }
.mtable td { padding: 8px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.mtable .n { text-align: right; }
.mtable .when { color: var(--muted); white-space: nowrap; }
.mtable .acts { text-align: right; white-space: nowrap; }
.mtable .acts a { font-weight: 600; text-decoration: none; margin-right: 6px; }
.mtable .mname { font-weight: 700; text-decoration: none; color: var(--ink); }
.mtable small { display: block; color: var(--muted); font-size: 12px; }
.empty-list { padding: 22px 16px; }
.empty-list p { margin: 0 0 4px; }
.side-card { background: var(--surface); border: 1px solid var(--line-strong); padding: 12px 14px; }
.side-card p { margin: 0 0 8px; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.side-label { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--label); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.soon-tag { font-size: 10px; color: var(--petrol); border: 1.5px solid var(--petrol); padding: 0 5px; letter-spacing: .08em; }
.where.side-card { margin: 0; padding: 12px 14px; border-top: 1px solid var(--line-strong); }
.where summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--petrol); }
.where[open] summary { margin-bottom: 8px; }
/* Editor: side menu */
.title-row { margin-bottom: 10px; }
.title-input { font-size: 22px; }
.workspace { display: flex; gap: 16px; align-items: flex-start; }
.rail { flex: 0 0 170px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 64px; }
.rail .tab { box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; gap: 6px; width: 100%; text-align: left; font-size: 13px; font-weight: 600; padding: 7px 10px; border: 1px solid transparent; border-radius: 4px; color: var(--ink); }
.rail .tab span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail .tab .count { font-size: 11.5px; color: var(--muted); font-weight: 400; margin: 0; }
.rail .tab:hover { background: var(--surface-2); }
.rail .tab[aria-selected="true"] { background: var(--petrol); color: #fff; border-color: var(--petrol); }
.rail .tab[aria-selected="true"] .count { color: var(--mist, #A9C7C9); }
.work { flex: 1 1 auto; min-width: 0; }
@media (max-width: 760px) {
  .workspace { flex-direction: column; gap: 8px; }
  .rail { position: static; flex: 0 0 auto; flex-direction: row; overflow-x: auto; width: 100%; }
  .rail .tab { width: auto; flex: none; white-space: nowrap; }
  .work { width: 100%; }
  .home-head h1 { font-size: 26px; }
}
@media print { .rail { display: none !important; } .workspace { display: block; } }

/* ---------- Colours that carry meaning (Alex, 5 Oct 2026; validated for colour blindness, light and dark) ----------
   The house palette (paper, ink, petrol) stays for the page itself. Two fixed sets carry meaning in every tool:
   STATUS: good / warning / serious / bad / over, always with a word or icon beside it, never colour alone.
   CHART: eight categorical hues in a fixed order (slot 1 first), for series, tasks, teams and categories; never cycled
   past eight (fold into "Other"). Never use a status colour for a series or a series colour for a status. */
:root {
  --st-good: #1E8E3E; --st-good-pale: #E2F3E6; --st-good-ink: #135C27;
  --st-warn: #F29900; --st-warn-pale: #FDF0D5; --st-warn-ink: #6B4500;
  --st-serious: #EC835A; --st-serious-pale: #FCE7DD; --st-serious-ink: #8A3A17;
  --st-bad: #D93025; --st-bad-pale: #FBE3E1; --st-bad-ink: #8C1D16;
  --st-over: #7B1FA2; --st-over-pale: #F1E3F7; --st-over-ink: #4A1163;
  --st-over-pattern: repeating-linear-gradient(45deg, #7B1FA2 0 6px, #3B0A57 6px 12px);
  --cat-1: #2a78d6; --cat-2: #eb6834; --cat-3: #1baf7a; --cat-4: #eda100;
  --cat-5: #e87ba4; --cat-6: #008300; --cat-7: #4a3aa7; --cat-8: #e34948;
}
body.dark, :root[data-theme="dark"] {
  --st-good-pale: #183A22; --st-good-ink: #8BD8A0; --st-warn-pale: #3D2E0D; --st-warn-ink: #F7C766;
  --st-serious-pale: #40251A; --st-serious-ink: #F2AE92; --st-bad-pale: #431B18; --st-bad-ink: #F19C95;
  --st-over-pale: #33173F; --st-over-ink: #D7A6EA;
  --cat-1: #3987e5; --cat-2: #d95926; --cat-3: #199e70; --cat-4: #c98500;
  --cat-5: #d55181; --cat-6: #2E9E2E; --cat-7: #9085e9; --cat-8: #e66767;
}
/* status classes shared by the tools (RAG selectors, risk bands, pills, notices) */
.rag-green, .pill.ok, .tag.ok { background: var(--st-good-pale); color: var(--st-good-ink); }
.rag-amber, .pill.warn, .tag.warn, .band-medium { background: var(--st-warn-pale); color: var(--st-warn-ink); }
.rag-red, .pill.bad, .tag.bad, .band-high { background: var(--st-bad-pale); color: var(--st-bad-ink); }
.rag-green { border-left: 4px solid var(--st-good); } .rag-amber { border-left: 4px solid var(--st-warn); } .rag-red { border-left: 4px solid var(--st-bad); }
.band-high { box-shadow: inset 4px 0 0 var(--st-bad); } .band-medium { box-shadow: inset 4px 0 0 var(--st-warn); } .band-low { box-shadow: inset 4px 0 0 var(--st-good); }
.st-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.st-dot.good { background: var(--st-good); } .st-dot.warn { background: var(--st-warn); } .st-dot.serious { background: var(--st-serious); } .st-dot.bad { background: var(--st-bad); } .st-dot.over { background: var(--st-over-pattern); }

/* ---------- 1.2.0 (build list item 17, Alex 5 Oct 2026) ----------
   Messages: the user's own words (names of tasks, people, teams, files) are marked .ref: in quotation marks and
   semi-bold, so the tool's wording and the user's content never run together. A problem says what, why and what
   to do (.problem with .what, .why, .todo).
   Personal display: Night or High contrast on this person's screen (family bar, remembered in this browser), the
   same two the CollabForce365 Display page offers. Colours that carry meaning (--st-*, --cat-*) never change. */
.ref { font-weight: 600; }
.problem { border-left: 3px solid var(--st-bad); background: var(--st-bad-pale); padding: 8px 12px; margin: 8px 0; font-size: 13.5px; }
.problem .what { display: block; font-weight: 600; }
.problem .why, .problem .todo { display: block; color: var(--ink-2); }
.problem.warn { border-left-color: var(--st-warn); background: var(--st-warn-pale); }
#family .display { all: unset; cursor: pointer; padding: 0 8px; font-size: 13px; opacity: .85; color: #E3ECEC; }
#family .display:hover, #family .display:focus-visible { opacity: 1; text-decoration: underline; }
html[data-display="night"] { --paper: #151414; --stone: #3D3A37; --ink: #F1ECE4; --ink-2: #D5CEC4; --muted: #A9A39C; --petrol: #2F5D67; --petrol-dark: #1E4B55; --label: #A9C7C9; --mist-pale: #24302F; --surface: #292827; --surface-2: #34312F; --line: #3D3A37; --line-strong: #514D49; --danger-pale: #3A2424; --amber-pale: #3A3020; color-scheme: dark; }
html[data-display="night"] body { background: var(--paper); color: var(--ink); }
html[data-display="night"] a { color: #A9C7C9; }
html[data-display="night"] input, html[data-display="night"] select, html[data-display="night"] textarea { background: #1E1D1C; color: var(--ink); border-color: var(--line-strong); }
html[data-display="contrast"] { --paper: #FFFFFF; --surface: #FFFFFF; --surface-2: #F0F0F0; --stone: #E0E0E0; --line: #1A1A1A; --line-strong: #000000; --ink: #000000; --ink-2: #000000; --muted: #2B2B2B; --petrol: #003A70; --petrol-dark: #002147; --label: #003A70; --mist-pale: #E6EEF6; }
html[data-display="contrast"] a { text-decoration: underline; }
html[data-display="contrast"] .btn, html[data-display="contrast"] input, html[data-display="contrast"] select, html[data-display="contrast"] textarea { border-width: 2px; }
html[data-display="contrast"] :focus-visible { outline: 3px solid #000; outline-offset: 2px; }
/* Night: petrol lightened so text and links in it read on dark panels; elements filled with petrol keep the dark teal */
html[data-display="night"] { --petrol: #8CC0C8; --petrol-dark: #A9C7C9; }
html[data-display="night"] :is(.btn.primary, .st-done, .cascade-strip span.out, .step-label .num, .col-head .num, button.mini.on, .rail .tab[aria-selected="true"], .bn-step.done i, button.tick.on, .team-chip[aria-pressed="true"], .rank-pill.top, .formula .out, .chip.admin, .family) { background: #2F5D67; border-color: #2F5D67; color: #fff; }
html[data-display="night"] .btn.primary:hover { background: #1E4B55; border-color: #1E4B55; color: #fff; }

/* ---------- 1.3.0 (build list, Alex 5 Oct 2026): touch screens and phones ----------
   On a touch screen, controls are at least 40px tall so a finger hits them (Apple advises 44); laptops are unchanged.
   Dense grids (skills, scores) keep their own cell sizes. Tool headers wrap rather than push buttons off the screen. */
@media (pointer: coarse) {
  .btn, .tab, .rail .tab, select, input[type="text"], input[type="date"], input[type="email"], input[type="number"], input[type="search"], input[type="time"] { min-height: 40px; }
  .btn { display: inline-flex; align-items: center; justify-content: center; }
  .family a, .family button { display: inline-flex; align-items: center; min-height: 36px; }
  .linkish { padding: 8px 0; }
}
.topbar { flex-wrap: wrap; row-gap: 6px; }
.topbar-actions { flex-wrap: wrap; }
@media (max-width: 640px) {
  .topbar { padding: 6px 12px; }
  .topbar-actions { width: 100%; justify-content: flex-start; gap: 6px; }
  .home-head h1, .title-input { font-size: 22px; }
}
/* labelled fields in a grid shrink to the screen instead of pushing it wider (phones) */
label.f { min-width: 0; }
label.f > input, label.f > select, label.f > textarea { width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; }