/* 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; }

.rail { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-left: 2px solid var(--line); }
.rail li { position: relative; padding: 8px 0 8px 22px; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; }
.rail li::before { content: ""; position: absolute; left: -7px; top: 15px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); }
.rail .pn { font-family: var(--f-mono); font-size: 12px; color: var(--accent); font-weight: 600; }
.rail .pt { font-weight: 600; }
.rail .pc { font-family: var(--f-mono); font-size: 12px; color: var(--muted); white-space: nowrap; }

.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; gap: 8px; margin-bottom: 18px; max-width: 780px; }
.phead h1 { font-size: clamp(26px, 3.6vw, 34px); font-weight: 800; }
.phead p { margin: 0; color: var(--muted); }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 8px; position: sticky; top: env(safe-area-inset-top, 0px); background: var(--bg); padding-block: 10px; z-index: 2; border-bottom: 1px solid var(--line); }
.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; }
.toolbar input { 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; flex: 1 1 180px; max-width: 320px; }
.toolbar .tools-right { margin-left: auto; display: flex; gap: 8px; }
.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); }

.phase-group { margin-top: 26px; }
.phase-group h2 { font-size: 15px; font-weight: 700; display: flex; gap: 10px; align-items: baseline; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.phase-group h2 .pn { font-family: var(--f-mono); color: var(--accent); }
.phase-group h2 .pc { margin-left: auto; font-family: var(--f-mono); font-weight: 400; font-size: 12px; color: var(--muted); }
details.task { border-bottom: 1px solid var(--line); }
details.task > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 34px 62px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 11px 4px; }
details.task > summary::-webkit-details-marker { display: none; }
details.task > summary:hover { background: var(--accent-soft); }
.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); }
.ttl { font-weight: 600; min-width: 0; }
.ttl small { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); }
.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); }
.role.sup { background: var(--support-soft); color: var(--support); }
.tbody { padding: 4px 4px 18px 110px; display: grid; gap: 14px; }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 20px; }
.kv div { min-width: 0; }
.kv dt { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.kv dd { margin: 2px 0 0; font-size: 13.5px; }
.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 { font-size: 13px; color: var(--muted); display: grid; gap: 6px; }
.req p { margin: 0; }
.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); }
.srcs { font-size: 12.5px; display: flex; flex-direction: column; gap: 2px; word-break: break-all; }
.empty { padding: 24px 0; color: var(--muted); }
footer.foot { margin-top: 48px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; }

@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; }
  .tbody { padding-left: 4px; }
  details.task > summary { grid-template-columns: 56px minmax(0, 1fr); }
  details.task > summary .step { display: none; }
  details.task > summary .role { grid-column: 2; justify-self: start; }
  .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); }
.rolepick { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.rolepick label { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px 10px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; align-content: start; }
.rolepick label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.rolepick input { margin: 3px 0 0; accent-color: var(--accent); width: 16px; height: 16px; }
.rolepick b { font-size: 15px; }
.rolepick small { grid-column: 2; color: var(--muted); font-size: 12.5px; }
.rolepick .counts { grid-column: 2; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

.meter { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; display: flex; }
.meter i { display: block; height: 100%; }
.meter .m-done { background: var(--ok); } .meter .m-na { background: var(--muted); } .meter .m-prog { background: var(--accent); opacity: .55; } .meter .m-blk { background: var(--warn); }
.mystats { display: grid; gap: 8px; max-width: 640px; margin-bottom: 20px; }
.mystats .row span { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

.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; }
.next .doneline { font-size: 14px; color: var(--muted); }
.next .doneline b { color: var(--ok); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin-right: 6px; }
.next.all-done { border-color: var(--ok); }

.task { border-bottom: 1px solid var(--line); }
.task .head { display: grid; grid-template-columns: 22px 62px minmax(0, 1fr) auto 150px; gap: 10px; align-items: center; padding: 9px 4px; }
.task .head:hover { background: var(--accent-soft); }
.task input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--ok); margin: 0; cursor: pointer; }
.task .ttl { text-align: left; font: inherit; font-weight: 600; background: none; border: 0; color: var(--ink); cursor: pointer; padding: 0; min-width: 0; }
/* Done is the target: full color, no strike-through. Only Not applicable is muted. */
.task.closed:not(.st-done) .ttl { color: var(--muted); }
.task.flash { animation: flash 1.6s ease-out; }
@keyframes flash { from { background: var(--accent-soft); } to { background: transparent; } }
.task .tbody { padding: 4px 4px 18px 104px; }
.task:not(.open) .tbody { display: none; }
.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); }
.who-did { font-size: 12.5px; color: var(--muted); }
.phase-group h2 .pc { font-variant-numeric: tabular-nums; }
.phase-group.complete h2 { border-bottom-color: var(--ok); }
.phase-group.complete h2 .pc { color: var(--ok); font-weight: 600; }
.toggle { font-size: 13px; display: inline-flex; gap: 6px; align-items: center; cursor: pointer; white-space: nowrap; }
.toolbar .toggle input { flex: none; min-width: 0; padding: 0; margin: 0; } /* the search-box rule above must not stretch the checkbox */
.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); }
.rail li .meter { grid-column: 2 / 4; }

@media (max-width: 860px) {
  .task .head { grid-template-columns: 22px minmax(0, 1fr) 130px; }
  .task .head .tid { display: none; }
  .task .head .role { display: none; }
  .toolbar { position: static; } /* a sticky three-row toolbar would cover a third of a phone screen */
  .task .tbody { padding-left: 4px; }
  .dates div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { .task.flash { animation: none; } .toast { transition: none; } }



/* ---------- monday-style board ---------- */
/* Layout: board of colored groups (Up next, Started, Stuck, Done) above a task pool grouped by phase; each row is a grid with a full-height status cell. */
: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); }
.battery { display: flex; height: 22px; border-radius: 4px; overflow: hidden; background: var(--st-not_started); }
.battery i { display: block; min-width: 4px; }
.summary { display: grid; gap: 10px; margin-bottom: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }
.sumhead { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; justify-content: space-between; }
.sumhead > b { font-size: 16px; }
.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; }
.dotc { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }

.group { margin-top: 26px; }
.ghead { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; padding-bottom: 8px; }
.gtoggle { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--gc); font: inherit; font-size: 18px; font-weight: 700; }
.caret { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid var(--gc); transition: transform .15s; }
.group.collapsed .caret { transform: rotate(-90deg); }
.gcount { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ghint { font-size: 13px; color: var(--muted); }
.ghint::before { content: "·"; margin-right: 10px; }
.gbat { flex: 1 1 160px; max-width: 260px; margin-left: auto; }
.gbat .battery { height: 14px; }
.gbody { background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--gc); border-radius: 6px; overflow: hidden; }
.group.collapsed .gbody { display: none; }
.gempty { padding: 14px 16px; color: var(--muted); font-size: 13.5px; }
.poolhead { margin-top: 44px; padding-top: 18px; border-top: 2px solid var(--line); display: grid; gap: 4px; }
.poolhead h2 { font-size: 22px; font-weight: 800; }
.poolhead p { margin: 0; color: var(--muted); font-size: 13.5px; }

.colhead, .task .head { display: grid; grid-template-columns: 40px minmax(0, 1fr) 64px 52px 100px 136px 132px; align-items: stretch; }
.colhead { font-size: 12.5px; color: var(--muted); border-bottom: 1px solid var(--line); }
.colhead span { padding: 7px 10px; text-align: center; }
.colhead span:nth-child(2) { text-align: left; }
.colhead span + span, .task .head > * + * { border-left: 1px solid var(--line); }
.task { border-bottom: 1px solid var(--line); }
.task:last-child { border-bottom: 0; }
.task .head { min-height: 42px; padding: 0; gap: 0; }
.task .head:hover { background: var(--row-hover); }
.task .head > * { display: flex; align-items: center; justify-content: center; min-width: 0; }
.task input[type=checkbox] { width: 16px; height: 16px; margin: auto; accent-color: var(--st-done); cursor: pointer; }
.task .ttl { justify-content: flex-start; gap: 10px; padding: 8px 12px; font-weight: 500; text-align: left; }
.task .ttl .tid { flex: none; font-size: 12px; }
.task .ttl .tt { min-width: 0; }
.task.closed:not(.st-done) .ttl { color: var(--muted); }
.startbtn { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--accent); background: none; border: 0; cursor: pointer; }
.startbtn:hover { background: var(--accent-soft); }
.phasechip { font-family: var(--f-mono); font-size: 12px; font-weight: 600; color: var(--pc); }
.task .head .role { border-radius: 0; background: none; font-size: 11px; white-space: normal; text-align: center; line-height: 1.2; letter-spacing: .02em; padding: 4px 6px; overflow: hidden; cursor: default; }
/* the role name wraps onto 2 lines; fitRoles() switches a cell to initials when it still overflows */
.task .head .role .rfull { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-width: 0; max-width: 100%; overflow-wrap: normal; word-break: normal; }
.role .rini { display: none; }
.task .head .role.ini .rfull { display: none; }
.task .head .role.ini .rini { display: inline; font-size: 12px; letter-spacing: .04em; }
.task .head .role.own { color: var(--accent); } .task .head .role.sup { color: var(--support); }
.stcell { font: inherit; font-size: 13px; font-weight: 600; border: 0; cursor: pointer; padding: 6px 8px; width: 100%; height: 100%; text-align: center; }
.stcell.s-done { background: var(--st-done); color: var(--on-done); }
.stcell.s-in_progress { background: var(--st-in_progress); color: var(--on-in_progress); }
.stcell.s-blocked { background: var(--st-blocked); color: var(--on-blocked); }
.stcell.s-not_started { background: var(--st-not_started); color: var(--on-not_started); }
.stcell.s-not_applicable { background: var(--st-not_applicable); color: var(--on-not_applicable); }
.stcell:hover { filter: brightness(.95); }
.upd { flex-direction: column; font-size: 12.5px; line-height: 1.25; padding: 4px 8px; text-align: center; }
.upd small { color: var(--muted); font-size: 11px; }
.empty-cell { color: var(--muted); }
.task .tbody { padding: 14px 16px 18px 52px; border-top: 1px solid var(--line); background: var(--bg); }
.task.flash .head { animation: flash 1.8s ease-out; }
@keyframes flash { from { background: var(--accent-soft); } to { background: transparent; } }

.stmenu { position: absolute; z-index: 40; width: 190px; display: grid; gap: 6px; padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.stmenu .stcell { height: 34px; border-radius: 4px; }
.stmenu .stcell:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (max-width: 860px) {
  .colhead { display: none; }
  .task .head { grid-template-columns: 34px minmax(0, 1fr) 50px 100px; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .ghint { flex-basis: 100%; }
  .ghint::before { content: none; }
  .task .head .phasechip, .task .head .role, .task .head .upd { display: none; }
  .task .ttl { flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; }
  .task .ttl .tid { display: inline; }
  .task .tbody { padding-left: 12px; }
  .gbat { flex-basis: 100%; max-width: none; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .caret { transition: none; } .task.flash .head { animation: none; } }
.rail li .battery { grid-column: 2 / 4; height: 10px; }
.mystats .battery { max-width: none; }
.stat.k { border-top: 4px solid var(--kc); padding-top: 8px; min-width: 90px; }
/* Start column only in Up next */
.group:not(#g-next) .colhead, .group:not(#g-next) .task .head { grid-template-columns: 40px minmax(0, 1fr) 52px 100px 136px 132px; }
.group:not(#g-next) .startgap, .group:not(#g-next) .colhead span:nth-child(3) { display: none; }
.upd { white-space: nowrap; }
.upd, .upd small { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mine-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--st-done); margin-left: 7px; vertical-align: 1px; }
nav.side a[aria-current="page"] .mine-dot { background: var(--surface); }
@media (max-width: 860px) {
  .task .head { grid-template-columns: 34px minmax(0, 1fr) 50px 90px; }
  .group:not(#g-next) .task .head { grid-template-columns: 34px minmax(0, 1fr) 90px; }
}

/* ---------- Next-tasks checkbox, evidence ---------- */
.task .head > .chk { display: flex; align-items: center; justify-content: center; }
.task input.qchk { accent-color: var(--g-next); }
.qgroup .colhead span:first-child { color: var(--g-next); font-weight: 700; }
.evb { flex: none; font-size: 11px; font-weight: 600; line-height: 1; padding: 4px 7px; border-radius: 10px; background: var(--ok-soft); color: var(--ok); white-space: nowrap; }
.evi { border: 1px dashed var(--line); border-radius: 6px; padding: 12px 14px; background: var(--surface); display: grid; gap: 10px; }
.evi.drag { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.evi.flash { animation: flash 1.8s ease-out; }
.evhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.evreq { font-size: 12.5px; color: var(--warn); font-weight: 600; }
.evreq.opt { color: var(--muted); font-weight: 400; }
.evempty { margin: 0; font-size: 13px; color: var(--muted); }
.evlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.evlist li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; font-size: 13.5px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.evlist li:last-child { border-bottom: 0; }
.evname { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.evname small { font-weight: 400; color: var(--muted); }
.evmeta { font-size: 12px; color: var(--muted); }
.evdel { margin-left: auto; font-size: 12.5px; color: var(--st-blocked); }
.evup { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.evpick { position: relative; font-size: 13px; padding: 6px 12px; }
.evpick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.evpick:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.evhint { font-size: 12.5px; color: var(--muted); }
@media (max-width: 860px) { .task .ttl .evb { margin-top: 2px; } }
@media (prefers-reduced-motion: reduce) { .evi.flash { animation: none; } }
.task.closed.st-done .ttl > .evb { text-decoration: none; }

/* ---------- level of effort (work days, 0.5 to 250; tiers: <=2 light, <=10 medium, >10 heavy) ---------- */
:root {
  --eff1: #e7e3fb; --on-eff1: #4a3aa8; --eff2: #a796ef; --on-eff2: #1d1452; --eff3: #5b45cf; --on-eff3: #ffffff; --eff-mark: #ff7575;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --eff1: #474d86; --on-eff1: #e4dfff; --eff2: #6e5ed8; --on-eff2: #ffffff; --eff3: #b3a4ff; --on-eff3: #1a1342; --eff-mark: #ff8f8f; }
}
:root[data-theme="dark"] { --eff1: #474d86; --on-eff1: #e4dfff; --eff2: #6e5ed8; --on-eff2: #ffffff; --eff3: #b3a4ff; --on-eff3: #1a1342; --eff-mark: #ff8f8f; }
.colhead, .task .head { grid-template-columns: 40px minmax(0, 1fr) 64px 52px 60px 100px 136px 132px; }
.group:not(#g-next) .colhead, .group:not(#g-next) .task .head { grid-template-columns: 40px minmax(0, 1fr) 52px 60px 100px 136px 132px; }
.eff { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 24px; padding: 0 7px; border-radius: 12px; white-space: nowrap; border: 0;
  font: inherit; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; cursor: pointer; }
.eff.e1 { background: var(--eff1); color: var(--on-eff1); }
.eff.e2 { background: var(--eff2); color: var(--on-eff2); }
.eff.e3 { background: var(--eff3); color: var(--on-eff3); }
.eff.e0 { background: var(--line); color: var(--muted); cursor: default; }
.eff.ovr::after { content: ""; position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--eff-mark); border: 2px solid var(--surface); }
button.eff:hover:not([disabled]) { filter: brightness(.94); }
button.eff:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.task .head .effcol { padding: 0 4px; }
.effin { display: none; }
.geff { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.geff { margin-left: -6px; }
.geff::before { content: "·"; margin-right: 6px; }
.sumeff { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sumeff b { color: var(--ink); }
.effkv .effnote { color: var(--muted); font-size: 12.5px; }
.effkv .linkbtn { font-size: 12.5px; padding: 0 2px; }
.effkv .effwhy { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.effmenu { position: absolute; z-index: 40; width: 252px; display: grid; gap: 8px; padding: 10px 12px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.effmhead { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.effmhead small { display: block; font-weight: 400; color: var(--muted); font-size: 11.5px; }
.effform { display: flex; gap: 8px; align-items: center; }
.effnumlab { flex: 1; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.effnum { width: 76px; font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
.effnum:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.effnum[aria-invalid="true"] { border-color: var(--st-blocked, #d14343); }
.effsave { padding: 5px 12px; font-size: 13px; }
.efferr { margin: 0; font-size: 12px; color: var(--st-blocked, #d14343); }
.efferr:empty { display: none; }
.effpresets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.effpresets .eff { width: 100%; height: 30px; border-radius: 6px; padding: 0; }
.effpresets .eff.cur { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.effpresets .eff:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.effreset { justify-self: start; font-size: 12.5px; padding: 2px 0; }
.effmnote { font-size: 11.5px; color: var(--muted); }
.effmnote:empty { display: none; }
@media (max-width: 860px) {
  .task .head .effcol { display: none; }
  .effin { display: inline-flex; height: 20px; min-width: 24px; padding: 0 6px; font-size: 11px; cursor: inherit; }
  .task .ttl .effin { margin-top: 2px; }
  .task .head { grid-template-columns: 34px minmax(0, 1fr) 50px 90px; }
  .group:not(#g-next) .task .head { grid-template-columns: 34px minmax(0, 1fr) 90px; }
  .sumeff { flex-basis: 100%; }
}
.task.closed.st-done .ttl > .effin { text-decoration: none; }

/* ---------- assets board: asset classes x KSI families ---------- */
: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; }
.famtog { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-family: var(--f-mono); font-size: 12px; font-weight: 600; color: var(--ink); background: none; border: 0; cursor: pointer; padding: 8px 6px; width: 100%; justify-content: center; }
.famtog small { color: var(--muted); font-weight: 400; }
.famtog .caret { --gc: var(--muted); border-width: 5px 4px 0; border-left-width: 4px; border-right-width: 4px; border-top-width: 6px; transform: rotate(-90deg); }
.famtog[aria-expanded="true"] .caret { transform: none; }
.amx th.fam { min-width: 64px; }
.amx th.fam.open { background: var(--accent-soft); }
.famtog:hover { background: var(--row-hover); }
.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; }
.fbar { display: block; width: 100%; min-width: 52px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 4px; }
.fbar:hover { box-shadow: 0 0 0 2px var(--accent); }
.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; }
.apback { justify-self: start; padding: 0; font-size: 12.5px; }
.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; }
.apsec { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.apsec > .btn { justify-self: start; }
.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; }
.cstat .stcell { width: auto; min-width: 150px; height: 38px; padding: 0 16px; border-radius: 6px; }
.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; }
.tlset .adminnote { margin: 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); }
.apbody .kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.apbody .kv .wide { grid-column: 1 / -1; }
.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; }
  .afilt .tools-right { margin-left: 0; }
  .aphead { padding: 14px 48px 10px 16px; }
  .apbody { padding: 12px 16px 28px; }
}

/* "All" persona card in the role picker */
.rolepick label.allpick { border-style: dashed; border-color: var(--accent); }
.rolepick label.allpick b { color: var(--accent); }
.seg[hidden] { display: none; }

/* ---------- asset classes on task rows ---------- */
.task .ttl .tmain { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 0 1 auto; }
.task.closed.st-done .ttl > .tmain { text-decoration: none; }
.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); }
.evb.recheck { background: var(--st-blocked); color: #fff; }
.task.closed.st-done .ttl > .evb.recheck { text-decoration: none; }
.grecheck { font-size: 12px; font-weight: 700; color: #fff; background: var(--st-blocked); border-radius: 10px; padding: 2px 8px; }
.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; }
.tassets.flash { animation: flash 1.8s ease-out; }
.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; }
}
@media (prefers-reduced-motion: reduce) { .tassets.flash { animation: none; } }

/* ---------- roll-ups and per-asset child tasks ---------- */
.rfold { width: 100%; height: 100%; min-height: 40px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; --gc: var(--ink); }
.rfold .caret { border-top-color: var(--ink); }
.task.rfolded .rfold .caret { transform: rotate(-90deg); }
.rfold:hover { background: var(--accent-soft); }
.task.rollup > .head { background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
.task.rollup .ttl { font-weight: 600; }
.rprog { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.rprog .battery { width: 90px; height: 8px; flex: none; }
.rpn { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rpill { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 13px; font-weight: 600; cursor: help;
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .18) 0 6px, transparent 6px 12px); }
.rpill.s-done { background-color: var(--st-done); color: var(--on-done); } .rpill.s-in_progress { background-color: var(--st-in_progress); color: var(--on-in_progress); }
.rpill.s-blocked { background-color: var(--st-blocked); color: var(--on-blocked); } .rpill.s-not_started { background-color: var(--st-not_started); color: var(--on-not_started); }
.rpill.s-not_applicable { background-color: var(--st-not_applicable); color: var(--on-not_applicable); }
.rkids { border-bottom: 1px solid var(--line); }
.task.nested .ttl { padding-left: 30px; position: relative; }
.task.nested .ttl::before { content: ""; position: absolute; left: 14px; top: 0; bottom: 50%; width: 10px; border-left: 2px solid var(--line); border-bottom: 2px solid var(--line); border-bottom-left-radius: 4px; }
.task.nested .tid { font-size: 11px; }
.rkempty { padding-left: 52px; font-size: 12.5px; }
.task.elsewhere .tt { opacity: .8; }
.task[draggable="true"] > .head { cursor: grab; }
.task.dragging { opacity: .45; }
.group.dropok { outline: 2px dashed var(--gc); outline-offset: 4px; border-radius: 10px; }
.task.elsewhere .psub { font-style: italic; }
.psub { font-size: 11.5px; color: var(--muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.grolls { font-size: 13px; color: var(--muted); }
.grolls::before { content: "·"; margin-right: 6px; }
.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) {
  .rprog .battery { width: 60px; }
  .task.nested .ttl { padding-left: 24px; }
  .task.nested .ttl::before { left: 10px; }
  .tactl .cseg { flex: 1 1 100%; }
}

/* A roll-up's details: its per-asset tasks are the nested rows, so only a note */
.rnote1 { margin: 12px 0 0; color: var(--muted); font-size: 13px; }

/* ---------- task pane: the task's guide and its details (same shell as the Assets panel) ---------- */
.apanel.tpane { width: min(580px, 100vw); }
body.tpane-open .shell { padding-right: 20px; } /* the task pane overlays the board instead of squeezing it */
.task.open > .head { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.apsec h3.eyebrow { margin: 0; }
.tphead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tphead .tid { font-size: 13px; }
.tphead .stcell { width: auto; min-width: 150px; height: 36px; padding: 0 16px; border-radius: 6px; }
.tphead .rpill { width: auto; height: 32px; padding: 0 14px; border-radius: 6px; }
.gsec p { font-size: 14px; line-height: 1.6; }
.gsec p + p { margin-top: 4px; }
.gsteps { margin: 0; padding-left: 22px; display: grid; gap: 7px; font-size: 14px; line-height: 1.5; }
.gsteps li::marker { color: var(--accent); font-weight: 700; }
.gprods { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gprod { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--bg); }
.gprod.closes { border-color: var(--st-done); box-shadow: inset 3px 0 0 var(--st-done); }
.gph { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.gph b { font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.gfit { flex: none; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 9px; background: var(--line); color: var(--ink); }
.gfit.closes { background: var(--st-done); color: var(--on-done); }
.gprod p { margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.gnote { font-size: 12px; color: var(--muted); }
.tpkids { list-style: none; margin: 0; padding: 0; display: grid; }
.tpkids li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.tpkids li:last-child { border-bottom: 0; }
.tpkid { flex: 1; min-width: 0; text-align: left; padding: 0; color: var(--ink); overflow-wrap: anywhere; }
.tpkid .tid { margin-right: 4px; }
.tpkids .stcell { flex: none; width: 128px; height: 30px; border-radius: 6px; font-size: 12.5px; }
.tpane .tbody { padding: 0; display: grid; gap: 14px; border: 0; background: none; }
@media (max-width: 860px) {
  .apanel.tpane { width: 100vw; border-left: 0; }
  .tpkids .stcell { width: 110px; }
}

/* ---------- timeline (monday-style Gantt): one column per week ---------- */
.tltools { gap: 10px 18px; }
.tlchk { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.tlchk input { width: 16px; height: 16px; flex: none; accent-color: var(--ink); }
.tlset { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-left: auto; font-size: 13px; color: var(--muted); }
.tlset label { display: inline-flex; align-items: center; gap: 6px; }
.tlset input { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.tlset input { flex: none; width: auto; }
.tlset input[type=number] { width: 64px; }
.tltools label, .tlchk { white-space: nowrap; }
.tlsum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: 10px 0 12px; font-size: 14px; }
.tlcpk { display: inline-block; width: 18px; height: 10px; border-radius: 3px; border: 2px solid var(--ink); margin-right: 7px; vertical-align: -1px; }
.tlovk, .tlov { display: inline-block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid var(--st-blocked); }
.tlovk { margin-right: 6px; vertical-align: 0; }
.tlwrap { overflow: auto; max-height: calc(100vh - 120px); border: 1px solid var(--line); border-radius: 8px; background: var(--surface); overscroll-behavior-x: contain; }
.tlchart { --labw: 300px; position: relative; width: max-content; min-width: 100%; font-size: 13px; }
.tlhead { position: sticky; top: 0; z-index: 6; display: flex; background: var(--surface); border-bottom: 1px solid var(--line); }
.tlcorner, .tllab { position: sticky; left: 0; flex: none; width: var(--labw); background: var(--surface); border-right: 1px solid var(--line); }
.tlcorner { z-index: 7; display: flex; align-items: flex-end; padding: 6px 12px; font-size: 12.5px; color: var(--muted); }
.tlscale { flex: none; }
.tlmonths, .tlweeks { display: flex; }
.tlmonths span { flex: none; padding: 5px 6px 2px; font-size: 12px; font-weight: 700; border-left: 1px solid var(--line); white-space: nowrap; overflow: hidden; }
.tlweeks span { flex: none; width: var(--col); text-align: center; font-size: 10.5px; color: var(--muted); padding: 2px 0 5px; font-variant-numeric: tabular-nums; }
.tlweeks .start { color: var(--accent); font-weight: 700; font-size: 9.5px; letter-spacing: -.02em; }
.tlbody { position: relative; }
.tlrow, .tlrole, .tlrolehead { display: flex; height: 34px; }
.tlrow + .tlrow { box-shadow: inset 0 1px 0 var(--line); }
.tlrow .tllab, .tlrole .tllab, .tlrolehead .tllab { z-index: 4; display: flex; align-items: center; gap: 4px; padding: 0 8px; min-width: 0; }
.tltrack { position: relative; flex: none; background-image: linear-gradient(to right, var(--line) 1px, transparent 1px); background-size: var(--col) 100%; }
.tlg .tllab { box-shadow: inset 4px 0 0 var(--gc); }
.tlgbtn { display: flex; align-items: baseline; gap: 8px; min-width: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--gc); padding: 0 0 0 6px; text-align: left; }
.tlgbtn b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tlgbtn small { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.tlgbtn .caret, .tlrf .caret { border-top-color: currentColor; }
.tlgbtn[aria-expanded="false"] .caret, .tlrf[aria-expanded="false"] .caret { transform: rotate(-90deg); }
.tlg .tltrack { background-color: color-mix(in srgb, var(--gc) 6%, transparent); }
.tlspan { position: absolute; top: 14px; height: 6px; border-radius: 3px; background: var(--gc); opacity: .45; }
.tlrf { flex: none; width: 22px; height: 22px; border: 0; background: none; cursor: pointer; color: var(--ink); display: grid; place-items: center; padding: 0; }
.tlname { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex: 1; border: 0; background: none; cursor: pointer; font: inherit; color: var(--ink); text-align: left; padding: 0; }
.tlname .tid { flex: none; font-size: 11px; }
.tln { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlrow.nested .tllab { padding-left: 34px; }
.tlrow.sel .tllab, .tlrow:hover .tllab { background: var(--row-hover); }
.tlrow.sel .tllab { box-shadow: inset 3px 0 0 var(--accent); }
.tlbar { position: absolute; top: 6px; height: 22px; border: 0; border-radius: 4px; padding: 0; /* no padding: a bar is exactly as wide as its work days */ cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; z-index: 2;
  display: flex; align-items: center; gap: 4px; text-align: left; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); transition: opacity .12s; }
.tlbar.s-done { background: var(--st-done); color: var(--on-done); } .tlbar.s-in_progress { background: var(--st-in_progress); color: var(--on-in_progress); }
.tlbar.s-blocked { background: var(--st-blocked); color: var(--on-blocked); } .tlbar.s-not_started { background: var(--st-not_started); color: var(--on-not_started); }
.tlbar.s-not_applicable { background: var(--st-not_applicable); color: var(--on-not_applicable); }
.tlbar.roll { top: 11px; height: 12px; padding: 0; background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .25) 0 5px, transparent 5px 10px); }
.tlov { flex: none; margin-left: auto; filter: drop-shadow(0 0 1px var(--surface)); }
.tlbar.roll .tlov { display: none; }
.tlbar:hover, .tlbar:focus-visible { filter: brightness(.95); outline: 2px solid var(--accent); outline-offset: 1px; }
.tlbar.sel { outline: 2px solid var(--accent); outline-offset: 2px; }
.tlchart.crit .tlbar.critical { box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 1px rgba(255, 255, 255, .35); }
.tlarrows { position: absolute; top: 0; left: var(--labw); z-index: 1; pointer-events: none; overflow: visible; }
.tlarrows path[data-from] { fill: none; stroke: var(--muted); stroke-width: 1; opacity: .28; transition: opacity .12s; }
.tlchart.crit .tlarrows path.c { stroke: var(--ink); opacity: .75; stroke-width: 1.6; }
.tlchart.focus .tlbar:not(.rel) { opacity: .25; }
.tlchart.focus .tlarrows path[data-from] { opacity: .05; }
.tlchart.focus .tlarrows path.hl { opacity: 1; stroke: var(--accent); stroke-width: 1.8; }
.tltoday { position: absolute; top: 0; bottom: 0; margin-left: var(--labw); width: 0; border-left: 2px solid var(--st-blocked); z-index: 3; pointer-events: none; }
.tltoday b { position: sticky; top: 0; display: inline-block; transform: translateX(-50%); background: var(--st-blocked); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 0 0 4px 4px; }
.tlroles { border-top: 2px solid var(--line); padding-bottom: 6px; }
.tlrolehead { height: 30px; }
.tlrolehead .tllab { font-weight: 700; font-size: 12.5px; gap: 8px; }
.tlrole .tllab, .tlrolehead .tllab { justify-content: space-between; }
.tlrole .tllab b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tllab small { color: var(--muted); font-size: 11px; font-weight: 500; white-space: nowrap; }
.tlrole.bn .tllab small { color: var(--st-blocked); font-weight: 700; }
.tlrole { height: 24px; }
.tlcells { display: flex; background: none; }
.tlc { flex: none; width: var(--col); height: 100%; border-right: 1px solid var(--surface); font-size: 10px; font-weight: 700; color: #fff; display: grid; place-items: center; }
.tlc.l1 { background: color-mix(in srgb, var(--accent) 22%, transparent); } .tlc.l2 { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.tlc.l3 { background: color-mix(in srgb, var(--accent) 75%, transparent); } .tlc.over { background: var(--st-blocked); }
.tlbn { margin: 10px 0 0; font-size: 13.5px; }
.tlpane .tlpwhen { font-size: 13.5px; }
.tlcrit { font-weight: 700; color: var(--ink); border: 2px solid var(--ink); border-radius: 4px; padding: 0 5px; font-size: 12px; }
.tlovtxt { color: var(--st-blocked); font-weight: 600; }
.tlwhy { font-size: 13.5px; color: var(--muted); font-style: italic; }
.tlwf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tllinks { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.tllinks .linkbtn { padding: 0; text-align: left; color: var(--ink); font-size: 13px; }
.tllinks .tid { margin-right: 4px; }
@media (max-width: 860px) {
  .tlchart { --labw: 150px; }
  .tlset { margin-left: 0; }
  .tlwrap { max-height: calc(100vh - 80px); }
  .tlgbtn small, .tlrow .tlname .tid { display: none; }
  .tlwf { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .tlbar, .tlarrows path { transition: none; } }

/* ---------- 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 */
.navroles { display: contents; }
.navroles[hidden] { display: none; }
.navrolestog { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin-top: 6px; border: 0; border-radius: 6px; background: none; color: var(--muted); font: inherit; text-align: left; cursor: pointer; }
nav.side .navrolestog { padding: 10px 10px 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.navrolestog:hover { color: var(--ink); background: var(--accent-soft); }
.navrolestog:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.navrchev { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; flex: none; }
.navrolestog[aria-expanded="true"] .navrchev { transform: rotate(45deg); }
@media (max-width: 860px) {
  nav.side .navrolestog { display: flex; flex: none; width: auto; margin: 0; padding: 6px 10px; white-space: nowrap; letter-spacing: 0; text-transform: none; font-size: 13.5px; font-weight: 500; }
}
@media (prefers-reduced-motion: reduce) { .navrchev { transition: none; } }

/* ---------- 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; }

.lock { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; vertical-align: -1px; }
.lock rect { fill: currentColor; fill-opacity: .18; }
span.stcell.ro { display: flex; align-items: center; justify-content: center; gap: 5px; cursor: default; }
span.stcell.ro:hover { filter: none; }
.tphead span.stcell.ro, .cstat span.stcell.ro, .tpkids span.stcell.ro { display: inline-flex; }
.task.ro > .head { background-image: repeating-linear-gradient(135deg, transparent 0 7px, rgba(var(--heat), .045) 7px 8px); }
.task.ro .chk input[type=checkbox]:disabled { cursor: not-allowed; opacity: .45; }
.robanner { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding: 9px 12px; border-radius: 8px; background: var(--support-soft); color: var(--ink); font-size: 13.5px; }
.robanner .lock { margin-top: 3px; }
.evro, .sumro, .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; }
.others { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; background: var(--surface); }
.othlab { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; margin-right: 4px; }
.othlab small { font-weight: 400; color: var(--muted); }
.ochip { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; }
.ochip .n { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ochip:hover { border-color: var(--accent); }
.ochip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.ochip[aria-pressed="true"] .n { color: inherit; opacity: .8; }
.ochip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Task pool: its own page, listed under My tasks in the left nav ---------- */
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; }
.poollink { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); text-decoration: none; }
.poollink:hover { border-color: var(--accent); background: var(--accent-soft); }
.poollink .pgo { color: var(--accent); font-weight: 600; font-size: 14px; }
.sumlink { font-size: 13px; color: var(--muted); }
@media (max-width: 860px) { nav.side a.sub { padding-left: 12px; } nav.side a.sub::before { display: none; } }

/* ---------- Team progress: program dates, and phases that open their tasks ---------- */
.pdates { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin: 0 0 16px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.pdates div { display: grid; gap: 2px; }
.pdates span { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.pdates b { font-size: 20px; }
.pdates small { font-size: 12.5px; color: var(--muted); }
.pdates .linkbtn { margin-left: auto; text-decoration: none; font-weight: 600; }
.rail li.lnk { padding: 0; display: block; }
.rail .raillink { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline; padding: 8px 10px 8px 22px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.rail .raillink:hover { background: var(--accent-soft); }
.rail .raillink:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rail .raillink .battery { grid-column: 2 / 4; height: 10px; }
.rail .pdr { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); }
.rail .pgo { color: var(--accent); font-weight: 700; }
.phnav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: 14px; }
.phnav a { white-space: nowrap; }
.ochip.oall { font-weight: 700; }

/* ---------- recommended next task (earliest open phase for me, least effort): marked in the pool ---------- */
.task.rec > .head { background: color-mix(in srgb, #ffcb00 16%, var(--surface)); box-shadow: inset 4px 0 0 #ffcb00; }
.task.rec > .head:hover { background: color-mix(in srgb, #ffcb00 26%, var(--surface)); }
/* A yellow road sign whose point aims left, at the task it recommends, nudging gently to invite a click. */
.evb.recbadge { position: relative; display: inline-flex; align-items: center; height: 24px; padding: 0 12px 0 20px; border-radius: 0 6px 6px 0;
  background: #ffcb00; color: #2a2100; font-size: 12px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18));
  animation: recnudge 1.6s ease-in-out 3; } /* three nudges (under 5 s, WCAG 2.2.2), then still */
.evb.recbadge .recarrow { position: absolute; left: 12px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #2a2100; opacity: .55; }
.task.rec > .head:hover .evb.recbadge { animation-play-state: paused; background: #ffd633; }
@keyframes recnudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }
@media (prefers-reduced-motion: reduce) { .evb.recbadge { animation: none; } }
.sumrec { margin: 8px 0 0; font-size: 13.5px; color: var(--ink); }
.sumrec a { font-weight: 600; text-decoration: none; }
.sumrec a:hover { text-decoration: underline; }
.sumrec .tid { margin-right: 2px; }
.poollink .tid { font-size: 12px; }

/* ---------- settings (#settings): your roles, and Commandry in Slack ---------- */
.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; }
#slack { display: grid; gap: 14px; max-width: 780px; }
.slackcard { display: grid; gap: 12px; min-width: 0; }
.slackcard h3 { font-size: 16px; font-weight: 700; }
.slackcard p { margin: 0; }
.slackcard .err:empty { display: none; }
a.btn { display: inline-block; text-decoration: none; }
.slackok { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); margin-right: 8px; vertical-align: 1px; }
.bdout { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--support); margin-right: 8px; vertical-align: 1px; }
.bdtag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--ink); background: var(--support-soft); border: 1px solid var(--support); vertical-align: 2px; }
.bdswitch { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.bdcard + .bdcard, #bd-assistant { margin-bottom: 12px; }
.slacksteps { margin: 0; padding-left: 22px; display: grid; gap: 10px; font-size: 14px; }
.slacksteps .row { margin-top: 8px; }
.slackform { display: grid; gap: 12px; }
.slackform label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.slackform input { font: inherit; font-family: var(--f-mono); font-size: 13px; font-weight: 400; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); min-width: 0; width: 100%; max-width: 520px; }
.slackcode { 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); }
.slackcode code { font-size: clamp(20px, 5vw, 28px); font-weight: 600; letter-spacing: .04em; color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
/* The Slack account that sent a link code, to check before confirming it (Settings > Commandry in Slack) */
.slackwho { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; }
.slackwho dt { color: var(--muted); font-weight: 600; }
.slackwho dd { margin: 0; overflow-wrap: anywhere; min-width: 0; }
table.ppl.slinks td { overflow-wrap: anywhere; }

/* ---------- Onboarding (above My tasks in the nav): overview, Team & roles, Documents, Connectors ---------- */
.covbig { margin: 0; font-size: 15px; }
.covbig b { font-family: var(--f-display); font-size: 40px; font-weight: 800; color: var(--accent); margin-right: 6px; vertical-align: -5px; letter-spacing: -.02em; }
.covbar { height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.covbar span { display: block; height: 100%; border-radius: 5px; background: var(--st-done); transition: width .4s; }
.cxpage { display: grid; gap: 18px; }
.cxcat { display: grid; gap: 10px; padding-top: 12px; }
.cxcat h2.eyebrow { margin: 0; }
.cxgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.cxtile { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto 1fr auto; gap: 2px 10px; align-items: start; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); min-width: 0; cursor: default; }
/* simple-icons logos carry their brand color, so they sit on a white square in both themes; a monogram is the brand color */
.cxlogo { grid-row: 1 / 4; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: #ffffff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.cxlogo img { display: block; width: 26px; height: 26px; }
.cxmono { background: var(--cxc); box-shadow: none; color: #ffffff; font-family: var(--f-display); font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.cxname { font-size: 14px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.cxnote { font-size: 12px; line-height: 1.4; color: var(--muted); }
.cxchip { justify-self: start; margin-top: 6px; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 9px; background: var(--line); color: var(--muted); }
/* live connectors: a tile is a button that opens the detail view */
button.cxtile { width: 100%; font: inherit; text-align: left; color: inherit; cursor: pointer; }
.cxlive { border-color: var(--accent); }
.cxlive:hover { background: var(--accent-soft); }
.cxlive:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cxchip.cxgo { background: var(--accent); color: var(--surface); }
.cxchip.cxon { background: var(--ok-soft, #dcfce7); color: var(--ok, #15803d); }
.cxchip.cxbad { background: #fee2e2; color: #b91c1c; }
.cxsum { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.cxback { justify-self: start; margin-top: 12px; }
.cxdhead { display: flex; align-items: center; gap: 12px; }
.cxdhead .cxlogo { grid-row: auto; }
.cxdhead h2 { font-size: 22px; font-weight: 800; margin: 0; }
.cxdhead p { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); }
.cxform { display: grid; gap: 12px; max-width: 560px; }
.cxform > p { margin: 0; font-size: 14px; line-height: 1.5; }
.cxfield { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.cxfield small { font-weight: 500; color: var(--muted); }
.cxfield input { font: inherit; font-weight: 400; font-family: var(--f-mono); font-size: 13px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); }
.cxfield input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.cxmulti { border: 0; padding: 0; margin: 0; min-width: 0; }
.cxmulti legend { padding: 0; margin-bottom: 4px; }
.cxmulti ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cxmrow { display: flex; gap: 8px; align-items: center; }
.cxmrow input { flex: 1; min-width: 0; }
.cxmrm { flex: none; font-size: 12px; }
.cxmadd { justify-self: start; margin-top: 6px; font-size: 13px; }
.cxpol summary { cursor: pointer; font-size: 13px; color: var(--accent); }
.cxpol pre { max-height: 240px; overflow: auto; font-size: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.cxerr { margin: 0; padding: 8px 10px; border-radius: 8px; background: #fee2e2; color: #991b1b; font-size: 13.5px; }
.cxstate { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-size: 13.5px; }
.cxtally { margin: 0; font-size: 14px; }
.cx-pass { color: var(--ok, #15803d); } .cx-fail { color: #b91c1c; }
.cxwait { color: var(--muted); font-style: italic; }
.cxinv { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cxinv li { display: grid; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); min-width: 110px; }
.cxinv b { font-size: 20px; font-weight: 800; } .cxinv span { font-size: 12px; color: var(--muted); }
.cxchecks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cxck { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.cxck b { font-size: 14px; } .cxck p { margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
.cxksi { display: block; margin-top: 4px; font-family: var(--f-mono); font-size: 11.5px; color: var(--accent); }
.cxlink { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 600; }
.cxmeth { list-style: none; margin: 6px 0 2px; padding: 0; font-size: 12.5px; }
.cxmeth li { display: flex; gap: 8px; align-items: baseline; padding: 2px 0; overflow-wrap: anywhere; }
.cxmeth code { font-size: 12px; }
.cxst { align-self: start; justify-self: start; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 6px; background: var(--line); color: var(--muted); }
.cxck.cx-pass .cxst { background: #dcfce7; color: #15803d; }
.cxck.cx-fail .cxst { background: #fee2e2; color: #b91c1c; }
.cxck.cx-warn .cxst { background: #fef3c7; color: #92400e; }
.cxck.cx-error .cxst { background: #e0e7ff; color: #3730a3; }
@media (max-width: 640px) { .cxck { grid-template-columns: 1fr; } .cxstate { display: grid; } }
@media (max-width: 640px) {
  .cxgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cxtile { grid-template-columns: 1fr; grid-template-rows: none; padding: 10px; }
  .cxlogo { grid-row: auto; width: 40px; height: 40px; margin-bottom: 6px; }
}

/* the Onboarding pages: connectors sit on the page background, so tiles and boxes take the surface color */
.cxpage .cxtile, .cxpage .cxstate, .cxpage .cxinv li, .cxpage .cxfield input, .cxpage .cxpol pre { background: var(--surface); }
.cxpage .cxlive:hover { background: var(--accent-soft); }
.cxpage .cxconn { box-shadow: inset 0 3px 0 var(--st-done); }
.cxpage > h2.eyebrow { margin: 6px 0 0; }
.cxsum b { color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cxck.cx-pass .cxst { background: #173325; color: #6cc28f; }
  :root:not([data-theme="light"]) .cxck.cx-fail .cxst, :root:not([data-theme="light"]) .cxchip.cxbad, :root:not([data-theme="light"]) .cxerr { background: #3d1a1f; color: #f49aa4; }
  :root:not([data-theme="light"]) .cxck.cx-warn .cxst { background: #3a2c12; color: #f5c66b; }
  :root:not([data-theme="light"]) .cxck.cx-error .cxst { background: #232a4d; color: #a9b4ff; }
  :root:not([data-theme="light"]) .cx-fail { color: #f49aa4; }
}
:root[data-theme="dark"] .cxck.cx-pass .cxst { background: #173325; color: #6cc28f; }
:root[data-theme="dark"] .cxck.cx-fail .cxst, :root[data-theme="dark"] .cxchip.cxbad, :root[data-theme="dark"] .cxerr { background: #3d1a1f; color: #f49aa4; }
:root[data-theme="dark"] .cxck.cx-warn .cxst { background: #3a2c12; color: #f5c66b; }
:root[data-theme="dark"] .cxck.cx-error .cxst { background: #232a4d; color: #a9b4ff; }
:root[data-theme="dark"] .cx-fail { color: #f49aa4; }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.onbchk { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* nav: Onboarding's badge counts the steps done; green once all three are */
nav.side a .n.onbn { font-family: var(--f-mono); font-size: 11px; padding: 0 6px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); opacity: 1; line-height: 18px; align-self: center; }
nav.side a .n.onbn:empty { display: none; }
nav.side a .n.onbn.all { background: var(--ok-soft); color: var(--ok); }
nav.side a[aria-current="page"] .n.onbn { background: rgba(255, 255, 255, .2); color: var(--surface); }

/* overview: progress, then one card per step */
.onbhero p a { font-weight: 600; }
.onbprog { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: -8px 0 18px; font-size: 14px; color: var(--muted); }
.onbprog b { color: var(--ink); }
.onbsegs { display: inline-flex; gap: 4px; }
.onbsegs i { display: block; width: 44px; height: 6px; border-radius: 3px; background: var(--line); }
.onbsegs i.on { background: var(--st-done); }
.onbcards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 920px; counter-reset: none; }
.onbcard { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 6px 18px; align-items: center; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; transition: border-color .15s, box-shadow .15s; }
.onbcard:hover { border-color: var(--accent); box-shadow: 0 6px 20px rgba(21, 35, 59, .06); }
.onbcard.done { border-color: color-mix(in srgb, var(--st-done) 45%, var(--line)); }
.onbnum { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; align-self: start; background: var(--accent-soft); color: var(--accent); font-family: var(--f-display); font-size: 22px; font-weight: 800; }
.onbcard.done .onbnum { background: var(--st-done); color: #ffffff; }
.onbcard.done .onbnum .onbchk { width: 24px; height: 24px; stroke-width: 2.6; }
.onbbody { display: grid; gap: 4px; min-width: 0; }
.onbbody h2 { font-size: 19px; font-weight: 800; }
.onbbody p { margin: 0; font-size: 14px; color: var(--muted); max-width: 620px; }
.onbbody .onbstat { margin-top: 4px; color: var(--ink); font-weight: 600; font-size: 13.5px; }
.onbok { color: var(--ok); }
.onbgo { text-decoration: none; white-space: nowrap; justify-self: end; }
.onbnote { margin: 18px 0 0; font-size: 13.5px; color: var(--muted); }
@media (max-width: 640px) {
  .onbcard { grid-template-columns: 40px minmax(0, 1fr); padding: 16px; gap: 8px 12px; }
  .onbnum { width: 40px; height: 40px; font-size: 18px; }
  .onbgo { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .onbcard, .covbar span { transition: none; } }

/* step strip at the top of each Onboarding page */
.onbsteps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 16px; }
.onbsteps a { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 600; }
.onbsteps a:hover { border-color: var(--accent); }
.onbsteps a.onbsall { padding-left: 12px; color: var(--muted); font-weight: 500; }
.onbsteps a[aria-current="step"] { border-color: var(--accent); background: var(--accent); color: var(--surface); }
.onbsn { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 800; }
.onbstep.done .onbsn { background: var(--st-done); color: #ffffff; }
.onbsteps a[aria-current="step"] .onbsn { background: var(--surface); color: var(--accent); }

/* Team & roles: coverage, then the roles x people grid (small teams) or one row of chips per role (bigger teams) */
.covcard { display: grid; gap: 10px; max-width: 920px; }
.covtop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.covtag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.covtag.gap { background: var(--warn-soft); color: var(--warn); }
.covtag.ok { background: var(--ok-soft); color: var(--ok); }
.covcard .muted { margin: 0; font-size: 13.5px; }
.teamassign { max-width: 920px; }
.tgridwrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.tgrid { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.tgrid th, .tgrid td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: center; }
.tgrid tbody tr:last-child th, .tgrid tbody tr:last-child td { border-bottom: 0; }
.tgrid .tgrole { text-align: left; min-width: 190px; position: sticky; left: 0; background: var(--surface); z-index: 1; }
.tgrid th.tgrole b { display: block; }
.tgrid th.tgrole small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.tgrid thead th { font-size: 12px; font-weight: 600; vertical-align: bottom; }
.tgp { min-width: 84px; }
.tgp .lav { width: 28px; height: 28px; font-size: 11px; margin: 0 auto 4px; }
.tgpn { display: block; max-width: 110px; margin: 0 auto; overflow-wrap: anywhere; line-height: 1.3; }
.tgpn small, .tcn small { font-weight: 400; color: var(--muted); }
.tgrid input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--st-done); cursor: pointer; }
.tgrid tr.gap th.tgrole { box-shadow: inset 3px 0 0 var(--st-blocked); }
.tgrid tr.gap th.tgrole small { color: var(--warn); font-weight: 600; }
.tgrid tbody tr:hover td, .tgrid tbody tr:hover th { background: var(--accent-soft); }
.troles { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.trole { display: grid; grid-template-columns: minmax(170px, 220px) minmax(0, 1fr); gap: 8px 16px; align-items: start; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.trole.gap { border-color: color-mix(in srgb, var(--st-blocked) 50%, var(--line)); box-shadow: inset 3px 0 0 var(--st-blocked); }
.trhead { display: grid; gap: 2px; }
.trhead b { font-size: 14.5px; }
.trhead small { font-size: 12px; color: var(--muted); }
.trole.gap .trhead small { color: var(--warn); font-weight: 600; }
.trppl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.tchip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px 2px 2px 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); font-size: 12.5px; }
.tchip.me { border-color: var(--accent); }
.tchip .lav { width: 22px; height: 22px; font-size: 9.5px; }
.tcn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tchipx { width: 22px; height: 22px; border: 0; border-radius: 50%; background: none; color: var(--muted); font: inherit; font-size: 15px; line-height: 1; cursor: pointer; flex: none; }
.tchipx:hover { background: var(--warn-soft); color: var(--warn); }
.trnone { font-size: 13px; color: var(--warn); font-weight: 600; }
.trmore { font-size: 12.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; }
.trmore:hover { background: var(--accent-soft); }
.tradd { font: inherit; font-size: 12.5px; padding: 4px 8px; border: 1px dashed var(--accent); border-radius: 999px; background: var(--surface); color: var(--accent); max-width: 180px; cursor: pointer; }
.tradd:disabled { opacity: .5; cursor: default; }
@media (max-width: 640px) { .trole { grid-template-columns: minmax(0, 1fr); } }

/* Documents: upload on the left, what to upload on the right; the list below the drop zone */
.docgrid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; max-width: 1000px; }
.docmain { display: grid; gap: 24px; min-width: 0; }
.docdrop { display: grid; justify-items: center; gap: 8px; padding: 26px 20px 18px; border: 2px dashed var(--line); border-radius: 14px; background: var(--surface); text-align: center; transition: border-color .15s, background .15s; }
.docdrop.drag { border-color: var(--accent); background: var(--accent-soft); }
.docdropico { width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); position: relative; }
.docdropico::before { content: ""; position: absolute; left: 50%; top: 11px; width: 12px; height: 12px; border-left: 2.5px solid var(--accent); border-top: 2.5px solid var(--accent); transform: translateX(-50%) rotate(45deg); }
.docdropico::after { content: ""; position: absolute; left: 50%; top: 13px; width: 2.5px; height: 16px; background: var(--accent); transform: translateX(-50%); }
.docdrop > b { font-size: 16px; }
.docdrop > small { color: var(--muted); font-size: 12.5px; }
.docpick { position: relative; overflow: hidden; }
.docpick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.docpick:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.docnotef { display: grid; gap: 4px; width: min(460px, 100%); margin-top: 8px; text-align: left; font-size: 13px; font-weight: 600; }
.docnotef small { font-weight: 400; color: var(--muted); }
.docnotef input { font: inherit; font-size: 13.5px; font-weight: 400; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); }
.docbusy { margin: 0; min-height: 1em; font-size: 13px; color: var(--accent); font-weight: 600; }
.doclistsec { display: grid; gap: 10px; }
.doclistsec h2 { font-size: 18px; font-weight: 700; }
.docempty { margin: 0; padding: 18px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: 14px; }
.doclist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.doc { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.docico { width: 44px; height: 52px; border-radius: 6px; display: grid; place-items: end center; padding-bottom: 7px; background: var(--accent-soft); color: var(--accent); font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; clip-path: polygon(0 0, 72% 0, 100% 22%, 100% 100%, 0 100%); }
.docmid { display: grid; gap: 3px; min-width: 0; justify-items: start; }
.docname { font-weight: 700; font-size: 14.5px; overflow-wrap: anywhere; text-decoration: none; }
.docname:hover { text-decoration: underline; }
.docmeta { font-size: 12.5px; color: var(--muted); }
.docnotes { font-size: 13px; color: var(--ink); }
.docb { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--line); color: var(--muted); }
.docb.ok { background: var(--ok-soft); color: var(--ok); }
.docb .onbchk { width: 12px; height: 12px; }
.docact { display: flex; gap: 4px; align-items: center; }
.docdel { color: var(--k-fail-ink); }
.docwhat { display: grid; gap: 10px; padding: 18px; position: sticky; top: 16px; }
.docwhat h2 { margin: 0; }
.docwhat ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; }
.docnever { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--warn-soft); color: var(--ink); font-size: 13px; line-height: 1.45; }
.docnever b { color: var(--warn); }
@media (max-width: 960px) { .docgrid { grid-template-columns: minmax(0, 1fr); } .docwhat { position: static; } }
@media (max-width: 640px) { .doc { grid-template-columns: 36px minmax(0, 1fr); } .docico { width: 36px; height: 44px; } .docact { grid-column: 2; } }
@media (prefers-reduced-motion: reduce) { .docdrop { transition: none; } }

/* the task pane's "From your connectors" */
.cxev .cxchecks { gap: 6px; }
.cxev .cxck { grid-template-columns: 96px minmax(0, 1fr); padding: 8px 10px; }
.cxev .cxck b { font-size: 13.5px; }
.cxevsum { margin: 0; font-size: 13px; font-weight: 600; }
.cxevsum:empty { display: none; }
.cxevn.cx-pass { color: var(--ok); } .cxevn.cx-warn { color: var(--support); } .cxevn.cx-error { color: var(--muted); }
.cxsug { display: grid; gap: 8px; padding: 12px 14px; border-radius: 10px; background: var(--ok-soft); border: 1px solid color-mix(in srgb, var(--st-done) 40%, transparent); }
.cxsug.s-in_progress { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.cxsug p { margin: 0; font-size: 13.5px; }
.cxsug .btn { justify-self: start; }
.cxevnone a, .cxevman { font-weight: 600; }
.cxevman { justify-self: start; padding: 0; text-decoration: none; }
.cxtask { display: grid; gap: 8px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.cxtask h4 { margin: 0; font-size: 13px; }
.cxtlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cxtc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.cxtc.on { border-color: color-mix(in srgb, var(--st-done) 45%, var(--line)); }
.cxtc .cxksi { grid-column: 1; }
.cxtst { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 12.5px; color: var(--muted); }
.cxtst a { font-weight: 600; }
.cxtmore { margin: 0; font-size: 12.5px; }
.cxverdict { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cxverdict li { display: inline-flex; gap: 6px; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 12.5px; background: var(--surface); border: 1px solid var(--line); }
.cxverdict small { color: var(--muted); }
.cxv-pass { border-color: var(--st-done) !important; } .cxv-fail { border-color: var(--st-blocked) !important; }
.cxv-unchecked, .cxv-uncovered { color: var(--muted); }
.cxvreason { margin: 0; font-size: 13px; } .cxvreason.ok { color: var(--ok); font-weight: 600; }
.cxvhint { font-size: 12.5px; }

/* ---------- Write a document / Dictate / Edit (editor.js, editor.css) */
button.evname, button.docname { font: inherit; font-weight: 600; background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-align: left; overflow-wrap: anywhere; }
button.docname { font-weight: 700; font-size: 14.5px; }
button.evname:hover, button.docname:hover { text-decoration: underline; }
button.evname:focus-visible, button.docname:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
[aria-busy="true"] { cursor: progress; opacity: .7; }
.evacts { margin-left: auto; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.evacts .linkbtn { font-size: 12.5px; text-decoration: none; }
.evacts .evdel { margin-left: 0; }
.evup .wbtn { font-size: 13px; padding: 6px 12px; }
.docalt { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 2px; }
.docalt > span { font-size: 12.5px; color: var(--muted); }
@media (max-width: 640px) { .evup .wbtn { flex: 1 1 auto; justify-content: center; } }

/* ---------- connector tiles: short 2-line note, chip + colored tally at the bottom, a state stripe on the left edge */
.cxgrid > li:not(.cxtile) { display: flex; min-width: 0; }
.cxgrid > li > button.cxtile { flex: 1; }
.cxtile { position: relative; overflow: hidden; }
.cxnote { overflow-wrap: anywhere; min-width: 0; }
.cxconn .cxnote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.cxfoot { grid-column: 2; align-self: end; display: grid; justify-items: start; gap: 3px; margin-top: 6px; min-width: 0; }
.cxfoot .cxchip { margin-top: 0; }
.cxtly { font-size: 11.5px; font-weight: 600; color: var(--muted); overflow-wrap: anywhere; }
.cxtly .cx-pass { color: var(--ok, #15803d); } .cxtly .cx-fail { color: #b91c1c; } .cxtly .cx-warn { color: #92400e; } .cxtly .cx-error { color: var(--muted); }
.cxchip.cxwarn { background: #fef3c7; color: #92400e; }
.cxchip.cxsync { background: var(--accent-soft); color: var(--accent); }
.cxpage .cxconn { box-shadow: none; }
.cxconn::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); }
.cxconn.cxt-ok::before { background: var(--st-done); }
.cxconn.cxt-warn::before { background: #f59e0b; }
.cxconn.cxt-bad::before { background: #e2445c; }
@media (max-width: 640px) { .cxfoot { grid-column: 1; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cxtly .cx-warn { color: #f5c66b; }
  :root:not([data-theme="light"]) .cxchip.cxwarn { background: #3a2c12; color: #f5c66b; }
  :root:not([data-theme="light"]) .cxtly .cx-pass { color: #6cc28f; }
}
:root[data-theme="dark"] .cxtly .cx-warn { color: #f5c66b; }
:root[data-theme="dark"] .cxchip.cxwarn { background: #3a2c12; color: #f5c66b; }
:root[data-theme="dark"] .cxtly .cx-pass { color: #6cc28f; }
:root[data-theme="dark"] .cxtly .cx-fail { color: #f49aa4; }

/* clusters */
.task .head .role.unas { color: var(--muted); font-weight: 600; text-transform: none; letter-spacing: 0; }
.rolepick label.taken { background: var(--bg); border-style: dashed; }
.rolepick label.taken input { opacity: .5; }
.assignsel { font: inherit; padding: 4px 8px; border-radius: 6px; max-width: 100%; }
.trown { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; margin-right: 10px; }
.trown select { font: inherit; padding: 4px 8px; border-radius: 6px; }
.trabout { display: block; color: var(--muted); margin-top: 2px; }
.seg.poolby { display: inline-flex; align-items: center; }
.seg.poolby .seglab { font-size: 12px; color: var(--muted); padding: 0 8px; white-space: nowrap; }

/* per-repository subtasks */
.asub { margin: 14px 0; }
.asubn { background: var(--accent-soft); border-radius: 999px; padding: 0 7px; margin-left: 4px; font-size: 11px; }
.asubsum { margin: 4px 0 8px; font-size: 13px; }
.asn.as-pass, .as-pass .asst { color: var(--tone-green); } .asn.as-fail, .as-fail .asst { color: var(--tone-red); } .asn.as-blocked, .as-blocked .asst { color: var(--tone-amber); } .asn.as-unknown, .as-unknown .asst { color: var(--muted); }
.arepo { border: 1px solid var(--line); border-radius: 8px; margin: 8px 0; padding: 8px 10px; }
.arepo summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.arepost { margin-left: auto; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 1px 9px; }
.arepost.gap { background: rgba(196, 58, 79, .1); color: var(--tone-red); } .arepost.ok { background: rgba(29, 138, 79, .1); color: var(--tone-green); }
.asubl { list-style: none; margin: 8px 0 4px; padding: 0; }
.asubl li { display: grid; grid-template-columns: 112px 1fr; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); }
.asubl li p { margin: 2px 0; font-size: 13px; }
.asst { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding-top: 2px; }
.asfix { color: var(--ink); }

.agridwrap { overflow-x: auto; margin: 6px 0 16px; }
.agrid { border-collapse: collapse; width: 100%; font-size: 13px; }
.agrid th, .agrid td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.agrid thead th { font-size: 12px; white-space: nowrap; }
.agrid tbody th small { display: block; color: var(--muted); font-weight: 400; margin-top: 2px; }
.agrid td { white-space: nowrap; font-weight: 600; cursor: help; }
.agrid td.as-pass { background: rgba(29, 138, 79, .07); } .agrid td.as-fail { background: rgba(196, 58, 79, .07); } .agrid td.as-blocked { background: rgba(154, 106, 10, .08); }
.agsym { font-weight: 800; }

/* gap items (shown under a KSI) */
.gitems { list-style: none; margin: 8px 0 0; padding: 0; }
.gitem { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.gitem p { margin: 3px 0; font-size: 13.5px; }
.gst { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding-top: 2px; }
.g-gap .gst { color: var(--tone-red); } .g-blocked .gst { color: var(--tone-amber); }
.gfix { color: var(--ink); }
.gtask { display: inline-flex; gap: 4px; align-items: baseline; border: 1px solid var(--line); border-radius: 8px; padding: 3px 8px; font-size: 13px; text-decoration: none; color: inherit; background: var(--bg); }
.gtask:hover { border-color: var(--accent); }
.gstat { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--bg); white-space: nowrap; }
.gstat.gs-in_progress { background: rgba(230, 170, 30, .18); } .gstat.gs-blocked { background: rgba(196, 58, 79, .12); } .gstat.gs-done { background: rgba(29, 138, 79, .14); }
@media (max-width: 860px) { .gitem { grid-template-columns: 1fr; } }

/* theme toggle (Auto / Light / Dark) */
.themebtn { display: inline-flex; align-items: center; gap: 6px; }
.themebtn svg { width: 15px; height: 15px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gstat, :root:not([data-theme="light"]) .gtask { background: var(--bg); } }
:root[data-theme="dark"] .gstat, :root[data-theme="dark"] .gtask { background: var(--bg); }

/* ---------- 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; }
.gtoggle, .tlgbtn { color: color-mix(in srgb, var(--gc) var(--mix-text), var(--mix-to)); }
.phasechip { color: color-mix(in srgb, var(--pc) var(--mix-text), var(--mix-to)); }
.qgroup .colhead span:first-child { color: color-mix(in srgb, var(--g-next) var(--mix-text), var(--mix-to)); }
.cxmono { background: color-mix(in srgb, var(--cxc) 62%, #000) !important; }
nav.side a .n { opacity: 1; }
nav.side a[aria-current="page"] .n { color: inherit; }
nav.side a[aria-current="page"] .n.onbn { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.tltoday b { color: #fff; }
.cx-pass, b.cx-pass { color: var(--tone-green); }
.cxst { color: var(--ink); }
.tlrole.bn small, .tlrole.bn .tllab small { color: var(--tone-red); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .task.rec > .head { background: color-mix(in srgb, #ffcb00 8%, var(--surface)); } }
:root[data-theme="dark"] .task.rec > .head { background: color-mix(in srgb, #ffcb00 8%, var(--surface)); }

/* ---------- 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); }
.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); }
.kgroup .gbody { padding: 0; }
.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; }
.ktasks { display: flex; flex-direction: column; gap: 2px; } .ktasks small { color: var(--muted); font-size: 11.5px; } .ktasks .battery { height: 8px; }
.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; } }
.covtag.ok { color: var(--tone-green); }
.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; }
}

/* distribute a cluster's tasks */
.distribute { margin: 0 0 16px; } .distribute summary { cursor: pointer; }
.distppl { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0; }
.distmode { gap: 18px; margin: 6px 0 12px; flex-wrap: wrap; font-size: 13.5px; }
.distplan ul { max-height: 280px; overflow: auto; padding-left: 18px; font-size: 13px; }
#dist-out table { margin: 10px 0; max-width: 480px; }

table.wl { max-width: 760px; margin-top: 8px; } .trdist { font-size: 13px; font-weight: 600; white-space: nowrap; }
.pknudge { font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; }

/* what the program needs (document catalog) */
.doccat { margin-bottom: 28px; }
.orgprof .row { gap: 12px; flex-wrap: wrap; } .orgprof label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); flex: 1 1 220px; }
.orgprof label.wide { margin: 10px 0; }
.orgprof input { font: inherit; color: var(--ink); background: var(--surface); padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; }
.catsum { margin: 14px 0 4px; }
.catgroup { font-size: 15px; margin: 22px 0 6px; }
.catlist { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.catlist li { display: flex; gap: 16px; justify-content: space-between; padding: 12px 14px; border-top: 1px solid var(--line); border-left: 4px solid transparent; }
.catlist li:first-child { border-top: 0; }
.catlist li.cat-have { border-left-color: var(--k-pass, #1d9a5b); } .catlist li.cat-draft { border-left-color: var(--k-one, #b7791f); } .catlist li.cat-missing { border-left-color: var(--line); }
.catmain { min-width: 0; flex: 1; } .cattop { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.catst { font-size: 12px; font-weight: 700; color: var(--muted); } .cat-have .catst { color: var(--k-pass-ink, #13643c); } .cat-draft .catst { color: var(--k-one-ink, #7a4f0c); }
.catwhy { margin: 4px 0; font-size: 13.5px; } .catmeta, .catdocs { margin: 2px 0; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.catact { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex: none; } .catup { cursor: pointer; font-size: 13px; }
.chip.need-required { font-weight: 700; }
@media (max-width: 640px) { .catlist li { flex-direction: column; } .catact { align-items: flex-start; flex-direction: row; } }
.teamadd { margin-top: 12px; } .teamadd summary { cursor: pointer; } .teamadd .row input { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }

/* activity */
.actlist .actday { font-size: 14px; margin: 22px 0 6px; color: var(--muted); font-weight: 600; }
.actlist ul { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.actlist li { display: flex; gap: 14px; padding: 9px 14px; border-top: 1px solid var(--line); font-size: 13.5px; align-items: baseline; }
.actlist li:first-child { border-top: 0; } .actlist time { flex: none; min-width: 64px; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.actlist li span { min-width: 0; overflow-wrap: anywhere; }

/* 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) */
.efferr, .tlovtxt, .evdel, .rcn, .tast.s-blocked, .tlrole.bn .tllab small { 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; }
}
/* The catalog's Upload: a real (transparent) file input over the link, so it is reachable with Tab */
.catup { position: relative; overflow: hidden; }
.catup input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.catup:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
/* 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, .tlbar.s-in_progress:not(.roll), .tlsum .dotc.b-in_progress { background-image: var(--pat-started); }
.b-blocked, .c-blocked, .tlbar.s-blocked:not(.roll) { background-image: var(--pat-stuck); }
.b-not_applicable, .c-not_applicable, .tlbar.s-not_applicable:not(.roll) { 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); }
.task input[type=checkbox] { accent-color: var(--tone-green); }
/* KSI groups: their titles are h2s, in the board's group-title style */
.kgroup h2.gtitle { margin: 0; font: inherit; font-weight: 700; }
/* ---------- 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 assistant button, the session-ended dialog ---------- */
/* Signed out (log-in, sign-in, invite and the server's sign-in pages): one centered column, no menu, no assistant. */
body.signed-out .shell { grid-template-columns: minmax(0, 1fr); max-width: 940px; }
body.signed-out nav.side, body.signed-out .cmd-host { display: none; }
/* The floating assistant button never covers the end of a page. */
.shell { padding-block-end: 104px; }
dialog.reauth.ended h2 { margin: 0 0 8px; }
dialog.reauth.ended p { margin: 0 0 4px; }
@media (max-width: 860px) {
  /* A task row's title column keeps its text inside it (the "Part of ..." line ellipsized, the title wrapped). */
  .task .ttl > .tmain { align-self: stretch; max-width: 100%; }
  .task .ttl .tt { overflow-wrap: anywhere; }
}
@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; }
}
/* Connectors: how an AWS connector signs in (task role or access key), and what to do about a failing check. */
.cxauth { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 12px; margin: 0; display: grid; gap: 8px; background: var(--surface); }
.cxauth legend { padding: 0 4px; font-size: 13px; font-weight: 700; }
.cxopt { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-weight: 400; }
.cxopt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.cxopt:has(input:disabled) { cursor: default; opacity: .7; }
.cxopt input { margin: 3px 0 0; accent-color: var(--accent); }
.cxopt b { font-size: 13.5px; }
.cxopt small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); font-weight: 400; line-height: 1.4; }
.cxrec { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--ok-soft); color: var(--ink); margin-left: 4px; }
.cxauthoff { margin: 0; font-size: 12.5px; }
.cxauthnow { margin: 10px 0 0; font-size: 13.5px; }
.cxauthk { color: var(--muted); }
.cxfix { color: var(--ink) !important; }
.cxerrdo { display: block; margin-top: 4px; }
/* 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); }
.cxfield[hidden] { display: none; }

/* ---------- 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; }
/* Onboarding's step strip: how many required documents are in hand ("3/11") until the Documents step is done. */
.onbsc { font-family: var(--f-mono); font-size: 11px; font-weight: 600; line-height: 18px; padding: 0 6px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); }
.onbsteps a[aria-current="step"] .onbsc { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
/* Team & clusters: an owner select fits its row however long the names are (it shrinks, on a line of its own under
   "Owner" when it has to, and the chosen name is cut off at the end; the option, which a screen reader reads, keeps the
   whole name). A person chip keeps its task count when the name is cut, and its title has the whole name. */
.trown { flex-wrap: wrap; min-width: 0; max-width: 100%; }
.trown select { min-width: 0; max-width: 100%; text-overflow: ellipsis; }
.tchip .tcn { flex: 0 1 auto; }
.tchip .tcc { flex: none; padding-right: 6px; color: var(--muted); }