/* CollabForce365 in the Structured Collaboration family look (register D21, D22, D57): paper, ink and petrol,
   Georgia headings at regular weight, Arial body, square corners; controls as ui.css (sentence case, 13 px, 4 px corners). */
:root {
  /* the family tokens (structuredcollaboration.com theme, shared-brand-tokens, D21, D22) */
  --paper: #F7F3EC; --stone: #E9DFCF; --ink: #201E1D; --ink-2: #4A4541;
  --petrol: #1E4B55; --petrol-dark: #13343B; --label: #4F7A80; --mist: #A9C7C9; --mist-pale: #E3ECEC;
  --line: #E2D8C8; --line-strong: #C9B9A3; --danger: #8E2A2A; --amber: #9A6B1F;
  --serif: Georgia, 'Times New Roman', serif;
  /* CollabForce365's own names, mapped onto the family */
  --navy: var(--ink);
  --sea: var(--petrol);
  --viridian: var(--petrol);
  --coral: var(--danger);
  --yellow: #C08A2E;
  --limpet: var(--mist);
  --turtle: #5C7F3E;
  --pink: #B07C9E;
  --bg: var(--paper);
  --surface: #FFFFFF;
  --surface-2: #F1EADF;
  --border: var(--line);
  --text: var(--ink);
  --muted: #706A64;
  /* status colours come from the shared ui.css (--st-*), so every tool means the same thing by them */
  --ok: var(--st-good-ink);
  --ok-soft: var(--st-good-pale);
  --warn: var(--st-warn-ink);
  --warn-soft: var(--st-warn-pale);
  --bad: var(--st-bad-ink);
  --bad-soft: var(--st-bad-pale);
  --font: Arial, Helvetica, sans-serif;
  --cond: var(--serif);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--sea); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; line-height: 1.15; margin: 1.2em 0 .45em; color: var(--navy); }
:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; }
h1 { font-size: 30px; margin-top: .4em; }
h2 { font-size: 22px; }
h3 { font-size: 17px; }
p { margin: .4em 0 .9em; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
main.wrap { padding-bottom: 56px; min-height: 70vh; }
main.wrap:has(+ .hero) { min-height: 0; padding-bottom: 0; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }
.lead { font-size: 1.15rem; max-width: 46em; }
.note { color: var(--muted); font-size: .9rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }

/* header: the family bar (family.js) above a slim header in the tools' style */
.site-header { position: sticky; top: 0; z-index: 30; background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line-strong); }
.header-inner { display: flex; align-items: center; gap: 16px; min-height: 48px; flex-wrap: wrap; padding-top: 4px; padding-bottom: 4px; }
.brand { color: var(--ink); text-decoration: none; font-family: var(--serif); font-size: 19px; font-weight: 400; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; }
.brand-mark { display: none; }
.nav { display: flex; gap: 2px; flex-wrap: wrap; flex: 1; }
.nav a { color: var(--ink-2); text-decoration: none; padding: 5px 10px; font-size: 13px; font-weight: 600; border-radius: 4px; }
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a.active { background: var(--petrol); color: #fff; }
.persona { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.persona a, .persona span { color: var(--ink-2); }
.persona select { font: inherit; padding: 4px 6px; border: 1px solid var(--line-strong); border-radius: 3px; background: #fff; color: var(--text); max-width: 280px; }
.here-now { font-size: 12.5px; color: var(--muted); }
.here-now b { color: var(--ink); font-weight: 600; }
.demo-banner { background: var(--mist-pale); color: var(--ink); font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.demo-banner .wrap { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* page head */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 22px 0 10px; }
.page-head h1 { margin: 0; }
.eyebrow { font-family: var(--font); text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; color: var(--label); font-weight: 800; }
.periodbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 4px; overflow: hidden; background: #fff; }
.seg a { padding: 5px 12px; text-decoration: none; color: var(--text); font-size: 13px; font-weight: 600; }
.seg a.on { background: var(--petrol); color: #fff; }
.step { padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: 4px; background: #fff; text-decoration: none; color: var(--text); font-size: 13px; }
.plabel { font-weight: 600; min-width: 150px; text-align: center; }

/* panels and tiles */
.panel { background: var(--surface); border: 1px solid var(--line-strong); padding: 18px 20px; margin: 16px 0; }
.panel > h2:first-child, .panel > h3:first-child { margin-top: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.panel-head h2 { margin: 0 0 8px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 12px 0; }
.tile { background: #fff; border: 1px solid var(--line-strong); padding: 14px 16px; border-top: 3px solid var(--petrol); }
.tile.bad { border-top-color: var(--coral); }
.tile.warn { border-top-color: var(--yellow); }
.tile-label { font-size: .85rem; color: var(--muted); }
.tile-value { font-family: var(--serif); font-size: 30px; font-weight: 400; color: var(--navy); line-height: 1.1; }
.tile-sub { font-size: .85rem; color: var(--muted); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid3 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.grid2 > .panel, .grid3 > .panel { margin: 0; }
@media (max-width: 860px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

/* tables */
.table-scroll { overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.list th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12px; background: var(--surface-2); border-bottom: 1px solid var(--line-strong); padding: 7px 8px; }
table.list th.num { text-align: right; }
table.list td { border-bottom: 1px solid var(--border); padding: 8px; vertical-align: top; }
table.list tr.cat td { background: var(--surface-2); font-weight: 600; color: var(--navy); font-size: .88rem; }
table.list tfoot td { font-weight: 600; border-top: 2px solid var(--border); border-bottom: 0; }
table.list input[type=number] { width: 72px; font: inherit; padding: 3px 6px; border: 1px solid var(--border); text-align: right; }

/* bars and status */
.bar { height: 10px; background: var(--surface-2); position: relative; min-width: 80px; }
.bar > span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--viridian); }
.bar.over > span { background: var(--coral); }
.tag { display: inline-block; font-size: 11.5px; padding: 1px 7px; background: var(--stone); color: var(--ink); font-weight: 600; white-space: nowrap; border-radius: 3px; }
.tag.failure { background: var(--bad-soft); color: var(--bad); }
.tag.ok { background: var(--ok-soft); color: var(--ok); }
.tag.warn { background: var(--warn-soft); color: var(--warn); }
.tag.crit { background: var(--mist-pale); color: var(--petrol); }
.flag { padding: 10px 12px; margin: 8px 0; background: var(--warn-soft); border-left: 4px solid var(--st-warn); }
.flag.bad { background: var(--bad-soft); border-left-color: var(--st-bad); }
.flag.ok { background: var(--ok-soft); border-left-color: var(--st-good); }
.flash { background: var(--mist-pale); border-left: 4px solid var(--petrol); padding: 10px 14px; margin: 14px 0; }
.reason { font-size: .82rem; color: var(--muted); }

/* people strip */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.person { border: 1px solid var(--border); padding: 8px 10px; background: #fff; display: flex; gap: 10px; align-items: center; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--petrol); color: #fff; display: grid; place-items: center; font-size: .76rem; font-weight: 600; flex: none; }
.avatar.away { background: var(--line-strong); }
.person .meta { font-size: .82rem; color: var(--muted); }

/* buttons and forms: as ui.css (sentence case, 13 px, 4 px corners); the main action is filled petrol */
.btn { display: inline-flex; align-items: center; gap: 6px; background: var(--petrol); color: #fff; border: 1px solid var(--petrol); border-radius: 4px; padding: 5px 12px; font: 600 13px var(--font); cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { background: var(--petrol-dark); border-color: var(--petrol-dark); color: #fff; }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--surface-2); color: var(--ink); border-color: var(--petrol); }
.btn-small { padding: 3px 9px; font-size: 12px; }
button.link { background: none; border: 0; padding: 0; color: var(--petrol); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font: inherit; font-weight: 600; }
form.inline { display: inline; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
label { display: block; font-weight: 600; font-size: 13px; color: var(--ink-2); margin: 8px 0; }
select, input[type=text], input[type=date], input[type=email], input[type=number], input[type=password], textarea { font: 14px var(--font); padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: 3px; background: #fff; color: var(--text); }

/* charts */
.chart { width: 100%; height: auto; display: block; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .85rem; color: var(--muted); margin-top: 6px; }
.legend i { display: inline-block; width: 14px; height: 4px; vertical-align: middle; margin-right: 5px; }

/* landing */
.hero { background: var(--paper); color: var(--ink); padding: 40px 0 28px; border-bottom: 1px solid var(--line); }
.hero h1 { color: var(--ink); font-size: 40px; line-height: 1.08; max-width: 16em; }
.hero .lead { color: var(--ink-2); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 18px 0; }
.card { background: #fff; border: 1px solid var(--line-strong); padding: 18px; border-top: 3px solid var(--ink); }
.card h3 { margin-top: 0; }
.personas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.personas button { text-align: left; background: #fff; border: 1px solid var(--line-strong); padding: 16px; cursor: pointer; font: inherit; color: var(--text); height: 100%; }
.personas button:hover { border-color: var(--petrol); box-shadow: 0 0 0 2px var(--mist); }
.personas strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 20px; color: var(--navy); margin-bottom: 4px; }

.site-footer { border-top: 1px solid var(--line-strong); padding: 16px 0 28px; font-size: 13px; color: var(--muted); }
.footer-inner { display: flex; gap: 18px; flex-wrap: wrap; }
.site-footer a { color: var(--muted); }

/* dark colour scheme, chosen per organisation: Night and Charcoal with Mist accents, as the other tools */
body.dark { --bg: #151414; --paper: #151414; --surface: #292827; --surface-2: #34312F; --border: #3D3A37; --line: #3D3A37; --line-strong: #514D49; --text: #F1ECE4; --ink: #F1ECE4; --ink-2: #D5CEC4; --muted: #A9A39C; --navy: #F1ECE4; --sea: var(--mist); --petrol: #2F5D67; --petrol-dark: #1E4B55; --label: var(--mist); --mist-pale: #24302F; --stone: #3D3A37; --ok-soft: var(--st-good-pale); --warn-soft: var(--st-warn-pale); --bad-soft: var(--st-bad-pale); }
body.dark a { color: var(--mist); }
body.dark .tile, body.dark .card, body.dark .person, body.dark .seg, body.dark .step, body.dark .personas button { background: var(--surface); color: var(--text); }
body.dark .seg a, body.dark .step { color: var(--text); }
body.dark input, body.dark select, body.dark textarea { background: #1E1D1C; color: var(--text); border-color: var(--line-strong); }
body.dark .btn-secondary { background: transparent; color: var(--text); border-color: var(--line-strong); }
body.dark .tag { color: var(--text); }
body.dark .nav a.active, body.dark .btn { color: #fff; }

/* Reports */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; border-bottom: 2px solid var(--border); }
.tabs a { padding: 8px 14px; text-decoration: none; color: var(--text); font-size: 13px; font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tabs a.on { border-color: var(--petrol); color: var(--navy); }
.tabs .sep { flex: 0 0 1px; background: var(--border); margin: 6px 6px; }
.criteria { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; }
.criteria label { display: flex; flex-direction: column; font-size: 13px; gap: 3px; margin: 0; }
.criteria select[multiple] { min-width: 200px; min-height: 74px; }
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; }
.chart-card h3 { margin: 0 0 6px; font-size: 16px; }
.chart-card .meta { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.chart-card details { font-size: 13px; margin-top: 6px; }
.chart-card table td, .chart-card table th { padding: 2px 6px; white-space: nowrap; }
.ds-table input, .ds-table select { max-width: 100%; }
@media (max-width: 520px) { .chart-grid { grid-template-columns: 1fr; } }
body.dark .tabs a.on { color: var(--text); }
.flash.bad { background: var(--bad-soft); border-left-color: var(--danger); }

/* custom period (bridge item 3) */
.custom-period { position: relative; }
.custom-period summary { list-style: none; cursor: pointer; font-size: 13px; font-weight: 600; }
.custom-period summary::-webkit-details-marker { display: none; }
.custom-period summary.on { background: var(--petrol); color: #fff; border-color: var(--petrol); }
.custom-form { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--surface); border: 1px solid var(--line-strong); padding: 10px 12px; display: flex; gap: 8px; align-items: end; box-shadow: 0 8px 24px rgba(32,30,29,.14); }
.custom-form label { margin: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.custom-period:not([open]) .custom-form { display: none; }

.sr { position: absolute; left: -9999px; }

/* work allocation board (bridge phase B): tasks left, people right, drag and drop */
.alloc-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.alloc-status-text { flex: 1 1 520px; }
.copy-from { position: relative; display: inline-block; }
.copy-from summary { list-style: none; }
.copy-from summary::-webkit-details-marker { display: none; }
.copy-from:not([open]) .custom-form { display: none; }
.alloc { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.alloc > .panel { margin: 0; }
.alloc-tasks { flex: 1 1 360px; min-width: 0; position: sticky; top: 8px; max-height: calc(100vh - 16px); overflow: auto; }
.alloc-people { flex: 999 1 600px; min-width: 0; }
.alloc-tasks h2, .alloc-people h2 { margin: 0 0 4px; }
.swatch { display: inline-block; width: 10px; height: 10px; margin-right: 7px; vertical-align: baseline; }
tr.alloc-task[draggable] { cursor: grab; }
tr.alloc-task.is-done td { color: var(--muted); }
tr.alloc-task.is-selected td { background: var(--mist-pale); }
tr.alloc-task.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--petrol); }
tr.alloc-task:focus-visible, tr.alloc-person:focus-visible { outline: 2px solid var(--petrol); outline-offset: -2px; }
tr.alloc-person.is-target { cursor: copy; }
tr.alloc-person.is-over td, #taskTable.is-over { background: var(--mist-pale); }
.left-bad { color: var(--danger) !important; font-weight: 600; }
.abar { display: flex; height: 28px; background: var(--free, #3F7A4A); border: 1px solid var(--line); min-width: 40px; overflow: hidden; }
.abar.load-none { background: var(--surface-2); }
#peopleTable { table-layout: fixed; }
#peopleTable th:nth-child(1) { width: 190px; } #peopleTable th:nth-child(2) { width: 90px; } #peopleTable th:nth-child(4) { width: 100px; }
.abar .aseg { display: block; flex: none; min-width: 0; box-sizing: border-box; height: 100%; padding: 0 6px; font-size: 12px; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid #fff; border-top: 4px solid transparent; cursor: pointer; background: var(--used, #A23B3B); color: #fff; }
.abar.load-near .aseg { background: var(--near, #D08A2A); color: #201E1D; }
.abar.load-over .aseg { background: var(--over, #7A1F1F); }
.abar.load-over { outline: 2px solid var(--over, #7A1F1F); outline-offset: 1px; }
.alloc-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; margin: 8px 0 0; }
.alloc-legend i { display: inline-block; width: 14px; height: 10px; margin-right: 5px; vertical-align: middle; }
.abar .aseg[draggable] { cursor: grab; }
.abar .aseg.is-locked { cursor: default; opacity: .75; background-image: repeating-linear-gradient(45deg, transparent 0 6px, rgba(255,255,255,.18) 6px 12px); }
.abar .aseg:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.alloc-dialog { max-width: 440px; width: calc(100% - 32px); border: 1px solid var(--line-strong); border-radius: 4px; padding: 18px 20px; color: var(--ink); background: var(--surface); }
.alloc-dialog::backdrop { background: rgba(32,30,29,.4); }
.alloc-dialog h3 { margin: 0 0 6px; }
.alloc-dialog input[type=number] { width: 120px; display: block; margin-top: 4px; font-size: 16px; }
#saveBtn.is-dirty { box-shadow: 0 0 0 3px var(--mist); }
.alloc-dialog [hidden], .alloc [hidden] { display: none !important; }
.breakdown { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
.breakdown h3 { margin: 0 0 2px; }
.breakdown-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 14px; margin: 8px 0; }
.breakdown-grid label { margin: 0; display: flex; flex-direction: column; gap: 3px; }

/* Notifications (bridge phase F) */
.notices{position:relative;margin-left:auto}
.notices>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:4px;padding:4px 6px;border-radius:4px;color:inherit}
.notices>summary::-webkit-details-marker{display:none}
.notices>summary:focus-visible{outline:2px solid var(--accent,#1E4B55)}
.notices-n{background:var(--bad,#8E2A2A);color:#fff;border-radius:9px;font-size:11px;line-height:16px;min-width:16px;padding:0 4px;text-align:center}
.notices-list{position:absolute;right:0;top:100%;z-index:20;min-width:280px;max-width:360px;background:var(--paper,#fff);border:1px solid var(--line,#ddd);box-shadow:0 4px 16px rgba(0,0,0,.12);padding:6px 0}
.notices-list a{display:block;padding:8px 12px;font-size:13px;color:inherit;text-decoration:none;border-bottom:1px solid var(--line,#eee)}
.notices-list a:last-child{border-bottom:0}
.notices-list a:hover{background:var(--soft,#f4f1ea)}
.notices-list p{margin:6px 12px}
@media (max-width:640px){.notices-list{right:-60px;min-width:240px}}
/* Personal calendar */
table.cal{width:100%;border-collapse:collapse;table-layout:fixed}
table.cal th{font-size:12px;font-weight:600;text-align:left;padding:4px 6px}
table.cal td{vertical-align:top;border:1px solid var(--line,#ddd);height:96px;padding:4px 6px;font-size:12px;overflow:hidden}
table.cal td.out{opacity:.45}
table.cal td.we{background:var(--soft,#f4f1ea)}
table.cal td.today{outline:2px solid var(--accent,#1E4B55);outline-offset:-2px}
.cal-day{display:flex;justify-content:space-between;font-weight:600;margin-bottom:2px}
.cal-h{font-weight:400;color:var(--muted,#666)}
.cal-tag{border-radius:3px;padding:1px 4px;margin:1px 0;font-size:11px}
.cal-tag.away{background:var(--ok-soft,#e5f0e8)}
.cal-tag.asked{background:var(--warn-soft,#f6ecd6)}
.cal-tag.closed{background:var(--line,#ddd)}
.cal-work{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leave-ask{margin-top:8px}
.leave-ask>summary{list-style:none;display:inline-block}
.leave-ask>summary::-webkit-details-marker{display:none}

/* Scorecard and feedback (bridge phase G) */
.sc{display:inline-block;padding:1px 6px;border-radius:3px}
.sc.met{background:var(--ok-soft,#e5f0e8)}
.sc.near{background:var(--warn-soft,#f6ecd6)}
.sc.missed{background:var(--bad-soft,#f3dede)}
.fb-bar{height:8px;background:var(--line,#e5e0d6);border-radius:2px}
.fb-bar span{display:block;height:8px;background:var(--accent,#1E4B55);border-radius:2px}
fieldset.days{border:0;padding:0;margin:0;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
fieldset.days legend{padding:0;margin-right:4px}
/* Mailbox page: what happened, step by step */
ol.steps-done{margin:0;padding-left:1.4em;display:grid;gap:10px}
ol.steps-done li{line-height:1.5}
ol.steps-done .reason{display:block}

/* Messages from CollabForce365 vs what people entered: names of tasks, people and teams are marked as the user's own words */
.ref{font-weight:600}
.ref::before{content:"\201C"}
.ref::after{content:"\201D"}
.problem{display:grid;gap:4px}
.problem-what{font-weight:600}
.problem-fix{font-size:.95em}

/* Skills: a main task done end to end, worked out from its subtasks */
td.derived{font-style:italic}
td.derived .reason{display:block;font-style:normal;font-size:11px}

input:disabled, select:disabled, textarea:disabled { background: var(--surface-2, #f1ece4); color: var(--muted, #6b6b6b); cursor: not-allowed; }

/* ServiceForce-style menu bar: Home, Configuration, Reporting, Daily data, Work allocation, Work overview, My work, My calendar */
.menu-bar { align-items: center; }
.menu-bar .home { margin: 0; display: inline-flex; align-items: center; padding: 4px 8px; }
.menu-bar details.menu { position: relative; }
.menu-bar details.menu > summary { list-style: none; cursor: pointer; color: var(--ink-2); padding: 5px 10px; font-size: 13px; font-weight: 600; border-radius: 4px; }
.menu-bar details.menu > summary::-webkit-details-marker { display: none; }
.menu-bar details.menu > summary::after { content: ""; display: inline-block; margin-left: 6px; vertical-align: 2px; border: 4px solid transparent; border-top-color: currentColor; border-bottom: 0; }
.menu-bar details.menu > summary:hover, .menu-bar details.menu[open] > summary { background: var(--surface-2); color: var(--ink); }
.menu-bar details.menu.active > summary { background: var(--petrol); color: #fff; }
.menu-bar .menu-list { position: absolute; top: calc(100% + 4px); left: 0; z-index: 50; min-width: 210px; background: var(--surface, #fff); border: 1px solid var(--line, #d9d2c5); border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.12); padding: 4px; display: flex; flex-direction: column; }
.menu-bar .menu-list a { display: block; font-weight: 400; color: var(--ink); padding: 7px 10px; }
.menu-bar .team-pick select, .menu-bar .team-name { margin-left: 8px; font-size: 13px; }
.menu-bar .team-name { color: var(--muted, #6b6b6b); padding: 5px 4px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.dark .menu-bar details.menu.active > summary { color: #fff; }
/* the menu has a row of its own under the brand, as in ServiceForce */
.header-inner .brand { margin-right: auto; }
.header-inner .menu-bar { justify-content: flex-start; gap: 2px; order: 10; flex: 1 1 100%; border-top: 1px solid var(--line, #e3dccf); padding-top: 4px; margin-top: 2px; }
.menu-bar .team-pick, .menu-bar .team-name { margin-left: auto; }
/* period bar: the calendar opens a date picker; the period containing the chosen date opens */
.go-date { margin: 0; }
.go-date label.step { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; cursor: pointer; padding: 3px 8px; }
.go-date input[type=date] { border: 0; padding: 0; font: inherit; font-size: 13px; background: transparent; color: inherit; width: 8.6em; }
.data-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; }

/* Status colours for the allocation bars (Alex, 5 Oct 2026: "just shades of brown"): clear traffic-light hues,
   and over 100% also striped, so it reads without relying on colour alone */
:root { --st-free: var(--st-good); --st-used: var(--st-bad); --st-near: var(--st-warn); }
.abar { background: var(--st-free); }
.abar .aseg { background-color: var(--st-used); color: #fff; }
.abar.load-near .aseg { background-color: var(--st-near); color: #1F1A12; }
.abar.load-over .aseg { background: var(--st-over-pattern); color: #fff; }
.abar.load-over { outline: 2px solid var(--st-over); }
.alloc-legend i.st-free { background: var(--st-free); } .alloc-legend i.st-used { background: var(--st-used); }
.alloc-legend i.st-near { background: var(--st-near); } .alloc-legend i.st-over { background: var(--st-over-pattern); }
.alloc-legend i { width: 18px; height: 12px; border-radius: 2px; }
/* Copy… panel on the allocation board */
.copy-panel { min-width: 320px; display: grid; gap: 8px; }
.copy-panel form { margin: 0; }
.copy-h { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: 4px; }
.copy-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.copy-pick, .copy-save label { display: grid; gap: 4px; font-weight: 400; font-size: 13px; }
.copy-save { display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 8px; }
.copy-row .link { font-size: 12px; font-weight: 400; }

/* Colour schemes (src/schemes.js): the page only. Status (--st-*) and chart (--cat-*) colours never change. */
body.scheme-slate { --bg: #EEF1F4; --paper: #EEF1F4; --surface-2: #E2E7ED; --stone: #D6DDE5; --line: #D3DAE2; --border: #D3DAE2; --line-strong: #B4BFCB; --petrol: #2F4A6B; --petrol-dark: #1F3350; --label: #4D6A8C; --sea: #4D6A8C; --mist-pale: #E4EBF3; }
body.scheme-harbour { --bg: #EAF4F4; --paper: #EAF4F4; --surface-2: #DCEDED; --stone: #CFE4E4; --line: #C9E0E0; --border: #C9E0E0; --line-strong: #A3C8C9; --petrol: #0F6E73; --petrol-dark: #0A5156; --label: #2E8A8F; --sea: #2E8A8F; --mist-pale: #DDEFEF; }
body.scheme-heather { --bg: #F3EFF6; --paper: #F3EFF6; --surface-2: #E9E2EF; --stone: #E0D6E8; --line: #DCD2E5; --border: #DCD2E5; --line-strong: #BFB0CD; --petrol: #5B3F7A; --petrol-dark: #432C5C; --label: #7A5E99; --sea: #7A5E99; --mist-pale: #ECE5F3; }
body.scheme-contrast { --bg: #FFFFFF; --paper: #FFFFFF; --surface: #FFFFFF; --surface-2: #F0F0F0; --stone: #E0E0E0; --line: #1A1A1A; --border: #1A1A1A; --line-strong: #000000; --text: #000000; --ink: #000000; --ink-2: #000000; --muted: #2B2B2B; --petrol: #003A70; --petrol-dark: #002147; --label: #003A70; --sea: #003A70; --mist-pale: #E6EEF6; }
body.scheme-contrast a { text-decoration: underline; }
body.scheme-contrast .btn, body.scheme-contrast input, body.scheme-contrast select, body.scheme-contrast .panel, body.scheme-contrast .tile { border-width: 2px; }
body.scheme-contrast :focus-visible { outline: 3px solid #000; outline-offset: 2px; }
/* Utilities */
a.util-card { display: block; text-decoration: none; color: inherit; } a.util-card:hover { border-color: var(--petrol); }
.util-card.is-soon { opacity: .75; }
.mixbar { display: flex; height: 14px; border-radius: 3px; overflow: hidden; margin: 10px 0 4px; gap: 2px; background: var(--surface-2); }
.mixbar span { display: block; height: 100%; min-width: 2px; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
#exSave label { display: grid; gap: 4px; margin: 8px 0; } #exSave input[type=text], #exSave textarea { width: 100%; box-sizing: border-box; }
#exRows .x-name { width: 100%; min-width: 220px; box-sizing: border-box; }
/* Time observation */
.ts-table input[type=text] { width: 100%; box-sizing: border-box; }
.ts-table .t-s, .ts-table .t-adj { width: 4.6em; min-width: 4.6em; text-align: right; padding: 3px 4px; }
.ts-table { min-width: 1350px; } .ts-table td, .ts-table th { padding-left: 4px; padding-right: 4px; }
.ts-table .t-name { min-width: 160px; } .ts-table .t-point { min-width: 120px; } .ts-table .t-kind { max-width: 140px; }
.ts-table .is-out { text-decoration: line-through; opacity: .5; }
.ts-table th.ts-s { white-space: nowrap; }
.ts-watch { position: sticky; bottom: 8px; z-index: 20; border: 2px solid var(--petrol); text-align: center; }
.ts-clock { font: 600 44px/1.1 var(--sans, Arial), sans-serif; font-variant-numeric: tabular-nums; }
.ts-chart { overflow-x: auto; color: var(--ink); }
.alloc-legend i.k-manual { background: #2a78d6; height: 5px; } .alloc-legend i.k-system { background: repeating-linear-gradient(90deg, #1baf7a 0 6px, transparent 6px 10px); height: 4px; }
.alloc-legend i.k-walking { background: #eb6834; height: 3px; border-radius: 3px; } .alloc-legend i.k-waiting { background: repeating-linear-gradient(45deg, #ECEAE6 0 3px, #8C8780 3px 5px); border: 1px solid #6B6661; }
.alloc-legend i.k-takt { background: #201E1D; width: 3px; height: 14px; }
#tsRemarks label { display: inline-grid; gap: 2px; margin: 6px 12px 0 0; }
@media print { .site-header, .family, .demo-banner, .ts-run, .t-del, #tsAdd, .actions, .ts-watch { display: none !important; } }
.ex-table .x-name { min-width: 200px; } .ex-table .x-count { width: 5em; } .ex-table .x-s { width: 4.4em; } .ex-table .x-min { width: 5.5em; }
.ex-table .x-min.is-calc { background: var(--surface-2); font-weight: 600; } .ex-table { min-width: 1080px; } .ex-table td, .ex-table th { padding-left: 3px; padding-right: 3px; }
/* TWI skill levels */
.twi-btn { background: none; border: 0; padding: 2px; cursor: pointer; color: var(--petrol); line-height: 0; border-radius: 50%; }
.twi-btn:hover, .twi-btn:focus-visible { outline: 2px solid var(--petrol); outline-offset: 1px; }
.twi-cell svg.twi, .twi-legend svg.twi, .twi-pick svg.twi { color: var(--petrol); vertical-align: middle; }
.twi-more { margin-left: 4px; text-decoration: none; color: var(--muted); }
.twi-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.twi-pick { border: 1px solid var(--line); border-radius: 4px; padding: 8px 12px; margin: 0 0 10px; } .twi-pick label { display: flex; gap: 8px; align-items: center; font-weight: 400; margin: 4px 0; }
.four-ratings { margin: 6px 0 10px; }
.twi-low { display: inline-block; margin-left: 2px; color: var(--st-warn-ink); font-weight: 700; }
/* Training plan (item 9) */
.grid-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 14px; }
.grid-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.tag.bad { background: color-mix(in srgb, var(--st-bad, #c0392b) 16%, transparent); color: var(--st-bad, #c0392b); }
tr.muted td { color: var(--muted); }
/* Standard work, Job Instruction breakdown (item 11) */
.ji-table textarea { width: 100%; min-width: 160px; font: inherit; resize: vertical; }
.ji-table td { vertical-align: top; }
/* Work allocation: several tasks that can't be covered fold into one line that opens (Alex, 5 Oct 2026) */
details.problems-sum > summary { list-style: none; cursor: pointer; margin: 8px 0 0; }
details.problems-sum > summary::-webkit-details-marker { display: none; }
details.problems-sum > summary .problems-more { color: var(--petrol); text-decoration: underline; font-weight: 600; white-space: nowrap; }
details.problems-sum[open] > summary .problems-more { display: none; }
details.problems-sum > .problem { margin-left: 16px; }
/* phones: the menu folds behind a Menu button; the header no longer stays fixed at the top, so the work has the screen */
.menu-toggle { display: none; }
@media (max-width: 700px) {
  .site-header { position: static; }
  .header-inner { gap: 8px; }
  .menu-toggle { display: inline-flex; align-items: center; gap: 6px; order: 5; font: 600 13px Arial, Helvetica, sans-serif; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface, #fff); color: var(--ink); cursor: pointer; min-height: 40px; }
  .header-inner .menu-bar { display: none; }
  .header-inner .menu-bar.open { display: flex; flex-direction: column; align-items: stretch; }
  .menu-bar.open > a, .menu-bar.open details.menu > summary { padding: 10px 10px; }
  .menu-bar.open .menu-list { position: static; box-shadow: none; border: 0; padding-left: 14px; }
  .menu-bar.open .team-pick, .menu-bar.open .team-name { margin-left: 0; }
  .persona { flex-wrap: wrap; flex: 1 1 100%; order: 6; }
  .persona select { max-width: 100%; flex: 1 1 200px; }
}
/* grid columns may shrink below their widest table, which then scrolls inside its own box (phones) */
.grid2 > *, .grid3 > *, .grid4 > *, .cards > *, .stats > * { min-width: 0; }
/* phones: less padding, compact warning, controls on one row, task list tighter (Alex, 5 Oct 2026: "wasted space") */
@media (max-width: 700px) {
  .panel { padding: 12px 14px; margin: 12px 0; }
  .alloc-status { gap: 8px; font-size: 14px; }
  .alloc-status .actions { gap: 6px; flex-wrap: wrap; }
  .alloc-status .btn-small, .alloc-status .actions .btn { padding: 6px 9px; font-size: 13px; min-height: 36px; }
  details.problems-sum { margin: 0; }
  details.problems-sum > summary.problem { margin: 4px 0 0; padding: 6px 10px; font-size: 13px; line-height: 1.35; }
  details.problems-sum > summary .problems-more { display: inline; margin-left: 4px; }
  details.problems-sum > .problem { margin-left: 0; }
  .alloc-tasks h2, .alloc-people h2 { font-size: 1.15rem; }
  #taskTable th, #taskTable td { padding: 6px 6px; font-size: 14px; }
  #taskTable th { font-size: 12px; }
  #taskTable tr.cat td { padding: 4px 6px; font-size: 13px; }
  #taskTable .reason { font-size: 11.5px; line-height: 1.3; }
  #taskTable .tag { font-size: 11px; padding: 0 5px; }
  #peopleTable th, #peopleTable td { padding: 6px 6px; }
  .alloc-legend { font-size: 12px; gap: 6px 10px; }
}
/* demo notice: one short line on phones */
.db-short { display: none; }
@media (max-width: 700px) {
  .demo-banner { font-size: 12.5px; padding: 4px 0; }
  .demo-banner .wrap { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .demo-banner .db-more { display: none; }
  .demo-banner .db-short { display: inline; }
  .page-head { margin: 12px 0 8px; gap: 8px; }
  .page-head h1 { font-size: 1.7rem; margin: 0; }
  .seg a { padding: 6px 10px; font-size: 13px; }
  nav.tabs a { padding: 6px 10px; font-size: 14px; }
  .twi-legend { font-size: 12px; line-height: 1.6; display: flex; flex-wrap: wrap; gap: 2px 10px; }
  .twi-legend svg { width: 12px; height: 12px; }
  .twi-legend .muted { display: none; }
  .twi-cell { padding: 6px 4px !important; }
  .twi-cell .twi-more { font-size: 11px; }
  table.list th:first-child, table.list td:first-child { min-width: 130px; }
}
@media (max-width: 700px) {
  .demo-banner .wrap { flex-wrap: nowrap; }
  .demo-banner .wrap > span { min-width: 0; }
  .demo-banner form { flex: none; white-space: nowrap; }
  table.list th, table.list td { padding: 7px 6px; font-size: 14px; }
  table.list th { font-size: 12px; }
}
/* initials in table headings: tap for the full name */
button.ini { all: unset; cursor: pointer; font: inherit; color: inherit; padding: 4px 2px; border-bottom: 1px dotted currentColor; }
button.ini:focus-visible { outline: 2px solid var(--petrol, #1E4B55); outline-offset: 2px; }
.ini-pop { width: auto !important; white-space: nowrap; font-weight: 600; padding: 6px 10px !important; }

/* Where demand comes from (Organisation): how it flows, sources as cards, set-up folded away */
ol.flow { list-style: none; margin: 14px 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; counter-reset: none; }
ol.flow li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); position: relative; }
ol.flow li + li { border-left: 0; }
ol.flow li:not(:last-child)::after { content: ''; position: absolute; right: -9px; top: 50%; width: 16px; height: 16px; background: var(--surface-2); border-top: 1px solid var(--line); border-right: 1px solid var(--line); transform: translateY(-50%) rotate(45deg); z-index: 1; }
ol.flow .flow-n { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--petrol); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; }
ol.flow b { display: block; font-size: 14px; }
ol.flow span:not(.flow-n) { display: block; font-size: 13px; color: var(--muted); line-height: 1.4; }
.sources { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin: 8px 0 4px; }
.source { background: var(--surface); border: 1px solid var(--line-strong); border-left: 3px solid var(--petrol); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.source-name { font-size: 14px; }
.source-status { font-size: 12.5px; color: var(--muted); }
.sources { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .sources { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .sources { grid-template-columns: 1fr; } }
.privacy-note { margin: 14px 0; padding: 8px 12px; border-left: 3px solid var(--line-strong); background: var(--surface-2); }
table.inboxes td.mbx { min-width: 260px; }
table.inboxes .mbx-task { font-size: 13px; margin: 2px 0; }
table.inboxes td.mbx-actions form { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
table.inboxes td.mbx-actions .link { white-space: nowrap; }
.addbox { border: 1px dashed var(--line-strong); padding: 10px 14px; margin: 12px 0; }
.addbox h4 { margin: 0 0 6px; font-size: 14px; }
.source dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 13px; }
.source dt { color: var(--label); font-weight: 600; }
.source dd { margin: 0; }
.source > a { margin-top: auto; align-self: flex-start; }
details.setup { border: 1px solid var(--line-strong); margin: 8px 0; background: var(--surface); }
details.setup > summary { padding: 10px 14px; font-weight: 600; cursor: pointer; }
details.setup[open] > summary { border-bottom: 1px solid var(--line); }
details.setup .setup-body { padding: 4px 14px 12px; }
@media (max-width: 760px) {
  ol.flow { grid-template-columns: 1fr; }
  ol.flow li + li { border-left: 1px solid var(--line); border-top: 0; }
  ol.flow li:not(:last-child)::after { right: auto; left: 22px; top: auto; bottom: -9px; transform: rotate(135deg); }
}
table.inboxes td.mbx-actions .link { font-size: 13px; font-weight: 400; }
@media (max-width: 600px) { #mailboxes .tiles { grid-template-columns: 1fr 1fr; } #mailboxes .tile-value { font-size: 24px; } }
table.inboxes td.mbx .tag { white-space: normal; }

/* Where demand comes from: each horizontal section in its own band, within the palette (petrol, mist, sand,
   amber, turtle); tints mixed with the surface so the night and contrast schemes still read */
ol.flow li { background: var(--petrol); border-color: var(--petrol-dark); color: #fff; }
ol.flow li:not(:last-child)::after { background: var(--petrol); border-color: var(--petrol-dark); }
ol.flow .flow-n { background: #fff; color: var(--petrol); }
ol.flow span:not(.flow-n) { color: var(--mist-pale); }
ol.flow li:nth-child(2) { background: var(--petrol-dark); }
ol.flow li:nth-child(2)::after { background: var(--petrol-dark); }
.demand-tiles .t-in { border-top-color: var(--label); background: color-mix(in srgb, var(--mist) 18%, var(--surface)); }
.demand-tiles .t-done { border-top-color: var(--turtle); background: color-mix(in srgb, var(--turtle) 10%, var(--surface)); }
.demand-tiles .t-warn { background: color-mix(in srgb, var(--yellow) 12%, var(--surface)); }
.demand-tiles .t-ok { border-top-color: var(--turtle); }
.band { margin: 14px -20px; padding: 6px 20px 14px; border-top: 1px solid var(--line); }
.band > h3.sub:first-child { margin-top: 8px; display: flex; align-items: center; gap: 8px; }
.band > h3.sub:first-child::before { content: ''; width: 10px; height: 10px; border-radius: 2px; background: var(--band-accent, var(--petrol)); }
.band .source { border-left-color: var(--band-accent, var(--petrol)); }
.band-email { --band-accent: var(--petrol); background: color-mix(in srgb, var(--mist) 22%, var(--surface)); }
.band-systems { --band-accent: var(--amber); background: color-mix(in srgb, var(--stone) 45%, var(--surface)); }
.band-files { --band-accent: var(--turtle); background: color-mix(in srgb, var(--turtle) 9%, var(--surface)); }
.band-inboxes { --band-accent: var(--label); background: var(--surface); }
.band-inboxes table.list thead th { background: color-mix(in srgb, var(--mist) 30%, var(--surface)); }
.band-setup { --band-accent: var(--ink-2); background: var(--surface-2); }
.band-setup details.setup > summary { border-left: 3px solid var(--band-accent); }
@media (max-width: 600px) { .band { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; } }
.bd-cell { display: flex; flex-direction: column; gap: 4px; }
.bd-complex { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.bd-complex input { width: 6em; }
.demand-tiles .t-wait { border-top-color: var(--petrol); background: color-mix(in srgb, var(--petrol) 7%, var(--surface)); }
.band-sorting { --band-accent: var(--pink); background: color-mix(in srgb, var(--pink) 9%, var(--surface)); }
.sort-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 760px) { .sort-grid { grid-template-columns: 1fr; } }
table.codes td code { font-size: 13px; background: var(--surface-2); padding: 1px 5px; }
/* Costing method: the two methods as clear choices, the cost breakdown as its own field */
.cost-method { display: grid; gap: 14px; max-width: 760px; }
.cost-method fieldset.choice { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.cost-method legend { font-weight: 600; margin-bottom: 6px; }
.cost-method fieldset.choice label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; padding: 8px 10px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.cost-method fieldset.choice label:has(input:checked) { border-color: var(--petrol); background: color-mix(in srgb, var(--mist) 18%, var(--surface)); }
.cost-method fieldset.choice input { margin-top: 3px; }
.cost-method fieldset.choice .reason { display: block; }
.cost-method .cost-object { display: grid; gap: 4px; font-weight: 600; }
.cost-method .cost-object input { max-width: 360px; }
.cost-method .cost-object .reason { font-weight: 400; }
.cost-method .btn { justify-self: start; }
.bd-unid label:first-child { color: var(--amber); }
/* Subject code helper */
.helper-form { display: grid; gap: 10px; max-width: 760px; }
.helper-form textarea { width: 100%; }
.helper-result { margin-top: 16px; }
.rec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.rec { border: 1px solid var(--line-strong); border-top: 3px solid var(--petrol); padding: 10px 12px; background: var(--surface); }
.rec.t-warn { border-top-color: var(--yellow); background: color-mix(in srgb, var(--yellow) 10%, var(--surface)); }
.rec-v { font-family: var(--serif); font-size: 20px; margin: 2px 0; }
.copy-line { display: grid; gap: 4px; margin-top: 12px; max-width: 760px; font-weight: 600; }
.copy-row { display: flex; gap: 8px; }
.copy-row input { flex: 1; }