/* SFKL KPI System. The colours are set once, in the "brown & cream theme" block near the end: dark chocolate sidebar, ivory and cream surfaces, burnt-orange actions; green = done, amber = pending, red = problems. */
:root {
  --orange: #e36c0a; --orange-dark: #b9560a; --orange-soft: #fdf1e7; --orange-line: #f3d6bd;
  --ink: var(--ink); --ink-2: #4b4f55; --muted: var(--muted); --line: #e3e4e6; --line-2: #d3d5d8; --bg: #f6f6f5; --card: #fff; --head: var(--head);
  --yes: #e5f1de; --yes-ink: #2e6a1d; --warn: #fff1cc; --warn-ink: #855700; --no: #fbe1dc; --no-ink: #a12a14; --plain: #eeeff1;
  --r: 8px; --r-sm: 6px; --shadow: none; /* surfaces are separated by borders, not shadows */
  --side-bg: #1d2125; --side-ink: #c9cdd2; --side-dim: #8b9097; --side-line: #33383e; --danger: #b42318;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --side: 232px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 14px/1.5 "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; color: var(--ink); background: var(--bg); }
a { color: var(--orange-dark); }
h1 { font-size: 22px; line-height: 1.25; margin: 0 0 var(--s1); letter-spacing: -.2px; }
h2 { font-size: 16px; margin: var(--s6) 0 var(--s3); color: var(--ink); }
h3 { font-size: 14px; margin: 0; }
.lead { color: var(--muted); max-width: 860px; margin: 0; }
.muted { color: var(--muted); font-size: 13px; }
code { background: var(--plain); padding: 1px 5px; border-radius: 4px; word-break: break-all; font-size: 12px; }

/* ---------- application shell: sidebar on desktop, top bar on small screens ---------- */
.side { position: fixed; inset: 0 auto 0 0; width: var(--side); background: var(--card); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4) var(--s3); z-index: 5; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; padding: 0 var(--s2) var(--s2); }
.brand img { width: 36px; height: 36px; flex: none; }
.brand span { display: grid; line-height: 1.2; } .brand b { color: var(--orange); font-size: 15px; } .brand small { color: var(--muted); font-size: 12px; }
nav.nav { display: grid; gap: 2px; }
nav.nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-sm); color: var(--ink-2); text-decoration: none; font-weight: 600; border-left: 3px solid transparent; }
nav.nav a:hover { background: var(--head); color: var(--ink); }
nav.nav a.on { background: var(--orange-soft); color: var(--orange-dark); border-left-color: var(--orange); }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.side-month { font-size: 12px; color: var(--muted); padding: 0 10px; } .side-month b { color: var(--ink); display: block; font-size: 13px; }
.side-tools { display: grid; gap: 6px; margin-top: auto; padding: 0 var(--s1); } .side-tools > * { text-align: center; }
.side-note { font-size: 11px; color: var(--muted); margin: 0; padding: var(--s2) 10px 0; border-top: 1px solid var(--line); line-height: 1.4; }
main { margin-left: var(--side); max-width: calc(1240px + var(--side)); padding: var(--s5) var(--s6) 60px; }
.mgr-top { display: none; }
body.mgr .side { display: none; }
body.mgr .mgr-top { display: flex; align-items: center; gap: var(--s4); justify-content: space-between; background: var(--card); border-bottom: 3px solid var(--orange); padding: var(--s2) var(--s5); position: sticky; top: 0; z-index: 5; }
body.mgr .mgr-top .brand { padding: 0; } body.mgr .mgr-top .side-note { border: 0; padding: 0; }
body.mgr main { margin: 0 auto; max-width: 1100px; }
@media (max-width: 900px) {
  .side { position: sticky; top: 0; inset: auto; width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4); border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { padding: 0; } .brand small { display: none; }
  nav.nav { display: flex; order: 3; width: 100%; overflow-x: auto; gap: 4px; }
  nav.nav a { white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; border-radius: 0; padding: 8px 10px; }
  nav.nav a.on { border-bottom-color: var(--orange); }
  .side-month, .side-note { display: none; }
  .side-tools { margin: 0 0 0 auto; display: flex; padding: 0; }
  main { margin-left: 0; padding: var(--s4) var(--s4) 48px; }
  body.mgr .mgr-top { padding: var(--s2) var(--s4); } body.mgr .mgr-top .side-note { display: none; }
}

/* ---------- page heading, cards, metrics ---------- */
.page-head { display: flex; gap: var(--s4); align-items: flex-end; justify-content: space-between; flex-wrap: wrap; margin-bottom: var(--s4); }
.chip { display: inline-flex; gap: 6px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.chip b { color: var(--ink); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3) var(--s4); margin-bottom: var(--s3); box-shadow: var(--shadow); }
.card.row { display: flex; gap: var(--s4); }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s3); margin-bottom: var(--s2); }
.metric { display: grid; gap: 2px; align-content: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3) var(--s4); color: inherit; text-decoration: none; box-shadow: var(--shadow); }
a.metric:hover { border-color: var(--orange); }
.metric .n { font-size: 24px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.metric .t { font-weight: 600; font-size: 13px; } .metric .muted { font-size: 12px; }
.metric.todo .n { color: var(--orange-dark); } .metric.done .n { color: var(--yes-ink); }
.metrics.small .metric { padding: var(--s2) var(--s3); } .metrics.small .metric .n { font-size: 18px; }

/* ---------- tables ---------- */
.wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; background: var(--card); }
th, td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
th { background: var(--head); color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
tr:last-child > td { border-bottom: 0; }
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tr.click { cursor: pointer; } tr.click:hover > td, tr.click:focus-visible > td { background: var(--row-hover); }
tr.click:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
table.tt td, table.tt th { font-size: 12px; padding: 4px 8px; } table.tt tr.skip td { color: var(--muted-2); }
table.depts td { vertical-align: middle; } table.depts .bar { margin-top: 4px; max-width: 160px; }
table.depts td > a { color: var(--ink); text-decoration: none; } table.depts td > a:hover { color: var(--orange-dark); text-decoration: underline; }
td.out { font-size: 13px; } td.out div { white-space: nowrap; }

/* ---------- status pills ---------- */
.pill { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.6; }
.pill.ok, .pill.Agreed, .pill.lvl5, .pill.lvl4 { background: var(--yes); color: var(--yes-ink); }
.pill.warn, .pill.Suggested, .pill.Edited, .pill.lvl2 { background: var(--warn); color: var(--warn-ink); }
.pill.bad, .pill.lvl1 { background: var(--no); color: var(--no-ink); }
.pill.kind, .pill.plain, .pill.auto, .pill.lvl3, .pill.tag { background: var(--plain); color: var(--ink-2); }
.pill.auto { margin-top: 3px; }

/* ---------- controls ---------- */
button, .btn { background: var(--orange); color: #fff; border: 1px solid var(--orange); border-radius: var(--r-sm); padding: 7px 14px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block; line-height: 1.3; }
button:hover, .btn:hover { background: var(--orange-dark); border-color: var(--orange-dark); }
button.ghost, .btn.ghost { background: var(--card); color: var(--ink); border-color: var(--line-2); }
button.ghost:hover, .btn.ghost:hover { background: var(--orange-soft); border-color: var(--orange); }
button.ghost.danger { color: #a3341f; }
button.ghost.danger:hover { background: #fdecea; border-color: #d9826f; }
/* importing the staff list: check departments and roles before saving */
.imp-prev { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.imp-prev h3 { font-size: 14px; margin: 14px 0 6px; }
.imp-prev select { max-width: 340px; }
.deptpick { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; }
.deptpick label { display: inline-flex; gap: 6px; align-items: center; }
tr.norole td { background: var(--warn-soft); }
#jdBox ul { margin: 4px 0; padding-left: 18px; }
/* HR's comment on a calculation they did not agree, and the box to write it */
.hrnote { margin-top: 4px; font-size: 12px; padding: 4px 8px; border-radius: var(--r-sm); background: var(--warn); color: var(--warn-ink); }
.hrnote.bad { background: var(--no); color: var(--no-ink); }
.reject { display: inline-flex; gap: 6px; align-items: center; }
.reject input { min-width: 260px; }
/* Rename / Remove on a department or role */
.manage { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 var(--s3); }
.page-head .manage { margin: 0; }
.manage [hidden] { display: none; }
.manage .renbox { display: inline-flex; gap: 6px; align-items: center; }
.manage .renbox input { min-width: 240px; }
button.small, .btn.small { padding: 3px 10px; font-size: 12px; }
button:disabled { opacity: .55; cursor: default; }
button:focus-visible, .btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
label.btn:focus-within { outline: 2px solid var(--orange); outline-offset: 1px; }
button.link { background: none; border: 0; padding: 0; color: var(--orange-dark); font-weight: 600; font-size: 13px; text-decoration: underline; cursor: pointer; }
button.link:hover { background: none; color: var(--ink); }
input, select, textarea { font: inherit; padding: 5px 8px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--card); color: var(--ink); }
textarea { width: 100%; min-height: 40px; resize: vertical; font-size: 13px; }
label { font-size: 13px; }
.row { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.row.nowrap { flex-wrap: nowrap; gap: 4px; }
.field { display: grid; gap: 2px; font-size: 12px; color: var(--muted); font-weight: 600; }
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s2); padding: 4px 0; }
.form label { font-size: 12px; color: var(--muted); display: block; font-weight: 600; }
.form label input, .form label select, .form label textarea { width: 100%; margin-top: 2px; font-weight: 400; }
.hint { background: var(--orange-soft); border: 1px solid var(--orange-line); border-radius: var(--r-sm); padding: var(--s2) var(--s3); font-size: 13px; margin: var(--s2) 0; }
.hint.good { background: var(--yes); border-color: #cde3c0; } .hint.bad { background: var(--no); border-color: #f1c3b9; }
ul.issues { margin: 6px 0 0; padding-left: 18px; }
ul.issues li.error { color: var(--no-ink); } ul.issues li.warn { color: var(--warn-ink); }
details.add, details.how { margin: var(--s3) 0; }
details.add > summary, details.how > summary { cursor: pointer; font-weight: 600; color: var(--orange-dark); }
details.add[open] { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3) var(--s4); }
details.how p, details.how li { max-width: 880px; }
details.inline { display: inline-block; } details.inline summary { cursor: pointer; color: var(--orange-dark); font-weight: 600; font-size: 13px; }
details.inline[open] summary { display: inline; margin-right: 6px; }
.bar { height: 6px; background: var(--track); border-radius: 4px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--orange); border-radius: 4px; }
.go { color: var(--orange-dark); font-weight: 600; white-space: nowrap; }
#toast { position: fixed; bottom: 20px; right: 20px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r); opacity: 0; transition: opacity .2s; pointer-events: none; max-width: 440px; z-index: 10; }
#toast.show { opacity: .96; } #toast.bad { background: var(--no-ink); }

/* ---------- breadcrumbs, the five stages, departments, roles ---------- */
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.crumbs a { color: var(--muted); text-decoration: none; } .crumbs a:hover { color: var(--orange-dark); text-decoration: underline; }
.crumbs span { margin: 0 4px; } .crumbs b { color: var(--ink); font-weight: 600; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s3); }
.step-card { position: relative; display: grid; gap: 6px; align-content: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3) var(--s3) var(--s3) 52px; text-decoration: none; color: inherit; box-shadow: var(--shadow); }
.step-card:hover { border-color: var(--orange); }
.step-card .num { position: absolute; left: 14px; top: 12px; width: 26px; height: 26px; border-radius: 50%; background: var(--orange-soft); color: var(--orange-dark); font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.step-card.done .num { background: var(--yes); color: var(--yes-ink); }
.step-card b { font-size: 14px; line-height: 1.3; }
.step-card .go { font-size: 13px; }
.dept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s3); }
.dept-card { display: grid; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4); text-decoration: none; color: inherit; box-shadow: var(--shadow); }
.dept-card:hover { border-color: var(--orange); } .dept-card > b { font-size: 16px; }
.role-list { display: grid; gap: var(--s2); margin-top: var(--s3); }
.role-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s4); align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3) var(--s4); text-decoration: none; color: inherit; box-shadow: var(--shadow); }
.role-row:hover { border-color: var(--orange); }
.role-row .who { display: grid; gap: 2px; min-width: 0; } .role-row .who b { font-size: 15px; }
.role-row .facts { display: flex; gap: var(--s5); }
.role-row .facts > span { display: grid; justify-items: center; gap: 2px; text-align: center; min-width: 96px; }
.role-row .facts small { color: var(--muted); font-size: 11px; }
.title-row { display: flex; gap: var(--s3); align-items: flex-end; justify-content: space-between; flex-wrap: wrap; margin-bottom: var(--s3); }
.checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s3); margin-bottom: var(--s3); }
.checklist > div { display: grid; gap: 3px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: var(--r); padding: 10px 14px; box-shadow: var(--shadow); }
.checklist > div span { font-size: 13px; color: var(--muted); }
.checklist .ok { border-left-color: var(--green); } .checklist .warn { border-left-color: var(--amber); } .checklist .bad { border-left-color: var(--no-ink); }

/* ---------- KPI cards ---------- */
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: var(--s3); overflow: hidden; box-shadow: var(--shadow); }
.kpi .head { display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: var(--head); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.kpi .head b { font-size: 15px; }
.kpi .head .w { margin-left: auto; font-size: 17px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi .head .w small { font-size: 11px; font-weight: 600; color: var(--muted); margin-right: 4px; text-transform: uppercase; letter-spacing: .04em; }
.kpi .head .kno, .mk-head .kno { width: 26px; height: 26px; border-radius: 50%; background: var(--orange-soft); color: var(--orange-dark); font-weight: 700; display: inline-grid; place-items: center; font-size: 13px; flex: none; }
.kpi .meta { display: grid; gap: var(--s2); padding: 10px 14px; font-size: 13px; border-bottom: 1px solid var(--line); }
.kpi .meta .line { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; }
.kpi .meta .lbl, .src .lbl { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
ul.calc-sum { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
ul.calc-sum li { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; }
.kpi .wrap { border: 0; border-radius: 0; box-shadow: none; }
.kpi td { font-size: 13px; }
.kpi td.calc .f { font-weight: 600; } .kpi td.calc .cnt { color: var(--ink-2); }
.kpi .note { color: var(--warn-ink); font-size: 12px; margin-top: 3px; }
.kpi tr.editing td { background: var(--orange-soft); }
/* editing a measure: numbered plain questions, one per line */
.mform { counter-reset: q; display: grid; gap: 12px; max-width: 760px; padding: 4px 0 8px; }
.mform .q { counter-increment: q; display: grid; gap: 4px; padding-left: 30px; position: relative; }
.mform .q::before { content: counter(q); position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.mform .q[hidden] { display: none; }
.mform .q > b { font-size: 13px; }
.mform .ratio { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.mform .ratio > span { font-size: 13px; font-weight: 600; color: var(--muted); }
.mform .ratio[hidden], .mform .calc[hidden] { display: none; }
.mform .calc { font-size: 12px; }
.mform .goal { display: grid; grid-template-columns: minmax(0, 1fr) 110px 90px; gap: 8px; }
.mform .example { margin: -4px 0 0 30px; padding: 8px 12px; background: var(--orange-soft); border: 1px solid var(--orange-line); border-radius: var(--r-sm); font-size: 13px; }
.mform details.kindhelp > summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--orange-dark); margin-top: 2px; }
.mform details.kindhelp p { margin: 6px 0; font-size: 12px; }
.mform .kindhelp table { width: 100%; border-collapse: collapse; font-size: 12px; background: var(--card); border: 1px solid var(--line); }
.mform .kindhelp th { text-align: left; font-size: 11px; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); background: var(--head); }
.mform .kindhelp td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.mform .kindhelp tbody tr { cursor: pointer; }
.mform .kindhelp tbody tr:hover td { background: var(--orange-soft); }
.mform .kindhelp tbody tr.on td { background: var(--orange-soft); }
.mform .kindhelp tbody tr.on td:first-child { box-shadow: inset 3px 0 0 var(--orange); }
@media (max-width: 600px) { .mform .kindhelp table { display: block; overflow-x: auto; } }
.mform details.edopt > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--orange-dark); margin-left: 30px; }
.mform details.edopt[open] > summary { margin-bottom: 6px; }
.mform details.edopt .form { margin-left: 30px; }
@media (max-width: 600px) { .mform .ratio { grid-template-columns: 1fr; } .mform .goal { grid-template-columns: 1fr 1fr; } .mform .goal select { grid-column: 1 / -1; } }
.kpi .foot { padding: 6px 14px 10px; }
.kpi .kform { padding: 12px 14px; }
details.more > summary { cursor: pointer; padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--orange-dark); }
details.more[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.src { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.src select, .src input { padding: 3px 7px; font-size: 13px; }

/* ---------- Data & Sources ---------- */
nav.subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line-2); margin: 0 0 var(--s4); flex-wrap: wrap; }
nav.subtabs a { padding: 8px 14px; text-decoration: none; color: var(--muted); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; }
nav.subtabs a:hover { color: var(--ink); }
nav.subtabs a.on { color: var(--orange-dark); border-bottom-color: var(--orange); }
h2.step { display: flex; align-items: center; gap: 10px; font-size: 16px; margin: var(--s5) 0 var(--s2); flex-wrap: wrap; }
h2.step > span:first-child { width: 26px; height: 26px; border-radius: 50%; background: var(--orange); color: #fff; display: grid; place-items: center; font-size: 13px; flex: none; }
h2.step small { font-weight: 400; }
.sec { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4); margin-bottom: var(--s4); box-shadow: var(--shadow); display: grid; gap: var(--s3); }
.sec > h2.step { margin: 0; }
.sec .expect { font-size: 13px; color: var(--ink-2); margin: 0; }
/* the month's numbers as a to-do list: one card per KPI */
.todo-head { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: baseline; justify-content: space-between; margin-bottom: var(--s3); }
.todo-k { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--amber); border-radius: var(--r); padding: var(--s3) var(--s4); margin-bottom: var(--s3); box-shadow: var(--shadow); display: grid; gap: var(--s2); }
.todo-k.ok { border-left-color: var(--green); }
.todo-k .top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .todo-k .top b { font-size: 15px; }
.todo-k .kno { width: 26px; height: 26px; border-radius: 50%; background: var(--orange-soft); color: var(--orange-dark); font-weight: 700; display: inline-grid; place-items: center; font-size: 13px; flex: none; }
.todo-k .kv { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 4px 12px; font-size: 13px; }
.todo-k .kv > span:nth-child(odd) { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
.todo-k details.more > summary { padding: 4px 0; }
.todo-k .entry { margin: 6px 0 0; }
@media (max-width: 760px) { .todo-k .kv { grid-template-columns: 1fr; } }
ol.mini { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.entry { margin-bottom: var(--s3); } .entry-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.entry td.fields { white-space: nowrap; } .entry td.fields input { width: 90px; } .entry input.ev { width: 100%; min-width: 200px; }
.entry table.tt td { vertical-align: middle; padding: 6px 8px; }
.entry .unit { color: var(--muted); font-size: 12px; margin-left: 2px; }
a.dl { color: var(--orange-dark); font-weight: 600; font-size: 13px; }

/* ---------- Monthly Scores ---------- */
.flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px; }
.flow div { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--orange); border-radius: var(--r-sm); padding: 7px 10px; font-size: 13px; }
.flow b { display: block; color: var(--ink); } .flow span { color: var(--muted); }
.filters { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: end; }
.filters select { min-width: 150px; max-width: 100%; }
table.sum th .muted-h { font-weight: 400; font-size: 11px; text-transform: none; letter-spacing: 0; }
table.sum > tbody > tr > th { vertical-align: bottom; } table.sum > tbody > tr > th.num { min-width: 80px; white-space: normal; }
table.sum > tbody > tr:not(.detail) > td:first-child { white-space: nowrap; }
table.sum .caret { color: var(--orange-dark); display: inline-block; width: 12px; }
table.sum > tbody > tr.opened > td { background: var(--orange-soft); border-bottom-color: transparent; }
table.sum > tbody > tr.detail > td { background: var(--head); padding: 10px 14px 14px; border-left: 3px solid var(--orange); }
table.sum > tbody > tr.detail .wrap { box-shadow: none; }
.person td.mname { min-width: 190px; } .person td:first-child { min-width: 170px; } .person td:last-child { min-width: 160px; }
.person td.working { font-size: 12px; color: var(--muted); min-width: 220px; }
td.tix { background: var(--head); }
.scorecard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 26px; max-width: 980px; margin: 0 auto; box-shadow: var(--shadow); }
.sc-head { display: flex; align-items: center; gap: 14px; border-bottom: 3px solid var(--orange); padding-bottom: 12px; margin-bottom: 14px; }
.sc-head img { width: 54px; height: 54px; } .sc-head b { color: var(--orange-dark); font-size: 17px; }
.sc-total { margin-left: auto; text-align: right; } .sc-total span { display: block; font-size: 32px; font-weight: 700; color: var(--ink); line-height: 1; }
.sc-total small { color: var(--muted); }
.scorecard table { margin-bottom: 14px; border: 1px solid var(--line); } .sc-info th { width: 110px; }
.scorecard th, .scorecard td { border: 1px solid var(--line); }
.sc-kpis tr.tot td { font-weight: 700; background: var(--head); }
.sc-box { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; margin: 14px 0; } .sc-box .lines { height: 70px; }
.sc-sign { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; }
.sc-sign div { font-size: 12px; color: var(--muted); display: grid; grid-template-columns: 1fr; gap: 26px; }
.sc-sign span { border-bottom: 1px solid var(--muted-2); height: 1px; }
.sc-flag { display: inline-block; margin-bottom: 6px; border: 2px solid var(--warn-ink); color: var(--warn-ink); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 10px; border-radius: var(--r-sm); font-size: 12px; }

/* ---------- manager view ---------- */
.mgr-intro { display: grid; gap: 4px; margin-bottom: var(--s2); }
.mgr-progress { display: grid; gap: 8px; position: sticky; top: 64px; z-index: 3; }
.mgr-progress .bar { height: 10px; }
.mgr-role h2 { font-size: 17px; margin: var(--s5) 0 10px; }
.mk { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--amber); border-radius: var(--r); padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--shadow); display: grid; gap: 8px; }
.mk.answered { border-left-color: var(--green); }
.only-open .mk.answered:not(.needsfix) { display: none; }
/* HR did not agree a calculation: red on the manager's card until it is changed */
.mk.needsfix { border-left-color: var(--no-ink); }
.mk-fix { margin: 4px 0 2px 36px; display: grid; gap: 8px; }
.fix-item { border-radius: var(--r-sm); padding: 10px 12px; font-size: 13px; display: grid; gap: 4px; justify-items: start; }
.fix-item.bad { background: var(--no); border: 1px solid #f1c3b9; }
.fix-item.bad > b { color: var(--no-ink); }
.fix-item.sent { background: var(--yes); border: 1px solid #cde3c0; }
.fix-item .hr-said { font-weight: 600; }
.fix-item .fix-form { width: 100%; background: var(--card); border-radius: var(--r-sm); padding: 8px 10px; margin-top: 4px; }
.mk-head { display: flex; gap: 10px; align-items: center; } .mk-head b { font-size: 15px; }
.mk-head .saved { margin-left: auto; color: var(--yes-ink); font-weight: 700; font-size: 13px; }
.mk-target { margin-left: 36px; }
.mk .q { font-weight: 600; margin-top: 2px; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
button.choice { position: relative; background: var(--card); color: var(--ink); border: 2px solid var(--line-2); border-radius: var(--r); padding: 10px 12px; text-align: left; font-weight: 700; display: grid; gap: 2px; }
button.choice small { font-weight: 400; color: var(--muted); font-size: 12px; }
button.choice:hover { border-color: var(--orange); background: var(--orange-soft); }
button.choice.on { border-color: var(--orange); background: var(--orange-soft); box-shadow: inset 0 0 0 1px var(--orange); }
/* a choice that is not open yet (system / Excel sheet): shown, greyed, not clickable */
button.choice.later, button.choice.later:hover { background: var(--plain); border-style: dashed; border-color: var(--line-2); color: var(--muted-2); cursor: not-allowed; }
button.choice.later small { color: var(--muted-2); }
button.choice.on::before { content: "✓"; color: var(--orange-dark); position: absolute; right: 10px; top: 8px; font-size: 15px; }
.which { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; background: var(--head); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 12px; font-size: 13px; }
.which label { font-weight: 600; display: flex; gap: 8px; align-items: center; } .which input { min-width: 260px; }
.which.sheet { gap: 12px; } .which.after { display: block; }
.mgr-foot { margin-top: var(--s5); }

@media (max-width: 760px) {
  .role-row { grid-template-columns: 1fr; } .role-row .facts { justify-content: space-between; gap: 8px; }
  .kpi .meta .line { grid-template-columns: 1fr; gap: 2px; }
  .page-head { align-items: flex-start; }
  .which input { min-width: 0; width: 100%; }
}
/* ---------- signing in, the signed-in person, and what each role sees ---------- */
body.auth .side, body.auth .mgr-top { display: none !important; }
body.auth main { margin: 0 auto; max-width: 440px; padding-top: 8vh; }
.auth-card { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--orange); border-radius: var(--r); padding: var(--s5); box-shadow: var(--shadow); display: grid; gap: var(--s3); }
.auth-card img { width: 44px; height: 44px; }
.auth-form { display: grid; gap: var(--s3); } .auth-form .field input { width: 100%; } .auth-form button { justify-self: start; }
.me { font-size: 12px; color: var(--muted); padding: var(--s2) 10px 0; border-top: 1px solid var(--line); display: grid; gap: 2px; line-height: 1.4; }
.me b { color: var(--ink); font-size: 13px; } .me > b + span { display: block; }
.me.top { border: 0; padding: 0; display: flex; gap: var(--s4); align-items: center; text-align: right; }
.me.top > span:first-child { display: grid; }
body:not(.can-hr) .hr-only, body:not(.can-admin) .admin-only { display: none !important; }
/* management: view only — the buttons and boxes that change things are not shown */
body.ro #view button:not(.link):not(#print):not(.choice), body.ro #view .manage, body.ro #view details.add, body.ro #view label.btn,
body.ro #view details.inline, body.ro #view .edit-only, body.ro #view .reject, body.ro #view .fix-form { display: none !important; }
body.ro #view .choice { pointer-events: none; }
/* a department manager: role pages are HR's, so role names are plain text */
body.is-mgr a[href^="#role/"] { pointer-events: none; color: inherit; text-decoration: none; }
table.users tr.off td { color: var(--muted); }
table.cantable td.yes { color: var(--yes-ink); font-weight: 600; }
table.cantable th:not(:first-child), table.cantable td:not(:first-child) { text-align: center; }
.passbox code { font-size: 15px; padding: 3px 8px; letter-spacing: .5px; }
.uform fieldset.deptpick { margin: var(--s3) 0; }

.pvbar { position: sticky; top: 0; z-index: 6; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; justify-content: space-between; background: var(--ink); color: #fff; border-radius: var(--r); padding: var(--s2) var(--s4); margin-bottom: var(--s4); font-size: 13px; }
.pvbar button.ghost { background: transparent; color: #fff; border-color: var(--muted); }
body.mgr .pvbar { top: 64px; }
.pvcard { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between; border-left: 3px solid var(--orange); }
/* evidence: the documents behind a KPI's figures */
.evid { margin-top: var(--s3); padding: var(--s3); border: 1px dashed var(--line-2); border-radius: var(--r-sm); background: var(--head); display: grid; gap: 6px; }
.evid.none { border-color: var(--warn-ink); background: var(--warn); }
.evid ul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 4px; } .evid li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.evid .ev-none { color: var(--warn-ink); font-weight: 600; font-size: 13px; }
.evid .ev-add { align-items: end; }
.sc-ev { margin: var(--s3) 0; font-size: 13px; } .sc-ev ul { margin: 4px 0; padding-left: 18px; }
/* People: moving several people under a manager, and the reporting lines tree */
.movebar { position: sticky; top: 8px; z-index: 4; display: grid; gap: 8px; border-left: 3px solid var(--orange); background: var(--orange-soft); }
tr.picked td { background: var(--orange-soft); }
ul.tree, ul.tree ul { list-style: none; margin: 0; padding: 0; }
ul.tree { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3) var(--s4); }
ul.tree ul { margin-left: 14px; padding-left: 14px; border-left: 2px solid var(--line); }
ul.tree li { padding: 3px 0; }
ul.tree summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
ul.tree summary button { padding: 2px 8px; }
ul.tree .who.hit b { background: var(--warn); padding: 0 3px; border-radius: 3px; }
ul.tree.flat { border: 0; padding: 0; } ul.tree.flat li { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
/* a manager's Overview: the next step, then the numbers */
.next-step { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; justify-content: space-between; font-size: 14px; margin: var(--s3) 0; }
table.teamtab td .bar { margin-top: 4px; max-width: 140px; }
/* ========== design foundation (UI/UX pass, 29 Oct 2026) ========== */
/* identity: a charcoal sidebar with the orange accent; content on white and warm grey */
.side { background: var(--side-bg); border-right: 0; }
.side .brand { color: #fff; } .side .brand small { color: var(--side-dim); }
.side nav.nav a { color: var(--side-ink); }
.side nav.nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.side nav.nav a.on { background: rgba(227, 108, 10, .18); color: #fff; border-left-color: var(--orange); }
.side .ghost, .side .btn.ghost { background: transparent; color: var(--side-ink); border-color: var(--side-line); }
.side .ghost:hover, .side .btn.ghost:hover { background: rgba(255, 255, 255, .06); color: #fff; border-color: var(--orange); }
h1 { font-size: 24px; font-weight: 700; letter-spacing: -.3px; }
/* the top bar: confidentiality, the reporting month, who is signed in */
.topbar { position: sticky; top: 0; z-index: 6; display: flex; gap: var(--s4); align-items: center; justify-content: space-between; flex-wrap: wrap;
  margin: calc(-1 * var(--s5)) calc(-1 * var(--s6)) var(--s5); padding: 10px var(--s6); background: var(--card); border-bottom: 1px solid var(--line); font-size: 13px; }
.conf { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; white-space: nowrap; }
.conf::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); margin-right: 7px; vertical-align: 1px; }
.tb-right { display: flex; gap: var(--s5); align-items: center; flex-wrap: wrap; }
#tbMonth { color: var(--muted); } #tbMonth b { color: var(--ink); }
.topbar .me { border: 0; padding: 0; display: flex; gap: var(--s4); align-items: center; font-size: 12px; }
.topbar .me .who { display: grid; text-align: right; line-height: 1.3; }
body.mgr .topbar, body.auth .topbar { display: none; }
/* the top bar spans the window; the page content keeps a readable width */
body:not(.mgr):not(.auth) main { max-width: none; } body:not(.mgr):not(.auth) #view, body:not(.mgr):not(.auth) .pvbar { max-width: 1240px; }
.pvbar { top: 50px; }
.mgr-top .conf { margin-right: auto; }
/* buttons: primary (orange), secondary (outlined), destructive (red) */
button.danger:not(.ghost), .btn.danger:not(.ghost) { background: var(--danger); border-color: var(--danger); color: #fff; }
button.danger:not(.ghost):hover, .btn.danger:not(.ghost):hover { background: #8f1c13; border-color: #8f1c13; }
/* the page's own dialog for confirmations */
dialog#dlg { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s5); width: min(460px, calc(100% - 32px)); color: var(--ink); box-shadow: 0 16px 48px rgba(36, 23, 15, .28); }
dialog#dlg::backdrop { background: rgba(36, 23, 15, .45); }
#dlg h2 { margin: 0 0 var(--s2); font-size: 17px; }
#dlg p { margin: 0 0 var(--s2); color: var(--ink-2); white-space: pre-line; }
#dlg input { width: 100%; margin-top: var(--s2); }
.dlg-act { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s4); }
/* the five performance levels: colour plus the level and its words */
.rate { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; line-height: 1.6; border: 1px solid transparent; }
.rate.r5 { background: #d9efe0; color: #14532d; border-color: #b3dcc0; }
.rate.r4 { background: #e9f5e3; color: #2e6a1d; border-color: #cfe6c3; }
.rate.r3 { background: #e4edf6; color: #1f4b73; border-color: #c4d6e9; }
.rate.r2 { background: var(--warn); color: var(--warn-ink); border-color: #f0dc9f; }
.rate.r1 { background: var(--no); color: var(--no-ink); border-color: #f1c3b9; }
.rate.r0 { background: var(--plain); color: var(--ink-2); border: 1px dashed var(--line-2); font-weight: 600; }
/* monthly figures: the row being typed in, and rows typed but not saved */
.entry tr[data-row]:focus-within td { background: var(--orange-soft); }
tr.dirty td { background: var(--warn-soft) !important; }
tr.dirty td:first-child b::after { content: " · not saved"; color: var(--warn-ink); font-weight: 600; font-size: 11px; }
/* printed scorecard: a formal document */
.sc-conf { text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; font-weight: 700; color: var(--no-ink); border: 1px solid #e3b6ab; border-radius: 3px; text-align: center; padding: 3px; margin-bottom: 12px; }
.sc-title { font-weight: 600; }
.sc-total .rate, .sc-total .sc-flag { margin-bottom: 6px; }
.sc-total span.rate { display: inline-block; font-size: 12px; line-height: 1.6; } /* not the big total-points size */
table.sc-scale { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 11.5px; }
table.sc-scale td { border: 1px solid var(--line); padding: 5px 6px; vertical-align: middle; text-align: left; }
table.sc-scale td.on { outline: 2px solid var(--ink); outline-offset: -2px; font-weight: 700; }
table.sc-scale small { display: block; color: var(--muted); font-weight: 400; }
.sc-foot { margin-top: 18px; padding-top: 6px; border-top: 1px solid var(--line); font-size: 10.5px; color: var(--muted); text-align: center; }
/* ========== refinement (29 Oct 2026, pass 2): one SFKL design system across every screen ========== */
:root { --side: 244px; --content: 1520px; --r: 10px; --r-sm: 7px; --th-bg: var(--head); --row-hover: var(--row-hover); --text-2: var(--text-2); }
body { -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
/* sidebar: logo area, grouped navigation, tools at the foot */
.side { padding: var(--s4) var(--s3) var(--s3); gap: var(--s2); }
.side .brand { padding: 2px 8px 14px; margin-bottom: 2px; border-bottom: 1px solid var(--side-line); }
.side .brand img { width: 38px; height: 38px; } .side .brand b { font-size: 15.5px; } .side .brand small { font-size: 11.5px; }
.nav-label { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--side-dim); padding: 12px 12px 4px; }
.side nav.nav a { padding: 8px 12px; font-size: 13.5px; border-radius: 7px; }
.side-tools { padding: 10px 4px 0; border-top: 1px solid var(--side-line); }
/* content width and page hierarchy */
body:not(.mgr):not(.auth) #view, body:not(.mgr):not(.auth) .pvbar { max-width: var(--content); }
.page-head { margin-bottom: var(--s5); }
.page-head h1 { margin-bottom: 6px; }
.lead { font-size: 14px; color: var(--text-2); max-width: 780px; }
nav.subtabs { gap: 24px; margin-bottom: var(--s5); }
nav.subtabs a { padding: 9px 0; font-size: 13.5px; }
.page-head + nav.subtabs { margin-top: calc(-1 * var(--s2)); }
h2 { font-size: 15.5px; font-weight: 700; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin: var(--s6) 0 var(--s3); }
.section-head h2 { margin: 0; }
.count { display: inline-block; min-width: 22px; padding: 0 7px; margin-left: 6px; border-radius: 999px; background: var(--plain); color: var(--ink-2); font-size: 12px; font-weight: 700; text-align: center; vertical-align: 1px; }
/* panels: a titled area of the page */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4) var(--s5); margin: var(--s5) 0; }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); margin-bottom: var(--s3); }
.panel-head h2 { margin: 0 0 4px; } .panel-head p { margin: 0; max-width: 780px; }
.panel .uform { border: 0; padding: 0; margin: 0; }
/* tables */
th { background: var(--th-bg); color: var(--muted); font-size: 11px; letter-spacing: .05em; padding: 9px 12px; white-space: nowrap; }
td { padding: 10px 12px; vertical-align: middle; }
.wrap tr:not(.editing):not(.detail):not(.dirty):not(.picked):hover > td { background: var(--row-hover); }
td .muted { font-size: 12.5px; }
/* status pills: a dot and the words */
.pill { padding: 2px 10px; line-height: 1.5; }
.pill.ok::before, .pill.warn::before, .pill.bad::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; }
/* buttons and fields: one height scale */
button:not(.link):not(.choice), .btn { min-height: 34px; padding: 6px 14px; border-radius: var(--r-sm); font-size: 13.5px; }
button.small:not(.link), .btn.small { min-height: 28px; padding: 3px 10px; font-size: 12.5px; }
button.ghost.danger, .btn.ghost.danger { color: var(--danger); border-color: #ecc4bc; }
button.ghost.danger:hover, .btn.ghost.danger:hover { background: #fdecea; border-color: var(--danger); color: var(--danger); }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select { min-height: 34px; }
table.tt input, .src select, .src input { min-height: 30px; }
/* account actions in a row: secondary first, the destructive one after a divider */
.actions { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; }
.act-sep { width: 1px; height: 18px; background: var(--line-2); margin: 0 4px; } .act-gap { display: none; }
/* roles: a quiet colour each, always with the role's name */
.role-badge { display: inline-block; padding: 1px 9px; border-radius: 6px; font-size: 12px; font-weight: 700; border: 1px solid; white-space: nowrap; text-transform: none; letter-spacing: 0; }
.rb-admin { background: var(--ink); color: #fff; border-color: var(--ink); }
.rb-hr { background: var(--orange-soft); color: var(--orange-dark); border-color: var(--orange-line); }
.rb-management { background: #e8eef5; color: #2b4a6b; border-color: #cbd8e6; }
.rb-manager { background: #e9f3ea; color: #2e5f33; border-color: #cfe3d1; }
.rb-employee { background: var(--plain); color: var(--ink-2); border-color: var(--line-2); }
.you { font-size: 11px; font-weight: 700; color: var(--orange-dark); background: var(--orange-soft); padding: 0 6px; border-radius: 4px; margin-left: 4px; }
.warn-text { color: var(--warn-ink); }
.foot-note { margin: 8px 2px 0; }
table.users td:first-child { min-width: 170px; } table.users td:nth-child(2) { min-width: 220px; }
/* the permissions matrix */
table.cantable th { text-align: center; vertical-align: bottom; white-space: normal; }
table.cantable th:first-child { text-align: left; width: 30%; }
table.cantable td { text-align: center; }
table.cantable td:first-child { text-align: left; font-weight: 600; color: var(--ink); }
table.cantable tr:nth-child(odd) > td { background: var(--row-alt); }
.th-sub { font-size: 10.5px; text-transform: none; letter-spacing: 0; font-weight: 500; margin-top: 3px; color: var(--muted); }
.can.yes { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--yes); color: var(--yes-ink); font-weight: 800; font-size: 12px; }
.can.no { color: var(--muted-2); }
.can.scope { font-size: 12.5px; color: var(--ink-2); line-height: 1.35; display: inline-block; max-width: 180px; }
/* Preview as */
.pv-grid { display: flex; gap: var(--s4); align-items: flex-end; flex-wrap: wrap; }
.pv-col { display: grid; gap: 6px; } .pv-col.grow { flex: 1; min-width: 300px; }
.lbl { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.seg { display: inline-flex; }
.seg button { border-radius: 0; margin-left: -1px; }
.seg button:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); margin-left: 0; } .seg button:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.pv-or { color: var(--muted); font-size: 12px; padding-bottom: 9px; }
.pv-person { display: flex; gap: 8px; flex-wrap: wrap; } .pv-person input { flex: 1; min-width: 220px; }
/* the signed-in person in the top bar */
.topbar .me, .mgr-top .me.top { gap: 12px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--orange-soft); color: var(--orange-dark); display: grid; place-items: center; font-weight: 800; font-size: 12px; border: 1px solid var(--orange-line); flex: none; }
.topbar .me .who, .mgr-top .me .who { text-align: left; display: grid; line-height: 1.3; }
.topbar .acts, .mgr-top .acts { display: flex; gap: 2px; padding-left: 10px; border-left: 1px solid var(--line); }
.topbar .acts a, .mgr-top .acts a { color: var(--ink-2); text-decoration: none; padding: 5px 8px; border-radius: 6px; font-weight: 600; }
.topbar .acts a:hover, .mgr-top .acts a:hover { background: var(--head); color: var(--ink); }
@media (max-width: 1100px) { .topbar .acts a[href="#users"] { display: none; } }
@media (max-width: 700px) { .pv-or { display: none; } .actions { flex-wrap: wrap; justify-content: flex-start; } table.cantable th:first-child { width: auto; } }
/* ---------- Departments & KPIs (pass 3) ---------- */
.head-actions { display: flex; gap: var(--s2); align-items: center; }
.summary-line { display: flex; flex-wrap: wrap; gap: 4px 0; margin: calc(-1 * var(--s3)) 0 var(--s4); font-size: 13px; color: var(--text-2); }
.summary-line > span::before { content: "·"; margin: 0 10px; color: var(--line-2); }
.summary-line .is-bad { color: var(--no-ink); font-weight: 600; }
.supporting { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: var(--s4); font-size: 12px; color: var(--muted); }
.supporting > span + span::before { content: "·"; margin: 0 10px; color: var(--line-2); }
.supporting code { font-size: 11.5px; }
.action-panel { border-left: 3px solid var(--orange); }
.action-panel .row { margin-top: var(--s2); }
/* the departments table: fixed column shares, a stage per column */
table.depts { table-layout: fixed; }
table.depts col.c-dept { width: 20%; } table.depts col.c-stage { width: 15%; } table.depts col.c-out { width: 25%; } table.depts col.c-act { width: 10%; }
table.depts th .th-sub { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 11px; }
table.depts td { vertical-align: middle; padding-top: 14px; padding-bottom: 14px; }
a.dept-name { font-weight: 700; font-size: 14.5px; color: var(--ink); text-decoration: none; }
a.dept-name:hover { color: var(--orange-dark); text-decoration: underline; }
.stage { display: grid; gap: 5px; max-width: 190px; }
.stage-top { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.stage-top b { font-size: 15px; font-variant-numeric: tabular-nums; }
.stage-word { margin-left: auto; font-size: 11.5px; font-weight: 700; }
.stage .bar { height: 6px; }
.s-ok .stage-word { color: var(--yes-ink); } .s-ok .bar span { background: var(--green); }
.s-bad .stage-word { color: var(--no-ink); } .s-bad .bar span { background: var(--danger); }
.s-part .stage-word { color: var(--warn-ink); } .s-part .bar span { background: var(--orange); }
.s-todo .stage-word, .s-none .stage-word { color: var(--muted); }
.out-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.out-list .pill { white-space: normal; }
.pill.info { background: #e6eef7; color: #24486b; }
.pill.info::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; }
@media (max-width: 1000px) { table.depts { table-layout: auto; min-width: 860px; } }
/* Preview bar: lighter, but the read-only warning and Stop preview stay plain to see */
.pvbar { background: var(--orange-soft); color: var(--ink); border: 1px solid var(--orange-line); border-left: 4px solid var(--orange); }
.pvbar button.ghost { background: var(--card); color: var(--ink); border-color: var(--line-2); }
.pvbar button.ghost:hover { border-color: var(--orange); background: var(--card); }
@media (max-width: 900px) {
  .topbar { margin: calc(-1 * var(--s4)) calc(-1 * var(--s4)) var(--s4); padding: 8px var(--s4); }
  .topbar .conf { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
/* ==================================================================================================
   SFKL brown & cream theme (29 Oct 2026). Every colour in the app comes from these variables;
   the rules below only apply them where the older rules used fixed colours.
   ================================================================================================== */
:root {
  /* sidebar: very dark chocolate brown */
  --side-bg: #24170F; --side-2: #302016; --side-active: #49301F; --side-indicator: #E77A18;
  --side-ink: #F1E7DA; --side-dim: #B9A58F; --side-line: #3D2A1D;
  /* page and surfaces: ivory, cream, beige, taupe */
  --bg: #F7F2EA; --card: #FFFCF7; --head: #F0E7DA; --th-bg: #F2EADF; --row-hover: #FBF5EC; --row-alt: #FCF8F2;
  --line: #E2D5C5; --line-2: #D2C2AE; --track: #EADFD1;
  /* text: deep brown, never harsh black */
  --ink: #302219; --ink-2: #4B3B2F; --text-2: #5E5044; --muted: #786B5E; --muted-2: #A08F7E;
  /* accent: burnt orange */
  --orange: #B85A12; --orange-dark: #96450D; --orange-soft: #F8EADB; --orange-line: #EBCDAF;
  /* status: muted green, warm amber, muted red, warm grey */
  --green: #5B8A43; --yes: #E4EDD9; --yes-ink: #3B6328;
  --amber: #D9A23A; --warn: #FBEDC9; --warn-soft: #FDF4DF; --warn-ink: #7A5200;
  --no: #F5DED6; --no-ink: #993021; --danger: #A63A24;
  --plain: #EEE5D9;
  --shadow: 0 1px 2px rgba(48, 34, 25, .05);
}
body { background: var(--bg); color: var(--ink); }
a { color: var(--orange-dark); }

/* ---------- sidebar ---------- */
.side { background: var(--side-bg); }
.side .brand b { color: #F4A15A; } .side .brand small { color: var(--side-dim); }
.side .brand { border-bottom-color: var(--side-line); }
.nav-label { color: var(--side-dim); }
.side nav.nav a { color: var(--side-ink); border-left: 3px solid transparent; }
.side nav.nav a .ico { opacity: .85; }
.side nav.nav a:hover { background: var(--side-2); color: #fff; }
.side nav.nav a.on { background: var(--side-active); color: #fff; border-left-color: var(--side-indicator); }
.side nav.nav a.on .ico { opacity: 1; color: var(--side-indicator); }
.side-tools { border-top-color: var(--side-line); }
.side .ghost, .side .btn.ghost { background: transparent; color: var(--side-ink); border-color: #5A4231; }
.side .ghost:hover, .side .btn.ghost:hover { background: var(--side-2); color: #fff; border-color: var(--side-indicator); }

/* ---------- header bars ---------- */
.topbar { background: var(--card); border-bottom-color: var(--line); }
body.mgr .mgr-top { background: var(--card); border-bottom: 3px solid var(--orange); }
.conf::before { background: var(--orange); }
.avatar { background: var(--orange-soft); color: var(--orange-dark); border-color: var(--orange-line); }
.topbar .acts, .mgr-top .acts { gap: 6px; border-left-color: var(--line); padding-left: 12px; }

/* ---------- buttons: primary (burnt orange), secondary (outlined cream), destructive (muted red) ---------- */
button:not(.link):not(.choice), .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600;
  border-radius: 8px; transition: background-color .12s, border-color .12s, box-shadow .12s; }
button:not(.link):not(.choice):not(.ghost):not(.danger), .btn:not(.ghost):not(.danger) {
  background: var(--orange); border-color: var(--orange); color: #fff; box-shadow: 0 1px 0 rgba(48, 34, 25, .15), inset 0 1px 0 rgba(255, 255, 255, .12); }
button:not(.link):not(.choice):not(.ghost):not(.danger):hover, .btn:not(.ghost):not(.danger):hover { background: var(--orange-dark); border-color: var(--orange-dark); }
button.ghost, .btn.ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line-2); box-shadow: 0 1px 0 rgba(48, 34, 25, .04); }
button.ghost:hover, .btn.ghost:hover { background: var(--head); border-color: var(--muted-2); color: var(--ink); }
button.ghost.danger, .btn.ghost.danger { color: var(--danger); border-color: #E3BCB0; background: var(--card); }
button.ghost.danger:hover, .btn.ghost.danger:hover { background: var(--no); border-color: var(--danger); color: var(--danger); }
button.danger:not(.ghost) { background: var(--danger); border-color: var(--danger); color: #fff; }
button.danger:not(.ghost):hover { background: #84301C; border-color: #84301C; }
button .ico, .btn .ico { width: 15px; height: 15px; flex: none; }
button.small .ico, .btn.small .ico { width: 14px; height: 14px; }
button:disabled, button:disabled:hover { background: var(--plain); border-color: var(--line); color: var(--muted-2); box-shadow: none; opacity: 1; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.btn:focus-visible, button:focus-visible { box-shadow: 0 0 0 4px rgba(184, 90, 18, .18); }
.topbar .acts a.btn, .mgr-top .acts a.btn { text-decoration: none; padding: 3px 10px; }
.topbar .acts a.btn:hover, .mgr-top .acts a.btn:hover { background: var(--head); }

/* ---------- surfaces, tables, forms ---------- */
.card, .panel, .wrap, .metric, .step-card, .role-row, .dept-card, .kpi, .todo-k, .mk, .checklist > div, .sec, details.add[open], ul.tree, .auth-card, .scorecard {
  background: var(--card); border-color: var(--line); }
.wrap, table { background: var(--card); }
th { background: var(--th-bg); color: var(--text-2); border-bottom-color: var(--line); }
td { border-bottom-color: var(--line); }
.wrap tr:not(.editing):not(.detail):not(.dirty):not(.picked):hover > td { background: var(--row-hover); }
input, select, textarea { background: #FFFEFB; border-color: var(--line-2); color: var(--ink); }
input:hover, select:hover, textarea:hover { border-color: var(--muted-2); }
input:focus, select:focus, textarea:focus { border-color: var(--orange); outline: none; box-shadow: 0 0 0 3px rgba(184, 90, 18, .15); }
input::placeholder, textarea::placeholder { color: var(--muted-2); }
.field, .lbl { color: var(--muted); }
code { background: var(--plain); color: var(--ink-2); }
.chip { background: var(--card); border-color: var(--line); color: var(--muted); }
.hint { background: var(--orange-soft); border-color: var(--orange-line); color: var(--ink); }
.hint.good { background: var(--yes); border-color: #CBDDB8; } .hint.bad { background: var(--no); border-color: #E9BFB1; }
.bar { background: var(--track); } .bar span { background: var(--orange); }
nav.subtabs { border-bottom-color: var(--line-2); } nav.subtabs a { color: var(--muted); } nav.subtabs a:hover { color: var(--ink); }
nav.subtabs a.on { color: var(--orange-dark); border-bottom-color: var(--orange); }
.metric.todo .n { color: var(--orange-dark); } .metric.done .n { color: var(--yes-ink); }
a.metric:hover, .step-card:hover, .role-row:hover, .dept-card:hover { border-color: var(--orange); }
.step-card .num, .kpi .head .kno, .mk-head .kno, .todo-k .kno { background: var(--orange-soft); color: var(--orange-dark); }
.kpi .head { background: var(--head); }
.mk.answered, .todo-k.ok { border-left-color: var(--green); }
.checklist .ok { border-left-color: var(--green); } .checklist .warn { border-left-color: var(--amber); }
.count { background: var(--plain); color: var(--ink-2); }
dialog#dlg { background: var(--card); color: var(--ink); border-color: var(--line); }
#toast { background: var(--ink); } #toast.bad { background: var(--no-ink); }

/* ---------- status badges: muted green, warm amber, muted red, warm grey (always with words) ---------- */
.pill.ok, .pill.Agreed { background: var(--yes); color: var(--yes-ink); }
.pill.warn, .pill.Suggested, .pill.Edited { background: var(--warn); color: var(--warn-ink); }
.pill.bad { background: var(--no); color: var(--no-ink); }
.pill.info { background: #ECE2D4; color: #5A4636; }
.pill.kind, .pill.plain, .pill.auto, .pill.tag, .pill:not(.ok):not(.warn):not(.bad):not(.info):not(.Agreed):not(.Suggested):not(.Edited) { background: var(--plain); color: var(--ink-2); }
.rate.r5 { background: #DCEAD0; color: #2F5520; border-color: #C3D9AE; }
.rate.r4 { background: #E8F0DD; color: #3B6328; border-color: #D2E2C0; }
.rate.r3 { background: #EFE4D3; color: #5A4636; border-color: #DCCAB2; }
.rate.r2 { background: var(--warn); color: var(--warn-ink); border-color: #EBD49A; }
.rate.r1 { background: var(--no); color: var(--no-ink); border-color: #E9BFB1; }
.rate.r0 { background: var(--plain); color: var(--ink-2); border-color: var(--line-2); }
.role-badge.rb-admin { background: var(--side-bg); color: var(--side-ink); border-color: var(--side-bg); }
.role-badge.rb-hr { background: var(--orange-soft); color: var(--orange-dark); border-color: var(--orange-line); }
.role-badge.rb-management { background: #ECE2D4; color: #5A4636; border-color: #DCCAB2; }
.role-badge.rb-manager { background: var(--yes); color: var(--yes-ink); border-color: #CBDDB8; }
.role-badge.rb-employee { background: var(--plain); color: var(--ink-2); border-color: var(--line-2); }
.can.yes { background: var(--yes); color: var(--yes-ink); }
.s-ok .stage-word { color: var(--yes-ink); } .s-ok .bar span { background: var(--green); }
.s-bad .stage-word { color: var(--no-ink); } .s-bad .bar span { background: var(--danger); }
.s-part .stage-word { color: var(--orange-dark); } .s-part .bar span { background: var(--orange); }
button.choice { background: var(--card); color: var(--ink); border-color: var(--line-2); }
button.choice:hover, button.choice.on { background: var(--orange-soft); border-color: var(--orange); }
button.choice.later, button.choice.later:hover { background: var(--plain); color: var(--muted-2); border-color: var(--line-2); }
.evid { background: var(--head); border-color: var(--line-2); } .evid.none { background: var(--warn-soft); border-color: var(--amber); }
tr.dirty td { background: var(--warn-soft) !important; }
tr.picked td { background: var(--orange-soft); }
.movebar { background: var(--orange-soft); }

/* ---------- Preview bar: light beige, clear read-only words, a distinct Stop preview ---------- */
.pvbar { background: #F3E6D5; color: var(--ink); border: 1px solid #E2CDB2; border-left: 4px solid var(--orange); border-radius: 10px; padding: 8px 10px 8px 16px; }
.pv-switch { display: inline-flex; gap: 6px; padding-right: 10px; margin-right: 4px; border-right: 1px solid #DCC6AA; }
.pvbar button.ghost { background: var(--card); color: var(--ink); border-color: var(--line-2); }
.pvbar button.ghost:hover { background: #fff; border-color: var(--orange); }

/* ---------- Departments & KPIs: the five indicators, search ---------- */
.indicators { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 0 0 var(--s5); background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.ind { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ico n" "ico t" "ico s"; column-gap: 12px; align-items: center; padding: 14px 16px; }
.ind + .ind { border-left: 1px solid var(--line); }
.ind-ico { grid-area: ico; width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--plain); color: var(--ink-2); align-self: start; }
.ind-ico .ico { width: 19px; height: 19px; }
.ind-n { grid-area: n; font-size: 22px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--ink); }
.ind-t { grid-area: t; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.ind-s { grid-area: s; font-size: 12px; color: var(--muted); }
.ind-ok .ind-ico { background: var(--yes); color: var(--yes-ink); } .ind-ok .ind-n { color: var(--yes-ink); }
.ind-bad .ind-ico { background: var(--no); color: var(--no-ink); } .ind-bad .ind-n { color: var(--no-ink); }
.ind-att .ind-ico { background: var(--orange-soft); color: var(--orange-dark); } .ind-att .ind-n { color: var(--orange-dark); }
.ind-warn .ind-ico { background: var(--warn); color: var(--warn-ink); } .ind-warn .ind-n { color: var(--warn-ink); }
.sh-right { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
label.search { position: relative; display: inline-flex; align-items: center; }
label.search .ico { position: absolute; left: 10px; width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
label.search input { padding-left: 32px; min-width: 220px; }
.head-actions { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 1100px) { .indicators { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ind:nth-child(4) { border-left: 0; } .ind:nth-child(n+4) { border-top: 1px solid var(--line); } }
@media (max-width: 640px) { .indicators { grid-template-columns: 1fr 1fr; } .ind { border-left: 0 !important; border-top: 1px solid var(--line); } .ind:nth-child(-n+2) { border-top: 0; } label.search input { min-width: 0; width: 100%; } }
@media (max-width: 900px) { .topbar .acts a.btn { padding: 3px 8px; } }
/* ---------- sign-in, first administrator, password: brand panel (chocolate) + form panel (cream) ---------- */
body.auth main { margin: 0; max-width: none; padding: 0; }
body.auth #view { max-width: none; }
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(380px, 46%) 1fr; }
.auth-brand { position: relative; overflow: hidden; background: var(--side-bg); color: var(--side-ink); padding: 44px 52px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
/* understated fine lines: two thin arcs and a rule, drawn in CSS */
.auth-brand::before, .auth-brand::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(231, 122, 24, .22); pointer-events: none; }
.auth-brand::before { width: 520px; height: 520px; right: -260px; bottom: -220px; }
.auth-brand::after { width: 340px; height: 340px; right: -150px; bottom: -120px; border-color: rgba(241, 231, 218, .10); }
.ab-top { display: flex; align-items: center; gap: 12px; position: relative; }
.ab-top img { width: 46px; height: 46px; }
.ab-top span { display: grid; line-height: 1.25; } .ab-top b { color: #F4A15A; font-size: 17px; } .ab-top small { color: var(--side-dim); font-size: 12.5px; letter-spacing: .02em; }
.ab-mid { position: relative; max-width: 440px; }
.ab-mid h2 { font-size: 38px; line-height: 1.12; letter-spacing: -.6px; margin: 0 0 18px; color: #FBF4EA; font-weight: 700; }
.ab-mid h2::after { content: ""; display: block; width: 56px; height: 3px; background: var(--side-indicator); border-radius: 2px; margin-top: 20px; }
.ab-mid p { color: var(--side-dim); font-size: 15px; line-height: 1.6; margin: 0 0 20px; }
.ab-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ab-points li { position: relative; padding-left: 24px; color: var(--side-ink); font-size: 14px; }
.ab-points li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 9px; height: 9px; border: 2px solid var(--side-indicator); border-radius: 50%; }
.ab-foot { position: relative; font-size: 12px; color: var(--side-dim); letter-spacing: .02em; }
.auth-panel { background: var(--bg); display: grid; place-items: center; padding: 40px 24px; }
.auth-box { width: min(420px, 100%); }
.auth-box h1 { font-size: 28px; margin: 0 0 6px; color: var(--ink); }
.auth-lead { color: var(--text-2); margin: 0 0 26px; font-size: 14.5px; line-height: 1.55; }
.auth-form { display: grid; gap: 16px; }
.af label { display: block; font-size: 13px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.af-in { position: relative; }
.af-in input { width: 100%; min-height: 44px; padding: 10px 12px; font-size: 15px; background: var(--card); border: 1px solid var(--line-2); border-radius: 9px; }
.af-in input[type=password], .af-in input[data-was=password] { padding-right: 70px; }
.af-in:has(.af-eye) input { padding-right: 70px; }
.af-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 32px !important; padding: 2px 10px !important; font-size: 12.5px !important;
  background: transparent !important; color: var(--orange-dark) !important; border: 0 !important; box-shadow: none !important; }
.af-eye:hover { background: var(--head) !important; }
.af input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(166, 58, 36, .12); }
.af-hint { font-size: 12px; color: var(--muted); margin-top: 5px; }
.af-err { font-size: 12.5px; color: var(--no-ink); font-weight: 600; margin-top: 5px; }
.af-err:empty { display: none; }
.auth-alert { background: var(--no); color: var(--no-ink); border: 1px solid #E9BFB1; border-left: 4px solid var(--danger); border-radius: 8px; padding: 10px 12px; font-size: 13.5px; font-weight: 600; }
.auth-go { width: 100%; min-height: 46px !important; font-size: 15px !important; margin-top: 4px; }
.auth-actions { display: flex; gap: 10px; } .auth-actions .auth-go { flex: 1; width: auto; margin: 0; } .auth-actions .ghost { min-height: 46px; }
.pw-checks { list-style: none; margin: -4px 0 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }
.pw-checks li::before { content: "○"; display: inline-block; width: 18px; color: var(--muted-2); }
.pw-checks li.ok { color: var(--yes-ink); font-weight: 600; } .pw-checks li.ok::before { content: "✓"; color: var(--yes-ink); }
.auth-note { margin: 28px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.auth-note .conf { margin-right: 6px; color: var(--ink-2); }
@media (max-width: 860px) {
  .auth-wrap { grid-template-columns: 1fr; min-height: 100vh; grid-template-rows: auto 1fr; }
  .auth-brand { padding: 22px 22px 24px; gap: 14px; }
  .auth-brand::before, .auth-brand::after { display: none; }
  .ab-mid h2 { font-size: 22px; margin-bottom: 6px; } .ab-mid h2 br { display: none; } .ab-mid h2::after { display: none; }
  .ab-mid p { font-size: 13.5px; margin: 0; } .ab-points, .ab-foot { display: none; }
  .auth-panel { place-items: start center; padding: 28px 18px 40px; }
}
/* while the page asks the server who is signed in: nothing shows (no flash of the menus before the sign-in page) */
body.booting { background: var(--bg); }
body.booting > *:not(#toast):not(dialog) { visibility: hidden; }
@page { size: A4; margin: 14mm 12mm; }
@media print {
  .side, .mgr-top, .topbar, .noprint, .pvbar, #toast { display: none !important; }
  .scorecard { font-size: 12px; } .sc-kpis tr { break-inside: avoid; }
  .rate, .sc-scale td, .sc-conf { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .scorecard a { color: inherit; text-decoration: none; }
  /* paper: plain white and high contrast, whatever the screen theme */
  body, main, #view, .scorecard, .scorecard table, .scorecard td { background: #fff !important; color: #111 !important; }
  .scorecard th { background: #f1f1f1 !important; color: #222 !important; }
  .scorecard th, .scorecard td { border-color: #bbb !important; }
  .sc-head b { color: #111 !important; } .sc-head { border-bottom-color: #111 !important; }
  body { background: var(--card); } main { padding: 0; margin: 0; max-width: none; } .scorecard { border: 0; padding: 0; box-shadow: none; }
  th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}