/* App chrome and shared primitives. The top bar; buttons, pills and links; the menu and the filter
   drawers; disclosures and popovers; views and toolbars; cards; filters and the segmented controls;
   the one field style; scroll boxes; hover and selected rows; short link lists; tooltip; utilities.
   Component stylesheets load after this one and build on these rules. */

/* Top bar: one slim row: menu, mark, breadcrumb, ⓘ, version */
:root{--bar-h:3rem;--pad:1rem}
.bar{height:var(--bar-h);background:var(--surface);border-bottom:var(--bar-border);box-shadow:var(--bar-shadow);position:sticky;top:0;z-index:calc(var(--z-bar) + 1);display:flex;align-items:center;gap:var(--space-3);padding:0 var(--pad)}
.mark{text-decoration:none;font-size:var(--fs-xs);font-weight:var(--fw-heavy);letter-spacing:.08em;color:var(--on-accent);background:var(--accent);border-radius:var(--radius-5);padding:var(--space-1) calc(0.375rem * var(--dz));flex:none}
h1{margin:0;font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
/* Breadcrumb: Operating model › view › sub-level */
.bar-crumbs{display:flex;align-items:center;gap:calc(0.375rem * var(--dz));min-width:0;flex:0 1 auto}
.bar-crumbs a,.bar-crumbs button{font:inherit;color:var(--muted);background:none;border:0;padding:calc(0.125rem * var(--dz)) var(--space-1);border-radius:var(--radius-xs);cursor:pointer;text-decoration:none;white-space:nowrap}
.bar-crumbs a:hover,.bar-crumbs button:hover{color:var(--ink)}
.bar-crumbs .bc-cur{color:var(--ink);font-weight:var(--fw-bold);overflow:hidden;text-overflow:ellipsis;padding:calc(0.125rem * var(--dz)) var(--space-1)}
.bar-crumbs .bc-mid{color:var(--muted);padding:calc(0.125rem * var(--dz)) var(--space-1);white-space:nowrap}
.bar-crumbs .sep{color:var(--muted);font-weight:var(--fw-regular)}
.bar-crumbs .bc-group{color:var(--muted)}
/* The current view's ⓘ, right after the breadcrumb */
.bar-info{display:flex;align-items:center;margin:0 auto 0 calc(-0.375rem * var(--dz))}
.bar-actions{display:flex;gap:var(--space-2);align-items:center;flex:none}

/* Line icons (icons.svg) */
.drawer svg,.icon-btn svg,.switch svg,.set-row svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.drawer svg,.icon-btn svg{width:var(--icon-md);height:var(--icon-md)}
.switch svg,.set-row svg,.ap-head svg{width:var(--icon);height:var(--icon);flex:none}

/* Buttons */
.icon-btn{display:inline-grid;place-items:center;font:inherit;width:2rem;height:var(--ctl-h);color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--control-radius);cursor:pointer;padding:0;flex:none}
.icon-btn.sm{width:1.625rem;height:1.625rem;font-size:var(--fs-lg);line-height:1}
.icon-btn:disabled{opacity:.4;cursor:default}
.icon-btn.has-badge{position:relative}
.icon-btn.has-badge .badge{position:absolute;top:-0.4375rem;right:-0.4375rem}
.link-btn{font:inherit;font-size:var(--fs-md);color:var(--accent-ink);background:none;border:0;cursor:pointer;padding:var(--space-1) calc(0.375rem * var(--dz));text-decoration:underline;text-underline-offset:3px}
.primary-btn{font:inherit;font-size:var(--fs-md);font-weight:var(--fw-strong);color:var(--on-accent);background:var(--accent);border:1px solid var(--accent);border-radius:var(--pill-radius);padding:var(--space-1) calc(0.875rem * var(--dz));cursor:pointer;white-space:nowrap}
.primary-btn:hover{filter:brightness(.95)}
/* Secondary pill button (Close, Edit, Delete) */
.close{font:inherit;font-size:var(--fs-md);color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--pill-radius);padding:var(--space-1) var(--space-3);cursor:pointer}
.close.sm{font-size:var(--fs-sm);padding:calc(0.0625rem * var(--dz)) calc(0.625rem * var(--dz));margin-left:auto;text-transform:none;letter-spacing:0}
.close.danger{color:var(--neg);border-color:var(--neg)}
.close[aria-disabled="true"]{color:var(--muted);border-color:var(--line);cursor:help}
/* Count badge (filter buttons) */
.badge{display:inline-grid;place-items:center;min-width:1.125rem;height:1.125rem;padding:0 calc(0.3125rem * var(--dz));border-radius:var(--pill-radius);background:var(--accent);color:var(--on-accent);font-size:var(--fs-xs)}
/* Pills, and a button that reads as a link. A pill that is also a link keeps the link's look. */
.pill{display:inline-block;font-size:var(--fs-sm);font-weight:var(--fw-strong);padding:calc(0.125rem * var(--dz)) calc(0.5625rem * var(--dz));border-radius:var(--pill-radius);background:var(--grid);color:var(--ink-2)}
.pill.notes{background:var(--accent-wash);color:var(--accent-ink)}
.linkish{all:unset;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.linkish:focus-visible{outline:2px solid var(--focus)}
.pill.linkish{text-decoration:none;cursor:pointer}
a.pill{text-decoration:none}

/* Drawers: the menu on the left; filters and the version drawer on the right */
.scrim{position:fixed;inset:0;z-index:var(--z-scrim);background:var(--scrim)}
.drawer{position:fixed;top:0;left:0;bottom:0;z-index:var(--z-drawer);width:min(var(--w-menu),86vw);background:var(--surface);border-right:1px solid var(--line);box-shadow:var(--shadow-drawer);padding:calc(0.625rem * var(--dz));display:flex;flex-direction:column;gap:calc(0.125rem * var(--dz));transform:translateX(-102%);transition:transform .18s ease}
.drawer.open{transform:none}
@media (prefers-reduced-motion:reduce){.drawer{transition:none}}
.drawer-head{gap:var(--space-2);padding:calc(0.125rem * var(--dz)) calc(0.125rem * var(--dz)) calc(0.625rem * var(--dz)) calc(0.375rem * var(--dz));margin-bottom:calc(0.375rem * var(--dz));border-bottom:1px solid var(--line);font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--ink-2)}
.drawer-head .mark{margin-right:calc(0.375rem * var(--dz))}
.drawer-right{left:auto;right:0;width:min(var(--w-drawer-end),90vw);border-right:0;border-left:1px solid var(--line);box-shadow:var(--shadow-drawer-end);transform:translateX(102%);padding:calc(0.625rem * var(--dz)) 0 0}
.drawer-right .drawer-head{padding:calc(0.125rem * var(--dz)) calc(0.625rem * var(--dz)) calc(0.625rem * var(--dz)) var(--space-4);margin:0}
.drawer-head-actions{display:flex;gap:calc(0.375rem * var(--dz));align-items:center}
.drawer-body{flex:1;min-height:0;overflow-y:auto;padding:var(--space-1) calc(0.625rem * var(--dz)) var(--space-3)}
.drawer-foot{margin:0;padding:calc(0.625rem * var(--dz)) var(--space-4);border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--muted)}
/* Heads of drawers, dialogs and overlays: title on the left, actions on the right */
.drawer-head,.pk-head,.ap-head,.data-head{display:flex;align-items:center;justify-content:space-between}

/* Menu: seven group rows; each opens its sub-menu beside the drawer (js/ui/shell/nav.js) */
.drawer-scroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:calc(0.125rem * var(--dz))}
.nav-start{display:flex;align-items:center;gap:var(--space-3);margin:0 0 var(--space-2);padding:calc(0.5rem * var(--dz)) calc(0.625rem * var(--dz));border-radius:var(--control-radius);background:var(--accent-wash);color:var(--ink);text-decoration:none;font-size:var(--fs-md);font-weight:var(--fw-bold)}
.nav-start svg{color:var(--accent-ink)}
.nav-start small{display:block;font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--ink-2)}
.nav-start:hover{outline:2px solid var(--accent)}
.nav-start[aria-current="page"]{outline:2px solid var(--accent)}
.nav-row{display:flex;align-items:center;gap:var(--space-3);width:100%;box-sizing:border-box;padding:calc(0.5rem * var(--dz)) calc(0.5rem * var(--dz)) calc(0.5rem * var(--dz)) calc(0.625rem * var(--dz));border:0;border-radius:var(--control-radius);background:none;font:inherit;font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--ink-2);text-align:left;cursor:pointer}
.nav-row > span{flex:1;min-width:0}
.nav-row > svg:last-child{width:var(--icon);height:var(--icon);color:var(--muted)}
.nav-row.is-current{color:var(--ink);font-weight:var(--fw-bold)}
.nav-row.is-current > svg:first-child{color:var(--accent-ink)}
.nav-row[aria-expanded="true"]{background:var(--accent-wash);color:var(--ink)}
.nav-row[aria-expanded="true"] > svg:last-child{color:var(--ink)}
.nav-moved{font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--chg-edit);font-variant-numeric:tabular-nums}
.nav-sub{position:absolute;top:0;bottom:0;left:100%;width:min(var(--w-menu-sub),calc(100vw - var(--w-menu)));box-sizing:border-box;display:flex;flex-direction:column;background:var(--surface);border-right:1px solid var(--line);border-left:1px solid var(--line);box-shadow:var(--shadow-drawer);padding:calc(0.625rem * var(--dz))}
.nav-sub-head{display:flex;align-items:flex-start;gap:var(--space-3);padding:calc(0.25rem * var(--dz)) calc(0.375rem * var(--dz)) calc(0.625rem * var(--dz));border-bottom:1px solid var(--line)}
.nav-sub-head h2{margin:0;font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--ink)}
.nav-sub-head p{margin:calc(0.125rem * var(--dz)) 0 0;font-size:var(--fs-xs);color:var(--muted)}
.nav-sub-icon{display:grid;place-items:center;width:2.25rem;height:2.25rem;flex:none;border-radius:var(--control-radius);background:var(--accent-wash);color:var(--accent-ink)}
.nav-back{display:none}
.nav-sub-body{flex:1;min-height:0;overflow-y:auto}
.nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(0.0625rem * var(--dz))}
.nav-steps > li{display:flex;align-items:center;gap:calc(0.25rem * var(--dz))}
.nav-steps > li > a{flex:1;min-width:0}
.nav-n{display:grid;place-items:center;width:1.25rem;height:1.25rem;flex:none;border-radius:var(--radius-round);background:var(--grid);color:var(--ink-2);font-size:var(--fs-3xs);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}
.nav-label{flex:1;min-width:0}
.nav-after{display:block;font-size:var(--fs-3xs);font-weight:var(--fw-medium);color:var(--muted)}
.nav-see{margin:var(--space-2) calc(0.625rem * var(--dz)) 0}
.drawer .nav-see a.nav-inline{display:inline;padding:0;font-size:inherit;font-weight:var(--fw-semibold);color:var(--accent-ink);text-decoration:underline}
.nav-sub-foot{display:flex;flex-direction:column;gap:calc(0.0625rem * var(--dz));border-top:1px solid var(--line);padding-top:var(--space-2)}
.drawer .nav-foot-link{font-size:var(--fs-sm);color:var(--accent-ink)}
.drawer a{display:flex;align-items:center;gap:var(--space-3);padding:calc(0.4375rem * var(--dz)) calc(0.625rem * var(--dz));border-radius:var(--control-radius);text-decoration:none;color:var(--ink-2);font-size:var(--fs-md);font-weight:var(--fw-semibold)}
.drawer a:hover{color:var(--ink)}
.drawer a[aria-current="page"]{color:var(--ink);font-weight:var(--fw-bold)}
.drawer a small{margin-left:auto;font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--muted);font-variant-numeric:tabular-nums}
.nav-group{margin:var(--space-3) var(--space-2) var(--space-1);font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--accent-ink)}
.drawer-settings{position:relative;flex:none;border-top:1px solid var(--line);padding:var(--space-2) 0 0}
/* Profile card pinned to the foot of the menu; its settings open above it */
.pf-card{display:flex;align-items:center;gap:calc(0.625rem * var(--dz));width:100%;box-sizing:border-box;padding:calc(0.5rem * var(--dz)) calc(0.625rem * var(--dz));border:0;border-radius:var(--control-radius);background:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.pf-card > svg{margin-left:auto;width:var(--icon);height:var(--icon);color:var(--muted);transform:rotate(-90deg);transition:transform .15s}
.pf-card[aria-expanded="true"]{background:var(--accent-wash)}
.pf-card[aria-expanded="true"] > svg{transform:rotate(90deg)}
/* Initials avatars (js/ui/records/avatar.js): the accent, solid for you, a wash for others */
.avatar{display:grid;place-items:center;width:2.25rem;height:2.25rem;flex:none;border-radius:var(--radius-round);background:var(--accent-wash);color:var(--accent-ink);font-size:var(--fs-sm);font-weight:var(--fw-bold);letter-spacing:.02em;line-height:1}
.avatar.is-self{background:var(--accent);color:var(--on-accent)}
.avatar-sm{width:1.5rem;height:1.5rem;font-size:var(--fs-3xs)}
.by-who{display:flex;align-items:flex-start;gap:var(--space-2)}
.by-who .avatar{margin-top:.1em}
.avatar-lg{width:3rem;height:3rem;font-size:var(--fs-md)}
.pf-who{display:flex;flex-direction:column;min-width:0}
.pf-who b,.pf-who small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-who b{font-size:var(--fs-md);font-weight:var(--fw-bold)}
.pf-who small{font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--muted)}
.pf-menu{position:absolute;left:0;right:0;bottom:calc(100% + var(--space-1));background:var(--surface);border:1px solid var(--line);border-radius:var(--control-radius);box-shadow:var(--shadow-overlay);padding:var(--space-2) 0;max-height:calc(100dvh - 10rem);overflow-y:auto}
.pf-menu .nav-group{margin-top:var(--space-2)}
.pf-head{display:flex;align-items:center;gap:calc(0.625rem * var(--dz));padding:calc(0.25rem * var(--dz)) calc(0.625rem * var(--dz)) var(--space-2);border-bottom:1px solid var(--line)}
.pf-head .link-btn{margin-left:auto;font-size:var(--fs-sm)}
.pf-form{display:grid;gap:var(--space-2);padding:0 calc(0.625rem * var(--dz)) var(--space-2);border-bottom:1px solid var(--line)}
.pf-form label{display:grid;gap:calc(0.125rem * var(--dz));font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--ink-2)}
.pf-form input{font:inherit;font-size:var(--fs-md);font-weight:var(--fw-medium);color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--control-radius);padding:calc(0.375rem * var(--dz)) calc(0.5rem * var(--dz))}
.pf-regs{margin:var(--space-1) calc(0.625rem * var(--dz));padding:0;border:0}
.pf-regs legend{display:flex;align-items:center;gap:var(--space-2);padding:0 0 var(--space-1);font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--ink-2)}
.pf-regs legend svg{width:var(--icon-sm);height:var(--icon-sm)}
.pf-reg{display:flex;align-items:flex-start;gap:var(--space-2);padding:calc(0.3125rem * var(--dz)) var(--space-2);border-radius:var(--control-radius);cursor:pointer;font-size:var(--fs-md)}
.pf-reg:hover{background:var(--grid)}
.pf-reg input{margin:.2em 0 0;accent-color:var(--accent)}
.pf-reg span{display:flex;flex-direction:column}
.pf-reg small{font-size:var(--fs-xs);color:var(--muted)}
.drawer-head small{display:block;font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--muted)}
.pf-form-actions{display:flex;justify-content:flex-end;align-items:center;gap:var(--space-2)}
.switch{display:flex;align-items:center;gap:calc(0.625rem * var(--dz));padding:calc(0.4375rem * var(--dz)) calc(0.625rem * var(--dz));border-radius:var(--control-radius);font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--ink-2);cursor:pointer}
.switch .track{position:relative;width:1.875rem;height:1.125rem;flex:none;border-radius:var(--radius-pill);background:var(--line);transition:background .15s}
.switch .track::after{content:"";position:absolute;top:0.125rem;left:0.125rem;width:0.875rem;height:0.875rem;border-radius:var(--radius-round);background:var(--surface-2);box-shadow:var(--shadow);transition:transform .15s}
.switch input:checked + .track{background:var(--m-system)}
.switch input:checked + .track::after{transform:translateX(0.75rem)}
.switch input:focus-visible + .track{outline:2px solid var(--focus);outline-offset:2px}
.switch small{display:block;font-weight:var(--fw-medium);font-size:var(--fs-xs);color:var(--muted)}
.set-note{margin:var(--space-1) calc(0.625rem * var(--dz)) 0}
@media (prefers-reduced-motion:reduce){.switch .track,.switch .track::after,.pf-card > svg{transition:none}}

/* Filter drawer: dimension → expandable group → option */
.fdim{margin:0 0 calc(0.875rem * var(--dz))}
.fdim-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-2) calc(0.375rem * var(--dz)) calc(0.375rem * var(--dz));border-bottom:1px solid var(--line);margin-bottom:var(--space-1)}
.fdim-head small,.fgrp summary small{color:var(--muted);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.fall{display:flex;align-items:center;gap:var(--space-2);font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--accent-ink);cursor:pointer}
.fnote{margin:calc(0.125rem * var(--dz)) calc(0.375rem * var(--dz)) var(--space-1);font-size:var(--fs-xs);color:var(--muted)}
.fdim input,.fgrp input{margin:0;accent-color:var(--m-system);width:0.9375rem;height:0.9375rem;flex:none}
.fgrp > summary{display:flex;align-items:center;gap:var(--space-2);padding:calc(0.375rem * var(--dz));border-radius:var(--radius-5);cursor:pointer;font-size:var(--fs-md);font-weight:var(--fw-strong);color:var(--ink)}
.fgrp .gname{flex:1;min-width:0}
.fgrp .fopt{margin-left:calc(1.25rem * var(--dz))}
.fopt{display:flex;align-items:center;gap:calc(0.375rem * var(--dz));border-radius:var(--radius-5);padding:0 calc(0.375rem * var(--dz)) 0 0}
.fopt label{flex:1;display:flex;align-items:center;gap:var(--space-2);padding:calc(0.3125rem * var(--dz)) calc(0.375rem * var(--dz));font-size:var(--fs-md);color:var(--ink-2);cursor:pointer;min-width:0}
.only{font:inherit;font-size:var(--fs-xs);color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-xs);padding:calc(0.0625rem * var(--dz)) calc(0.4375rem * var(--dz));cursor:pointer;opacity:0}
.fopt:hover .only,.only:focus-visible{opacity:1}
@media (hover:none){.only{opacity:1}}

/* Disclosures (<details>): no native marker; the chevron turns when open */
.pop > summary,.fgrp > summary,details.data summary,.db-grp > summary,.mx-grp > summary{list-style:none}
.pop > summary::-webkit-details-marker,.fgrp > summary::-webkit-details-marker,
details.data summary::-webkit-details-marker,.db-grp > summary::-webkit-details-marker,.mx-grp > summary::-webkit-details-marker{display:none}
.chev{width:var(--icon-xs);height:var(--icon-xs);flex:none;display:inline-grid;place-items:center;color:var(--muted);transition:transform .15s}
.chev::before{content:"";width:0.375rem;height:0.375rem;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg)}
.fgrp[open] .chev,.db-grp[open] > summary .chev,.mx-grp[open] > summary .chev{transform:rotate(90deg)}

/* Popovers (native <details>) for explanatory text */
.pop{position:relative;flex:none}
.info{display:inline-grid;place-items:center;width:1.25rem;height:1.25rem;border-radius:var(--radius-round);border:1px solid var(--line);background:var(--surface-2);color:var(--muted);font:italic var(--fw-bold) var(--fs-sm)/1 var(--font);cursor:pointer}
.pop-panel{position:absolute;top:calc(100% + var(--space-2));left:0;z-index:var(--z-pop);width:min(var(--w-pop),calc(100vw - 2rem));background:var(--surface-2);border:1px solid var(--line);border-radius:var(--tile-radius);box-shadow:var(--shadow);padding:var(--space-3) calc(0.875rem * var(--dz));font-size:var(--fs-md);color:var(--ink-2);font-style:normal;font-weight:var(--fw-regular)}
.pop-right .pop-panel{left:auto;right:0}
.pop-panel p{margin:0}
.pop-panel p + p{margin-top:var(--space-2)}
.pop-menu{width:auto;min-width:10rem;padding:calc(0.375rem * var(--dz));display:flex;flex-direction:column}
.pop-menu a{padding:calc(0.375rem * var(--dz)) var(--space-2);border-radius:var(--radius-5);text-decoration:none}
/* The info glyph beside a card heading shows its note as a tooltip */
.i{display:inline-grid;place-items:center;width:0.9375rem;height:0.9375rem;margin-left:calc(0.375rem * var(--dz));vertical-align:1px;border-radius:var(--radius-round);border:1px solid var(--line);color:var(--muted);font:italic var(--fw-bold) var(--fs-3xs)/1 var(--font);cursor:help}
/* Outlined controls darken their edge on hover */
.icon-btn:hover,.only:hover,.info:hover,.pop[open] > .info,.i:hover,.i:focus-visible,.filter-btn:hover{color:var(--ink);border-color:var(--ink-2)}

/* Views: every view fits the viewport; only grids, tables and drawers scroll inside */
body{height:100dvh;overflow:hidden;display:flex;flex-direction:column}
main{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;padding:var(--pad-page-y) var(--pad)}
main:focus{outline:none} /* the skip link's target */
.view{scroll-margin-top:8.75rem}
/* Map and register fill the space under the bar and strip, so the grid/table is the page */
.view-fill{display:flex;flex-direction:column;flex:1;min-height:22.5rem}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin-bottom:var(--space-2);min-height:var(--ctl-h)}
.toolbar h2{margin:0;font-size:var(--fs-lg-plus);font-weight:var(--fw-title);white-space:nowrap}
.toolbar .filters{margin:0;padding:0;background:none;border:0}
.toolbar .legend{margin:0 0 0 auto}
/* Systems map: a placeholder until the map is built */
.sysmap-soon{max-width:40rem;margin:var(--space-4) auto 0;padding:var(--space-4) calc(var(--space-4) * 1.5)}
.sysmap-soon p{margin:var(--space-2) 0 0;color:var(--ink-2)}
.sysmap-soon a{color:var(--accent-ink)}

/* Cards. Anatomy: kicker, title, key figure, body, meta; sizes and weights come from the --t-* roles. */
.card{position:relative;background:var(--card-bg);border:var(--card-border);border-bottom:var(--card-border-b);border-radius:var(--card-radius);padding:var(--pad-card-y) var(--card-pad-x);box-shadow:var(--card-shadow);min-width:0;min-height:0}
.card h3{margin:0 0 var(--space-1);font-size:var(--t-title);font-weight:var(--fw-bold);line-height:1.25;padding-right:calc(2.75rem * var(--dz))}
.card .sub{margin:0 0 var(--gap-block);color:var(--muted);font-size:var(--t-label);line-height:1.4}
.card .sub a{color:var(--accent-ink)}
.card > h3:last-of-type + .bars,.card > h3 + .stack-rows,.card > h3 + .stack{margin-top:var(--gap-block)}
.kicker{margin:0;font-size:var(--t-kicker);font-weight:var(--fw-semibold);line-height:1.3;color:var(--accent-ink)}
.kicker a{color:inherit;text-decoration:none}
.kicker a:hover,.kicker a:focus-visible{text-decoration:underline}
.empty{margin:0}
/* A card heading with an inline ⓘ, count or chip */
.ov-card > h3,.pk-attn h4,.dk-att-sec h4{display:flex;align-items:center;gap:var(--space-1)}

/* Filters */
.filters{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;flex:1 1 auto;min-width:0}
.filters label{display:flex;font-size:var(--fs-sm);color:var(--muted);font-weight:var(--fw-semibold)}
.filters .grow{flex:1 1 12.5rem;max-width:20rem}
.filters .grow input{width:100%}
.filter-btn{margin-left:auto;display:inline-flex;align-items:center;gap:var(--space-2);height:var(--ctl-h);padding:0 calc(0.625rem * var(--dz));font:inherit;font-size:var(--fs-md);color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--control-radius);cursor:pointer;max-width:100%;min-width:0}
.filter-btn svg{width:var(--icon);height:var(--icon);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;flex:none}
.filter-btn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Segmented controls. Radio labels (.seg-toggle, .seg-tabs for tab-like text) and page links
   (.page-tabs: Process: Map · Charts) share one look: joined boxes, the chosen one washed. */
.seg-toggle{border:0;margin:0;padding:0;min-width:0}
.seg-opts{display:flex}
.page-tabs{display:flex;flex:none}
.seg-toggle label,.page-tabs a{display:inline-flex;align-items:center;height:var(--ctl-h);font-size:var(--fs-md);border:1px solid var(--line);background:var(--surface-2);white-space:nowrap}
.seg-toggle label{flex-direction:row;gap:calc(0.375rem * var(--dz));color:var(--ink);font-weight:var(--fw-medium);padding:0 calc(0.625rem * var(--dz));cursor:pointer}
.page-tabs a{padding:0 var(--space-3);font-weight:var(--fw-strong);color:var(--muted);text-decoration:none}
.seg-toggle label input{margin:0}
.seg-toggle label:not(:first-of-type):not(:last-of-type),.page-tabs a + a{border-left:0}
.seg-toggle label:not(:first-of-type):not(:last-of-type){border-radius:0}
.seg-toggle label:first-of-type,.page-tabs a:first-child{border-radius:var(--control-radius) 0 0 var(--control-radius)}
.seg-toggle label:last-of-type,.page-tabs a:last-child{border-radius:0 var(--control-radius) var(--control-radius) 0}
.seg-toggle label:last-of-type{border-left:0}
.seg-toggle label:has(input:checked){background:var(--accent-wash);border-color:var(--accent)}
.page-tabs a:hover,.page-tabs a[aria-current]{color:var(--ink)}
.seg-tabs label{font-weight:var(--fw-strong);color:var(--muted)}
.seg-tabs label:has(input:checked){color:var(--ink)}
/* Inputs drawn by their label: segment tabs, underline tabs, switches, Appearance cards */
.seg-tabs input,.view-tabs input,.switch input,.ap-radio{position:absolute;opacity:0;pointer-events:none}
/* Small button group (Shift · Flows · Treemap · Bars, group-by switches) */
.tool-view{display:inline-flex;gap:0;width:fit-content;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;margin:0 0 var(--space-2)}
.tool-view button{font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--ink-2);background:var(--surface-2);border:0;border-left:1px solid var(--line);padding:var(--space-1) var(--space-3);cursor:pointer}
.tool-view button:first-child{border-left:0}
.tool-view button.on{background:var(--accent-wash);color:var(--ink)}

/* Fields: toolbar selects and search boxes, edit-dialog inputs, picker buttons and the picker's search.
   Each component then sets its own size; toolbar fields use the control radius and height. */
.filters select,.filters input[type="search"],.proc-search input,
.ed-fields input:not([type=checkbox]),.ed-fields select,.ed-fields textarea,.meta input,.meta select,.meta textarea,
.pk-btn,.pk-search input,.pk-add input:not([type=checkbox]),.pf-name input{font:inherit;font-size:var(--fs-md);color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--field-radius);padding:calc(0.3125rem * var(--dz)) var(--space-2)}
.filters select,.filters input[type="search"],.proc-search input{border-radius:var(--control-radius);height:var(--ctl-h)}
.filters select,.filters input[type="search"]{min-width:0;max-width:12.5rem}
.filters input[type="search"]{max-width:none}

/* Scroll boxes: a grid or table that is the page, bordered like a card, scrolling inside */
.map-scroll,.mx-scroll,.table-scroll{flex:1;min-height:0;overflow:auto;border:var(--card-border);border-bottom:var(--card-border-b);border-radius:var(--card-radius);background:var(--card-bg)}
.map-scroll,.mx-scroll{overscroll-behavior:contain}

/* Rows and list items: a grid wash on hover; the chosen one washed and outlined in the accent */
.bar-crumbs a:hover,.bar-crumbs button:hover,.drawer a:hover,.nav-row:hover,.switch:hover,.set-row:hover,.pf-card:hover,.fgrp > summary:hover,.fopt:hover,.fopt:focus-within,
.pop-menu a:hover,.crumb:hover,.db-sh:hover,.db-grp > summary:hover,.hist-item:hover,.hist-item:focus-visible,.ovc-reg:hover{background:var(--grid)}
.drawer a[aria-current="page"],.page-tabs a[aria-current],.ld-row.is-sel{background:var(--accent-wash);box-shadow:inset 0 0 0 1px var(--accent)}

/* Short link lists that trim to fit (the part pages' and Documents' "Needs attention") */
.pk-list,.dk-list{margin:0;padding:0;list-style:none;font-size:var(--fs-sm);line-height:1.5}
.pk-list li,.dk-list li{display:flex;align-items:center;gap:var(--space-1);min-width:0}
.pk-list a,.dk-list a{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2);text-decoration:none}
.pk-list a:hover,.dk-list a:hover{color:var(--ink);text-decoration:underline}
.pk-attn h4,.dk-att-sec h4{font-size:var(--fs-sm)}
.pk-attn .n,.dk-count{margin-left:auto;font-variant-numeric:tabular-nums}

/* Tooltip */
.tip{position:fixed;z-index:var(--z-tip);pointer-events:none;background:var(--ink);color:var(--surface);font-size:var(--fs-sm);line-height:1.4;padding:calc(0.375rem * var(--dz)) calc(0.5625rem * var(--dz));border-radius:var(--radius-5);max-width:16.25rem;box-shadow:var(--shadow)}

/* Utilities */
.muted{color:var(--muted)}
.small{font-size:var(--fs-sm)}
.nowrap{white-space:nowrap}
.mt{margin-top:var(--space-2)}
.flush{margin:0}