/* EO Governance: styled from EO's DESIGN.md (eonetwork.org). Roboto, 7px radius,
   Base Blue ink, EO Blue for primary actions, six-hue accents for status only. */
:root {
  --primary: #3d46f2; --primary-dark: #1d007f; --primary-soft: #a3a7e4;
  --ink: #0c0c31; --canvas: #ffffff; --surface: #f4f4f6; --muted: #5e617d; --hairline: #e2e2e8;
  --pink: #ff346e; --orange: #fa653c; --yellow: #efb82e; --green: #1ea691;
  --held-bg: #e3f5f2; --held: #137a6a; --stale-bg: #fdf3dc; --stale: #8a6300;
  --missing-bg: #ffe6ed; --missing: #c4164a; --opt-bg: #eeeef3;
  --r: 7px; --font: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 400 15px/1.55 var(--font); color: var(--ink); background: var(--surface); }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 30px; line-height: 1.2; margin: 0 0 4px; font-weight: 700; }
h2 { font-size: 20px; margin: 0 0 12px; font-weight: 700; }
h3 { font-size: 16px; margin: 0 0 8px; font-weight: 700; }
p { margin: 0 0 12px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* Shell */
.shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.side { background: var(--ink); color: #fff; padding: 22px 16px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
@media (min-width: 901px) and (max-height: 720px) { .side { padding: 14px 16px; gap: 2px; } .side .product { margin-bottom: 10px; } .side nav a { padding: 6px 12px; } .side nav .sec { margin: 10px 12px 4px; } .side .who { padding-top: 10px; } }
.side .logo { display: block; margin: 0 8px 6px; }
.side .logo img { width: 132px; display: block; }
.side .product { margin: 0 8px 18px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--primary-soft); }
.side nav a { display: flex; align-items: center; gap: 10px; color: #d6d7ec; padding: 9px 12px; border-radius: var(--r); font-weight: 500; }
.side nav a:hover { background: rgba(255,255,255,.07); text-decoration: none; color: #fff; }
.side nav a.on { background: var(--primary); color: #fff; }
.side nav a svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.side nav a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Settings is pinned at the bottom of the sidebar, directly above the user block (it stays inside #side-nav so the
   htmx shell still swaps its active state). On phones the sidebar is not full height, so it simply comes last. */
#side-nav { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
#side-nav a.side-end { margin-top: auto; margin-bottom: 10px; }
.side nav .sec { margin: 16px 12px 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8d8fb5; }
.side .who { margin-top: auto; border-top: 1px solid rgba(255,255,255,.12); padding: 14px 8px 0; font-size: 13px; }
.side .who b { display: block; color: #fff; }
.side .who span { color: #a3a7e4; }
.side .who button { margin-top: 10px; background: none; border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: var(--r); padding: 6px 12px; font: inherit; cursor: pointer; }
.main { padding: 28px 36px 64px; max-width: 1240px; width: 100%; }
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.demo-banner { background: var(--stale-bg); color: var(--stale); border-radius: var(--r); padding: 8px 14px; font-size: 13px; margin-bottom: 18px; }

/* Cards and grids */
.card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r); padding: 20px 22px; }
.card + .card { margin-top: 16px; }
.grid > .card + .card { margin-top: 0; }
.grid { display: grid; gap: 16px; }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g2 { grid-template-columns: 1.4fr 1fr; }
.kpi .n { font-size: 34px; font-weight: 700; line-height: 1.1; }
.kpi .l { color: var(--muted); font-size: 13px; }
.bar { height: 6px; background: var(--hairline); border-radius: 9px; overflow: hidden; margin-top: 8px; }
.bar i { display: block; height: 100%; background: var(--green); }
.bar.warn i { background: var(--yellow); }
.bar.bad i { background: var(--pink); }

/* Tables */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--hairline); }
td { padding: 11px 10px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
tr:last-child td { border-bottom: none; }
.matrix th.rot { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; height: 190px; vertical-align: bottom; padding: 8px 4px; text-transform: none; letter-spacing: 0; font-size: 12px; }
.matrix td.c { text-align: center; padding: 8px 4px; }
.matrix td.name { white-space: nowrap; font-weight: 500; }
.scroll { overflow-x: auto; }

/* Status */
.pill { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.pill.held { background: var(--held-bg); color: var(--held); }
.pill.stale { background: var(--stale-bg); color: var(--stale); }
.pill.missing { background: var(--missing-bg); color: var(--missing); }
.pill.opt { background: var(--opt-bg); color: var(--muted); }
.pill.cur { background: var(--primary); color: #fff; }
.pill.req { background: var(--ink); color: #fff; }
.dot { display: inline-block; width: 16px; height: 16px; border-radius: 4px; }
.dot.held { background: var(--green); } .dot.stale { background: var(--yellow); } .dot.missing { background: var(--pink); }
.dot.optional-missing { background: var(--hairline); }
.legend { display: flex; gap: 16px; font-size: 13px; color: var(--muted); align-items: center; flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }

/* Forms */
label { display: block; font-size: 13px; font-weight: 500; margin: 0 0 4px; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], select, textarea {
  width: 100%; font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--hairline);
  border-radius: var(--r); padding: 9px 12px; min-height: 42px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary-soft); border-color: var(--primary); }
.field { margin-bottom: 12px; }
.row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.btn { display: inline-flex; align-items: center; gap: 8px; font: 700 14px var(--font); border-radius: var(--r); padding: 11px 20px; border: 1px solid var(--primary); background: var(--primary); color: #fff; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); text-decoration: none; }
.btn.ghost { background: #fff; color: var(--ink); border-color: var(--ink); }
.btn.ghost:hover { background: var(--surface); }
.btn.sm { padding: 6px 12px; font-size: 13px; }
details.drawer > summary { list-style: none; cursor: pointer; }
details.drawer > summary::-webkit-details-marker { display: none; }
details.drawer[open] > summary { margin-bottom: 14px; }

/* Ask */
.ask { display: flex; gap: 10px; }
.ask input { flex: 1; font-size: 17px; min-height: 52px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.chips a { background: #fff; border: 1px solid var(--hairline); border-radius: 99px; padding: 6px 14px; font-size: 13px; color: var(--ink); }
.chips a:hover { border-color: var(--primary); text-decoration: none; }
.answer h2 { font-size: 22px; }
.scopebox { background: var(--surface); border-radius: var(--r); padding: 10px 14px; font-size: 13px; color: var(--muted); margin-top: 14px; }

/* Login */
.login { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.login .brand { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; }
.login .brand h1 { font-size: 46px; font-weight: 400; line-height: 1.1; max-width: 460px; }
.login .form { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: #fff; }
.login .form > div { width: 100%; max-width: 380px; }
.demo-users { margin-top: 26px; font-size: 13px; }
.demo-users button { display: flex; justify-content: space-between; width: 100%; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r); padding: 9px 12px; margin-bottom: 6px; font: inherit; cursor: pointer; text-align: left; color: var(--ink); }
.demo-users button:hover { border-color: var(--primary); }
.error { background: var(--missing-bg); color: var(--missing); padding: 10px 14px; border-radius: var(--r); margin-bottom: 14px; font-size: 14px; }

/* Decision tree */
.ladder { display: grid; gap: 10px; }
.rung { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; background: #fff; border: 1px solid var(--hairline); border-radius: var(--r); padding: 14px 16px; border-left: 5px solid var(--yellow); }
.rung.global { border-left-color: var(--green); }
.rung .num { width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 700; }
.walk { background: var(--ink); color: #fff; border-radius: var(--r); padding: 26px 28px; }
.walk .q { font-size: 21px; line-height: 1.4; margin: 10px 0 18px; }
.walk .lane { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--primary-soft); }
.walk .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.walk .out { border-radius: var(--r); padding: 16px 18px; margin: 10px 0 16px; color: var(--ink); }
.walk .out.chapter { background: #fbe9b7; } .walk .out.global { background: #bfe9e1; }
.walk .docs a { color: #c9cbff; }
.trail { font-size: 13px; color: #a3a7e4; margin-top: 14px; }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: static; height: auto; overflow: visible; }
  .main { padding: 20px 16px 48px; min-width: 0; }
  .card:has(> table) { overflow-x: auto; }  /* wide tables scroll inside their card, not the page */
  .g4, .g3, .g2, .row { grid-template-columns: 1fr 1fr; }
  .login { grid-template-columns: 1fr; }
  .login .brand { padding: 32px 20px; }
}
@media (max-width: 560px) { .g4, .g3, .g2, .row { grid-template-columns: 1fr; } }

/* Overview (/global): scoped to .ov so other pages keep their look. White, rounded, one column. */
body:has(.ov) { background: var(--canvas); }
.main:has(> .ov) > .demo-banner { max-width: 860px; margin-inline: auto; border-radius: 12px; }
.ov { max-width: 860px; margin: 0 auto; }
.ov-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 8px 0 24px; }
.ov-head p { margin: 0; }
.ov-pill { border-radius: 99px; }
.ov-attn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 48px; }
.ov-attn-item { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border-radius: 12px; padding: 18px 22px; color: var(--ink); }
.ov-attn-item:hover { text-decoration: none; background: #ececf1; }
.ov-n { font-size: 40px; font-weight: 700; line-height: 1.1; }
.ov-attn-l { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink); }
.ov-sec { margin-bottom: 48px; scroll-margin-top: 16px; }
.ov-sec h2 { margin: 0 0 2px; }
.ov-sub { color: var(--muted); font-size: 14px; margin: 0 0 12px; }
.ov-list { list-style: none; margin: 0; padding: 0; }
.ov-row { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--hairline); }
.ov-body { flex: 1; min-width: 0; }
.ov-line { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; }
.ov-name { font-weight: 500; color: var(--ink); }
.ov-name:hover { color: var(--primary); }
.ov-region { color: var(--muted); font-size: 14px; margin-left: 6px; }
.ov-meta { color: var(--muted); font-size: 14px; white-space: nowrap; }
.ov-gaps { margin: 6px 0 0; font-size: 14px; color: var(--ink); }
.ov-gl { color: var(--muted); margin-right: 4px; }
.ov-flag { display: inline-block; margin-left: 6px; padding: 1px 10px; border-radius: 99px; background: var(--primary); color: #fff; font-size: 12px; font-weight: 500; vertical-align: 1px; }
.ov-log .ov-row { font-size: 14px; gap: 16px; }
.ov-when { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ov-empty { display: flex; align-items: baseline; gap: 10px; color: var(--muted); padding: 14px 0; margin: 0; border-top: 1px solid var(--hairline); }
.ov-mark { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 50%; position: relative; top: -1px; }
.ov-mark.missing { background: var(--missing); }
.ov-mark.stale { background: var(--yellow); }
.ov-mark.ok { background: var(--green); }
.ov-mark.ok::after { content: ""; position: absolute; left: 3.5px; top: 1.5px; width: 2px; height: 5px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.ov-key { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--muted); margin: -24px 0 0; }
.ov-key > span { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 560px) {
  .ov-attn { grid-template-columns: 1fr; margin-bottom: 36px; }
  .ov-n { font-size: 32px; }
  .ov-sec { margin-bottom: 36px; }
  .ov-log .ov-row { flex-direction: column; gap: 2px; }
}

/* Checklist (/chapter, /global/chapters/<slug>): reuses the Overview's .ov classes; .ck-* adds only what rows need. */
.ck-crumb { margin: 0 0 4px; font-size: 14px; }
.ck-info { margin: 4px 0 0; font-size: 14px; overflow-wrap: break-word; }
.ck-nw { white-space: nowrap; }
.ck-late { color: var(--stale); font-weight: 500; }
.ov-mark.none { background: none; box-shadow: inset 0 0 0 1.5px #b9bac8; }
.ck-up { margin-top: 10px; }
.ck-up > summary.btn { display: inline-flex; }
.ck .btn.ghost { border-color: var(--hairline); }
.ck .btn.ghost:hover { border-color: var(--ink); background: #fff; }
.ck-quiet { display: inline; font-size: 14px; color: var(--primary); font-weight: 500; }
.ck-quiet:hover { text-decoration: underline; }
details.ck-up[open] > summary { margin-bottom: 12px; }
.ck-form { max-width: 440px; background: var(--surface); border-radius: 12px; padding: 16px 18px 18px; }
.ck-form input[type=file] { width: 100%; font-size: 14px; }
.ck-form .error { margin-bottom: 12px; }
details.ck-inline { display: inline; margin: 0; white-space: nowrap; }
details.ck-inline::before { content: "·"; color: var(--muted); margin: 0 8px; }
details.ck-inline > .ck-form { white-space: normal; }
details.ck-inline > summary { display: inline; }
details.ck-inline[open] > .ck-form { margin-top: 10px; }
@media (max-width: 560px) {
  details.ck-inline { display: block; margin-top: 4px; }
  details.ck-inline::before { content: none; }
}

/* Overview round 2 (/global only): .og-* classes and the .soon mark; shared .ov-* rules above are unchanged. */
.og .ov-sec h3 { margin: 0; font-size: 15px; }
.ov-mark.soon { background: none; box-shadow: inset 0 0 0 2px var(--yellow); }
.og-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.og-tile { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border-radius: 12px; padding: 18px 22px; color: var(--ink); min-width: 0; }
a.og-tile:hover { text-decoration: none; background: #ececf1; }
.og-tile.on { box-shadow: inset 0 0 0 2px var(--primary); background: #fff; }
.og-tile.zero { color: var(--muted); }
.og-tile.zero .ov-attn-l { color: var(--muted); }
.og-ts { font-size: 14px; color: var(--muted); }
.og-open { margin-top: 20px; }
.og-open-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 8px; }
.og-open-head a { font-size: 14px; font-weight: 500; white-space: nowrap; }
.og-late, .og-due { color: var(--muted); white-space: nowrap; }
.og-late { color: var(--stale); }
.og-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.og-bar { display: block; padding: 8px 14px; margin: 0 -14px; border-radius: 12px; color: var(--ink); }
a.og-bar:hover { text-decoration: none; background: var(--surface); }
a.og-bar.on { background: var(--surface); box-shadow: inset 0 0 0 2px var(--primary); }
.og-bar-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.og-bar-name { font-weight: 500; min-width: 0; }
.og-track { display: flex; align-items: center; height: 16px; }
.og-fill { height: 10px; flex: none; }
.og-fill:first-child { border-radius: 99px 0 0 99px; }
.og-fill:nth-last-child(2) { border-radius: 0 99px 99px 0; }
.og-fill:first-child:nth-last-child(2) { border-radius: 99px; }
.og-fill.ok { background: var(--green); min-width: 4px; }
.og-fill.missing { background: var(--missing); }
.og-fill.stale { background: var(--yellow); }
.og-val { margin-left: 8px; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.og-more { margin: 12px 0 0; font-size: 14px; font-weight: 500; }
.og-log .ov-row { font-size: 14px; gap: 16px; }
.og-when { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; flex: none; width: 92px; }
.og-what { min-width: 0; }
.og-lib { display: flex; align-items: baseline; gap: 10px; font-size: 14px; color: var(--muted); margin: -16px 0 32px; }
@media (max-width: 560px) {
  .og-tiles { grid-template-columns: 1fr; }
  .og-tile { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 10px; padding: 14px 18px; }
  .og-tile .ov-n { font-size: 28px; }
  .og-bar { padding: 10px 12px; margin: 0 -12px; }
  .og-log .ov-row { flex-direction: column; gap: 2px; }
}

/* Chapter header (/chapter, /chapter/documents, Global's chapter view): compliance circle on the left,
   items needing action on the right. Required items only. Plain, no panel; only the arcs use the brighter
   accents (round 4); dots, legend and text keep the shared marks' colours. */
.ck-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: stretch; margin: 8px 0 48px; }
/* Round 5: one white rounded box per part, hairline border, equal heights on one top edge. */
.ck-circle, .ck-act { background: var(--canvas); border: 1px solid var(--hairline); border-radius: 16px; padding: 28px 32px; }
body:not(:has(.ov)) .ck-head { margin-bottom: 24px; }
.ck-circle { display: flex; flex-direction: column; gap: 18px; }
.ck-donut { display: block; width: 190px; height: 190px; }
.ck-track { fill: none; stroke: var(--hairline); stroke-width: 5; }
.ck-arc { fill: none; stroke-width: 5; }
.ck-arc.ok { stroke: #00c48c; } .ck-arc.stale { stroke: #ffbe0b; } .ck-arc.missing { stroke: var(--pink); }
.ck-donut text { text-anchor: middle; font-family: var(--font); }
.ck-donut-n { font-size: 10px; font-weight: 700; fill: var(--ink); }
.ck-donut-l { font-size: 2.7px; fill: var(--muted); }
.ck-counts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ck-count { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 15px; }
.ck-count:hover { text-decoration: none; }
.ck-count:hover span:last-child { text-decoration: underline; }
.ck-count b { min-width: 1.6em; font-size: 17px; font-variant-numeric: tabular-nums; }
.ck-count.zero, .ck-count.zero b { color: var(--muted); font-weight: 400; }
.ck-act { min-width: 0; scroll-margin-top: 16px; }
.ck-act h2 { margin: 0 0 2px; }
@media (max-width: 900px) {
  .ck-head { grid-template-columns: 1fr; gap: 12px; }
  .ck-circle { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 20px 28px; }
  .ck-donut { width: 170px; height: 170px; }
}
@media (max-width: 560px) {
  .ck-head { margin-bottom: 36px; }
  .ck-circle, .ck-act { padding: 20px 18px; }
  .ck-donut { width: 160px; height: 160px; }
}

/* Round 6: chapter pages only (/chapter, /chapter/documents, Global's chapter view; each has .ck-head).
   Soft EO-blue page tint, white panels with a soft shadow, a 4px EO Blue top band on the two header boxes,
   and a wide centred column so wide screens have no empty band on the right. */
body:has(.ck-head) { background: var(--surface); }
.main:has(.ck-head) > * { max-width: 1480px; margin-left: auto; margin-right: auto; }
.main:has(> .ov.ck) > .demo-banner, .main:has(.ck-head) > .demo-banner { max-width: 1480px; border-radius: 12px; }
.ck-circle, .ck-act, .ck .ov-sec, .main:has(.ck-head) .card {
  background: var(--canvas); border: 0; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(12, 12, 49, .05), 0 6px 20px rgba(12, 12, 49, .06); }
.ck-circle, .ck-act { background-image: linear-gradient(var(--primary), var(--primary)); background-size: 100% 4px; background-repeat: no-repeat; }
.ck .ov-sec { padding: 24px 28px 8px; margin-bottom: 16px; }
.ck .ov-sec .ov-list .ov-row:last-child { padding-bottom: 18px; }
.ck .ov-key { margin: 8px 0 0; padding: 0 4px; }
@media (min-width: 901px) {
  .main:has(.ck-head) { max-width: none; padding: 32px 48px 64px; }
}
@media (max-width: 560px) {
  .ck .ov-sec { padding: 18px 18px 4px; }
}

/* Round 7: balance the header. Boxes about 1:2; circle box centres its content (circle beside the counts when
   the box is wide enough); Needs action rows put the button on the right, centred, and the status beside the name. */
.ck-head { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.ck-circle { justify-content: center; container-type: inline-size; }
.ck-circle-in { display: flex; flex-direction: column; align-items: center; gap: 18px; }
@container (min-width: 400px) { .ck-circle-in { flex-direction: row; justify-content: center; gap: 36px; } }
.ck-act .ov-body { display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px; }
.ck-act .ck-text { flex: 1 1 260px; min-width: 0; }
.ck-act .ov-line { display: block; }
.ck-act .ov-meta { white-space: nowrap; }
.ck-act .ov-meta::before { content: "·"; margin: 0 8px; }
.ck-act:has(.ck-clear) { display: flex; flex-direction: column; justify-content: center; }
.ck-clear h2 { margin: 0 0 8px; }
.ck-clear-l { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 16px; color: var(--ink); }
.ck-act .ck-up { margin-top: 0; flex: none; }
.ck-act details.ck-up[open] { display: contents; }
.ck-act details.ck-up[open] > summary { margin-bottom: 0; }
.ck-act details.ck-up[open] > .ck-form { flex: 1 1 100%; margin-top: 14px; }
@media (max-width: 900px) {
  .ck-head { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ck-act .ov-meta { display: block; }
  .ck-act .ov-meta::before { content: none; }
}

/* Overview round 3 (/global only, scoped to .og): modern status palette for review, most-missed bars, By region heat map.
   Shared tokens stay as they are, so the checklist and other pages keep their look until Rustin approves rolling it out.
   Validated with the dataviz validator: rose, amber, teal pass CVD and normal-vision separation and 3:1 on white. */
.og {
  --ov-missing: #e11d48;      /* rose: missing, 4.70:1 on white */
  --ov-overdue: #d97706;      /* amber: overdue and due-soon ring, 3.19:1 */
  --ov-ok: #0d9488;           /* teal: in compliance, 3.74:1 */
  --ov-overdue-text: #b45309; /* amber text: days late, 5.02:1 */
  --ov-track: #e6e8ef;        /* held share and empty track (background, not a status mark) */
  --ov-h0: #f3f4f7; --ov-h1: #fb8a9c; --ov-h2: #f43f5e; --ov-h3: #be123c; --ov-h4: #881337; /* heat: one rose ramp */
}
.og .ov-mark.missing, .og .og-fill.missing { background: var(--ov-missing); }
.og .ov-mark.stale, .og .og-fill.stale { background: var(--ov-overdue); }
.og .ov-mark.ok, .og .og-fill.ok { background: var(--ov-ok); }
.og .ov-mark.soon { background: none; box-shadow: inset 0 0 0 2px var(--ov-overdue); }
.og .og-late { color: var(--ov-overdue-text); }
.og-switch { display: inline-flex; gap: 2px; padding: 3px; margin: 2px 0 16px; background: var(--surface); border-radius: 99px; }
.og-switch a { padding: 6px 16px; border-radius: 99px; font-size: 14px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.og-switch a:hover { color: var(--ink); text-decoration: none; }
.og-switch a.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(12, 12, 49, .12); }
.og-mm { list-style: none; margin: 0; padding: 0; }
.og-mm-row { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 8rem; align-items: center; gap: 16px; padding: 9px 0; }
.og-mm-name { font-weight: 500; min-width: 0; }
.og-mm-n { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.og-stack { display: flex; gap: 2px; height: 10px; border-radius: 99px; overflow: hidden; }
.og-stack > span { flex: 0 1 0; min-width: 3px; }
.og-stack .missing { background: var(--ov-missing); }
.og-stack .stale { background: var(--ov-overdue); }
.og-stack .held { background: var(--ov-track); }
.og-mm-foot { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 20px; margin: 12px 0 0; font-size: 14px; }
.og-mm-foot a { font-weight: 500; }
.og-mm-key, .og-scale-k { display: inline-flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); }
.og-mm-key > span, .og-scale-k > span { display: inline-flex; align-items: center; gap: 6px; }
.og-mm-key i, .og-scale-k i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; }
.og-mm-key i.missing { background: var(--ov-missing); }
.og-mm-key i.stale { background: var(--ov-overdue); }
.og-mm-key i.held { background: var(--ov-track); box-shadow: inset 0 0 0 1px #c9ccd8; }
.og-heat-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px 4px; }
.og-heat-wrap:focus-visible { outline: 2px solid var(--primary-soft); border-radius: 12px; }
.og-heat { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; min-width: 640px; }
.og-heat th, .og-heat td { border: 0; padding: 0; vertical-align: middle; text-transform: none; letter-spacing: 0; }
.og-heat thead th { font-size: 12px; font-weight: 500; color: var(--muted); text-transform: none; letter-spacing: 0; text-align: center; vertical-align: bottom; padding: 0 2px 6px; line-height: 1.25; }
.og-heat .og-heat-req { position: sticky; left: 0; z-index: 1; background: var(--canvas); box-shadow: -8px 0 0 var(--canvas); width: 13rem; text-align: left; font-size: 14px; font-weight: 500; color: var(--ink); padding: 0 10px 0 0; line-height: 1.3; }
.og-heat thead .og-heat-req { font-size: 12px; color: var(--muted); }
.og-heat td { height: 34px; border-radius: 6px; text-align: center; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.og-heat .h0, .og-scale-k .h0 { background: var(--ov-h0); }
.og-scale-k .h0 { box-shadow: inset 0 0 0 1px #c9ccd8; }
.og-heat .h1, .og-scale-k .h1 { background: var(--ov-h1); color: var(--ink); }
.og-heat .h2, .og-scale-k .h2 { background: var(--ov-h2); color: var(--ink); }
.og-heat .h3, .og-scale-k .h3 { background: var(--ov-h3); color: #fff; }
.og-heat .h4, .og-scale-k .h4 { background: var(--ov-h4); color: #fff; }
.og-scale { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.og-scale-l { color: var(--ink); }
@media (max-width: 560px) {
  .og-mm-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 10px 0; }
  .og-mm-row .og-stack { grid-column: 1 / -1; grid-row: 2; }
  .og-heat .og-heat-req { width: 9.5rem; font-size: 13px; }
}

/* ── Design A, round 11 (minimal): /chapter, /chapter/documents standing, /global/chapters/<slug> ──
   White page, one standing number (EO Blue) and one bar (round 4 colours), To do cards, two collapsed groups. */
body:has(.sb) { background: var(--canvas); }
.main:has(.sb) { max-width: none; padding: 32px 48px 64px; }
.main:has(.sb) > * { max-width: 960px; margin-left: auto; margin-right: auto; }
.main:has(.sb) > .demo-banner { border-radius: 12px; }

/* Round 16: a step lighter (mid-tone EO Blue instead of near-black navy), glow still on the left, frosted-glass finish:
   top sheen, a faint diagonal streak, 1px light inner border, top highlight line, soft depth. Chips are frosted white glass.
   Bar colours stay round 4. */
.sb-band { --b-ink: #fff; --b-muted: rgba(255, 255, 255, .88); --b-num: #fff; --b-num-sub: rgba(255, 255, 255, .7); --b-link: #e3e5ff;
  --b-chip: rgba(255, 255, 255, .86); --b-chip-ink: var(--ink); --b-chip-hover: rgba(255, 255, 255, .97);
  --b-zero: rgba(255, 255, 255, .12); --b-zero-ink: rgba(255, 255, 255, .92);
  color: var(--b-ink); border-radius: 24px; padding: 30px 36px 28px; margin: 0 0 32px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .03) 38%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .05) 44%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(75% 150% at 0% 25%, rgba(90, 99, 247, .32) 0%, rgba(90, 99, 247, .2) 22%, rgba(90, 99, 247, .08) 46%, rgba(90, 99, 247, .02) 62%, rgba(90, 99, 247, 0) 74%),
    linear-gradient(110deg, #2c32b4 0%, #262a9c 50%, #1e2082 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .34),
              0 2px 6px rgba(29, 0, 127, .12), 0 14px 34px rgba(29, 0, 127, .2); }
.sb-band-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; flex-wrap: wrap; }
.sb-band-text { flex: 1 1 380px; min-width: 0; }
.sb-crumb { margin: 0 0 6px; font-size: 14px; }
.sb-crumb a { color: var(--b-link); font-weight: 500; }
.sb-band .sb-h { font-size: 34px; line-height: 1.2; font-weight: 700; color: var(--b-ink); margin: 0 0 8px; overflow-wrap: break-word; }
.sb-lead { margin: 0; font-size: 17px; line-height: 1.5; color: var(--b-muted); max-width: 56ch; }
.sb-score { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.sb-score-n { font-size: 68px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--b-num); font-variant-numeric: tabular-nums; }
.sb-score-n span { font-size: 30px; font-weight: 500; color: var(--b-num-sub); letter-spacing: 0; }
.sb-score-l { font-size: 14px; color: var(--b-muted); margin-top: 4px; }
.sb-bar { list-style: none; display: flex; gap: 5px; margin: 26px 0 18px; padding: 0; }
.sb-bar li { flex: 1 1 0; height: 12px; border-radius: 99px; }
.sb-bar .missing { background: var(--pink); } .sb-bar .stale { background: #ffbe0b; } .sb-bar .ok { background: #00c48c; }
.sb-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.sb-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px 7px 12px; border-radius: 99px;
  background: var(--b-chip); color: var(--b-chip-ink); font-size: 14px; white-space: nowrap; }
.sb-chip:hover { text-decoration: none; background: var(--b-chip-hover); }
.sb-chip b { font-size: 15px; font-variant-numeric: tabular-nums; }
.sb-chip.zero { background: var(--b-zero); color: var(--b-zero-ink); }
.sb-chip { -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 1px 2px rgba(12, 12, 49, .12); }
.sb-chip.zero { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.sb-chip.zero b { font-weight: 500; }
.sb-chip.zero .ov-mark { opacity: .7; }

.sb-sec { margin: 0 0 12px; scroll-margin-top: 16px; }
.sb-h2 { font-size: 17px; margin: 0 0 12px; }
#to-do { margin-bottom: 36px; }
.sb-tasks, .sb-items { list-style: none; margin: 0; padding: 0; }
.sb-tasks { display: grid; gap: 10px; }
.sb-card { background: #fff; border-radius: 14px; scroll-margin-top: 16px;
  box-shadow: 0 0 0 1px rgba(12, 12, 49, .05), 0 2px 10px rgba(12, 12, 49, .05); }
.sb-task { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px 16px; padding: 16px 20px; }
.sb-task > .ov-mark { top: 0; }
.sb-title { font-size: 16px; line-height: 1.35; margin: 0; }
.sb-info { margin: 2px 0 0; font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap; column-gap: 14px; }
.sb-info > * { white-space: nowrap; }
.sb-late { color: var(--stale); font-weight: 500; }
.sb-clear { margin: 0; color: var(--muted); }

.sb-up > summary { list-style: none; cursor: pointer; }
.sb-up > summary::-webkit-details-marker { display: none; }
.sb-btn { border-radius: 99px; justify-content: center; padding: 9px 22px; font-size: 14px; white-space: nowrap; }
.sb-task > .sb-up > summary.sb-btn { display: inline-flex; }
.sb-task > .sb-up[open], .sb-item > .sb-up[open] { grid-column: 1 / -1; }
.sb-task > .sb-up[open] > summary, .sb-item > .sb-up[open] > summary { display: none; }
.sb-quiet { display: inline; font-size: 14px; font-weight: 500; color: var(--primary); white-space: nowrap; }
.sb-quiet:hover { text-decoration: underline; }
.sb-up > summary.btn.ghost { padding: 6px 14px; }
.sb-up > summary:focus-visible { outline: 2px solid var(--primary-soft); outline-offset: 2px; border-radius: 99px; }
.sb-form { background: var(--surface); border-radius: 12px; padding: 16px 16px 18px; margin-top: 4px; }
.sb-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sb-form input[type=file] { width: 100%; font-size: 14px; }
.sb-form .error { margin-bottom: 12px; }
.sb-form-act { display: flex; gap: 14px; align-items: center; }
.sb-cancel { font-size: 14px; color: var(--muted); cursor: pointer; background: none; border: 0; font-family: inherit; padding: 0; }

.sb-group > summary { display: flex; align-items: center; gap: 12px; padding: 16px 20px; list-style: none; cursor: pointer; border-radius: 14px; }
.sb-group > summary::-webkit-details-marker { display: none; }
.sb-group > summary:hover .sb-g-l { color: var(--primary); }
.sb-group > summary:focus-visible { outline: 2px solid var(--primary-soft); outline-offset: 2px; }
.sb-g-l { flex: 1; min-width: 0; font-weight: 500; }
.sb-chev { flex: none; width: 9px; height: 9px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: translateY(-3px) rotate(45deg); margin-right: 4px; transition: transform .15s; }
.sb-group[open] > summary .sb-chev { transform: translateY(2px) rotate(225deg); }
@media (prefers-reduced-motion: reduce) { .sb-chev { transition: none; } }
.sb-items { padding: 0 20px 6px; }
.sb-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 12px 0; border-top: 1px solid var(--hairline); }
.sb-item.sb-item-dot { grid-template-columns: auto minmax(0, 1fr) auto; }
.sb-item > .ov-mark { top: 0; }
.sb-item-name { margin: 0; }
.sb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.main:has(.sb-docs) .card { border-radius: 16px; }
/* Round 20: Our documents uses /chapter's band unchanged, so it keeps /chapter's 960px column too. */
/* Round 19: status with the title on Our documents (checklist dot colours and words). */
.od-tw { display: flex; align-items: baseline; gap: 8px; }
.od-tw > .ov-mark { top: 0; }
.od-tw > .ov-mark.extra { visibility: hidden; }          /* Extra: no dot, text stays aligned */
.od-t { min-width: 0; }
.od-t b { overflow-wrap: break-word; }
.od-ver { white-space: nowrap; }                       /* keep "(2026-06)" whole */
.od-st { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; }
.od-st.od-stale { color: var(--stale); }
.od-st.od-ok { color: var(--held); }
.od-st.od-optional, .od-st.od-extra { color: var(--muted); }
.od-due { font-weight: 400; }
.od-upd { white-space: nowrap; }
.od-word { white-space: nowrap; }
/* Round 24: View sits before Download in the last cell, styled as the Download link beside it. */
.od-acts { white-space: nowrap; text-align: right; }
/* View and Download as icons (eye and arrow from chapter_global.html), 32px targets; Download stays at the right edge. */
.od-acts { font-size: 0; }
.od-acts .od-ic { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -6px 0;
  padding: 0; border: 0; border-radius: 8px; background: none; color: var(--primary); vertical-align: middle; cursor: pointer; }
.od-acts .od-ic + .od-ic { margin-left: 4px; }
.od-acts .od-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.od-acts .od-ic:hover { background: var(--surface); color: var(--primary-dark); text-decoration: none; }
.od-acts .od-ic:focus-visible { outline: 2px solid var(--primary-soft); outline-offset: 0; }
@media (max-width: 640px) {
  .od-table .od-sat, .od-table .od-by { display: none; }
  .main:has(.sb-docs) .card:has(> .od-table) { padding: 8px 12px; }
  .od-table th, .od-table td { padding-left: 6px; padding-right: 6px; }
}

@media (max-width: 900px) {
  .main:has(.sb) { padding: 20px 16px 48px; }
}
@media (max-width: 560px) {
  .sb-band { border-radius: 20px; padding: 22px 20px 20px; }
  .sb-band .sb-h { font-size: 26px; }
  .sb-lead { font-size: 15px; }
  .sb-score { flex-direction: row; align-items: baseline; gap: 10px; }
  .sb-score-n { font-size: 46px; }
  .sb-score-n span { font-size: 22px; }
  .sb-bar { margin: 20px 0 14px; gap: 4px; }
  .sb-bar li { height: 10px; }
  .sb-chip { font-size: 13px; padding: 6px 14px 6px 10px; }
  .sb-task { grid-template-columns: auto minmax(0, 1fr); padding: 14px 16px; }
  .sb-task > .sb-up { grid-column: 1 / -1; }
  .sb-task > .sb-up > summary.sb-btn { display: flex; width: 100%; }
  .sb-task > .sb-up[open] > summary.sb-btn { display: none; }
  .sb-form-row { grid-template-columns: 1fr; gap: 0; }
  .sb-group > summary { padding: 14px 16px; }
  .sb-items { padding: 0 16px 4px; }
}

/* Round 15: chip lists (hover, focus, tap) and the jump highlight. */
.sb-chip-li { position: relative; }
.sb-chip.on { background: var(--b-chip-hover); }
.sb-pop { position: absolute; top: 100%; left: 0; z-index: 30; padding-top: 8px; }
.sb-pop-in { width: max-content; min-width: 260px; max-width: min(360px, calc(100vw - 24px)); background: #fff; color: var(--ink);
  border-radius: 14px; padding: 12px 8px 8px; box-shadow: 0 2px 6px rgba(12, 12, 49, .12), 0 16px 40px rgba(12, 12, 49, .18); }
.sb-pop-h { display: flex; align-items: center; gap: 8px; margin: 0 10px 6px; font-size: 13px; font-weight: 500; color: var(--muted); }
.sb-pop ul { list-style: none; margin: 0; padding: 0; max-height: min(60vh, 420px); overflow-y: auto; }
.sb-pop a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 8px 10px; border-radius: 9px;
  color: var(--ink); font-size: 14px; line-height: 1.35; }
.sb-pop a:hover, .sb-pop a:focus-visible { background: var(--surface); text-decoration: none; outline: none; }
.sb-pop a span { min-width: 0; overflow-wrap: break-word; }
.sb-pop a em { flex: none; font-style: normal; font-size: 13px; font-weight: 500; color: var(--primary); }
.sb-chip:focus-visible { outline: 2px solid #c9cbff; outline-offset: 2px; }
@keyframes sb-flash { 0%, 35% { box-shadow: 0 0 0 3px rgba(61, 70, 242, .6); } 100% { box-shadow: 0 0 0 3px rgba(61, 70, 242, 0); } }
@keyframes sb-flash-bg { 0%, 35% { background: #e8eaff; } 100% { background: transparent; } }
.sb-task.sb-flash { animation: sb-flash 1.8s ease-out; }
.sb-item.sb-flash { animation: sb-flash-bg 1.8s ease-out; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) {
  .sb-task.sb-flash { animation: none; box-shadow: 0 0 0 3px rgba(61, 70, 242, .6); }
  .sb-item.sb-flash { animation: none; background: #e8eaff; }
}
.sb-item.sb-flash { margin-inline: -10px; padding-inline: 10px; }

/* Round 17: file picker (chapter upload forms). Drop area over the real input, preview card, Save document. */
.fp { position: relative; }
.fp-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.fp-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; padding: 22px 16px 20px; text-align: center;
  background: #fff; border: 1.5px dashed #c6c8dc; border-radius: 14px; cursor: pointer; font-weight: 400; transition: border-color .15s, background .15s; }
.fp-drop:hover, .fp-drop.over { border-color: var(--primary); background: #f5f6ff; }
.fp-drop:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(61, 70, 242, .18); }
.fp-drop[hidden], .fp-file[hidden], .fp-err[hidden], .fp-pdf[hidden] { display: none; }
.fp-arrow { width: 34px; height: 34px; border-radius: 50%; background: #eef0ff; position: relative; margin-bottom: 4px; }
.fp-arrow::before { content: ""; position: absolute; left: 16px; top: 10px; width: 2px; height: 13px; background: var(--primary); border-radius: 2px; }
.fp-arrow::after { content: ""; position: absolute; left: 12px; top: 10px; width: 8px; height: 8px; border: solid var(--primary); border-width: 2px 0 0 2px; transform: rotate(45deg); }
.fp-l { font-size: 15px; color: var(--ink); }
.fp-browse { color: var(--primary); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.fp-s { font-size: 13px; color: var(--muted); }
.fp-file { background: #fff; border: 1px solid var(--hairline); border-radius: 14px; padding: 12px 14px; }
.fp-row { display: flex; align-items: center; gap: 12px; }
.fp-type { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; font-size: 11px; font-weight: 700;
  letter-spacing: .02em; background: #eef0ff; color: var(--primary); }
.fp-type[data-ext="pdf"] { background: #ffe6ed; color: #c4164a; }
.fp-type[data-ext="docx"] { background: #e6efff; color: #1f4fbf; }
.fp-type[data-ext="xlsx"] { background: #e3f5f2; color: #137a6a; }
.fp-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fp-name { font-weight: 500; overflow-wrap: anywhere; }
.fp-size { font-size: 13px; color: var(--muted); }
.fp-remove { flex: none; background: none; border: 0; padding: 4px 2px; font: 500 14px var(--font); color: var(--primary); cursor: pointer; }
.fp-remove:hover { text-decoration: underline; }
.fp-pdf { display: block; width: 100%; height: 260px; margin-top: 12px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--surface); }
.fp-err { margin: 10px 0 0; }
.sb-btn[disabled] { opacity: .45; cursor: not-allowed; }
.sb-btn[disabled]:hover { background: var(--primary); border-color: var(--primary); }
.sb-date input { max-width: 240px; }
.main:has(.sb-docs) details.drawer form .sb-form-act { margin-top: 4px; }

/* Round 18 band bar, round 21 body: the chapter's Global documents page (/chapter/global) as one family with /chapter.
   One white panel of compact rows; status chip and pill button aligned in fixed columns; small category label. */
.sb-gd .sb-bar .gd-current { background: #00c48c; }
.sb-gd .sb-bar .gd-out-of-date { background: #ffbe0b; }
.sb-gd .sb-bar .gd-summary-only { background: rgba(255, 255, 255, .55); }
.sb-gd .sb-bar .gd-missing { background: rgba(255, 255, 255, .16); }
.gd-list { list-style: none; margin: 0; padding: 2px 20px; }
.gd-row { display: grid; grid-template-columns: minmax(0, 1fr) 176px 176px; align-items: center; gap: 8px 16px; padding: 13px 0; }
.gd-row + .gd-row { border-top: 1px solid var(--hairline); }
.gd-text { min-width: 0; }
.gd-title { display: block; font-weight: 500; color: var(--ink); overflow-wrap: break-word; }
.gd-title:hover { color: var(--primary); text-decoration: none; }
.gd-info { margin: 2px 0 0; font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
.gd-info > span { white-space: nowrap; }
.gd-cat { font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #8a8ca3; }
.gd-chip { justify-self: start; display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 9px; border-radius: 99px;
  font-size: 13px; font-weight: 500; white-space: nowrap; flex: none; }
.gd-chip > .ov-mark { top: 0; }
.gd-chip.current { background: var(--held-bg); color: var(--held); }
.gd-chip.out-of-date { background: var(--stale-bg); color: var(--stale); }
.gd-chip.summary-only { background: var(--opt-bg); color: var(--muted); }
.gd-chip.prio { background: var(--missing-bg); color: var(--missing); padding: 3px 11px; font-size: 12px; }
.gd-chip { grid-column: 2; }
.gd-acts { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 18px; }
.gd-dl, .gd-view { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--primary); white-space: nowrap; }
.gd-view { background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }
.gd-dl svg, .gd-view svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gd-dl:hover, .gd-view:hover { text-decoration: underline; }
.gd-note { color: var(--primary); white-space: nowrap; }
.gd-note:hover { text-decoration: underline; }
.gd-view:focus-visible, .gd-dl:focus-visible, .gd-note:focus-visible, .gd-title:focus-visible { outline: 2px solid var(--primary-soft); outline-offset: 2px; border-radius: 4px; }
.gd-mrow .gd-info { margin-top: 1px; }
/* Round 23: viewable rows open the file in a modal; the row itself is the click target. */
.gd-viewable { cursor: pointer; }
.gd-viewable:hover .gd-title { color: var(--primary); }
.gd-modal { width: min(960px, calc(100vw - 48px)); height: min(88vh, 1100px); max-width: none; max-height: none; padding: 0; border: 0;
  border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 24px 60px rgba(12, 12, 49, .3); overflow: hidden; }
.gd-modal[open] { display: flex; flex-direction: column; }
.gd-modal::backdrop { background: rgba(12, 12, 49, .55); }
.gd-modal-head { display: flex; align-items: center; gap: 20px; padding: 14px 16px 14px 24px; border-bottom: 1px solid var(--hairline); flex: none; }
.gd-modal-t { flex: 1; min-width: 0; margin: 0; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd-close { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 99px; border: 0; background: var(--surface); color: var(--ink); cursor: pointer; }
.gd-close:hover { background: var(--hairline); }
.gd-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.gd-close:focus-visible { outline: 2px solid var(--primary-soft); outline-offset: 2px; }
.gd-modal-body { flex: 1; min-height: 0; display: flex; background: var(--surface); }
.gd-frame { flex: 1; width: 100%; border: 0; background: #fff; }
.gd-txt { flex: 1; margin: 0; padding: 24px 28px; overflow: auto; background: #fff; font: 400 14px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.gd-txt:focus-visible { outline: 2px solid var(--primary-soft); outline-offset: -2px; }
@media (max-width: 560px) {
  .gd-list { padding: 2px 16px; }
  .gd-row { grid-template-columns: minmax(0, 1fr) auto; padding: 14px 0; }
  .gd-text { grid-column: 1 / -1; }
  .gd-chip { grid-column: 1; }
  .gd-acts { grid-column: 2; }
  .gd-row:has(.gd-chip):not(:has(.gd-acts)) .gd-chip { grid-column: 1 / -1; }
  .gd-modal { width: 100vw; height: 100dvh; max-width: none; max-height: none; border-radius: 0; }
  .gd-modal-head { padding: 12px 12px 12px 16px; gap: 12px; }
}

/* ── App shell motion (global-redesign-sheet S3, S4) ──
   Page change: only the main area cross-fades (View Transitions, htmx transition:true); the sidebar has its own
   transition name with no animation, so it never flashes. Content rises without fading so the new page is never blank. Motion fills backwards only, so once it ends no element keeps a
   transform (fixed tooltips and chip lists keep their positions and stacking). In-page: cards and rows rise in, folded
   groups and forms open and close smoothly, chip lists fade, bars fill and dots pop in. Durations slowed by half on Rustin's ask (page 260ms, rows 330ms, bars 360ms), and
   prefers-reduced-motion turns all of it off. */
.side { view-transition-name: eog-side; }
.main { view-transition-name: eog-main; }
::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root),
::view-transition-group(eog-side), ::view-transition-old(eog-side), ::view-transition-new(eog-side) { animation: none; }
::view-transition-group(eog-main), ::view-transition-old(eog-main), ::view-transition-new(eog-main) { animation-duration: 260ms; animation-timing-function: ease; }
@keyframes eog-fade-out { to { opacity: 0; } }
@keyframes eog-fade-in { from { opacity: 0; } }
@keyframes eog-rise { from { transform: translateY(8px); } }
@keyframes eog-fill { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes eog-pop { from { opacity: 0; transform: scale(.6); } }

.main > *, .sb-card, .sb-item, .gd-row, .gc-row, .g-rq-row, .card { animation: eog-rise 330ms ease-out backwards; }
.sb-bar { animation: eog-fill 360ms ease-out backwards; }
.gg-c .ov-mark, .tr-step { animation: eog-pop 300ms ease-out backwards; }

:root { interpolate-size: allow-keywords; }
@supports selector(::details-content) {
  details::details-content { height: 0; overflow: clip; overflow-clip-margin: 12px;
    transition: height 300ms ease, content-visibility 300ms allow-discrete; }
  details[open]::details-content { height: auto; }
}

.sb-pop { transition: opacity 220ms ease, translate 220ms ease, display 220ms allow-discrete; }
.sb-pop[hidden] { opacity: 0; translate: 0 -4px; }
@starting-style { .sb-pop:not([hidden]) { opacity: 0; translate: 0 -4px; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .main > *, .sb-card, .sb-item, .gd-row, .gc-row, .g-rq-row, .card, .sb-bar, .gg-c .ov-mark, .tr-step { animation: none; }
  details::details-content, .sb-pop { transition: none; }
}