/* Runningstart rebuild - shared components (owner: platform).
   Based on the agreed agent page mock-up (Work/Hosting/agent-page-mockup-template.html).
   Motion: fades only. No mouse-following movement. */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--fs)/var(--lh) var(--font); }   /* no clipping: real sideways overflow must stay visible to tests */
img { max-width: 100%; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1 { font-size: 28px; line-height: 1.2; margin: 4px 0 4px; }
h2 { font-size: 22px; line-height: 1.25; }
:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fade-in { animation: rs-fade .25s var(--ease) both; }
@keyframes rs-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fade-in { animation: none; } }

/* ---------- shell ---------- */
.rs-top { position: relative; background: var(--header-bg); border-bottom: 1px solid var(--line); }
.rs-top-in { max-width: var(--maxw); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 8px 16px; }
.rs-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-width: 0; }
.rs-brand img { height: 30px; width: auto; display: block; }
.rs-brand .logo-dark { display: none; }
:root[data-theme="dark"] .rs-brand .logo-light { display: none; }
:root[data-theme="dark"] .rs-brand .logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rs-brand .logo-light { display: none; }
  :root:not([data-theme="light"]) .rs-brand .logo-dark { display: block; }
}
.rs-brand .rs-brand-name { font-weight: 700; font-size: 16px; }
.rs-nav { display: flex; flex-wrap: wrap; gap: 2px; flex: 1 1 auto; min-width: 0; }
.rs-nav a { text-decoration: none; color: var(--muted); font-weight: 600; font-size: 14px; padding: 6px 10px; border-radius: var(--r-pill); }
.rs-nav a:hover { color: var(--ink); background: var(--soft); }
.rs-nav a.on { color: var(--accent); background: var(--soft); }
.rs-account { display: flex; align-items: center; gap: 8px; order: 9; }   /* last on the line, after print and full screen */
/* The user picker as an icon: the select lies in the same grid cell as the icon, transparent, so a click opens the browser's list */
.rs-userpick { display: inline-grid; cursor: pointer; }
.rs-userpick[hidden], #rs-who[hidden] { display: none; }
.rs-userpick > * { grid-area: 1 / 1; }
.rs-userpick select { opacity: 0; width: 0; min-width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; font-size: 13px; }   /* sized by the icon, not by the longest name */
.rs-userpick:hover .rs-iconbtn { border-color: var(--accent2); color: var(--accent); }
.rs-userpick:focus-within .rs-iconbtn { outline: 2px solid var(--accent); outline-offset: 2px; }
.rs-svc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rs-svc[hidden] { display: none; }
.rs-svc select { max-width: 180px; padding: 4px 8px; font-size: 13px; text-overflow: ellipsis; }
.rs-tools { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-left: auto; }
.btn.rs-iconbtn { width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); flex: 0 0 auto; }
.btn.ghost.rs-iconbtn { border-color: var(--line); background: var(--surface); }
.btn.rs-iconbtn:hover { border-color: var(--accent2); color: var(--accent); }
.btn.rs-menu-btn { display: none; }
.role, .rs-role, .rs-hlabel { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 12px; background: var(--surface); }
.switch.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.rs-banners { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }
.rs-banners:empty { display: none; }
.rs-banners .draftbar { width: fit-content; max-width: 100%; margin-left: auto; }
.rs-main { max-width: var(--maxw); margin: 0 auto; padding: 20px 16px 80px; min-height: 60vh; }
.rs-foot { max-width: var(--maxw); margin: 0 auto; padding: 18px 16px 30px; color: var(--muted); font-size: 12.5px; border-top: 1px solid var(--line); }
@media (max-width: 760px) {
  .btn.rs-menu-btn { display: inline-flex; margin-left: auto; }
  .rs-nav { display: none; flex-basis: 100%; flex-direction: column; }
  .rs-top.open .rs-nav { display: flex; }
  .rs-tools { flex-wrap: wrap; justify-content: flex-start; margin-left: 0; }
  .rs-banners .draftbar { width: auto; margin-left: 0; }
}

/* ---------- basics from the mock-up ---------- */
select, input[type=text], input[type=url], input[type=search], input[type=number], input[type=email], textarea { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; max-width: 100%; }
textarea { width: 100%; min-height: 72px; resize: vertical; }
input[type=text], input[type=url], input[type=email] { width: 100%; }
.btn { text-decoration: none; color: var(--ink); border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-pill); padding: 6px 14px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; line-height: 1.4; }
.btn:hover { border-color: var(--accent2); }
.btn.pri { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.danger { color: var(--danger); border-color: var(--danger); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.sm { padding: 3px 10px; font-size: 12px; }
.btn.icon { padding: 3px 8px; font-size: 12px; border-radius: 8px; }
.btn.ghost { border-color: transparent; background: transparent; }
.note { font-size: 13px; color: var(--muted); border-left: 3px solid var(--line); padding-left: 10px; margin: 6px 0 18px; }
.statement { font-size: 15px; color: var(--muted); margin: 0 0 10px; max-width: 880px; }
.draftbar { background: var(--todo-bg); border: 1px solid var(--todo-line); border-radius: var(--r); padding: 8px 14px; font-size: 13px; margin: 12px 0 0; }
.draftbar.preview { background: var(--soft); border-color: var(--accent2); }
.draftbar .btn { margin-left: 8px; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.tab { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r); padding: 8px 14px; text-align: left; min-width: 120px; color: var(--ink); text-decoration: none; }
.tab b { display: block; font-size: 14px; }
.tab span { font-size: 12px; color: var(--muted); }
.tab.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tab.on span { color: inherit; opacity: .85; }
.tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.tools input[type=search] { flex: 1 1 240px; border-radius: var(--r-pill); padding: 8px 14px; }
.tools select { border-radius: var(--r-pill); }
.pill { border: 1px solid var(--accent); color: var(--accent); background: var(--surface); border-radius: var(--r-pill); padding: 5px 12px; font-size: 12.5px; font-weight: 600; }
.pill.on { background: var(--accent); color: var(--on-accent); }
.sec { margin: 18px 0 8px; border-left: 4px solid var(--c, var(--accent)); padding-left: 10px; }
.sec h3 { margin: 0; font-size: 17px; display: inline; }
.sec small { color: var(--muted); margin-left: 8px; }
.sec p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.rows { display: flex; flex-direction: column; gap: 6px; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; text-align: left; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px; color: var(--ink); text-decoration: none; }
.row:hover { border-color: var(--accent2); }
.row .nm { font-weight: 600; }
.row .ds { grid-column: 1 / 2; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .cm { grid-row: 1 / 3; grid-column: 2; }
.tag { display: inline-block; font-size: 11px; font-weight: 700; border-radius: var(--r-pill); padding: 1px 8px; margin-left: 8px; vertical-align: 3px; border: 1px solid currentColor; line-height: 1.5; }
.tag.first { margin-left: 0; }
.lvl { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 1px 7px; color: #fff; background: var(--accent); white-space: nowrap; }
.lvl.l1 { background: var(--lvl-1); } .lvl.l2 { background: var(--lvl-2); } .lvl.l3 { background: var(--lvl-3); }
.meter { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 11.5px; color: var(--muted); min-width: 92px; }
.meter i { display: block; width: 92px; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.meter i b { display: block; height: 100%; background: var(--ok); }
.meter i b.lo { background: var(--warn); }
.back { display: inline-block; margin-bottom: 10px; font-size: 13px; text-decoration: none; }
.hdr { background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--c, var(--accent)); border-radius: var(--r-lg); padding: 20px 22px; margin-top: 12px; }
.hdr small.eyebrow, .hdr > small { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; }
.hdr h2, .hdr h1 { margin: 4px 0 8px; font-size: 26px; line-height: 1.25; }
.hdr .lead { margin: 0; font-size: 16.5px; max-width: 880px; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; font-size: 13.5px; }
.facts b { font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin-right: 4px; }
.acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; align-items: center; }
.link { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r); padding: 8px 14px; font-weight: 600; font-size: 13.5px; text-decoration: none; border: 1px solid var(--accent); color: var(--accent); background: var(--surface); }
.link.main { background: var(--accent); color: var(--on-accent); }
.link.off { border-style: dashed; border-color: var(--line); color: var(--muted); cursor: default; }
.edbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.edbar .sp { flex: 1; }
.banner { border-radius: var(--r); padding: 10px 14px; margin-top: 12px; font-size: 13.5px; background: var(--todo-bg); border: 1px solid var(--todo-line); }
.banner.ret, .banner.info { background: var(--soft); border-color: var(--line); }
.banner.bad { background: var(--surface); border-color: var(--danger); color: var(--danger); }
.banner.ok { background: var(--surface); border-color: var(--ok); color: var(--ok); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 14px; margin-top: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 14px; margin-top: 14px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; min-width: 0; margin-top: 14px; }
.grid2 .card, .grid3 .card { margin-top: 0; }
.card h4 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .7px; color: var(--accent); }
.card h5 { margin: 14px 0 4px; font-size: 13px; color: var(--muted); font-weight: 600; }
.card h4 + h5, .card .statement + h5 { margin-top: 0; }
.card p { margin: 0; }
.card .statement { font-size: 13.5px; margin-bottom: 10px; }
a.card { display: block; text-decoration: none; color: var(--ink); }
a.card:hover { border-color: var(--accent2); }
ol.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; }
ol.steps > li { counter-increment: s; position: relative; padding: 0 0 10px 34px; }
ol.steps > li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
ul.plain { margin: 0; padding-left: 18px; }
ul.plain li { margin-bottom: 4px; }
.levelbox { display: flex; gap: 12px; align-items: flex-start; background: var(--soft); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; }
.levelbox .big { font-size: 20px; font-weight: 700; color: #fff; border-radius: 8px; padding: 4px 10px; flex: none; }
.levelbox .big.l1 { background: var(--lvl-1); } .levelbox .big.l2 { background: var(--lvl-2); } .levelbox .big.l3 { background: var(--lvl-3); }
.levelbox b { display: block; }
.levelbox span { font-size: 13px; color: var(--muted); }
.todo { display: inline-block; font-size: 12px; color: var(--warn); border: 1px dashed var(--todo-line); background: var(--todo-bg); border-radius: 6px; padding: 0 7px; }
.chip { display: inline-block; font-size: 12px; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px 9px; margin: 0 4px 4px 0; background: var(--soft); color: var(--ink); text-decoration: none; }
a.chip:hover, button.chip:hover { border-color: var(--accent2); }
button.chip { cursor: pointer; }
.ph { display: inline-block; font-size: 11px; font-weight: 700; color: #fff; border-radius: 6px; padding: 1px 7px; white-space: nowrap; background: var(--c, var(--ph-addon)); text-decoration: none; }
.linklist { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.linkrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--r); padding: 8px 12px; text-decoration: none; color: var(--ink); background: var(--soft); }
.linkrow:hover { border-color: var(--accent2); }
.linkrow .ico { width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-size: 14px; flex: none; }
.linkrow small { color: var(--muted); display: block; }
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 12px; }
.shot { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--soft); text-align: left; padding: 0; }
.shot img { display: block; width: 100%; height: 150px; object-fit: cover; background: #dfe5ec; }
.shot span { display: block; padding: 8px 10px; font-size: 13px; }
.shot span small { display: block; color: var(--muted); }
.tbl { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
tr.click { cursor: pointer; }
tr.click:hover td { background: var(--soft); }
.log { padding-left: 18px; margin: 0; }
.log li { margin-bottom: 6px; }

/* ---------- forms (mock-up) ---------- */
form .fs, .fs { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
form .fs h3, .fs h3 { margin: 0 0 10px; font-size: 15px; color: var(--accent); }
.fld { margin-bottom: 14px; }
.fld label.lb, .fld .lb { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.fld .hint { font-size: 12px; color: var(--muted); margin-top: 3px; }
.req { color: var(--danger); }
.must { font-size: 10.5px; font-weight: 700; color: var(--warn); border: 1px solid var(--todo-line); border-radius: var(--r-pill); padding: 0 6px; margin-left: 6px; vertical-align: 1px; }
.fld.err input, .fld.err textarea, .fld.err select { border-color: var(--danger); }
.fld .em { color: var(--danger); font-size: 12.5px; margin-top: 3px; }
.errs { background: var(--surface); border: 1px solid var(--danger); border-radius: var(--r); padding: 10px 14px; margin-bottom: 14px; color: var(--danger); font-size: 13.5px; }
.errs ul { margin: 4px 0 0; padding-left: 18px; }
.warns { background: var(--todo-bg); border: 1px solid var(--todo-line); border-radius: var(--r); padding: 10px 14px; margin-bottom: 14px; font-size: 13.5px; }
.warns ul { margin: 4px 0 0; padding-left: 18px; }
.linerow { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }
.linerow .n { width: 22px; text-align: right; font-size: 12px; color: var(--muted); flex: none; }
.linerow input, .linerow select { flex: 1 1 auto; min-width: 0; }
.linerow select.kind { flex: 0 0 auto; max-width: 42%; }
.sysrow, .gridrow { display: flex; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; align-items: flex-start; }
.sysrow input, .gridrow input, .gridrow select { flex: 1 1 160px; width: auto; min-width: 0; }
.gridrow textarea { flex: 2 1 240px; width: auto; min-height: 40px; }
.gridrow .rowbtns { display: flex; gap: 4px; flex: none; }
.rowbox { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; margin-bottom: 10px; background: var(--soft); }
.rowbox .mh { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.rowbox .mh .sp { flex: 1; }
.mediaitem { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; margin-bottom: 10px; background: var(--soft); }
.mediaitem .mh { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.mediaitem .mh select { flex: 0 0 auto; }
.mediaitem .mh .sp { flex: 1; }
.mediaitem img { max-width: 220px; max-height: 130px; border-radius: 6px; border: 1px solid var(--line); display: block; margin: 6px 0; }
.mediaitem .two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 8px; }
.multi .chips { margin-bottom: 4px; }
.multi select { width: 100%; }
.opt { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; }
.foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 0; }   /* in the page flow: only the unsaved bar is sticky */
.box { border: 1px solid var(--line); border-radius: var(--r); padding: 12px; margin-top: 12px; }
.box.red { border-color: var(--danger); }
/* form layout (10 Oct 2026): fields only as wide as their content needs */
.fs[hidden] { display: none !important; }
.fld.w-s { max-width: 220px; }
.fld.w-m { max-width: 340px; }
.fld.w-l { max-width: 720px; }
.fld.w-s select, .fld.w-m select { width: 100%; }
.fs.flow { display: flex; flex-wrap: wrap; column-gap: 20px; align-items: flex-start; }
.fs.flow > * { flex: 1 1 100%; min-width: 0; }
.fs.flow > .fld.w-s { flex: 0 1 220px; }
.fs.flow > .fld.w-m { flex: 0 1 340px; }
.fcols { display: grid; grid-template-columns: minmax(0, 720px) minmax(260px, 380px); gap: 0 24px; align-items: start; justify-content: start; }
.fcol { min-width: 0; }
.fcol.side { background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px 0; }
.fcol.side .fld select { width: 100%; }
.fcol.side .fld.w-s, .fcol.side .fld.w-m { max-width: none; }
@media (max-width: 1000px) { .fcols { grid-template-columns: minmax(0, 1fr); } .fcol.side { order: -1; margin-bottom: 14px; } }
/* agent picker: platform first, then an agent of that platform */
.agentpick .pickrow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.agentpick .pickrow label { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); margin-bottom: 3px; }
.agentpick .pickrow select { width: 100%; }
.agentpick .chips { margin-bottom: 6px; }
.agentpick .chip small { color: var(--muted); font-weight: 400; }

/* ---------- dialogs, drawer, toasts ---------- */

/* ---------- stat band, strips, misc ---------- */
.statband { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 10px; margin: 10px 0 0; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.stat b { display: block; font-size: 26px; line-height: 1.1; color: var(--accent); }
.stat span { font-size: 13px; color: var(--muted); }
.phstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 8px; margin-top: 10px; }
.phcard { display: block; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--c); border-radius: 12px; padding: 10px 12px; }
.phcard:hover { border-color: var(--c); }
.phcard small { color: var(--muted); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; }
.phcard b { display: block; font-size: 17px; }
.phcard span { display: block; font-size: 12.5px; color: var(--muted); }
.kind { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; border-radius: 6px; padding: 1px 6px; border: 1px solid var(--line); color: var(--muted); background: var(--soft); }
.kind.approval { color: var(--ok); border-color: var(--ok); }
.kind.decision { color: var(--warn); border-color: var(--warn); }
.kind.ai { color: var(--lvl-3); border-color: var(--lvl-3); }

/* workflow step list */
ol.wf { list-style: none; margin: 0; padding: 0; counter-reset: w; }
ol.wf > li { counter-increment: w; position: relative; padding: 8px 10px 8px 44px; border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 6px; background: var(--surface); cursor: pointer; }
ol.wf > li:hover, ol.wf > li.on { border-color: var(--accent2); }
ol.wf > li::before { content: counter(w); position: absolute; left: 10px; top: 9px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
ol.wf > li.k-approval::before { background: var(--ok); }
ol.wf > li.k-decision::before { background: var(--warn); border-radius: 4px; transform: rotate(45deg); }
ol.wf .t { font-weight: 600; }
ol.wf .m { font-size: 12.5px; color: var(--muted); }

/* flow map */
.flowmap { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; margin: 4px 0 14px; padding: 10px; background: var(--soft); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.fnode { display: flex; align-items: center; }
.fnode button { max-width: 170px; min-width: 96px; text-align: left; font-size: 12px; line-height: 1.3; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; margin: 4px 0; }
.fnode button:hover, .fnode button.on { border-color: var(--accent2); }
.fnode button b { display: block; font-size: 11px; color: var(--muted); }
.fnode.k-approval button { border-color: var(--ok); }
.fnode.k-decision button { border-color: var(--warn); border-style: dashed; }
.fnode.ai button { box-shadow: inset 3px 0 0 var(--lvl-3); }
.fnode .arrow { color: var(--muted); padding: 0 4px; font-size: 14px; }
.fnode .route { display: block; font-size: 11px; color: var(--warn); margin-top: 2px; }

/* phones (from the mock-up) */
@media (max-width: 560px) { .row { grid-template-columns: 1fr; } .row .cm { grid-row: auto; grid-column: auto; } .meter { align-items: flex-start; } .hdr { padding: 16px; } .hdr h2, .hdr h1 { font-size: 22px; } .fnode button { max-width: 140px; } }
.gridrow .fld select, .gridrow .fld input[type=text], .gridrow .fld textarea { width: 100%; }

/* [[CONFIRM]] chip (RS.ui.text) */
.cf { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; color: var(--warn); background: var(--todo-bg); border: 1px dashed var(--todo-line); border-radius: 6px; padding: 0 5px; margin: 0 2px; vertical-align: 1px; cursor: help; white-space: nowrap; }

input[type=password] { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; width: 100%; max-width: 100%; }
/* index tabs under the title */
.itemtabs { margin: 6px 0 4px; }
/* shared phase page: exit criteria stack as cards on phones */
@media (max-width: 600px) {
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr { border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; margin-bottom: 8px; }
  table.stack td { border: 0; padding: 3px 0; }
  table.stack td[data-l]::before { content: attr(data-l); display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
}

/* ---------- in-page UI (round 2: nothing floats over the page) ---------- */
/* nav scrolls sideways on narrow screens instead of a menu overlay */
@media (max-width: 760px) {
  .btn.rs-menu-btn { display: none !important; }
  .rs-nav { display: flex !important; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; flex-basis: 100%; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .rs-nav a { white-space: nowrap; }
}
/* admin row: second nav row for editors and admins */
.rs-adminrow { border-top: 1px solid var(--line); background: var(--soft); }
.rs-adminrow-in { max-width: var(--maxw); margin: 0 auto; padding: 4px 16px; display: flex; gap: 2px 6px; align-items: center; overflow-x: auto; }
.rs-adminrow-in > :first-child { margin-left: auto; }
.rs-adminrow a { font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; padding: 3px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.rs-adminrow a:hover { color: var(--ink); background: var(--surface); }
.rs-adminrow a.on { color: var(--accent); background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
/* The version switch at the end of the Admin row: Viewing  Published v3.2 | Draft v3.3 */
.rs-verseg { display: inline-flex; align-items: center; margin-left: 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); padding: 2px; white-space: nowrap; }
.rs-verseg[hidden] { display: none; }
.rs-verseg .lab { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); padding: 0 8px 0 10px; }
.rs-verseg button { font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); background: none; border: 0; border-radius: var(--r-pill); padding: 3px 12px; cursor: pointer; }
.rs-verseg button:hover { color: var(--ink); }
.rs-verseg button.on { background: var(--accent); color: var(--on-accent); }
@media (max-width: 760px) { .rs-adminrow-in > :first-child { margin-left: 0; } }
/* Versions page: a version row opens its details in place */
.v-open { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 2px 0; color: var(--accent); font: inherit; cursor: pointer; text-align: left; }
.v-open:hover b { text-decoration: underline; }
.v-caret { display: inline-block; font-size: 11px; transition: transform .15s var(--ease); }
.v-open[aria-expanded="true"] .v-caret { transform: rotate(90deg); }
.v-detail > td { background: var(--soft); }
.v-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 4px 0; font-size: 13px; }
.v-dl dt { color: var(--muted); font-weight: 600; }
.v-dl dd { margin: 0; }
@media (max-width: 760px) { .v-dl { grid-template-columns: 1fr; } .v-dl dd { margin-bottom: 6px; } }
@media (prefers-reduced-motion: reduce) { .v-caret { transition: none; } }
/* the one sticky element: unsaved changes */
.unsaved-bar { position: sticky; top: 0; z-index: 5; max-width: var(--maxw); margin: 8px auto 0; padding: 0 16px; }
.unsaved-in { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; background: var(--todo-bg); border: 1px solid var(--todo-line); border-radius: var(--r); padding: 8px 12px; font-size: 13.5px; box-shadow: var(--shadow); }
.unsaved-in .msg { color: var(--danger); font-weight: 600; }
.unsaved-in .sp { flex: 1; }
.unsaved-bar.hold .unsaved-in { border-color: var(--danger); animation: rs-hold .45s ease 2; }
@keyframes rs-hold { 0%, 100% { background: var(--todo-bg); } 50% { background: var(--surface); } }
@media (prefers-reduced-motion: reduce) { .unsaved-bar.hold .unsaved-in { animation: none; } }
/* status line */
.status-area { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }
.status-area:empty { display: none; }
.statusline { display: flex; gap: 10px; align-items: center; margin-top: 10px; padding: 8px 12px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); font-size: 13.5px; }
.statusline .ico { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; color: #fff; background: var(--accent); flex: none; }
.statusline .msg { flex: 1; }
.statusline.success { border-color: var(--ok); } .statusline.success .ico { background: var(--ok); }
.statusline.error { border-color: var(--danger); color: var(--danger); } .statusline.error .ico { background: var(--danger); }
.statusline.warning { border-color: var(--todo-line); background: var(--todo-bg); } .statusline.warning .ico { background: var(--warn); }
/* inline confirm */
.inline-confirm { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 4px 8px; border-radius: var(--r); background: var(--soft); border: 1px solid var(--line); font-size: 13px; }
.inline-confirm.danger { border-color: var(--danger); }
.inline-confirm .q { font-weight: 600; }
/* enlarge in place */
.shots .shot.big { grid-column: 1 / -1; }
.shot.big img { height: auto; max-height: none; object-fit: contain; background: var(--soft); }
.shot .enlarge-hint { display: block; color: var(--accent); font-weight: 600; }

/* ---------- AI agents: the original agents module (round 2), in the portal accent ---------- */
.ag-hero { position: relative; overflow: hidden; margin: -20px calc(50% - (100vw - var(--sbw, 0px)) / 2) 22px; padding: 46px 16px 40px; background: var(--hero-bg); color: #fff; }   /* full bleed without the scrollbar width */
.ag-hero::before { content: ''; position: absolute; right: -10%; top: -40%; width: 60%; height: 140%; background: radial-gradient(closest-side, var(--hero-glow), transparent); pointer-events: none; }
.ag-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 64px); -webkit-mask-image: linear-gradient(transparent, #000); mask-image: linear-gradient(transparent, #000); pointer-events: none; }
.ag-hero-in { position: relative; max-width: var(--maxw); margin: 0 auto; }
.ag-hero .eyebrow, .ag-herocard .eyebrow, .workhead .eyebrow, .ag-sec .eyebrow { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; }
.ag-hero .eyebrow { color: #8fc3ff; }
.ag-hero .ag-title { color: #fff; font-size: clamp(28px, 4vw, 40px); line-height: 1.15; margin: 8px 0 12px; max-width: 760px; }
.ag-hero .lead { color: #e6eefc; font-size: 16.5px; max-width: 820px; margin: 0 0 12px; }
.ag-hero .principle { color: #fff; border-left: 3px solid rgba(255,255,255,.6); padding-left: 12px; margin: 0; font-size: 15px; }
.ag-page { display: flex; flex-direction: column; gap: 16px; }
.ag-back { color: var(--pa-text); font-weight: 600; margin: 0; }
.ag-toolbar { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; box-shadow: var(--depth); }
.ag-search { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 0 14px; background: var(--soft); }
.ag-search:focus-within { border-color: var(--pa); background: var(--surface); }
.ag-search svg { width: 16px; height: 16px; flex: none; stroke: var(--muted); fill: none; stroke-width: 2; }
.ag-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 9px 0; font-size: 13.5px; border-radius: 0; }
.ag-seg { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ag-k { font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.ag-opt { font-size: 12.5px; font-weight: 700; color: var(--pa-text); background: var(--surface); border: 1px solid var(--pa); border-radius: 999px; padding: 6px 12px; line-height: 1.3; }
.ag-opt:hover { background: var(--pa-tint); }
.ag-opt.on { color: #fff; background: var(--pa); border-color: var(--pa); }
.ag-add { font-size: 12.5px; font-weight: 700; color: #fff; background: var(--pa-add); border-radius: 999px; padding: 8px 16px; text-decoration: none; }
.ag-add:hover { filter: brightness(.95); }
.ag-ptabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.ag-ptab { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 12px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-top: 4px solid var(--c); border-radius: 10px; box-shadow: var(--depth); min-width: 0; }
.ag-ptab small { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--c); }
.ag-ptab b { font-size: 13.5px; line-height: 1.25; }
.ag-ptab span { font-size: 11.5px; font-weight: 600; color: var(--c); }
.ag-ptab:hover { border-color: var(--c); }
.ag-ptab.on { background: var(--c); border-color: var(--c); color: #fff; }
.ag-ptab.on small, .ag-ptab.on span { color: #fff; }
.ag-ptab.none { opacity: .55; }
@media (max-width: 1100px) { .ag-ptabs { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ag-ptabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ag-meta { display: flex; justify-content: space-between; align-items: center; gap: 6px 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.ag-legend { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; font-size: 11.5px; }
.ag-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.ag-legend i.ag-lnum { width: 15px; height: 15px; border-radius: 3px; font-size: 9.5px; font-weight: 700; line-height: 15px; font-style: normal; text-align: center; vertical-align: -3px; }
/* each legend entry is a centred row: the mark (logo, letter badge or numbered square) sits on the text's centre line */
.ag-legend > span { display: inline-flex; align-items: center; gap: 5px; line-height: 16px; }
.ag-legend > span > i, .ag-legend > span > .pf-mark { margin: 0; vertical-align: 0; flex: none; }
.ag-legend .pf-badge { height: 16px; box-sizing: border-box; line-height: 14px; }
.ag-sec { margin: 14px 0 8px; border-left: 4px solid var(--c, var(--pa)); padding-left: 12px; }
.ag-sec .eyebrow { color: var(--c, var(--pa)); }
.ag-sec h3 { display: block; margin: 2px 0 2px; font-size: 19px; }
.ag-sec p { margin: 0; font-size: 13px; color: var(--muted); }
.ag-grid { display: grid; gap: 10px; }
.ag-compact.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ag-compact.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ag-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .ag-compact.c4, .ag-compact.c3, .ag-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ag-compact.c4, .ag-compact.c3, .ag-cards { grid-template-columns: minmax(0, 1fr); } }
.row.ag-tile { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 11px 14px; border-radius: 10px; box-shadow: var(--depth); }
.row.ag-tile .nm { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.row.ag-tile .meter { grid-column: 2 / 4; flex-direction: row; align-items: center; min-width: 0; gap: 6px; }
.row.ag-tile:hover .nm { color: var(--pa-text); }
.ag-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ag-new { font-style: normal; margin-left: 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #a34b00; background: #fff4ea; border: 1px solid #ffd0aa; border-radius: 4px; padding: 1px 5px; vertical-align: 1px; }
.ag-strip { display: inline-grid; grid-template-columns: repeat(7, 15px); gap: 2px; flex: none; }
.ag-strip i { height: 17px; border-radius: 3px; background: var(--line); color: var(--muted); font-size: 10px; font-weight: 700; line-height: 17px; font-style: normal; text-align: center; }
.row.ag-card { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 14px 16px; border-top: 4px solid var(--c); border-radius: 12px; box-shadow: var(--depth); }
.ag-card-top { display: flex; align-items: center; gap: 8px; }
.ag-card-top .nm { flex: 1; font-weight: 700; font-size: 14.5px; }
.row.ag-card .ds { white-space: normal; overflow: visible; font-size: 13px; color: var(--muted); }
.ag-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.row.ag-card .meter { align-items: flex-start; }
.ag-empty { padding: 36px; text-align: center; color: var(--muted); background: var(--surface); border: 1px dashed var(--line); border-radius: 12px; }
/* agent page */
.ag-herocard { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; background: var(--card); color: #fff; border: 0; border-radius: 18px; padding: 26px 30px; box-shadow: 0 18px 40px -22px rgba(7, 42, 94, .7); margin-top: 0; }
.ag-herocard.figs-in { grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); align-items: center; }
.ag-herocard .eyebrow { color: rgba(255,255,255,.82); }
.ag-herocard h1 { color: #fff; font-size: clamp(24px, 3vw, 32px); margin: 6px 0 10px; }
.ag-herocard .lead { color: #fff; opacity: .95; }
.ag-hchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ag-hchip { font-size: 11.5px; font-weight: 700; color: #fff; border: 1px solid rgba(255,255,255,.6); border-radius: 999px; padding: 2px 10px; background: rgba(255,255,255,.12); }
.ag-herocard .acts .link { background: transparent; color: #fff; border-color: rgba(255,255,255,.75); border-radius: 999px; }
.ag-herocard .acts .link.main { background: #fff; color: var(--pa-deep); border-color: #fff; }
.ag-herocard .acts .link.off { color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.45); }
.ag-herocard .cf { color: #fff; background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.6); }
.ag-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.figs-in .ag-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ag-fig { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; box-shadow: var(--depth); }
.ag-fig b { display: block; font-size: 26px; line-height: 1.1; color: var(--pa-text); }
.ag-fig span { font-size: 12.5px; color: var(--muted); }
.figs-in .ag-fig { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); box-shadow: none; }
.figs-in .ag-fig b, .figs-in .ag-fig span { color: #fff; }
@media (max-width: 900px) { .ag-herocard.figs-in { grid-template-columns: minmax(0, 1fr); } .ag-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ag-edstrip { margin-top: 0; padding: 8px 12px; border: 1px dashed var(--line); border-radius: 10px; background: var(--surface); }
.ag-body { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
.ag-main, .ag-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ag-main > .card, .ag-side > .card, .ag-side > * { margin-top: 0; }
@media (max-width: 960px) { .ag-body { grid-template-columns: minmax(0, 1fr); } }
.card.ag-c { border-radius: 14px; box-shadow: var(--depth); }
.card.ag-c h4 { color: var(--pa-text); letter-spacing: 1px; font-size: 12px; }
.card.ag-c.red { border-color: var(--danger); }
.ag-tablecard { padding: 0; overflow: hidden; }
.ag-tablecard .ag-th { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 14px 18px; background: var(--pa-tint); border-bottom: 1px solid var(--line); }
.ag-tablecard .ag-th h4 { margin: 0; }
.ag-tablecard > p { padding: 14px 18px; }
.ag-table th { background: var(--soft); }
.ag-table td, .ag-table th { padding: 9px 14px; }
.ag-phs { display: flex; flex-wrap: wrap; gap: 6px; }
.ph.big { font-size: 12px; padding: 4px 10px; border-radius: 8px; }
.workhead { border-left: 4px solid var(--pa); padding: 4px 0 4px 12px; }
.workhead .eyebrow { color: var(--pa-text); }
.workhead h1 { margin: 2px 0 0; }
@media print { .rs-top, .rs-adminrow, .rs-banners, .status-area, .unsaved-bar, .ag-toolbar, .ag-ptabs, .rs-foot { display: none !important; } .ag-hero { margin: 0; color: #000; background: none; } .ag-hero .ag-title, .ag-hero .lead, .ag-hero .principle { color: #000; } }
.hdr.ag-herocard > .ag-hc-main > small.eyebrow, .ag-herocard small.eyebrow { color: rgba(255,255,255,.85); }
/* dark variant: group and phase colours as text are lightened so dark navy groups stay readable */
:root[data-theme="dark"] .ag-ptab:not(.on) span, :root[data-theme="dark"] .ag-ptab:not(.on) small, :root[data-theme="dark"] .ag-sec .eyebrow { color: color-mix(in srgb, var(--c) 55%, #ffffff); }
:root[data-theme="dark"] .ag-sec { border-left-color: color-mix(in srgb, var(--c) 70%, #ffffff); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ag-ptab:not(.on) span, :root:not([data-theme="light"]) .ag-ptab:not(.on) small, :root:not([data-theme="light"]) .ag-sec .eyebrow { color: color-mix(in srgb, var(--c) 55%, #ffffff); }
  :root:not([data-theme="light"]) .ag-sec { border-left-color: color-mix(in srgb, var(--c) 70%, #ffffff); }
}

/* agents, review c2-1: joined compact list (Runningstart), top bar, top row of three, drafts / supports panels */
.ag-grid.ag-joined { display: block; columns: 3 300px; column-gap: 0; column-rule: 1px solid var(--line); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 4px 0; box-shadow: var(--depth); }
.ag-joined > .row.ag-tile { break-inside: avoid; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 8px 16px; background: transparent; }
.ag-joined > .row.ag-tile:hover { background: var(--pa-tint); }
.ag-joined > .row.ag-tile .nm { font-size: 12.5px; }
.row.ag-tile .cf { font-size: 9.5px; padding: 0 4px; margin-left: 4px; }
.ag-topbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ag-topbar .sp { flex: 1; }
.ag-sibs { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-sib { font-size: 11.5px; font-weight: 700; color: var(--pa-text); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; text-decoration: none; }
.ag-sib:hover { border-color: var(--pa); }
.ag-principle { margin: 14px 0 0; border-left: 3px solid rgba(255,255,255,.55); padding-left: 10px; font-size: 13px; color: rgba(255,255,255,.9); }
.ag-top3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.ag-top3 > .card, .ag-top3 .ag-side > * { margin-top: 0; }
.ag-top3 .ag-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ag-top3 .ag-side > :last-child { flex: 1 1 auto; }
@media (max-width: 1000px) { .ag-top3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ag-top3 { grid-template-columns: minmax(0, 1fr); } }
.ag-halves { margin-top: 0; }
.ag-flowrows { display: flex; flex-direction: column; }
.ag-flowrow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 18px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.ag-flowrow:last-child { border-bottom: 0; }
.ag-flowrow:hover { background: var(--pa-tint); }
.ag-flowrow .nm b { display: block; font-size: 14px; }
.ag-flowrow .nm small { color: var(--muted); font-size: 12px; }
.ag-flowrow .go { font-size: 12px; font-weight: 700; color: var(--pa-text); white-space: nowrap; }
.ag-pn { font-size: 11.5px; font-weight: 700; }

/* review c2-2 */
:root { --bleed: calc(50% - (100vw - var(--sbw, 0px)) / 2); }   /* full-bleed heads: margin-left/right: var(--bleed) */
/* one CONFIRM chip style everywhere (as the board's pill); the note is in the tooltip */
.cf { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .06em; color: #b3261e; background: #fdecec; border: 1px solid #f3b4b0; border-radius: 999px; padding: 0 7px; margin: 0 2px 0 4px; vertical-align: 1px; cursor: help; white-space: nowrap; line-height: 1.5; }
:root[data-theme="dark"] .cf { color: #ffb4ab; background: #3a1d1d; border-color: #6b2c2c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cf { color: #ffb4ab; background: #3a1d1d; border-color: #6b2c2c; } }
.ag-herocard .cf { color: #fff; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.6); }
/* header nav on narrow screens: scrolls sideways with a fade cue at the edge */
@media (max-width: 760px) {
  .rs-nav { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); padding-right: 28px; }
}
/* agent page: siblings on one line next to Print */
.ag-topbar { flex-wrap: nowrap; }
.ag-topbar .ag-back { flex: none; }
.ag-sibs { flex-wrap: nowrap; overflow-x: auto; min-width: 0; scrollbar-width: thin; }
.ag-sib { white-space: nowrap; }
.ag-sib.more { color: var(--muted); }
.ag-topbar [data-print] { flex: none; }
@media (max-width: 640px) { .ag-topbar { flex-wrap: wrap; } .ag-topbar .sp { display: none; } .ag-sibs { flex-basis: 100%; order: 3; } }
/* agent page steps table: rows become cards on phones */
@media (max-width: 700px) {
  table.ag-table thead { display: none; }
  table.ag-table, table.ag-table tbody, table.ag-table tr, table.ag-table td { display: block; width: 100%; }
  table.ag-table tr { border-bottom: 1px solid var(--line); padding: 10px 14px; }
  table.ag-table td { border: 0; padding: 2px 0; }
  table.ag-table td[data-l]::before { content: attr(data-l); display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
}

/* ======================================================================
   Editor page (10 Oct 2026): deliverable / key activity and agent forms (RS.ui.editor),
   segmented choices and character counters for every form
   ====================================================================== */
.ed { --ed-acc: var(--accent); --ed-r: 14px; }
.ed-head { padding: 6px 0 18px; border-bottom: 1px solid var(--line); }
.ed-crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); }
.ed-crumbs a { color: var(--muted); text-decoration: none; }
.ed-crumbs a:hover { color: var(--accent); text-decoration: underline; }
.ed-crumbs span:last-child { color: var(--ink); font-weight: 600; }
.ed-crumbs .sep { color: var(--line); font-weight: 700; }
.ed-titlerow { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-end; justify-content: space-between; margin-top: 12px; }
.ed-titles { min-width: 0; flex: 1 1 420px; }
.ed-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ed-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
.ed-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--accent)); }
.ed-chip.solid { color: var(--on-accent); background: var(--c, var(--accent)); border-color: transparent; }
.ed-head h1 { font-size: 30px; line-height: 1.15; margin: 0; overflow-wrap: anywhere; }
.ed-sub { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.ed-actions { display: flex; gap: 8px; flex: none; }
.ed-actions .btn { padding: 9px 18px; border-radius: 999px; font-weight: 700; }

.ed-body { display: grid; grid-template-columns: 210px minmax(0, 1fr) 290px; gap: 24px; align-items: start; margin-top: 22px; }
/* section rail */
.ed-rail ol { list-style: none; margin: 0; padding: 0; position: relative; }
.ed-rail ol::before { content: ""; position: absolute; left: 15px; top: 18px; bottom: 18px; width: 2px; background: var(--line); }
.ed-step { position: relative; display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; font: inherit; color: var(--ink); background: none; border: 0; border-radius: 10px; padding: 8px 8px 8px 0; cursor: pointer; }
.ed-step:hover { background: var(--soft); }
.ed-step .n { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--muted); background: var(--surface); border: 2px solid var(--line); }
.ed-step .t { display: flex; flex-direction: column; min-width: 0; }
.ed-step .t b { font-size: 14px; }
.ed-step .t small { font-size: 12px; color: var(--muted); }
.ed-step.done .n { color: var(--on-accent); background: var(--ok); border-color: var(--ok); }
.ed-step.todo .t small { color: var(--warn); font-weight: 600; }
.ed-step.err .n { color: #fff; background: var(--danger); border-color: var(--danger); }
.ed-step.err .t small { color: var(--danger); font-weight: 700; }
.ed-step.on { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.ed-step.on .n { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.ed-step.on:not(.done):not(.err) .n { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.ed-step.on .t b { color: var(--accent); }
.ed-step:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
/* form cards */
.ed-form .fs { background: var(--surface); border: 1px solid var(--line); border-radius: var(--ed-r); padding: 20px 24px 6px; margin-bottom: 16px; box-shadow: var(--shadow); }
.ed-form .fs h3 { font-size: 17px; color: var(--ink); margin: 0 0 18px; }
.ed-form .fs .stmt, .ed-form .fs > p { color: var(--muted); }
.ed-form .fld { margin-bottom: 18px; }
.ed-form .fs.flow > .fld.w-m { flex: 1 1 260px; max-width: none; }
.ed-form .fs.flow > .fld.w-s { flex: 0 1 200px; }
.ed-form .foot { border-top: 0; padding-top: 4px; }
.ed-tabnav { display: flex; gap: 8px; margin-right: auto; }
/* aside */
.ed-aside { display: flex; flex-direction: column; gap: 16px; }
.ed-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--ed-r); padding: 16px 18px; box-shadow: var(--shadow); }
.ed-mini { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.ed-prog { display: flex; gap: 14px; align-items: center; }
.ed-prog b { display: block; font-size: 20px; line-height: 1.1; }
.ed-prog span { font-size: 12.5px; color: var(--muted); }
.ed-ring { width: 56px; height: 56px; flex: none; transform: rotate(-90deg); }
.ed-ring circle { fill: none; stroke-width: 6; }
.ed-ring .bg { stroke: var(--line); }
.ed-ring .fg { stroke: var(--ok); stroke-linecap: round; transition: stroke-dasharray .3s var(--ease); }
.ed-check { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); }
.ed-check button { display: flex; gap: 8px; align-items: center; width: 100%; text-align: left; font: inherit; font-size: 13px; color: var(--ink); background: none; border: 0; border-radius: 8px; padding: 5px 6px; cursor: pointer; }
.ed-check button:hover { background: var(--soft); }
.ed-check small { margin-left: auto; font-size: 11px; color: var(--muted); }
.ed-check .ic { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; }
.ed-check li.done button { color: var(--muted); }
.ed-check li.done .ic { background: var(--ok); border-color: var(--ok); }
.ed-check li.req:not(.done) .ic { border-color: var(--danger); }
.ed-check li.req:not(.done) small { color: var(--danger); font-weight: 700; }
/* preview cards */
.ed-pv { border: 1px solid var(--line); border-left: 4px solid var(--c, var(--accent)); border-radius: 10px; padding: 12px 14px; background: var(--soft); }
.ed-pv h4 { font-size: 16px; margin: 0 0 2px; overflow-wrap: anywhere; }
.ed-pv .pv-sub { font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.ed-pv .pv-text { font-size: 13px; margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ed-pv .pv-kv { font-size: 12.5px; margin: 4px 0 0; }
.ed-pv .pv-kv span { color: var(--muted); }
.ed-pv .pv-empty { color: var(--muted); font-style: italic; }
.ed-pv .pv-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }

/* segmented choice */
.seg { display: inline-flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--line); border-radius: 10px; padding: 3px; background: var(--soft); max-width: 100%; }
.seg-opt { font: inherit; font-size: 13.5px; color: var(--ink); background: none; border: 0; border-radius: 8px; padding: 7px 14px; cursor: pointer; }
.seg-opt b { font-weight: 600; }
.seg-opt:hover:not(:disabled) { background: var(--surface); }
.seg-opt.on { color: var(--on-accent); background: var(--accent); box-shadow: var(--shadow); }
.seg-opt:disabled { opacity: .4; cursor: not-allowed; }
.seg-opt:focus-visible { outline: 2px solid var(--accent2); outline-offset: 1px; }
.seg.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; border: 0; padding: 0; background: none; width: 100%; }
.seg.cards .seg-opt { display: flex; flex-direction: column; gap: 2px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.seg.cards .seg-opt small { font-size: 12px; color: var(--muted); line-height: 1.35; }
.seg.cards .seg-opt.on { color: var(--ink); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.seg.cards .seg-opt.on b { color: var(--accent); }
.fcol.side .seg.cards { grid-template-columns: minmax(0, 1fr); }
/* character counter */
.fld .lb { display: flex; align-items: baseline; gap: 4px; }
.fld .lb .cnt { margin-left: auto; font-size: 11.5px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
/* calmer inputs inside editors */
.ed-form input[type=text], .ed-form input[type=url], .ed-form select, .ed-form textarea, .mv-spanel.editing input[type=text], .mv-spanel.editing select, .mv-spanel.editing textarea { border-radius: 10px; padding: 9px 12px; border-color: color-mix(in srgb, var(--line) 70%, var(--muted)); }
.ed-form input:focus, .ed-form select:focus, .ed-form textarea:focus, .mv-spanel.editing input:focus, .mv-spanel.editing select:focus, .mv-spanel.editing textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }

@media (max-width: 1180px) {
  .ed-body { grid-template-columns: 190px minmax(0, 1fr); }
  .ed-aside { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
}
@media (max-width: 820px) {
  .ed-body { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ed-rail ol { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
  .ed-rail ol::before { display: none; }
  .ed-step { flex: none; width: auto; padding: 6px 10px 6px 6px; border: 1px solid var(--line); background: var(--surface); }
  .ed-step .n { width: 26px; height: 26px; font-size: 12px; }
  .ed-head h1 { font-size: 24px; }
  .ed-form .fs { padding: 16px 14px 4px; }
}
.seg.multi { gap: 6px; border: 0; padding: 0; background: none; }
.seg.multi .seg-opt { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); padding: 6px 14px 6px 10px; }
.seg.multi .seg-opt .tick { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--muted); background: var(--soft); }
.seg.multi .seg-opt.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border-color: var(--accent); box-shadow: none; }
.seg.multi .seg-opt.on .tick { color: var(--on-accent); background: var(--accent); }
.agentpick .pl { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); margin-bottom: 3px; }
.agentpick .seg.plats { display: flex; width: 100%; }
.agentpick .seg.plats .seg-opt { flex: 1 1 auto; padding: 6px 10px; }
.agentpick .seg.plats .seg-opt small { font-size: 11px; opacity: .75; }
.mv-spanel.editing .seg.cards .seg-opt { padding: 8px 12px; }
.fld label.lb, .fld .lb { display: flex; align-items: baseline; gap: 4px; }
.fcol.side .seg:not(.cards) { display: flex; width: 100%; }
.fcol.side .seg:not(.cards) .seg-opt { flex: 1 1 auto; }
/* the step editor: the editor layout inside the step panel under the workflow map */
.ed.compact .ed-head { padding-top: 0; }
.ed.compact .ed-head h1 { font-size: 22px; }
.ed.compact .ed-body { margin-top: 18px; }
.ed.compact > .warns { margin: 14px 0 0; }
.ed-chip.solid.ai { background: var(--lvl-3); }
.mv-spanel.editing { padding: 18px 20px 8px; }
.mv-spanel.editing .ed-form .foot { padding-bottom: 6px; }
.ed-pv.step { --c: var(--accent); }
.ed-pv.step.k-ai { --c: var(--lvl-3); }
.ed-pv.step.k-approval { --c: var(--ok); }
.ed-pv.step.k-decision { --c: var(--warn); }

/* ---------- colour field (ui.form type 'color'): swatches plus the browser's picker ---------- */
.cpick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cp-sw { width: 32px; height: 32px; padding: 0; border-radius: 50%; background: var(--sw); border: 2px solid var(--surface, #fff); box-shadow: 0 0 0 1px var(--line); cursor: pointer; transition: transform .12s; }
.cp-sw:hover { transform: scale(1.1); }
.cp-sw.on { box-shadow: 0 0 0 2px var(--surface, #fff), 0 0 0 4px var(--ink); }
.cp-sw:focus-visible { outline: 2px solid #0091ee; outline-offset: 4px; }
.cp-custom { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink); border: 1px dashed var(--line); border-radius: 999px; padding: 3px 12px 3px 4px; cursor: pointer; }
.cp-custom.on { border-style: solid; border-color: var(--ink); }
.cp-custom:focus-within { outline: 2px solid #0091ee; outline-offset: 2px; }
.cp-custom input[type="color"] { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.cp-custom input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.cp-custom input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.cp-val { display: inline-flex; align-items: center; gap: 6px; font: 600 13px ui-monospace, Consolas, monospace; color: var(--muted); }
.cp-val i { width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }/* version details: "Start from another methodology" (admin) */
.vstart p { margin: 0 0 12px; max-width: 720px; }
.vstart-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.vstart-row .lb { margin: 0; font-weight: 600; }
.vstart-row select { flex: 1 1 280px; max-width: 420px; }
.vstart .btn.danger { color: #fff; background: var(--danger); border-color: var(--danger); }
.vstart .btn.danger:disabled { opacity: .45; cursor: not-allowed; }
/* Platform marks: the product icon (Consenz, CeleRITE) or a neutral letter badge. Colour is kept for phases. */
.pf-mark { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: 0 0 auto; vertical-align: -3px; }
.pf-mark img { width: 100%; height: 100%; display: block; }
.pf-mark .pf-dark { display: none; }
:root[data-theme="dark"] .pf-mark .pf-light { display: none; }
:root[data-theme="dark"] .pf-mark .pf-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pf-mark .pf-light { display: none; }
  :root:not([data-theme="light"]) .pf-mark .pf-dark { display: block; }
}
.pf-badge { width: auto; min-width: 16px; padding: 0 3px; font-size: 8.5px; font-weight: 800; letter-spacing: .3px; line-height: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--muted); border-radius: 4px; }
.ag-legend .ag-lplat { display: inline-flex; align-items: center; gap: 4px; }