/* GRI Reporting Cycles wireframes. Shared stylesheet. Static, self-contained. */
* { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; }
body { font-family:"Roboto","Inter",-apple-system,"Segoe UI",sans-serif; background:#F7F7F7; color:#2E2E38; font-size:14px; line-height:1.5; min-width:1180px; height:100vh; display:flex; flex-direction:column; overflow:hidden; }
a { color:#323C8F; }
code, .code { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; }
h1,h2,h3,h4 { line-height:1.25; }

/* ------- wireframe chrome bar (demo helper, sits above the imitated navbar) */
.chrome { background:#0F172A; color:#CBD5E1; font-size:13px; display:flex; align-items:center; gap:14px; padding:9px 16px; flex-wrap:wrap; flex:none; }
.chrome .tag { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#FCD34D; border:1px dashed #B45309; border-radius:4px; padding:2px 6px; white-space:nowrap; }
.chrome .title { font-weight:600; color:#E2E8F0; }
.chrome .pgno { color:#94A3B8; white-space:nowrap; }
.chrome .invented { color:#94A3B8; font-size:12px; }
.chrome nav { margin-left:auto; display:flex; gap:14px; align-items:center; }
.chrome a { color:#7DD3FC; text-decoration:none; white-space:nowrap; }
.chrome a:hover { text-decoration:underline; }
.chrome .dis { color:#475569; }

/* -------------------------------------------------------------- app shell */
/* Viewport-contained root: the product shell (AppLayout) is h-screen overflow-hidden at
   desktop widths, the navbar is sticky and always visible, and the main content area is
   the single vertical scroll context. The wireframe chrome bar stays visible above it. */
.shell { display:flex; align-items:stretch; flex:1; min-height:0; }
.sidebar { width:280px; min-width:280px; background:#FFF; border-right:1px solid #E4E4E7; font-size:14px; display:flex; flex-direction:column; }
.sb-brand { height:56px; border-bottom:1px solid #E4E4E7; display:flex; align-items:center; padding:8px 16px; flex:none; }
.sb-logo { font-size:22px; font-weight:700; color:#323C8F; letter-spacing:.02em; }
.sb-logo .x { color:#0DB17D; }
.sb-nav { padding:20px 16px; display:flex; flex-direction:column; gap:24px; flex:1; min-height:0; overflow-y:auto; }
.sb-label { font-size:11px; font-weight:600; text-transform:uppercase; color:#71717A; margin-bottom:6px; padding:0 12px; }
.sb-item { display:flex; align-items:center; gap:12px; border-radius:8px; padding:8px 12px; color:#2E2E38; text-decoration:none; line-height:1.4; }
.sb-item svg { flex:none; }
.sb-item .chev { margin-left:auto; color:#71717A; display:flex; }
.sb-item:hover { background:#F4F4F5; }
.sb-item.parent-active { font-weight:600; color:#323C8F; }
.sb-item.active { border-left:4px solid #323C8F; background:rgba(50,60,143,.10); color:#323C8F; box-shadow:0 0 0 1px rgba(50,60,143,.20); }
.sb-sub { margin-left:16px; display:flex; flex-direction:column; gap:2px; margin-top:2px; }
.workarea { flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; }
.navbar { height:56px; background:#FFF; border-bottom:1px solid #E4E4E7; display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:0 24px; flex:none; position:sticky; top:0; z-index:40; }
.nv-lang { display:flex; align-items:center; gap:6px; height:32px; padding:0 8px; border-radius:8px; font-size:14px; }
.nv-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; }
.nv-lang:hover, .nv-icon:hover { background:#F4F4F5; }
.nv-user { display:flex; align-items:center; gap:8px; margin-left:4px; }
.nv-avatar { width:32px; height:32px; border-radius:9999px; background:rgba(50,60,143,.1); color:#323C8F; display:flex; align-items:center; justify-content:center; }
.nv-name { font-size:14px; font-weight:500; line-height:1.2; }
.nv-role { font-size:12px; color:#71717A; line-height:1.2; }
main.page { flex:1; background:#F7F7F7; padding:16px; min-width:0; min-height:0; overflow-y:auto; }
.panel { background:rgba(255,255,255,.7); border-radius:8px; padding:16px; }

/* ------------------------------------------------------------ page header */
.ph { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
.ph-left { display:flex; gap:12px; align-items:flex-start; min-width:0; }
.ph-left > svg { color:#323C8F; flex:none; margin-top:2px; }
.ph h2 { font-size:20px; font-weight:500; color:#323C8F; }
.ph .desc { font-size:14px; color:#71717A; margin-top:2px; }
.ph-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; align-items:center; }

/* -------------------------------------------------------------- pill tabs */
.pilltabs { display:inline-flex; align-items:center; background:#F4F4F5; border-radius:9999px; padding:4px; }
.pill { border-radius:9999px; padding:6px 12px; font-size:14px; font-weight:500; color:#71717A; text-decoration:none; display:inline-flex; gap:6px; align-items:center; }
.pill.active { background:#FFF; color:#323C8F; box-shadow:0 1px 2px rgba(0,0,0,.05); }
.pill.dis { color:#A1A1AA; cursor:not-allowed; }
.pill.dis:hover { background:transparent; color:#A1A1AA; }
.pill .cnt { font-size:12px; opacity:.6; font-variant-numeric:tabular-nums; }

/* ---------------------------------------------------------------- buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:36px; padding:0 16px; border-radius:6px; font-size:14px; text-decoration:none; border:1px solid transparent; white-space:nowrap; color:#2E2E38; background:transparent; }
.btn svg { flex:none; }
.btn-green { background:#0DAF7C; color:#FFF; }
.btn-navy { background:#323C8F; color:#FFF; }
.btn-destructive { background:#DC2828; color:#FFF; }
.btn-amber { background:#F59E0B; color:#FFF; }
.btn-outline { border-color:#E4E4E7; background:rgba(247,247,247,.3); }
.btn-ghost { color:#71717A; }
.btn-link { color:#323C8F; text-decoration:underline; text-underline-offset:4px; padding:0 4px; }
.btn.dis { opacity:.5; }
.btn-sm { height:32px; padding:0 12px; }
.btn-icon { width:32px; height:32px; padding:0; border-radius:6px; color:#71717A; }

/* ------------------------------------------------------- chips and badges */
.chip { display:inline-flex; align-items:center; gap:4px; border:1px solid transparent; border-radius:16px; padding:2px 8px; font-size:12px; font-weight:500; white-space:nowrap; }
.st-active { border-color:#22C55E; background:#F0FDF4; color:#15803D; }
.st-draft { border-color:#CBD5E1; background:#F8FAFC; color:#334155; }
.st-superseded { border-color:#F59E0B; background:#FFFBEB; color:#B45309; }
.st-archived { border-color:#94A3B8; background:#F1F5F9; color:#334155; }
.lk-none { border-color:#E4E4E7; background:transparent; color:#71717A; }
.lk-provisional { border-color:#F59E0B; background:#FFFBEB; color:#B45309; }
.lk-complete { border-color:#22C55E; background:#F0FDF4; color:#15803D; }
.stale { border-color:#F59E0B; background:#FFFBEB; color:#B45309; }
.qcode { border-color:#94A3B8; background:#FFF; color:#334155; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11px; font-weight:600; letter-spacing:.02em; }
.tag-sq { display:inline-flex; align-items:center; height:17px; border:1px solid #F59E0B; border-radius:6px; padding:0 5px; font-size:11px; font-weight:500; color:#B45309; white-space:nowrap; background:#FFF; }

/* --------------------------------------------------------------- tables */
.dt { border:1px solid #E4E4E7; border-radius:8px; background:rgba(255,255,255,.4); overflow:hidden; }
.dt table { width:100%; border-collapse:collapse; font-size:14px; }
.dt th { height:40px; padding:4px 8px; text-align:left; font-weight:500; color:#323C8F; border-bottom:1px solid #E4E4E7; white-space:nowrap; vertical-align:middle; }
.dt td { padding:8px; border-bottom:1px solid #E4E4E7; vertical-align:middle; }
.dt tbody tr:last-child td { border-bottom:0; }
.dt tbody tr:hover { background:rgba(244,244,245,.5); }
.dt tr.exp td { background:rgba(244,244,245,.35); }
.dt tr.exp:hover td { background:rgba(244,244,245,.35); }
.dt .sub { font-size:12px; color:#71717A; }
.cell-label { font-weight:500; }
.markers { display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; align-items:center; }
.usage2 { font-size:13px; line-height:1.45; white-space:nowrap; }
.pagctl { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:14px; color:#71717A; margin-top:12px; flex-wrap:wrap; }
.pagctl .right { display:flex; align-items:center; gap:12px; }

/* --------------------------------------------------------------- toolbar */
.toolbar { display:flex; justify-content:space-between; gap:12px; margin:12px 0; flex-wrap:wrap; }
.toolbar .left, .toolbar .right { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.searchbox { position:relative; width:260px; }
.searchbox svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#71717A; }
.searchbox .input { padding-left:36px; width:100%; }

/* ----------------------------------------------------------------- forms */
.field { display:flex; flex-direction:column; gap:8px; min-width:0; }
.field > label { font-size:14px; font-weight:500; display:flex; gap:4px; align-items:center; }
.req { color:#DC2828; }
.input, .select { height:36px; border:1px solid #E4E4E7; border-radius:6px; background:transparent; padding:0 12px; font-size:14px; display:flex; align-items:center; color:#2E2E38; }
.datefield { height:36px; border:1px solid #E4E4E7; border-radius:6px; background:rgba(247,247,247,.3); padding:0 12px; font-size:14px; display:flex; align-items:center; justify-content:flex-start; gap:8px; color:#2E2E38; }
.datefield svg { color:#71717A; flex:none; }
.datefield .ph-txt { color:#71717A; }
.select { justify-content:space-between; gap:8px; }
.select svg { color:#71717A; opacity:.6; flex:none; }
.select .ph-txt, .input .ph-txt { color:#71717A; }
.err > .input, .err > .select, .input.err, .select.err { border-color:#DC2828; }
.msg-err { font-size:12px; color:#DC2828; }
.msg-help { font-size:12px; color:#71717A; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.radio { width:16px; height:16px; border-radius:9999px; border:1px solid #9CA3AF; display:inline-block; position:relative; flex:none; margin-top:2px; }
.radio.on { border-color:#323C8F; }
.radio.on::after { content:""; position:absolute; inset:3px; border-radius:9999px; background:#323C8F; }
.cbx { width:16px; height:16px; border-radius:4px; border:1px solid #9CA3AF; display:inline-flex; align-items:center; justify-content:center; flex:none; color:#FFF; margin-top:2px; }
.cbx.on { background:#0DAF7C; border-color:#0DAF7C; }
.cbx svg { width:12px; height:12px; stroke-width:3; }
.opt { display:flex; align-items:flex-start; gap:8px; font-size:14px; }
.opt .optd { font-size:12px; color:#71717A; }
.opt.dis { opacity:.55; }
.switch { width:32px; height:18px; border-radius:9999px; background:#E4E4E7; position:relative; flex:none; display:inline-block; }
.switch::after { content:""; position:absolute; top:1px; left:1px; width:16px; height:16px; border-radius:9999px; background:#F7F7F7; box-shadow:0 1px 2px rgba(0,0,0,.15); }
.switch.on { background:#323C8F; }
.switch.on::after { left:15px; background:#FFF; }
.dropdown-open { position:relative; }
.dd-panel { border:1px solid #E4E4E7; border-radius:6px; background:#FFF; box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1); padding:4px; margin-top:4px; font-size:14px; max-width:280px; }
.dd-panel .di { display:flex; align-items:center; justify-content:space-between; border-radius:6px; padding:6px 8px; }
.dd-panel .di.sel { background:#F4F4F5; }
.dd-panel .di .chk { color:#323C8F; }
.dd-panel .ell { color:#71717A; text-align:center; padding:2px 8px; }

/* ------------------------------------------------- cards, kv blocks, misc */
.sc { border:1px solid #E4E4E7; border-radius:8px; background:#FFF; }
.sc-head { display:flex; align-items:center; gap:12px; padding:10px 16px; }
.sc-ic { width:32px; height:32px; border-radius:6px; background:rgba(50,60,143,.1); color:#323C8F; display:flex; align-items:center; justify-content:center; flex:none; }
.sc-title { font-weight:500; line-height:1.3; }
.sc-desc { font-size:13px; color:#71717A; }
.sc-body { border-top:1px solid #E4E4E7; padding:10px 16px; }
.sc-head .sc-right { margin-left:auto; display:flex; gap:8px; align-items:center; }
/* PM ruling 2026-08-23 (density): definition rows are left-clustered. The value sits
   immediately after a fixed-width label column; hint text runs below the value in muted
   small type. Values are never flushed to the far edge of a wide container. */
.kv { border:1px solid #E4E4E7; border-radius:8px; background:rgba(244,244,245,.2); padding:2px 12px; }
.kv .row { display:flex; gap:16px; padding:5px 0; font-size:14px; align-items:baseline; }
.kv .row + .row { border-top:1px solid #E4E4E7; }
.kv .k { color:#71717A; flex:0 0 200px; max-width:45%; }
.kv .v { text-align:left; font-weight:500; min-width:0; }
.kv .v .sub { display:block; font-weight:400; font-size:12px; color:#71717A; }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.stat { display:flex; align-items:center; gap:12px; border:1px solid #E4E4E7; border-radius:8px; background:#FFF; padding:16px; }
.stat .ic { width:40px; height:40px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex:none; }
.ic-blue { background:#DBEAFE; color:#2563EB; }
.ic-green { background:#DCFCE7; color:#16A34A; }
.stat .cap { font-size:12px; color:#71717A; }
.stat .num { font-size:20px; font-weight:700; color:#2E2E38; }
.alert { border:1px solid #E4E4E7; border-radius:8px; background:#FFF; padding:12px 16px; font-size:14px; display:flex; gap:10px; align-items:flex-start; }
.alert svg { flex:none; margin-top:2px; }
.alert.destructive { color:#DC2828; }
.alert .body { min-width:0; }
.alert ul { margin:6px 0 0 18px; }
.warnstrip { border:1px solid #E4E4E7; background:#FFF; border-radius:8px; padding:10px 16px; font-size:13px; line-height:1.6; display:flex; gap:8px; align-items:flex-start; color:#2E2E38; box-shadow:0 1px 2px rgba(0,0,0,.05); }
.warnstrip svg { color:#D97706; flex:none; margin-top:2px; }
.infoline { display:flex; gap:8px; align-items:flex-start; font-size:13px; color:#71717A; }
.infoline svg { flex:none; margin-top:2px; }
.empty { border:1px dashed #E4E4E7; background:rgba(244,244,245,.2); border-radius:8px; padding:40px 24px; text-align:center; }
.empty .eic { color:#71717A; margin-bottom:12px; display:flex; justify-content:center; }
.empty h3 { font-size:16px; font-weight:600; color:#2E2E38; }
.empty p { font-size:14px; color:#71717A; margin:4px auto 0; max-width:460px; }
.empty .btn { margin-top:16px; }
.menu { background:#FFF; border:1px solid #E4E4E7; border-radius:6px; box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1); padding:4px; width:240px; font-size:14px; }
.menu .mtitle { font-size:11px; color:#71717A; padding:6px 8px 2px; }
.menu .mi { display:flex; align-items:center; gap:8px; border-radius:6px; padding:6px 8px; }
.menu .mi:hover { background:#F4F4F5; }
.mi.view svg { color:#059669; }
.mi.edit svg { color:#2563EB; }
.mi.act svg { color:#0DAF7C; }
.mi.lockic svg { color:#323C8F; }
.mi.arch svg { color:#D97706; }
.mi.del { color:#DC2828; }
.mi.del svg { color:#DC2626; }
.mi.dis { opacity:.5; }
.tooltip { background:#FFF; color:#334155; border:1px solid #E2E8F0; border-radius:8px; box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1); padding:8px 14px; font-size:12px; font-weight:500; letter-spacing:.02em; line-height:1.6; max-width:280px; display:inline-block; }

/* --------------------------------------------------------------- wizard */
.wiz { display:flex; gap:16px; align-items:flex-start; }
.wiz-rail { width:250px; min-width:230px; display:flex; flex-direction:column; gap:8px; }
.wstep { display:flex; align-items:center; gap:10px; border:1px solid #E4E4E7; border-radius:8px; padding:8px 12px; color:#71717A; background:#FFF; }
.wstep .wnum { width:32px; height:32px; border-radius:9999px; background:#F4F4F5; color:#71717A; border:1px solid #E4E4E7; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; flex:none; }
.wstep.active { border-color:#323C8F; background:rgba(50,60,143,.1); color:#323C8F; }
.wstep.active .wnum { background:#323C8F; color:#FFF; border-color:#323C8F; box-shadow:0 0 0 3px rgba(50,60,143,.2); }
.wstep.done { background:rgba(244,244,245,.6); color:#16A34A; }
.wstep.done .wnum { background:#22C55E; border-color:#22C55E; color:#FFF; }
.wstep .wlab { font-size:14px; font-weight:500; }
.wstep .wdesc { font-size:11px; color:#71717A; margin-top:1px; }
.wiz-main { flex:1; min-width:0; }
.wiz-card { border:1px solid #E4E4E7; border-radius:8px; background:#FFF; }
.wiz-body { padding:16px 20px; display:flex; flex-direction:column; gap:14px; }
.wiz-foot { border-top:1px solid #E4E4E7; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.wiz-foot .right { display:flex; gap:8px; margin-left:auto; flex-wrap:wrap; }
.preview { border:1px solid #E4E4E7; border-radius:8px; background:rgba(244,244,245,.2); padding:12px; }
.preview .plabel { font-size:12px; color:#71717A; margin-bottom:4px; }
.preview .pval { font-size:15px; font-weight:500; color:#323C8F; }

/* ---------------------------------------------------- quarantine surface */
.qgrid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.qcell { border:1px solid #E4E4E7; border-radius:8px; background:#FFF; padding:8px 10px; }
.qcell .qc { font-weight:600; color:#323C8F; font-size:13px; }
.qcell .qn { font-size:18px; font-weight:700; }
.qcell .qm { font-size:11px; color:#71717A; line-height:1.4; }
.qcell.zero { opacity:.55; }
.xline { display:flex; gap:16px; flex-wrap:wrap; font-size:13px; color:#71717A; }
.xline b { color:#2E2E38; }

/* --------------------------------------------------------------- dialogs */
.backdrop { background:rgba(12,10,9,.8); border-radius:8px; padding:32px 16px; display:flex; justify-content:center; position:relative; overflow:hidden; }
.backdrop .ghost { position:absolute; inset:0; padding:16px; z-index:0; opacity:.5; pointer-events:none; }
.backdrop .ghost-in { background:rgba(255,255,255,.9); border-radius:8px; padding:16px; height:100%; }
.dialog { position:relative; z-index:1; background:#FFF; border:1px solid #E4E4E7; border-radius:8px; padding:20px; width:100%; max-width:672px; box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1); }
.dialog.wide { max-width:820px; }
.dlg-head { display:flex; align-items:flex-start; gap:12px; border-bottom:1px solid #E4E4E7; padding-bottom:12px; }
.dlg-icon { width:36px; height:36px; border-radius:9999px; background:rgba(50,60,143,.1); color:#323C8F; display:flex; align-items:center; justify-content:center; flex:none; }
.dlg-icon.warn { background:#FFFBEB; color:#D97706; }
.dlg-icon.danger { background:#FEF2F2; color:#DC2828; }
.dlg-title { font-size:20px; font-weight:600; color:#323C8F; line-height:1.2; }
.dlg-title.warn { color:#D97706; }
.dlg-title.danger { color:#DC2828; }
.dlg-desc { font-size:14px; color:#71717A; margin-top:2px; }
.dlg-close { margin-left:auto; width:36px; height:36px; border-radius:9999px; display:flex; align-items:center; justify-content:center; color:#71717A; flex:none; }
.dlg-body { padding:14px 0; font-size:14px; display:flex; flex-direction:column; gap:12px; }
.colcap { font-size:12px; font-weight:600; color:#71717A; margin-bottom:8px; }
.colcap.proposed { color:#323C8F; }
.dlg-foot { border-top:1px solid #E4E4E7; padding-top:14px; display:flex; justify-content:flex-end; gap:8px; }

/* --------------------------------------- annotations and demo helpers ---- */
.ann { background:#FFFBEB; border:1px dashed #F59E0B; border-radius:8px; padding:10px 12px; font-size:13px; color:#78350F; line-height:1.55; }
.ann .atag, .tile-tag, .gallery-head .atag { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#92400E; }
.ann .atag { margin-right:8px; }
.ann code { color:#78350F; }
.ann a { color:#92400E; }
.ann-chip { display:inline-flex; align-items:baseline; gap:5px; background:#FFFBEB; border:1px dashed #F59E0B; border-radius:6px; padding:1px 6px; font-size:11px; color:#78350F; white-space:normal; line-height:1.5; }
.ann-chip b { font-size:9px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#92400E; }
.gallery { margin-top:20px; display:flex; flex-direction:column; gap:12px; }
.gallery-head { background:#FFFBEB; border:1px dashed #F59E0B; border-radius:8px; padding:10px 14px; font-size:12px; color:#78350F; }
.gallery-head .gtitle { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#92400E; }
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(380px,1fr)); gap:14px; align-items:start; }
.gallery-grid.one { grid-template-columns:1fr; }
.tile { border:1px dashed #F59E0B; background:#FFFBEB; border-radius:8px; padding:10px 12px 12px; }
.tile-tag { display:block; margin-bottom:8px; }
.tile-note { font-size:12px; color:#78350F; margin-top:8px; line-height:1.55; }
.tile-body { background:#FFF; border:1px solid #E4E4E7; border-radius:8px; padding:16px; display:flex; flex-direction:column; gap:12px; }
.tile-body.bare { padding:0; background:transparent; border:0; }

/* ----------------------------------------------------- index (plain doc) */
.doc { max-width:960px; margin:0 auto; padding:32px 24px 64px; }
.doc header.dhead { margin-bottom:20px; }
.doc h1 { font-size:24px; font-weight:600; color:#323C8F; }
.doc .dsub { color:#71717A; margin-top:6px; font-size:15px; max-width:70ch; }
.doc section { background:#FFF; border:1px solid #E4E4E7; border-radius:8px; padding:20px 24px; margin-top:16px; }
.doc section h2 { font-size:16px; font-weight:600; color:#323C8F; margin-bottom:10px; }
.doc ol.pages { list-style:none; }
.doc ol.pages li { padding:10px 0; border-top:1px solid #EEF0F4; display:flex; gap:14px; align-items:baseline; }
.doc ol.pages li:first-child { border-top:0; }
.doc ol.pages .no { font-size:12px; color:#71717A; font-variant-numeric:tabular-nums; flex:none; width:22px; }
.doc ol.pages a { font-weight:500; }
.doc ol.pages .pd { color:#71717A; font-size:13px; }
.doc ul.items { margin-left:18px; }
.doc ul.items li { margin:7px 0; }
.legend-row { display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; margin-top:8px; }
.legend-row .ann { flex:1; min-width:280px; }

/* consolidated site: cycle submenu context line and sidebar note (from gri-engine) */
.sb-cycle { font-size:11px; color:#71717A; padding:2px 12px 4px; }
.sb-cycle a { color:#71717A; text-decoration:underline; margin-left:4px; }
.sb-note { font-size:11px; color:#A1A1AA; padding:10px 12px 4px; line-height:1.5; }