:root {
  /* The structuredcollaboration.com petrol accent, like every tool there (register D22, D37) */
  color-scheme: light;
  --bg: #F7F3EC;          /* Paper */
  --surface: #FFFFFF;
  --surface-2: #F1EADF;
  --border: #E9DFCF;      /* Stone */
  --text: #201E1D;        /* Ink */
  --text-2: #292827;      /* Charcoal */
  --muted: #706A64;       /* Muted */
  --label: #4F7A80;       /* Label teal */
  --accent: #1E4B55;      /* Petrol */
  --accent-dark: #13343B; /* Petrol dark */
  --accent-ink: #FFFFFF;
  --accent-soft: #E3ECEC;
  --danger: #9b1c1c;
  --danger-soft: #fbeaea;
  --ok-soft: #EEF0E2;
  /* Chart series: validated for colour-blind separation */
  --series-1: #A23A4E;
  --series-2: #00979A;
  --series-3: #CC8A10;
  --series-4: #5B66C9;
  --series-5: #7E8A2A;
  --series-6: #9D735B;
  --grid: #E9DFCF;
  --radius: 0;
  --font: Arial, Helvetica, sans-serif;
  --serif: Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.55 var(--font); }
a { color: var(--accent); }
h1, h2, h3, h4 { line-height: 1.12; margin: 1.4em 0 .5em; font-family: var(--serif); font-weight: 400; }
h1 { letter-spacing: -0.03em; }
h2 { letter-spacing: -0.02em; }
h1 { font-size: 2.3rem; margin-top: .6em; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1rem; color: var(--text-2); }
p { margin: .5em 0 1em; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
main.wrap { padding-bottom: 48px; min-height: 60vh; }
.muted { color: var(--muted); font-weight: 400; }
.lead { font-size: 1.15rem; color: var(--text-2); max-width: 46em; }
.note { color: var(--muted); font-size: .92rem; }
.narrow { max-width: 620px; }
.prose { max-width: 720px; }
.crumbs { font-size: .9rem; color: var(--muted); margin-top: 20px; }
.crumbs a { color: var(--muted); }
.panel-head .tabs, .report-head .tabs { border-radius: 0; }

/* header */
.site-header { background: var(--bg); border-bottom: 1px solid var(--border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 16px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-family: var(--serif); font-size: 1.3rem; letter-spacing: -0.02em; }
.brand em { font-style: normal; font-family: var(--font); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--label); margin-left: 4px; }
.brand-mark { display: none; }
.nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.nav a { text-decoration: none; color: var(--text-2); font-size: .95rem; }
.nav a.active { color: var(--text); font-weight: 600; }
.demo-banner { background: var(--border); color: var(--text-2); font-size: .9rem; text-align: center; padding: 8px 16px; }
.site-footer { border-top: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: .9rem; }
.footer-inner { display: flex; gap: 24px; padding: 20px 16px; flex-wrap: wrap; }
.footer-inner a { color: var(--muted); }

/* buttons & forms */
.btn { display: inline-block; background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); border-radius: 0; padding: 15px 22px; font: 800 .8rem/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-secondary { background: transparent; color: var(--accent); border: 2px solid var(--accent); }
.btn-secondary:hover { background: var(--accent-soft); color: var(--accent-dark); }
.btn-small { padding: 10px 16px; font-size: .74rem; }
.nav .btn { color: var(--accent-ink); }
button.link { background: none; border: 0; color: var(--accent); font: inherit; cursor: pointer; padding: 0; }
.nav button.link { color: var(--text-2); }
form.inline { display: inline; }
.form { display: grid; gap: 14px; margin: 16px 0; }
.form label { display: grid; gap: 5px; font-weight: 600; font-size: .95rem; }
.form label.check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }
.form input:not([type=checkbox]):not([type=radio]), .form select, .form textarea, input.copy {
  font: 1rem var(--font); padding: 10px 12px; border: 1px solid var(--border); border-radius: 0; background: var(--surface); color: var(--text); width: 100%;
}
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-inline { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.form-inline label { min-width: 180px; }
.error { background: var(--danger-soft); color: var(--danger); padding: 10px 14px; border-radius: 0; }
.flash { background: var(--ok-soft); padding: 10px 14px; border-radius: 0; }

/* layout blocks */
.hero { padding: 40px 0 16px; }
.hero h1 { font-size: 3rem; margin-bottom: .3em; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.card, .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; }
.card h3 { margin-top: 0; }
.card-muted { background: var(--surface-2); }
.meta { color: var(--muted); font-size: .92rem; }
.panel { margin: 20px 0; }
.panel h2:first-child, .panel-head h2 { margin-top: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.panel-actions { display: flex; gap: 14px; align-items: center; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.two-col .panel { margin: 20px 0 0; }
.steps-list li { margin-bottom: 8px; }
.defs dt { font-weight: 700; }
.defs dd { margin: 0 0 10px; color: var(--text-2); }
.tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { background: var(--surface-2); border-radius: 999px; padding: 3px 12px; font-size: .92rem; }
.badge { background: var(--ok-soft); border-radius: 999px; padding: 1px 10px; font-size: .8rem; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; background: var(--surface-2); border-radius: 0; padding: 3px; }
.tabs a { text-decoration: none; color: var(--text-2); padding: 5px 12px; border-radius: 6px; font-size: .92rem; }
.tabs a.active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.report-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }

/* tables */
.table-scroll { overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.list th, table.list td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.list th { color: var(--muted); font-weight: 600; font-size: .85rem; }
table.list .right, .right { text-align: right; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
table.list tr.total td { font-weight: 600; }
input.copy { font-size: .85rem; }

/* questionnaire */
.questionnaire { max-width: 860px; }
.progress-steps { display: flex; gap: 4px; flex-wrap: wrap; margin: 20px 0 8px; }
.progress-steps a { font-size: .85rem; padding: 4px 10px; border-radius: 999px; text-decoration: none; background: var(--surface-2); color: var(--muted); }
.progress-steps a.done { background: var(--accent-soft); color: var(--accent); }
.progress-steps a.current { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
fieldset.question { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); padding: 18px 20px 14px; margin: 0 0 18px; }
fieldset.question legend { font-weight: 700; font-size: 1.1rem; padding: 0 6px; }
.qnum { display: inline-block; min-width: 28px; height: 28px; line-height: 28px; text-align: center; border-radius: 50%; background: var(--surface-2); font-size: .85rem; margin-right: 4px; }
.qtext { color: var(--text-2); margin-top: 0; }
.levels { display: grid; gap: 6px; }
.level { display: grid; grid-template-columns: 22px 26px 1fr; gap: 8px; align-items: start; padding: 9px 10px; border: 1px solid var(--border); border-radius: 0; cursor: pointer; }
.level:hover { border-color: var(--accent); }
.level:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.level input { margin-top: 4px; accent-color: var(--accent); }
.level.dk { color: var(--muted); }
.lvl { display: inline-block; width: 24px; height: 24px; line-height: 24px; text-align: center; border-radius: 6px; background: var(--surface-2); font-weight: 700; font-size: .85rem; color: var(--text-2); }
table.levels-retro { width: 100%; border-collapse: collapse; font-size: .96rem; }
table.levels-retro th { font-size: .82rem; color: var(--muted); text-align: center; padding: 4px 8px; }
table.levels-retro th:first-child { text-align: left; }
table.levels-retro td { padding: 8px; border-top: 1px solid var(--border); vertical-align: top; }
table.levels-retro td:not(:first-child) { text-align: center; width: 90px; }
table.levels-retro tr:has(input:checked) td:first-child { font-weight: 600; }
table.levels-retro input { width: 18px; height: 18px; accent-color: var(--accent); }
table.levels-retro .dk td:first-child { color: var(--muted); }
.form-nav { display: flex; justify-content: space-between; gap: 12px; margin: 24px 0; }
.deep-list li { margin: 6px 0; }
table.likert { width: 100%; border-collapse: collapse; font-size: .92rem; margin-bottom: 12px; }
table.likert th { font-size: .78rem; color: var(--muted); font-weight: 600; padding: 4px; width: 72px; }
table.likert td { border-top: 1px solid var(--border); padding: 8px 4px; text-align: center; }
table.likert td:first-child { text-align: left; }
table.likert input { width: 18px; height: 18px; accent-color: var(--accent); }

/* results */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0 6px; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; display: grid; gap: 2px; }
.tile-label { color: var(--label); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.tile-value { font-family: var(--serif); font-size: 2.8rem; font-weight: 400; font-variant-numeric: tabular-nums; line-height: 1.1; }
.tile-sub { color: var(--text-2); font-size: .9rem; }
.scale-note { color: var(--muted); font-size: .85rem; }
.bars { display: grid; gap: 6px; margin: 10px 0 16px; }
.bar-row { display: grid; grid-template-columns: minmax(160px, 34%) 1fr 40px auto; gap: 10px; align-items: center; font-size: .93rem; }
.bar-label em { color: var(--muted); font-style: normal; font-size: .82rem; }
.bar-track { position: relative; height: 14px; background: var(--surface-2); border-radius: 4px; }
.bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--series-1); border-radius: 0 4px 4px 0; }
.bar-marker { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1px; background: var(--text); border-radius: 2px; }
.bar-value { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.bar-range { color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; min-width: 50px; }
details summary { cursor: pointer; color: var(--accent); margin: 6px 0; }
svg.chart { width: 100%; height: auto; display: block; }
svg.chart .grid { fill: none; stroke: var(--grid); stroke-width: 1; }
svg.chart .tick { fill: var(--muted); font-size: 11px; font-family: var(--font); }
svg.chart .axis-label { fill: var(--text-2); font-size: 13px; font-family: var(--font); }
svg.chart .dot { stroke: var(--surface); stroke-width: 2; }
svg.chart .connector { stroke: var(--muted); stroke-width: 2; }
svg.chart .pt { stroke: var(--surface); stroke-width: 2; }
svg.chart .pt-baseline { fill: var(--surface); stroke: var(--text-2); stroke-width: 2; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .88rem; color: var(--text-2); margin: 6px 0 10px; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legend i.hollow { background: var(--surface); border: 2px solid var(--text-2); border-radius: 50%; }
.legend em { color: var(--muted); font-style: normal; }
table.heatmap { border-collapse: separate; border-spacing: 2px; font-size: .88rem; min-width: 100%; }
table.heatmap th { font-weight: 600; text-align: left; padding: 4px 8px; color: var(--text-2); }
table.heatmap thead th { font-size: .8rem; vertical-align: bottom; text-align: center; min-width: 76px; }
table.heatmap thead th:first-child { text-align: left; }
table.heatmap .n { color: var(--muted); font-weight: 400; }
table.heatmap td { text-align: center; padding: 5px 6px; border-radius: 4px; font-variant-numeric: tabular-nums; font-weight: 600; }
table.heatmap td.empty { color: var(--muted); background: var(--surface-2); font-weight: 400; }
table.heatmap tr.section-row th { padding-top: 12px; color: var(--text); font-size: .9rem; }
.two-col-wide { grid-template-columns: 1.1fr 1fr; align-items: start; }

@media (max-width: 760px) {
  body { font-size: 16px; }
  h1 { font-size: 1.6rem; }
  .hero h1 { font-size: 1.9rem; }
  .two-col, .two-col-wide { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr; }
  .form .row { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 1fr 40px; }
  .bar-row .bar-label { grid-column: 1 / -1; }
  .bar-row .bar-range { display: none; }
  table.likert th { font-size: .7rem; width: 44px; }
  table.levels-retro td:not(:first-child) { width: 56px; }
  table.list { font-size: .88rem; }
}

svg.progress { max-width: 760px; }
.radar-wrap { max-width: 720px; margin: 0 auto 8px; }
table.heatmap { table-layout: fixed; }
table.heatmap thead th:first-child, table.heatmap tbody th[scope=row] { width: 190px; }
details > summary { font-weight: 600; }
.panel details { margin: 4px 0; }
.answers td:nth-child(2), .answers td:last-child { white-space: nowrap; }
.nav a.btn { font-size: .74rem; color: var(--accent-ink); }
.nav button.link { font-size: .95rem; }
.btn-danger { background: #9b1c1c; border-color: #9b1c1c; }
.btn-danger:hover { background: #7a1515; border-color: #7a1515; }
.panel-danger { border-color: #e6c7c7; }

/* trend across rounds */
svg.chart .event-line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
svg.chart .event-dot { fill: var(--accent); }
svg.chart .event-num { fill: #fff; font-size: 11px; font-weight: 700; font-family: var(--font); }
.trend-table td.num { white-space: nowrap; }
.chg { font-size: .8rem; margin-left: 4px; }
.chg.up { color: #2f6b2a; }
.chg.down { color: #a23a4e; }
.events { margin: 4px 0 0; padding-left: 0; list-style: none; font-size: .92rem; }
.events li { margin: 2px 0; }
.events b { display: inline-block; min-width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: .72rem; margin-right: 6px; }
.round-plan { margin: 10px 0 14px; }
.round-plan .meter { font-weight: 700; }
.note-form input { width: 100%; min-width: 160px; padding: 4px 6px; font: inherit; font-size: .9rem; border: 1px solid var(--border); background: var(--surface); }
.note-form, form.inline.note-form { display: flex; gap: 6px; align-items: center; }

/* AI review */
.ai-review .prose h3 { font-size: 1.05rem; margin: 1.2em 0 .4em; }
.ai-review .prose h3:first-child { margin-top: 0; }
.ai-review .prose p, .ai-review .prose li { line-height: 1.6; max-width: 72ch; }
.ai-review .prose ul { padding-left: 1.2em; }
.admin-box { margin-top: 16px; padding: 12px 14px; border: 1px dashed var(--label); background: var(--surface-2); }
.admin-box .label { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--label); margin: 0 0 6px; }
.admin-box textarea { width: 100%; font: inherit; font-size: .92rem; }
.form h3.sub { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--label); margin: 18px 0 2px; font-family: var(--font); }

/* members */
.small { font-size: .88rem; }
.filters { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; margin-bottom: 8px; }
.filters label { display: flex; flex-direction: column; font-size: .8rem; font-weight: 700; gap: 4px; min-width: 130px; }
.filters label.grow { flex: 1 1 220px; }
.filters input, .filters select { font: inherit; font-size: .92rem; font-weight: 400; padding: 7px 8px; border: 1px solid var(--border); background: var(--surface); }
.filters a { padding-bottom: 8px; }
table.members td, table.members th { vertical-align: top; }
table.members .round-col { white-space: nowrap; }
table.members tr.pending td { color: var(--muted); }
table.members td.actions { white-space: nowrap; }
.status-submitted { color: #2f6b2a; font-weight: 700; }
.status-not { color: #a23a4e; }
.status-started { color: #8a5a00; }
.status-open, .status-na { color: var(--muted); }
.pager { display: flex; gap: 18px; align-items: center; justify-content: center; margin: 14px 0 4px; }
.btn[disabled], button.link[disabled] { opacity: .45; cursor: not-allowed; }
@media (max-width: 640px) { .filters label { min-width: 46%; } }

/* link back to the main site */
.parent-bar { background: var(--surface); border-bottom: 1px solid var(--border); font-size: .85rem; }
.parent-inner { padding-top: 6px; padding-bottom: 6px; }
.parent-bar a { color: var(--muted); text-decoration: none; }
.parent-bar a:hover, .parent-bar a:focus-visible { color: var(--text); text-decoration: underline; }
.report-intro { color: var(--text-2); max-width: 46em; margin: 0.6rem 0 0; }

/* places */
.places-meter { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 4px 0 10px; }
.setup-box { border: 1px solid var(--border); background: var(--surface-2); padding: 14px 16px; }
.setup-box h3 { margin-top: 0; }
.subject { border-top: 1px solid var(--border); margin-top: 18px; padding-top: 14px; }
.subject h3 { margin: 0; }
.tag { display: inline-block; font-family: var(--font); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--label); border: 1px solid var(--border); padding: 2px 6px; margin-left: 6px; vertical-align: middle; }
.tag-warn { color: #8a5a00; border-color: #e3c58a; background: #fbf3e2; margin-left: 0; }
.step-guide { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 10px 14px 10px 30px; margin: 6px 0 12px; background: var(--surface-2); border: 1px solid var(--border); }
.step-guide li { margin: 0; }
.next-step { border-left: 4px solid var(--accent); }
.next-step p { margin: 0 0 10px; }
/* Continue with Microsoft (shared accounts phase 5) */
.btn-ms { display: inline-flex; align-items: center; gap: 10px; }
.or-line { margin: 18px 0 6px; }

/* reading content: the approver page */
.box { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin: 14px 0; }
.indent { display: grid; gap: 12px; margin-left: 24px; }

/* Admin pages look like a software product, not a document (Alex, 8 Oct 2026): tabs across the top,
   compact sentence-case buttons for every action, and no links inside sentences. Same in CollabForce365's admin. */
.admin-app { font-size: 14px; }
.admin-app h1 { font-size: 1.5rem; margin: 14px 0 6px; }
.admin-app h2 { font-size: 1.15rem; margin: 22px 0 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-app .admin-tabs { margin: 14px 0 4px; }
.admin-app .btn, .admin-app .btn-small { padding: 4px 10px; font: 600 13px/1.4 var(--font); letter-spacing: 0; text-transform: none; border-radius: 4px; white-space: nowrap; }
.admin-app .btn-secondary { border-width: 1px; background: var(--surface); color: var(--text); border-color: var(--border); }
.admin-app .btn-secondary:hover { border-color: var(--accent); color: var(--accent-dark); background: var(--surface-2); }
.admin-app .btn-danger { background: var(--surface); color: var(--danger); border-color: var(--danger); }
.admin-app .btn-danger:hover { background: var(--danger-soft); color: var(--danger); }
.admin-app .btns { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.admin-app .row-name { font-weight: 600; color: var(--text); text-decoration: none; }
.admin-app .row-name:hover { color: var(--accent); }
.admin-app .seg { display: inline-flex; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.admin-app .seg a { padding: 3px 10px; font-size: 13px; text-decoration: none; color: var(--text-2); border-left: 1px solid var(--border); }
.admin-app .seg a:first-child { border-left: 0; }
.admin-app .seg a.active { background: var(--accent); color: var(--accent-ink); }
.admin-app .status { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); font-size: 12px; }
.admin-app .form .btn, .admin-app form .btn { width: auto; justify-self: start; align-self: flex-start; }
/* Same tabs as CollabForce365's admin page, so the five admin pages read as one product */
.admin-app .admin-tabs { background: none; padding: 0; gap: 4px; border-bottom: 2px solid var(--border); }
.admin-app .admin-tabs a { padding: 8px 14px; border-radius: 0; font-size: 13px; font-weight: 600; color: var(--text); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.admin-app .admin-tabs a.active { background: none; box-shadow: none; border-color: var(--accent); color: var(--accent-dark); }

/* Family look (26 Oct 2026), together with brand.css (colours and Barlow type for every tool):
   teal header like structuredcollaboration.com, sentence-case buttons with rounded corners. */
:root { --text-2: #3E4C55; }
h1, h2, h3, h4, .tile-value { font-weight: 600; }
.site-header { background: #0B5257; border-bottom: 0; }
.site-header .brand { color: #fff; font-weight: 600; letter-spacing: 0; }
.site-header .brand em { color: #98DDDE; font-weight: 600; }
.site-header .nav a, .site-header .nav button.link { color: #E8F6F6; }
.site-header .nav a:hover, .site-header .nav a.active { color: #fff; }
.site-header .nav a.btn { background: #FFDA29; border-color: #FFDA29; color: #263056; }
.site-header .nav a.btn:hover { background: #F2C900; border-color: #F2C900; }
.btn { border-radius: 4px; font-weight: 600; font-size: .95rem; letter-spacing: .01em; text-transform: none; padding: 13px 20px; }
.btn-small, .nav a.btn { font-size: .9rem; padding: 9px 14px; }
.btn-secondary { border-width: 1px; }

/* ---------- 8ao: screens that look like software, not a Word document (Alex, 27 Oct 2026) ----------
   Labels are small bold capitals beside their field; fields are firm white boxes; explanations sit behind (i)
   marks; buttons are solid; panels carry a coloured top band; tables are spreadsheet grids with coloured
   column groups; meaning colours (green, amber, red, blue) say the same thing everywhere. Uses brand.css's
   colours (teal family) plus the Under the Sea colours for column groups. Reading pages (.prose, .narrow,
   the questionnaire) keep their measure. */
:root {
  --ui-teal: #0B5257; --ui-teal-dark: #073A3E; --ui-label: #00797D; --ui-limpet: #98DDDE; --ui-limpet-pale: #E8F6F6;
  --ui-line: #D5E4E6; --ui-line-strong: #9FC3C8; --ui-key: #EEF6F7;
  /* column-group colours (Under the Sea family, darkened where white text sits on them) */
  --g1: #0B5257; --g1t: #D8EFEF; --g2: #195190; --g2t: #DCE7F5; --g3: #1E7A45; --g3t: #DCEFE2;
  --g4: #4A3AA7; --g4t: #E4E1F4; --g5: #8A5A12; --g5t: #F5E8CF; --g6: #263056; --g6t: #DFE2EE;
  /* meaning colours, the same as ui.css in the tools */
  --ok: #1A7F37; --ok-bg: #E3F2E6; --ok-ink: #135C28;
  --warn: #F29900; --warn-bg: #FDECC8; --warn-ink: #6B4200;
  --bad: #D93025; --bad-bg: #FBE1DE; --bad-ink: #9B1C1C;
  --info: #2A78D6; --info-bg: #DCE9F9; --info-ink: #123A6B;
}
.wrap { max-width: 1400px; }
h1 { font-size: 2rem; }

/* labels and fields */
.form label, .filters label, .lbl { font: 700 12px/1.3 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ui-label); }
.form label.check { font: 400 15px/1.4 var(--font); letter-spacing: 0; text-transform: none; color: var(--text); align-items: center; }
.form label .opt, .lbl .opt { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); margin-left: 4px; }
.req::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: #D9622B; vertical-align: 2px; }
.form input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .form select, .form textarea,
.filters input, .filters select, .fld, main select, main textarea,
main input[type=text], main input[type=email], main input[type=number], main input[type=search], main input[type=date], main input[type=url], main input:not([type]) {
  font: 500 15px/1.3 var(--font); letter-spacing: 0; text-transform: none; color: var(--text);
  min-height: 36px; padding: 6px 10px; background: #FFFFFF; border: 2px solid var(--ui-line-strong); border-radius: 4px; }
main select:hover, main input:hover, main textarea:hover, .fld:hover { border-color: var(--ui-teal); }
main select:focus, main input:focus, main textarea:focus, .fld:focus { outline: none; border-color: var(--ui-teal); box-shadow: 0 0 0 3px rgba(11,82,87,.2); }
main select:disabled, main input:disabled { background: #F1F4F5; color: var(--muted); border-color: var(--ui-line); }
/* open drop-down lists: Chrome on Windows draws the items against the left edge and cuts the first letter (Alex, 1 Nov 2026) */
select option { padding: 4px 12px; color: var(--text, #201E1D); background: #FFFFFF; }
select optgroup { padding: 4px 6px; color: var(--text, #201E1D); font-style: normal; }
select optgroup option { padding-left: 18px; }
main input[type=checkbox], main input[type=radio] { accent-color: var(--ui-teal); width: 16px; height: 16px; }
.ro { min-height: 36px; display: flex; align-items: center; font-weight: 600; }

/* (i) help: the explanation is there on hover, tap or keyboard, not written across the page */
.hint { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; padding: 0; margin: 0 0 0 4px; border: 0; border-radius: 50%; background: var(--ui-teal); color: #fff; font: italic 700 11px/1 Georgia, serif; cursor: help; vertical-align: 1px; text-transform: none; letter-spacing: 0; }
.hint:hover, .hint:focus-visible { background: var(--ui-teal-dark); outline: 2px solid var(--ui-limpet); }
.hint > span { display: none; position: absolute; left: 24px; top: -8px; z-index: 20; width: 280px; padding: 10px 12px; background: var(--ui-teal-dark); color: #fff; font: 400 13.5px/1.45 var(--font); text-align: left; border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.2); }
.hint.left > span { left: auto; right: 24px; }
.hint:hover > span, .hint:focus > span, .hint:focus-within > span { display: block; }

/* buttons: solid, as on the main website */
.btn { background: var(--ui-teal); border: 2px solid var(--ui-teal); color: #fff; }
.btn:hover { background: var(--ui-teal-dark); border-color: var(--ui-teal-dark); }
.btn-secondary, .admin-app .btn-secondary { background: var(--ui-limpet); border: 2px solid var(--ui-limpet); color: var(--ui-teal-dark); }
.btn-secondary:hover, .admin-app .btn-secondary:hover { background: #7FCFD1; border-color: #7FCFD1; color: var(--ui-teal-dark); }
.btn-danger, .admin-app .btn-danger { background: #B3261E; border: 2px solid #B3261E; color: #fff; }
.btn-danger:hover, .admin-app .btn-danger:hover { background: #8C1D17; border-color: #8C1D17; color: #fff; }
.btn-warm { background: #FBE3D6; border: 2px solid #FBE3D6; color: #8A3B12; }
.btn-warm:hover { background: #F6CDB6; border-color: #F6CDB6; color: #6E2D0C; }
.btn-small { padding: 6px 12px; font-size: .88rem; }
main .btn[disabled] { background: #B5CDD1; border-color: #B5CDD1; color: #fff; opacity: 1; }

/* panels: a coloured band on top, a firm border */
.panel, .card { border: 2px solid var(--ui-line); border-top: 5px solid var(--ui-teal); border-radius: 4px; }
.panel-danger { border-color: #F0CFCC; border-top-color: #B3261E; }
.panel h2 { font-size: 1.35rem; }
.card-muted { background: var(--ui-limpet-pale); }
.flash { background: var(--ok-bg); color: var(--ok-ink); border-left: 4px solid var(--ok); font-weight: 600; }
.error { border-left: 4px solid var(--bad); font-weight: 600; }

/* two columns on PCs: the work on the left, details, explanation and admin-only actions on the right */
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 20px; align-items: start; }
.cols-main { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; }
.cols > .panel, .cols-main > .panel, .stack > .panel { margin: 0; }
.stack { display: grid; gap: 20px; align-content: start; }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.head-row h1, .head-row h2 { margin: 0; }
.row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.btn-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 900px) { .cols, .cols-main, .row-2 { grid-template-columns: 1fr; } }

/* tables: spreadsheet grids. Every value in its own box; headings in the teal; the first column is the key */
table.list { border-collapse: collapse; border: 2px solid var(--ui-teal); font-size: 14.5px; background: #fff; }
table.list th, table.list td { border: 1px solid var(--ui-line-strong); padding: 7px 9px; vertical-align: middle; }
table.list th { background: var(--ui-teal); color: #fff; border-color: var(--ui-teal-dark); font: 700 11.5px/1.3 var(--font); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
table.list td:first-child { background: var(--ui-key); font-weight: 600; }
table.list td:first-child .muted, table.list td:first-child .small { font-weight: 400; }
table.list tbody tr:hover td { background: #F5FBFB; }
table.list tbody tr:hover td:first-child { background: #E3F1F2; }
table.list td.num, table.list th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.list td.act { text-align: center; white-space: nowrap; width: 1%; }
table.list td.act .btn-row { flex-wrap: nowrap; }
.pbar { min-width: 110px; }
table.list tr.groups th { padding: 5px 10px; font-size: 11px; color: #fff; }
table.list tr.groups + tr th { color: var(--text); }
table.list .g1 { background: var(--g1); border-color: var(--g1); } table.list .t1 { background: var(--g1t); color: #0A3E42 !important; }
table.list .g2 { background: var(--g2); border-color: var(--g2); } table.list .t2 { background: var(--g2t); color: #0F335C !important; }
table.list .g3 { background: var(--g3); border-color: var(--g3); } table.list .t3 { background: var(--g3t); color: #124A2A !important; }
table.list .g4 { background: var(--g4); border-color: var(--g4); } table.list .t4 { background: var(--g4t); color: #2E2470 !important; }
table.list .g5 { background: var(--g5); border-color: var(--g5); } table.list .t5 { background: var(--g5t); color: #5A3A08 !important; }
table.list .g6 { background: var(--g6); border-color: var(--g6); } table.list .t6 { background: var(--g6t); color: #1D2545 !important; }
table.list td.attn { background: var(--warn-bg) !important; color: var(--warn-ink); font-weight: 600; }

/* meaning: tags, progress bars and the colour key */
.st { display: inline-block; padding: 3px 9px; border-radius: 3px; font: 700 13px/1.3 var(--font); white-space: nowrap; }
.st-ok { background: var(--ok); color: #fff; } .st-warn { background: var(--warn); color: #2B1B00; }
.st-bad { background: var(--bad); color: #fff; } .st-info { background: var(--info); color: #fff; }
.st-teal { background: var(--ui-teal); color: #fff; } .st-limpet { background: var(--ui-limpet); color: var(--ui-teal-dark); }
.pbar { display: flex; align-items: center; gap: 8px; min-width: 150px; }
.pbar > span { flex: 1; height: 10px; border-radius: 2px; background: #E4EEEF; overflow: hidden; }
.pbar > span > i { display: block; height: 10px; background: var(--ok); }
.pbar.warn > span > i { background: var(--warn); } .pbar.bad > span { background: var(--bad-bg); } .pbar.info > span > i { background: var(--info); }
.pbar > b { font-size: 12.5px; min-width: 36px; text-align: right; color: var(--ok-ink); }
.pbar.warn > b { color: var(--warn-ink); } .pbar.bad > b { color: var(--bad-ink); } .pbar.info > b { color: var(--info-ink); }
.key { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin-top: 10px; font-size: 13px; color: var(--ink-2, #3E4C55); }
.key b { color: var(--text); }
.key i { display: inline-block; width: 14px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.chips span { padding: 4px 10px; border-radius: 3px; background: var(--ui-limpet-pale); color: var(--ui-teal-dark); }
.chips .c-given { background: var(--ui-teal); color: #fff; } .chips .c-free { background: var(--warn-bg); color: var(--warn-ink); }
.chips .c-none { background: var(--bad-bg); color: var(--bad-ink); }
.actbar { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding: 12px; margin: 12px 0; background: var(--ui-limpet-pale); border: 2px solid var(--ui-line); border-radius: 4px; }
.actbar .grow { flex: 1 1 260px; display: grid; gap: 5px; min-width: 0; }
/* the family bar (family.js), as in every tool: the Display button reads as part of the bar */
#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; }

/* 8ao: a field's explanation moves behind an (i) mark beside its label (footer script helpTips, as in CollabForce365) */
.form label > .lbl-row, label > .lbl-row { display: inline-flex; align-items: center; font: 700 12px/1.3 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ui-label, #00797D); }
/* 8ao: Basic / Advanced / Expert. Level colours are kept apart from the status colours (green-blue-violet heading bars) */
.lv-basic { background: #1E7A45 !important; border-color: #1E7A45 !important; color: #fff !important; }
.lv-advanced { background: #195190 !important; border-color: #195190 !important; color: #fff !important; }
.lv-expert { background: #4A3AA7 !important; border-color: #4A3AA7 !important; color: #fff !important; }
.lv-seg { display: inline-flex; margin-right: 8px; vertical-align: middle; }
.lv-seg button { border: 2px solid var(--ui-line-strong); background: #fff; color: var(--text); font: 700 12.5px var(--font); padding: 4px 9px; margin-left: -2px; cursor: pointer; }
.lv-seg button:first-child { border-radius: 4px 0 0 4px; margin-left: 0; } .lv-seg button:last-child { border-radius: 0 4px 4px 0; }
@media print { .site-header, .parent-bar, #family, .site-footer, .lv-seg, .act .btn, .head-row .btn-row, form.btn-row { display: none !important; } }
/* ---------- 8ao sheets.css 1.0.0: settings and forms as numbered sheets, by level ----------
   Same rules in diagnostics-platform style.css and CollabForce365 style.css (and later ui.css for the browser tools). */
.sheets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; margin: 4px 0 8px; }
@media (max-width: 1100px) { .sheets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .sheets { grid-template-columns: 1fr; } }
table.sheet { width: 100%; border-collapse: collapse; border: 2px solid #0B5257; font-size: 14px; background: #fff; margin: 0; }
table.sheet th, table.sheet td { border: 1px solid #9FC3C8; }
table.sheet thead tr:first-child th { color: #fff; text-align: left; font: 700 11.5px/1.3 var(--font, Barlow, sans-serif); letter-spacing: .07em; text-transform: uppercase; padding: 7px 8px; }
table.sheet thead tr:first-child th .lvl-tag { float: right; background: rgba(255,255,255,.22); padding: 1px 7px; border-radius: 3px; font-size: 10px; }
table.sheet thead tr + tr th { font: 700 10.5px/1.3 var(--font, Barlow, sans-serif); letter-spacing: .07em; text-transform: uppercase; color: #1F2A33; padding: 4px 8px; text-align: left; }
table.sheet[data-level=basic] { border-color: #1E7A45; } table.sheet[data-level=basic] thead tr:first-child th { background: #1E7A45; border-color: #1E7A45; } table.sheet[data-level=basic] thead tr + tr th { background: #DCEFE2; }
table.sheet[data-level=advanced] { border-color: #195190; } table.sheet[data-level=advanced] thead tr:first-child th { background: #195190; border-color: #195190; } table.sheet[data-level=advanced] thead tr + tr th { background: #DCE7F5; }
table.sheet[data-level=expert] { border-color: #4A3AA7; } table.sheet[data-level=expert] thead tr:first-child th { background: #4A3AA7; border-color: #4A3AA7; } table.sheet[data-level=expert] thead tr + tr th { background: #E4E1F4; }
table.sheet td.k { background: #EEF6F7; font-weight: 600; width: 50%; padding: 4px 8px; }
table.sheet td.v { padding: 0; height: 34px; background: #fff; position: relative; }
table.sheet td.v > :is(input, select, textarea) { display: block; width: 100%; height: 100%; min-height: 34px; box-sizing: border-box; border: 0 !important; border-radius: 0 !important; box-shadow: none; background: transparent; padding: 4px 8px; font: 500 14px var(--font, Barlow, sans-serif); margin: 0; }
table.sheet td.v > input[type=number], table.sheet td.v > input[type=time] { text-align: right; font-variant-numeric: tabular-nums; }
table.sheet td.v:hover, table.sheet td.v:focus-within { outline: 2px solid #0B5257; outline-offset: -2px; background: #F5FBFB; }
table.sheet td.v > .ro { padding: 4px 8px; font-weight: 600; }
table.sheet td.v .sub { display: block; padding: 0 8px 4px; font-size: 12px; color: #4A5468; font-weight: 400; }
table.sheet.lvl-off { display: none; }
.lvl-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin: 2px 0 12px; font-size: 13.5px; }
.lvl-cap { font: 700 11.5px/1 var(--font, Barlow, sans-serif); letter-spacing: .07em; text-transform: uppercase; color: #00797D; margin-right: 10px; }
.lvl-opt { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border: 2px solid #B5CDD1; margin-left: -2px; background: #fff; font: 700 13.5px var(--font, Barlow, sans-serif); cursor: pointer; border-radius: 0; }
.lvl-bar .lvl-opt:first-of-type { border-radius: 4px 0 0 4px; margin-left: 0; } .lvl-bar .lvl-opt:last-of-type { border-radius: 0 4px 4px 0; }
.lvl-opt i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; display: inline-block; }
.lvl-opt em { font-style: normal; font-weight: 500; font-size: 12px; opacity: .85; }
.lvl-opt.lvl-basic { color: #1E7A45; } .lvl-opt.lvl-advanced { color: #195190; } .lvl-opt.lvl-expert { color: #4A3AA7; }
.lvl-opt.on { color: #fff !important; position: relative; z-index: 1; } .lvl-opt.on i { background: #fff; border-color: #fff; }
.lvl-opt.lvl-basic.on { background: #1E7A45; border-color: #1E7A45; } .lvl-opt.lvl-advanced.on { background: #195190; border-color: #195190; } .lvl-opt.lvl-expert.on { background: #4A3AA7; border-color: #4A3AA7; }
.lvl-note { margin-left: 14px; font-size: 12.5px; color: #4A5468; }
.lvl-strip { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 2px dashed #C9C2EC; background: #F6F4FD; color: #2E2470; border-radius: 4px; padding: 8px 12px; font-size: 13.5px; }
.lvl-strip.lvl-warn { border-color: #F29900; background: #FDECC8; color: #6B4200; }
.lvl-strip .lvl-opt { border-radius: 4px; margin: 0; white-space: nowrap; }
@media print { .lvl-bar, .lvl-strip { display: none !important; } table.sheet.lvl-off { display: table; } }
table.sheet td.k label { display: inline !important; margin: 0 !important; font: 600 14px/1.3 var(--font) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--text) !important; }
.lvl-strip[hidden] { display: none !important; }

/* contrast (Alex, 27 Oct 2026): level tags readable on their heading bars; muted text inside filled headings */
table.sheet[data-level] thead tr:first-child th .lvl-tag { background: #fff; }
table.sheet[data-level=basic] .lvl-tag { color: #1E7A45; } table.sheet[data-level=advanced] .lvl-tag { color: #195190; } table.sheet[data-level=expert] .lvl-tag { color: #4A3AA7; }
table.list th :is(.muted, .small, small) { color: #D8EFEF; }
main .btn[disabled], main .btn:disabled { background: #E4EEEF; border-color: #E4EEEF; color: #4A5468; cursor: not-allowed; }
/* 8ao: levels on the organisation screens (Alex, 27 Oct 2026). A panel can be a sheet: its top band takes the level
   colour and a small tag names the level; the page's sheets stack as panels rather than a three-across grid. */
.sheets.sheets-panels { display: block; }
.sheets.sheets-panels > .two-col { margin: 0; }
.sheet.lvl-off { display: none !important; }
.panel.sheet { position: relative; }
.panel.sheet[data-level=basic] { border-top-color: #1E7A45; }
.panel.sheet[data-level=advanced] { border-top-color: #195190; }
.panel.sheet[data-level=expert] { border-top-color: #4A3AA7; }
.panel.sheet.panel-danger { border-top-color: #B3261E; }
.panel.sheet::before { position: absolute; top: -12px; right: 12px; padding: 2px 8px; border-radius: 3px; color: #fff; font: 700 10px/1.3 var(--font, Barlow, sans-serif); letter-spacing: .08em; text-transform: uppercase; }
.panel.sheet[data-level=basic]::before { content: "Basic"; background: #1E7A45; }
.panel.sheet[data-level=advanced]::before { content: "Intermediate"; background: #195190; }
.panel.sheet[data-level=expert]::before { content: "Expert"; background: #4A3AA7; }
@media print { .panel.sheet.lvl-off { display: block !important; } }
/* 8ap: the subscription card beside a tool's facilitator seats */
table.kv-mini { width: 100%; border-collapse: collapse; font-size: 14px; }
table.kv-mini th, table.kv-mini td { border: 1px solid #9FC3C8; padding: 5px 8px; text-align: left; }
table.kv-mini th { width: 45%; background: #EEF6F7; font-weight: 600; }
aside.card { padding: 14px 16px; background: var(--surface, #fff); }
/* 8a: release stages */
.st.st-sandbox { background: #F6E7CC; color: #6B4200; } .st.st-planned { background: #DCE7F5; color: #0F335C; } .st.st-live { background: #DCEFE2; color: #155A32; }
.lv-seg button.st-sandbox.on { background: #8A5A12; border-color: #8A5A12; color: #fff; } .lv-seg button.st-planned.on { background: #195190; border-color: #195190; color: #fff; } .lv-seg button.st-live.on { background: #1E7A45; border-color: #1E7A45; color: #fff; }
ul.news { margin: 0; padding-left: 18px; } ul.news li { margin: 0 0 8px; }
/* 8ay: the organisation chart */
.oc-panel { overflow-x: auto; }
.oc-org, .oc-box { background: var(--surface); border: 1px solid var(--ui-line-strong); border-top: 3px solid var(--ui-teal); padding: 8px 10px; min-width: 180px; max-width: 280px; }
.oc-org { margin: 0 auto 18px; text-align: center; border-top-color: var(--accent-dark); max-width: 340px; }
.oc-function { border-top-color: var(--accent-dark); background: var(--ui-key); }
.oc-group { border-top-color: var(--series-2); }
.oc-team { border-top-color: var(--ui-limpet); }
.oc-mine { box-shadow: 0 0 0 2px var(--ui-limpet); }
.oc-top { display: flex; justify-content: space-between; gap: 8px; }
.oc-kind { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-label); font-weight: 700; }
.oc-you { font-size: 11px; color: var(--ui-teal-dark); background: var(--ui-limpet-pale); padding: 0 6px; }
.oc-cf { font-size: 11px; font-weight: 700; color: #fff; background: var(--ui-petrol, #1E4B55); padding: 0 6px; margin-left: 6px; letter-spacing: .02em; }
.oc-name { font-weight: 700; margin: 2px 0; overflow-wrap: anywhere; }
.oc-lead { font-size: 13px; }
.oc-row { display: flex; gap: 16px; align-items: flex-start; padding-top: 14px; border-top: 2px solid var(--ui-line); }
.oc-col { flex: 0 0 auto; }
ul.oc-kids { list-style: none; margin: 0 0 0 14px; padding: 0 0 0 14px; border-left: 2px solid var(--ui-line); }
ul.oc-kids > li { margin: 10px 0 0; position: relative; }
ul.oc-kids > li::before { content: ''; position: absolute; left: -14px; top: 20px; width: 12px; border-top: 2px solid var(--ui-line); }
ul.oc-loose { margin-left: 0; border-left: 0; display: flex; flex-wrap: wrap; gap: 12px; }
ul.oc-loose > li { margin: 0; } ul.oc-loose > li::before { display: none; }
.oc-edit { margin-top: 6px; font-size: 13px; }
.oc-edit summary { cursor: pointer; color: var(--accent); }
.oc-f { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; margin: 8px 0 0; }
.oc-f label { display: flex; flex-direction: column; font-size: 12px; flex: 1 1 140px; }
.oc-f input, .oc-f select { font-size: 13px; padding: 4px 6px; }
.oc-inline { margin: 0; }
.oc-box[draggable="true"] { cursor: grab; }
.oc-dragging { opacity: .5; }
.oc-over { outline: 3px dashed var(--series-2); outline-offset: 2px; }
@media (max-width: 640px) { .oc-row { flex-direction: column; } .oc-org, .oc-box { max-width: none; } }
/* 8ay, 30 Oct: one choice at a time in Change; the result shown on the box changed */
.oc-f[hidden] { display: none; }
.oc-pick { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 2px; }
.oc-pk { font: 600 12px/1.2 var(--font); padding: 5px 8px; border: 1px solid var(--ui-line-strong); background: var(--surface); color: var(--ui-teal-dark); cursor: pointer; }
.oc-pk.on { background: var(--ui-teal); border-color: var(--ui-teal); color: #fff; }
.oc-pk:focus-visible { outline: 2px solid var(--ui-limpet); }
.oc-step .small { margin: 0; flex: 1 1 100%; }
.oc-note { margin: 6px 0 0; padding: 6px 8px; background: var(--ok-soft); font-size: 13px; border-left: 3px solid var(--series-5); }
.oc-flash { box-shadow: 0 0 0 3px var(--series-5); }
.oc-help { margin: 4px 0 0; }
/* 8ay-1 to 8ay-3: suggestions, members, words */
.oc-mem { font-size: 12px; color: var(--muted); margin-top: 2px; }
.oc-sugg { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; }
.oc-chip { font: 600 12px/1.2 var(--font); padding: 5px 9px; border: 1px dashed var(--ui-line-strong); background: var(--surface); color: var(--ui-teal-dark); cursor: pointer; }
.oc-chip:hover { background: var(--ui-limpet-pale); }
.oc-home { display: flex; gap: 6px; align-items: center; margin: 0; } .oc-home select { font-size: 13px; padding: 3px 6px; }
.oc-terms label { flex: 1 1 200px; }
/* 8bh: Reporting, Processes and Tasks; the bill-of-materials view; requests */
.oc-views { display: flex; gap: 0; margin: 10px 0 6px; border-bottom: 2px solid var(--ui-teal); }
.oc-views a { padding: 7px 16px; font-weight: 700; font-size: 14px; color: var(--ui-teal-dark); text-decoration: none; border: 1px solid transparent; border-bottom: 0; }
.oc-views a.on { background: var(--ui-teal); color: #fff; }
.oc-views a:not(.on):hover { background: var(--ui-limpet-pale); }
.oc-waiting { border-top-color: var(--series-3); }
.oc-ask { border-left: 3px solid var(--series-3); padding: 4px 10px; margin: 8px 0; }
.oc-ask p { margin: 0 0 4px; }
table.bom td { vertical-align: top; }
table.bom tr.bom-proc td:first-child { font-size: 14px; }
table.bom tr.bom-task td { background: var(--ui-key); }
table.bom tr.bom-tt td { font-size: 13px; }
table.bom tr.bom-unset td { border-top: 2px solid var(--ui-line-strong); }
.bom-tog { border: 0; background: none; cursor: pointer; color: var(--ui-teal-dark); font-size: 12px; width: 18px; padding: 0; }
.bom-tog-sp { display: inline-block; width: 18px; }
.bom-kind { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ui-label); font-weight: 700; margin-right: 4px; }
.bom-own { font-size: 11px; background: #F6E7CC; color: #6B4200; padding: 0 4px; }
tr.bom-flash td { box-shadow: inset 0 0 0 9999px rgba(126,138,42,.10); }
tr[draggable="true"] { cursor: grab; }
/* 8bi: subtasks */
.btn-link { background: none; border: 0; padding: 0 0 0 4px; color: var(--accent, #1f5fa8); text-decoration: underline; cursor: pointer; font: inherit; }
.oc-subs .inline { display: inline-block; margin: 0 6px 6px 0; }
.bom-sub td:first-child { font-size: 0.95em; }
.oc-check { flex-direction: row !important; align-items: center; gap: 6px; font-weight: normal; }

/* 8bw: people per manager on the chart (information, never a target) */
.oc-span { font-size: 12px; color: var(--text-2, #3E4C55); margin-top: 4px; }
.oc-span-org { font-size: 13.5px; margin-top: 6px; }