/* insanONE demo: application components on top of base.css (shared with insan.one). */

:root {
  --ok-fg: #166534; --ok-bg: #f0fdf4; --ok-bd: #86efac;
  --warn-fg: #92400e; --warn-bg: #fffbeb; --warn-bd: #fcd34d;
  --bad-fg: #b91c1c; --bad-bg: #fef2f2; --bad-bd: #fca5a5;
  --info-fg: #1e40af; --info-bg: #eff6ff; --info-bd: #93c5fd;
  --weekend: #ededed; --holiday: #e0e7ff;
  --cal-annual: #1d4ed8; --cal-annual-fg: #ffffff; --cal-sick: #fbbf24; --cal-pending: #6b7280;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode]) {
    --ok-fg: #86efac; --ok-bg: #0f2418; --ok-bd: #166534;
    --warn-fg: #fcd34d; --warn-bg: #2a2210; --warn-bd: #92400e;
    --bad-fg: #fca5a5; --bad-bg: #2a1215; --bad-bd: #991b1b;
    --info-fg: #93c5fd; --info-bg: #15265a; --info-bd: #1e40af;
    --weekend: #182650; --holiday: #172554;
    --cal-annual: #3b82f6; --cal-annual-fg: #0a0a0a; --cal-sick: #f59e0b; --cal-pending: #9ca3af;
  }
}
:root[data-mode="dark"] {
  --ok-fg: #86efac; --ok-bg: #0f2418; --ok-bd: #166534;
  --warn-fg: #fcd34d; --warn-bg: #2a2210; --warn-bd: #92400e;
  --bad-fg: #fca5a5; --bad-bg: #2a1215; --bad-bd: #991b1b;
  --info-fg: #93c5fd; --info-bg: #15265a; --info-bd: #1e40af;
  --weekend: #182650; --holiday: #172554;
  --cal-annual: #3b82f6; --cal-annual-fg: #0a0a0a; --cal-sick: #f59e0b; --cal-pending: #9ca3af;
}
@media (prefers-contrast: more) {
  :root:not([data-mode]) {
    --ok-fg: #ffff00; --ok-bg: #000; --ok-bd: #ffff00; --warn-fg: #ffff00; --warn-bg: #000; --warn-bd: #ffff00;
    --bad-fg: #ffff00; --bad-bg: #000; --bad-bd: #ffff00; --info-fg: #ffff00; --info-bg: #000; --info-bd: #ffff00;
    --weekend: #2b2b2b; --holiday: #3a3a00; --cal-annual: #ffff00; --cal-annual-fg: #000000; --cal-sick: #ffffff; --cal-pending: #ffff00;
  }
}
:root[data-mode="contrast"] {
  --ok-fg: #ffff00; --ok-bg: #000; --ok-bd: #ffff00; --warn-fg: #ffff00; --warn-bg: #000; --warn-bd: #ffff00;
  --bad-fg: #ffff00; --bad-bg: #000; --bad-bd: #ffff00; --info-fg: #ffff00; --info-bg: #000; --info-bd: #ffff00;
  --weekend: #2b2b2b; --holiday: #3a3a00; --cal-annual: #ffff00; --cal-annual-fg: #000000; --cal-sick: #ffffff; --cal-pending: #ffff00;
}

/* ---------- header additions ---------- */
.demo-tag {
  display: inline-flex; align-items: center; margin-inline-start: 0.625rem; padding: 0.125rem 0.5rem;
  border: 1px solid var(--control); border-radius: 999px; font-size: 0.75rem; font-weight: 600; color: var(--muted);
  letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle;
}
.who { font-size: 0.875rem; color: var(--muted); display: none; }
@media (min-width: 60rem) { .who { display: inline; } }
.brand { gap: 0.25rem; }

/* ---------- page frame ---------- */
.app-main { padding-block: clamp(1.5rem, 1rem + 2vw, 2.75rem) 4rem; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.75rem; }
.page-head h1 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
.page-head .sub { color: var(--muted); margin-top: 0.375rem; max-width: 46rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.home-head .sub { margin-top: 0; font-size: 1.125rem; }
.crumb { font-size: 0.9375rem; margin-bottom: 0.5rem; display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; }
.crumb svg { width: 1rem; height: 1rem; }
[dir="rtl"] .crumb svg { transform: scaleX(-1); }

.grid { display: grid; gap: 1.25rem; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span2 { grid-column: span 2; }
@container page (max-width: 48rem) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container page (max-width: 40rem) { .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); } .span2 { grid-column: auto; } }
.stack { display: grid; gap: 1.25rem; align-content: start; }

.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: 1rem; padding: 1.25rem 1.375rem; display: grid; gap: 0.875rem; align-content: start; min-width: 0; }
.panel > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; }
.panel h2 { font-size: 1.1875rem; font-weight: 600; letter-spacing: 0; }
.panel h3 { font-size: 1rem; }
.panel .hint { color: var(--muted); font-size: 0.9375rem; }
:root[data-mode="contrast"] .panel { border-width: 2px; }

.kpi { display: grid; gap: 0.25rem; }
.kpi .k-label { color: var(--muted); font-size: 0.875rem; }
.kpi .k-value { font-size: 1.75rem; line-height: 1.15; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.kpi .k-note { font-size: 0.875rem; color: var(--muted); }

.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.row { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; }
.spread { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between; }

/* status: always icon + words, never colour alone */
.status { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.1875rem 0.625rem; border-radius: 999px; border: 1px solid; font-size: 0.8125rem; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.status svg { width: 0.95rem; height: 0.95rem; flex: none; }
.status.ok { color: var(--ok-fg); background: var(--ok-bg); border-color: var(--ok-bd); }
.status.warn { color: var(--warn-fg); background: var(--warn-bg); border-color: var(--warn-bd); }
.status.bad { color: var(--bad-fg); background: var(--bad-bg); border-color: var(--bad-bd); }
.status.info { color: var(--info-fg); background: var(--info-bg); border-color: var(--info-bd); }

/* lists of items */
.items { list-style: none; display: grid; }
.item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1rem; padding-block: 0.875rem; border-top: 1px solid var(--rule); align-items: start; }
.item:first-child { border-top: 0; padding-top: 0.25rem; }
.item .title { font-weight: 600; }
.item .detail { color: var(--muted); font-size: 0.9375rem; grid-column: 1; }
.item .side { grid-row: 1 / span 2; grid-column: 2; display: grid; gap: 0.5rem; justify-items: end; align-content: start; }
.item .actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 0.25rem; }

/* tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 0.75rem; min-width: 0; max-width: 100%; }
.panel > *, .stack > *, .grid > * { min-width: 0; }
.panel, .stack { grid-template-columns: minmax(0, 1fr); }
.table-wrap, .cal-wrap { position: relative; }
#main h1[tabindex="-1"]:focus { outline: none; }
table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; }
caption { text-align: start; padding: 0.75rem 1rem; font-weight: 600; }
th, td { padding: 0.625rem 0.875rem; text-align: start; border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th { font-size: 0.8125rem; font-weight: 600; color: var(--muted); background: var(--bg-alt); white-space: nowrap; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
tfoot td, tfoot th { font-weight: 600; border-top: 2px solid var(--rule); border-bottom: 0; }
tbody th { font-weight: 600; }

/* buttons in app */
.btn-sm { min-height: 2.5rem; padding: 0.375rem 0.95rem; font-size: 0.9375rem; border-width: 1px; }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--control); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
button.btn { cursor: pointer; font-family: inherit; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* tiles (quick links) */
.tiles { list-style: none; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.tiles li { display: grid; }
.tile { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.125rem 0.875rem; align-items: center; padding: 1rem 1.125rem; border: 1px solid var(--rule); border-radius: 1rem; background: var(--surface); color: var(--fg); text-decoration: none; min-height: 5rem; }
.tile:hover { border-color: var(--brand); }
.tile .icon { grid-row: span 2; width: 2.75rem; height: 2.75rem; }
.tile strong { font-weight: 600; }
.tile span { color: var(--muted); font-size: 0.875rem; line-height: 1.4; }

/* stepper (payroll stages) */
.stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; counter-reset: step; }
.stepper li { padding: 0.75rem 0.875rem; border: 1px solid var(--rule); border-radius: 0.75rem; display: grid; gap: 0.125rem; background: var(--bg); }
.stepper li[aria-current="step"] { border: 2px solid var(--brand); background: var(--surface); }
.stepper .s-name { font-weight: 600; }
.stepper .s-date { font-size: 0.875rem; color: var(--muted); }
.stepper .done .s-name::before { content: "✓ "; color: var(--ok-fg); }
@container page (max-width: 40rem) { .stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* meters */
.meter { height: 0.625rem; border-radius: 999px; background: var(--bg-alt); overflow: hidden; border: 1px solid var(--rule); }
.meter > span { display: block; height: 100%; background: var(--brand); border-radius: inherit; }
.hbars { list-style: none; display: grid; gap: 0.625rem; }
.hbar { display: grid; grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; font-size: 0.9375rem; }
.hbar .track { height: 1.25rem; background: var(--bg-alt); border-radius: 0.375rem; overflow: hidden; }
.hbar .fill { display: block; height: 100%; background: var(--brand); border-radius: 0.375rem; }
.hbar .fill.alt { background: var(--muted); }

/* definition lists */
.facts-list { display: grid; grid-template-columns: minmax(8rem, min(40%, max-content)) minmax(0, 1fr); gap: 0.5rem 1.25rem; margin: 0; }
.facts-list dt { color: var(--muted); font-size: 0.9375rem; }
.facts-list dd { margin: 0; font-weight: 500; }
@media (max-width: 30rem) { .facts-list { grid-template-columns: minmax(0, 1fr); } .facts-list dd { margin-bottom: 0.5rem; } }

/* person header */
.person-head { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; align-items: center; }
.avatar { width: 3.5rem; height: 3.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--icon-bg); border: 1px solid var(--icon-ring); color: var(--icon-glyph); font-weight: 600; font-size: 1.125rem; flex: none; }
.avatar.sm { width: 2.25rem; height: 2.25rem; font-size: 0.8125rem; }
.who-cell { display: flex; align-items: center; gap: 0.75rem; white-space: nowrap; }
.who-cell .sub-line { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--muted); }

/* forms */
.field { display: grid; gap: 0.375rem; }
.field label { font-weight: 600; font-size: 0.9375rem; }
.field input, .field select, .field textarea {
  font: inherit; color: var(--fg); background: var(--surface); border: 1px solid var(--control); border-radius: 0.625rem;
  padding: 0.625rem 0.75rem; min-height: 2.75rem; width: 100%;
}
.field .help { font-size: 0.875rem; color: var(--muted); }
.form-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); align-items: end; }
.notice { padding: 0.875rem 1rem; border-radius: 0.75rem; border: 1px solid var(--info-bd); background: var(--info-bg); color: var(--fg); display: flex; gap: 0.75rem; align-items: flex-start; }
.notice svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--info-fg); margin-top: 0.15rem; }
.notice.warn { border-color: var(--warn-bd); background: var(--warn-bg); }
.notice.warn svg { color: var(--warn-fg); }

/* availability calendar */
.cal-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 0.75rem; }
.cal { border-collapse: separate; border-spacing: 0; font-size: 0.8125rem; width: max-content; min-width: 100%; }
.cal th, .cal td { padding: 0; border-bottom: 1px solid var(--rule); border-inline-end: 1px solid var(--rule); text-align: center; }
.cal thead th { padding: 0.375rem 0; min-width: 2rem; font-weight: 600; }
.cal thead th .dow { display: block; font-weight: 400; color: var(--muted); font-size: 0.75rem; }
.cal tbody th { position: sticky; inset-inline-start: 0; background: var(--surface); text-align: start; padding: 0.5rem 0.75rem; white-space: nowrap; min-width: 10rem; z-index: 1; }
.cal td { height: 2.5rem; min-width: 2rem; }
.cal .we { background: var(--weekend); }
.cal .ph { background: var(--holiday); }
.cal .today-col { box-shadow: inset 0 0 0 2px var(--brand); }
.cal .mark { display: grid; place-items: center; width: 100%; height: 100%; font-weight: 700; font-size: 0.75rem; }
.cal .mark.annual { background: var(--cal-annual); color: var(--cal-annual-fg); }
.cal .mark.sick { background: var(--cal-sick); color: #000; }
.cal .mark.pending { background: repeating-linear-gradient(135deg, transparent 0 4px, var(--rule) 4px 8px); color: var(--fg); border: 1px dashed var(--cal-pending); }
.legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.875rem; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 0.375rem; }
.swatch-box { width: 1rem; height: 1rem; border-radius: 0.25rem; display: inline-block; border: 1px solid var(--rule); }

/* code / SIF */
.code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; line-height: 1.6; background: var(--bg-alt); border: 1px solid var(--rule); border-radius: 0.75rem; padding: 1rem; overflow-x: auto; white-space: pre; direction: ltr; text-align: left; }

/* role picker */
.roles { list-style: none; display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 52rem) { .roles { grid-template-columns: minmax(0, 1fr); } }
.role-card { display: grid; gap: 0.75rem; align-content: start; padding: 1.5rem; border: 1px solid var(--rule); border-radius: 1rem; background: var(--surface); height: 100%; }
.role-card h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: 0; }
.role-card ul { padding-inline-start: 1.1rem; color: var(--muted); display: grid; gap: 0.25rem; font-size: 0.9375rem; }
.role-card .btn { justify-self: start; margin-top: 0.25rem; }

.advisory { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.advisory svg { width: 1rem; height: 1rem; }

.explain { list-style: none; display: grid; gap: 0.75rem; counter-reset: ex; }
.explain li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0.625rem; }
.explain li::before { counter-increment: ex; content: counter(ex); width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--icon-bg); color: var(--icon-glyph); font-size: 0.8125rem; font-weight: 600; border: 1px solid var(--icon-ring); }

.toast { position: fixed; inset-inline: 1rem; bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem); margin-inline: auto; max-width: 28rem; z-index: 60; padding: 0.875rem 1.125rem; border-radius: 0.75rem; background: var(--fg); color: var(--bg); box-shadow: var(--shadow); font-weight: 600; }
:root[data-mode="contrast"] .toast { background: #000; color: #ffff00; border: 2px solid #ffff00; }

.menu nav h3 { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-top: 1rem; }
.menu nav h3:lang(ar) { letter-spacing: 0; text-transform: none; font-size: 0.9375rem; }
.menu nav a { font-size: 1.0625rem; min-height: 2.9rem; }
.menu .reset-demo { margin-top: 0.25rem; }

/* worker record: sticky identity bar, tabs, view and edit */
.record { display: grid; gap: 1rem; }
.record-bar { position: sticky; top: var(--hdr-h, 0px); z-index: 5; background: var(--bg); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding: 0.875rem 0; border-bottom: 1px solid var(--rule); }
:root.large-text .record-bar { position: static; }
.record-who { display: flex; align-items: center; gap: 0.875rem; min-width: 0; }
.record-who h1 { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem); line-height: 1.2; }
.record-who p { margin-top: 0.25rem; }
.record-alt { display: inline-block; font-size: 0.7em; font-weight: 500; color: var(--muted); margin-inline-start: 0.5rem; }
.record-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.lock-note { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--muted); margin-inline-end: 0.5rem; }
.lock-note svg { width: 1rem; height: 1rem; flex: none; }
.is-editing .record-bar { border-bottom: 2px solid var(--brand); }
.tabs { display: flex; flex-wrap: wrap; gap: 0 0.25rem; border-bottom: 1px solid var(--rule); }
.tabs [role="tab"] { font: inherit; font-size: 0.9375rem; font-weight: 500; color: var(--muted); background: none; border: 0; border-bottom: 3px solid transparent; padding: 0.625rem 0.875rem; min-height: 2.75rem; white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; gap: 0.375rem; }
.tabs [role="tab"]:hover { color: var(--fg); }
.tabs [role="tab"][aria-selected="true"] { color: var(--fg); font-weight: 600; border-bottom-color: var(--brand); }
.tab-err { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--bad-bg); color: var(--bad-fg); border: 1px solid var(--bad-bd); font-size: 0.75rem; font-weight: 700; }
.tabpanel form { display: grid; gap: 1.25rem; min-width: 0; }
.subpanel { border: 1px solid var(--rule); border-radius: 0.75rem; padding: 1rem 1.125rem; display: grid; gap: 0.875rem; }
.subpanel h3 { font-size: 1.0625rem; }
.spread { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.fs { border: 1px solid var(--rule); border-radius: 0.75rem; padding: 0.875rem 1.125rem 1.125rem; margin: 0; min-width: 0; }
.fs legend { font-weight: 600; padding-inline: 0.375rem; }
.form-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); align-items: start; }
.req { color: var(--bad-fg); }
.field-error { display: flex; align-items: flex-start; gap: 0.375rem; color: var(--bad-fg); font-weight: 600; font-size: 0.875rem; }
.field-error svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.15rem; }
.has-error input, .has-error select { border: 2px solid var(--bad-fg); }
.error-summary { border: 2px solid var(--bad-fg); background: var(--bad-bg); border-radius: 0.75rem; padding: 1rem 1.25rem; display: grid; gap: 0.5rem; }
.error-summary h2 { font-size: 1.0625rem; color: var(--bad-fg); }
.error-summary ul { padding-inline-start: 1.1rem; display: grid; gap: 0.25rem; }
.error-summary a { color: var(--bad-fg); font-weight: 600; }
.dialog-wrap { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 1rem; background: rgba(0, 0, 0, 0.55); }
.dialog { background: var(--surface); color: var(--fg); border: 1px solid var(--rule); border-radius: 1rem; padding: 1.5rem; max-width: 30rem; width: 100%; display: grid; gap: 1rem; box-shadow: var(--shadow); }
.dialog h2 { font-size: 1.25rem; }
:root[data-mode="contrast"] .dialog { border: 2px solid #ffff00; }

/* pay elements, actions and payslip detail */
.btn-xs { min-height: 2.25rem; padding: 0.25rem 0.7rem; font-size: 0.875rem; border-width: 1px; }
.status.neutral { color: var(--muted); background: transparent; border-color: var(--rule); }
:root[data-mode="contrast"] .status.neutral { color: #ffff00; border-color: #ffff00; }
.el-table td.acts { white-space: nowrap; }
.el-table td.acts .btn + .btn { margin-inline-start: 0.375rem; }
tr.is-ended > * { color: var(--muted); }
tr.is-acting > * { background: var(--info-bg); }
.subpanel.is-ended { border-style: dashed; }
.action-form { border: 2px solid var(--brand); border-radius: 0.75rem; padding: 1rem 1.125rem; display: grid; gap: 0.875rem; background: var(--surface); }
.action-form h4 { font-size: 1rem; font-weight: 600; }
.changes { border: 1px solid var(--info-bd); background: var(--info-bg); border-radius: 0.75rem; padding: 0.875rem 1.125rem; display: grid; gap: 0.5rem; }
.changes h3 { font-size: 1rem; }
.changes ol { padding-inline-start: 1.2rem; display: grid; gap: 0.25rem; }
.tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; }
.tag { font-size: 0.75rem; font-weight: 500; color: var(--muted); border: 1px solid var(--rule); border-radius: 999px; padding: 0 0.5rem; }
table.slip td.calc, td.calc { font-size: 0.875rem; color: var(--muted); min-width: 14rem; }
table tfoot tr.net th, table tfoot tr.net td { font-size: 1.0625rem; font-weight: 700; }
.net-line { font-size: 1.125rem; }
details.more { border: 1px solid var(--rule); border-radius: 0.75rem; padding: 0.625rem 0.875rem; font-size: 0.9375rem; }
details.more summary { cursor: pointer; font-weight: 600; min-height: 2rem; display: flex; align-items: center; }
details.more p { margin-top: 0.5rem; color: var(--muted); }
.chain { padding-inline-start: 1.2rem; display: grid; gap: 0.5rem; }
@media print {
  .record-bar, .tabs, .crumb, [data-print], .advisory, .toast { display: none !important; }
  .panel { break-inside: avoid; border-color: #999; }
  .grid.g4, .grid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .record-bar { position: static; } .record-actions { width: 100%; }
  .tabs { gap: 0.5rem; border-bottom: 0; }
  .tabs [role="tab"] { border: 1px solid var(--rule); border-radius: 999px; padding: 0.375rem 0.875rem; font-size: 0.875rem; }
  .tabs [role="tab"][aria-selected="true"] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
}

@media print {
  .site-header, .menu, .scrim, .no-print { display: none !important; }
}
.facts-list dd .status { white-space: normal; }
html { scroll-padding-top: calc(var(--hdr-h, 0px) + var(--rec-h, 0px) + 0.75rem); }
.btn { gap: 0.4rem; }
.btn svg { width: 1.125rem; height: 1.125rem; flex: none; }
td .sub-line, th .sub-line { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--muted); }
.tag { white-space: nowrap; }
.calc-m { display: none; }
@media (max-width: 40rem) {
  table.slip td.calc, table.slip thead th:nth-child(3) { display: none; }
  table.slip .calc-m { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--muted); margin-top: 0.25rem; }
  table.slip td.calc { min-width: 0; }
}
@media (max-width: 40rem) {
  table.slip .code-c, table.slip thead th:nth-child(3) { display: none; }
  table.slip th, table.slip td { padding: 0.5rem 0.625rem; }
}

/* payroll status */
.next { border-radius: 1rem; padding: 1.25rem 1.375rem; border: 2px solid var(--info-bd); background: var(--info-bg); display: grid; gap: 0.5rem; }
.next.ok { border-color: var(--ok-bd); background: var(--ok-bg); }
.next.warn { border-color: var(--warn-bd); background: var(--warn-bg); }
.next.bad { border-color: var(--bad-fg); background: var(--bad-bg); }
.next h2 { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.next h2:lang(ar) { letter-spacing: 0; text-transform: none; font-size: 0.9375rem; }
.next-text { font-size: 1.25rem; font-weight: 600; line-height: 1.35; max-width: 50rem; }
.steps { list-style: none; display: grid; gap: 0; padding: 0; margin: 0; }
.auto { padding: 0; margin: 0; }
.step-row { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--rule); align-items: start; }
.step-row:last-child { border-bottom: 0; }
.step-row .s-dot { width: 0.875rem; height: 0.875rem; border-radius: 50%; border: 2px solid var(--muted); margin-top: 0.3rem; }
.step-row.done .s-dot { background: var(--ok-fg); border-color: var(--ok-fg); }
.step-row.current .s-dot { background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 4px var(--info-bg); }
.step-row.current > div > strong { color: var(--brand); }
:root[data-mode="contrast"] .step-row.current > div > strong { color: #ffff00; }
.step-act { margin-top: 0.5rem; }
.auto { list-style: none; display: grid; gap: 0.625rem; }
.auto li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 0.625rem; align-items: start; }
.auto li svg { width: 1.125rem; height: 1.125rem; margin-top: 0.15rem; color: var(--muted); }
.auto li.done svg { color: var(--ok-fg); }
.field.check { display: flex; align-items: center; gap: 0.625rem; }
.field.check input { width: 1.375rem; height: 1.375rem; min-height: 0; flex: none; accent-color: var(--brand); }
.item .actions .btn + .btn { margin-inline-start: 0.375rem; }
@media (max-width: 40rem) { .step-row { grid-template-columns: 1.25rem minmax(0, 1fr); } .step-row .side { grid-column: 2; } }

/* work tiles and queue */
.sec-h { font-size: 1.1875rem; font-weight: 600; margin: 1.5rem 0 0.75rem; }
.wtiles { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); }
.wtile { display: grid; gap: 0.125rem; padding: 1rem 1.125rem; border-radius: 1rem; border: 1px solid var(--rule); background: var(--surface); text-decoration: none; color: var(--fg); border-top: 4px solid var(--rule); height: 100%; }
.wtile:hover { border-color: var(--brand); }
.wtile.bad { border-top-color: var(--bad-fg); }
.wtile.warn { border-top-color: var(--warn-fg); }
.wtile.info { border-top-color: var(--info-fg); }
.wtile.ok { border-top-color: var(--ok-fg); }
.wtile .w-num { font-size: 2rem; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wtile.bad:not(.zero) .w-num { color: var(--bad-fg); }
.wtile .w-label { font-weight: 600; text-decoration: underline; text-decoration-color: var(--link-underline); text-underline-offset: 0.2em; }
.wtile .w-sub { font-size: 0.8125rem; color: var(--muted); }
.wtile.zero .w-num { color: var(--muted); }
.wtabs { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wtabs a { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.5rem; padding: 0.375rem 0.875rem; border: 1px solid var(--rule); border-radius: 999px; text-decoration: none; color: var(--fg); font-size: 0.9375rem; }
.wtabs a[aria-current="page"] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); font-weight: 600; }
.wtabs .num { color: var(--muted); }
.wlist { list-style: none; padding: 0; margin: 0; }
.witem { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 1.25rem; padding: 0.875rem 0; border-bottom: 1px solid var(--rule); }
.witem:last-child { border-bottom: 0; }
.witem .w-main { display: grid; gap: 0.25rem; min-width: 0; }
.witem .title { font-weight: 600; }
.witem .detail { color: var(--muted); font-size: 0.9375rem; }
.witem .w-meta { font-size: 0.8125rem; color: var(--muted); }
.witem .w-side { display: grid; gap: 0.5rem; justify-items: end; align-content: start; }
.witem .actions { display: flex; flex-wrap: wrap; gap: 0.375rem; justify-content: flex-end; }
.witem.is-mine { border-inline-start: 4px solid var(--brand); padding-inline-start: 0.75rem; }
.witem.is-taken .title { color: var(--muted); }
.witem:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (max-width: 40rem) { .witem { grid-template-columns: minmax(0, 1fr); } .witem .w-side { justify-items: start; } .witem .actions { justify-content: flex-start; } }

/* ======================================================================
   Group, companies and payrolls (wireframes agreed with Tom, 30 Sep to 1 Oct 2026)
   ====================================================================== */
:root { --t1: #2563eb; --t2: #db2777; --t3: #0891b2; --t4: #7c3aed; --t5: #475569; --t6: #15803d; --bar-blk: var(--bad-fg); --bar-urg: var(--warn-fg); --bar-rev: var(--warn-fg); --bar-app: var(--info-fg); --bar-not: var(--muted); --bar-upc: var(--muted); --hot: var(--warn-bg); --mine: var(--sel-bg); --mine-bar: var(--brand); }
@media (prefers-color-scheme: dark) { :root:not([data-mode]) { --t1: #60a5fa; --t2: #f472b6; --t3: #22d3ee; --t4: #a78bfa; --t5: #94a3b8; --t6: #4ade80; --bar-blk: var(--bad-fg); --bar-urg: var(--warn-fg); --bar-rev: var(--warn-fg); --bar-app: var(--info-fg); --bar-not: var(--muted); --bar-upc: var(--muted); --hot: var(--warn-bg); --mine: var(--sel-bg); --mine-bar: var(--brand); } }
:root[data-mode="dark"] { --t1: #60a5fa; --t2: #f472b6; --t3: #22d3ee; --t4: #a78bfa; --t5: #94a3b8; --t6: #4ade80; --bar-blk: var(--bad-fg); --bar-urg: var(--warn-fg); --bar-rev: var(--warn-fg); --bar-app: var(--info-fg); --bar-not: var(--muted); --bar-upc: var(--muted); --hot: var(--warn-bg); --mine: var(--sel-bg); --mine-bar: var(--brand); }
:root[data-mode="contrast"] { --t1: #ffff00; --t2: #ffffff; --t3: #ffff00; --t4: #ffffff; --t5: #ffffff; --t6: #ffff00; --bar-blk: var(--bad-fg); --bar-urg: var(--warn-fg); --bar-rev: var(--warn-fg); --bar-app: var(--info-fg); --bar-not: var(--muted); --bar-upc: var(--muted); --hot: var(--warn-bg); --mine: var(--sel-bg); --mine-bar: var(--brand); }

.icon.xs { width: 1.5rem; height: 1.5rem; }
.icon.sm { width: 2.25rem; height: 2.25rem; }
.sub { display: block; color: var(--muted); font-size: 0.8125rem; font-weight: 400; }
.zero { color: var(--muted); font-weight: 400; }
.linklike { font: inherit; background: none; border: 0; padding: 0; color: var(--brand); text-decoration: underline; text-decoration-color: var(--link-underline); text-underline-offset: 0.2em; cursor: pointer; min-height: 1.5rem; }
.pt { display: inline-block; font-size: 0.8125rem; font-weight: 600; border: 1px solid var(--rule); border-radius: 999px; padding: 0 0.5rem; background: var(--bg-alt); color: var(--fg); white-space: nowrap; line-height: 1.5; }
.pcode { display: inline-block; font-size: 0.9375rem; font-weight: 600; color: var(--muted); border: 1px solid var(--rule); border-radius: 0.375rem; padding: 0 0.375rem; vertical-align: middle; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.prl .pcode, .pname .pcode { font-size: 0.75rem; }
.pcode-s { font-size: 0.8125rem; color: var(--muted); font-weight: 600; }
.flush { padding: 0; overflow: hidden; gap: 0; }
.flush > .table-wrap { border: 0; border-radius: 0; }
.pad { padding: 0.75rem 1.25rem 1rem; margin: 0; }
.pad-h { padding: 1rem 1.25rem 0.75rem; }
.head2 { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; margin: 1.75rem 0 0.75rem; }
.head2 h2 { font-size: 1.1875rem; font-weight: 600; }
.hint { color: var(--muted); font-size: 0.875rem; margin-top: 0.5rem; }

/* headers: breadcrumb, payroll or company, section heading */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; padding: 0; margin: 0 0 0.5rem; font-size: 0.9375rem; }
.crumbs li { display: inline-flex; align-items: center; gap: 0.5rem; }
.crumbs li + li::before { content: "/"; color: var(--muted); }
.crumbs a { min-height: 1.5rem; display: inline-flex; align-items: center; }
.topline { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; flex-wrap: wrap; }
.topline .crumbs ol { margin: 0; }
.recnav { display: flex; gap: 0.75rem; align-items: center; font-size: 0.9375rem; flex-wrap: wrap; }
.phead { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: space-between; }
.phead .who { display: flex; gap: 1rem; align-items: center; min-width: 0; }
.phead .who > .icon { width: 3rem; height: 3rem; }
.phead h1 { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); line-height: 1.15; }
.phead .meta { color: var(--muted); margin-top: 0.125rem; }
.coline { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; font-weight: 600; color: var(--muted); font-size: 0.9375rem; margin: 0 0 0.125rem; }
.coline .icon.xs { width: 1.25rem; height: 1.25rem; }
.switch label { display: block; font-size: 0.8125rem; color: var(--muted); margin-bottom: 0.25rem; }
.switch select, .inline-filter select { font: inherit; padding: 0.5rem 0.75rem; border-radius: 0.625rem; border: 1px solid var(--control); background: var(--surface); color: var(--fg); min-height: 2.75rem; max-width: 22rem; }
.switch .row { display: flex; gap: 0.5rem; align-items: center; }
.inline-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.inline-filter label:not(.vh) { font-size: 0.875rem; color: var(--muted); }
.sibs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 1rem 0 0; list-style: none; padding: 0; }
.sibs a { display: inline-flex; gap: 0.5rem; align-items: center; min-height: 2.75rem; padding: 0.25rem 0.875rem 0.25rem 0.375rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); text-decoration: none; color: var(--fg); }
.sibs a[aria-current] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); font-weight: 600; }
.sibs small { color: var(--muted); font-weight: 400; }
.shead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.shead .who { display: flex; gap: 0.75rem; align-items: center; }
.shead .icon.sm { width: 2.5rem; height: 2.5rem; }
.shead h2 { font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
.shead .meta { color: var(--muted); font-size: 0.9375rem; margin-top: 0.125rem; }

/* the payrolls table: company rows with their payrolls beneath; four stacked figure rows that line up */
table.prl { width: 100%; border-collapse: collapse; }
table.prl th, table.prl td { vertical-align: top; padding: 0.625rem 0.6rem; border-bottom: 1px solid var(--rule); text-align: start; }
table.prl thead th { background: var(--bg-alt); font-size: 0.8125rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
table.prl .n { text-align: end; }
table.prl tr.co th { background: var(--bg-alt); border-top: 2px solid var(--rule); padding-top: 0.625rem; padding-bottom: 0.5rem; }
.cname, .pname { display: flex; gap: 0.75rem; align-items: center; }
.cname a { font-weight: 600; font-size: 1.0625rem; }
.pname a { font-weight: 600; }
table.prl tr.py > th { padding-inline-start: 2rem; font-weight: 400; }
table.prl tr.hot > * { background: var(--hot); }
/* the deadline cell follows the same row rhythm as the work and figure columns */
table.prl td.dl strong, table.prl td.dl .sub { display: flex; align-items: center; min-height: 1.75rem; margin-bottom: 0.125rem; white-space: nowrap; }
table.prl td.dl > :last-child { margin-bottom: 0; }
.blk-note { color: var(--bad-fg) !important; font-weight: 600 !important; }
.wk { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.125rem; }
.wk a, .wk .z { display: grid; grid-template-columns: 2.25rem auto; align-items: center; column-gap: 0.5rem; min-height: 1.75rem; padding-inline-end: 0.375rem; border-radius: 0.375rem; text-decoration: none; color: var(--fg); white-space: nowrap; }
.wk .bar { width: 0.25rem; height: 1.125rem; border-radius: 2px; }
.wk b { text-align: end; font-variant-numeric: tabular-nums; }
.wk .w { text-decoration: underline; text-decoration-color: var(--link-underline); text-underline-offset: 0.2em; font-size: 0.875rem; }
.wk a:hover { background: var(--bg-alt); }
.wk .blk .bar { background: var(--bar-blk); } .wk .blk b, .wk .blk .w { color: var(--bad-fg); }
.wk .urg .bar { background: var(--bar-urg); } .wk .rev .bar { background: var(--bar-rev); } .wk .app .bar { background: var(--bar-app); } .wk .not .bar { background: var(--bar-not); } .wk .upc .bar { background: var(--bar-upc); }
.wk .z { color: var(--muted); } .wk .z b { font-weight: 400; } .wk .z .icon { opacity: 0.45; } .wk .z span:last-child { font-size: 0.875rem; }
.wk-wide li { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; border-bottom: 1px solid var(--rule); padding: 0.25rem 0; }
.wk-wide li:last-child { border-bottom: 0; }
.wk-wide .who-s { text-align: end; }
.ml { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.125rem; }
.ml li { min-height: 1.75rem; display: flex; align-items: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ml.n li { justify-content: flex-end; }
td.mlab .ml li { color: var(--muted); font-size: 0.875rem; }
.ml li.cur, td.cur { font-weight: 700; }
.chg { font-size: 0.875rem; font-weight: 600; }
.chg.good, .v.up, .chg.bad, .v.down { color: var(--fg); font-weight: 600; } .chg.flat { color: var(--muted); font-weight: 400; } .chg.neutral { color: var(--fg); }
a.np { color: var(--warn-fg); font-weight: 700; }
.em .emv { display: block; font-weight: 600; } .emv.warn { color: var(--warn-fg); } .emv.ok { color: var(--ok-fg); } .emv.na { color: var(--muted); font-weight: 400; }
td.em { min-width: 11rem; }

/* my work queue and the six work tiles */
.mq { list-style: none; padding: 0; margin: 0; }
.mq li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
.mq li:last-child { border-bottom: 0; }
.mq .t { font-weight: 600; display: block; } .mq .d { display: block; color: var(--muted); font-size: 0.875rem; }
.ptag { display: inline-block; font-size: 0.75rem; font-weight: 600; border: 1px solid var(--rule); border-radius: 999px; padding: 0 0.5rem; margin-inline-end: 0.375rem; color: var(--fg); }
.wt2 { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.wt2 a { display: grid; gap: 0.375rem; padding: 1rem; border: 1px solid var(--rule); border-radius: 1rem; background: var(--surface); text-decoration: none; color: var(--fg); height: 100%; }
.wt2 a:hover { border-color: var(--brand); }
.wt2 .top { display: flex; align-items: center; justify-content: space-between; }
.wt2 .n { font-size: 2rem; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.wt2 .is-blk .n { color: var(--bad-fg); }
.wt2 .lab { font-weight: 600; text-decoration: underline; text-decoration-color: var(--link-underline); text-underline-offset: 0.2em; }
.wt2 .sub { font-size: 0.8125rem; }
@container page (max-width: 54rem) { .wt2 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container page (max-width: 38rem) { .wt2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tiles.eq { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); grid-auto-rows: 1fr; }
.tiles.eq .tile { grid-template-columns: auto minmax(0, 1fr); }

/* this month's steps */
.tl { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; counter-reset: s; }
.tl li { position: relative; padding: 1.5rem 0.5rem 0 0; display: grid; gap: 0.125rem; align-content: start; }
.tl li::before { content: ""; position: absolute; top: 0.4375rem; inset-inline: 0 -0.5rem; height: 2px; background: var(--rule); }
.tl li:last-child::before { inset-inline-end: 50%; }
.tl .dot { position: absolute; top: 0; inset-inline-start: 0; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--rule); background: var(--surface); }
.tl li.done .dot { background: var(--ok-fg); border-color: var(--ok-fg); }
.tl li.done::before { background: var(--ok-fg); }
.tl li.current .dot { border-color: var(--brand); box-shadow: 0 0 0 3px var(--info-bg); }
.tl li.late .dot { border-color: var(--bad-fg); }
.tl strong { font-size: 0.9375rem; }
.tl .when { font-size: 0.875rem; }
.tl .sub { font-size: 0.8125rem; }
@container page (max-width: 44rem) { .tl { grid-template-columns: minmax(0, 1fr); gap: 0; } .tl li { padding: 0 0 0.875rem 1.75rem; } [dir="rtl"] .tl li { padding: 0 1.75rem 0.875rem 0; } .tl li::before { top: 1rem; bottom: 0; height: auto; width: 2px; inset-inline: 0.4375rem auto; } .tl li:last-child::before { display: none; } }
table.fig th[scope="row"] { font-weight: 400; color: var(--fg); }
table.fig tr.ex th, table.fig tr.ex td { color: var(--muted); font-size: 0.9375rem; }

/* work lists */
.cats { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.cats a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.25rem 0.875rem 0.25rem 0.375rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); text-decoration: none; color: var(--fg); }
.cats a[aria-current] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); font-weight: 600; }
.cats b { font-variant-numeric: tabular-nums; }
.cats .blk b { color: var(--bad-fg); }
.filters { display: flex; gap: 1rem; align-items: end; flex-wrap: wrap; margin-top: 1rem; padding: 1rem 1.25rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 1rem; }
.filters .field { min-width: 12rem; display: grid; gap: 0.25rem; }
.filters label, .filters .setting-label { font-size: 0.875rem; font-weight: 600; }
.filters select, .filters input { font: inherit; padding: 0.5rem 0.75rem; border-radius: 0.625rem; border: 1px solid var(--control); background: var(--surface); color: var(--fg); min-height: 2.75rem; }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--control); border-radius: 0.625rem; overflow: hidden; }
.seg button { font: inherit; padding: 0.5rem 0.875rem; border: 0; background: var(--surface); color: var(--fg); min-height: 2.75rem; border-inline-end: 1px solid var(--rule); cursor: pointer; }
.seg button:last-child { border-inline-end: 0; }
.seg button[aria-pressed="true"] { background: var(--info-bg); color: var(--info-fg); font-weight: 600; }
.getnext { margin-inline-start: auto; display: grid; gap: 0.25rem; justify-items: end; }
table.wl { width: 100%; border-collapse: collapse; }
table.wl th, table.wl td { padding: 0.875rem 0.75rem; border-bottom: 1px solid var(--rule); vertical-align: top; text-align: start; }
table.wl thead th { font-size: 0.8125rem; color: var(--muted); font-weight: 600; background: var(--bg-alt); }
table.wl .sev { width: 0.25rem; padding: 0; }
table.wl td.sev span { display: block; width: 0.25rem; min-height: 4rem; height: 100%; background: var(--bar-urg); border-radius: 2px; }
table.wl tr.c-blockers td.sev span { background: var(--bar-blk); } table.wl tr.c-review td.sev span { background: var(--bar-rev); } table.wl tr.c-approvals td.sev span { background: var(--bar-app); } table.wl tr.c-notices td.sev span { background: var(--bar-not); } table.wl tr.c-upcoming td.sev span { background: var(--bar-upc); }
.itm { display: grid; gap: 0.25rem; }
.itm .t { font-weight: 600; }
.itm .emp { font-size: 0.875rem; color: var(--muted); }
.kind { display: inline-flex; gap: 0.375rem; align-items: center; font-size: 0.8125rem; color: var(--muted); }
table.wl td.why { font-size: 0.9375rem; max-width: 26rem; }
table.wl td.due strong { display: block; } table.wl td.due span { font-size: 0.8125rem; color: var(--muted); }
table.wl .late { color: var(--bad-fg); }
table.wl td.act { text-align: end; }
table.wl td.act > * { margin: 0 0 0.375rem 0.375rem; }
table.wl tr.mine > td { background: var(--mine); }
table.wl tr.mine td.sev span { background: var(--mine-bar); }
.who-c .sub { margin-top: 0.25rem; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 0.75rem 1rem; }
details.done { margin-top: 1rem; }
details.done summary { cursor: pointer; font-weight: 600; min-height: 2.5rem; display: flex; align-items: center; }

/* people: find and results */
.find { margin-top: 1.25rem; padding: 1.5rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 1rem; }
.find .big { display: flex; gap: 0.75rem; align-items: end; flex-wrap: wrap; }
.find .pf .field, .find .qf { display: flex; flex-direction: column; gap: 0.5rem; }
.find .qf { flex: 1; min-width: min(100%, 18rem); }
.find label { font-weight: 600; }
.find .big select, .find .big input { font: inherit; font-size: 1.0625rem; padding: 0.75rem 1rem; border: 2px solid var(--control); border-radius: 0.75rem; height: 3.5rem; background: var(--surface); color: var(--fg); width: 100%; }
.find .pf { min-width: 14rem; }
.find .big .btn { min-height: 3.5rem; }
.find .adv { margin-top: 1rem; }
.find .adv summary { cursor: pointer; font-weight: 600; min-height: 2.5rem; display: inline-flex; align-items: center; }
.find .row2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: 1rem; margin-top: 0.75rem; }
.find .row2 .field { display: grid; gap: 0.25rem; }
.find .row2 label { font-size: 0.875rem; }
.find .row2 select { font: inherit; padding: 0.5rem 0.75rem; border-radius: 0.625rem; border: 1px solid var(--control); min-height: 2.75rem; width: 100%; background: var(--surface); color: var(--fg); }
.rbar { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }
.field.inline { display: flex; align-items: center; gap: 0.5rem; }
.field.inline select { font: inherit; padding: 0.375rem 0.625rem; border-radius: 0.5rem; border: 1px solid var(--control); background: var(--surface); color: var(--fg); min-height: 2.75rem; }
.recent { list-style: none; padding: 0; margin: 0; }
.recent li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.75rem; align-items: center; padding: 0.625rem 0; border-bottom: 1px solid var(--rule); }
.recent li:last-child { border-bottom: 0; }
.recent a { font-weight: 600; } .recent .d { display: block; font-size: 0.8125rem; color: var(--muted); }
.quick { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 0.75rem; }
.quick li { display: flex; }
.quick a, .quick button { flex: 1; font: inherit; text-align: start; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; padding: 0.75rem 1rem; border: 1px solid var(--rule); border-radius: 0.875rem; background: var(--surface); color: var(--fg); text-decoration: none; min-height: 4rem; cursor: pointer; }
.quick a:hover, .quick button:hover { border-color: var(--brand); }
.quick b { font-size: 1.5rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.quick .l { font-weight: 600; text-decoration: underline; text-decoration-color: var(--link-underline); text-underline-offset: 0.2em; }
.quick .l small { display: block; font-weight: 400; color: var(--muted); text-decoration: none; font-size: 0.8125rem; }
@container page (max-width: 38rem) { .quick { grid-template-columns: minmax(0, 1fr); } }
table.res .sub-line, table.ready .sub-line { display: block; font-size: 0.8125rem; color: var(--muted); font-weight: 400; }
mark { background: var(--warn-bg); color: inherit; padding: 0 0.1em; border-radius: 2px; }

/* worker record: header line, needs attention, summary */
.record-who .coline { margin-bottom: 0.25rem; }
.rmeta .status { margin-inline-start: 0.25rem; }
.attn { margin-top: 1rem; background: var(--surface); border: 1px solid var(--rule); border-inline-start: 4px solid var(--bar-urg); border-radius: 1rem; padding: 0.75rem 1.25rem; }
.attn h2 { font-size: 1rem; font-weight: 600; margin: 0 0 0.25rem; }
.attn ul { list-style: none; padding: 0; margin: 0; }
.attn li { display: grid; grid-template-columns: 1.5rem 6.5rem minmax(0, 1fr) auto auto; gap: 0.75rem; align-items: center; padding: 0.5rem 0; border-top: 1px solid var(--rule); }
.attn li:first-child { border-top: 0; }
.attn .cat { font-weight: 600; font-size: 0.875rem; }
.attn .cat.blk { color: var(--bad-fg); } .attn .cat.urg { color: var(--warn-fg); } .attn .cat.rev { color: var(--warn-fg); } .attn .cat.app { color: var(--info-fg); }
.attn .d { color: var(--muted); font-size: 0.875rem; }
@container page (max-width: 40rem) { .attn li { grid-template-columns: 1.5rem minmax(0, 1fr); } .attn li > :nth-child(n+4) { grid-column: 2; justify-self: start; } }
.tab-count { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; border-radius: 999px; background: var(--bad-fg); color: var(--surface); font-size: 0.75rem; font-weight: 700; padding: 0 0.25rem; }
.tab-sec + .tab-sec { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.tab-sub { font-size: 1.0625rem; font-weight: 600; margin-bottom: 0.75rem; }
.sum3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
@container page (max-width: 54rem) { .sum3 { grid-template-columns: minmax(0, 1fr); } }
.card.sc { background: var(--surface); border: 1px solid var(--rule); border-radius: 1rem; padding: 1.25rem; min-width: 0; }
.card.sc h3, .card.sc h2 { font-size: 1.0625rem; display: flex; gap: 0.5rem; align-items: center; justify-content: space-between; margin: 0 0 0.75rem; flex-wrap: wrap; }
.card.sc h3 .l, .card.sc h2 .l { display: flex; gap: 0.5rem; align-items: center; }
dl.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem 1rem; margin: 0; }
dl.kv dt { color: var(--muted); font-size: 0.875rem; }
dl.kv dd { margin: 0; text-align: end; }
dl.kv dd small { display: block; color: var(--muted); font-size: 0.8125rem; }
.sub3 { font-size: 0.8125rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 1rem 0 0.375rem; }
[lang="ar"] .sub3 { text-transform: none; letter-spacing: 0; }
.proj { margin-top: 1rem; border: 1px solid var(--info-bd); background: var(--info-bg); border-radius: 0.75rem; padding: 0.75rem 1rem; }
.proj .ph2 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; }
.proj a { color: inherit; text-decoration: underline; }
table.pay { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.pay th, table.pay td { padding: 0.375rem 0; border-bottom: 1px solid var(--info-bd); font-weight: 400; text-align: start; }
table.pay td.n { text-align: end; }
table.pay tr.tot th, table.pay tr.tot td { font-weight: 700; border-bottom: 0; }
table.pay tr.ded td { color: var(--bad-fg); }
.pnote { font-size: 0.8125rem; color: var(--info-fg); margin: 0.5rem 0 0; }
.docs { list-style: none; padding: 0; margin: 0; }
.docs li { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--rule); align-items: center; }
.docs li:last-child { border-bottom: 0; }
.hist { list-style: none; padding: 0; margin: 0; }
.hist li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--rule); align-items: start; }
.hist li:last-child { border-bottom: 0; }
.hist .dt { font-weight: 600; } .hist .w small { display: block; color: var(--muted); font-size: 0.875rem; }

/* HR dashboard */
.funnel { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; }
.funnel a { display: grid; gap: 0.25rem; padding: 0.75rem 0.875rem; border: 1px solid var(--rule); border-radius: 0.875rem; background: var(--surface); text-decoration: none; color: var(--fg); min-height: 6.5rem; height: 100%; }
.funnel a:hover { border-color: var(--brand); }
.funnel .st { font-size: 0.8125rem; color: var(--muted); font-weight: 600; }
.funnel .n { font-size: 1.75rem; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
.funnel .late { font-size: 0.8125rem; color: var(--bad-fg); font-weight: 600; }
.funnel .ok2 { font-size: 0.8125rem; color: var(--muted); }
@container page (max-width: 44rem) { .funnel { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container page (max-width: 34rem) { .funnel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
table.ready { width: 100%; border-collapse: collapse; }
table.ready th, table.ready td { padding: 0.5rem 0.625rem; border-bottom: 1px solid var(--rule); text-align: start; vertical-align: middle; }
table.ready thead th { font-size: 0.8125rem; color: var(--muted); font-weight: 600; background: var(--bg-alt); }
table.ready th[scope="row"] { font-weight: 400; }
table.ready th[scope="row"] a { font-weight: 600; }
table.ready .c { text-align: center; }
.tk { font-weight: 700; } .tk.y { color: var(--ok-fg); } .tk.x { color: var(--bad-fg); } .tk.w { color: var(--warn-fg); }
table.dgrid { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.dgrid th, table.dgrid td { padding: 0.5rem 0.625rem; border-bottom: 1px solid var(--rule); text-align: start; }
table.dgrid thead th { font-size: 0.8125rem; color: var(--muted); font-weight: 600; background: var(--bg-alt); }
table.dgrid .n { text-align: end; }
table.dgrid a.exp { color: var(--bad-fg); font-weight: 700; }

/* workforce */
.bridge { display: grid; grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr) 4rem; gap: 0.75rem 1rem; align-items: center; font-variant-numeric: tabular-nums; }
.bridge .lab { font-size: 0.9375rem; } .bridge .lab small { display: block; color: var(--muted); font-size: 0.8125rem; }
.bridge .v { text-align: end; font-weight: 600; }
.bridge .track { position: relative; height: 1.5rem; }
.bridge .b { position: absolute; top: 0; height: 100%; border-radius: 0.25rem; }
.b.base { background: var(--rule); } .b.in { background: var(--brand); } .b.out { background: var(--muted); }
table.mvt { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.mvt th, table.mvt td { padding: 0.375rem 0.5rem; border-bottom: 1px solid var(--rule); text-align: start; font-weight: 400; }
table.mvt thead th { font-size: 0.8125rem; color: var(--muted); font-weight: 600; background: var(--bg-alt); }
table.mvt .n { text-align: end; } table.mvt td.cur { font-weight: 700; }
table.mvt tr.grp th { background: var(--bg-alt); font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
table.mvt a.due { color: var(--warn-fg); font-weight: 700; }
table.tv { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.tv th, table.tv td { padding: 0.375rem 0; border-bottom: 1px solid var(--rule); text-align: start; font-weight: 400; } table.tv .n { text-align: end; }
table.tv tr.tot th, table.tv tr.tot td { border-bottom: 0; font-weight: 700; }
.mk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
@container page (max-width: 54rem) { .mk { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container page (max-width: 40rem) { .mk { grid-template-columns: minmax(0, 1fr); } }
.spl { display: flex; height: 1rem; border-radius: 999px; overflow: hidden; background: var(--bg-alt); }
.spl span { display: block; height: 100%; }
.kv2 { list-style: none; padding: 0; margin: 0; }
.kv2 li { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.375rem 0; border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
.kv2 li:last-child { border-bottom: 0; }
.kv2 i { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 2px; margin-inline-end: 0.5rem; vertical-align: -0.05em; }
.kv2 small, .bl small { color: var(--muted); font-weight: 400; margin-inline-start: 0.375rem; font-size: 0.8125rem; }
.bl { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.bl li { display: grid; grid-template-columns: minmax(6rem, 8rem) minmax(0, 1fr) 6.5rem; gap: 0.75rem; align-items: center; font-variant-numeric: tabular-nums; }
.bl-l { font-size: 0.875rem; }
.bl-t { height: 0.75rem; background: var(--bg-alt); border-radius: 999px; overflow: hidden; }
.bl-t span { display: block; height: 100%; border-radius: 999px; }
.bl-n { text-align: end; font-weight: 600; font-size: 0.9375rem; }
.t-1 { background: var(--t1); } .t-2 { background: var(--t2); } .t-3 { background: var(--t3); } .t-4 { background: var(--t4); } .t-5 { background: var(--t5); } .t-6 { background: var(--t6); }
:root[data-mode="contrast"] .bl-t, :root[data-mode="contrast"] .spl { border: 1px solid var(--fg); }

table.wl td.due strong, table.wl td.act .btn { white-space: nowrap; }
table.wl td.due { min-width: 7rem; }
table.mvt th[scope="row"] { min-width: 9.5rem; }
@container page (min-width: 48rem) { .grid.g2.mvg { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
@container page (min-width: 40rem) and (max-width: 47.99rem) { .grid.g2.mvg { grid-template-columns: minmax(0, 1fr); } }
table.mvt th[scope="row"] small { display: block; }
table.ready td { white-space: nowrap; }
table.ready th[scope="row"] { min-width: 9rem; }
#rec-form, .tab-sec { min-width: 0; max-width: 100%; }
.tab-sec .facts-list dd, .tab-sec td { overflow-wrap: break-word; }

/* ======================================================================
   Company first, positions, organisation, locations, costing enquiry (Oct 2026)
   ====================================================================== */
:root { --s-asg: #9d174d; --s-asg-bg: #fce7f3; --s-pos: #1d4ed8; --s-pos-bg: #dbeafe; --s-ovr: #3f3f46; --s-ovr-bg: #f4f4f5; --s-ent: #6b21a8; --s-ent-bg: #f3e8ff; --s-unit: #0f766e; --s-unit-bg: #ccfbf1; --s-el: #3730a3; --s-el-bg: #e0e7ff; --s-lock: #374151; --s-lock-bg: #e5e7eb; --s-co: #334155; --s-co-bg: #e2e8f0; --sel-bg: #eff6ff; }
@media (prefers-color-scheme: dark) { :root:not([data-mode]) { --s-asg: #f9a8d4; --s-asg-bg: #3b0a24; --s-pos: #93c5fd; --s-pos-bg: #172554; --s-ovr: #e4e4e7; --s-ovr-bg: #27272a; --s-ent: #d8b4fe; --s-ent-bg: #2e1065; --s-unit: #5eead4; --s-unit-bg: #042f2e; --s-el: #c7d2fe; --s-el-bg: #1e1b4b; --s-lock: #d1d5db; --s-lock-bg: #1f2937; --s-co: #cbd5e1; --s-co-bg: #1e293b; --sel-bg: #0f1a33; } }
:root[data-mode="dark"] { --s-asg: #f9a8d4; --s-asg-bg: #3b0a24; --s-pos: #93c5fd; --s-pos-bg: #172554; --s-ovr: #e4e4e7; --s-ovr-bg: #27272a; --s-ent: #d8b4fe; --s-ent-bg: #2e1065; --s-unit: #5eead4; --s-unit-bg: #042f2e; --s-el: #c7d2fe; --s-el-bg: #1e1b4b; --s-lock: #d1d5db; --s-lock-bg: #1f2937; --s-co: #cbd5e1; --s-co-bg: #1e293b; --sel-bg: #0f1a33; }
:root[data-mode="contrast"] { --s-asg: #000; --s-asg-bg: #00ffff; --s-pos: #ffff00; --s-pos-bg: #000; --s-ovr: #000; --s-ovr-bg: #ffff00; --s-ent: #ffff00; --s-ent-bg: #000; --s-unit: #ffff00; --s-unit-bg: #000; --s-el: #ffffff; --s-el-bg: #000; --s-lock: #000; --s-lock-bg: #ffffff; --s-co: #000; --s-co-bg: #ffffff; --sel-bg: #000; }

/* company bar */
.cobar { margin-top: 1rem; border-bottom: 1px solid var(--rule); }
.cobar ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.125rem; padding: 0; margin: 0; }
.cobar a { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.75rem; min-height: 2.75rem; text-decoration: none; color: var(--fg); font-weight: 500; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.cobar a:hover { color: var(--brand); }
.cobar a[aria-current] { border-bottom-color: var(--brand); color: var(--brand); font-weight: 700; }
.cobar .icon.xs { width: 1.5rem; height: 1.5rem; }
#site-menu [data-cogroup] h3 { margin-top: 1rem; }

/* chips, tags, small text */
.chip { display: inline-flex; font-size: 0.75rem; font-weight: 600; border-radius: 999px; padding: 0.0625rem 0.5rem; border: 1px solid; white-space: nowrap; margin: 0 0.25rem 0.25rem 0; line-height: 1.5; }
.chip.err { color: var(--bad-fg); background: var(--bad-bg); border-color: var(--bad-bd); }
.chip.wrn { color: var(--warn-fg); background: var(--warn-bg); border-color: var(--warn-bd); }
.chip.lck { color: var(--s-lock); background: var(--s-lock-bg); border-color: var(--rule); }
.bad-t { color: var(--bad-fg); font-weight: 600; }
.warn-t { color: var(--warn-fg); font-weight: 600; }
td.cell-bad, th.cell-bad { background: var(--bad-bg); }
td.cell-bad strong { color: var(--bad-fg); }
.ut, .tag2 { display: inline-block; font-size: 0.75rem; font-weight: 600; border-radius: 0.375rem; padding: 0.0625rem 0.4375rem; border: 1px solid var(--rule); background: var(--bg-alt); color: var(--fg); white-space: nowrap; }
.ut-company { background: var(--s-pos-bg); color: var(--s-pos); border-color: transparent; }
.ut-division { background: var(--s-ent-bg); color: var(--s-ent); border-color: transparent; }
.ut-department { background: var(--s-unit-bg); color: var(--s-unit); border-color: transparent; }
.ut-section { background: var(--s-el-bg); color: var(--s-el); border-color: transparent; }
.ut-team { background: var(--s-ovr-bg); color: var(--s-ovr); border-color: transparent; }
.tag2.lk, .tag2.lck { background: var(--s-lock-bg); color: var(--s-lock); }
.tag2.el { background: var(--s-el-bg); color: var(--s-el); }
.tag2.ov { background: var(--s-ovr-bg); color: var(--s-ovr); outline: 1px dashed var(--s-ovr); outline-offset: -1px; } .tag2.wrn { background: var(--warn-bg); color: var(--warn-fg); }
:root[data-mode="contrast"] .ut, :root[data-mode="contrast"] .tag2, :root[data-mode="contrast"] .chip { border-color: currentColor; }
.lockmsg { font-weight: 600; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--brand); text-decoration: underline; text-decoration-color: var(--link-underline); text-underline-offset: 0.2em; cursor: pointer; min-height: 1.5rem; }
.sub3 { font-size: 0.8125rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 1rem 0 0.375rem; }
.splits { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.25rem; font-variant-numeric: tabular-nums; }
.splits li { padding: 0.375rem 0.625rem; border: 1px solid var(--rule); border-radius: 0.5rem; background: var(--bg-alt); }
.shead2 { font-size: 1.125rem; margin: 1.75rem 0 0.75rem; }

/* search row, results bar, check tiles */
.find-row { display: flex; gap: 0.75rem; align-items: end; flex-wrap: wrap; }
.find-row .pf, .find-row .qf { display: flex; flex-direction: column; gap: 0.5rem; }
.find-row .qf { flex: 1; min-width: min(100%, 18rem); }
.find-row select, .find-row input { font: inherit; font-size: 1.0625rem; padding: 0.75rem 1rem; border: 2px solid var(--control); border-radius: 0.75rem; height: 3.5rem; background: var(--surface); color: var(--fg); width: 100%; }
.find-row .btn { min-height: 3.5rem; }
.find .hint { margin-top: 0.75rem; }
.rbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 1.25rem 0 0.75rem; }
.filterpill { display: inline-flex; gap: 0.5rem; align-items: center; border: 1px solid var(--brand); border-radius: 999px; padding: 0.125rem 0.75rem; font-weight: 600; font-size: 0.875rem; }
table.res2 th[scope=row] a { font-weight: 600; }
table.res2 td, table.res2 th { font-size: 0.9375rem; }
.checks { margin-top: 1.25rem; }
.checks > header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.875rem; }
.cgrid { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.cgrid li { display: flex; }
.cbox { flex: 1; font: inherit; color: var(--fg); text-align: start; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.125rem 0.75rem; align-items: center; padding: 0.75rem 1rem; border: 1px solid var(--rule); border-inline-start: 5px solid var(--rule); border-radius: 0.75rem; background: var(--surface); text-decoration: none; }
button.cbox, a.cbox { cursor: pointer; }
button.cbox:hover, a.cbox:hover { border-color: var(--brand); }
.cbox .l { font-weight: 600; }
.cbox b { font-size: 1.5rem; font-weight: 500; font-variant-numeric: tabular-nums; grid-row: span 2; }
.cbox .d { font-size: 0.8125rem; color: var(--muted); grid-column: 1; }
.cbox.err { border-inline-start-color: var(--bad-fg); } .cbox.err b { color: var(--bad-fg); }
.cbox.wrn { border-inline-start-color: var(--warn-fg); }
.cbox.lck { border-inline-start-color: var(--s-lock); }
.cbox.zero { color: var(--muted); }
.cbox[aria-pressed="true"] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.qbtn { cursor: pointer; }

/* organisation and locations: list with the detail card beside it */
.org2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; margin-top: 1rem; }
@container page (max-width: 54rem) { .org2 { grid-template-columns: minmax(0, 1fr); } }
table.otree .tw { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); white-space: pre; }
table.wl tr.sel > * { background: var(--sel-bg); }
table.wl tr.sel th[scope=row] a { font-weight: 700; }
table.wl tr.nod > * { color: var(--muted); font-style: italic; }
table.wl tr.tot > * { font-weight: 700; border-top: 2px solid var(--rule); }
.capbar { display: block; height: 0.375rem; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--rule); margin-top: 0.25rem; overflow: hidden; min-width: 4rem; }
.capbar i { display: block; height: 100%; background: var(--brand); }
.capbar i.over { background: var(--bad-fg); }

/* position reporting tree */
.ptree { display: flex; flex-direction: column; align-items: center; gap: 0; }
.ptree .vl { width: 2px; height: 1rem; background: var(--rule); }
.pbox { border: 1px solid var(--rule); border-radius: 0.75rem; padding: 0.5rem 0.875rem; background: var(--surface); min-width: min(100%, 16rem); text-align: center; }
.pbox small { display: block; color: var(--muted); font-size: 0.8125rem; }
.pbox.me { border: 2px solid var(--brand); }
.pbox.dot { border-style: dashed; }
.pbox.vac { border: 2px dashed var(--bad-fg); color: var(--bad-fg); }

/* costing: code segments coloured by where each half came from */
.cc { display: inline-flex; flex-wrap: wrap; gap: 0.125rem; font: 600 0.8125rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.cc > span { padding: 0 0.3125rem; border-radius: 0.25rem; border: 1px solid transparent; }
.s-pos { background: var(--s-pos-bg); color: var(--s-pos); }
.s-asg { background: var(--s-asg-bg); color: var(--s-asg); border-color: var(--s-asg) !important; }
.s-ovr { background: var(--s-ovr-bg); color: var(--s-ovr); border-color: var(--s-ovr) !important; border-style: dashed !important; }
.s-ent { background: var(--s-ent-bg); color: var(--s-ent); border-color: var(--s-ent) !important; }
.s-unit { background: var(--s-unit-bg); color: var(--s-unit); }
.s-el { background: var(--s-el-bg); color: var(--s-el); }
.s-lock { background: var(--s-lock-bg); color: var(--s-lock); }
.s-co { background: var(--s-co-bg); color: var(--s-co); border-color: var(--s-co) !important; }
.cc-key { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.875rem; margin: 0.75rem 0; }
.cc-key > span { display: inline-flex; gap: 0.375rem; align-items: center; }
table.wl tr.grp > td { background: var(--bg-alt); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding-top: 0.5rem; padding-bottom: 0.5rem; }
table.wl tr.ov > *:first-child { box-shadow: inset 4px 0 0 var(--warn-fg); }
table.wl tr.fall > *:first-child { box-shadow: inset 4px 0 0 var(--bad-fg); }
table.wl tr.lk > * { color: var(--muted); }
[dir="rtl"] table.wl tr.ov > *:first-child { box-shadow: inset -4px 0 0 var(--warn-fg); }
[dir="rtl"] table.wl tr.fall > *:first-child { box-shadow: inset -4px 0 0 var(--bad-fg); }
table.cqt td.why { font-size: 0.875rem; max-width: 30rem; }
table.lad { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
table.lad th, table.lad td { padding: 0.5rem 0.625rem; border: 1px solid var(--rule); text-align: start; vertical-align: top; }
table.lad thead th { background: var(--bg-alt); font-size: 0.8125rem; color: var(--muted); }
table.lad td.hit, table.lad td.hitp, table.lad td.hitc, table.lad td.hite { font-weight: 700; outline: 2px solid currentColor; outline-offset: -2px; }
table.lad td.hita { background: var(--s-asg-bg); color: var(--s-asg); }
table.lad td.hit { background: var(--s-ovr-bg); color: var(--s-ovr); }
table.lad td.hitp { background: var(--s-pos-bg); color: var(--s-pos); }
table.lad td.hitc { background: var(--s-co-bg); color: var(--s-co); }
table.lad td.hite { background: var(--s-el-bg); color: var(--s-el); }
table.lad td.under { text-decoration: line-through; color: var(--muted); }
table.lad td.na { color: var(--muted); }

/* overtime "worked for" on an approval */
.wfsel { display: inline-flex; flex-direction: column; gap: 0.25rem; margin: 0 0.5rem 0.375rem 0; font-size: 0.8125rem; vertical-align: top; }
.wfsel label { font-weight: 600; }
.wfsel select { font: inherit; font-size: 0.875rem; padding: 0.375rem 0.5rem; border: 1px solid var(--control); border-radius: 0.5rem; background: var(--surface); color: var(--fg); min-height: 2.25rem; max-width: 18rem; }
.wfsel small { color: var(--muted); }

/* worker record: still to fill in, empty-section marks */
.todo-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.todo-list li { display: grid; grid-template-columns: 1rem minmax(0, 1fr) auto; gap: 0.625rem; align-items: center; }
.todo-list .o { width: 0.875rem; height: 0.875rem; border-radius: 50%; border: 2px solid var(--muted); }
.todo-list .o.blk { border-color: var(--bad-fg); }
.todo-list .d { display: block; font-size: 0.8125rem; color: var(--muted); }
.todo-mk { display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 50%; border: 2px solid var(--muted); margin-inline-start: 0.375rem; vertical-align: 0.05em; }
.sum3b { margin-top: 1.25rem; }
table.wl tr.ov th[scope=row], table tr.ov th[scope=row] { font-weight: 700; }
.pad { padding: 1rem 1.25rem; }
.cgrid > li { border: 0; padding: 0; margin: 0; }
.cobar a { padding: 0.5rem 0.625rem; font-size: 0.9375rem; gap: 0.375rem; }
.sum3.sum3b { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
table.lad th small { display: block; font-weight: 400; color: var(--muted); font-size: 0.8125rem; }
.phead p.h1 { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); line-height: 1.15; font-weight: 600; margin: 0; }
.record-who > .icon { width: 3rem; height: 3rem; flex: none; }

/* ---------- one header, one way in (1 Oct, evening) ---------- */
.cohead .who > div > h1, .cohead .who > div > p:first-child { margin: 0; line-height: 1.15; }
.cohead .coname { display: block; font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem); font-weight: 600; letter-spacing: -0.01em; color: var(--fg); }
.cohead + .crumbs { margin-top: 0.875rem; }
.ptitle { display: flex; justify-content: space-between; align-items: flex-end; gap: 0.75rem 1.5rem; flex-wrap: wrap; margin: 1.5rem 0 1rem; }
.ptitle h1 { font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); font-weight: 600; line-height: 1.2; }
.ptitle .meta { color: var(--muted); margin-top: 0.25rem; }
.cogrp { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 1.75rem 0 0.75rem; }
.cotiles { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.875rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.cotiles li { display: flex; }
.cotile { flex: 1; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1rem 1.125rem; border: 1px solid var(--rule); border-radius: 1rem; background: var(--surface); color: var(--fg); text-decoration: none; }
.cotile:hover { border-color: var(--brand); }
.cotile > .icon { width: 3rem; height: 3rem; }
.cotile .t { display: block; font-size: 1.125rem; font-weight: 600; text-decoration: underline; text-decoration-color: var(--link-underline); text-underline-offset: 0.2em; }
.cotile .d { display: block; color: var(--muted); font-size: 0.9375rem; margin-top: 0.125rem; }
.cotile .att { display: block; margin-top: 0.5rem; font-size: 0.875rem; font-weight: 600; padding-inline-start: 0.5rem; border-inline-start: 3px solid var(--rule); color: var(--muted); }
.cotile .att.err { border-color: var(--bad-fg); color: var(--bad-fg); }
.cotile .att.wrn { border-color: var(--warn-fg); color: var(--warn-fg); }
.cotile .att.info { border-color: var(--brand); color: var(--fg); font-weight: 500; }
.cotile .att.none { font-weight: 400; }
#site-menu [data-cogroup] h3 { margin-top: 1rem; }
div.tile { cursor: default; }
.record-who h1 { font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); font-weight: 600; }
.cohead ~ .crumbs + .record, .cohead ~ .crumbs + .topline + .record { margin-top: 1rem; }
.card.sc h2 { font-weight: 600; }
.btn-new { display: inline-flex; align-items: center; gap: 0.375rem; }
.btn-new[disabled] { border-style: dashed; color: var(--muted); cursor: not-allowed; opacity: 1; }
.btn-new .icon, .btn-new svg { width: 1rem; height: 1rem; }
.find .hint + .hint { margin-top: 0.25rem; }

/* ---------- export ---------- */
.xwrap { position: relative; display: inline-flex; }
.xbtn { display: inline-flex; align-items: center; gap: 0.375rem; }
.xbtn svg { width: 1rem; height: 1rem; }
.xmenu { position: absolute; inset-inline-end: 0; top: calc(100% + 0.375rem); width: min(24rem, 90vw); background: var(--surface); color: var(--fg); border: 1px solid var(--rule); border-radius: 0.875rem; box-shadow: var(--shadow); padding: 0.375rem 0; z-index: 30; text-align: start; }
.xmenu[hidden] { display: none; }
.xmenu .xo { display: block; width: 100%; text-align: start; background: none; border: 0; padding: 0.5rem 1rem; font: inherit; color: inherit; cursor: pointer; min-height: 2.75rem; }
.xmenu .xo:hover, .xmenu .xo:focus-visible { background: var(--bg-alt); }
.xmenu .xo b { display: block; font-weight: 600; }
.xmenu .xo small { display: block; color: var(--muted); font-size: 0.8125rem; }
.xopts { border-top: 1px solid var(--rule); margin-top: 0.375rem; padding: 0.5rem 1rem 0; display: grid; gap: 0.375rem; font-size: 0.9375rem; }
.xopts label { display: flex; gap: 0.5rem; align-items: center; min-height: 2rem; }
.xopts input { width: 1.125rem; height: 1.125rem; accent-color: var(--brand); }
.xft { border-top: 1px solid var(--rule); margin: 0.5rem 0 0; padding: 0.5rem 1rem 0.25rem; font-size: 0.8125rem; color: var(--muted); }
.rbar .xwrap { margin-inline-start: auto; }
.tbar, .texport { display: flex; justify-content: flex-end; margin: 0.5rem 0; }
.texport { margin: 0 0 0.5rem; }
.panel > .texport { padding: 0.5rem 0.75rem 0; margin: 0; }
.tcopy { display: flex; justify-content: flex-end; margin: 0 0 0.375rem; }
.tcopy .btn.done { border-color: var(--ok-fg); color: var(--ok-fg); }
.btn-xs { min-height: 2rem; padding: 0.125rem 0.75rem; font-size: 0.8125rem; }
.record-actions .xwrap { margin-inline-end: 0.25rem; }
/* the PDF summary is laid out off screen, then rendered to pages */
.offscreen { position: fixed; left: -12000px; top: 0; width: 1200px; pointer-events: none; }
.pdfsum { width: 190mm; background: #fff; color: #111; font-family: Inter, "Noto Sans Arabic", Arial, sans-serif; font-size: 10.5pt; line-height: 1.4; padding: 0; }
.pdfsum .pdf-conf { background: #b91c1c; color: #fff; font-weight: 700; letter-spacing: 0.2em; text-align: center; padding: 4px 0; font-size: 9pt; }
.pdfsum .pdf-head { display: flex; justify-content: space-between; gap: 16px; border-bottom: 2px solid #1d4ed8; padding: 10px 0 8px; margin-bottom: 8px; }
.pdfsum .pdf-co { font-size: 9pt; color: #555; font-weight: 600; }
.pdfsum h1 { font-size: 18pt; margin: 2px 0; }
.pdfsum .pdf-meta { font-size: 8.5pt; color: #555; text-align: end; }
.pdfsum h2 { font-size: 12.5pt; margin: 12px 0 4px; color: #1d4ed8; border-bottom: 1px solid #ddd; padding-bottom: 2px; }
.pdfsum h3 { font-size: 10.5pt; margin: 8px 0 3px; }
.pdfsum dl { display: grid; grid-template-columns: 38% 62%; gap: 2px 10px; margin: 0; }
.pdfsum dt { color: #555; } .pdfsum dd { margin: 0; }
.pdfsum table { width: 100%; border-collapse: collapse; font-size: 9pt; margin: 2px 0 6px; }
.pdfsum th, .pdfsum td { border: 1px solid #ddd; padding: 2px 4px; text-align: start; vertical-align: top; }
.pdfsum th { background: #f3f4f6; }
.pdfsum .pdf-more, .pdfsum .pdf-foot { color: #555; font-size: 8.5pt; }
.pdfsum .pdf-foot { margin-top: 12px; border-top: 1px solid #ddd; padding-top: 6px; }
.pdfsum, .pdfsum * { letter-spacing: normal !important; word-spacing: normal; font-kerning: normal; text-rendering: auto; }

/* ---------- Find in the top bar ---------- */
.bar { gap: 1rem; }
.gfind { position: relative; flex: 1; max-width: 32rem; display: flex; align-items: center; }
.gfind > svg { position: absolute; inset-inline-start: 0.75rem; width: 1.125rem; height: 1.125rem; color: var(--muted); pointer-events: none; }
.gfind input { width: 100%; font: inherit; font-size: 0.9375rem; min-height: 2.75rem; padding: 0.375rem 2.5rem 0.375rem 2.5rem; border: 1px solid var(--control); border-radius: 999px; background: var(--surface); color: var(--fg); }
.gfind input:focus { border-color: var(--brand); }
.gfind kbd { position: absolute; inset-inline-end: 0.75rem; font: 600 0.75rem ui-monospace, monospace; border: 1px solid var(--rule); border-radius: 0.25rem; padding: 0 0.375rem; color: var(--muted); pointer-events: none; }
.gf-list { position: absolute; top: calc(100% + 0.375rem); left: 0; right: 0; background: var(--surface); color: var(--fg); border: 1px solid var(--rule); border-radius: 0.875rem; box-shadow: var(--shadow); padding: 0.375rem 0; z-index: 60; max-height: min(70vh, 34rem); overflow: auto; }
.gf-g { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 0.5rem 1rem 0.25rem; }
.gf-i { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 1rem; cursor: pointer; font-size: 0.9375rem; }
.gf-i[aria-selected="true"] { background: var(--sel-bg); outline: 2px solid var(--brand); outline-offset: -2px; }
.gf-i small { color: var(--muted); }
.gf-c { font-size: 0.75rem; font-weight: 600; border: 1px solid var(--rule); border-radius: 0.25rem; padding: 0 0.3125rem; color: var(--muted); align-self: center; white-space: nowrap; }
.gf-ft, .gf-none { border-top: 1px solid var(--rule); margin-top: 0.375rem; padding: 0.5rem 1rem 0.25rem; font-size: 0.8125rem; color: var(--muted); }
.gf-none { border-top: 0; margin: 0; }
@media (max-width: 52rem) { .bar { flex-wrap: wrap; } .gfind { order: 3; max-width: none; flex-basis: 100%; } .gfind kbd { display: none; } }

/* ---------- the Open row ---------- */
.orow { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0 0.75rem; margin-bottom: 0.75rem; border-bottom: 1px solid var(--rule); }
.olbl { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.olist { list-style: none; padding: 0; margin: 0; display: flex; gap: 0.375rem; flex-wrap: wrap; }
.olist li, .omore li, .ophone li { display: flex; align-items: stretch; border: 1px solid var(--rule); border-radius: 0.625rem; background: var(--surface); }
.ot { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.3125rem 0.25rem 0.3125rem 0.625rem; color: var(--fg); text-decoration: none; font-size: 0.875rem; max-width: 16rem; min-height: 2.25rem; }
.ot .ot-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot small { font-size: 0.6875rem; font-weight: 600; color: var(--muted); border: 1px solid var(--rule); border-radius: 0.25rem; padding: 0 0.25rem; }
.ot .icon.xs { width: 1.375rem; height: 1.375rem; flex: none; }
.olist li:has(.ot.on), .omore li:has(.ot.on) { border: 2px solid var(--brand); }
.ot.on { font-weight: 600; }
.ot-x { background: none; border: 0; color: var(--muted); font-size: 1.125rem; line-height: 1; padding: 0 0.5rem; cursor: pointer; min-width: 2rem; }
.ot-x:hover { color: var(--fg); }
.udot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--warn-fg); display: inline-block; flex: none; }
.omore, .ophone { position: relative; }
.omore summary, .ophone summary { cursor: pointer; font-size: 0.875rem; font-weight: 600; color: var(--brand); padding: 0.375rem 0.625rem; border: 1px solid var(--rule); border-radius: 0.625rem; background: var(--surface); list-style: none; min-height: 2.25rem; display: inline-flex; align-items: center; }
.omore ul, .ophone ul { position: absolute; z-index: 40; top: calc(100% + 0.25rem); inset-inline-start: 0; list-style: none; margin: 0; padding: 0.375rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 0.75rem; box-shadow: var(--shadow); display: grid; gap: 0.25rem; min-width: 18rem; }
.ophone { display: none; }
@media (max-width: 52rem) { .olist, .omore, .olbl { display: none; } .ophone { display: block; } }
.ustrip { background: var(--warn-bg); border: 1px solid var(--warn-bd); border-radius: 0.75rem; padding: 0.5rem 1rem; margin-bottom: 1rem; display: grid; gap: 0.25rem; }
.ustrip p { display: flex; gap: 0.625rem; align-items: center; margin: 0; flex-wrap: wrap; }
.udot2 { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--warn-fg); flex: none; }
.notice.hold { margin: 0.75rem 0; }

/* ---------- show beside, compare ---------- */
.besgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.besgrid .sum3, .besgrid .sum3.sum3b { grid-template-columns: minmax(0, 1fr); }
.beside { border: 2px solid var(--brand); border-radius: 1rem; background: var(--bg); padding: 0.75rem 1rem 1rem; position: sticky; top: calc(var(--hdr-h, 0px) + 0.5rem); max-height: calc(100vh - var(--hdr-h, 0px) - 1rem); overflow: auto; }
.bes-bar { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; border-bottom: 1px solid var(--rule); padding-bottom: 0.5rem; margin-bottom: 0.75rem; }
.bes-head h2 { font-size: 1.375rem; font-weight: 600; }
.bes-head { margin-bottom: 0.75rem; }
.besb { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; margin-inline-start: 0.375rem; border: 1px solid var(--control); border-radius: 0.375rem; background: var(--surface); color: var(--brand); font-size: 0.875rem; vertical-align: middle; cursor: pointer; padding: 0; }
.besb.on { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
@container page (max-width: 54rem) { .besgrid { grid-template-columns: minmax(0, 1fr); } .besb { display: none; } .beside { position: static; max-height: none; } }
.tog2 { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; min-height: 2.75rem; }
.tog2 input { width: 1.25rem; height: 1.25rem; accent-color: var(--brand); }
table.cmpt tr.df > * { background: var(--warn-bg); }
table.cmpt tr.df th[scope=row] { box-shadow: inset 4px 0 0 var(--warn-fg); }
[dir="rtl"] table.cmpt tr.df th[scope=row] { box-shadow: inset -4px 0 0 var(--warn-fg); }
table.cmpt tr.df td { font-weight: 600; }

/* demo refinements (3 October): assignments, grade levels, leave in hours */
.chip.asg { background: var(--s-asg-bg); color: var(--s-asg); }
ul.asgl { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .6rem; }
ul.asgl li { display: grid; gap: .1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--rule); }
ul.asgl li:last-child { border-bottom: 0; }
ul.asgl .t { font-weight: 600; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
ul.asgl .d { font-size: .875rem; color: var(--muted); }
ul.glad { list-style: none; margin: .35rem 0 .25rem; padding: 0; display: grid; gap: .1rem; font-size: .875rem; }
ul.glad li { color: var(--muted); }
ul.glad li b { color: var(--fg); }
ul.glad li.own b { text-decoration: underline; }
ul.glad li small { color: var(--muted); }
.subpanel.whole { border-style: dashed; }
.jgf { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin-top: 1rem; }
.jgf .field { margin: 0; }
.apv { list-style: none; margin: .25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
/* Approvals screen and the home-page summary */
.cbox.inf { border-inline-start-color: var(--brand); }
.cbox[aria-pressed="true"] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.ap-quick { margin-top: 1rem; }
.apsum { padding: 0; }
.apsum-a { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; text-decoration: none; color: var(--fg); flex-wrap: wrap; border-radius: inherit; }
.apsum-a:hover { background: var(--bg-alt); }
.apsum-a b { font-size: 1.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.apsum-a .go { margin-inline-start: auto; color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
table.aptable td.ck, table.aptable th.ck { width: 2.5rem; text-align: center; }
table.aptable input[type="checkbox"] { width: 1.25rem; height: 1.25rem; accent-color: var(--brand); }
table.aptable tr.sel { background: var(--sel-bg); }
table.aptable td.acts { white-space: nowrap; }
table.aptable .late { color: var(--bad-fg); }
table.aptable td.acts .btn + .btn { margin-inline-start: 0.375rem; }

/* ---------- Header doors: Go to, Find, and your own work (9 Oct) ---------- */
.site-header .bar { row-gap: 0.5rem; }
.site-header .brand { order: 1; }
.site-header .bar-actions { order: 2; margin-inline-start: auto; }
.bar-break { order: 3; flex-basis: 100%; height: 0; }
.goto { order: 4; display: flex; align-items: center; gap: 0.5rem; flex: 0 1 24rem; min-width: 0; }
.goto label { font-size: 0.875rem; color: var(--muted); white-space: nowrap; }
.goto select { flex: 1; min-width: 0; font: inherit; font-size: 0.9375rem; font-weight: 600; min-height: 2.75rem; padding: 0.375rem 0.875rem; border: 1px solid var(--control); border-radius: 999px; background: var(--surface); color: var(--fg); }
.goto select:focus { border-color: var(--brand); }
.site-header .gfind { order: 5; flex: 1 1 18rem; }
.site-header .who { display: none !important; }
.melinks ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem; }
.melinks a { position: relative; display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; padding: 0.25rem 0.75rem; border-radius: 999px; color: var(--fg); text-decoration: none; font-size: 0.9375rem; font-weight: 600; }
.melinks a:hover { color: var(--brand); }
.melinks a[aria-current="page"] { background: var(--info-bg); color: var(--brand); }
.melinks .gl { width: 1.125rem; height: 1.125rem; flex: none; }
.melinks .ct { min-width: 1.375rem; padding: 0 0.375rem; border-radius: 999px; background: var(--muted); color: var(--surface); font-size: 0.75rem; font-weight: 600; line-height: 1.375rem; text-align: center; }
.melinks .ml-home { display: none; }
@media (max-width: 47.99rem) {
  .goto, .site-header .gfind { flex: 1 1 100%; }
  .melinks { position: fixed; inset-inline: 0; bottom: 0; z-index: 30; background: var(--bg); border-top: 1px solid var(--rule); padding: 0.25rem 0.25rem calc(0.25rem + env(safe-area-inset-bottom, 0px)); }
  .melinks ul { justify-content: space-around; }
  .melinks li { flex: 1; }
  .melinks .ml-home { display: block; }
  .melinks a { flex-direction: column; justify-content: center; gap: 0.125rem; width: 100%; min-height: 3.25rem; border-radius: 0.75rem; font-size: 0.75rem; padding: 0.25rem; }
  .melinks .gl { width: 1.375rem; height: 1.375rem; }
  .melinks .ct { position: absolute; top: 0.125rem; inset-inline-start: calc(50% + 0.375rem); }
  body { padding-bottom: 4.5rem; }
}
:root[data-mode="contrast"] .melinks a[aria-current="page"] { background: #000; outline: 2px solid #ffff00; }
:root[data-mode="contrast"] .melinks .ct { background: #ffff00; color: #000; }
@media (max-width: 47.99rem) {
  .site-header .bar-actions .pill { padding-inline: 0.75rem; }
  #menu-button > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .demo-tag { margin-inline-start: 0.375rem; }
}
.chg.warn { color: var(--warn-fg); font-weight: 700; }
.prl tr.why td { padding-top: 0; padding-bottom: 0.875rem; font-size: 0.875rem; padding-inline-start: 3.25rem; }
.prl tr.py td, .prl tr.py th { border-bottom: 0; }
.prl tr.why .wy { white-space: nowrap; }
.prl tr.why b.up, .prl tr.why b.down { color: var(--fg); font-weight: 600; }
.st-sub { display: block; margin-top: 0.375rem; font-size: 0.8125rem; color: var(--muted); max-width: 11rem; }
/* ---------- payroll page: plain answers (9 Oct) ---------- */
.next-ans { font-size: 1.375rem; font-weight: 600; line-height: 1.3; max-width: 50rem; margin: 0; }
.next .next-text { font-size: 1.0625rem; font-weight: 500; }
.next p { margin: 0; max-width: 56rem; }
.td { list-style: none; margin: 0; padding: 0; }
.td li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: 0.5rem 1rem; align-items: start; padding: 0.875rem 0; border-top: 1px solid var(--rule); }
.td li:first-child { border-top: 0; }
.td .cat { font-size: 0.8125rem; font-weight: 700; padding: 0.125rem 0.5rem; border-radius: 0.375rem; justify-self: start; border: 1px solid currentColor; }
.td .cat.blk { color: var(--bad-fg); background: var(--bad-bg); } .td .cat.urg { color: var(--warn-fg); background: var(--warn-bg); }
.td .cat.rev { color: var(--warn-fg); background: var(--warn-bg); }
.td .cat.app { color: var(--info-fg); background: var(--info-bg); }
.td p { margin: 0; }
.td .t { font-weight: 600; }
.td .why { margin-top: 0.125rem; }
.td .meta { margin-top: 0.25rem; font-size: 0.8125rem; color: var(--muted); }
@media (max-width: 40rem) { .td li { grid-template-columns: minmax(0, 1fr); } }
.ck-ans { font-size: 1.125rem; font-weight: 600; margin: 0 0 0.5rem; }
.ck { list-style: none; margin: 0.5rem 0 0; padding: 0; columns: 2 22rem; column-gap: 2rem; }
.ck li { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.375rem 0; break-inside: avoid; }
.ck li svg { width: 1.125rem; height: 1.125rem; flex: none; margin-top: 0.125rem; }
.ck li.ok svg { color: var(--ok-fg); } .ck li.no svg { color: var(--warn-fg); }
.checks > .small { margin-top: 0.75rem; }
.six-h { font-size: 1rem; margin: 1.5rem 0 0.25rem; }
.six { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.75rem; align-items: end; min-height: 9rem; }
.six li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0.25rem; }
.six .b { display: block; width: 100%; max-width: 4.5rem; border-radius: 0.375rem 0.375rem 0 0; background: var(--icon-ring); }
.six li.cur .b { background: var(--brand); }
.six .v { font-size: 0.8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.six .m { font-size: 0.8125rem; color: var(--muted); text-align: center; }
.six li.cur .v, .six li.cur .m { font-weight: 700; color: var(--fg); }
@media (max-width: 40rem) { .six .v { font-size: 0.6875rem; } }
:root[data-mode="contrast"] .six .b { background: #fff; } :root[data-mode="contrast"] .six li.cur .b { background: #ffff00; }
/* the payroll table becomes one card per payroll on a phone */
@media (max-width: 47.99rem) {
  .prl-wrap { overflow: visible; }
  table.prl, table.prl tbody, table.prl tr, table.prl th, table.prl td { display: block; }
  table.prl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.prl tr.co th { padding-inline: 0.75rem; }
  table.prl tr.py { display: grid; grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, 1fr)); column-gap: 0.25rem; padding: 0.75rem 0.75rem 0.25rem; border-top: 1px solid var(--rule); }
  table.prl tr.py > th { grid-column: 1 / -1; padding: 0 0 0.5rem; }
  table.prl tr.py > td { padding: 0.25rem 0; border: 0; }
  table.prl tr.py > td:nth-of-type(1) { display: none; }
  table.prl tr.py > td:nth-of-type(2) { grid-column: 1 / span 2; }
  table.prl tr.py > td.dl { grid-column: 3 / span 2; }
  table.prl tr.py > td.work { grid-column: 1 / -1; }
  table.prl tr.py > td.work .wk { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
  table.prl tr.py > td.n::before { content: attr(data-h); display: block; font-size: 0.75rem; color: var(--muted); text-align: end; min-height: 1.25rem; }
  table.prl tr.py > td.mlab::before { content: ""; display: block; min-height: 1.25rem; }
  table.prl tr.py .ml li { font-size: 0.8125rem; white-space: normal; }
  table.prl tr.why td { padding: 0.25rem 0.75rem 0.875rem; }
  table.prl tr.why .wy { white-space: normal; }
  .st-sub { max-width: none; }
}
@media (max-width: 47.99rem) {
  table.prl tr.py { grid-template-columns: minmax(0, 0.85fr) minmax(0, 0.95fr) minmax(0, 0.95fr) minmax(0, 1.25fr); }
  table.prl tr.py .ml li { font-size: 0.75rem; white-space: nowrap; }
}
/* one level up, on every drilled screen (10 Oct) */
.backto { margin: 0.25rem 0 1rem; }
.backto a { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; font-weight: 600; }
.backto a svg { width: 1.125rem; height: 1.125rem; }
[dir="rtl"] .backto a svg { transform: scaleX(-1); }
.navline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; margin-bottom: 0.5rem; }
.navline .backto { margin: 0; padding-inline-end: 1rem; border-inline-end: 1px solid var(--rule); }
.navline .crumbs { margin: 0; }
@media (max-width: 40rem) { .navline .backto { border: 0; padding: 0; flex-basis: 100%; } }
.navline .crumbs ol { margin: 0; }
/* beside: the record keeps room to read (10 Oct) */
.app-main:has(.besgrid) { max-width: 96rem; }
.besgrid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.besgrid .bes-main .grid.g2, .besgrid .bes-main .grid.g3, .besgrid .bes-main .grid.g4 { grid-template-columns: minmax(0, 1fr); }
.besgrid .facts-list { grid-template-columns: minmax(7rem, max-content) minmax(10rem, 1fr); }
.beside .facts-list { grid-template-columns: minmax(0, 1fr); gap: 0.125rem; }
.beside .facts-list dd { margin-bottom: 0.5rem; }
@container page (max-width: 54rem) { .besgrid { grid-template-columns: minmax(0, 1fr); } }
/* ---------- compact dashboard (10 Oct) ---------- */
.sboxes { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 0.75rem; }
.sbox { background: var(--surface); border: 1px solid var(--rule); border-radius: 0.875rem; padding: 0.875rem 1rem; display: grid; gap: 0.125rem; }
.sbox .sub { font-size: 0.8125rem; color: var(--muted); }
.sbox strong { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.sbox strong .chg { font-size: 0.875rem; font-weight: 500; color: var(--muted); }
.sbox.bad strong { color: var(--bad-fg); }
.pl-cos { list-style: none; margin: 0.5rem 0 0; padding: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: 0.875rem; overflow: hidden; }
.pl-cohead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; padding: 0.625rem 1.125rem; background: var(--bg-alt); border-top: 1px solid var(--rule); }
.pl-co:first-child .pl-cohead { border-top: 0; }
.pl-cohead a, .pl-cohead strong { font-weight: 600; font-size: 1rem; }
.pl-cohead .sub { font-size: 0.8125rem; color: var(--muted); }
.pl-cohead .pl-det { margin-inline-start: auto; font-size: 0.875rem; font-weight: 500; }
.pl-list { list-style: none; margin: 0; padding: 0; }
.pl { display: grid; grid-template-columns: minmax(10rem, 1.25fr) minmax(9rem, 1fr) minmax(14rem, 1.9fr) minmax(10rem, 1.15fr); gap: 0.375rem 1.25rem; align-items: center; padding: 0.875rem 1.125rem; border-top: 1px solid var(--rule); }
.pl.soon { background: var(--warn-bg); }
.pl .sub { display: block; font-size: 0.8125rem; color: var(--muted); }
.pl-name a { font-weight: 600; }
.pl-next strong, .pl-pay strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.pl-days { font-size: 0.875rem; color: var(--muted); }
.pl.soon .pl-days { color: var(--warn-fg); font-weight: 600; }
.pl-pay { text-align: end; }
.pl-chg { font-size: 0.875rem; color: var(--muted); }
.pl-chg.big { color: var(--warn-fg); font-weight: 600; }
.pl-pay a.np { color: var(--warn-fg); }
.wtags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.wtags a, .wtags .t-none { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 1.75rem; padding: 0.125rem 0.5rem; border-radius: 0.375rem; font-size: 0.8125rem; text-decoration: none; border: 1px solid transparent; }
.wtags .gl { width: 0.875rem; height: 0.875rem; flex: none; }
.wtags a:hover span { text-decoration: underline; }
.wtags .t-blockers { background: var(--bad-bg); color: var(--bad-fg); border-color: var(--bad-bd); font-weight: 600; }
.wtags .t-urgent { background: var(--warn-bg); color: var(--warn-fg); }
.wtags .t-review { background: var(--warn-bg); color: var(--warn-fg); }
.wtags .t-approvals { background: var(--info-bg); color: var(--info-fg); }
.wtags .t-notices, .wtags .t-upcoming { background: var(--bg-alt); color: var(--fg); border-color: var(--rule); }
.wtags .t-none { color: var(--ok-fg); padding-inline: 0; }
:root[data-mode="contrast"] .wtags a { border-color: currentColor; }
.panel.oneline { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; margin-top: 1rem; }
.panel.oneline h2 { font-size: 1rem; margin: 0; }
.panel.oneline p { margin: 0.125rem 0 0; }
@media (max-width: 60rem) {
  .pl { grid-template-columns: minmax(0, 1fr) auto; }
  .pl-name { grid-column: 1; } .pl-next { grid-column: 2; text-align: end; }
  .pl-work { grid-column: 1 / -1; }
  .pl-pay { grid-column: 1 / -1; text-align: start; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; }
  .pl-pay .sub { display: inline; margin-inline-end: auto; }
  .pl-next .sub { display: none; }
}
.sboxes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
@media (max-width: 30rem) { .sboxes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sbox strong { font-size: 1.0625rem; } .sbox { padding: 0.625rem 0.75rem; } }
@media (max-width: 60rem) { .pl-next .sub { display: inline; margin-inline-end: 0.25rem; } }
@media (max-width: 30rem) { .pl { grid-template-columns: minmax(0, 1fr); } .pl-name, .pl-next { grid-column: 1; text-align: start; } .sbox strong .chg { display: inline-block; } }
/* ---------- company page: payroll details first (10 Oct) ---------- */
.co-together { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.9375rem; }
.cpcs { display: grid; gap: 1rem; }
.cpc-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem; }
.cpc-head h3 { font-size: 1.1875rem; margin: 0; }
.cpc-head p { margin: 0.125rem 0 0; }
.cpc-open { font-weight: 600; }
.cpc .tl { margin-top: 1rem; }
.cpc-body { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; margin-top: 1rem; }
.cpc-fig { flex: 1 1 26rem; min-width: 0; }
.cpc-side { flex: 1 1 18rem; min-width: 0; }
.cpc-side h4 { font-size: 0.8125rem; font-weight: 600; color: var(--muted); margin: 0 0 0.375rem; }
.cpc-side h4 + .wtags, .cpc-side ul + h4, .cpc-side p + h4 { margin-top: 0; }
.cpc-side ul + h4, .cpc-side p + h4 { margin-top: 1rem; }
.cpc-why { list-style: none; margin: 0; padding: 0; }
.cpc-why li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.375rem 0; border-top: 1px solid var(--rule); font-size: 0.9375rem; }
.cpc-why .up { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; } .cpc-why .down { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.colist { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0.75rem 1.5rem; }
.colist h3 { font-size: 0.8125rem; font-weight: 600; color: var(--muted); margin: 0 0 0.25rem; }
.colist ul { list-style: none; margin: 0; padding: 0; }
.colist li { display: grid; gap: 0.125rem; padding: 0.5rem 0; border-top: 1px solid var(--rule); }
.colist li a { font-weight: 600; }
.colist .att { font-size: 0.8125rem; color: var(--muted); }
.colist .att.err { color: var(--bad-fg); font-weight: 600; } .colist .att.wrn { color: var(--warn-fg); font-weight: 600; }
@media (max-width: 40rem) {
  .cpc .tl { display: none; }
  .cpc-fig .table-wrap { overflow: visible; border: 0; }
  .cpc-fig table.fig { font-size: 0.8125rem; }
  .cpc-fig table.fig th, .cpc-fig table.fig td { padding: 0.375rem 0.25rem; }
  .cpc-fig table.fig td.chg { white-space: normal; }
  .cpc-fig table.fig th[scope="row"] { white-space: normal; }
}
/* compact lists of places to go, with a small icon (10 Oct) */
.llist { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0 1.5rem; }
.llist.cols { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.llist li { display: grid; gap: 0.125rem; padding: 0.625rem 0; border-top: 1px solid var(--rule); }
.llist a, .llist .nolink { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; min-height: 1.75rem; }
.llist .gl, .colist .gl { width: 1.125rem; height: 1.125rem; flex: none; color: var(--brand); }
.llist .d { font-size: 0.8125rem; color: var(--muted); padding-inline-start: 1.625rem; }
.colist li a { display: inline-flex; align-items: center; gap: 0.5rem; }
.colist .att { padding-inline-start: 1.625rem; }
:root[data-mode="contrast"] .llist .gl, :root[data-mode="contrast"] .colist .gl { color: #ffff00; }
/* dashboard icons back (10 Oct) */
.sbox { grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 0.75rem; }
.sbox > div { display: grid; gap: 0.125rem; min-width: 0; }
.sbox .icon, .pl-cohead .icon, .pl-name .icon { width: 2.25rem; height: 2.25rem; flex: none; }
.pl-cohead { align-items: center; }
.pl-name { display: flex; align-items: flex-start; gap: 0.75rem; min-width: 0; }
.pl-name > div { min-width: 0; }
@media (max-width: 30rem) { .sbox .icon { display: none; } .sbox { grid-template-columns: minmax(0, 1fr); } .pl-name .icon, .pl-cohead .icon { width: 1.875rem; height: 1.875rem; } }
/* payrolls step in under their company (10 Oct) */
.pl-list { margin-inline-start: 2.25rem; border-inline-start: 2px solid var(--rule); }
.pl-list .pl { padding-inline-start: 1.25rem; }
.pl-cohead { border-bottom: 1px solid var(--rule); }
.pl-co + .pl-co .pl-cohead { border-top: 2px solid var(--rule); }
.pl-list .pl:first-child { border-top: 0; }
.cpc-head { justify-content: flex-start; align-items: flex-start; }
.cpc-head .icon { width: 2.25rem; height: 2.25rem; flex: none; }
.cpc-title { flex: 1; min-width: 0; }
@media (max-width: 30rem) { .pl-list { margin-inline-start: 1rem; } .pl-list .pl { padding-inline-start: 0.75rem; } }
/* payroll line: one fact per line (10 Oct) */
.pl-next { display: grid; gap: 0; }
.pl-next .sub, .pl-next .pl-days { display: block; }
.pl-days { font-size: 0.875rem; }
.pl-stage { display: inline-block; margin-top: 0.25rem; font-size: 0.8125rem; font-weight: 600; color: var(--info-fg); background: var(--info-bg); border-radius: 0.375rem; padding: 0 0.5rem; }
@media (max-width: 60rem) { .pl-next .sub { display: block; margin: 0; } }
.pl-days.late { color: var(--bad-fg); font-weight: 600; }
/* status in place of the payroll code; brand icons in the header (10 Oct) */
.pl-stage { margin-top: 0; vertical-align: 0.0625rem; border: 1px solid currentColor; }
.pl-stage.st-open, .pl-stage.st-inputs { color: var(--info-fg); background: var(--info-bg); }
.pl-stage.st-review { color: var(--info-fg); background: var(--info-bg); }
.pl-stage.st-approved, .pl-stage.st-released { color: var(--info-fg); background: var(--info-bg); } .pl-stage.st-paid { color: var(--ok-fg); background: var(--ok-bg); }
.melinks .icon.ml-ic { width: 2rem; height: 2rem; flex: none; }
@media (max-width: 47.99rem) { .melinks .icon.ml-ic { width: 1.75rem; height: 1.75rem; } }
/* profile button and panel; dashboard heading (10 Oct) */
.prof { position: relative; }
.prof-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0.25rem; border-radius: 999px; border: 0; background: none; color: var(--fg); font: inherit; font-weight: 600; font-size: 0.9375rem; cursor: pointer; }
.prof-btn .icon.ml-ic { width: 2rem; height: 2rem; flex: none; }
.prof-btn:hover, .prof-btn[aria-expanded="true"] { color: var(--brand); }
.prof-btn[aria-expanded="true"] { background: var(--info-bg); }
.prof-who { display: flex; gap: 0.75rem; align-items: flex-start; }
.prof-who .icon { flex: none; }
.prof-pop { position: absolute; inset-inline-end: 0; top: calc(100% + 0.5rem); z-index: 70; min-width: 17rem; background: var(--surface); color: var(--fg); border: 1px solid var(--rule); border-radius: 0.875rem; box-shadow: var(--shadow); padding: 0.875rem 1rem 0.5rem; }
.prof-pop p { margin: 0; }
.prof-name { font-weight: 600; }
.prof-pop ul { list-style: none; margin: 0.625rem 0 0; padding: 0.375rem 0 0; border-top: 1px solid var(--rule); }
.prof-pop a, .prof-pop .prof-out { display: flex; align-items: center; gap: 0.5rem; width: 100%; min-height: 2.75rem; font: inherit; font-weight: 600; color: var(--fg); background: none; border: 0; padding: 0; text-align: start; text-decoration: none; cursor: pointer; }
.prof-pop a:hover, .prof-pop .prof-out:hover { color: var(--brand); }
.prof-pop .gl { width: 1.125rem; height: 1.125rem; }
:root[data-mode="contrast"] .prof-pop { border: 2px solid #ffff00; }
.dash-head { display: flex; align-items: center; gap: 0.875rem; }
.dash-head .icon { width: 3rem; height: 3rem; flex: none; }
@media (max-width: 47.99rem) { .site-header #menu-button, .site-header .lang-link { padding-inline: 0.625rem; } .prof-pop { position: fixed; inset-inline: 1rem; top: 4.5rem; min-width: 0; } }
@media (max-width: 30rem) { .site-header .lang-link { display: none; } }
.page-head.dash-head { justify-content: flex-start; }

/* menu: three lines only, round; profile sits last */
.site-header #menu-button.pill { width: 2.75rem; height: 2.75rem; padding: 0; justify-content: center; border-radius: 50%; }
#menu-button > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* calmer dashboard: colour only for blockers, quiet links, whole payroll row opens the payroll */
.wtags .t-blockers { background: var(--bad-fg); color: var(--bg); border-color: var(--bad-fg); font-weight: 600; }
.wtags .t-urgent, .wtags .t-review, .wtags .t-approvals { background: var(--bg-alt); color: var(--fg); border-color: transparent; }
:root[data-mode="contrast"] .wtags .t-blockers { background: #ffff00; color: #000; }
.pl-cohead a, .pl-name a { text-decoration: none; }
.pl-cohead a:hover, .pl-name a:hover { text-decoration: underline; }
.pl { position: relative; }
.pl-name a.pl-go::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.pl .wtags a, .pl a.np { position: relative; z-index: 1; text-decoration: none; }
.pl a.np:hover { text-decoration: underline; }
.pl:hover { background: var(--info-bg); cursor: pointer; }
.pl:hover a.pl-go { text-decoration: underline; }
.pl:has(a.pl-go:focus-visible) { outline: 3px solid var(--brand); outline-offset: -3px; }
.pl a.pl-go:focus-visible { outline: none; }
/* Menu as a round brand icon, like the other header doors */
.site-header #menu-button.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--fg); cursor: pointer; }
.site-header #menu-button .icon.ml-ic { width: 2rem; height: 2rem; }
.site-header #menu-button:hover .i-bg, .site-header #menu-button[aria-expanded="true"] .i-bg { stroke: var(--brand); }

/* header doors: icons only on wider screens, the count sits where the blue dot is (10 Oct) */
@media (min-width: 48rem) {
  .melinks a { padding: 0; width: 2.75rem; justify-content: center; }
  .melinks .ml-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .melinks .ct { position: absolute; top: 0; inset-inline-end: 0; min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem; line-height: 1rem; font-size: 0.6875rem; font-weight: 700; border: 2px solid var(--bg); box-sizing: border-box; }
  .melinks a.has-ct .i-dot { display: none; }
  .melinks a[aria-current="page"] { background: var(--info-bg); }
}

/* ---------- Workers (10 Oct) ---------- */
.wk-head { justify-content: flex-start; gap: 0.875rem; align-items: center; }
.wk-head .icon { width: 3rem; height: 3rem; flex: none; }
.wk-head h1 { margin: 0; }
.wk-head .sub { margin: 0.125rem 0 0; color: var(--muted); }
.wk-find { background: var(--surface); border: 1px solid var(--rule); border-radius: 0.875rem; padding: 1rem 1.25rem; margin-top: 1.25rem; }
.wk-q { display: flex; flex-wrap: wrap; gap: 0.625rem; align-items: flex-end; }
.wk-q .qf { flex: 1 1 20rem; display: grid; gap: 0.25rem; }
.wk-q .qf label { font-weight: 600; font-size: 0.875rem; }
.wk-q .qf input { min-height: 3rem; }
.wk-q .btn { min-height: 3rem; }
.wk-find .hint { margin: 0.375rem 0 0; font-size: 0.8125rem; color: var(--muted); }
.fchips { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.875rem; }
.fchips.more { margin-top: 0.5rem; }
.fchips.more[hidden] { display: none; }
.fchip { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 2.75rem; border: 1px solid var(--control); border-radius: 999px; background: var(--surface); padding: 0 0.25rem 0 0.875rem; font-size: 0.875rem; max-width: 100%; }
.fchip label { color: var(--muted); white-space: nowrap; }
.fchip select, .fchip input[type="date"] { font: inherit; font-weight: 600; color: var(--fg); border: 0; background: transparent; min-height: 2.5rem; padding: 0 0.5rem 0 0.25rem; max-width: 14rem; min-width: 0; border-radius: 999px; }
.fchip.on { border: 2px solid var(--brand); background: var(--info-bg); }
.fchip.on label { color: var(--info-fg); }
.fchip .fx { border: 0; background: none; color: var(--info-fg); font-size: 0.875rem; width: 2rem; height: 2rem; border-radius: 50%; cursor: pointer; }
.fchip .fx:hover { background: var(--surface); }
.fmore { min-height: 2.75rem; border: 0; background: none; color: var(--brand); font: inherit; font-weight: 600; font-size: 0.875rem; padding: 0 0.5rem; cursor: pointer; }
.wk-seg { margin: 0 0 0 auto; padding: 0; border: 1px solid var(--control); border-radius: 999px; display: inline-flex; overflow: hidden; background: var(--surface); }
.wk-seg label { position: relative; display: inline-flex; align-items: center; min-height: 2.625rem; padding: 0 0.875rem; font-size: 0.875rem; cursor: pointer; }
.wk-seg label + label { border-inline-start: 1px solid var(--control); }
.wk-seg label.on { background: var(--brand); color: var(--on-brand, #fff); font-weight: 600; }
.wk-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wk-seg label:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: -3px; }
.wk-grid { display: grid; grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr); gap: 1.125rem; margin-top: 1.125rem; align-items: start; }
.wk-side { display: grid; gap: 0.875rem; }
.wk-main { min-width: 0; display: grid; gap: 1rem; align-content: start; }
.otree, .wk-saved, .wk-box { background: var(--surface); border: 1px solid var(--rule); border-radius: 0.875rem; padding: 0.875rem 0.75rem; }
.wk-box { padding: 1rem 1.25rem; }
.otree h2, .wk-saved h2, .wk-box h2 { margin: 0 0.5rem 0.375rem; font-size: 1rem; font-weight: 600; }
.wk-box h2 { margin: 0 0 0.375rem; font-size: 1.125rem; }
.otree ul, .wk-saved ul, .wk-recent, .wk-quick { list-style: none; margin: 0; padding: 0; }
.ot-n { display: flex; align-items: center; padding-inline-start: calc(var(--lvl) * 1rem); border-radius: 0.5rem; }
.ot-n.on { background: var(--info-bg); box-shadow: inset 3px 0 0 var(--brand); }
[dir="rtl"] .ot-n.on { box-shadow: inset -3px 0 0 var(--brand); }
.ot-n.under { background: color-mix(in srgb, var(--info-bg) 45%, transparent); }
.ot-tw { flex: none; width: 1.75rem; height: 2.5rem; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 0.75rem; display: inline-flex; align-items: center; justify-content: center; }
.ot-pick { flex: 1; min-width: 0; display: flex; justify-content: space-between; gap: 0.5rem; align-items: center; min-height: 2.5rem; border: 0; background: none; color: var(--fg); font: inherit; font-size: 0.9375rem; text-align: start; padding: 0 0.5rem 0 0; cursor: pointer; }
.ot-pick .t { overflow-wrap: anywhere; }
.ot-pick .n { color: var(--muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.ot-n.on .ot-pick { font-weight: 600; color: var(--info-fg); }
.ot-pick:hover .t { text-decoration: underline; }
.ot-sub { display: flex; gap: 0.5rem; align-items: center; min-height: 2.75rem; margin: 0.375rem 0.5rem 0; font-size: 0.875rem; }
.wk-saved { padding: 0.875rem 1rem; }
.wk-saved h2 { margin: 0 0 0.25rem; }
.wk-saved li { display: flex; align-items: center; gap: 0.25rem; border-top: 1px solid var(--rule); }
.wk-saved .linklike { flex: 1; display: inline-flex; gap: 0.5rem; align-items: center; min-height: 2.75rem; text-align: start; font-weight: 500; }
.wk-saved .gl { width: 1rem; height: 1rem; flex: none; }
.sl-x { border: 0; background: none; color: var(--muted); width: 2.25rem; height: 2.25rem; border-radius: 50%; cursor: pointer; }
.sl-x:hover { color: var(--bad-fg); }
.wk-recent li { display: grid; grid-template-columns: auto 1fr auto; gap: 0.75rem; align-items: center; padding: 0.5rem 0; border-top: 1px solid var(--rule); }
.wk-recent a { font-weight: 600; text-decoration: none; }
.wk-recent a:hover { text-decoration: underline; }
.wk-recent .d { display: block; font-size: 0.875rem; color: var(--muted); }
.wk-quick li { border-top: 1px solid var(--rule); }
.wk-quick button { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 0.75rem; align-items: center; min-height: 3rem; border: 0; background: none; font: inherit; color: var(--fg); text-align: start; cursor: pointer; padding: 0; }
.wk-quick .gl { width: 1.25rem; height: 1.25rem; color: var(--brand); }
.wk-quick .l { color: var(--brand); font-weight: 600; }
.wk-quick button:hover .l { text-decoration: underline; }
.wk-res tbody tr[data-row-href] { cursor: pointer; }
.wk-res tbody tr[data-row-href]:hover { background: var(--info-bg); }
.wk-res tbody tr:hover a.wk-go { text-decoration: underline; }
.wk-res a.wk-go, .wk-res a.pos { text-decoration: none; }
.wk-res a.pos:hover { text-decoration: underline; }
.wk-res th[scope="row"], .wk-res td { vertical-align: top; }
.wtag { display: inline-block; font-size: 0.75rem; font-weight: 600; color: var(--fg); border: 1px solid var(--control); border-radius: 0.375rem; padding: 0 0.375rem; white-space: nowrap; vertical-align: 0.0625rem; }
.wk-res .why { display: block; font-size: 0.8125rem; font-style: italic; color: var(--fg); }
.wk-res .spell { display: block; font-size: 0.8125rem; color: var(--muted); }
.wk-res .asg.more { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed var(--rule); }
.tagp { font-size: 0.75rem; font-weight: 600; background: var(--bg-alt); border-radius: 0.375rem; padding: 0 0.375rem; }
.stl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.stl li { display: inline-flex; gap: 0.3rem; align-items: center; background: var(--bg-alt); color: var(--fg); border-radius: 0.375rem; padding: 0.0625rem 0.5rem; font-size: 0.8125rem; font-weight: 500; }
.stl .gl { width: 0.875rem; height: 0.875rem; flex: none; }
:root[data-mode="contrast"] .stl li, :root[data-mode="contrast"] .tagp { border: 1px solid currentColor; }
.wk-main .rbar { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; }
.wk-main .rbar p { margin: 0; flex: 1 1 18rem; }
@media (max-width: 63.99rem) {
  .wk-grid { grid-template-columns: minmax(0, 1fr); }
  .wk-side { order: 2; }
  .otree { display: none; }
}
@media (max-width: 47.99rem) {
  .wk-seg { margin-inline-start: 0; }
  .wk-find { padding: 0.875rem; }
  .wk-res thead { display: none; }
  .wk-res, .wk-res tbody, .wk-res tr, .wk-res th, .wk-res td { display: block; width: 100%; box-sizing: border-box; }
  .wk-res tr { padding: 0.75rem 1rem; border-top: 1px solid var(--rule); }
  .wk-res th[scope="row"], .wk-res td { padding: 0.125rem 0; border: 0; text-align: start; }
  .wk-res td.num { position: absolute; inset-inline-end: 1rem; margin-top: -1.5rem; width: auto; font-size: 0.8125rem; color: var(--muted); }
  .wk-res tr { position: relative; }
  .wk-res td:empty { display: none; }
  .wk-res td.n { text-align: start; }
  .fchip select { max-width: 9.5rem; }
}
.wk-q input[type="search"] { width: 100%; box-sizing: border-box; border: 1px solid var(--control); border-radius: 0.625rem; padding: 0 0.875rem; font: inherit; background: var(--surface); color: var(--fg); }
.fchip select { max-width: 11rem; }

/* ---------- employee side (11 Oct): section bar, Absence at a glance, Team ---------- */
.wsnav { margin: 0.75rem 0 1.25rem; }
.wsnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.wsnav a { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; padding: 0 0.875rem; border-radius: 999px; border: 1px solid var(--rule); background: var(--surface); color: var(--fg); text-decoration: none; font-weight: 600; font-size: 0.9375rem; }
.wsnav a:hover { border-color: var(--brand); color: var(--brand); }
.wsnav a[aria-current="page"] { background: var(--info-bg); border-color: var(--brand); color: var(--info-fg); }
.wsnav .gl { width: 1.125rem; height: 1.125rem; }
.dash-head > div { min-width: 0; }
.dash-head .sub { margin: 0.125rem 0 0; color: var(--muted); }
.sec2 { font-size: 1.25rem; font-weight: 600; margin: 1.5rem 0 0.25rem; }
.lrows { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
.lrow { border-top: 1px solid var(--rule); padding-top: 0.875rem; }
.lrow:first-child { border-top: 0; padding-top: 0; }
.lhead { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.lhead h3 { margin: 0; font-size: 1.0625rem; font-weight: 600; }
.lhead .gl { width: 1.25rem; height: 1.25rem; color: var(--brand); }
.lnum { margin-inline-start: auto; color: var(--muted); }
.lnum b { color: var(--fg); font-size: 1.25rem; font-weight: 600; }
.lbar { display: flex; height: 0.75rem; border-radius: 999px; background: var(--bg-alt); overflow: hidden; margin: 0.5rem 0; border: 1px solid var(--rule); }
.lbar .lseg { height: 100%; flex: none; }
.lbar .taken, .lbar .full { background: var(--brand); }
.lbar .booked, .lbar .half { background: color-mix(in srgb, var(--brand) 55%, var(--surface)); }
.lbar .pending { background: repeating-linear-gradient(45deg, var(--brand) 0 3px, transparent 3px 7px); }
.lbar .unpaid { background: var(--warn-fg); }
:root[data-mode="contrast"] .lbar .lseg { background: #ffff00; border-inline-end: 2px solid #000; }
.lfacts { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: 0.25rem 0; }
.lfacts div { display: flex; gap: 0.375rem; align-items: baseline; }
.lfacts dt { color: var(--muted); font-size: 0.875rem; }
.lfacts dd { margin: 0; font-weight: 600; }
.lother { margin: 1rem 0 0; }
.cal .mark.away { background: var(--bg-alt); color: var(--fg); border: 1px solid var(--control); }
.tm .tm-who { display: flex; align-items: center; gap: 0.25rem; padding-inline-start: calc(var(--lvl) * 1.5rem); }
.tm-tw { flex: none; width: 2rem; height: 2.75rem; border: 0; background: none; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.tm tr.lvl1 th, .tm tr.lvl1 td, .tm tr.lvl2 th, .tm tr.lvl2 td { background: color-mix(in srgb, var(--bg-alt) 50%, transparent); }
.items .title .gl { width: 1rem; height: 1rem; vertical-align: -0.125rem; color: var(--brand); }
@media (max-width: 47.99rem) { .wsnav a { padding: 0 0.625rem; font-size: 0.875rem; } .lfacts { gap: 0.25rem 1rem; } }
/* assignments on the employee side (12 Oct) */
.asgcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0.75rem; }
.asgcard { display: flex; gap: 0.75rem; align-items: flex-start; border: 1px solid var(--rule); border-radius: 0.75rem; padding: 0.75rem 0.875rem; }
.asgcard .icon { width: 2.25rem; height: 2.25rem; flex: none; }
.asgcard p { margin: 0; }
.asgcard .t { font-weight: 600; }
.asgcard .d { font-size: 0.875rem; color: var(--muted); }
.asgcard .d strong { color: var(--fg); font-weight: 600; }
.lsplit { margin-top: 0.5rem; padding: 0.625rem 0.875rem; background: var(--bg-alt); border-radius: 0.625rem; }
.lsplit p { margin: 0 0 0.25rem; }
.lsplit ul { margin: 0; padding-inline-start: 1.25rem; font-size: 0.875rem; }
.cal tr.cal-grp th { text-align: start; font-weight: 600; font-size: 0.8125rem; background: var(--bg-alt); padding: 0.375rem 0.5rem; }
table tr.grp th { background: var(--bg-alt); font-weight: 600; text-align: start; }
table tr.subtot th, table tr.subtot td { font-weight: 600; border-top: 1px solid var(--rule); }

/* 12 Oct: annual leave held per assignment (client setting, TA-05.1) */
.lhead h3 .lasg { display: block; font-weight: 400; font-size: .875rem; color: var(--muted); }
.lnote { margin: 0 0 .75rem; }
fieldset.choice { border: 0; margin: 0; padding: 0; display: grid; gap: .75rem; }
fieldset.choice legend { font-weight: 600; margin-bottom: .5rem; padding: 0; }
fieldset.choice label { display: flex; gap: .625rem; align-items: flex-start; padding: .75rem; border: 1px solid var(--control); border-radius: .5rem; cursor: pointer; }
fieldset.choice label:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
fieldset.choice input { margin-top: .2rem; flex: none; }

/* 12 Oct: requests, part days, how it adds up, good to know, day counts */
.addsup { margin-top: .5rem; }
.addsup summary { cursor: pointer; color: var(--brand); font-weight: 600; font-size: .9375rem; width: fit-content; }
.addsup-t { border-collapse: collapse; margin: .5rem 0 .25rem; min-width: min(100%, 26rem); }
.addsup-t th { text-align: start; font-weight: 400; padding: .25rem 1rem .25rem 0; }
.addsup-t td { padding: .25rem 0; }
.addsup-t tfoot th, .addsup-t tfoot td { font-weight: 700; border-top: 1px solid var(--rule); padding-top: .375rem; }
.partday { border: 1px solid var(--rule); border-radius: .5rem; padding: .5rem .75rem; }
.partday summary { cursor: pointer; font-weight: 600; color: var(--brand); }
.gtk { margin-top: .75rem; padding: .75rem 1rem; border-radius: .5rem; background: var(--bg-alt); border-inline-start: 3px solid var(--brand); }
.gtk p { margin: .25rem 0; }
.gtk .gtk-h { font-weight: 700; display: flex; gap: .375rem; align-items: center; }
.cal tfoot th { font-weight: 600; font-size: .8125rem; }
.cal .cal-count td { text-align: center; font-size: .75rem; font-weight: 700; }
.cal .cal-count td.c1 { background: color-mix(in srgb, var(--brand) 14%, transparent); }
.cal .cal-count td.c2 { background: color-mix(in srgb, var(--brand) 30%, transparent); }
.cal .cal-count td.c3 { background: var(--brand); color: var(--on-brand); }
.done-panel { display: flex; gap: 1rem; align-items: flex-start; }
.done-panel .lead { font-size: 1.125rem; font-weight: 600; margin-top: 0; }
.req-kv small { display: block; }
.addsup-t { width: auto; max-width: 34rem; }
.addsup-t td { text-align: end; white-space: nowrap; }

/* 12 Oct: report sickness and record an absence */
.stepline { margin: 0 0 .375rem; font-size: .875rem; color: var(--muted); }
.stepline span { font-weight: 700; color: var(--fg); }
.steps-bar { height: 4px; background: var(--rule); border-radius: 2px; margin-bottom: 1.25rem; overflow: hidden; }
.steps-bar span { display: block; height: 100%; background: var(--brand); }
fieldset.reasons { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
fieldset.reasons legend, fieldset.reasons details { grid-column: 1 / -1; }
fieldset.reasons legend .small { display: block; font-weight: 400; margin-top: .25rem; }
fieldset.reasons details summary { cursor: pointer; color: var(--brand); font-weight: 600; margin: .25rem 0 .5rem; }
.reasons-more { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
fieldset.choice legend .small { font-weight: 400; }
fieldset.pick { max-height: none; }
.seg-choice { border: 0; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.seg-choice legend { font-weight: 600; margin-bottom: .5rem; padding: 0; width: 100%; }
.seg-choice label { display: inline-flex; gap: .5rem; align-items: center; padding: .5rem .875rem; border: 1px solid var(--control); border-radius: 999px; cursor: pointer; }
.seg-choice label:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
label.check { display: flex; gap: .625rem; align-items: flex-start; margin: .75rem 0; cursor: pointer; }
label.check input { margin-top: .25rem; flex: none; }
.ab-acts { margin: 0 0 1rem; }
.page-head .grow { flex: 1; min-width: 0; }
.page-head .head-act { align-self: center; flex: none; }
.gtk.warn { border-inline-start-color: var(--warn-fg, #b45309); }
.newtag { display: inline-flex; align-items: center; gap: .3rem; margin-inline-start: .5rem; font-size: .75rem; font-weight: 700; color: var(--brand); }
.newtag .dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--brand); display: inline-block; }
.gtk .newtag { margin-inline-start: .25rem; }

/* 12 Oct: new starter */
.firstday { background: var(--brand); color: var(--on-brand); border-radius: .75rem; padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; }
.firstday h2 { margin: .25rem 0 .5rem; color: inherit; }
.firstday p { margin: 0; color: inherit; }
.firstday .eyebrow { text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; font-weight: 700; }
.starter-top .big { font-size: 1.75rem; font-weight: 700; margin: .25rem 0; }
.countdown { display: flex; gap: 1rem; align-items: center; }
.cal-chip { display: grid; place-items: center; width: 4rem; height: 4.25rem; border-radius: .5rem; border: 1px solid var(--rule); overflow: hidden; flex: none; text-align: center; }
.cal-chip .m { display: block; width: 100%; background: var(--brand); color: var(--on-brand); font-size: .75rem; font-weight: 700; text-transform: uppercase; padding: .125rem 0; }
.cal-chip .d { font-size: 1.5rem; font-weight: 700; }
.tasks { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .75rem; }
.task { border: 1px solid var(--rule); border-radius: .625rem; padding: .875rem 1rem; }
.task.done, .task.accepted { border-inline-start: 4px solid var(--ok-fg, #15803d); }
.task.rejected { border-inline-start: 4px solid var(--warn-fg); }
.task-h { display: flex; gap: .75rem; align-items: flex-start; }
.task-t { flex: 1; min-width: 0; }
.task-t h3 { margin: 0; font-size: 1rem; }
.task-t p { margin: .125rem 0 0; }
.task-s { flex: none; }
.task form, .task .field { margin-top: .75rem; }
.meetlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.meet { display: flex; gap: .75rem; align-items: center; }
.meet .t { margin: 0; font-weight: 600; } .meet .d { margin: 0; font-size: .875rem; color: var(--muted); }
ul.plain { margin: 0; padding-inline-start: 1.1rem; }
@media (max-width: 40rem) { .task-h { flex-wrap: wrap; } .task-s { width: 100%; } }
.req-kv dd { text-align: start; }
.req-kv dd ul.plain { text-align: start; }

/* 12 Oct (Tom): icon size in notes; claim form */
.gtk .gtk-h svg, .gtk .gtk-h .glyph { width: 1.125rem; height: 1.125rem; flex: none; }
.gtk + .grid, .gtk + .stack, .gtk + section { margin-top: 1.25rem; }
fieldset.ctypes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); margin-bottom: 1rem; }
fieldset.ctypes legend { grid-column: 1 / -1; }
fieldset.dur { border: 0; padding: 0; margin: 0; }
fieldset.dur legend { font-weight: 600; padding: 0; margin-bottom: .375rem; }
.dur-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.dur-row label { display: inline-flex; align-items: center; gap: .5rem; }
.dur-row input { width: 5.5rem; }
.claim-sum { font-weight: 600; min-height: 1.25rem; }
.claim-grid { gap: 1.25rem; }
.claim-grid form .form-grid { max-width: 48rem; }
.field-error[tabindex="-1"], .claim-grid form { scroll-margin-top: 10rem; }

/* 12 Oct (Tom, option 2): record details read as a sentence, a few tiles, then rows; label and value on one line */
.rec-lead { font-size: 1.125rem; margin: 0 0 1rem; max-width: 52rem; }
.ftiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: .875rem; margin-bottom: 1.5rem; }
.ftile { background: var(--surface); border: 1px solid var(--rule); border-radius: .75rem; padding: 1rem 1.125rem; }
.ftile p { margin: 0; }
.ftile .ft-k { color: var(--muted); font-size: .875rem; }
.ftile .ft-v { font-size: 1.25rem; font-weight: 600; margin-top: .25rem; }
.ftile .ft-v .status { font-size: .75rem; vertical-align: middle; }
.ftile .ft-s { color: var(--muted); font-size: .875rem; margin-top: .125rem; }
.rows-h { font-size: 1rem; font-weight: 600; margin: 0 0 .25rem; }
.facts-list { display: grid; grid-template-columns: minmax(8rem, min(38%, 15rem)) minmax(0, 1fr); gap: 0 1.25rem; margin: 0; max-width: 48rem; }
.facts-list > dt, .facts-list > dd { padding: .6875rem 0; border-top: 1px solid var(--rule); }
.facts-list > dt:first-of-type, .facts-list > dt:first-of-type + dd { border-top: 0; }
.facts-list > dt { color: var(--muted); font-size: .875rem; padding-top: .8125rem; }
.facts-list > dd { margin: 0; font-weight: 400; font-size: 1rem; }
@media (max-width: 30rem) { .facts-list { grid-template-columns: 42% 1fr; } .facts-list dd { margin-bottom: 0; } }
.beside .facts-list > dd { border-top: 0; padding-top: 0; }
.beside .facts-list > dt { padding-bottom: .125rem; }
.facts-list { column-gap: 0; }
.facts-list > dt { padding-inline-end: 1.25rem; }
/* two lists side by side read as one list of rows */
.grid.g2:has(> dl.facts-list) { grid-template-columns: minmax(0, 1fr); gap: 0; }
.grid.g2:has(> dl.facts-list) > dl.facts-list + dl.facts-list > dt:first-of-type,
.grid.g2:has(> dl.facts-list) > dl.facts-list + dl.facts-list > dt:first-of-type + dd { border-top: 1px solid var(--rule); }
dl.facts-list + dl.facts-list { margin-top: 0; }
@container page (max-width: 40rem) { .attn li > :nth-child(n+3) { grid-column: 2; justify-self: start; } }
.facts-list > dd { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 30rem) { .facts-list { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); } .facts-list > dt { padding-inline-end: .75rem; } }
.facts-list > dd .num { white-space: normal; overflow-wrap: anywhere; }

/* 12 Oct (Tom, late): timelines, profile edit, timesheet */
.tline { list-style: none; margin: .5rem 0 0; padding: 0; }
.tline li { position: relative; display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: .625rem; padding-bottom: 1rem; }
.tline li::before { content: ""; position: absolute; inset-inline-start: calc(.625rem - 1px); top: 1.1rem; bottom: -.1rem; width: 2px; background: var(--rule); }
.tline li:last-child::before { display: none; }
.tline .tline-dot { width: .875rem; height: .875rem; border-radius: 50%; margin: .3rem auto 0; background: var(--brand); border: 2px solid var(--brand); box-sizing: border-box; }
.tline .tline-now .tline-dot { background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent); }
.tline .tline-next .tline-dot { background: var(--surface); border-color: var(--control); }
.tline .tline-stop .tline-dot { background: var(--bad-fg); border-color: var(--bad-fg); }
.tline p { margin: 0; }
.tline .tline-t { font-weight: 600; }
.tline .tline-next .tline-t { font-weight: 400; color: var(--muted); }
.tline .tline-s { color: var(--muted); font-size: .875rem; }
.tline .tline-n { font-size: .875rem; margin-top: .125rem; }
.tline .tline-badge { display: inline-block; margin-inline-start: .375rem; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--brand); border: 1px solid var(--brand); border-radius: 999px; padding: 0 .4rem; vertical-align: middle; }
.req-grid { align-items: start; }
.pf-group { border: 0; padding: 0; margin: 0 0 1.25rem; }
.pf-group legend { font-weight: 600; font-size: 1rem; margin-bottom: .5rem; padding: 0; }
.pf-locked .pf-l { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: .25rem; }
.pf-locked .pf-v { margin: 0; padding: .5rem 0; color: var(--fg); }
.ts-lines { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .5rem; counter-reset: tsl; }
.ts-line fieldset { border: 0; margin: 0; padding: .75rem 0 .25rem; border-top: 1px solid var(--rule); }
.ts-line:first-child fieldset { border-top: 0; }
.ts-grid { display: grid; align-items: start; grid-template-columns: minmax(12rem, 1.6fr) minmax(9rem, 1fr) minmax(7rem, .8fr) 5.5rem 5.5rem 6rem; gap: .75rem; }
.ts-grid.ts-asg { grid-template-columns: minmax(11rem, 1.4fr) minmax(10rem, 1.2fr) minmax(9rem, 1fr) minmax(7rem, .8fr) 5rem 5rem 6rem; }
.ts-grid .field { margin: 0; }
.ts-grid input, .ts-grid select { width: 100%; }
.ts-x { align-self: end; padding-bottom: .25rem; }
.ts-note { margin: .375rem 0 0; color: var(--muted); min-height: 1.1rem; }
.ts-add { margin: .5rem 0 1rem; align-items: center; gap: 1rem; }
.ts-help { margin-bottom: 1rem; }
.ts-help summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.ts-help .facts-list { margin-top: .5rem; }
@media (max-width: 64rem) { .ts-grid, .ts-grid.ts-asg { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ts-x { grid-column: 1 / -1; } }

.ts-grid label { min-height: 1.5rem; display: block; }
.ts-x { align-self: end; }
@media (min-width: 64.01rem) {
  .ts-line + .ts-line .ts-grid label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; min-height: 0; }
  .ts-line + .ts-line fieldset { padding-top: .5rem; }
}
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sec-head .tab-sub { margin-bottom: .5rem; }
.sec-head-solo { margin-bottom: .5rem; }
.tab-sec .sec-head, .sec-head-solo { max-width: 48rem; }
/* Team drill-down (13 Oct) */
.tm-drill { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 2.75rem; font-weight: 600; white-space: nowrap; }
.tm-drill .gl { width: 1rem; height: 1rem; }
[dir="rtl"] .tm-drill .gl { transform: scaleX(-1); }
/* Workspace Home (13 Oct): leave balances first */
.balhome { display: grid; gap: 1.25rem; }
@media (min-width: 48rem) { .balhome { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; } }
.balhome .row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.balhome-h { font-size: 1rem; margin: 0 0 0.5rem; }
/* Upload Centre, Bulk changes, Admin Centre, System settings (13 Oct) */
.up-grid { display: grid; gap: 1.25rem; }
@media (min-width: 48rem) { .up-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.up-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; min-height: 10rem; border: 2px dashed var(--muted); border-radius: .75rem; background: var(--surface); text-align: center; padding: 1rem; cursor: pointer; }
.up-drop .gl { width: 2rem; height: 2rem; color: var(--brand); }
.up-drop-t { font-weight: 600; color: var(--brand); text-decoration: underline; }
.vh-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.up-grid:has(.vh-file:focus-visible) .up-drop, .up-drop:hover { border-color: var(--brand); outline: 3px solid var(--focus, var(--brand)); outline-offset: 2px; }
.gtk:has(.vh-file:focus-visible) label.btn { outline: 3px solid var(--brand); outline-offset: 2px; }
.up-gh { font-size: .875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 1.25rem 0 .25rem; }
.up-tt td:last-child { white-space: nowrap; }
.up-stages { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.up-st { border-radius: .75rem; padding: .75rem .875rem; background: var(--surface); border: 1px solid var(--rule); display: flex; flex-direction: column; gap: .125rem; }
.up-st.ok { background: var(--ok-bg); border-color: var(--ok-bd); }
.up-st.bad { background: var(--bad-bg); border: 2px solid var(--bad-fg); }
.up-st-k { font-size: .8125rem; font-weight: 600; display: inline-flex; align-items: center; gap: .25rem; }
.up-st.ok .up-st-k { color: var(--ok-fg); } .up-st.bad .up-st-k { color: var(--bad-fg); }
.up-st-k .gl { width: 1rem; height: 1rem; }
.up-st-t { font-weight: 600; }
.up-st-d { font-size: .875rem; }
.up-two { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .up-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.up-opt { border: 1px solid var(--rule); border-radius: .75rem; padding: 1rem 1.125rem; }
.up-opt h3 { margin: 0 0 .25rem; font-size: 1.0625rem; }
.chk { display: flex; gap: .625rem; align-items: flex-start; min-height: 2.75rem; padding: .375rem 0; cursor: pointer; }
.chk input { width: 1.25rem; height: 1.25rem; margin-top: .125rem; flex: none; }
.up-steps { margin: .5rem 0 1rem; padding-inline-start: 1.25rem; }
.up-steps li { margin: .25rem 0; }
.bk-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); align-items: start; }
.bk-grid .field input, .bk-grid .field select { width: 100%; box-sizing: border-box; }
.bk-fs { border: 0; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.bk-fs legend { font-weight: 600; margin-bottom: .25rem; padding: 0; width: 100%; }
.bk-count { margin: 1rem 0 0; padding: .75rem 1rem; background: var(--info-bg); border-radius: .625rem; }
.bc-prev { background: var(--surface); border: 1px solid var(--rule); border-radius: .75rem; padding: 1rem 1.125rem; }
.bc-prev p { margin: 0 0 .375rem; }
.adm-list { list-style: none; margin: 0; padding: 0; }
.adm-list li { padding: .375rem 0; }
.adm-groups { align-items: start; }
.cal-grid { display: grid; gap: 1.25rem; }
@media (min-width: 64rem) { .cal-grid { grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); align-items: start; } }
.cal-grid .field select { width: 100%; }
.cal-t td, .cal-t th { white-space: nowrap; }
.cal-t td.small { white-space: normal; min-width: 12rem; }
.cal-mv { background: var(--warn-bg); color: var(--warn-fg); }
.cal-bad th { color: var(--bad-fg); }
.el-rules { display: grid; gap: 0; }
.el-rule { display: grid; grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr) auto; gap: .75rem; padding: .75rem 0; border-top: 1px solid var(--rule); align-items: start; }
.el-rule > span:first-child, .el-rule > label { font-weight: 600; }
@media (max-width: 47.99rem) { .el-rule { grid-template-columns: 1fr; } }
.el-code { font-weight: 600; font-size: 1.125rem; margin: .25rem 0; }
.tag-you { background: var(--info-bg); color: var(--info-fg); }
.tag-law { background: var(--warn-bg); color: var(--warn-fg); }
.ls-group { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--surface); border-radius: .625rem; padding: .75rem 1rem; margin-bottom: .75rem; }
.ls-group p { margin: 0; }
.ls-own { color: var(--info-fg); }
.sys-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.sys-tile { display: flex; flex-direction: column; gap: .125rem; padding: .75rem .875rem; border-radius: .75rem; text-decoration: none; color: inherit; border: 1px solid var(--rule); min-height: 2.75rem; }
.sys-tile.ok { background: var(--ok-bg); border-color: var(--ok-bd); }
.sys-tile.warn { background: var(--warn-bg); border: 2px solid var(--warn-fg); }
.sys-k { font-size: .8125rem; font-weight: 600; display: inline-flex; gap: .25rem; align-items: center; }
.sys-tile.ok .sys-k { color: var(--ok-fg); } .sys-tile.warn .sys-k { color: var(--warn-fg); }
.sys-k .gl { width: 1rem; height: 1rem; }
.sys-t { font-weight: 600; text-decoration: underline; }
.sys-d { font-size: .875rem; }
.sys-secret { font-size: 1rem; word-break: break-all; background: var(--surface); padding: .25rem .5rem; border-radius: .375rem; }
.field .label { display: block; font-weight: 600; }
.pill-current { border-color: var(--brand); background: var(--info-bg); color: var(--info-fg); font-weight: 600; cursor: default; }

/* ---------- side menu (16 Oct): grouped, collapses to icons, on wide screens ---------- */
#side-nav { display: none; }
.dblock { display: block; }
#site-menu .menu-groups h3 { margin: 1rem 0 0.25rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
#site-menu .menu-groups h3:first-child { margin-top: 0; }
@media (min-width: 64rem) {
  body.has-side #page { display: grid; grid-template-columns: var(--sn-w, 16.5rem) minmax(0, 1fr); grid-template-rows: auto 1fr auto; min-height: 100vh; }
  body.has-side.sn-collapsed #page { --sn-w: 4.75rem; }
  body.has-side #side-nav { display: flex; flex-direction: column; grid-column: 1; grid-row: 1 / -1; position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--surface); border-inline-end: 1px solid var(--rule); padding: 0.75rem 0.625rem 1rem; box-sizing: border-box; z-index: 21; }
  body.has-side.sn-collapsed #side-nav { overflow: visible; padding-inline: 0.5rem; }
  body.has-side .site-header, body.has-side #main, body.has-side .site-footer { grid-column: 2; min-width: 0; }
  body.has-side .site-header .brand, body.has-side .site-header .melinks, body.has-side .site-header .bar-break { display: none; }
  body.has-side #site-menu .menu-groups, body.has-side #site-menu [data-cogroup] { display: none; }
}
.sn-top { display: flex; align-items: center; gap: 0.25rem; padding: 0 0 0.25rem 0.5rem; }
.sn-brand .wordmark { font-size: 1.5rem; }
.sn-mini { display: none; font-size: 1.375rem; line-height: 1; color: var(--wm-a); }
.sn-mini b { font-weight: 400; color: var(--wm-b); }
.sn-toggle { position: relative; margin-inline-start: auto; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--fg); cursor: pointer; }
.sn-toggle:hover .i-bg { stroke: var(--brand); }
.sidenav .icon.sn-ic { width: 2rem; height: 2rem; flex: none; }
.sn-h { margin: 0.875rem 0 0.25rem; padding-inline: 0.75rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.sn-list ul { list-style: none; margin: 0; padding: 0; }
.sn-a { position: relative; display: flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; padding: 0.25rem 0.625rem; border-radius: 0.625rem; color: var(--fg); text-decoration: none; font-size: 0.9375rem; font-weight: 500; }
.sn-a:hover { color: var(--brand); }
.sn-a[aria-current="page"] { background: var(--info-bg); color: var(--brand); font-weight: 600; box-shadow: inset 3px 0 0 var(--brand); }
[dir="rtl"] .sn-a[aria-current="page"] { box-shadow: inset -3px 0 0 var(--brand); }
.sn-a .ct { margin-inline-start: auto; min-width: 1.375rem; padding: 0 0.375rem; border-radius: 999px; background: var(--muted); color: var(--surface); font-size: 0.75rem; font-weight: 600; line-height: 1.375rem; text-align: center; box-sizing: border-box; }
.sn-a.has-ct .i-dot { display: none; }
.sn-toggle .sn-tip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:root[data-mode="contrast"] .sn-a[aria-current="page"] { background: #000; outline: 2px solid #ffff00; box-shadow: none; }
:root[data-mode="contrast"] .sn-a .ct { background: #ffff00; color: #000; }
/* collapsed: icons only, each named on hover or keyboard focus */
body.sn-collapsed .sn-top { flex-direction: column; padding: 0; gap: 0.25rem; }
body.sn-collapsed .sn-brand .wordmark { display: none; }
body.sn-collapsed .sn-mini { display: inline; }
body.sn-collapsed .sn-toggle { margin: 0; }
body.sn-collapsed .sn-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
body.sn-collapsed .sn-list ul { border-top: 1px solid var(--rule); margin-top: 0.375rem; padding-top: 0.375rem; }
body.sn-collapsed .sn-list ul:first-of-type { border-top: 0; margin-top: 0; }
body.sn-collapsed .sn-a { justify-content: center; width: 3.25rem; min-height: 3.25rem; padding: 0; margin-inline: auto; }
body.sn-collapsed .sn-a .ct { position: absolute; top: 0.125rem; inset-inline-end: 0.125rem; min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem; line-height: 1rem; font-size: 0.6875rem; font-weight: 700; border: 2px solid var(--surface); margin: 0; }
body.sn-collapsed .sn-tip, body.sn-collapsed .sn-toggle .sn-tip { position: absolute; width: auto; height: auto; clip: auto; overflow: visible; inset-inline-start: calc(100% + 0.5rem); top: 50%; transform: translateY(-50%); white-space: nowrap; background: #18181b; color: #ffffff; padding: 0.375rem 0.625rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; pointer-events: none; opacity: 0; z-index: 30; }
body.sn-collapsed .sn-a:hover .sn-tip, body.sn-collapsed .sn-a:focus-visible .sn-tip, body.sn-collapsed .sn-toggle:hover .sn-tip, body.sn-collapsed .sn-toggle:focus-visible .sn-tip { opacity: 1; }
:root[data-mode="contrast"] body.sn-collapsed .sn-tip { background: #000; color: #ffff00; outline: 1px solid #ffff00; }
@media print { #side-nav { display: none !important; } body.has-side #page { display: block; } }
.an-list { list-style: none; margin: 0; padding: 0; }
.an-list > li { padding: 0.625rem 0; border-top: 1px solid var(--rule); }
.an-list > li:first-child { border-top: 0; padding-top: 0; }
.an-list .row { margin-top: 0.5rem; }
.an-find .find-row { align-items: flex-end; }
.an-find .pf { flex: 1 1 20rem; }
.an-find input[type="search"] { width: 100%; }
.adm-list .dblock { margin-top: 0.125rem; }
@media (min-width: 64rem) {
  body.has-side .site-header .bar { flex-wrap: nowrap; }
  body.has-side .site-header .goto { order: 1; }
  body.has-side .site-header .gfind { order: 2; flex: 1 1 18rem; }
  body.has-side .site-header .bar-actions { order: 3; margin-inline-start: 0; }
}
th .dblock, th .small.muted { font-weight: 400; }
.brk { overflow-wrap: anywhere; } #dp-views ~ * , .dp-grid > * { min-width: 0; }
/* selection screen: same layout in every card, buttons on one line (16 Oct) */
.role-card { display: flex; flex-direction: column; gap: 1rem; }
.role-card .person-head { flex-wrap: nowrap; align-items: center; gap: 1rem; min-height: 4rem; }
.role-card .person-head > div { min-width: 0; }
.role-card .person-head .avatar { flex: none; }
.role-card h2 { margin: 0; line-height: 1.25; }
.role-card .person-head p { margin: 0.125rem 0 0; }
.role-card > ul { flex: 1 1 auto; margin: 0; }
.role-card > .btn { margin-top: auto; align-self: flex-start; }
.role-card > ul { align-content: start; }
.role-card .person-head { align-items: flex-start; min-height: 4.75rem; }
.role-card .rc-role { margin: 0.125rem 0 0; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }

/* ---------- less before the data (16 Oct): open items in the menu, one search, compact record head ---------- */
.sidenav svg.sn-mini { display: none; width: 1.875rem; height: 1.875rem; }
.sidenav .sn-i { fill: var(--wm-a); }
.sidenav .sn-o { stroke: var(--wm-b); }
body.sn-collapsed .sidenav svg.sn-mini { display: block; }
body.sn-collapsed .sn-brand { min-height: 2.75rem; justify-content: center; }
.sn-open li { position: relative; display: flex; align-items: center; }
.sn-open .sn-a { flex: 1; min-width: 0; padding-inline-end: 2.25rem; font-size: 0.875rem; }
.sn-open .sn-a .icon.sn-ic { width: 1.625rem; height: 1.625rem; }
.sn-open .sn-tip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-open small { font-size: 0.6875rem; font-weight: 600; color: var(--muted); border: 1px solid var(--rule); border-radius: 0.25rem; padding: 0 0.25rem; }
.sn-x { position: absolute; inset-inline-end: 0.25rem; width: 2rem; height: 2rem; border: 0; background: none; border-radius: 50%; color: var(--muted); font-size: 1.125rem; cursor: pointer; }
.sn-x:hover { color: var(--fg); background: var(--info-bg); }
body.sn-collapsed .sn-open .sn-a { padding: 0; }
body.sn-collapsed .sn-x { display: none; }
body.sn-collapsed .sn-open small { display: none; }
@media (min-width: 64rem) {
  body.has-side .orow { display: none; }
  body.side-ws .wsnav { display: none; }
  body.has-side .site-header .bar { padding-block: 0.5rem; min-height: 3.5rem; }
}
/* record head: name, status and buttons on one row; details on one line under it */
.record-bar { padding: 0.625rem 0; }
.record-who { flex: 1 1 26rem; }
.record-who .avatar { width: 2.75rem; height: 2.75rem; font-size: 0.9375rem; }
.record-who h1 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); }
.record-who p { margin-top: 0.125rem; }
.record-actions { flex: 0 0 auto; }
.sn-foot { margin-top: auto; padding-top: 0.5rem; border-top: 1px solid var(--rule); display: grid; gap: 0.125rem; }
.sn-foot button.sn-a { width: 100%; border: 0; background: none; font: inherit; text-align: start; cursor: pointer; }
.sn-sub { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--muted); line-height: 1.2; }
body.sn-collapsed .sn-sub { display: none; }
body.sn-collapsed .sn-foot button.sn-a { width: 3.25rem; }
#side-nav .sn-list { flex: 1 0 auto; }
@media (min-width: 64rem) {
  body.has-side .site-header .bar-actions { display: none; }
  body.has-side.no-find .site-header { display: none; }
  body.has-side .app-main { padding-top: 1rem; }
  body.has-side .site-header .gfind { max-width: 40rem; }
}
.attn-more summary { cursor: pointer; padding: 0.5rem 0 0.125rem; font-weight: 600; color: var(--brand); min-height: 2.75rem; display: flex; align-items: center; border-top: 1px solid var(--rule); }
.attn-more[open] summary { border-bottom: 0; }
.attn-more ul li:first-child { border-top: 1px solid var(--rule); }
.ophone ul { position: static; margin-top: 0.375rem; box-shadow: none; min-width: 0; }
.sn-foot button.sn-a { font-size: 0.9375rem; font-weight: 500; }

/* v54 · one colour rule: red stops something or is late, amber needs a look soon, blue waiting or in progress, green done, grey nothing to do */
.melinks .ct.bad, .sn-a .ct.bad { background: var(--bad-fg); color: var(--surface); }
:root[data-mode="contrast"] .melinks .ct.bad, :root[data-mode="contrast"] .sn-a .ct.bad { background: #ffff00; color: #000; }
.pl.late { background: var(--bad-bg); }
/* v55 · payroll sections (UX-19.1) and year to date (RPT-16.1) */
.ptabs { margin: 1rem 0 0; border-bottom: 1px solid var(--rule); overflow-x: auto; }
.ptabs ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem; }
.ptabs a { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; padding: 0 0.875rem; color: var(--fg); text-decoration: none; white-space: nowrap; border-radius: 0.5rem 0.5rem 0 0; }
.ptabs a:hover { background: var(--bg-alt); text-decoration: underline; }
.ptabs a[aria-current="page"] { font-weight: 600; box-shadow: inset 0 -3px 0 var(--brand); }
.ptabs .cnt { font-size: 0.75rem; font-weight: 600; color: var(--muted); border: 1px solid var(--rule); border-radius: 999px; padding: 0 0.4rem; }
:root[data-mode="contrast"] .ptabs a[aria-current="page"] { box-shadow: inset 0 -3px 0 #ffff00; }
.seg a { display: inline-flex; align-items: center; padding: 0.5rem 0.875rem; min-height: 2.75rem; box-sizing: border-box; color: var(--fg); background: var(--surface); text-decoration: none; border-inline-end: 1px solid var(--rule); }
.seg a:last-child { border-inline-end: 0; }
.seg a[aria-current="page"] { background: var(--info-bg); color: var(--info-fg); font-weight: 600; }
.ytd-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: 1rem; }
.ytd-bar p { margin: 0; }
table.ytd { font-size: 0.875rem; }
table.ytd th, table.ytd td { white-space: nowrap; padding: 0.4rem 0.6rem; }
table.ytd thead th .sub { display: block; font-weight: 400; color: var(--muted); font-size: 0.75rem; }
table.ytd tr.grp th { text-align: start; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); padding-top: 0.9rem; }
table.ytd tr.tot th, table.ytd tr.tot td { font-weight: 700; border-top: 2px solid var(--control); }
table.ytd td.open { font-style: italic; color: var(--muted); }
table.ytd .proj { background: var(--bg-alt); }
table.ytd th[scope="row"] { white-space: normal; min-width: 9rem; max-width: 15rem; font-weight: 400; }
table.ytd tr.tot th[scope="row"] { font-weight: 700; }
table.ytd th, table.ytd td { padding: 0.4rem 0.45rem; }
table.ytd thead th.proj { white-space: normal; min-width: 5.5rem; }
/* v58 · pay element classification (PAY-46) and event duties */
.bk-grid .el-wide { grid-column: 1 / -1; }
.find-panel { padding: 1rem 1.25rem; }
.find-panel .find-row { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: flex-end; }
.find-panel .find-row .field { min-width: 12rem; margin: 0; }
fieldset.choice.inline { border: 0; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
fieldset.choice.inline legend { font-weight: 600; margin-bottom: 0.5rem; padding: 0; width: 100%; }
fieldset.choice.inline .hint, fieldset.choice.inline .field-err { width: 100%; }
/* the logo opens and collapses the menu (19 Oct) */
button.sn-brand { position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.375rem; margin-inline-start: -0.375rem; background: none; border: 0; border-radius: 0.5rem; font: inherit; color: inherit; cursor: pointer; }
button.sn-brand:hover { background: var(--bg-alt); }
body.sn-collapsed button.sn-brand { margin: 0; justify-content: center; }
body.sn-collapsed button.sn-brand:hover .sn-tip, body.sn-collapsed button.sn-brand:focus-visible .sn-tip { opacity: 1; }
/* the menu keeps every icon the same size and in the same place, open or collapsed (Tom, 19 Oct) */
@media (min-width: 64rem) {
  body.has-side.sn-collapsed #page { --sn-w: 4.5rem; }
  body.has-side.sn-collapsed #side-nav { padding-inline: 0.625rem; }
}
.sn-top, body.sn-collapsed .sn-top { flex-direction: row; height: 3rem; padding: 0 0 0.25rem 0.125rem; gap: 0; box-sizing: border-box; }
button.sn-brand, body.sn-collapsed button.sn-brand { margin: 0; padding: 0 0.5rem; min-height: 2.75rem; justify-content: flex-start; }
.sidenav svg.sn-mini { width: 2rem; height: 2rem; }
/* one row height and one icon position */
.sn-a, body.sn-collapsed .sn-a { min-height: 2.75rem; padding: 0.25rem 0.625rem; margin: 0; justify-content: flex-start; }
body.sn-collapsed .sn-a, body.sn-collapsed .sn-foot button.sn-a { width: 3.25rem; box-sizing: border-box; }
.sn-open .sn-a .icon.sn-ic { width: 2rem; height: 2rem; }
body.sn-collapsed .sn-open .sn-a { padding: 0.25rem 0.625rem; }
/* group headings keep their height when collapsed: the words are hidden behind a rule, still read by screen readers */
body.sn-collapsed .sn-h { position: relative; width: auto; height: auto; overflow: hidden; clip: auto; white-space: nowrap; margin: 0.875rem 0 0.25rem; padding-inline: 0.75rem; color: transparent; }
body.sn-collapsed .sn-h::after { content: ""; position: absolute; inset-inline: 0.625rem; top: 50%; border-top: 1px solid var(--rule); }
body.sn-collapsed .sn-list ul, body.sn-collapsed .sn-list ul:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
/* the profile row keeps its two-line height */
.sn-foot .sn-me { min-height: 3.25rem; }
body .sn-foot .sn-me, body.sn-collapsed .sn-foot .sn-me { min-height: 3.25rem; }

/* v60 approvals across the business (UX-22) */
.nbad { display: inline-flex; min-width: 1.75rem; justify-content: center; font-weight: 700; color: var(--surface); background: var(--bad-fg); border-radius: 999px; padding: 0.0625rem 0.5rem; font-variant-numeric: tabular-nums; }
:root[data-mode="contrast"] .nbad { color: #000; }
table.bztable td.n, table.bztable th.n { text-align: end; }
table.bztable .acts { white-space: nowrap; }
/* v61 forms builder (UX-24) */
.fb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; counter-reset: fbq; }
.fb-q { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; border: 1px solid var(--rule); border-radius: 0.75rem; padding: 0.625rem 0.875rem; background: var(--surface); }
.fb-q .grow { flex: 1 1 16rem; min-width: 0; }
.fb-q .sub { display: block; font-size: 0.8125rem; color: var(--muted); }
.fb-q.fb-edit { display: block; border-color: var(--brand); }
.fb-add { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.fb-route { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.5rem; }
.fb-route li { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; border: 1px solid var(--rule); border-radius: 0.75rem; padding: 0.5rem 0.75rem; }
.fb-route select, .fb-route input { min-height: 2.5rem; border: 1px solid var(--rule-strong, #A1A1AA); border-radius: 0.5rem; padding: 0 0.5rem; font: inherit; background: var(--surface); color: var(--fg); }
.fb-route label { font-size: 0.875rem; color: var(--muted); }
/* v62 profiles (UX-25): profile icon and menu back top right; Workspace has its own tint and label */
:root { --ws-tint: #F1FAF5; --ws-fg: #065F46; --ws-bd: #6EE7B7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ws-tint: #0E2A21; --ws-fg: #A7F3D0; --ws-bd: #047857; } }
:root[data-theme="dark"] { --ws-tint: #0E2A21; --ws-fg: #A7F3D0; --ws-bd: #047857; }
@media (min-width: 64rem) {
  body.has-side .site-header .bar-actions { display: flex; align-items: center; gap: 0.5rem; margin-inline-start: auto; }
  body.has-side.no-find .site-header { display: block; }
  body.has-side.no-find .site-header .bar { justify-content: flex-end; }
}
.prof-label { display: inline-flex; align-items: center; min-height: 2rem; padding: 0 0.75rem; border-radius: 999px; font-weight: 600; font-size: 0.875rem; background: var(--info-bg); color: var(--info-fg); border: 1px solid transparent; white-space: nowrap; }
.prof-label.ws { background: var(--surface); color: var(--ws-fg); border-color: var(--ws-bd); }
.prof-btn { position: relative; } .prof-btn .prof-ini { display: inline-flex; width: 2.25rem; height: 2.25rem; border-radius: 50%; align-items: center; justify-content: center; background: var(--info-bg); color: var(--info-fg); box-shadow: 0 0 0 1px var(--rule); }
.prof-ini { font-weight: 700; font-size: 0.875rem; letter-spacing: 0.02em; }
.prof-dot { position: absolute; top: 0; inset-inline-end: 0; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--brand); border: 2px solid var(--surface); }
.prof-sw-h { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0.75rem 0 0.375rem; font-weight: 600; }
.prof-sw { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; gap: 0.5rem; }
.prof-opt { width: 100%; display: flex; gap: 0.625rem; align-items: flex-start; text-align: start; font: inherit; color: var(--fg); background: var(--surface); border: 1px solid var(--rule); border-radius: 0.75rem; padding: 0.625rem 0.75rem; cursor: pointer; min-height: 2.75rem; }
.prof-opt:hover { border-color: var(--brand); }
.prof-opt.cur { border: 2px solid var(--brand); background: var(--info-bg); }
.prof-opt b { display: block; }
.prof-d { display: block; font-size: 0.8125rem; color: var(--muted); }
.prof-radio { flex: none; width: 1.125rem; height: 1.125rem; border-radius: 50%; border: 2px solid var(--muted); margin-top: 0.125rem; box-sizing: border-box; }
.prof-opt.cur .prof-radio { border: 0.3125rem solid var(--brand); }
/* v65 phone header (20 Oct): brand, profile label, menu and profile stay on one row; search below */
@media (max-width: 47.99rem) {
  .site-header .bar { flex-wrap: wrap; column-gap: 0.5rem; }
  .site-header .brand { min-width: 0; flex: 0 1 auto; }
  .site-header .demo-tag { display: none; }
  .site-header .bar-actions { flex: 0 0 auto; gap: 0.375rem; flex-wrap: nowrap; }
  .site-header .prof-label { min-height: 1.75rem; padding: 0 0.5rem; font-size: 0.8125rem; }
  .site-header #menu-button, .site-header .prof-btn { min-width: 2.75rem; min-height: 2.75rem; padding: 0.125rem; }
}
@media (max-width: 47.99rem) {
  .site-header .bar { padding-inline: 0.75rem; }
  .site-header .wordmark { font-size: 1.25rem; }
  .site-header .prof-label { font-size: 0.75rem; }
  .site-header #menu-button, .site-header .prof-btn { min-width: 2.5rem; min-height: 2.5rem; }
  .site-header .prof-btn .prof-ini { width: 2rem; height: 2rem; }
}
@media (max-width: 47.99rem) {
  .site-header #menu-button.icon-btn { width: 2.5rem; height: 2.5rem; }
  .docs li { flex-wrap: wrap; }
  .docs li > * { min-width: 0; }
}
/* very narrow or very large text: the profile label drops under the icons rather than pushing the brand off the row */
@media (max-width: 24rem) {
  .site-header .bar { flex-wrap: wrap; }
  .site-header .bar-actions { flex: 1 1 0; min-width: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: 0.25rem; }
  .site-header .prof-label { order: 3; flex-basis: 100%; justify-content: flex-end; background: none; border: 0; min-height: 0; padding: 0; }
}
/* v66 (21 Oct): no sideways scroll on half-width tables (People and net pay, Leavers, Probation reviews) */
table.ready td { white-space: normal; }
table.ready td .status, table.ready td .tk { white-space: nowrap; }
table.fig th, table.fig td { padding-inline: 0.625rem; }
table.fig td:last-child { white-space: normal; }
/* half-width panels sit side by side only when each column has room for its table */
@media (min-width: 60rem) { body.has-side .grid.g2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 31rem), 1fr)); } }
table.ready th, table.ready td { padding-inline: 0.5rem; }
table.ready thead th { white-space: normal; }
table.ready td:nth-child(2) { white-space: nowrap; }
/* v67 Areas panel (UX-26): opens beside the side menu */
/* Sections in the side menu (UX-26, 21 Oct): one item per section, its areas open underneath */
button.sn-a.sn-sec { width: 100%; border: 0; background: none; font: inherit; font-size: 0.9375rem; font-weight: 500; text-align: start; cursor: pointer; color: var(--fg); }
.sn-sec .sn-chev { width: 1rem; height: 1rem; margin-inline-start: auto; flex: none; color: var(--muted); transition: transform .15s; }
.sn-sec[aria-expanded="true"] { font-weight: 600; }
.sn-sec[aria-expanded="true"] .sn-chev { transform: rotate(180deg); }
.sn-sec.has-cur { color: var(--brand); font-weight: 600; background: var(--info-bg); }
.sn-sub { list-style: none; margin: 0.125rem 0 0.375rem; padding: 0; margin-inline-start: 1.5rem; border-inline-start: 1px solid var(--rule); }
.sn-sub[hidden] { display: none; }
.sn-sub .sn-a.sn-sa { min-height: 2.5rem; font-size: 0.875rem; margin-inline-start: 0.375rem; }
.sn-sub .sn-a.sn-sa .icon.sn-ic { width: 1.625rem; height: 1.625rem; }
body.sn-collapsed .sn-sub, body.sn-collapsed .sn-sec .sn-chev { display: none; }
body.sn-collapsed button.sn-a.sn-sec { width: 3.25rem; }
:root[data-mode="contrast"] .sn-sec.has-cur { background: #000; outline: 2px solid #ffff00; color: #ffff00; }
/* the same sections in the phone menu */
.menu nav .msec { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; min-height: 2.9rem; padding: 0; border: 0; background: none; font: inherit; font-size: 1.0625rem; color: var(--fg); text-align: start; cursor: pointer; }
.menu nav .msec .sn-chev { width: 1.125rem; height: 1.125rem; color: var(--muted); transition: transform .15s; }
.menu nav .msec[aria-expanded="true"] { font-weight: 600; }
.menu nav .msec[aria-expanded="true"] .sn-chev { transform: rotate(180deg); }
.menu nav .msub { list-style: none; margin: 0 0 0.375rem; padding: 0; padding-inline-start: 1rem; border-inline-start: 1px solid var(--rule); }
.menu nav .msub[hidden] { display: none; }

/* groups of companies on the dashboards (Q-72, 21 Oct): band naming the group, parent first, group companies indented */
.ptag { display: inline-block; font-size: 0.6875rem; font-weight: 700; line-height: 1.5; border-radius: 0.375rem; padding: 0 0.4375rem; margin-inline-start: 0.375rem; vertical-align: 0.125em; white-space: nowrap; }
.ptag.p { background: var(--brand); color: var(--surface); }
.ptag.m { background: var(--info-bg); color: var(--info-fg); border: 1px solid var(--brand); }
tr.gr-band td { background: var(--info-bg); border-top: 2px solid var(--brand); padding-block: 0.5rem; }
.gr-l, .pl-ghead { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
.gr-l strong, .pl-ghead strong { color: var(--info-fg); }
.gr-l .icon, .pl-ghead .icon { width: 1.75rem; height: 1.75rem; flex: none; }
.gr-l .sub, .pl-ghead .sub { color: var(--fg); font-size: 0.875rem; }
tr.gr-member > th { position: relative; padding-inline-start: 2.25rem; }
tr.gr-member > th::before { content: ""; position: absolute; inset-inline-start: 1rem; top: 0; bottom: 0; border-inline-start: 2px solid var(--brand); }
tr.gr-member.gr-last > th::before { bottom: 50%; }
tr.gr-member > th::after { content: ""; position: absolute; inset-inline-start: 1rem; top: 50%; width: 0.75rem; border-top: 2px solid var(--brand); }
.pl-grp { border-top: 1px solid var(--rule); background: var(--info-bg); padding: 0 0.625rem 0.625rem; }
.pl-ghead { padding: 0.625rem 0.5rem; }
.pl-gcos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.pl-gcos > .pl-co { background: var(--surface); border: 1px solid var(--rule); border-radius: 0.75rem; overflow: hidden; }
.pl-gcos > .pl-co .pl-cohead { border-top: 0; }
.pl-gcos > .pl-mem { margin-inline-start: 1.5rem; }
@media (max-width: 40rem) { .pl-gcos > .pl-mem { margin-inline-start: 0.75rem; } tr.gr-member > th { padding-inline-start: 1.75rem; } tr.gr-member > th::before, tr.gr-member > th::after { inset-inline-start: 0.625rem; } }
:root[data-mode="contrast"] .ptag.p { background: #ffff00; color: #000; }
:root[data-mode="contrast"] .ptag.m { background: #000; color: #ffff00; border-color: #ffff00; }
:root[data-mode="contrast"] tr.gr-band td, :root[data-mode="contrast"] .pl-grp { background: #000; border-color: #ffff00; }

/* 22 Oct (Tom): spacing between a two-column block and the panel under it; the month calendar fits the width on a computer;
   Internal moves gets the wider column and wrapping headings so it never scrolls sideways */
.org2 + .panel, .grid.g2 + .panel, .grid + section.panel { margin-top: 1.25rem; }
@media (min-width: 64rem) {
  .cal { width: 100%; min-width: 0; table-layout: fixed; }
  .cal thead th, .cal td { min-width: 0; }
  .cal thead th:first-child, .cal tbody th, .cal tfoot th { width: 10.5rem; }
  .cal tbody th { overflow: hidden; text-overflow: ellipsis; }
  .cal thead th { font-size: 0.75rem; }
}
@media (min-width: 75rem) { body.has-side .grid.g2.mvg { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
table.mvt th { white-space: normal; }
table.mvt th, table.mvt td { padding-inline: 0.5rem; }

/* Team (UX-27, 22 Oct): views, today's figures, team cards, and a chart that opens a level at a time */
nav.seg { margin-top: 0.75rem; }
.seg a { display: inline-flex; align-items: center; padding: 0.5rem 1rem; min-height: 2.75rem; box-sizing: border-box; color: var(--fg); text-decoration: none; background: var(--surface); border-inline-end: 1px solid var(--rule); font-weight: 500; }
.seg a:last-child { border-inline-end: 0; }
.seg a[aria-current="page"] { background: var(--brand); color: var(--surface); font-weight: 600; }
:root[data-mode="contrast"] .seg a[aria-current="page"] { background: #ffff00; color: #000; }
.tbxs { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.75rem; }
.tbx a { display: flex; flex-direction: column; gap: 0.125rem; height: 100%; box-sizing: border-box; padding: 0.875rem 1rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 0.875rem; color: var(--fg); text-decoration: none; }
.tbx a:hover { border-color: var(--brand); }
.tbx .k { font-size: 0.875rem; color: var(--muted); }
.tbx strong { font-size: 1.75rem; font-weight: 600; line-height: 1.2; }
.tbx .s { font-size: 0.8125rem; color: var(--muted); }
.tbx.info a { border-inline-start: 4px solid var(--brand); }
.tbx.warn a { border-inline-start: 4px solid var(--warn-fg); }
.tcds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 0.75rem; }
.tcd { background: var(--surface); border: 1px solid var(--rule); border-radius: 0.875rem; padding: 0.875rem 1rem; }
.tcd-h { display: flex; gap: 0.625rem; align-items: center; }
.tcd-h a { font-weight: 600; }
.tcd-h .sub, .tppl .sub { display: block; font-size: 0.8125rem; color: var(--muted); }
.tpls { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.625rem; }
.tpl { display: inline-flex; align-items: center; font-size: 0.8125rem; font-weight: 600; border-radius: 999px; padding: 0.0625rem 0.625rem; border: 1px solid var(--rule); background: var(--bg-alt); color: var(--fg); }
.tpl.info { background: var(--info-bg); border-color: var(--info-bd); color: var(--info-fg); }
.tpl.warn { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn-fg); }
.tpl.bad { background: var(--bad-bg); border-color: var(--bad-bd); color: var(--bad-fg); }
.tppl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.5rem 1rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 0.875rem; padding: 0.875rem 1rem; }
.tppl li { display: flex; gap: 0.625rem; align-items: center; }
.dchart { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.dc-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.dc-card { width: 13.5rem; box-sizing: border-box; display: flex; flex-direction: column; gap: 0.125rem; padding: 0.625rem 0.75rem; background: var(--surface); border: 1px solid var(--control); border-radius: 0.75rem; font-size: 0.8125rem; }
.dc-card .dc-t { font-weight: 600; font-size: 0.9375rem; }
.dc-card .dc-s { color: var(--muted); }
.dc-card .dc-d { color: var(--muted); font-style: italic; }
.dc-card .dc-n { margin-top: 0.25rem; font-weight: 600; }
.dc-card .tpl { align-self: flex-start; margin-top: 0.25rem; }
.dc-card.me { border: 2px solid var(--brand); }
.dc-card.open { border: 2px solid var(--brand); background: var(--info-bg); }
.dc-card.vac { border-style: dashed; background: var(--bg-alt); }
.dc-row { position: relative; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 2px solid var(--rule); }
.dc-row::before { content: ""; position: absolute; top: -1.25rem; inset-inline-start: 50%; height: 1.25rem; border-inline-start: 2px solid var(--rule); }
.dc-cap { margin: 0 0 0.625rem; text-align: center; font-size: 0.8125rem; color: var(--muted); }
:root[data-mode="contrast"] .dc-card.me, :root[data-mode="contrast"] .dc-card.open { border-color: #ffff00; background: #000; }
@media (max-width: 40rem) { .dc-card { width: 100%; } }
.org-tabs { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 0.75rem; }
.org-tabs nav.seg { margin-top: 0; }
.dc-card .ut { align-self: flex-start; margin-bottom: 0.125rem; }
:root[data-mode="dark"] { --ws-tint: #0E2A21; --ws-fg: #A7F3D0; --ws-bd: #047857; }
:root[data-mode="contrast"] { --ws-tint: #000; --ws-fg: #ffff00; --ws-bd: #ffff00; }

/* Approval routes, which route applies, messages (ORG-14.13 to 14.15, 23 Oct) */
.rbuild { display: grid; grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr); gap: 1.25rem; align-items: start; margin-top: 1rem; }
.mbuild { display: grid; grid-template-columns: minmax(14rem, 16rem) minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; margin-top: 1rem; }
@container page (max-width: 59rem) { .mbuild { grid-template-columns: minmax(14rem, 16rem) minmax(0, 1fr); } .mbuild > :last-child { grid-column: 1 / -1; } }
@container page (max-width: 40rem) { .rbuild, .mbuild { grid-template-columns: minmax(0, 1fr); } }
.rlist { background: var(--surface); border: 1px solid var(--rule); border-radius: 0.875rem; overflow: hidden; }
.rlist .rl-h { margin: 0; padding: 0.625rem 0.875rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: var(--bg-alt); border-bottom: 1px solid var(--rule); }
[dir="rtl"] .rlist .rl-h { letter-spacing: 0; text-transform: none; font-size: 0.875rem; }
.rlist ul { list-style: none; margin: 0; padding: 0; }
.rlist li a { display: block; padding: 0.625rem 0.875rem; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--fg); }
.rlist li a b { color: var(--brand); font-weight: 600; }
.rlist li a .sub { display: block; font-size: 0.8125rem; color: var(--muted); }
.rlist li a[aria-current="page"] { background: var(--info-bg); box-shadow: inset 3px 0 0 var(--brand); }
[dir="rtl"] .rlist li a[aria-current="page"] { box-shadow: inset -3px 0 0 var(--brand); }
.rtag { display: inline-block; font-size: 0.6875rem; font-weight: 700; border-radius: 0.375rem; padding: 0 0.375rem; vertical-align: 0.125em; background: var(--bg-alt); color: var(--fg); border: 1px solid var(--rule); }
.rtag.s { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-bd); }
.rhead { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 1rem; }
.rhead h2 { margin: 0; font-size: 1.25rem; }
.rsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.rstep { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.75rem; border: 1px solid var(--control); border-radius: 0.75rem; padding: 0.75rem 0.875rem; background: var(--surface); }
.rstep.told { border-style: dashed; }
.rstep p { margin: 0.25rem 0 0; font-size: 0.875rem; }
.rstep fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.rstep fieldset legend:not(.vh) { font-weight: 600; margin-bottom: 0.375rem; }
.rnum { width: 1.875rem; height: 1.875rem; border-radius: 50%; background: var(--brand); color: var(--surface); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.rnum.g { background: var(--muted); }
.rgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.5rem 0.875rem; align-items: end; }
.rgrid.r5 { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.rgrid .field { margin: 0; }
.rstep .choice.inline, .mset .choice.inline { border: 0; padding: 0; margin: 0.5rem 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.choice.inline legend { font-weight: 600; font-size: 0.875rem; margin-bottom: 0.25rem; }
.rstep .row { margin-top: 0.5rem; }
.rprev { margin-top: 1.25rem; border: 1px dashed var(--info-bd); background: var(--info-bg); border-radius: 0.875rem; padding: 0.875rem 1rem; }
.rprev h2, .rprev h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.rwalk { margin: 0.75rem 0 0; padding-inline-start: 1.25rem; }
.rwalk li { margin: 0.25rem 0; }
.radd { background: var(--surface); border: 1px solid var(--rule); border-radius: 0.875rem; padding: 0.875rem 1rem; margin-top: 1rem; }
.radd h2 { margin: 0 0 0.5rem; font-size: 1rem; }
.mchips { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0.25rem 0 0.75rem; }
.mchip { font: inherit; font-size: 0.8125rem; font-weight: 600; border: 1px solid var(--info-bd); background: var(--info-bg); color: var(--info-fg); border-radius: 0.375rem; padding: 0.125rem 0.5rem; min-height: 1.75rem; cursor: pointer; }
.mfoot { font-size: 0.8125rem; color: var(--muted); background: var(--bg-alt); border: 1px solid var(--rule); border-radius: 0.5rem; padding: 0.5rem 0.75rem; }
.mail { border: 1px solid var(--rule); border-radius: 0.75rem; overflow: hidden; background: var(--surface); font-size: 0.9375rem; }
.mail-hd { background: var(--bg-alt); border-bottom: 1px solid var(--rule); padding: 0.625rem 0.875rem; font-size: 0.8125rem; }
.mail-bd { padding: 0.875rem; line-height: 1.6; }
.mail-ft { border-top: 1px solid var(--rule); background: var(--bg-alt); padding: 0.625rem 0.875rem; font-size: 0.75rem; color: var(--muted); }
mark.mfill { background: none; color: inherit; font-weight: 600; }
.ph-miss { color: var(--bad-fg); font-weight: 600; }
.mwa { background: var(--ok-bg, #e7ffdb); border: 1px solid var(--rule); border-radius: 0.75rem; padding: 0.625rem 0.75rem; font-size: 0.875rem; max-width: 24rem; }
.mset { border: 1px solid var(--rule); border-radius: 0.75rem; padding: 0.625rem 0.875rem; margin: 0.75rem 0; }
.mset legend { font-weight: 600; padding: 0 0.25rem; }
.lbl-sp { display: block; }
:root[data-mode="contrast"] .rlist li a[aria-current="page"], :root[data-mode="contrast"] .rprev { background: #000; outline: 2px solid #ffff00; }
:root[data-mode="contrast"] .mchip, :root[data-mode="contrast"] .rtag.s { background: #000; color: #ffff00; border-color: #ffff00; }
.mp-h { font-size: 1rem; margin: 0 0 0.625rem; }
@media (min-width: 64rem) { .rstep .rgrid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); } }

/* ===== 25 Oct: one standard for every screen (UX-28) ===== */
/* titles: one size and weight everywhere; intros readable, not tiny */
#main .app-main h1 { font-size: clamp(1.5rem, 1.25rem + 0.6vw, 1.875rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
#main .app-main .page-head { margin-bottom: 1.25rem; }
#main .app-main .page-head .sub, #main .app-main .phead .meta, #main .app-main .dash-head .sub { font-size: 0.9375rem; color: var(--muted); max-width: 52rem; }
#main .app-main .dash-head .icon, #main .app-main .phead .who > .icon { width: 2.5rem; height: 2.5rem; }
/* buttons: one family, a rounded rectangle, sized for working screens */
.app-main .btn { border-radius: 0.5rem; min-height: 2.5rem; padding: 0.4375rem 1rem; font-size: 0.9375rem; border-width: 1px; }
.app-main .btn-sm { min-height: 2.25rem; padding: 0.3125rem 0.875rem; font-size: 0.875rem; }
.app-main .btn-xs { min-height: 2rem; padding: 0.25rem 0.625rem; font-size: 0.8125rem; border-radius: 0.375rem; }
/* actions on table rows are quiet until you reach them: the row, not a wall of buttons, leads */
.app-main table td .btn-ghost { border-color: transparent; background: none; color: var(--brand); text-decoration: underline; text-underline-offset: 0.2em; padding-inline: 0.5rem; }
.app-main table td .btn-ghost:hover, .app-main table td .btn-ghost:focus-visible { border-color: var(--control); text-decoration: none; }
.app-main .btn-new { border-style: solid; }
.app-main .btn-new[disabled] { border-style: dashed; }

/* ===== Approval routes as a flow (25 Oct, canvas Routes 5 to 7) ===== */
@container page (min-width: 40.01rem) { .rbuild { grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr); } }
.rl2 .rl-find { display: flex; align-items: center; gap: 0.5rem; margin: 0.625rem; padding: 0 0.625rem; border: 1px solid var(--control); border-radius: 0.5rem; background: var(--surface); }
.rl2 .rl-find:focus-within { outline: 2px solid var(--brand); outline-offset: 1px; }
.rl2 .rl-find .gl { width: 1rem; height: 1rem; color: var(--muted); flex: none; }
.rl2 .rl-find input { border: 0; outline: 0; background: transparent; min-height: 2.25rem; width: 100%; font: inherit; font-size: 0.875rem; color: var(--fg); padding: 0; }
.rl2 .rl-h { background: none; border: 0; padding: 0.625rem 0.875rem 0.25rem; }
.rl2 li a { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; padding: 0.4375rem 0.875rem; border: 0; font-size: 0.9375rem; color: var(--fg); }
.rl2 li a:hover .rl-n { color: var(--brand); text-decoration: underline; }
.rl2 li a[aria-current="page"] { font-weight: 600; }
.rl2 .rl-u { font-size: 0.8125rem; color: var(--muted); white-space: nowrap; font-weight: 400; }
.rl2 .rl-new { margin: 0; padding: 0.625rem 0.875rem; border-top: 1px solid var(--rule); font-weight: 600; font-size: 0.9375rem; }
.rf-panel { padding: 1.125rem 1.25rem; container-type: inline-size; }
.rf-head { display: flex; gap: 0.75rem 1rem; align-items: flex-start; flex-wrap: wrap; padding-bottom: 0.875rem; border-bottom: 1px solid var(--rule); }
.rf-head h2 { margin: 0; font-size: 1.375rem; font-weight: 600; line-height: 1.25; }
.rf-name { margin: 0; max-width: 32rem; }
.rchips { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0.5rem 0 0; }
.rchip { font-size: 0.8125rem; line-height: 1.5; border-radius: 0.375rem; padding: 0.0625rem 0.5rem; background: var(--bg-alt); color: var(--fg); border: 1px solid var(--rule); white-space: nowrap; }
a.rchip { color: var(--brand); }
.rchip.warn { background: var(--warn-bg); color: var(--warn-fg); border-color: currentColor; align-self: center; }
.rf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 18rem); gap: 1.25rem; margin-top: 1rem; align-items: start; }
@container (max-width: 44rem) { .rf-grid { grid-template-columns: minmax(0, 1fr); } }
.rflow { list-style: none; margin: 0; padding: 0 0 0 1.5rem; position: relative; display: grid; gap: 0.75rem; }
.rflow::before { content: ""; position: absolute; inset-inline-start: 0.6875rem; top: 0.75rem; bottom: 0.75rem; width: 2px; background: var(--rule); }
[dir="rtl"] .rflow { padding: 0 1.5rem 0 0; }
.rflow > li { position: relative; }
.rflow > li::before { content: ""; position: absolute; inset-inline-start: -1.1875rem; top: 0.875rem; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--surface); border: 2px solid var(--control); }
.rflow > li.rf-end::before { background: var(--control); top: 0.5rem; }
.rflow > li.hot::before { background: var(--brand); border-color: var(--brand); }
.rf-end span { display: inline-block; font-size: 0.875rem; font-weight: 600; color: var(--fg); background: var(--bg-alt); border: 1px solid var(--rule); border-radius: 999px; padding: 0.1875rem 0.75rem; }
.rf-card { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: start; border: 1px solid var(--rule); border-radius: 0.75rem; padding: 0.75rem 0.875rem; background: var(--surface); }
.rf-card.told { border-style: dashed; }
.rflow > li.hot .rf-card { border-color: var(--info-bd); box-shadow: inset 3px 0 0 var(--brand); }
[dir="rtl"] .rflow > li.hot .rf-card { box-shadow: inset -3px 0 0 var(--brand); }
.rflow > li.off .rf-card { border-style: dashed; background: var(--bg-alt); }
.rf-card h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.rf-card p { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--fg); }
.rf-card .rnum, .rf-edh .rnum { width: 1.5rem; height: 1.5rem; font-size: 0.75rem; }
.rf-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.5rem !important; }
.rf-tags:empty { display: none; }
.rt-t { font-size: 0.8125rem; border-radius: 0.375rem; padding: 0.0625rem 0.5rem; line-height: 1.5; }
.rt-t.rt-sk { background: var(--bg-alt); color: var(--fg); border: 1px solid var(--rule); }
.rt-t.rt-if { background: var(--warn-bg); color: var(--warn-fg); }
.rt-t.rt-tl { background: var(--info-bg); color: var(--info-fg); }
.rf-chg { align-self: start; }
.rf-ed { border: 1px solid var(--brand); border-radius: 0.75rem; padding: 0.875rem; margin: 0; background: var(--surface); box-shadow: 0 0 0 3px var(--info-bg); min-width: 0; display: grid; gap: 0.625rem; }
.rf-edh { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
.rf-edh legend { float: left; font-weight: 600; font-size: 1rem; padding: 0; }
.rf-edh .row { margin-inline-start: auto; }
.rf-ed .field { margin: 0; }
.rf-ed .field select.fit { width: auto; max-width: 100%; }
.rf-inl { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end; }
.rf-val { display: inline-flex; align-items: center; gap: 0.375rem; border: 1px solid var(--control); border-radius: 0.5rem; padding-inline-start: 0.625rem; background: var(--surface); }
.rf-val span { color: var(--muted); font-size: 0.875rem; }
.rf-val input { border: 0; width: 7rem; min-height: 2.5rem; }
.rf-ed .choice.inline { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.rf-ed .choice.inline legend { font-weight: 600; font-size: 0.875rem; margin-bottom: 0.25rem; }
.rf-done { justify-content: flex-end; }
.rf-adds { margin-top: 0.75rem; padding-inline-start: 1.5rem; }
.rtry { background: var(--bg-alt); border: 1px solid var(--rule); border-radius: 0.75rem; padding: 0.875rem; }
.rtry h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.rtry > p { margin: 0.125rem 0 0.625rem; }
.rtry .field { margin: 0 0 0.625rem; }
.rtry select, .rtry input { width: 100%; }
.rtry-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.rtry-res { border-top: 1px solid var(--rule); padding-top: 0.625rem; font-size: 0.875rem; }
.rtry-res p { margin: 0; }
.rtry-res .rwalk { margin: 0.375rem 0 0.5rem; }
.rt-why { color: var(--warn-fg); font-size: 0.8125rem; }
.rf-save { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; position: sticky; bottom: 0; margin: 1rem -1.25rem -1.125rem; padding: 0.75rem 1.25rem; background: var(--surface); border-top: 1px solid var(--rule); border-radius: 0 0 0.875rem 0.875rem; z-index: 2; }
.rf-save p { margin: 0; color: var(--muted); }
.rf-save .row { margin-inline-start: auto; }
:root[data-mode="contrast"] .rf-card, :root[data-mode="contrast"] .rf-ed, :root[data-mode="contrast"] .rtry, :root[data-mode="contrast"] .rchip, :root[data-mode="contrast"] .rt-t { background: #000; color: #fff; border: 1px solid #ffff00; }
.rf-main, .rflow > li { min-width: 0; }
.rf-head .grow { flex: 1 1 18rem; min-width: 0; }
.rf-head > .row { align-self: flex-start; }
.rt-t { display: inline-block; white-space: nowrap; }
/* 25 Oct (UX-28): working screens use the width of a 1920 screen; wider screens keep the page centred */
#main > .wrap.app-main { max-width: 100rem; }
body.has-side .site-header .wrap, body.has-side .site-footer .wrap { max-width: 100rem; }
.plan-note { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0 0 1rem; font-size: 0.875rem; color: var(--muted); }
.plan-note svg { width: 1.125rem; height: 1.125rem; flex: none; margin-top: 0.0625rem; }
.plan-grid { align-items: start; }
.ic-link { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; } .ic-link .gl { width: 1.125rem; height: 1.125rem; flex: none; }
/* inline choices (channels, who is told) are plain ticks in a row, not a wall of boxes (25 Oct) */
fieldset.choice.inline { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
fieldset.choice.inline legend { width: 100%; margin-bottom: 0.25rem; font-size: 0.875rem; }
fieldset.choice.inline label { border: 0; padding: 0.375rem 0; min-height: 2.25rem; align-items: center; box-shadow: none !important; }
/* the team calendar: leave as a calm band, not solid blocks (25 Oct) */
:root:not([data-mode="contrast"]) .cal .mark.annual { background: var(--info-bg); color: var(--info-fg); box-shadow: inset 0 -3px 0 var(--brand); }
:root:not([data-mode="contrast"]) .cal .mark.sick { background: var(--warn-bg); color: var(--warn-fg); box-shadow: inset 0 -3px 0 var(--warn-fg); }
.rr-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .rr-head h2 { margin: 0; font-size: 1.125rem; } .radd.panel { margin: 0; box-shadow: none; background: var(--bg-alt); }
/* Messages: list and wording side by side; the preview sits under the wording until the screen is wide enough (25 Oct) */
@container page (max-width: 94rem) { .mbuild { grid-template-columns: minmax(14rem, 16rem) minmax(0, 1fr); } .mbuild > :nth-child(1) { grid-row: span 2; } .mbuild > :last-child { grid-column: 2; } }
@container page (max-width: 40rem) { .mbuild { grid-template-columns: minmax(0, 1fr); } .mbuild > :nth-child(1) { grid-row: auto; } .mbuild > :last-child { grid-column: 1; } }
/* Profile fields: three clear choices per row instead of a tiny drop-down (25 Oct) */
.pf-seg { border: 0; margin: 0; padding: 0; display: inline-flex; border: 1px solid var(--control); border-radius: 0.5rem; overflow: hidden; }
.pf-seg label { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 0.75rem; font-size: 0.875rem; cursor: pointer; border-inline-start: 1px solid var(--rule); position: relative; }
.pf-seg label:first-of-type { border-inline-start: 0; }
.pf-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pf-seg label:has(input:checked) { background: var(--info-bg); color: var(--info-fg); font-weight: 600; }
.pf-seg label:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: -2px; }
:root[data-mode="contrast"] .pf-seg label:has(input:checked) { background: #ffff00; color: #000; }
.row.nowrap { flex-wrap: nowrap; } .lv-req td { vertical-align: top; }
/* trend lines on Reports (25 Oct) */
.lc-sum { margin: 0 0 0.5rem; font-size: 0.9375rem; }
.lc { margin: 0; }
.lc svg { width: 100%; height: auto; display: block; overflow: visible; }
.lc-g { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lc-l { fill: none; stroke: var(--brand); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.lc-p { fill: var(--surface); stroke: var(--brand); stroke-width: 2; vector-effect: non-scaling-stroke; }
.lc-p.last { fill: var(--brand); }
.lc-v, .lc-x { font-size: 12px; fill: var(--muted); font-family: inherit; }
.lc-v.last { fill: var(--fg); font-weight: 600; }
/* Record an absence: the team as a compact list to tick, filtered by Find someone (25 Oct) */
fieldset.choice.pick { gap: 0; border: 1px solid var(--rule); border-radius: 0.75rem; overflow: hidden; }
fieldset.choice.pick legend { margin-bottom: 0.5rem; }
fieldset.choice.pick label { border: 0; border-radius: 0; border-top: 1px solid var(--rule); padding: 0.5rem 0.875rem; align-items: center; min-height: 2.75rem; }
fieldset.choice.pick legend + label { border-top: 0; }
fieldset.choice.pick label:has(input:checked) { background: var(--info-bg); box-shadow: inset 3px 0 0 var(--brand); }
/* ===== 25 Oct: one page title everywhere — same icon, font, size and indent (UX-28) ===== */
#main .app-main .ttl { display: flex; align-items: center; gap: 0.875rem; min-width: 0; }
#main .app-main .page-head .ttl { flex: 1 1 auto; }
#main .app-main :is(.ttl, .page-head.dash-head, .phead .who, .record-who) { gap: 0.875rem; align-items: center; }
#main .app-main :is(.ttl, .page-head.dash-head, .phead .who, .record-who) > :is(.icon, .avatar) { width: 2.75rem; height: 2.75rem; flex: none; margin: 0; }
#main .app-main :is(.ttl, .page-head.dash-head, .phead .who, .record-who) > .avatar { font-size: 0.9375rem; }
#main .app-main :is(.page-head .sub, .ptitle .meta, .phead .meta, .dash-head .sub, .record-who > div > p) { font-size: 0.9375rem; color: var(--muted); margin: 0.125rem 0 0; }
#main .app-main :is(.page-head, .ptitle, .phead, .record-bar) { margin-top: 0.5rem; }
#main .app-main .ptitle { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
#main .app-main :is(.ttl, .page-head.dash-head, .page-head.wk-head, .phead .who, .record-who) { align-items: flex-start; gap: 0.875rem; }
#main .app-main .page-head.wk-head > :is(.icon, .avatar) { width: 2.75rem; height: 2.75rem; flex: none; margin: 0; }
#main .app-main :is(.page-head, .ptitle, .phead) { align-items: flex-start; }
#main .app-main .record-bar { padding-top: 0; }
#main .app-main :is(.page-head, .ptitle, .phead) { margin-top: 0.75rem; }
#main .app-main .record-bar { margin-top: 0.25rem; }
.rt-ret { margin-top: 0.875rem; padding: 0.75rem 0.875rem; border: 1px solid var(--info-bd); background: var(--info-bg); border-radius: 0.75rem; }
.rt-ret.warn { border-color: var(--warn-bd); background: var(--warn-bg); }
.rt-ret p { margin: 0 0 0.5rem; }
.rl-ret .rl-n { color: var(--muted); }
:root[data-mode="contrast"] .rt-ret { background: #000; border-color: #ffff00; }
/* Requests and forms: each form as a card saying who decides and how long (25 Oct) */
.fm-cards { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1rem; }
.fm-card { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.875rem; align-items: start; margin: 0; }
.fm-card .icon { width: 2.5rem; height: 2.5rem; }
.fm-card h2 { margin: 0; font-size: 1.0625rem; font-weight: 600; }
.fm-card p { margin: 0.25rem 0 0; }
/* Activity: one timeline, month by month (25 Oct) */
.ac-seg { margin: 0 0 1rem; }
.ac-seg .ct { font-size: 0.75rem; color: var(--muted); margin-inline-start: 0.25rem; }
.ac-seg a[aria-current] .ct { color: inherit; }
.ac-month { margin-bottom: 1rem; }
.ac-month h2 { margin: 0 0 0.5rem; font-size: 1.0625rem; font-weight: 600; }
.ac-list { list-style: none; margin: 0; padding: 0; }
.ac-list li { display: grid; grid-template-columns: 4.5rem 1.5rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: start; padding: 0.625rem 0; border-top: 1px solid var(--rule); }
.ac-list li:first-child { border-top: 0; }
.ac-d { font-size: 0.875rem; color: var(--muted); padding-top: 0.0625rem; }
.ac-t a, .ac-t > span:first-child { font-weight: 600; }
.ac-s { justify-self: end; }
@media (max-width: 40rem) { .ac-list li { grid-template-columns: 1.5rem minmax(0, 1fr); } .ac-d { grid-column: 2; order: -1; } .ac-list li > .icon { grid-row: span 2; } .ac-s { grid-column: 2; justify-self: start; } }
.ac-t .sub-line { display: block; font-size: 0.875rem; color: var(--muted); margin-top: 0.125rem; }

/* ===== 25 Oct (UX-28): the page is the container. Layouts respond to the width the page actually has, so folding the
   menu, opening a side panel or zooming to 200% rearranges panels by their room, not by the screen ===== */
#main .app-main { container: page / inline-size; }
/* form rows: controls line up along the bottom however long each label is, and are all one height */
.find-row, .rgrid { align-items: stretch; }
.find-row > .field, .find-row > .pf, .find-row > .qf, .rgrid > .field { display: flex; flex-direction: column; justify-content: flex-end; }
.find-row > .row { align-self: flex-end; }
/* responsive pass, found by the width checks (25 Oct) */
@container page (max-width: 60rem) { .g4, .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sum3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sum3 > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@container page (max-width: 40rem) { .g4, .g3, .sum3 { grid-template-columns: minmax(0, 1fr); } .sum3 > :last-child:nth-child(odd) { grid-column: auto; } }
.ptabs ul { flex-wrap: wrap; row-gap: 0.25rem; }
.rt-t, .rchip { white-space: normal; }
@container (max-width: 30rem) { .rf-card { grid-template-columns: 1.5rem minmax(0, 1fr); } .rf-card .rf-chg { grid-column: 2; justify-self: start; } .rflow { padding-inline-start: 1.25rem; } }
.rgrid.r5 { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.kpi .k-value { overflow-wrap: anywhere; }
@container page (max-width: 70rem) { .sum3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sum3 > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@container page (max-width: 40rem) { .sum3 { grid-template-columns: minmax(0, 1fr); } .sum3 > :last-child:nth-child(odd) { grid-column: auto; } }
#main .app-main :is(h2, h3, .panel > header) { overflow-wrap: anywhere; }
@container page (max-width: 26rem) { .find-row select, .find-row input { font-size: 0.9375rem; padding-inline: 0.75rem; } }
/* six-month bars at 400% zoom: keep every label readable; the chart scrolls sideways inside its panel instead of overlapping */
@container page (max-width: 26rem) { .six { overflow-x: auto; grid-template-columns: repeat(6, minmax(4.25rem, 1fr)) !important; padding-bottom: 0.25rem; } }
/* drop-down lists: the open list uses the page's own colours in every mode (25 Oct) */
select option, select optgroup { background-color: var(--surface); color: var(--fg); }
select option:checked { background-color: var(--info-bg); color: var(--info-fg); }
:root[data-mode="contrast"] select option, :root[data-mode="contrast"] select optgroup { background-color: #000; color: #ffff00; }
:root[data-mode="contrast"] select option:checked { background-color: #ffff00; color: #000; }
.ob-seg { margin: 0 0 1rem; flex-wrap: wrap; }
.ob-seg .ct { font-size: 0.75rem; color: var(--muted); margin-inline-start: 0.25rem; }
.ob-seg a[aria-current] .ct { color: inherit; }
/* worker record, Option B (UX-29): the assignment line, the Showing chooser and the focus bar */
.record-who .rasg { margin: 0.375rem 0 0; font-size: 0.9375rem; }
.rshow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 0.625rem; }
.rshow label { font-weight: 600; }
.rshow select { width: auto; max-width: 100%; min-height: 2.5rem; font-size: 0.9375rem; padding: 0.375rem 2rem 0.375rem 0.75rem; border: 1px solid var(--control); border-radius: 0.5rem; background-color: var(--surface); color: var(--fg); }
.rfocus { margin-top: 0.625rem; padding: 0.625rem 0.875rem; border: 1px solid var(--info-bd); background: var(--info-bg); border-radius: 0.625rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; font-size: 0.9375rem; }
.rfocus p { margin: 0; }
.rf-step { white-space: nowrap; }
.anum { display: inline-flex; align-items: center; justify-content: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--info-bg); color: var(--info-fg); font-size: 0.75rem; font-weight: 700; margin-inline-end: 0.5rem; border: 1px solid var(--info-bd); vertical-align: 0.0625rem; }
.asg-tab { margin-bottom: 1.25rem; }
.asg-tab table tr.on th, .asg-tab table tr.on td { background: var(--info-bg); }
.asg-tab tr.tot th, .asg-tab tr.tot td { font-weight: 700; border-top: 2px solid var(--rule); }
.asg-scope { margin: 0 0 1rem; padding: 0.5rem 0.75rem; border-inline-start: 3px solid var(--brand); background: var(--bg-alt); font-size: 0.9375rem; }
:root[data-mode="contrast"] .rfocus, :root[data-mode="contrast"] .anum { background: #000; border-color: #ffff00; color: #ffff00; }
.record-who .rsaid { margin: 0.5rem 0 0; font-size: 1rem; color: var(--fg); } .record-bar { align-items: flex-start; }
.rshow select { min-width: 0; flex: 0 1 auto; } .record-who > div { min-width: 0; } @container page (max-width: 30rem) { .rshow select { flex: 1 1 100%; width: 100%; } .rf-step { white-space: normal; } }
/* result tables fit the page: lower-priority columns step out on narrower pages and stay in the record and the export (25 Oct) */
@container page (max-width: 72rem) { table.res2 .p3 { display: none; } }
@container page (max-width: 56rem) { table.res2 .p2 { display: none; } }
table.res2 td, table.res2 th { overflow-wrap: anywhere; }
/* payroll card header: icon and title line up (25 Oct) */
.cpc-head { align-items: center; }
.cpc-head .icon { width: 2.5rem; height: 2.5rem; }
.cpc-head .cpc-open { align-self: center; margin-inline-start: auto; }
/* About in the menu */
.menu-about .about-link { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; min-height: 2.75rem; }
.menu-about .about-link .gl { width: 1.25rem; height: 1.25rem; }
.ab-list { margin: 0; padding-inline-start: 1.25rem; } .ab-list li { margin: 0.25rem 0; }
/* 25 Oct: record details read as one list at every width, never two side-by-side columns of label and value */
#main .app-main :is(.tabpanel, .rec-asg, .card) .grid.g2:has(> dl.facts-list) { grid-template-columns: minmax(0, 1fr) !important; gap: 0; max-width: 60rem; }
#main .app-main .grid.g2:has(> dl.facts-list) > dl.facts-list + dl.facts-list { border-top: 1px solid var(--rule); }
/* edit forms: a field's hint sits under its box, so every box in a row lines up */
.form-grid .field { display: flex; flex-direction: column; }
.form-grid .field > .hint { order: 2; margin: 0.25rem 0 0; }
.form-grid .field > .field-error { order: 3; }
.form-grid .field > .help { order: 2; margin-top: 0.25rem; }
.form-grid select, .form-grid input:not([type=checkbox]):not([type=radio]) { min-height: 2.75rem; box-sizing: border-box; }
/* ===== Help (UX-31) ===== */
.help-btn span[aria-hidden] { font-weight: 800; font-size: 1.0625rem; }
.help-panel { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: min(26rem, 100vw); background: var(--surface); border-inline-start: 1px solid var(--rule); box-shadow: -12px 0 30px rgba(0,0,0,.12); z-index: 60; overflow-y: auto; padding: 1rem 1.25rem 2rem; box-sizing: border-box; }
body.help-on #page { padding-inline-end: min(26rem, 100vw); }
@media (max-width: 60rem) { body.help-on #page { padding-inline-end: 0; } }
.hp-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.hp-head h2 { margin: 0; font-size: 1.375rem; font-weight: 600; }
.hp-search { display: flex; align-items: center; gap: 0.5rem; margin: 0.875rem 0 0.5rem; padding: 0 0.75rem; border: 1px solid var(--control); border-radius: 0.5rem; background: var(--surface); }
.hp-search:focus-within { outline: 2px solid var(--brand); outline-offset: 1px; }
.hp-search .gl { width: 1rem; height: 1rem; color: var(--muted); }
.hp-search input { border: 0; outline: 0; background: transparent; min-height: 2.5rem; width: 100%; font: inherit; color: var(--fg); padding: 0; }
.hp-body h3 { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 0.375rem; }
.hp-body h3.hp-f { font-size: 1.25rem; margin-top: 0.5rem; }
.hp-body h4 { font-size: 0.9375rem; margin: 1rem 0 0.25rem; }
.hp-body p { margin: 0.25rem 0; }
.hp-arts, .hp-who, .hp-fl, .hp-tech { list-style: none; margin: 0; padding: 0; }
.hp-arts > li, .hp-who > li, .hp-fl > li, .hp-tech > li { border-top: 1px solid var(--rule); padding: 0.5rem 0; }
.hp-arts summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.hp-arts details p, .hp-arts details ol { margin: 0.5rem 0 0; }
.hp-tech span { display: block; color: var(--muted); font-size: 0.875rem; margin-top: 0.125rem; }
.hp-crumb { color: var(--muted); font-size: 0.875rem; }
.help-panel code, #main code { font-size: 0.8125rem; background: var(--bg-alt); border: 1px solid var(--rule); border-radius: 0.25rem; padding: 0 0.3125rem; overflow-wrap: anywhere; }
.qwrap { position: relative; display: inline-block; vertical-align: middle; margin-inline-start: 0.5rem; }
.ttl h1, .record-who h1, .page-head h1 { display: inline; }
.qmark { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; padding: 0; border-radius: 50%; border: 1px solid var(--info-bd); background: var(--info-bg); color: var(--info-fg); font: 800 0.8125rem/1 inherit; cursor: pointer; vertical-align: 0.125rem; }
.qmark.sm { width: 1.25rem; height: 1.25rem; font-size: 0.6875rem; margin-inline-start: 0.25rem; }
.qmark:hover, .qmark:focus-visible { background: var(--brand); color: var(--on-brand, #fff); }
.qpop { position: absolute; z-index: 40; top: calc(100% + 0.5rem); inset-inline-start: 0; width: min(22rem, 80vw); background: #18181b; color: #fff; border-radius: 0.5rem; padding: 0.75rem 0.875rem; font-size: 0.875rem; font-weight: 400; line-height: 1.5; letter-spacing: 0; }
.qpop .linklike { color: #93c5fd; }
:root[data-mode="contrast"] .qpop, :root[data-mode="contrast"] .help-panel { background: #000; color: #fff; border: 1px solid #ffff00; }
/* phone: country, then number. The closed list shows only the code; open, it lists countries by name */
.phf { position: relative; display: flex; align-items: stretch; width: 100%; border: 1px solid var(--control); border-radius: 0.5rem; background: var(--surface); box-sizing: border-box; }
.phf:focus-within { outline: 2px solid var(--brand); outline-offset: 1px; }
.phf select { flex: 0 0 6.5rem; width: 6.5rem; min-width: 0; border: 0 !important; border-inline-end: 1px solid var(--rule) !important; border-radius: 0.5rem 0 0 0.5rem !important; background-color: var(--bg-alt) !important; color: transparent !important; outline: 0; cursor: pointer; }
.phf select option, .phf select optgroup { color: var(--fg); }
.phf .phcode { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 5rem; display: flex; align-items: center; padding-inline-start: 0.75rem; pointer-events: none; font-weight: 600; color: var(--fg); }
.phf input[data-phn] { flex: 1; min-width: 0; border: 0 !important; outline: 0 !important; background: transparent; box-shadow: none !important; padding-inline: 0.75rem; }
.site-header .help-btn { width: 2.5rem; height: 2.5rem; min-height: 0; padding: 0; border-radius: 50%; border: 0; background: var(--info-bg); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; }
.site-header .help-btn[aria-expanded="true"] { background: var(--brand); color: var(--on-brand, #fff); }
.site-header .help-btn span[aria-hidden] { font-size: 1.125rem; }
.sc .kv dd, .sc .kv dt, .hist .w, .hist small { overflow-wrap: anywhere; min-width: 0; }
@container page (max-width: 30rem) { .hist li { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; } .sc .kv { grid-template-columns: minmax(0, 1fr) !important; } .sc .kv dd { text-align: start; } }
.hp-who .sub-line { display: block; font-size: 0.875rem; color: var(--muted); margin-top: 0.125rem; }
/* 26 Oct: title icons line up with the first line of the title, everywhere */
#main .app-main :is(.ttl, .page-head.dash-head, .page-head.wk-head, .phead .who, .record-who) { align-items: flex-start; }
#main .app-main :is(.ttl, .dash-head, .wk-head, .phead .who, .record-who) h1 { line-height: 2.75rem; display: block; }
#main .app-main .record-who h1 .record-alt { line-height: 1; }
.cpc-head { align-items: flex-start !important; flex-wrap: nowrap; }
.cpc-head > .icon { width: 2.5rem; height: 2.5rem; flex: none; }
.cpc-head .cpc-title h3 { line-height: 2.5rem; margin: 0; }
.cpc-head .cpc-title p { margin-top: 0; }
.cpc-head .cpc-open { align-self: flex-start; line-height: 2.5rem; margin-inline-start: auto; white-space: nowrap; }

/* written messages (UX-32, 26 Oct): same look as any other message; the reasoning folds away */
.items .how, .mvlead .how { grid-column: 1; margin-top: 0.375rem; font-size: 0.875rem; }
.how summary { cursor: pointer; color: var(--brand); font-weight: 600; width: fit-content; }
.how summary:focus-visible { outline: 2px solid var(--focus, var(--brand)); outline-offset: 2px; border-radius: 4px; }
.how[open] { background: var(--surface-2, var(--surface)); border: 1px solid var(--rule); border-radius: 8px; padding: 0.5rem 0.75rem; }
.how ul { margin: 0.375rem 0 0; padding-inline-start: 1.125rem; display: grid; gap: 0.125rem; }
.how .src { margin: 0.375rem 0 0; color: var(--muted); font-size: 0.8125rem; }
.foryou .item .detail { color: var(--fg); opacity: 0.85; }
.mvlead { margin: 0 0 0.875rem; display: grid; gap: 0.25rem; }
.mvlead > p { margin: 0; font-size: 1rem; }

/* Teams (Q-75) */
.ntab .field { max-width: 16rem; }
.tm-ch { grid-template-columns: minmax(0, 1fr) 9rem; }
.tm-lim { border: 0; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.tm-l { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.tm-l input[type="checkbox"] { width: 1.125rem; height: 1.125rem; }
.tm-l .tm-n { width: 6rem; }
.tm-fixed { margin: 0.5rem 0 0; display: flex; gap: 0.5rem; align-items: flex-start; color: var(--muted); }
.tm-fixed .gl { width: 1.125rem; height: 1.125rem; flex: none; margin-top: 0.125rem; }
.tprev { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
@container page (max-width: 64rem) { .tprev { grid-template-columns: minmax(0, 1fr); } }
.tprev h3 { margin: 0; font-size: 1rem; }
.tprev section > p.small { margin: 0.125rem 0 0.625rem; }
.tcard { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 0.75rem 0.875rem; margin-bottom: 0.75rem; font-size: 0.875rem; }
.tc-who { margin: 0 0 0.375rem; font-size: 0.8125rem; color: var(--muted); display: flex; align-items: center; gap: 0.375rem; }
.tc-who b { color: var(--fg); }
.tc-ic { display: inline-flex; width: 1.25rem; height: 1.25rem; border-radius: 5px; background: var(--btn-bg); color: var(--btn-fg); font-weight: 800; font-size: 0.75rem; align-items: center; justify-content: center; }
.tc-b h4 { margin: 0 0 0.375rem; font-size: 0.9375rem; }
.tc-b dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.125rem 0.75rem; margin: 0 0 0.625rem; }
.tc-b dt { color: var(--muted); }
.tc-b dd { margin: 0; }
.tc-b ul { margin: 0.25rem 0 0.5rem; padding-inline-start: 1.125rem; display: grid; gap: 0.25rem; }
.tc-b p { margin: 0 0 0.5rem; }
.tc-s { font-weight: 600; margin: 0.25rem 0 0 !important; }
.tc-bt { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.tbtn { display: inline-flex; align-items: center; height: 1.875rem; padding: 0 0.75rem; border-radius: 6px; border: 1px solid var(--control); font-weight: 600; font-size: 0.8125rem; }
.tbtn.p { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.wr-opt { border: 0; padding: 0; margin: 0 0 0.5rem; display: grid; gap: 0.5rem; }
.wr-opt legend { font-weight: 600; margin-bottom: 0.375rem; }
.wr-opt .radio { display: flex; gap: 0.5rem; align-items: flex-start; }
.wr-opt .radio input { margin-top: 0.25rem; }
.tm-kv { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 0.5rem 0.75rem; margin: 0 0 0.75rem; }
.tm-kv dt { color: var(--muted); }
.tm-kv dd { margin: 0; }
.tm-ten { overflow-wrap: anywhere; }
.tm-l .tm-n { width: 6.5rem; height: 2.25rem; font: inherit; padding: 0 0.5rem; border: 1px solid var(--control); border-radius: 0.625rem; background: var(--surface); color: var(--fg); }
.ntab th, .ntab td { vertical-align: middle; }

/* ---- release 1: PAY (demo version 87) ---- */
/* R1 PAY: back pay, loans and deductions, pay scales */
.bp-grid { display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: 1.25rem; align-items: start; margin-top: 1rem; }
.bp-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; margin-top: 1rem; }
@container page (max-width: 56rem) { .bp-grid, .bp-grid2 { grid-template-columns: minmax(0, 1fr); } }
.bp-form { grid-template-columns: minmax(0, 1fr); }
.bp-note { border: 1px solid var(--rule); border-radius: 0.625rem; padding: 0.75rem 0.875rem; margin-bottom: 0.75rem; background: var(--surface); }
.bp-note.warn { border-inline-start: 4px solid var(--warn, #b45309); }
.bp-t { width: 100%; }
.bp-t .n { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bp-t tr.bp-sub th, .bp-t tr.bp-sub td { color: var(--muted); font-size: 0.875rem; }
.bp-t .sub { display: block; color: var(--muted); font-size: 0.8125rem; font-weight: 400; }
.bp-src { display: inline-block; font-size: 0.75rem; font-weight: 700; border: 1px solid var(--rule); border-radius: 4px; padding: 0 0.375rem; color: var(--fg); background: var(--surface); }
.bp-off { flex-direction: row; display: flex; gap: 0.5rem; align-items: center; margin-top: 0.75rem; }
.bp-off input { width: 1.125rem; height: 1.125rem; min-height: 0; }
.bp-acts { justify-content: flex-end; margin-top: 0.75rem; gap: 0.5rem; }
.bp-acts-c { white-space: nowrap; }
.bp-sec + .bp-sec { margin-top: 1rem; }
.bp-new { margin-top: 0.75rem; }
.bp-new .bp-form { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin: 0.75rem 0; }
.bp-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.375rem 1rem; margin: 0 0 0.75rem; }
.bp-kv dt { color: var(--muted); }
.bp-kv dd { margin: 0; font-weight: 600; }
.bp-gtabs ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0.75rem 0 0; padding: 0; }
.bp-gtabs a { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 0.875rem; border: 1px solid var(--rule); border-radius: 999px; text-decoration: none; color: var(--fg); background: var(--surface); }
.bp-gtabs a[aria-current="page"] { border-color: var(--brand); color: var(--brand); font-weight: 600; }
.bp-range { position: relative; display: inline-block; width: 8rem; height: 0.5rem; border-radius: 999px; background: var(--rule); vertical-align: middle; }
.bp-range span { position: absolute; top: -0.25rem; width: 0.25rem; height: 1rem; border-radius: 2px; background: var(--fg); transform: translateX(-50%); }
:is([aria-labelledby="bp-h"], [aria-labelledby="dd-h"], [aria-labelledby="ps-bp"], .bp-sec) .hint :is(.status, .status span) { white-space: normal; max-width: 100%; }
:is([aria-labelledby="bp-h"], [aria-labelledby="dd-h"], [aria-labelledby="ps-bp"], .bp-sec) .hint .status { display: inline-flex; height: auto; }

/* ---- release 1: LEAVE (demo version 87) ---- */

/* release 1 · leavers, settlement, letters, signatures, company items (27 Oct) */
.lvx-said { margin: 0 0 0.75rem; font-size: 1rem; }
.lvx-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
@container page (min-width: 80rem) { .lvx-steps { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@container page (max-width: 40rem) { .lvx-steps { grid-template-columns: minmax(0, 1fr); } }
.lvx-st { background: var(--surface); border: 1px solid var(--rule); border-top: 4px solid var(--muted); border-radius: 10px; padding: 0.625rem 0.75rem; display: grid; gap: 0.25rem; align-content: start; }
.lvx-st p { margin: 0; }
.lvx-st .t { font-weight: 600; }
.lvx-st .d { font-size: 0.875rem; }
.lvx-st .w { font-size: 0.8125rem; color: var(--muted); }
.lvx-st .status { justify-self: start; }
.lvx-done { border-top-color: var(--ok-bd); }
.lvx-wait { border-top-color: var(--info-bd); }
.lvx-look { border-top-color: var(--warn-bd); }
.lvx-late { border-top-color: var(--bad-bd); }
.lvx-acts { margin-top: 0.875rem; gap: 0.5rem; }
.lvx-kv { display: grid; grid-template-columns: minmax(7rem, 12rem) minmax(0, 1fr); gap: 0.375rem 0.75rem; margin: 0 0 0.75rem; }
.lvx-kv dt { color: var(--muted); }
.lvx-kv dd { margin: 0; }
@container page (max-width: 36rem) { .lvx-kv { grid-template-columns: minmax(0, 1fr); } .lvx-kv dd { margin-bottom: 0.375rem; } }
.lvx-two { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@container page (max-width: 60rem) { .lvx-two { grid-template-columns: minmax(0, 1fr); } }
.lvx-doc { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 1.5rem 1.75rem; line-height: 1.6; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06); }
.lvx-doc-h { border-bottom: 1px solid var(--rule); margin-bottom: 0.875rem; padding-bottom: 0.5rem; }
.lvx-doc-h h3 { margin: 0; font-size: 1.125rem; }
.lvx-doc-h p { margin: 0; color: var(--muted); font-size: 0.875rem; }
.lvx-tpl ul { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.lvx-tpl a { display: inline-block; padding: 0.375rem 0.75rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); text-decoration: none; color: var(--fg); }
.lvx-tpl a[aria-current="page"] { border-color: var(--brand); color: var(--brand); font-weight: 600; }
.lvx-signers { margin: 0 0 0.75rem; padding: 0; list-style: none; display: grid; gap: 0.375rem; }
.lvx-add { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; margin-top: 1rem; }
.lvx-add .field { min-width: 12rem; }

/* ---- release 1: PEOPLE (demo version 87) ---- */

/* release 1 · people (27 Oct): add a worker, duplicates, qualifications, work arrangement, temporary arrangements, cases */
.aw-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@container page (min-width: 60rem) { .aw-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } }
.aw-form { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.aw-side h2 { font-size: 1.0625rem; margin: 0 0 0.5rem; }
.aw-match.is-strong { border-inline-start: 4px solid var(--warn-fg); padding-inline-start: 0.875rem; }
.aw-list { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.625rem; }
.aw-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; border: 1px solid var(--rule); border-radius: 10px; padding: 0.625rem 0.75rem; background: var(--surface); }
.aw-list .av { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; background: var(--bg-alt); border: 1px solid var(--rule); }
.aw-list .t { margin: 0; font-weight: 600; display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; }
.aw-list .d { margin: 0.125rem 0 0; color: var(--muted); font-size: 0.875rem; }
.aw-ok, .aw-done { display: flex; gap: 0.5rem; align-items: flex-start; }
.aw-ok .gl, .aw-done .gl { width: 1.25rem; height: 1.25rem; flex: none; color: var(--ok-fg); margin-top: 0.125rem; }
.aw-ok p { margin: 0; }
.dup-t td, .dup-t th { vertical-align: middle; }
.dup-t th .sub { display: block; font-weight: 400; color: var(--muted); font-size: 0.8125rem; }
.dup-t .radio { display: inline-flex; gap: 0.5rem; align-items: center; }
.qf { margin-top: 0.75rem; border: 1px solid var(--rule); }
.qf-h { margin: 0 0 0.5rem; font-size: 1rem; }
.qf .form-grid { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.qq-miss { margin: 0.375rem 0 0; padding-inline-start: 1.125rem; font-size: 0.875rem; display: grid; gap: 0.375rem; }
.qq-miss a { display: inline-block; min-height: 24px; line-height: 24px; }
.arr-now { margin: 0 0 0.5rem; }
.af-days { border: 0; padding: 0; margin: 0.5rem 0; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.af-days legend { font-weight: 600; margin-bottom: 0.375rem; }
.af-days .chk { display: inline-flex; gap: 0.375rem; align-items: center; }
.cs-steps { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.5rem; }
.cs-steps li { border: 1px solid var(--rule); border-top: 4px solid var(--muted); border-radius: 10px; padding: 0.5rem 0.75rem; background: var(--surface); display: grid; gap: 0.125rem; font-size: 0.875rem; }
.cs-steps li b { font-size: 0.9375rem; }
.cs-steps li span { color: var(--muted); }
.cs-steps li .d { color: var(--fg); }
.cs-steps .cs-done { border-top-color: var(--ok-fg); }
.cs-steps .cs-cur { border-top-color: var(--info-fg); box-shadow: inset 0 0 0 1px var(--info-fg); }
.cs-steps .cs-na { opacity: 0.85; }

/* ---- release 1: TIME (demo version 87) ---- */
/* Time, release 1: attendance, timesheets, devices, declared days, midday break */
.tm-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; border-bottom: 1px solid var(--rule); margin: 0 0 1rem; }
.tm-tabs a { padding: 0.5rem 0.125rem; color: var(--fg); text-decoration: none; font-weight: 500; border-bottom: 3px solid transparent; }
.tm-tabs a[aria-current="page"] { border-bottom-color: var(--brand); font-weight: 600; }
.tm-tabs a:hover { color: var(--brand); }
.tm-tabs a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.tm-filters { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; margin-bottom: 1rem; }
.tm-filters .field { min-width: 12rem; flex: 0 1 18rem; }
.tm-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; padding: 0; }
.tm-c { border: 1px solid var(--rule); border-radius: 999px; padding: 0.25rem 0.75rem; background: var(--surface); font-size: 0.9375rem; }
.tm-c.warn { border-color: var(--warn-border, #d97706); }
.tm-c.bad { border-color: var(--bad-border, #dc2626); }
.tm-c.ok { border-color: var(--ok-border, #16a34a); }
.tm-dayg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@container page (min-width: 72rem) { .tm-dayg.has-fix { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; } }
.tm-day th .sub, .tm-dr th .sub { display: block; font-weight: 400; color: var(--muted); font-size: 0.875rem; }
.tm-fix form { display: grid; gap: 0.75rem; }
.tm-err { color: var(--bad, #b91c1c); font-weight: 600; margin: 0.25rem 0 0; }
.tm-kv { display: grid; grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr); gap: 0.5rem 1rem; margin: 0; }
.tm-kv dt { color: var(--muted); }
.tm-kv dd { margin: 0; }
@container page (max-width: 44rem) { .tm-kv { grid-template-columns: minmax(0, 1fr); } .tm-kv dd { margin-bottom: 0.5rem; } }
.tm-decl { display: grid; gap: 1.25rem; }
.tm-fs { border: 0; padding: 0; margin: 0.75rem 0; display: grid; gap: 0.375rem; }
.tm-fs legend { font-weight: 600; margin-bottom: 0.375rem; }
.tm-cb { display: flex; gap: 0.5rem; align-items: flex-start; }
.tm-cb input { margin-top: 0.25rem; width: 1.125rem; height: 1.125rem; flex: none; }
.tm-imp { border: 1px solid var(--rule); border-radius: 10px; padding: 0.75rem 1rem; margin: 0.75rem 0; }
.tm-imp h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.tm-bar { position: relative; height: 1.25rem; border-radius: 6px; background: var(--rule); margin: 0.75rem 0 0.5rem; overflow: hidden; }
.tm-bar span { position: absolute; top: 0; bottom: 0; }
.tm-bar .w { background: var(--brand); opacity: 0.8; }
.tm-bar .b { background: var(--bad, #b91c1c); }
.tm-inline { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.tm-inline input { min-height: 2.25rem; padding: 0.25rem 0.5rem; }
.tm-inline label { white-space: nowrap; }
@container page (max-width: 48rem) { .tm-day .tm-p2 { display: none; } }
@container page (max-width: 36rem) { .tm-day .tm-p3 { display: none; } }
.tm-day td .btn { margin-top: 0.25rem; }

/* ---- release 1: BEN (demo version 87) ---- */

/* release 1 · expenses, insurance, Emiratisation (BEN, demo version 87) */
.b-check { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0.75rem 0 0; font-size: 0.875rem; color: var(--muted); }
.b-check .gl { width: 1rem; height: 1rem; flex: none; margin-top: 0.1875rem; }
.b-tab td .sub, .b-tab th .sub { display: block; font-weight: 400; color: var(--muted); font-size: 0.875rem; }
.b-tab tfoot th, .b-tab tfoot td { font-weight: 700; }
.b-dec { margin: 0; min-width: 12rem; }
.b-dec + .b-dec { margin-top: 0.375rem; }
.b-num { display: inline-block; margin: 0; }
.b-num input { width: 7rem; min-height: 2.25rem; padding: 0.375rem 0.5rem; }
.b-xform { margin-top: 0.75rem; }
.b-warn { margin-top: 0.75rem; }
.b-bad { border-color: var(--bad-fg); }
.b-claim + .b-claim { margin-top: 1.25rem; }
.b-claim h3 { margin: 0; font-size: 1rem; }
section.b-claim { margin-top: 1rem; }
.b-h2 { font-size: 1.125rem; margin: 1.5rem 0 0.25rem; }
.b-kpis { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
@container page (max-width: 52rem) { .b-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container page (max-width: 26rem) { .b-kpis { grid-template-columns: minmax(0, 1fr); } }
.b-kpis li { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 0.75rem 1rem; display: grid; gap: 0.125rem; }
.b-kpis li > span:first-child { color: var(--muted); font-size: 0.875rem; }
.b-kpis li strong { font-size: 1.25rem; font-weight: 600; }
.b-kpis li .sub { color: var(--muted); font-size: 0.8125rem; }
.b-kpis li.bad strong { color: var(--bad-fg); }
.b-bar { display: inline-block; width: 6rem; height: 0.5rem; border-radius: 999px; background: var(--rule); overflow: hidden; vertical-align: middle; margin-inline-end: 0.375rem; }
.b-bar > span { display: block; height: 100%; }
.b-bar > span.bad { background: var(--bad-fg); }
.b-bar > span.ok { background: var(--ok-fg); }
.b-mute th, .b-mute td { color: var(--muted); }
.b-add { margin-top: 1rem; }
.b-add form { margin-top: 0.75rem; }
.b-h3 { font-size: 1rem; margin: 0.25rem 0 0.5rem; }
.b-claim > p.small, section.b-claim > p { margin-top: 0.75rem; }
@container page (min-width: 60rem) { .b-xform .field:has(#xf-charge) { grid-column: span 2; } }
.field:has(#dc-why) { grid-column: 1 / -1; }

/* ---- pay elements, completed (UX-33, demo version 88) ---- */
.pe-acts { justify-content: flex-end; margin: 0 0 0.75rem; flex-wrap: wrap; gap: 0.5rem; }
.pe-find .find-row { display: grid; grid-template-columns: minmax(14rem, 2fr) repeat(4, minmax(9rem, 1fr)); gap: 0.75rem; align-items: end; }
@container page (max-width: 60rem) { .pe-find .find-row { grid-template-columns: 1fr 1fr; } }
@container page (max-width: 30rem) { .pe-find .find-row { grid-template-columns: 1fr; } }
.pe-checks { list-style: none; margin: 0.75rem 0 0.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pe-chk { display: inline-flex; align-items: center; gap: 0.5rem; font: inherit; font-size: 0.875rem; color: var(--fg); background: var(--surface); border: 1px solid var(--rule); border-radius: 999px; padding: 0.25rem 0.75rem 0.25rem 0.375rem; cursor: pointer; }
.pe-chk[aria-pressed="true"] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.pe-chk:focus-visible, .pe-tog:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pe-table { font-size: 0.875rem; }
.pe-table th, .pe-table td { vertical-align: top; }
.pe-table td.c, .pe-table th.c, .pe-feeds td.c, .pe-feeds th.c { text-align: center; }
.pe-table th[scope="row"] { font-weight: 600; min-width: 9rem; }
.pe-code { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.8125rem; white-space: nowrap; }
.pe-cell { display: inline-flex; flex-direction: column; align-items: center; gap: 0.125rem; line-height: 1.1; }
.pe-y { color: var(--ok-fg, #166534); font-weight: 700; }
.pe-no { color: var(--muted); }
.pe-law { font-size: 0.6875rem; font-weight: 700; color: var(--warn-fg); }
.pe-pend { font-size: 0.6875rem; font-weight: 600; color: var(--info-fg); white-space: nowrap; }
.pe-tog { font: inherit; background: none; border: 1px dashed transparent; border-radius: 0.375rem; padding: 0.25rem 0.5rem; cursor: pointer; color: inherit; min-width: 2.75rem; min-height: 2.25rem; }
.pe-tog:hover { border-color: var(--control); }
.pe-tog[aria-pressed="true"] { border: 2px solid var(--brand); background: var(--info-bg); }
.pe-miss { margin-top: 1rem; }
.pe-miss ul { margin: 0.25rem 0 0.5rem; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; }
.pe-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 0 0 0.25rem; }
.pe-tabs { border-bottom: 1px solid var(--rule); margin: 0.5rem 0 1.25rem; }
.pe-tabs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.pe-tabs a { display: block; padding: 0.625rem 0.875rem; color: var(--fg); text-decoration: none; border-bottom: 3px solid transparent; }
.pe-tabs a:hover { text-decoration: underline; }
.pe-tabs a[aria-current="page"] { font-weight: 600; border-bottom-color: var(--brand); }
.pe-kpis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
@container page (max-width: 52rem) { .pe-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pe-kpis li { background: var(--surface); border: 1px solid var(--rule); border-radius: 0.75rem; padding: 0.75rem 1rem; display: grid; gap: 0.25rem; }
.pe-kpis span { font-size: 0.8125rem; color: var(--muted); }
.pe-kpis b { font-size: 1.375rem; font-weight: 600; }
.pe-bars { display: flex; align-items: flex-end; gap: 0.25rem; height: 2.25rem; }
.pe-bars span { display: block; flex: 1; max-width: 1rem; background: var(--brand); opacity: 0.55; border-radius: 2px 2px 0 0; }
.pe-sent { font-size: 1rem; margin: 0 0 0.75rem; }
.pe-methods { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
@container page (max-width: 64rem) { .pe-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container page (max-width: 40rem) { .pe-methods { grid-template-columns: minmax(0, 1fr); } }
.pe-methods li { border: 1px solid var(--rule); border-radius: 0.625rem; padding: 0.625rem 0.75rem; display: grid; gap: 0.125rem; font-size: 0.875rem; }
.pe-methods li span { color: var(--muted); }
.pe-methods li.on { border: 2px solid var(--brand); background: var(--info-bg); }
.pe-methods li.on span { color: var(--fg); }
.pe-rules { margin: 0; display: grid; }
.pe-rules > div { display: grid; grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr); gap: 0.75rem; padding: 0.625rem 0; border-top: 1px solid var(--rule); }
.pe-rules > div:first-child { border-top: 0; }
.pe-rules dt { color: var(--muted); }
.pe-rules dd { margin: 0; }
@container page (max-width: 48rem) { .pe-rules > div { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; } }
.pe-flow { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; }
.pe-flow li { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; }
.pe-flow .pe-st { border: 1px solid var(--rule); border-radius: 0.5rem; padding: 0.375rem 0.625rem; background: var(--surface); }
.pe-flow .pe-ar::before { content: "→"; color: var(--muted); }
[dir="rtl"] .pe-flow .pe-ar::before { content: "←"; }
.pe-flow li.me .pe-st { border: 2px solid var(--brand); font-weight: 600; background: var(--info-bg); }
.pe-feeds { font-size: 0.875rem; }
.pe-feeds th[scope="row"] .sub { display: block; }
.pe-prev { border-color: var(--brand); }
.pe-cost { font-size: 1.0625rem; font-weight: 600; margin: 0 0 0.25rem; }
.pe-chform { grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr); align-items: end; margin-top: 0.75rem; }
.pe-chform .row { grid-column: 1 / -1; }
@container page (max-width: 40rem) { .pe-chform { grid-template-columns: 1fr; } }
.pe-cmp .pe-cmp-h th { background: var(--bg-alt); text-align: start; }
.pe-cmp tr.pe-diff td { font-weight: 600; color: var(--warn-fg); }
.pe-testform { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: end; }
@container page (max-width: 40rem) { .pe-testform { grid-template-columns: 1fr; } }
.pe-test th[scope="row"] { font-weight: 400; }
.pe-test tr.pe-tot th, .pe-test tr.pe-tot td { font-weight: 700; border-top: 2px solid var(--rule); }
/* new element form: proper controls in "How it's paid" */
.el-rule input:not([type="checkbox"]):not([type="radio"]), .el-rule select { font: inherit; color: var(--fg); background: var(--surface); border: 1px solid var(--control); border-radius: 0.625rem; padding: 0.5rem 0.75rem; min-height: 2.75rem; width: min(100%, 30rem); box-sizing: border-box; }
.el-rule > div { display: grid; gap: 0.25rem; justify-items: start; }
.pe-find .find-row .field { min-width: 0; }
.pe-find .field input, .pe-find .field select { width: 100%; min-width: 0; box-sizing: border-box; }
.pe-table th[scope="row"] .sub { display: block; font-weight: 400; color: var(--muted); font-size: 0.8125rem; margin-top: 0.125rem; }
.pe-table th[scope="row"] { min-width: 12rem; }
.pe-gl { display: block; font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
.pe-table { min-width: 0; }
.pe-table thead th { white-space: normal; vertical-align: bottom; }
.pe-table td:last-child { white-space: nowrap; }
.pe-rules .tagp { white-space: nowrap; display: inline-block; }
.pe-tog:hover .pe-cell { text-decoration: underline; }
@container page (max-width: 52rem) { .pe-table .p3 { display: none; } }
@container page (max-width: 30rem) { .pe-table .p2 { display: none; } }
.pe-methods li { min-width: 0; overflow-wrap: anywhere; }
.pe-rules dd, .pe-rules dt { min-width: 0; overflow-wrap: anywhere; }

/* ---- declining to sign and the certificate of signing (Q-76, demo version 89) ---- */
.sig-doc { max-height: 26rem; overflow: auto; }
.sig-choices { display: grid; gap: 0.5rem; margin: 0.75rem 0 0.5rem; }
.sig-choices .btn { width: 100%; justify-content: center; }
.sig-q { margin: 0.5rem 0; padding: 0.5rem 0.75rem; border-inline-start: 3px solid var(--rule); background: var(--surface-2, var(--bg-alt, var(--surface))); border-radius: 4px; }
.sig-no fieldset, .sig-rule { border: 0; padding: 0; margin: 0 0 0.75rem; display: grid; gap: 0.5rem; }
.sig-no legend, .sig-rule legend { font-weight: 600; margin-bottom: 0.25rem; }
.sig-no .radio, .sig-rule .radio, .sig-docs ~ .x, .checkbox { display: flex; gap: 0.5rem; align-items: flex-start; }
.sig-acts { flex-wrap: wrap; }
.sig-h3 { font-size: 1rem; margin: 1rem 0 0.5rem; }
.sig-res { margin: 0.5rem 0 0; font-weight: 600; }
.sig-res.ok { color: var(--ok-fg, #166534); }
.sig-res.bad { color: var(--bad-fg, #b91c1c); }
.sig-cert-acts { margin-bottom: 1rem; }
.sig-cert-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
@container page (max-width: 72rem) { .sig-cert-wrap { grid-template-columns: minmax(0, 1fr); } }
.sig-cert { background: var(--surface); color: var(--fg); border: 1px solid var(--rule); border-radius: 6px; padding: 1.25rem 1.5rem; font-size: 0.875rem; box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.sig-ch { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid var(--fg); padding-bottom: 0.5rem; margin-bottom: 0.75rem; gap: 1rem; }
.sig-ch h2 { margin: 0; font-size: 1.25rem; }
.sig-ch p { margin: 0; color: var(--muted); }
.sig-brand { font-size: 1.0625rem; } .sig-brand b { color: var(--brand); }
.sig-sec { background: var(--surface-2, var(--bg-alt, var(--rule))); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 0.3rem 0.5rem; margin: 0.875rem 0 0.5rem; font-weight: 700; }
.sig-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem 1rem; margin: 0; }
@container page (max-width: 44rem) { .sig-g { grid-template-columns: minmax(0, 1fr); } }
.sig-g dt { font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.sig-g dd { margin: 0; overflow-wrap: anywhere; }
.sig-t { width: 100%; font-size: 0.8125rem; }
.sig-sig { display: block; font-family: "Brush Script MT", "Segoe Script", cursive; font-size: 1.25rem; border: 1px solid var(--rule); border-radius: 4px; padding: 0.25rem 0.5rem; text-align: center; margin-bottom: 0.125rem; }
.sig-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; margin-inline-end: 0.375rem; background: var(--brand); }
.sig-dot.g { background: var(--ok-fg, #166534); } .sig-dot.a { background: var(--warn-fg, #b45309); } .sig-dot.n { background: var(--muted); }
.sig-cf { margin-top: 1rem; border-top: 1px solid var(--rule); padding-top: 0.375rem; font-size: 0.75rem; color: var(--muted); display: flex; justify-content: space-between; gap: 1rem; overflow-wrap: anywhere; }
.sig-print-bar { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.sig-print { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; max-width: 52rem; }
@media print {
  .no-print, #shell-header, #side-nav, .site-footer, footer.app-foot { display: none !important; }
  .sig-print .sig-cert, .sig-print-doc { box-shadow: none; break-before: page; border: 0; }
  .sig-print-doc { break-before: auto; }
}
.sig-no .radio input, .sig-rule .radio input, .checkbox input { width: auto; min-height: 0; flex: none; margin-top: 0.25rem; }
.sig-no .radio label, .sig-rule .radio label, .checkbox label { flex: 1; text-align: start; font-weight: 400; }
.sig-no fieldset.field { display: grid; gap: 0.375rem; }

/* ---- version 90: STA ---- */
/* ---------- v90 · STA: starters, pre-hires, sign-in and Workspace downloads ---------- */
.sta-cards { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.sta-cards > li > a, .sta-cards > li > span { display: grid; gap: 0.25rem; padding: 0.875rem 1rem; border: 1px solid var(--rule); border-radius: 0.875rem; background: var(--surface); text-decoration: none; color: var(--fg); height: 100%; box-sizing: border-box; }
.sta-cards > li > a:hover { border-color: var(--brand); }
.sta-cards .st { font-size: 0.875rem; font-weight: 600; color: var(--fg); }
.sta-cards .n { font-size: 1.875rem; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sta-cards .sub { font-size: 0.8125rem; color: var(--muted); }
.sta-cards.sm .n { font-size: 1.5rem; }
.panel .sta-cards { margin: 0; }
@container page (max-width: 52rem) { .sta-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sta-seg { margin: 0 0 1rem; flex-wrap: wrap; }
.sta-seg .ct { font-size: 0.75rem; color: var(--muted); margin-inline-start: 0.375rem; }
.sta-seg a[aria-current] .ct { color: inherit; }
.sta-filters { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: end; margin: 0 0 1rem; }
.sta-filters .field { margin: 0; min-width: 12rem; }
.sta-filters .inline-filter { margin: 0; }
.sta-t .sub-line { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--muted); margin-top: 0.125rem; }
.sta-t td .sub-line .status { margin-top: 0.25rem; }
.sta-t th[scope="row"] { font-weight: 600; }
.sta-bar { display: flex; width: 7.5rem; max-width: 100%; height: 0.625rem; border-radius: 999px; overflow: hidden; border: 1px solid var(--rule); background: var(--surface); }
.sta-bar > span { display: block; height: 100%; }
.sta-bar .d, .sta-legend i.d { background: var(--ok-fg); }
.sta-bar .w, .sta-legend i.w { background: var(--info-fg); }
.sta-bar .l, .sta-legend i.l { background: var(--bad-fg); }
.sta-bar .t, .sta-legend i.t { background: var(--rule); }
.sta-bar-t { display: block; font-size: 0.8125rem; color: var(--muted); margin-top: 0.25rem; white-space: nowrap; }
.sta-legend { display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem; margin: 0; }
.sta-legend span { display: inline-flex; align-items: center; gap: 0.375rem; }
.sta-legend i { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 0.1875rem; border: 1px solid var(--rule); }
:root[data-mode="contrast"] .sta-bar .t, :root[data-mode="contrast"] .sta-legend i.t { background: var(--surface); }
.sta-check { display: flex; gap: 0.5rem; align-items: flex-start; margin: 1rem 0 0; padding: 0.625rem 0.875rem; border: 1px dashed var(--warn-bd); border-radius: 0.625rem; background: var(--warn-bg); color: var(--fg); font-size: 0.9375rem; }
.sta-check .gl { width: 1.125rem; height: 1.125rem; flex: none; color: var(--warn-fg); margin-top: 0.125rem; }
/* one pre-hire */
.sta-ph .ttl { display: flex; gap: 0.875rem; align-items: center; }
.sta-ph .avatar { width: 3rem; height: 3rem; font-size: 1.0625rem; flex: none; }
.sta-ph h1 { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; }
.sta-ph h1 .status { font-size: 0.8125rem; }
.sta-two { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@container page (max-width: 60rem) { .sta-two { grid-template-columns: minmax(0, 1fr); } }
.sta-ctl { color: var(--muted); }
.sta-inl { display: grid; gap: 0.75rem; padding: 0.875rem 1rem; border: 1px solid var(--rule); border-radius: 0.75rem; background: var(--bg-alt, var(--surface)); }
.sta-inl h3 { font-size: 1rem; margin: 0; }
.panel .sta-inl.pad, .sta-inl.pad { margin: 0 1.375rem 1.25rem; }
.sta-tasks { list-style: none; padding: 0; margin: 0; display: grid; }
.sta-task { display: grid; grid-template-columns: minmax(0, 1fr) minmax(5rem, 8rem) minmax(9rem, 13rem); gap: 0.375rem 1rem; padding: 0.75rem 0; border-top: 1px solid var(--rule); align-items: start; }
.sta-task .t { font-weight: 600; margin: 0; }
.sta-task p { margin: 0; }
.sta-who { font-size: 0.9375rem; }
.sta-st { display: grid; gap: 0.375rem; justify-items: end; }
.sta-task.done .t { color: var(--muted); }
@container page (max-width: 44rem) { .sta-task { grid-template-columns: minmax(0, 1fr); } .sta-st { justify-items: start; } }
.sta-big { font-size: 1.125rem; font-weight: 600; margin: 0; }
/* admin */
.sta-lib { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1.25rem; align-items: start; }
@container page (max-width: 62rem) { .sta-lib { grid-template-columns: minmax(0, 1fr); } }
.sta-lib a[aria-current] { color: var(--fg); text-decoration-thickness: 2px; }
.sta-rules { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: 0.25rem; }
.sta-sform { display: grid; gap: 1.25rem; }
.sta-co { max-width: 24rem; }
.sta-fs { margin: 0; min-width: 0; }
.sta-fs > legend { font-size: 1.1875rem; font-weight: 600; padding: 0; float: left; width: 100%; margin-bottom: 0.5rem; }
.sta-fs > legend + * { clear: both; }
.sta-sub { border: 0; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.sta-sub > legend { font-weight: 600; padding: 0; margin-bottom: 0.25rem; }
.sta-fs .check, .sta-fs2 .check { display: flex; gap: 0.5rem; align-items: flex-start; min-height: 2.25rem; }
.sta-fs2 { border: 0; margin: 0; padding: 0; display: grid; gap: 0.125rem; }
/* simulated phone */
.sta-phone { max-width: 24rem; margin: 1.25rem auto; padding: 1.25rem 1.25rem 1.5rem; border: 1px solid var(--rule); border-radius: 1.75rem; background: var(--surface); display: grid; gap: 0.875rem; box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08); }
.sta-phone h2 { font-size: 1.375rem; margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.sta-phone p { margin: 0; }
.sta-brand { text-align: center; font-size: 1.125rem; }
.sta-co-n { font-size: 0.8125rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.sta-meth { display: grid; gap: 0.5rem; }
.sta-m { display: grid; justify-items: center; text-align: center; width: 100%; box-sizing: border-box; min-height: 3rem; }
.sta-m .sta-msub { font-size: 0.8125rem; font-weight: 400; color: inherit; }
.sta-m[disabled] { opacity: 1; color: var(--muted); background: var(--surface); border: 1px dashed var(--control); cursor: not-allowed; }
.sta-link h2 { display: flex; align-items: center; gap: 0.5rem; }
/* workspace */
.sta-ws { margin-bottom: 1.25rem; }
.sta-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.375rem; }
.sta-fw { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.sta-fw li { border-inline-start: 3px solid var(--brand); padding-inline-start: 0.875rem; }
.sta-fw .w { font-weight: 600; margin: 0; }
.sta-fw .t { margin: 0; }
.sta-range { margin-top: 0.25rem; }
.sta-st .status { white-space: normal; text-align: start; }
@container page (max-width: 40rem) { .sta-seg { display: grid; width: 100%; } .sta-seg a { border-inline-end: 0; border-bottom: 1px solid var(--rule); justify-content: space-between; } .sta-seg a:last-child { border-bottom: 0; } }
.sta-brand .wordmark .b { color: var(--brand); }

/* ---- version 90: ACT ---- */
/* V90 ACT: what happens next (actions), cover while away, payroll history */
.ax-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1.25rem; align-items: start; }
@container page (max-width: 54rem) { .ax-grid { grid-template-columns: minmax(0, 1fr); } }
.ax-n { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--brand); color: var(--btn-fg, #fff); font-size: 0.8125rem; font-weight: 600; margin-inline-end: 0.5rem; vertical-align: 0.1em; }
:root[data-mode="contrast"] .ax-n { background: #000; color: #ffff00; border: 1px solid #ffff00; }
.ax-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin: 0.25rem 0 0.5rem; }
.ax-chip { display: inline-block; border: 1px solid var(--rule); border-radius: 0.5rem; padding: 0.25rem 0.625rem; background: var(--surface); font-size: 0.875rem; }
.ax-arr { color: var(--muted); }
[dir="rtl"] .ax-arr { display: inline-block; transform: scaleX(-1); }
.ax-list { list-style: none; margin: 0; padding: 0; }
.ax-a { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: 0.25rem 0.75rem; padding: 0.75rem 0; border-top: 1px solid var(--rule); align-items: start; }
.ax-a:first-child { border-top: 0; }
.ax-a.off .ax-b { color: var(--muted); }
.ax-ic { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 0.5rem; background: var(--bg-alt); color: var(--brand); }
.ax-ic .gl { width: 1rem; height: 1rem; }
.ax-b p { margin: 0; }
.ax-when { display: inline-block; font-size: 0.75rem; font-weight: 600; background: var(--bg-alt); border: 1px solid var(--rule); border-radius: 0.375rem; padding: 0 0.375rem; margin-inline-end: 0.25rem; }
.ax-d { font-size: 0.875rem; color: var(--muted); }
.ax-side { display: flex; flex-wrap: wrap; gap: 0.375rem; justify-content: flex-end; align-items: center; }
.ax-tag { font-size: 0.75rem; font-weight: 600; color: var(--muted); border: 1px solid var(--rule); border-radius: 0.375rem; padding: 0 0.375rem; white-space: nowrap; }
.ax-tag.own { color: var(--info-fg); background: var(--info-bg); border-color: var(--info-bd); }
.ax-ed { grid-column: 1 / -1; margin-top: 0.5rem; padding: 1rem; border: 1px solid var(--rule); border-radius: 0.75rem; background: var(--bg-alt); }
.ax-ed h3 { font-size: 1rem; margin: 0 0 0.75rem; }
.ax-ed .row { margin-top: 0.75rem; justify-content: flex-end; flex-wrap: wrap; gap: 0.5rem; }
.ax-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.25rem 1rem; margin: 0.75rem 0 0; font-size: 0.875rem; grid-column: 1 / -1; }
.ax-kv dt { font-weight: 600; }
.ax-kv dd { margin: 0; }
@container page (max-width: 40rem) { .ax-a { grid-template-columns: 2rem minmax(0, 1fr); } .ax-side { grid-column: 2; justify-content: flex-start; } .ax-kv { grid-template-columns: minmax(0, 1fr); } }
.ax-add { position: relative; margin-top: 0.75rem; }
.ax-menu { margin-top: 0.5rem; border: 1px solid var(--rule); border-radius: 0.75rem; background: var(--surface); max-width: 26rem; overflow: hidden; }
.ax-mh { margin: 0; padding: 0.5rem 0.875rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); background: var(--bg-alt); }
.ax-menu ul { list-style: none; margin: 0; padding: 0; }
.ax-menu li + li { border-top: 1px solid var(--rule); }
.ax-menu button { display: flex; gap: 0.625rem; width: 100%; text-align: start; font: inherit; color: var(--fg); background: none; border: 0; padding: 0.625rem 0.875rem; cursor: pointer; }
.ax-menu button:hover { background: var(--bg-alt); }
.ax-menu button:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
.ax-menu button .gl { width: 1.125rem; height: 1.125rem; flex: none; margin-top: 0.125rem; color: var(--brand); }
.ax-menu button span span { display: block; font-size: 0.875rem; color: var(--muted); }
.ax-h3 { font-size: 1rem; margin: 1rem 0 0.25rem; }
.ax-run, .ax-steps { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.ax-run { margin-inline-start: 1.25rem; border-inline-start: 2px solid var(--rule); padding-inline-start: 0.875rem; }
.ax-steps li, .ax-run li { position: relative; padding: 0.375rem 0 0.375rem 1.25rem; }
[dir="rtl"] .ax-steps li, [dir="rtl"] .ax-run li { padding: 0.375rem 1.25rem 0.375rem 0; }
.ax-dot { position: absolute; inset-inline-start: 0; top: 0.75rem; width: 0.625rem; height: 0.625rem; border-radius: 999px; background: var(--ok-fg); }
.ax-run .ax-wait .ax-dot { background: var(--info-fg); }
.ax-run .ax-fail .ax-dot { background: var(--bad-fg); }
.ax-run .ax-warn .ax-dot { background: var(--warn-fg); }
.ax-run .ax-after .ax-dot { background: var(--muted); }
.ax-s { color: var(--muted); font-size: 0.875rem; }
.ax-run .ax-s::before, .ax-steps .ax-s::before { content: "· "; }
.ax-run .status { margin-inline: 0.25rem; }
.ax-then { margin: 0.25rem 0 0.75rem; padding-inline-start: 1.5rem; }
.ax-then li { margin: 0.125rem 0; }
.ax-tf { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.75rem; }
.ax-tf .field { margin: 0; min-width: 0; flex: 1 1 10rem; }
.ax-kt .sub, .cv-ht .sub { display: block; font-size: 0.8125rem; color: var(--muted); font-weight: 400; }
/* cover while away */
.cv-cards { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.5rem; }
.cv-cards li { display: flex; justify-content: space-between; gap: 0.75rem; align-items: flex-start; border: 1px solid var(--rule); border-radius: 0.75rem; padding: 0.75rem 0.875rem; }
.cv-cards .sub { display: block; font-size: 0.875rem; color: var(--muted); }
.cv-kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0; margin: 0 0 0.75rem; }
.cv-kv dt, .cv-kv dd { margin: 0; padding: 0.5rem 0; border-bottom: 1px solid var(--rule); }
.cv-kv dd { text-align: end; }
.cv-form { margin-top: 0.75rem; padding: 1rem; border: 1px solid var(--rule); border-radius: 0.75rem; background: var(--bg-alt); }
.cv-form h3 { font-size: 1rem; margin: 0 0 0.75rem; }
.cv-form .row { justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
.cv-mpick { padding: 1rem 1rem 0; margin: 0; }
.cv-t td.acts { white-space: normal; }
.cv-t .acts { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: flex-start; justify-content: flex-end; }
.cv-dl > summary { list-style: none; cursor: pointer; }
.cv-dl > summary::-webkit-details-marker { display: none; }
.cv-df { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; margin-top: 0.375rem; }
.cv-df label { font-size: 0.8125rem; width: 100%; }
.cv-df input { min-width: 0; flex: 1 1 8rem; }
.cv-foot p { margin: 0.25rem 0; }
.cv-sec header { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: baseline; }
/* payroll history */
.ph-step ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0 0 1rem; padding: 0; justify-content: flex-end; }
.ph-step a, .ph-cur { display: inline-block; padding: 0.375rem 0.75rem; border: 1px solid var(--rule); border-radius: 0.5rem; background: var(--surface); color: var(--fg); text-decoration: none; font-size: 0.875rem; }
.ph-step a:hover { border-color: var(--brand); }
.ph-cur { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); font-weight: 600; }
:root[data-mode="contrast"] .ph-cur { background: #000; color: #ffff00; border: 2px solid #ffff00; }
[dir="rtl"] .ph-step [aria-hidden="true"] { display: inline-block; transform: scaleX(-1); }
.ph-dash ul { margin-top: -0.5rem; }
.ph-banner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border: 1px solid var(--info-bd); background: var(--info-bg); border-radius: 0.75rem; margin-bottom: 0.75rem; }
.ph-banner p { margin: 0; }
.ph-banner .row { flex-wrap: wrap; gap: 0.5rem; }
.ph-stages { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.25rem; margin: 0 0 1.25rem; padding: 0; }
.ph-stages li { padding: 0.375rem 0.5rem; text-align: center; font-size: 0.8125rem; border-radius: 0.375rem; background: var(--bg-alt); color: var(--muted); }
.ph-stages li.done { background: var(--ok-bg); color: var(--ok-fg); border: 1px solid var(--ok-bd); }
@container page (max-width: 54rem) { .ph-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container page (max-width: 30rem) { .ph-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ph-g { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
@container page (max-width: 54rem) { .ph-g { grid-template-columns: minmax(0, 1fr); } }
.ph-old { display: block; color: var(--muted); font-size: 0.8125rem; }
.ph-files { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.375rem; }
.ph-files .gl { width: 1rem; height: 1rem; vertical-align: -0.15em; }
.ph-months ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; padding: 0; }
.ph-months a { display: inline-block; padding: 0.375rem 0.75rem; border: 1px solid var(--rule); border-radius: 0.5rem; background: var(--surface); }
.ph-months { margin-top: 1rem; }
.ph-cards { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 0 0 1.25rem; padding: 0; }
@container page (max-width: 40rem) { .ph-cards { grid-template-columns: minmax(0, 1fr); } }
.ph-cards a { display: grid; gap: 0.25rem; padding: 1rem; border: 1px solid var(--rule); border-radius: 0.75rem; background: var(--surface); color: var(--fg); text-decoration: none; justify-items: start; }
.ph-cards a:hover { border-color: var(--brand); }
.ph-cards a:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.ph-cards .sub { font-size: 0.875rem; color: var(--muted); }

/* ---- version 90: PAYX ---- */
/* V90 PAYX: pay explained and payments */
.pyx-tag { display: inline-block; margin-inline-start: 0.375rem; font-size: 0.75rem; font-weight: 600; border-radius: 999px; padding: 0 0.5rem; border: 1px solid var(--rule); color: var(--muted); background: var(--surface); vertical-align: 0.1em; }
.pyx-tag.st { color: var(--info-fg); background: var(--info-bg); border-color: var(--info-bd, var(--rule)); }
.pyx-q { display: inline-block; font-size: 0.75rem; font-weight: 700; border: 1px solid var(--rule); border-radius: 4px; padding: 0 0.375rem; }
.pyx-h3 { margin: 0 0 0.375rem; font-size: 1.0625rem; }
.pyx-h4 { margin: 1rem 0 0.25rem; font-size: 1rem; }
.pyx-ul { margin: 0.25rem 0 0.75rem; padding-inline-start: 1.25rem; display: grid; gap: 0.25rem; }
.pyx-fc { margin-top: 0.75rem; }
.pyx-fc .seg-choice { margin: 0.5rem 0; }
.pyx-dep { margin-bottom: 0.75rem; }
.pyx-vals th { font-weight: 500; }
.pyx-agf { display: grid; gap: 0.5rem; max-width: 32rem; }
.pyx-kv { margin-top: 0.75rem; }
.pyx-fq-g { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.pyx-err { margin: 0.75rem 0; }
.pyx-stf .pyx-stf-r { align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; }
.pyx-stf .field { margin: 0; }
.pyx-phases { margin: 0.5rem 0; padding-inline-start: 1.25rem; display: grid; gap: 0.25rem; }
.pyx-lines { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
.pyx-line { min-width: 0; }
.pyx-line { border-top: 1px solid var(--rule); padding: 0.5rem 0; }
.pyx-line summary { display: flex; justify-content: space-between; gap: 1rem; cursor: pointer; font-weight: 600; min-height: 2.75rem; align-items: center; }
.pyx-line summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.pyx-line summary .num { font-variant-numeric: tabular-nums; }
.pyx-line[open] summary { color: var(--brand); }
.pyx-otc { margin: 0.75rem 0 0.25rem; }
.pyx-who { border: 0; padding: 0; margin: 0 0 0.75rem; }
.pyx-who legend { font-weight: 600; margin-bottom: 0.375rem; }
.pyx-who-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 0.25rem 1rem; max-height: 16rem; overflow: auto; padding: 0.25rem; border: 1px solid var(--rule); border-radius: 0.5rem; }
.pyx-who-l label { display: flex; gap: 0.5rem; align-items: center; min-height: 2.25rem; }
.pyx-cost { margin: 0.5rem 0 0.75rem; }
.pyx-kpis { margin-top: 1rem; }
.pyx-ret .seg button { min-height: 2.5rem; padding: 0.375rem 0.75rem; }
.pyx-what { display: block; }
.pyx-fn .status, .pyx-ret .status, section[aria-labelledby="pyx-miss"] .status { white-space: normal; }
section[aria-labelledby="pyx-miss"] .item .side { max-width: 55%; }
.pyx-fn td { vertical-align: top; }
.pyx-fn-f { display: grid; gap: 0.375rem; justify-items: start; }
.pyx-fn-f .seg-choice { margin: 0; }
.pyx-fn-f .field { margin: 0; width: 100%; max-width: 22rem; }
.pyx-dec { margin: 0; display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; }
@container page (max-width: 40rem) {
  .pyx-fn, .pyx-ret, .pyx-fn tbody, .pyx-ret tbody, .pyx-fn tr, .pyx-ret tr, .pyx-fn th, .pyx-ret th, .pyx-fn td, .pyx-ret td { display: block; width: auto; }
  .pyx-fn thead, .pyx-ret thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pyx-fn tr, .pyx-ret tr { border-top: 1px solid var(--rule); padding: 0.5rem 0; }
  .pyx-fn th, .pyx-fn td, .pyx-ret th, .pyx-ret td { border: 0; padding: 0.25rem 0.75rem; text-align: start; }
  .pyx-fn-f .seg-choice label { padding: 0.375rem 0.625rem; }
  .pyx-line summary { font-size: 0.9375rem; }
}

/* ---- version 90: SICK ---- */
/* ---------- v90 SICK: sickness that rolls forward, certificates, sick plan, Documents tab, record zip, required documents, bereavement ---------- */
.sx-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.25rem; align-items: start; margin-top: 1.25rem; }
.sx-grid > .stack { display: grid; gap: 1.25rem; }
@container page (max-width: 56rem) { .sx-grid { grid-template-columns: minmax(0, 1fr); } }
.sx-check { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0.75rem 0 0; font-size: 0.875rem; color: var(--muted); }
.sx-check .gl { width: 1rem; height: 1rem; flex: none; margin-top: 0.1875rem; }
.sx-phases { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.375rem; }
.sx-ph { display: grid; grid-template-columns: 0.875rem minmax(0, 1fr) auto; gap: 0.625rem; align-items: center; font-size: 0.9375rem; }
.sx-ph .sx-pl { font-weight: 600; }
.sx-ph.sx-fut .sx-pl { font-weight: 500; color: var(--muted); }
.sx-ph .sx-pd { font-variant-numeric: tabular-nums; }
.sx-sw { width: 0.875rem; height: 0.875rem; border-radius: 0.25rem; border: 1px solid var(--rule); }
.sx-full .sx-sw, .sx-seg.sx-full { background: var(--ok-bg); border-color: var(--ok-bd); }
.sx-half .sx-sw, .sx-seg.sx-half { background: var(--warn-bg); border-color: var(--warn-bd); }
.sx-unpaid .sx-sw, .sx-seg.sx-unpaid { background: var(--bg-alt); border-color: var(--fg); background-image: repeating-linear-gradient(135deg, transparent 0 4px, var(--rule) 4px 6px); }
.sx-barw { margin: 0.75rem 0 2.25rem; position: relative; }
.sx-bar { position: relative; display: flex; height: 0.875rem; border-radius: 999px; overflow: visible; gap: 2px; }
.sx-seg { border: 1px solid; min-width: 2px; }
.sx-seg:first-child { border-start-start-radius: 999px; border-end-start-radius: 999px; }
.sx-seg:last-of-type { border-start-end-radius: 999px; border-end-end-radius: 999px; }
.sx-now { position: absolute; top: -0.3125rem; bottom: -0.3125rem; width: 3px; margin-inline-start: -1px; background: var(--fg); border-radius: 2px; }
.sx-marks { list-style: none; margin: 0; padding: 0; position: relative; height: 1.25rem; font-size: 0.75rem; color: var(--muted); }
.sx-marks li { position: absolute; top: 0.25rem; white-space: nowrap; }
.sx-marks li:last-child { inset-inline-start: auto !important; inset-inline-end: 0; }
.sx-marks li:nth-child(n+2):not(:last-child) { transform: translateX(-50%); }
:root[dir="rtl"] .sx-marks li:nth-child(n+2):not(:last-child) { transform: translateX(50%); }
@container page (max-width: 30rem) { .sx-marks li:nth-child(n+2):not(:last-child) { display: none; } }
.sx-rolls { margin: 0.5rem 0 0; padding-inline-start: 1.25rem; font-size: 0.875rem; color: var(--muted); }
.sx-gap { display: flex; gap: 0.75rem; align-items: flex-start; margin-top: 0.75rem; padding: 0.75rem 0.875rem; border-radius: 0.625rem; border: 1px solid var(--warn-bd); background: var(--surface); }
.sx-gap.bad { border-color: var(--bad-bd); }
.sx-gap p { margin: 0; }
.sx-gap > div > p + p { margin-top: 0.375rem; }
@container page (max-width: 30rem) { .sx-gap { flex-direction: column; } }
.sx-rem { display: flex; gap: 0.75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; border-top: 1px solid var(--rule); padding-top: 0.75rem; margin-top: 0.25rem; }
.sx-rem p { margin: 0; }
.sx-actf { margin-top: 1rem; }
.sx-actf h2 { font-size: 1.0625rem; margin: 0 0 0.75rem; }
.sx-preview { border: 2px dashed var(--rule); border-radius: 0.875rem; padding: 0 1rem 1rem; }
.sx-certf .fs { margin-top: 1rem; }
.sx-conv { margin: 0.375rem 0 0; color: var(--muted); }
.sx-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.sx-links li { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.sx-links label { display: inline-flex; gap: 0.5rem; align-items: center; min-height: 2.75rem; }
.sx-num { width: 5.5rem; max-width: 100%; min-height: 2.75rem; padding: 0.375rem 0.625rem; text-align: end; font: inherit; color: var(--fg); background: var(--surface); border: 1px solid var(--control); border-radius: 0.5rem; }
.sx-boxes { border: 0; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.sx-boxes legend { font-weight: 600; margin-bottom: 0.375rem; padding: 0; }
.sx-boxes label { display: inline-flex; gap: 0.375rem; align-items: center; min-height: 2.75rem; }
.sx-bv-calc { font-weight: 600; margin: 0.75rem 0; }
.sx-dacts { justify-content: flex-end; margin-bottom: 0.75rem; }
.sx-dfilt, .tabpanel form.sx-dfilt { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 0.5rem 1rem; align-items: end; margin-bottom: 0.5rem; }
.sx-dfilt .field { margin: 0; min-width: 0; }
.sx-dfilt select { width: 100%; }
.sx-dtab .sx-grp th { background: var(--bg-alt); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; }
.sx-dtab th .gl { width: 0.875rem; height: 0.875rem; vertical-align: -0.125rem; }
.sx-upf { margin: 0 0 1rem; }
.sx-req, .sx-rec { margin-top: 1.25rem; }
.sx-rulef { margin-top: 1rem; }
.sx-grey { color: var(--muted); font-weight: 600; }
.sx-zlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
.sx-zlist li { display: flex; gap: 0.625rem; align-items: flex-start; }
.sx-zlist .gl { width: 1.125rem; height: 1.125rem; flex: none; margin-top: 0.125rem; color: var(--brand); }

/* ---- version 90: DEATH ---- */
/* ---------- version 90 DEATH: death in service, two kinds of probation, manager requests, people who differ ---------- */
.dth-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@container page (max-width: 54rem) { .dth-two { grid-template-columns: minmax(0, 1fr); } }
.dth-form { display: grid; gap: 0.75rem; }
.dth-form .field input, .dth-form .field select { max-width: 22rem; }
.dth-fam { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
@container page (max-width: 40rem) { .dth-fam { grid-template-columns: minmax(0, 1fr); } }
.dth-said { margin: 0.75rem 0 0; }
.dth-sub { margin: -0.25rem 0 1rem; color: var(--muted); }
.dth-what .item, .dth-tasks .item { padding-block: 0.625rem; }
.dth-what .title, .dth-tasks .title { font-weight: 500; }
.dth-acts { justify-content: flex-end; margin-top: 1rem; gap: 0.5rem; }
.dth-who { display: flex; gap: 0.875rem; align-items: center; margin: 0.25rem 0 1rem; }
.dth-who h1 { margin: 0; font-size: 1.5rem; }
.dth-who p { margin: 0.125rem 0 0; }
.dth-notice { margin: 0 0 1.25rem; }
.dth-notice p { margin: 0; }
.dth-undo { display: grid; gap: 0.625rem; margin-top: 0.5rem; }
.dth-over { margin-top: 0.75rem; }
.dth-check { margin-top: 1.25rem; border: 1px dashed var(--warn-bd); background: var(--warn-bg); color: var(--fg); border-radius: 0.75rem; padding: 0.75rem 1rem; }
.dth-check-h { margin: 0 0 0.25rem; font-weight: 600; font-size: 0.9375rem; }
.dth-check ul { margin: 0; padding-inline-start: 1.25rem; font-size: 0.9375rem; }
.dth-heir { margin: 0; min-width: 0; }
fieldset.dth-heir { border: 1px solid var(--rule); }
fieldset.dth-heir > legend { font-weight: 600; font-size: 1.0625rem; padding: 0 0.375rem; }
.dth-heir header { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: space-between; align-items: center; }
.dth-heir header h2 { margin: 0; font-size: 1.0625rem; }
.dth-chip { margin: 0 0 0.5rem; }
.dth-share { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.dth-share input { max-width: 8rem; }
.dth-sumrow { justify-content: space-between; }
.dth-cards { border: 0; margin: 0 0 0.5rem; padding: 0; display: grid; gap: 0.5rem; }
.dth-card { display: flex; gap: 0.625rem; align-items: flex-start; border: 1px solid var(--control); border-radius: 0.75rem; padding: 0.625rem 0.75rem; cursor: pointer; background: var(--surface); }
.dth-card:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.dth-card input { width: 1.125rem; height: 1.125rem; margin-top: 0.1875rem; flex: none; }
.dth-card span span { display: block; color: var(--muted); font-size: 0.9375rem; }
.dth-cards[disabled] .dth-card { cursor: default; opacity: 0.85; }
.dth-ol { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: 0.375rem; }
.dth-list { margin: 0; padding-inline-start: 1.25rem; }
.dth-h3 { font-size: 1rem; margin: 1rem 0 0.375rem; }
.dth-mark { display: grid; gap: 0.375rem; justify-items: start; }
.dth-mark .field { margin: 0; }
.dth-mark input { max-width: 12rem; }
.dth-letter h4 { margin: 1rem 0 0.375rem; font-size: 1rem; }
.dth-reword { display: grid; gap: 0.625rem; margin-top: 0.75rem; }
.dth-reword textarea { width: 100%; }
.dth-in { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.dth-in h4 { margin: 0 0 0.25rem; }
.prb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 0.875rem; }
.prb-card { border: 1px solid var(--rule); border-radius: 0.75rem; padding: 0.75rem 1rem; background: var(--surface); min-width: 0; }
.prb-card header { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; }
.prb-card h4 { margin: 0; font-size: 1rem; }
.prb-card .lvx-kv { margin: 0.5rem 0; }
.prb-choice { border: 0; margin: 0.5rem 0 0; padding: 0.625rem 0 0; border-top: 1px solid var(--rule); }
.prb-choice legend { font-weight: 600; padding: 0; margin-bottom: 0.375rem; float: left; width: 100%; }
.prb-choice .row { clear: both; gap: 0.5rem; }
.mga-kinds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
@container page (max-width: 54rem) { .mga-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mga-kinds a { display: grid; gap: 0.125rem; min-height: 2.75rem; padding: 0.625rem 0.75rem; border: 1px solid var(--rule); border-radius: 0.75rem; background: var(--surface); color: var(--fg); text-decoration: none; }
.mga-kinds a span { color: var(--muted); font-size: 0.875rem; }
.mga-kinds a:hover { border-color: var(--control); }
.mga-kinds a[aria-current="page"] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.mga-kinds a[aria-current="page"] b { color: var(--brand); }
.mga-next { margin-top: 1rem; }
.mga-next p { margin: 0; }
.mga-team header { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.mga-pick { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; margin-top: 1rem; }
.mga-pick .field { min-width: min(100%, 16rem); margin: 0; }
.mga-rec { margin: 0.75rem 0 0; }

/* ---- version 90: OPS ---- */
/* V90 OPS: uploads outside the period, backing out, words on buttons, support cases, surveys, Looking ahead, Learn insanONE */
.ops-mt { margin-top: 1.25rem; }
.ops-check { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0.75rem 0 0; font-size: 0.875rem; color: var(--muted); }
.ops-check .gl { width: 1rem; height: 1rem; flex: none; margin-top: 0.1875rem; }
.ops-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; }
.panel.ops-out { border-color: var(--warn-bd); margin-bottom: 1.25rem; }
.ops-more summary { cursor: pointer; font-weight: 600; display: list-item; padding-block: 0.625rem; }
.ops-bo-t { width: 100%; border-collapse: collapse; }
.ops-bo-t th, .ops-bo-t td { padding: 0.5rem 0; border-bottom: 1px solid var(--rule); text-align: start; font-weight: 500; }
.ops-bo-t td.n { text-align: end; font-weight: 700; font-variant-numeric: tabular-nums; padding-inline-start: 1rem; }
.ops-since { margin: 0; padding-inline-start: 1.1rem; display: grid; gap: 0.375rem; }
/* words on buttons */
.ops-bw .ops-w { display: block; font-weight: 700; }
.ops-bw .ops-w2 { display: block; text-align: match-parent; color: var(--muted); font-size: 0.875rem; }
.ops-never { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
/* support cases */
.ops-sp-grid, .ops-ah-grid, .ops-ln-grid, .ops-sv-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.ops-sv-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.ops-ah-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
@container page (max-width: 56rem) { .ops-sp-grid, .ops-ah-grid, .ops-ln-grid, .ops-sv-grid { grid-template-columns: minmax(0, 1fr); } }
.ops-due { margin: -0.25rem 0 0.5rem; color: var(--muted); }
.ops-asw { margin: 0 0 0.75rem; }
.ops-tabs { display: flex; flex-wrap: wrap; gap: 0 0.25rem; border-bottom: 1px solid var(--rule); margin-bottom: 0.25rem; }
.ops-tabs a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.5rem 0.875rem; color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent; font-weight: 500; }
.ops-tabs a:hover { color: var(--fg); }
.ops-tabs a[aria-current="page"] { color: var(--fg); font-weight: 600; border-bottom-color: var(--brand); }
.ops-conv { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.ops-msg { border: 1px solid var(--rule); border-radius: 0.75rem; padding: 0.75rem 1rem; background: var(--surface); }
.ops-msg.support { background: var(--bg-alt); }
.ops-msg.internal { border-style: dashed; border-color: var(--warn-bd); background: var(--warn-bg); }
.ops-msg p { margin: 0.25rem 0 0; overflow-wrap: anywhere; }
.ops-msg .ops-msg-h { margin: 0; display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; font-size: 0.9375rem; }
.ops-why { margin: 0.25rem 0 0; padding-inline-start: 1.1rem; font-weight: 400; font-size: 0.9375rem; }
/* surveys */
.ops-big { margin: 0; font-size: 1.125rem; } .ops-big b { font-size: 2rem; font-variant-numeric: tabular-nums; }
.ops-modes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.ops-modes li { border: 1px solid var(--rule); border-radius: 0.625rem; padding: 0.625rem 0.75rem; display: grid; gap: 0.25rem; }
.ops-modes li.on { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.ops-quotes { margin: 0; padding-inline-start: 1.1rem; display: grid; gap: 0.375rem; }
.ops-quotes li { font-style: italic; }
fieldset.choice.panel { padding: 1.125rem 1.25rem; border: 1px solid var(--rule); }
/* Looking ahead */
.ops-looks { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.ops-looks li { border-top: 1px solid var(--rule); padding-top: 0.875rem; }
.ops-looks li:first-child { border-top: 0; padding-top: 0; }
.ops-look-t { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; }
.ops-looks .small { margin: 0.25rem 0 0; }
.ops-ah-note { margin-bottom: 1.25rem; }
/* Learn insanONE */
.ops-tr summary { cursor: pointer; font-size: 0.875rem; color: var(--muted); }
.ops-tr ol { margin: 0.375rem 0 0; padding-inline-start: 1.2rem; font-size: 0.9375rem; display: grid; gap: 0.25rem; }
.ops-guide { position: fixed; z-index: 60; inset-block-end: 1rem; inset-inline-end: 1rem; width: min(24rem, calc(100vw - 2rem)); max-height: 60vh; overflow: auto; background: var(--surface); color: var(--fg); border: 2px solid var(--brand); border-radius: 1rem; padding: 1rem 1.125rem; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); display: grid; gap: 0.5rem; }
.ops-guide h2 { font-size: 1.0625rem; margin: 0; }
.ops-guide p { margin: 0; }
.ops-guide .ops-guide-k { font-size: 0.8125rem; color: var(--muted); font-weight: 600; }
.ops-guide .row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
body.ops-walking #main { padding-bottom: 16rem; }
.ops-practice { background: #c2410c; color: #fff; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.5rem 1rem; border-bottom: 4px solid #7c2d12; }
.ops-practice p { margin: 0; }
.ops-practice .row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ops-practice .ops-pb { font: inherit; font-weight: 600; min-height: 2.5rem; padding: 0.25rem 0.875rem; border-radius: 999px; border: 2px solid #fff; background: transparent; color: #fff; cursor: pointer; }
.ops-practice .ops-pb:hover { background: #fff; color: #7c2d12; }
.ops-practice .ops-pb:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
:root[data-mode="contrast"] .ops-practice { background: #000; color: #ffff00; border-bottom-color: #ff8c00; border-top: 4px solid #ff8c00; }
:root[data-mode="contrast"] .ops-practice .ops-pb { color: #ffff00; border-color: #ffff00; }
@media print { .ops-guide, .ops-practice { display: none !important; } }
.ops-msg .status, .ops-sp-grid .status { white-space: normal; }

/* ---- version 91: ORG ---- */
/* ---------- v91 organisation charts and snapshots (ORG-22) ---------- */
.o9-grid { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: 1rem; margin-top: 1rem; align-items: start; }
@container page (max-width: 60rem) { .o9-grid { grid-template-columns: minmax(0, 1fr); } }
.o9-chart { min-width: 0; }
.o9-side .o9-fields { border: 0; margin: 0; padding: 0; display: grid; gap: .5rem; }
.o9-side .o9-fields legend { font-weight: 700; margin-bottom: .5rem; padding: 0; }
.o9-side > * + * { margin-top: .75rem; }
.o9-bar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; justify-content: space-between; margin-top: 1rem; }
.o9-bar .field { margin: 0; }
.o9-start, .o9-dest, .o9-cmp { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: flex-end; }
.o9-dest { margin-top: 1rem; }
.o9-cmp { margin-top: 1rem; }
.o9-cmp .field, .o9-start .field, .o9-dest .field { margin: 0; }
.o9-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.o9-tools .small { flex: 1 1 14rem; }
.o9-scroll { overflow-x: auto; padding: .25rem .25rem 1rem; }
.o9-scroll:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.o9-note { display: flex; gap: .5rem; align-items: flex-start; font-size: .875rem; color: var(--fg); background: var(--bg-alt); border-inline-start: 3px solid var(--warn-fg, var(--brand)); padding: .5rem .75rem; border-radius: .375rem; margin: .75rem 0 0; }
.o9-note .gl { width: 1rem; height: 1rem; flex: none; margin-top: .15rem; }
.o9-under { margin-top: 1rem; align-items: start; }
.o9-acts { display: flex; gap: .75rem; justify-content: flex-end; flex-wrap: wrap; margin-top: 1rem; }

/* the tree: top-down with connecting lines on a wide screen */
.o9-tree, .o9-tree ul { list-style: none; margin: 0; }
.o9-tree { padding: 0; }
.o9-tree { display: flex; justify-content: center; gap: 1rem; width: max-content; min-width: 100%; }
.o9-li { position: relative; display: flex; flex-direction: column; align-items: center; flex: none; }
.o9-g { display: flex; justify-content: center; position: relative; padding-top: 1.25rem; width: max-content; }
.o9-g[hidden] { display: none; }
.o9-g::before { content: ""; position: absolute; top: 0; inset-inline-start: 50%; height: 1.25rem; border-inline-start: 1px solid var(--muted); }
.o9-g > .o9-li { padding: 1.25rem .375rem 0; }
.o9-g > .o9-li::before, .o9-g > .o9-li::after { content: ""; position: absolute; top: 0; inset-inline-end: 50%; width: 50%; height: 1.25rem; border-top: 1px solid var(--muted); }
.o9-g > .o9-li::after { inset-inline-end: auto; inset-inline-start: 50%; border-inline-start: 1px solid var(--muted); }
.o9-g > .o9-li:only-child::before, .o9-g > .o9-li:only-child::after { display: none; }
.o9-g > .o9-li:only-child { padding-top: 0; }
.o9-g > .o9-li:first-child::before, .o9-g > .o9-li:last-child::after { border: 0 none; }
.o9-g > .o9-li:last-child::before { border-inline-end: 1px solid var(--muted); }
/* a team opens as a list under its box */
.o9-g.o9-list { display: block; padding: .5rem 0 0; min-width: 14rem; max-width: 18rem; }
.o9-g.o9-list::before { height: .5rem; }
.o9-g.o9-list > .o9-li { padding: 0; align-items: stretch; }
.o9-g.o9-list > .o9-li::before, .o9-g.o9-list > .o9-li::after { display: none; }
.o9-g.o9-list > .o9-li + .o9-li { margin-top: -1px; }
.o9-g.o9-list .o9-g.o9-list { padding-inline-start: .75rem; }
.o9-g.o9-list .o9-g.o9-list::before { display: none; }

.o9-box { display: flex; gap: .5rem; align-items: flex-start; box-sizing: border-box; width: 13.5rem; padding: .5rem .625rem; background: var(--surface); color: var(--fg); border: 1px solid var(--control); border-radius: .625rem; text-align: start; font-size: .8125rem; line-height: 1.35; text-decoration: none; cursor: default; }
.o9-box[aria-expanded] { cursor: pointer; }
a.o9-box { cursor: pointer; }
a.o9-box .o9-t { text-decoration: underline; text-underline-offset: 2px; }
.o9-box:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.o9-box[aria-expanded="true"] { border-color: var(--brand); }
.o9-bt { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.o9-t { font-weight: 700; font-size: .875rem; overflow-wrap: anywhere; }
.o9-s { color: var(--muted); overflow-wrap: anywhere; }
.o9-tag { margin-top: .25rem; }
.o9-h { margin-top: .25rem; font-weight: 600; color: var(--brand); }
.o9-av { width: 2.25rem; height: 2.25rem; font-size: .8125rem; flex: none; }
.o9-k-team { background: var(--bg-alt); }
.o9-k-member { width: 100%; border-radius: 0; padding: .375rem .625rem; }
.o9-list > .o9-li > .o9-k-team { width: 100%; border-radius: 0; }
.o9-vac { border-style: dashed; background: var(--bg-alt); }
.o9-vac .o9-t { color: var(--muted); }
:root[data-mode="contrast"] .o9-h { color: var(--fg); text-decoration: underline; }

/* a phone: the same tree as an indented list */
@container page (max-width: 45rem) {
  .o9-tree { display: block; width: auto; min-width: 0; }
  .o9-li { display: block; }
  .o9-g { width: auto; }
  .o9-g, .o9-g.o9-list { display: block; padding: .375rem 0 0; padding-inline-start: .75rem; margin-inline-start: .75rem; border-inline-start: 1px solid var(--muted); min-width: 0; max-width: none; }
  .o9-g[hidden] { display: none; }
  .o9-g::before, .o9-g > .o9-li::before, .o9-g > .o9-li::after { display: none; }
  .o9-g > .o9-li, .o9-g > .o9-li:only-child { padding: 0 0 .375rem; }
  .o9-g.o9-list > .o9-li { padding: 0; }
  .o9-box { width: 100%; }
  .o9-tree > .o9-li + .o9-li { margin-top: .5rem; }
}

/* moving a unit */
.o9-ba, .o9-ba ul { list-style: none; margin: 0; padding: 0; }
.o9-ba ul { padding-inline-start: 1.25rem; border-inline-start: 1px solid var(--muted); margin-inline-start: .375rem; }
.o9-ba li { padding: .2rem 0; }
.o9-ba del { color: var(--muted); }
.o9-ba ins { text-decoration: none; }
.o9-wc { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: .5rem; }
.o9-see { display: inline; }
.o9-see summary { display: inline; cursor: pointer; color: var(--brand); text-decoration: underline; }
:root[data-mode="contrast"] .o9-see summary { color: var(--fg); }

/* snapshots */
.o9-snap { margin-top: 1rem; }
.o9-ind { display: inline-block; padding-inline-start: calc(var(--d, 0) * 1rem); }
.o9-gone th, .o9-gone td { color: var(--muted); }
.o9-names button { min-height: 2.75rem; }

@media print {
  body:has(.o9-grid) .o9-side, body:has(.o9-grid) .o9-tools { display: none; }
  .o9-grid { grid-template-columns: 1fr; }
  .o9-scroll { overflow: visible; }
}

/* ---- version 91: CLM ---- */
/* ---------- V91 CLM: claims and overtime rules (ExpLimitDeadline, OtLine, OtPremiums) ---------- */
.ts-grid.clm-ts { grid-template-columns: minmax(11rem, 1.3fr) minmax(12.5rem, 1.2fr) minmax(12.5rem, 1.2fr) 6rem; }
.ts-grid.clm-ts.ts-asg { grid-template-columns: minmax(10rem, 1.2fr) minmax(10rem, 1.1fr) minmax(12.5rem, 1.2fr) minmax(12.5rem, 1.2fr) 6rem; }
@container page (max-width: 62rem) {
  .ts-grid.clm-ts, .ts-grid.clm-ts.ts-asg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ts-grid.clm-ts .ts-x { grid-column: 1 / -1; }
  .ts-line + .ts-line .ts-grid.clm-ts label { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; min-height: 1.5rem; }
}
@container page (max-width: 30rem) { .ts-grid.clm-ts, .ts-grid.clm-ts.ts-asg { grid-template-columns: minmax(0, 1fr); } }
.clm-note { color: var(--fg); max-width: 34rem; }
.clm-note:empty { min-height: 0; }
.clm-hrs { margin: .25rem 0; color: var(--muted); }
.clm-hrs b { color: var(--fg); }
.clm-hp { font-weight: 600; margin: .625rem 0 .25rem; }
.clm-parts { list-style: none; margin: 0; padding: 0; max-width: 34rem; }
.clm-parts li { display: flex; justify-content: space-between; gap: 1rem; padding: .375rem 0; border-top: 1px solid var(--rule); }
.clm-parts li:last-child { border-bottom: 1px solid var(--rule); }
.clm-parts b { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.clm-err { margin: .375rem 0 0; padding: .625rem .875rem; border-inline-start: 3px solid var(--bad-fg, #b91c1c); background: var(--bad-bg, #fef2f2); border-radius: .375rem; color: var(--fg); }
.clm-err p { margin: 0; }
.clm-err b { color: var(--bad-fg, #b91c1c); }
.clm-late { margin-top: .5rem; }
.clm-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.clm-card { border: 1px solid var(--rule); border-radius: .5rem; padding: .875rem 1rem; background: var(--surface); }
.clm-card h3 { margin: 0; font-size: 1rem; }
.clm-card .row { margin-top: .75rem; }
.clm-h3 { font-size: 1rem; margin: 1.25rem 0 .25rem; }
.clm-xn { margin: .75rem 0 0; }
.clm-xlate:empty { display: none; }
.clm-xlate.on { border-inline-start: 3px solid var(--warn-fg, #b45309); padding-inline-start: .625rem; color: var(--fg); }
.clm-kvt { width: 100%; }
.clm-kvt th[scope="row"] { width: 9rem; vertical-align: top; font-weight: 400; color: var(--muted); }
.clm-kvt td { vertical-align: top; }
.clm-inl { display: inline-flex; align-items: center; gap: .375rem; flex-wrap: wrap; }
.clm-pre { color: var(--muted); }
.clm-num { width: 8rem; }
.clm-num.s { width: 5rem; }
.clm-pos { margin: .5rem 0 0; }
.clm-dlt td, .clm-dlt th { vertical-align: top; }
.clm-big { font-size: 1.0625rem; margin: .25rem 0 .5rem; }
.clm-g > .panel { margin: 0; }
.clm-pg { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@container page (max-width: 56rem) { .clm-pg { grid-template-columns: minmax(0, 1fr); } }
.clm-tag { display: inline-block; font-size: .8125rem; }
.clm-tag.law { border: 1px solid var(--rule); border-radius: 999px; padding: .0625rem .5rem; background: var(--bg-alt); font-weight: 600; }
.clm-rt td.acts { white-space: nowrap; text-align: end; }
.clm-seg { border: 0; padding: 0; margin: 0 0 .5rem; display: grid; gap: .5rem; }
.clm-seg label { display: flex; gap: .5rem; align-items: center; padding: .5rem .75rem; border: 1px solid var(--control); border-radius: .5rem; cursor: pointer; }
.clm-seg label:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); font-weight: 600; }
.clm-bf { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--rule); }
.clm-bf h3 { font-size: 1rem; margin: 0 0 .5rem; }
.clm-bfg { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.clm-try { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.clm-tres { margin-top: .75rem; }
.clm-tres p { margin: .25rem 0 .5rem; }
.clm-nw, .clm-tag.law { white-space: nowrap; }
.clm-inl.field, .clm-f { margin: 0; }
.clm-inl.field input { width: 8rem; }
.clm-inl.field input.s { width: 5rem; }
.clm-f .clm-l { display: block; font-weight: 400; margin-bottom: .375rem; }
.clm-f select, .clm-pos select { width: 100%; max-width: 18rem; }

/* ---- version 92: NAV ---- */
/* ---------- version 92 · menus and tile pages, dotted lines (NAV) ---------- */
:root { --nv-dot: #6d28d9; }
:root[data-mode="dark"] { --nv-dot: #c4b5fd; }
:root[data-mode="contrast"] { --nv-dot: #00ffff; }

/* the menu: single words, a rule between the groups, a chevron on the words that open a tile page */
.sn-list > ul + ul { border-top: 1px solid var(--rule); margin-top: 0.5rem; padding-top: 0.5rem; }
.sn-list > .sn-h + ul { border-top: 0; margin-top: 0; padding-top: 0; }
#side-nav a.sn-a[data-route^="nav/"]::after, #site-menu a[data-route^="nav/"]::after { content: "›"; margin-inline-start: auto; padding-inline-start: 0.5rem; color: var(--muted); font-size: 1.125rem; line-height: 1; }
[dir="rtl"] #side-nav a.sn-a[data-route^="nav/"]::after, [dir="rtl"] #site-menu a[data-route^="nav/"]::after { content: "‹"; }
#side-nav a.sn-a[data-route^="nav/"].has-ct::after { margin-inline-start: 0.375rem; }
body.sn-collapsed #side-nav a.sn-a[data-route^="nav/"]::after { content: none; }

/* tile pages */
.nv-tiles { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: 0.875rem; }
.nv-tiles > li { display: flex; min-width: 0; }
.nv-tile { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.3125rem; min-width: 0; padding: 1rem 1.125rem 1.125rem; background: var(--surface); color: var(--fg); border: 1px solid var(--rule); border-radius: 0.875rem; text-decoration: none; }
.nv-tile:hover { border-color: var(--brand); }
.nv-tile:hover .nv-tt { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.nv-tile:focus-visible { outline: 3px solid var(--focus, var(--brand)); outline-offset: 2px; }
.nv-tile .icon.sm { width: 2.25rem; height: 2.25rem; margin-bottom: 0.25rem; }
.nv-tt { font-weight: 600; font-size: 1.0625rem; line-height: 1.3; overflow-wrap: anywhere; }
.nv-td { color: var(--muted); font-size: 0.9375rem; line-height: 1.4; overflow-wrap: anywhere; }
.nv-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.375rem; }
.nv-chips .status { white-space: normal; }
.nv-n { color: var(--fg); background: var(--bg-alt); border-color: var(--rule); }
:root[data-mode="contrast"] .nv-tile { border-color: var(--fg); }
:root[data-mode="contrast"] .nv-tile:hover .nv-tt, :root[data-mode="contrast"] .nv-tile:focus-visible .nv-tt { color: var(--fg); }
:root[data-mode="contrast"] .nv-n { color: #ffff00; background: #000; border-color: #ffff00; }
.nv-sh { font-size: 1.0625rem; font-weight: 600; margin: 1.25rem 0 0.75rem; }
.nv-pick { margin: 0; }
.nv-pick .field { margin: 0; min-width: min(100%, 16rem); }
.nv-pick select { width: 100%; }
.ptitle .row:has(> .nv-pick) { align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; }
button.nv-tile { font: inherit; text-align: start; cursor: pointer; width: 100%; }

/* company pages: Home / Word / Page, with the company beside the trail */
.nv-crow { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; }
.nv-crow .crumbs { min-width: 0; }
.nv-cotag { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--muted); margin-bottom: 0.5rem; }
.nv-cotag .gl { width: 1rem; height: 1rem; }
.nv-seg { margin: 0 0 1rem; }
.nv-seg a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.875rem; color: var(--fg); text-decoration: none; border-inline-end: 1px solid var(--rule); }
.nv-seg a:last-child { border-inline-end: 0; }
.nv-seg a[aria-current="page"] { background: var(--brand); color: var(--on-brand, #fff); font-weight: 600; }

/* dotted lines on the people chart */
.nv-dbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; margin: 0 0 0.75rem; }
.nv-dsw { margin: 0; }
.nv-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0; padding: 0; font-size: 0.875rem; color: var(--fg); }
.nv-legend li { display: inline-flex; align-items: center; gap: 0.5rem; }
.nv-k-solid, .nv-k-dot { display: inline-block; width: 2rem; height: 0; border-top: 2px solid var(--muted); }
.nv-k-dot { border-top: 2px dashed var(--nv-dot); }
.nv-dscroll { position: relative; z-index: 0; }
.nv-dsvg { position: absolute; top: 0; left: 0; max-width: none; max-height: none; pointer-events: none; z-index: -1; overflow: visible; }
.nv-dpath { fill: none; stroke: var(--nv-dot); stroke-width: 2; stroke-dasharray: 6 5; }
.nv-dpath.nv-hi { stroke-width: 3.5; }
.o9-box.nv-dsrc { border: 2px dashed var(--nv-dot); }
.o9-box.nv-hi { box-shadow: 0 0 0 3px var(--nv-dot); }
.nv-ds { color: var(--nv-dot) !important; font-weight: 600; }
.nv-doff .nv-ds { display: none; }
.nv-doff .o9-box.nv-dsrc { border: 1px solid var(--control); }
.nv-doff .o9-box.nv-hi { box-shadow: none; }
.o9-g.o9-list > .o9-li > .o9-box.nv-dsrc { position: relative; z-index: 2; }
.nv-dpanel { margin-top: 1rem; }
.nv-dpanel header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 0.5rem 1rem; }
.nv-dpick .field { min-width: min(100%, 14rem); }
@media print { .nv-dsvg { display: none; } }
/* a phone: the tiles become a compact list, icon beside the words */
@container page (max-width: 36rem) {
  .nv-tiles { grid-template-columns: minmax(0, 1fr); gap: 0.625rem; }
  .nv-tile { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: 0.75rem; row-gap: 0.125rem; align-items: start; padding: 0.75rem 0.875rem; }
  .nv-tile .icon.sm { grid-row: 1 / span 3; margin: 0; }
  .nv-chips { margin-top: 0.25rem; }
  .ptitle .row:has(> .nv-pick) { width: 100%; }
  .nv-pick { flex: 1 1 100%; }
}
#site-menu [data-cogroup] { display: none; }