/* Base styles carried over from the persona site (fedramp-site/template.html); C3 additions at the end. */
/* Fonts, served from this site (public/fonts: Figtree and JetBrains Mono, SIL Open Font License 1.1, the licences
   beside them; variable fonts, latin and latin-ext subsets, as Google Fonts serves them). No third-party request. */
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/figtree-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/figtree-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/jetbrains-mono-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/jetbrains-mono-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --bg: #f6f7fa;
  --surface: #ffffff;
  --ink: #15233b;
  --muted: #5a667b;
  --line: #dde2ea;
  --accent: #1f4f8f;
  --accent-soft: #e4ecf7;
  --support: #a86a07;
  --support-soft: #fbf0db;
  --ok: #2f7a4c;
  --heat: 31, 79, 143;
  --f-display: "Public Sans", system-ui, sans-serif;
  --f-body: "Public Sans", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1522; --surface: #172033; --ink: #e6ebf3; --muted: #9aa6ba; --line: #2a3650;
    --accent: #7fb0ec; --accent-soft: #1d2f4d; --support: #e2a94a; --support-soft: #3a2c12; --ok: #6cc28f;
    --heat: 127, 176, 236; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1522; --surface: #172033; --ink: #e6ebf3; --muted: #9aa6ba; --line: #2a3650;
  --accent: #7fb0ec; --accent-soft: #1d2f4d; --support: #e2a94a; --support-soft: #3a2c12; --ok: #6cc28f;
  --heat: 127, 176, 236; color-scheme: dark;
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 15px; line-height: 1.55; }
a { color: var(--accent); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--f-display); text-wrap: balance; line-height: 1.2; margin: 0; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.eyebrow { font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; color: var(--muted); }

.masthead { border-bottom: 1px solid var(--line); background: var(--surface); padding-inline: 20px; }
.masthead-inner { max-width: 1240px; margin: 0 auto; padding-block: 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* Commandry brand: the bar mark (inline SVG, currentColor) and the wordmark (an alpha mask, so it takes the ink color) */
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand-mark { width: 30px; height: 30px; flex: none; fill: currentColor; }
.brand-text { display: grid; gap: 3px; }
.brand-word { display: block; width: 128px; height: 26px; background: currentColor;
  -webkit-mask: url(brand/commandry-wordmark.png) left center / contain no-repeat; mask: url(brand/commandry-wordmark.png) left center / contain no-repeat; }
.brand-title { display: flex; align-items: center; gap: 8px; }
.brand-product { font-family: var(--f-display); font-weight: 700; font-size: 19px; line-height: 1; letter-spacing: -.01em; }
.brand small { display: block; font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mast-meta { margin-left: auto; font-size: 12px; color: var(--muted); }

.shell { max-width: 1240px; margin: 0 auto; padding-inline: 20px; padding-block: 24px 64px; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; align-items: start; }
nav.side { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 16px); max-height: calc(100vh - 32px); overflow: auto; display: flex; flex-direction: column; gap: 2px; }
nav.side .eyebrow { padding: 12px 10px 6px; }
nav.side a { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 6px; text-decoration: none; color: var(--ink); font-size: 13.5px; }
nav.side a:hover { background: var(--accent-soft); }
nav.side a[aria-current="page"] { background: var(--accent); color: var(--surface); font-weight: 600; }
nav.side a .n { font-family: var(--f-mono); font-size: 12px; opacity: .75; }
main { min-width: 0; }

/* overview */
.hero { display: grid; gap: 10px; max-width: 760px; margin-bottom: 28px; }
.hero h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -.01em; }
.hero p { margin: 0; color: var(--muted); font-size: 16px; }
.stats { display: flex; flex-wrap: wrap; gap: 28px; margin: 4px 0 32px; }
.stat b { display: block; font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12.5px; color: var(--muted); }
section.block { margin-top: 40px; }
section.block > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
section.block h2 { font-size: 21px; font-weight: 700; }
section.block > header p { margin: 0; color: var(--muted); font-size: 13.5px; }

.personas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.pcard { display: grid; gap: 8px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.pcard:hover { border-color: var(--accent); transform: translateY(-1px); }
.pcard h3 { font-size: 16px; font-weight: 700; }
.pcard p { margin: 0; font-size: 13px; color: var(--muted); }
.pcard .counts { display: flex; gap: 14px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pcard .bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--line); }
.pcard .bar i { display: block; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.own-c { background: var(--accent); } .sup-c { background: var(--support); }
.ext { font-size: 11px; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; justify-self: start; }

.matrix-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
table.matrix { border-collapse: collapse; font-size: 12.5px; width: 100%; min-width: 760px; }
.matrix th, .matrix td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: center; }
.matrix th:first-child, .matrix td:first-child { text-align: left; position: sticky; left: 0; background: var(--surface); white-space: nowrap; }
.matrix thead th { font-family: var(--f-mono); font-weight: 600; color: var(--muted); }
.matrix td a { color: var(--ink); text-decoration: none; font-weight: 600; }
.matrix td a:hover { color: var(--accent); }
.matrix td.cell { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.matrix tr:last-child td { border-bottom: 0; }

/* persona page */
.crumbs { font-size: 13px; margin-bottom: 12px; }
.crumbs a { text-decoration: none; }
.phead { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 18px; max-width: 780px; }
.phead h1 { font-size: clamp(26px, 3.6vw, 34px); font-weight: 800; overflow-wrap: anywhere; }
.phead p { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.seg button { font: inherit; font-size: 13px; padding: 6px 12px; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--surface); font-weight: 600; }
.linkbtn { font: inherit; font-size: 13px; background: none; border: 0; color: var(--accent); cursor: pointer; padding: 4px; }
.count-note { font-size: 12.5px; color: var(--muted); }

.step { font-family: var(--f-mono); font-size: 12px; color: var(--muted); text-align: right; }
.tid { font-family: var(--f-mono); font-size: 12px; font-weight: 600; color: var(--accent); }
.role { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.role.own { background: var(--accent-soft); color: var(--accent); }
.done { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--ok); border-radius: 6px; padding: 10px 12px; font-size: 14px; }
.done b { color: var(--ok); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; display: block; }
.req code, .refs code { font-family: var(--f-mono); font-size: 12px; color: var(--ink); }
.refs { display: flex; flex-wrap: wrap; gap: 6px; }
.refs code { border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; background: var(--surface); }
.empty { padding: 24px 0; color: var(--muted); }

@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  nav.side { position: static; max-height: none; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
  nav.side .eyebrow { display: none; }
  nav.side a { flex: none; white-space: nowrap; }
  .mast-meta { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .pcard { transition: none; } .pcard:hover { transform: none; } }

/* ---------- C3 additions ---------- */
:root { --warn: #a3410f; --warn-soft: #fbe6da; --ok-soft: #e1f2e7; --prog: #1f4f8f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --warn: #f0926a; --warn-soft: #3d2116; --ok-soft: #173325; } }
:root[data-theme="dark"] { --warn: #f0926a; --warn-soft: #3d2116; --ok-soft: #173325; }
body { margin: 0; }
.btn { font: inherit; font-size: 14px; font-weight: 600; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent); color: var(--surface); cursor: pointer; }
.btn.ghost { background: var(--surface); color: var(--accent); }
.btn:disabled { opacity: .5; cursor: default; }
.mast-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mast-meta .linkbtn { font-size: 12.5px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.onb { max-width: 900px; display: grid; gap: 20px; }
.onb input[type=text] { font: inherit; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); min-width: 0; flex: 1 1 220px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.userlist { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: inherit; font-size: 13px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.chip:hover { border-color: var(--accent); }

.next { border: 2px solid var(--accent); border-radius: 12px; padding: 18px 20px; background: var(--surface); display: grid; gap: 10px; margin-bottom: 8px; }
.next h2 { font-size: 19px; font-weight: 700; }

/* Done is the target: full color, no strike-through. Only Not applicable is muted. */
.status { font: inherit; font-size: 13px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); width: 100%; }
.status.s-done { border-color: var(--ok); color: var(--ok); background: var(--ok-soft); font-weight: 600; }
.status.s-in_progress { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.status.s-blocked { border-color: var(--warn); color: var(--warn); background: var(--warn-soft); font-weight: 600; }
.status.s-not_applicable { color: var(--muted); }
.toggle { font-size: 13px; display: inline-flex; gap: 6px; align-items: center; cursor: pointer; white-space: nowrap; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 8px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.err { color: var(--warn); font-size: 13px; }
.dates { display: grid; gap: 0; }
.dates div { display: grid; grid-template-columns: 90px 150px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.dates .ty { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 860px) {
  .dates div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {.toast { transition: none; } }

/* ---------- monday-style board ---------- */
/* Shared colours (--st-*) and the status cells. */
:root {
  --bg: #f6f7fb; --surface: #ffffff; --ink: #323338; --muted: #676879; --line: #e1e4ec;
  --accent: #0073ea; --accent-soft: #e5f0ff; --support: #9d5a00; --support-soft: #fff1d6; --ok: #006e40; --heat: 0, 115, 234;
  --row-hover: #f5f6f8;
  --st-done: #00c875; --st-in_progress: #ffcb00; --st-blocked: #e2445c; --st-not_started: #c4c7d0; --st-not_applicable: #9aadbd;
  --on-done: #ffffff; --on-in_progress: #323338; --on-blocked: #ffffff; --on-not_started: #323338; --on-not_applicable: #ffffff;
  --g-next: #579bfc;
  --f-display: "Figtree", "Segoe UI", system-ui, sans-serif;
  --f-body: "Figtree", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #181b34; --surface: #292f4c; --ink: #e6e9ef; --muted: #a8abbd; --line: #3e4566; --accent: #579bfc; --accent-soft: #23345a;
    --support: #f5b74a; --support-soft: #43391f; --ok: #3ddc97; --row-hover: #30365a; --st-not_started: #6f7392; --on-not_started: #ffffff; --g-next: #6aa8ff; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #181b34; --surface: #292f4c; --ink: #e6e9ef; --muted: #a8abbd; --line: #3e4566; --accent: #579bfc; --accent-soft: #23345a;
  --support: #f5b74a; --support-soft: #43391f; --ok: #3ddc97; --row-hover: #30365a; --st-not_started: #6f7392; --on-not_started: #ffffff; --g-next: #6aa8ff; color-scheme: dark;
}
body { font-size: 14.5px; }
.shell { max-width: 1480px; grid-template-columns: 210px minmax(0, 1fr); gap: 28px; }
.masthead-inner { max-width: 1480px; }
.btn { border-radius: 4px; }

.b-done { background: var(--st-done); } .b-in_progress { background: var(--st-in_progress); } .b-blocked { background: var(--st-blocked); }
.b-not_started { background: var(--st-not_started); } .b-not_applicable { background: var(--st-not_applicable); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); }
.legend b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* the role name wraps onto 2 lines; fitRoles() switches a cell to initials when it still overflows */

@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
}
.stat.k { border-top: 4px solid var(--kc); padding-top: 8px; min-width: 90px; }

/* ---------- Next-tasks checkbox, evidence ---------- */

/* ---------- assets board: asset classes x KSI families ---------- */
/* a summary's secondary count (the assets summary's "N of M cells done") */
.sumeff { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sumeff b { color: var(--ink); }
@media (max-width: 860px) { .sumeff { flex-basis: 100%; } }
:root { --hatch: rgba(103, 104, 121, .22); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hatch: rgba(168, 171, 189, .25); } }
:root[data-theme="dark"] { --hatch: rgba(168, 171, 189, .25); }
.c-done { background: var(--st-done); } .c-in_progress { background: var(--st-in_progress); }
.c-blocked { background: var(--st-blocked); } .c-not_started { background: var(--st-not_started); }
.c-not_applicable { background: var(--st-not_applicable); }
.c-recheck { background: repeating-linear-gradient(135deg, var(--st-done) 0 3px, var(--st-blocked) 3px 6px); }
.c-na, .sq.na, .fbar.na { background: repeating-linear-gradient(135deg, transparent 0 3px, var(--hatch) 3px 5px); }
.anote { font-size: 12.5px; font-style: italic; }
.ready { font-size: 18px; }
.afilt { position: static; }
.amx-wrap { overflow-x: auto; max-width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; margin-top: 8px; -webkit-overflow-scrolling: touch; }
table.amx { border-collapse: separate; border-spacing: 0; font-size: 12.5px; width: 100%; }
.amx th, .amx td { border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); padding: 0; text-align: center; vertical-align: middle; }
.amx thead th { background: var(--surface); color: var(--muted); font-weight: 600; }
.amx tbody tr:last-child > * { border-bottom: 0; }
.amx .acls { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; border-left: 0; width: 250px; min-width: 250px; box-shadow: 1px 0 0 var(--line); }
.amx thead .acls { padding: 8px 12px; font-size: 12.5px; }
.amx th.fam { min-width: 64px; }
.amx th.fam.open { background: var(--accent-soft); }
.amx th.ksih { font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; padding: 4px 2px; min-width: 34px; background: var(--accent-soft); }
.clsbtn { display: grid; gap: 3px; width: 100%; text-align: left; background: none; border: 0; padding: 8px 12px; font: inherit; color: var(--ink); cursor: pointer; }
.clsbtn b { font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.clsbtn:hover b { color: var(--accent); }
.cmeta { display: flex; flex-wrap: wrap; gap: 3px 8px; align-items: center; font-size: 11.5px; color: var(--muted); }
.cown { font-weight: 700; color: var(--accent); }
.kchip { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 1px 6px; border-radius: 9px; white-space: nowrap; }
.kchip.k-machine { background: var(--accent-soft); color: var(--accent); }
.kchip.k-non_machine { background: var(--support-soft); color: var(--support); }
.amx tr.sel > th.acls { box-shadow: inset 4px 0 0 var(--accent), 1px 0 0 var(--line); background: var(--row-hover); }
.amx tr.sel > td { background: var(--row-hover); }
.fcell { padding: 6px !important; }
.mini { display: flex; height: 22px; border-radius: 4px; overflow: hidden; background: var(--st-not_started); }
.mini i { display: block; min-width: 3px; }
.sqc { padding: 4px !important; }
.sq { display: block; width: 26px; height: 26px; margin: auto; border-radius: 4px; border: 0; padding: 0; cursor: pointer; }
span.sq { cursor: default; }
.sq.s-done { background: var(--st-done); } .sq.s-in_progress { background: var(--st-in_progress); }
.sq.s-blocked { background: var(--st-blocked); } .sq.s-not_started { background: var(--st-not_started); }
.sq.s-not_applicable { background: var(--st-not_applicable); }
/* A Done square whose re-check is due: red ring and a red corner */
.sq.rc { box-shadow: inset 0 0 0 3px var(--st-blocked); background-image: linear-gradient(225deg, var(--st-blocked) 0 30%, transparent 30%); }
.sq.rc.on { box-shadow: inset 0 0 0 3px var(--st-blocked), 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
button.sq:hover { filter: brightness(.92); }
.sq.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.aempty { padding: 18px !important; color: var(--muted); }
.fkey { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--muted); margin: 10px 0 0; }
.fkey b { font-family: var(--f-mono); color: var(--ink); font-weight: 600; }

.apanel { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); z-index: 30; background: var(--surface); border-left: 1px solid var(--line); box-shadow: -12px 0 32px rgba(0, 0, 0, .14); overflow-y: auto; overscroll-behavior: contain; outline: none; }
.aphead { position: sticky; top: 0; background: var(--surface); padding: 16px 52px 12px 20px; border-bottom: 1px solid var(--line); display: grid; gap: 4px; z-index: 1; }
.aphead h2 { font-size: 19px; font-weight: 700; }
.apx { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 6px; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; }
.apx:hover { background: var(--row-hover); color: var(--ink); }
.apbody { padding: 14px 20px 32px; display: grid; gap: 14px; }
.apbody p { margin: 0; }
.aon { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.aon .linkbtn { padding: 0; font-weight: 600; }
.stmt { font-size: 13.5px; color: var(--ink); }
.rc-why { font-size: 13.5px; color: var(--warn); background: var(--warn-soft); border-radius: 6px; padding: 8px 10px; }
/* the cell panel's task status: the same button as a task row */
.cstat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ccounts { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.rcn { color: var(--st-blocked); }
.vinfo { font-size: 13px; }
.muted { color: var(--muted); font-size: 13px; }
.small { font-size: 12px; }
/* "Only admins can ...": beside controls a non-admin sees disabled (app.js adminNote) */
.adminnote { margin: 6px 0 0; }
.ok { color: var(--ok); font-size: 13px; font-weight: 600; }
.aform input { font: inherit; font-size: 13.5px; width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
.cfams { display: grid; gap: 6px; }
.cfam { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: center; }
.cfc { font-family: var(--f-mono); font-size: 12px; font-weight: 600; }
.sqs { display: flex; flex-wrap: wrap; gap: 4px; }
.sqs .sq { width: 22px; height: 22px; margin: 0; }
.alist { list-style: none; margin: 0; padding: 0; display: grid; }
.alist li { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.alist li > div { min-width: 0; overflow-wrap: anywhere; }
.alist code { font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); }
.alist small { display: block; color: var(--muted); font-size: 12px; }
.aform { display: grid; gap: 6px; }
.aform .btn { justify-self: start; }
@media (min-width: 1300px) { body.panel-open .shell { padding-right: 460px; } }
@media (max-width: 860px) {
  .amx .acls { width: 170px; min-width: 170px; }
  .clsbtn { padding: 7px 8px; }
  .clsbtn b { font-size: 12.5px; }
  .aphead { padding: 14px 48px 10px 16px; }
  .apbody { padding: 12px 16px 28px; }
}

/* "All" persona card in the role picker */
.seg[hidden] { display: none; }

/* ---------- asset classes on task rows ---------- */
.achips { display: flex; flex-wrap: wrap; gap: 4px; }
.ach { display: inline-block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 600; line-height: 1;
  padding: 3px 7px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); }
.ach i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; vertical-align: 1px; background: currentColor; opacity: .7; }
.ach.k-machine i { border-radius: 1px; }
.ach.k-non_machine i { border-radius: 50%; }
.ach.all { color: var(--accent); border-color: var(--accent); }
.ach.s-done { background: var(--st-done); border-color: var(--st-done); color: var(--on-done); }
.ach.s-in_progress { background: var(--st-in_progress); border-color: var(--st-in_progress); color: var(--on-in_progress); }
.ach.s-blocked { background: var(--st-blocked); border-color: var(--st-blocked); color: var(--on-blocked); }
.ach.s-not_started { background: var(--st-not_started); border-color: var(--st-not_started); color: var(--on-not_started); }
.ach.s-not_applicable { background: var(--st-not_applicable); border-color: var(--st-not_applicable); color: var(--on-not_applicable); }
.ach.rc { box-shadow: 0 0 0 2px var(--st-blocked); }
.afsel { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.afsel select { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); max-width: 220px; }
.tassets { border: 1px dashed var(--line); border-radius: 6px; padding: 12px 14px; background: var(--surface); display: grid; gap: 8px; }
.tacells, .taclasses { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tacells li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.tacells .tawhen { flex: 1 1 160px; }
.tacells .tareval { font-size: 12.5px; padding: 5px 10px; }
.tacells li:last-child, .taclasses li:last-child { border-bottom: 0; }
.tacells .sq { width: 16px; height: 16px; margin: 0; cursor: default; }
.taname { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.tast { font-size: 12px; font-weight: 700; }
.tast.s-done { color: var(--ok); } .tast.s-in_progress { color: var(--support); } .tast.s-blocked { color: var(--st-blocked); } .tast.s-not_started, .tast.s-not_applicable { color: var(--muted); }
.tawhen { font-size: 12px; color: var(--muted); }
.tacells a, .taclasses a { font-size: 12.5px; white-space: nowrap; }
.taclasses li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; padding: 3px 0; border-bottom: 1px solid var(--line); }
.stpill { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 9px; }
.stpill.s-done { background: var(--st-done); color: var(--on-done); } .stpill.s-in_progress { background: var(--st-in_progress); color: var(--on-in_progress); }
.stpill.s-blocked { background: var(--st-blocked); color: var(--on-blocked); } .stpill.s-not_started { background: var(--st-not_started); color: var(--on-not_started); }
.stpill.s-not_applicable { background: var(--st-not_applicable); color: var(--on-not_applicable); }
@media (max-width: 860px) {
  .ach { max-width: 130px; }
  .afsel { flex: 1 1 100%; }
  .afsel select { flex: 1; max-width: none; }
}

/* ---------- roll-ups and per-asset child tasks ---------- */
.rkempty { padding-left: 52px; font-size: 12.5px; }
.rnote { border: 1px dashed var(--line); border-radius: 6px; padding: 12px 14px; background: var(--surface); display: grid; gap: 8px; }
.ctt { font-size: 13.5px; }
@media (max-width: 860px) {
  .tactl .cseg { flex: 1 1 100%; }
}

/* ---------- collapsible left nav: hidden entirely except its toggle (saved per person); phones keep the strip ---------- */
.navitems { display: contents; }
.navitems[hidden] { display: none; }
.navtog { display: flex; align-items: center; gap: 8px; align-self: flex-start; margin: 0 0 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; }
.navtog:hover { color: var(--ink); border-color: var(--ink); }
.navtog:focus-visible, nav.side a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.navchev { width: 7px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-left: 2px; }
.navburger { display: grid; gap: 3px; width: 16px; }
.navburger i { display: block; height: 2px; border-radius: 1px; background: currentColor; }
@media (min-width: 861px) {
  body.nav-collapsed .shell { grid-template-columns: 38px minmax(0, 1fr); gap: 16px; }
  body.nav-collapsed .navtog { padding: 8px 10px; }
}
@media (max-width: 860px) { .navtog { display: none; } .navitems[hidden] { display: contents; } }
/* "Browse a role": folded until toggled */

/* ---------- log in (choose your name) and view-only tasks ---------- */
.login .loginlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.loginbtn { display: flex; align-items: center; gap: 12px; text-align: left; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; min-width: 0; }
.loginbtn:hover { border-color: var(--accent); background: var(--accent-soft); }
.loginbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lav { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--surface); font-weight: 700; font-size: 13px; }
.lname { flex: 1; min-width: 0; display: grid; }
.lname b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lname small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lgo { flex: none; color: var(--accent); font-size: 13px; font-weight: 600; }
.newme summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.newme[open] summary { margin-bottom: 12px; }

.evro, .roabout { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; margin: 6px 0 0; }
.roabout { display: inline-flex; margin-left: 4px; }

/* ---------- the left nav's sub-items ---------- */
nav.side a.sub { padding-left: 26px; font-size: 13.5px; position: relative; }
nav.side a.sub::before { content: ""; position: absolute; left: 13px; top: 50%; width: 7px; height: 7px; border-left: 1.5px solid var(--line); border-bottom: 1.5px solid var(--line); transform: translateY(-75%); }
nav.side a.sub[aria-current="page"]::before { border-color: currentColor; }
@media (max-width: 860px) { nav.side a.sub { padding-left: 12px; } nav.side a.sub::before { display: none; } }


/* ---------- settings (#settings): your roles, and the collector connection ---------- */
.setsec:first-of-type { margin-top: 8px; }
.myroles { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.myroles li { display: grid; gap: 2px; padding: 8px 12px; border: 1px solid var(--accent); background: var(--accent-soft); border-radius: 10px; max-width: 100%; min-width: 0; }
.myroles b { font-size: 14px; }
.myroles small { color: var(--muted); font-size: 12px; line-height: 1.4; max-width: 340px; }
.setcard { display: grid; gap: 12px; min-width: 0; }
.setcard h3 { font-size: 16px; font-weight: 700; }
.setcard p { margin: 0; }
.setcard .err:empty { display: none; }
a.btn { display: inline-block; text-decoration: none; }
.okdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); margin-right: 8px; vertical-align: 1px; }
.baddot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--support); margin-right: 8px; vertical-align: 1px; }
.codebox { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; border: 1px dashed var(--accent); border-radius: 10px; background: var(--accent-soft); }
.codebox code { font-size: clamp(20px, 5vw, 28px); font-weight: 600; letter-spacing: .04em; color: var(--ink); overflow-wrap: anywhere; min-width: 0; }

/* simple-icons logos carry their brand color, so they sit on a white square in both themes; a monogram is the brand color */

.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

[aria-busy="true"] { cursor: progress; opacity: .7; }

/* gap items (shown under a KSI) */

/* theme toggle (Auto / Light / Dark) */
.themebtn { display: inline-flex; align-items: center; gap: 6px; }
.themebtn svg { width: 15px; height: 15px; }

/* ---------- readability (WCAG AA contrast in both themes) ----------
   Group, stage and status colors are brand-bright: kept as-is for stripes, bars and borders, but text drawn in them is
   darkened in the light theme and lightened in the dark one. */
:root { --mix-to: #000; --mix-text: 52%; --tone-red: #b4233c; --tone-amber: #8a5a00; --tone-green: #13723f;
  --accent: #0060c7; --st-blocked: #d1304a; --on-done: #0b2e1d; --on-in_progress: #2b2a1f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --mix-to: #fff; --mix-text: 52%; --tone-red: #ff8a9b; --tone-amber: #f5c062; --tone-green: #5fd39a;
    --accent: #7ab2ff; --accent-soft: #1f2e50; --st-blocked: #c8324b; }
}
:root[data-theme="dark"] { --mix-to: #fff; --mix-text: 52%; --tone-red: #ff8a9b; --tone-amber: #f5c062; --tone-green: #5fd39a;
  --accent: #7ab2ff; --accent-soft: #1f2e50; --st-blocked: #c8324b; }
nav.side a .n { opacity: 1; }
nav.side a[aria-current="page"] .n { color: inherit; }

/* ---------- KSIs view ---------- */
:root { --k-pass: #00a35e; --k-failing: #d1304a; --k-one: #c77800; --k-none: #8a91a6; --k-pass-ink: #0b6b3d; --k-fail-ink: #a5182f; --k-one-ink: #8a5300; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --on-k-fail: #2a0710; --k-pass: #2fd08a; --k-failing: #ff6b81; --k-one: #ffb547; --k-none: #7d84a0; --k-pass-ink: #5fe0a4; --k-fail-ink: #ff95a5; --k-one-ink: #ffc56e; } }
:root[data-theme="dark"] { --on-k-fail: #2a0710; --k-pass: #2fd08a; --k-failing: #ff6b81; --k-one: #ffb547; --k-none: #7d84a0; --k-pass-ink: #5fe0a4; --k-fail-ink: #ff95a5; --k-one-ink: #ffc56e; }
.kev-banner { display: flex; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--k-pass); border-radius: 8px; padding: 12px 16px; margin: 6px 0 16px; font-size: 13.5px; }
.kev-banner.stale { border-left-color: var(--k-one); }
.kev-banner > div { flex: 1; min-width: 0; }
.kevb-ico { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: color-mix(in srgb, var(--k-pass) 18%, transparent); color: var(--k-pass-ink); flex: none; }
.kev-banner.stale .kevb-ico { background: color-mix(in srgb, var(--k-one) 18%, transparent); color: var(--k-one-ink); }
.kmgmt { display: inline-block; padding: 1px 8px; border: 1px solid var(--line); border-radius: 10px; font-size: 12.5px; font-weight: 600; }
.kwarn { color: var(--k-one-ink); font-weight: 600; }
.kscore { display: flex; gap: 22px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; }
.kbig b { display: block; font-size: 40px; line-height: 1; font-family: var(--f-display); color: var(--k-pass-ink); }
.kbig span { color: var(--muted); font-size: 13px; white-space: nowrap; }
.kbarwrap { flex: 1; min-width: 0; }
.kbar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--line); }
.kbar i { display: block; height: 100%; }
.k-pass { background: var(--k-pass); } .k-failing { background: var(--k-failing); } .k-one_method { background: var(--k-one); } .k-not_measured, .k-no_collector { background: var(--k-none); }
.klegend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.klg { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; background: none; color: var(--ink); font: inherit; font-size: 13px; padding: 2px 8px; border-radius: 999px; cursor: pointer; }
.klg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.klg.on, .klg:hover { border-color: var(--line); background: var(--bg); }
.kcolhead, .khead { display: grid; grid-template-columns: 74px minmax(0, 1fr) 150px 82px 74px 110px 150px; gap: 12px; align-items: center; }
.kcolhead { padding: 8px 14px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); }
.krow { border-bottom: 1px solid var(--line); } .krow:last-child { border-bottom: 0; }
.khead { width: 100%; text-align: left; background: none; border: 0; padding: 11px 14px; font: inherit; color: var(--ink); cursor: pointer; }
.khead:hover { background: var(--row-hover, var(--bg)); }
.krow.open > .khead { background: var(--row-hover, var(--bg)); }
.kverdict { justify-self: start; font-size: 12.5px; font-weight: 800; padding: 4px 12px; border-radius: 6px; letter-spacing: .02em; }
.kverdict.v-pass { background: var(--k-pass); color: #062b19; } .kverdict.v-fail { background: var(--k-failing); color: var(--on-k-fail, #fff); }
.kname { min-width: 0; } .kname b { font-weight: 650; } .kname .tid { font-size: 12px; }
.kname small { display: block; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.kcnew { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 5px; background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
.kreason { justify-self: start; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; background: none !important; }
.kreason.k-pass { color: var(--k-pass-ink); box-shadow: inset 0 0 0 1.5px var(--k-pass); } .kreason.k-failing { color: var(--k-fail-ink); box-shadow: inset 0 0 0 1.5px var(--k-failing); }
.kreason.k-one_method { color: var(--k-one-ink); box-shadow: inset 0 0 0 1.5px var(--k-one); } .kreason.k-not_measured, .kreason.k-no_collector { color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--k-none); }
.kmeth { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; } .kmeth i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--k-none); display: inline-block; }
.kmeth i.on { background: var(--k-pass); border-color: var(--k-pass); } .kmeth b { margin-left: 4px; font-weight: 600; color: var(--muted); }
.kgaps { font-size: 12.5px; color: var(--muted); } .kgaps.has { color: var(--k-fail-ink); font-weight: 700; }
.khist { display: inline-flex; gap: 2px; align-items: center; } .khist i { width: 5px; height: 14px; border-radius: 1.5px; background: var(--k-none); display: inline-block; }
.khist i.kh-pass { background: var(--k-pass); } .khist i.kh-fail { background: var(--k-failing); } .khist i.kh-insufficient { background: var(--k-one); } .khist i.kh-unknown { background: var(--line); }
.khist.none { color: var(--muted); }
.kdetail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; padding: 6px 18px 18px 100px; background: var(--row-hover, var(--bg)); }
.kdetail h4 { margin: 14px 0 6px; } .kdetail .kcol > h4:first-child { margin-top: 6px; }
.kstmt { margin: 0 0 6px; font-size: 14.5px; } .klinks { margin: 0 0 6px; font-size: 13px; }
.kctl { font-size: 12px; line-height: 1.9; } .kctl code { font-family: var(--f-mono); background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.ksmall { font-size: 12.5px; }
.kwhy { margin: 0 0 6px; } .kwhy.kw-pass b { color: var(--k-pass-ink); } .kwhy b { color: var(--k-fail-ink); }
.kmlist { list-style: none; padding: 0; margin: 0 0 8px; font-size: 13px; } .kok { color: var(--k-pass-ink); font-weight: 800; }
.knext { font-size: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; line-height: 1.9; }
.kchipc { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); text-decoration: none; }
.kchipc.on { border-color: var(--k-pass); }
a.kchipc:hover { border-color: var(--accent); }
.kevlist { list-style: none; padding: 0; margin: 0; font-size: 13px; } .kevlist li { display: flex; gap: 8px; padding: 4px 0; border-top: 1px solid var(--line); }
.kev { flex: none; width: 44px; font-size: 11px; font-weight: 800; text-transform: uppercase; padding-top: 2px; } .kev.k-pass { color: var(--k-pass-ink); background: none; } .kev.k-fail { color: var(--k-fail-ink); background: none; } .kev.k-na { color: var(--muted); background: none; }
.ks3 { font-size: 12px; font-weight: 600; }
.ktlist { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 1100px) { .kcolhead { display: none; } .khead { grid-template-columns: 70px minmax(0, 1fr) auto; } .khead .kmeth, .khead .kgaps, .khead .ktasks, .khead .khist { display: none; } .kdetail { grid-template-columns: 1fr; padding-left: 18px; } }
.kdocs { font-size: 12.5px; } .kmetrics { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; margin: 6px 0; } .kmetrics b { margin-right: 4px; }
.trustlink { font-weight: 600; } /* the Commandry Trust Center (GET /meta trust_center_url) */
.kpane .kprow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; }
.kpane .kprow small { display: block; color: var(--muted); font-size: 12.5px; }
.kmap { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); font-style: italic; }
@media (max-width: 640px) {
  .kev-banner { flex-wrap: wrap; }
  .kev-banner > div { flex: 1 1 calc(100% - 44px); min-width: 0; overflow-wrap: anywhere; }
  .kev-banner > .btn { margin-left: 40px; }
}

/* sign-in & security */
.pkcard { margin-bottom: 16px; }
.pkname { display: flex; flex-direction: column; gap: 4px; margin: 12px 0; font-size: 13px; color: var(--muted); max-width: 320px; }
.pkname input { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
.pklist { list-style: none; padding: 0; margin: 8px 0 12px; }
.pklist li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.pklist li span { display: flex; flex-direction: column; } .pklist small { color: var(--muted); }
table.ppl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.ppl td, table.ppl th { text-align: left; padding: 7px 8px; border-top: 1px solid var(--line); vertical-align: top; }
table.ppl th { font-size: 12px; color: var(--muted); font-weight: 600; border-top: 0; }
table.ppl tr.off td { opacity: .65; }
.pplact { white-space: nowrap; } .pplact .linkbtn { margin-left: 10px; }
#ppl-add input { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); min-width: 0; }
/* Phones: People keeps its actions (stacked) and drops Last sign-in; the sign-in log drops the address column (header
   and cells alike). Long emails and addresses break instead of widening the page. */
@media (max-width: 640px) {
  .pplact { white-space: normal; } .pplact .linkbtn { display: block; margin: 4px 0 0; }
  table.ppl.people td:nth-child(3), table.ppl.people th:nth-child(3), table.ppl.log td:nth-child(4), table.ppl.log th:nth-child(4) { display: none; }
  table.ppl td { overflow-wrap: anywhere; }
}

/* the passkey nudge in the header */
.pknudge { font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; }

/* Confirm it is you: the passkey prompt before a sensitive change (app.js reauth) */
dialog.reauth { border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; max-width: min(420px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); }
dialog.reauth::backdrop { background: rgba(0, 0, 0, .35); }
dialog.reauth .row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
/* Commandry sign-in (OIDC): break-glass passkey sign-in, folded below the main button */
.breakglass summary { cursor: pointer; font-weight: 600; }
.breakglass[open] summary { margin-bottom: 8px; }

/* ---------- accessibility: Section 508 / WCAG 2.1 AA (docs/ACCESSIBILITY.md) ---------- */
/* Skip link: the first Tab stop, shown when it has focus */
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 6px; background: var(--accent); color: #fff;
  font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; outline: 3px solid var(--ink); outline-offset: 2px; }
/* Focus moved by the app (main after the skip link, a view's h1 after navigation): no ring for a mouse click, a ring
   for the keyboard. Side panels are focused when they open. */
main:focus { outline: none; }
#app h1[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
#app h1[tabindex="-1"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.apanel:focus-visible, .cmd-panel:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
/* Form fields show where focus is too (some only change their border color otherwise) */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Red text reads at 4.5:1 in both themes (the bright red stays for fills, stripes and borders) */
.rcn, .tast.s-blocked { color: var(--tone-red); }
/* Not applicable: dark text on its grey-blue (white on it is 2.3:1) */
:root { --on-not_applicable: #1f2433; }
/* People with access turned off: greyed by a muted color that still reads, not by opacity */
table.ppl tr.off td { opacity: 1; color: var(--muted); }
table.ppl tr.off td b { color: var(--muted); }
/* Respect "reduce motion" everywhere (flashes, slides, smooth scrolling, spinners) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* Status is never told by color alone (WCAG 1.4.1). Fills that stand for a status carry a pattern as well:
   Started is striped, Stuck cross-hatched, Not applicable struck through; Done and Not started stay plain (light vs
   strong). The legends' swatches use the same patterns. Squares and chips carry a symbol. */
:root {
  --pat-started: repeating-linear-gradient(135deg, rgba(0, 0, 0, .24) 0 2px, transparent 2px 6px);
  --pat-stuck: repeating-linear-gradient(45deg, rgba(255, 255, 255, .6) 0 1.5px, transparent 1.5px 5px), repeating-linear-gradient(135deg, rgba(255, 255, 255, .6) 0 1.5px, transparent 1.5px 5px);
  --pat-na: linear-gradient(transparent calc(50% - 1px), rgba(0, 0, 0, .5) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
}
.b-in_progress, .c-in_progress { background-image: var(--pat-started); }
.b-blocked, .c-blocked { background-image: var(--pat-stuck); }
.b-not_applicable, .c-not_applicable { background-image: var(--pat-na); }
.kbar i.k-failing, .klg i.k-failing { background-image: var(--pat-stuck); }
.kbar i.k-one_method, .klg i.k-one_method { background-image: var(--pat-started); }
.kbar i.k-not_measured, .kbar i.k-no_collector, .klg i.k-not_measured { background-image: var(--pat-na); }
.sq::after { display: block; text-align: center; font-size: 14px; font-weight: 800; line-height: 26px; content: ""; }
.sq.s-done::after { content: "✓"; content: "✓" / ""; color: var(--on-done); }
.sq.s-in_progress::after { content: "▶"; content: "▶" / ""; font-size: 10px; color: var(--on-in_progress); }
.sq.s-blocked::after { content: "!"; content: "!" / ""; color: var(--on-blocked); }
.sq.s-not_applicable::after { content: "–"; content: "–" / ""; color: var(--on-not_applicable); }
.sq.na::after { content: "·"; content: "·" / ""; color: var(--muted); }
.tacells .sq::after { display: none; }
.ach.s-done::before { content: "✓ "; content: "✓ " / ""; } .ach.s-in_progress::before { content: "▶ "; content: "▶ " / ""; font-size: 9px; }
.ach.s-blocked::before { content: "! "; content: "! " / ""; } .ach.s-not_applicable::before { content: "– "; content: "– " / ""; }
/* KSI validation history: a failed run is a short tick, a pass a full one (and their colors) */
.khist i.kh-fail { height: 6px; } .khist i.kh-insufficient { height: 10px; } .khist i.kh-unknown { height: 3px; }
/* Reflow at 320 px (WCAG 1.4.10): hidden text stays inside its cell (an absolutely placed span would otherwise escape
   the matrix's own scroll box and widen the page), segmented buttons wrap, the asset filter fits the width. */
.sq.na, .fbar.na, .task .head .role { position: relative; }
.afsel select { min-width: 0; }
@media (max-width: 640px) {
  .seg { flex-wrap: wrap; max-width: 100%; }
  .afsel { min-width: 0; max-width: 100%; }
  .afsel select { width: 100%; }
}
/* Form fields and checkboxes are told apart from the page at 3:1 (WCAG 1.4.11 non-text contrast) */
:root { --field-line: #878a9c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --field-line: #7c84a8; } }
:root[data-theme="dark"] { --field-line: #7c84a8; }
input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], select, textarea { border-color: var(--field-line) !important; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--tone-green); }

/* ---------- KSI status bar (KSIs view and Team progress): every KSI in one stacked bar of four categories, each with
   its count and share, a legend with the Class C rule, the trend over recent runs and a mini bar per FedRAMP theme.
   Each category has a pattern and an icon as well as its color (WCAG 1.4.1): Passing solid with a check, Partial
   diagonal stripes, Failing cross-hatched, Not measured grey stripes. Counts sit on a surface-colored pill so the
   text keeps its contrast over any fill. */
:root {
  --ks-pass: var(--k-pass); --ks-partial: var(--k-one); --ks-failing: var(--k-failing); --ks-none: var(--k-none);
  --ks-pat-partial: repeating-linear-gradient(135deg, rgba(0, 0, 0, .22) 0 3px, transparent 3px 8px);
  --ks-pat-failing: repeating-linear-gradient(45deg, rgba(255, 255, 255, .55) 0 1.5px, transparent 1.5px 6px), repeating-linear-gradient(135deg, rgba(255, 255, 255, .55) 0 1.5px, transparent 1.5px 6px);
  --ks-pat-none: repeating-linear-gradient(45deg, rgba(255, 255, 255, .5) 0 3px, transparent 3px 7px);
}
.kscard { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px 16px; margin-bottom: 16px; }
.kshead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-bottom: 14px; }
.kshead .kbig { display: flex; align-items: baseline; gap: 10px; }
.kshead .kbig span { font-size: 14px; color: var(--ink); white-space: normal; }
.ksdelta { font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1.5px solid var(--line); white-space: nowrap; }
.ksdelta.up { color: var(--k-pass-ink); border-color: var(--k-pass); }
.ksdelta.down { color: var(--k-fail-ink); border-color: var(--k-failing); }
.ksdelta.same, .ksdelta.none { color: var(--muted); }
.ksmeta { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; }
.ksrun { color: var(--ink); }
.ksig { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.ksig.ok { color: var(--k-pass-ink); background: color-mix(in srgb, var(--k-pass) 14%, var(--surface)); box-shadow: inset 0 0 0 1.5px var(--k-pass); }
.ksig.warn { color: var(--k-one-ink); background: color-mix(in srgb, var(--k-one) 14%, var(--surface)); box-shadow: inset 0 0 0 1.5px var(--k-one); }
a.ksig:hover { text-decoration: underline; }
.ksbar { display: flex; gap: 3px; height: 40px; }
.kseg { flex: 1 1 0; min-width: 34px; display: flex; align-items: center; justify-content: center; border: 0; padding: 0 4px; margin: 0; overflow: hidden; font: inherit; color: var(--ink); cursor: default;
  border-radius: 4px; transition: flex-grow .35s ease, filter .15s; }
.kseg:first-child { border-radius: 9px 4px 4px 9px; } .kseg:last-child { border-radius: 4px 9px 9px 4px; } .kseg:only-child { border-radius: 9px; }
button.kseg { cursor: pointer; }
button.kseg:hover { filter: brightness(1.06) saturate(1.1); }
button.kseg:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
button.kseg[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--ink); }
/* While one segment filters, the others fade: a surface wash over the fill only (the count pill keeps its contrast) */
.ksbar:has(button.kseg[aria-pressed="true"]) button.kseg[aria-pressed="false"] { box-shadow: inset 0 0 0 100px color-mix(in srgb, var(--surface) 60%, transparent); }
.ks-pass { background-color: var(--ks-pass); }
.ks-partial { background-color: var(--ks-partial); background-image: var(--ks-pat-partial); }
.ks-failing { background-color: var(--ks-failing); background-image: var(--ks-pat-failing); }
.ks-not_measured { background-color: var(--ks-none); background-image: var(--ks-pat-none); }
.ksl { display: inline-flex; align-items: baseline; gap: 4px; background: var(--surface); color: var(--ink); border-radius: 999px; padding: 2px 9px; font-size: 13px; line-height: 1.3; white-space: nowrap; max-width: 100%; overflow: hidden; }
.ksl b { font-weight: 800; font-variant-numeric: tabular-nums; } .ksl small { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ksico { font-weight: 800; font-size: 12px; }
.ks-pass .ksico, .kssw.ks-pass { color: var(--k-pass-ink); } .ks-partial .ksico { color: var(--k-one-ink); } .ks-failing .ksico { color: var(--k-fail-ink); } .ks-not_measured .ksico { color: var(--muted); }
.kseg.narrow .ksl small { display: none; }
.kseg.narrow .ksl { padding: 2px 6px; }
.kslegend { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 18px; }
.kslegend li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; }
.kslegend small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.4; margin-top: 1px; }
.kslc { font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.kssw { flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-weight: 800; font-size: 12px; margin-top: 1px; }
.kssw i { font-style: normal; width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); font-size: 10px; line-height: 1; } /* the icon on a surface dot reads on any fill */
.kssw.ks-partial i { color: var(--k-one-ink); } .kssw.ks-failing i { color: var(--k-fail-ink); } .kssw.ks-not_measured i { color: var(--muted); }
.ksfoot { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 28px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.ksrule { flex: 1 1 340px; margin: 0; font-size: 13px; color: var(--ink); background: var(--accent-soft); border-radius: 8px; padding: 9px 12px; border-left: 3px solid var(--accent); }
.kstrend { margin: 0; display: grid; gap: 4px; flex: 0 1 auto; max-width: 100%; }
.kstrend svg { display: block; max-width: 100%; height: 44px; }
.kstrend figcaption { font-size: 12.5px; color: var(--muted); } .kstrend figcaption b { color: var(--ink); }
.kst-track { fill: var(--line); } .kst-pass { fill: var(--k-pass); opacity: .7; } .kst-pass.now { opacity: 1; }
.ksthh { margin: 16px 0 8px; }
.kthemes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.kth { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; align-items: baseline; text-align: left; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.kth:hover { border-color: var(--accent); }
.kth[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); background: var(--accent-soft); }
.kthn { min-width: 0; overflow-wrap: anywhere; line-height: 1.35; } .kthn .tid { font-weight: 700; }
.kthc { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kthbar { grid-column: 1 / -1; display: flex; gap: 2px; height: 8px; }
.kthbar i { flex: 1 1 0; min-width: 4px; border-radius: 2px; }
.ksfilter { margin: 0 0 12px; font-size: 13.5px; }
@media (max-width: 900px) { .kslegend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .kscard { padding: 14px 14px 12px; }
  .ksmeta { margin-left: 0; }
  .kseg .ksl small { display: none; }
  .kslegend { grid-template-columns: minmax(0, 1fr); }
  .kthemes { grid-template-columns: minmax(0, 1fr); }
  .ksbar { height: 36px; }
  .kseg { min-width: 28px; }
}
@media (max-width: 400px) { .kseg .ksl .ksico { display: none; } .kseg .ksl { padding: 2px 5px; } }
@media (prefers-reduced-motion: reduce) { .kseg { transition: none; } }
@media (forced-colors: active) { .kseg, .kthbar i, .kssw { border: 1px solid CanvasText; } button.kseg[aria-pressed="true"] { outline: 3px solid Highlight; } }

/* ---------- UX pass: signed-out screens, phones, the session-ended dialog ---------- */
/* Signed out (log-in, sign-in, invite and the server's sign-in pages): one centered column, no menu. */
body.signed-out .shell { grid-template-columns: minmax(0, 1fr); max-width: 940px; }
body.signed-out nav.side { display: none; }
dialog.reauth.ended h2 { margin: 0 0 8px; }
dialog.reauth.ended p { margin: 0 0 4px; }
dialog.reauth.idle-warning h2 { margin: 0 0 8px; }
dialog.reauth.idle-warning p { margin: 0 0 4px; }
@media (max-width: 600px) {
  /* A compact masthead: the brand and one line of who is signed in, so the page starts higher. */
  .masthead { padding-inline: 16px; }
  .masthead-inner { padding-block: 10px; gap: 6px; }
  .brand small { display: none; }
  .brand-mark { width: 26px; height: 26px; }
  .mast-meta { gap: 6px 12px; }
  .mast-meta .themebtn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .shell { padding-inline: 16px; padding-block-start: 14px; }
}
/* Settings: why a sign-in event happened; the audit trail check. */
.evwhy { display: block; font-size: 12px; color: var(--muted); }
#ledger-out p { margin: 10px 0 0; }
.ldok b { color: var(--ink); }

/* ---------- UX follow-ups: the Change email dialog, the Documents step's count, long names at 320 px ---------- */
/* Settings > People & access: Change email / Set email (app.js emailDialog), a dialog like "Confirm it is you". */
dialog.emaildlg h2 { margin: 0 0 8px; overflow-wrap: anywhere; }
dialog.emaildlg p { margin: 0 0 8px; }
dialog.emaildlg label { display: block; margin: 12px 0 4px; font-size: 13.5px; font-weight: 600; }
dialog.emaildlg input[type="email"] { font: inherit; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
dialog.emaildlg input[aria-invalid="true"] { border-color: var(--warn) !important; box-shadow: 0 0 0 1px var(--warn); }
dialog.emaildlg .err { margin: 6px 0 0; }
dialog.emaildlg .err:empty { margin: 0; }
.emwarn { padding: 8px 10px; border-radius: 8px; background: var(--warn-soft); color: var(--ink); font-size: 13.5px; }
/* Settings > Collector connection */
.cc-field { display: grid; gap: 4px; }
.cc-field input, .cc-field select { max-width: 520px; }
#cc-tf { overflow-x: auto; white-space: pre; padding: 12px; margin: 0; }
/* Resources (P1-RES-01) */
.resfilters { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; margin: 6px 0 14px; }
.resfield { display: grid; gap: 3px; min-width: 0; }
.resfield label { font-size: 12px; color: var(--muted); font-weight: 600; }
.resfield input, .resfield select { font: inherit; font-size: 13px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); min-width: 0; max-width: 100%; width: 170px; }
.resbtns { display: flex; flex-direction: row; gap: 8px; }
.reswrap { overflow-x: auto; }
table.resources td { overflow-wrap: anywhere; }
table.resources .sortbtn { font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; }
table.resources .sortbtn:hover { color: var(--ink); }
.respager { margin: 12px 0; }
.resgaps { padding-left: 18px; }
pre.resdata { overflow: auto; max-height: 70vh; padding: 12px; margin: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Audit trail entries (#audit; P1-LED-13): a filter row, the table of entries and an entry's panel. */
.au-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 0 0 16px; max-width: 1100px; }
.au-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.au-field label { font-size: 12px; font-weight: 600; color: var(--muted); }
.au-field input, .au-field select { font: inherit; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); max-width: 100%; }
.au-actions { flex-direction: row; gap: 8px; }
table.autable td, table.autable th { overflow-wrap: anywhere; }
table.autable tr.auoff td { color: var(--muted); }
table.autable .linkbtn { text-align: left; }
.audl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0 0 14px; font-size: 13.5px; }
.audl dt { color: var(--muted); font-weight: 600; }
.audl dd { margin: 0; overflow-wrap: anywhere; min-width: 0; }
.aupane h3 { font-size: 14px; margin: 16px 0 6px; }
.auhash { font-size: 12px; word-break: break-all; }
@media (max-width: 640px) { .audl { grid-template-columns: 1fr; } .audl dt { margin-top: 4px; } }
.rs-list { width: 100%; max-width: 520px; box-sizing: border-box; font: inherit; }