/* Dashboards, products, portfolio, templates, API pages, usage (ui/dash.rs and pages). */
.page-title__icon { color: var(--fizz-text); margin-right: var(--space-2); font-size: .8em; }
.dash-subnav { margin-bottom: calc(-1 * var(--space-2)); }
.dash-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.dash-filter select, .dash-filter .mc-select__trigger { min-height: 38px; padding: 6px 10px; }
.dash-body, .stack { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.dash-scope { display: flex; gap: 6px; align-items: center; }
.dash-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; margin-right: var(--space-2); vertical-align: middle; }
.dash-dot--lg { width: 14px; height: 14px; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 0%, var(--surface-raised)); }
.dash-notice { display: flex; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md);
  background: var(--grape-wash); border: 1px solid var(--grape); color: var(--ink); }
.dash-notice__icon { color: var(--grape); font-size: 18px; margin-top: 2px; }
.dash-notice__title { font-weight: 600; margin: 0; }
.dash-notice__body { margin: 4px 0 0; color: var(--ink-muted); font-size: 14px; }
.dash-list { list-style: none; margin: 0; padding: 0; display: grid; }
.dash-list__row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-1);
  border-top: 1px solid var(--border); color: var(--ink); text-decoration: none; min-width: 0; }
a.dash-list__row:hover { background: var(--surface-raised); }
.dash-list__main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-list__err { max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-tone.is-good, .is-ok { color: var(--viz-status-good); }
.dash-tone.is-warning { color: var(--warn-text); }
.dash-tone.is-serious, .dash-tone.is-critical, .is-bad { color: var(--danger-text); }
.pd-section { font: 700 17px/24px var(--font-display); margin: 0; display: flex; align-items: center; gap: var(--space-2); }
.pd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.pd-grid--trend { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.pd-grid--wide { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
/* health */
.dash-health { position: relative; display: inline-grid; justify-items: center; }
.dash-health svg { overflow: visible; }
.dash-health__track { fill: none; stroke: var(--viz-grid); stroke-width: 10; stroke-linecap: round; }
.dash-health__fill { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dasharray .6s ease-out; }
.dash-health__score { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%);
  font: 800 28px/1 var(--font-display); color: var(--ink); }
.dash-health__grade { font-size: 13px; font-weight: 600; margin-top: -8px; }
.dash-health.is-good .dash-health__grade { color: var(--viz-status-good); }
.dash-health.is-warning .dash-health__grade { color: var(--warn-text); }
.dash-health.is-serious .dash-health__grade, .dash-health.is-critical .dash-health__grade { color: var(--danger-text); }
/* products */
.pr-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.pr-toolbar__count { display: flex; gap: var(--space-3); margin: 0; }
.pr-toolbar__risk { color: var(--danger-text); }
.pr-toolbar__search { flex: 1 1 220px; }
.pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }
.pr-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  border-top: 4px solid var(--slot, var(--border)); transition: transform .15s ease-out, box-shadow .15s; min-width: 0; }
.pr-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.pr-card.is-risk { box-shadow: var(--shadow-card), inset 0 0 0 1px var(--danger-wash); }
.pr-card__link { display: grid; gap: var(--space-3); padding: var(--space-4); color: inherit; text-decoration: none; height: 100%; }
.pr-card__head { display: flex; align-items: center; gap: var(--space-1); }
.pr-card__name { font: 700 18px/24px var(--font-display); flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pr-card__risk { font-size: 12px; font-weight: 600; color: var(--danger-text); white-space: nowrap; }
.pr-card__desc { color: var(--ink-muted); font-size: 14px; }
.pr-card__body { display: flex; align-items: center; gap: var(--space-4); }
.pr-card__nums { display: grid; gap: var(--space-2); flex: 1; min-width: 0; }
.pr-card__never { color: var(--ink-muted); font-size: 14px; }
.pr-card__foot { display: flex; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.pr-card--skeleton { padding: var(--space-4); display: grid; gap: var(--space-3); }
.pr-empty__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; }
.pr-sugpanel__actions { margin-left: auto; display: flex; gap: var(--space-1); }
.pr-sugs { display: grid; gap: var(--space-3); }
.pr-sug { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); display: grid; gap: var(--space-2); }
.pr-sug__head { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.pr-sug__name { flex: 1 1 200px; }
.pr-sug__name input { min-height: 38px; }
.pr-sug__reason { color: var(--ink-muted); font-size: 14px; }
.pr-sug__assets { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.pr-sug__actions { display: flex; gap: var(--space-2); }
.pr-conf { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--surface-raised); }
.pr-conf.is-high { color: var(--viz-status-good); }
.pr-check { display: flex; align-items: center; gap: var(--space-2); padding: 6px var(--space-2); border-radius: var(--radius-sm); cursor: pointer; min-width: 0; }
.pr-check:hover { background: var(--surface-raised); }
.pr-check.is-on { background: var(--grape-wash); }
.pr-check__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-check__meta { color: var(--ink-muted); font-size: 12px; white-space: nowrap; }
.pr-check__risk { color: var(--danger-text); font: 600 12px var(--font-mono); }
.pr-role { font-size: 11px; color: var(--ink-muted); background: var(--surface-raised); padding: 1px 6px; border-radius: var(--radius-pill); }
.pr-picker { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); display: grid; gap: var(--space-2); min-width: 0; }
.pr-picker legend { font-weight: 600; padding: 0 var(--space-1); }
.pr-picker__bar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.pr-picker__list { max-height: 320px; overflow-y: auto; display: grid; }
/* dialog */
.mc-dialog__backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(10, 6, 18, .6); display: grid; place-items: center;
  padding: var(--space-4); animation: mc-fade .15s ease-out; }
.mc-dialog { width: min(640px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); animation: mc-rise .18s ease-out; }
.mc-dialog--wide { width: min(1080px, 100%); }
.mc-dialog__head, .mc-dialog__foot { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4); }
.mc-dialog__head { border-bottom: 1px solid var(--border); }
.mc-dialog__foot { border-top: 1px solid var(--border); justify-content: flex-end; }
.mc-dialog__foot > .mc-meta { margin-right: auto; }
.mc-dialog__title { font: 700 20px/28px var(--font-display); flex: 1; display: flex; gap: var(--space-2); align-items: center; }
.mc-dialog__body { padding: var(--space-4); overflow-y: auto; display: grid; gap: var(--space-4); }
.mc-iconbtn { border: 0; background: transparent; color: var(--ink-muted); width: 36px; height: 36px; border-radius: var(--radius-sm); }
.mc-iconbtn:hover { background: var(--surface-raised); color: var(--ink); }
/* toast */
.mc-toasts { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 60; max-width: calc(100vw - 32px); }
.mc-toast { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface-raised);
  border: 1px solid var(--border-strong); border-left-width: 4px; border-radius: var(--radius-md); box-shadow: var(--shadow-pop); animation: mc-rise .2s ease-out; }
.mc-toast.is-ok { border-left-color: var(--viz-status-good); } .mc-toast.is-error { border-left-color: var(--viz-status-critical); }
.mc-toast__link { font-weight: 600; white-space: nowrap; }
/* product dashboard */
.pd-back { display: inline-flex; gap: var(--space-1); align-items: center; color: var(--ink-muted); text-decoration: none; font-size: 14px; }
.pd-back:hover { color: var(--ink); }
.pd-head { display: grid; gap: var(--space-2); padding-bottom: var(--space-2); border-bottom: 2px solid var(--slot, var(--border)); }
.pd-head__row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; }
.pd-head__title { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.pd-risk { font-size: 13px; font-weight: 600; color: var(--danger-text); background: var(--danger-wash); padding: 2px 10px; border-radius: var(--radius-pill); }
.pd-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; }
.pd-providers { display: inline-flex; gap: var(--space-2); }
.pd-hero { display: grid; grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); gap: var(--space-4); align-items: stretch; }
.pd-health { justify-items: center; text-align: center; align-content: start; }
.pd-health .pd-section { justify-self: start; }
.pd-health__why { color: var(--ink-muted); font-size: 14px; }
.pd-health__how { font-size: 13px; color: var(--ink-muted); text-align: left; }
.pd-kpis { align-content: start; }
.pd-next__list { display: grid; gap: var(--space-2); }
.pd-next__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md);
  background: var(--surface-raised); color: var(--ink); text-decoration: none; transition: transform .12s, background-color .12s; }
a.pd-next__item:hover { transform: translateX(3px); background: var(--grape-wash); }
.pd-next__icon { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface); }
.pd-next__icon.is-critical, .pd-next__icon.is-serious { color: var(--danger-text); }
.pd-next__icon.is-warning { color: var(--warn-text); } .pd-next__icon.is-good { color: var(--viz-status-good); }
.pd-next__text { display: grid; flex: 1; min-width: 0; }
.pd-next__title { font-weight: 600; }
.pd-next__detail { color: var(--ink-muted); font-size: 14px; }
.pd-next__go { color: var(--ink-muted); }
.pd-fix__list { display: grid; gap: var(--space-2); max-height: 360px; overflow-y: auto; }
.pd-fix__row { border-top: 1px solid var(--border); padding-top: var(--space-2); display: grid; gap: 2px; }
.pd-fix__top { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.pd-fix__id { font-weight: 600; }
.pd-fix__title { font-size: 14px; }
.pd-fix__pkgs { font-size: 12px; color: var(--ink-muted); margin: 0; overflow-wrap: anywhere; }
.pd-fix__pkgs strong { color: var(--patched); }
.pd-ops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.pd-op__head { display: flex; gap: var(--space-2); align-items: center; }
.pd-op__icon { color: var(--fizz-text); }
.pd-op__title { font: 700 16px var(--font-display); flex: 1; margin: 0; }
.pd-op__more { color: var(--ink-muted); }
.pd-op__big { font: 800 28px/1 var(--font-display); margin: 0; }
.pd-op__unit { font: 400 13px var(--font-sans); color: var(--ink-muted); }
.pd-op__counts { display: flex; gap: var(--space-3); font-size: 13px; }
.pd-asset { display: flex; gap: var(--space-2); align-items: center; color: var(--ink); text-decoration: none; min-width: 0; }
.pd-asset__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 32ch; }
.pd-asset__kind { font-size: 12px; color: var(--ink-muted); }
.mc-table tr.is-risk th { box-shadow: inset 3px 0 0 var(--sev-critical); }
.mc-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.pd-tl { display: grid; gap: 0; }
.pd-tl__item { position: relative; padding-left: var(--space-2); }
.pd-tl__item::before { content: ""; position: absolute; left: 25px; top: 0; bottom: 0; width: 2px; background: var(--border); }
.pd-tl__link { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-2) 0; color: var(--ink); text-decoration: none; position: relative; }
.pd-tl__dot { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-raised);
  border: 2px solid var(--border); }
.pd-tl__dot.is-failed { border-color: var(--danger-text); } .pd-tl__dot.is-ok { border-color: var(--viz-status-good); }
.pd-tl__dot.is-running { border-color: var(--grape); }
.pd-tl__text { display: grid; }
/* portfolio */
.pf-period { display: flex; gap: 6px; align-items: center; margin: 0; }
.pf-filter { margin-left: auto; }
.pf-sort { border: 0; background: none; padding: 0; font: inherit; color: inherit; display: inline-flex; gap: 4px; align-items: center; }
.pf-name { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; font-weight: 600; }
.pf-zero { color: var(--ink-muted); }
.pf-sev { font-weight: 700; } .pf-sev--critical { color: var(--sev-critical); } .pf-sev--high { color: var(--sev-high); }
td.is-bad { color: var(--danger-text); } td.is-good { color: var(--patched); }
/* templates */
.tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }
.tp-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  transition: transform .15s, box-shadow .15s; }
.tp-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.tp-card--skeleton { padding: var(--space-4); display: grid; gap: var(--space-3); }
.tp-card__btn { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: var(--space-2); padding: var(--space-4); width: 100%; height: 100%;
  color: var(--ink); text-decoration: none; border-radius: inherit; }
.tp-card__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tp-card__head { display: flex; gap: var(--space-2); align-items: center; font-size: 13px; color: var(--ink-muted); }
.tp-card__icon { width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--grape-wash); color: var(--grape); display: grid; place-items: center; }
.tp-card__kind { flex: 1; } .tp-card__ver { font-size: 12px; }
.tp-card__title { font: 700 17px/24px var(--font-display); }
.tp-card__summary { color: var(--ink-muted); font-size: 14px; }
.tp-card__chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.tp-card__cta { color: var(--grape); font-weight: 600; font-size: 14px; display: inline-flex; gap: 6px; align-items: center; }
.tp-chip { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--surface-raised); color: var(--ink-muted); }
.tp-chip--fix { color: var(--patched); }
.tp-dialog__body { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
.tp-dialog__left, .tp-dialog__right { display: grid; gap: var(--space-3); min-width: 0; }
.tp-pre { white-space: pre-wrap; color: var(--ink-muted); font-size: 14px; }
.tp-compliance { display: grid; gap: 4px; font-size: 13px; }
.tp-params { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); display: grid; gap: var(--space-3); }
.tp-param label { display: grid; gap: 4px; }
.tp-out__tabs { overflow-x: auto; }
.tp-out__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; }
.tp-out__code { max-height: 420px; overflow: auto; }
.tp-pr { border-top: 1px solid var(--border); padding-top: var(--space-3); display: grid; gap: var(--space-2); }
/* API docs */
.apid-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.apid-nav { position: sticky; top: var(--space-4); max-height: calc(100vh - 32px); overflow-y: auto; display: grid; gap: var(--space-3); }
.apid-nav__list, .apid-nav__list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.apid-nav__group { font-weight: 600; color: var(--ink); text-decoration: none; display: block; padding: var(--space-2) 0 2px; }
.apid-nav__op { display: flex; gap: var(--space-2); align-items: center; padding: 3px 6px; border-radius: var(--radius-sm);
  font-size: 13px; color: var(--ink-muted); text-decoration: none; }
.apid-nav__op:hover { background: var(--surface-raised); color: var(--ink); }
.apid-main { display: grid; gap: var(--space-6); min-width: 0; }
.apid-group { display: grid; gap: var(--space-4); scroll-margin-top: var(--space-4); }
.apid-group__title { font: 700 22px var(--font-display); display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.apid-scope { font-size: 12px; }
.apid-op { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4);
  display: grid; gap: var(--space-3); scroll-margin-top: var(--space-4); min-width: 0; }
.apid-op__head { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; }
.apid-op__path { font-size: 14px; font-weight: 600; }
.apid-op__summary { font: 600 15px var(--font-sans); margin: 0; flex: 1 1 200px; }
.apid-op__chips { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.apid-op__id { font-size: 11px; color: var(--ink-muted); }
.apid-method { font: 700 11px/18px var(--font-mono); padding: 0 6px; border-radius: 4px; min-width: 48px; text-align: center;
  background: var(--surface-raised); color: var(--ink); }
.apid-method.is-get { background: color-mix(in srgb, var(--viz-1) 22%, transparent); }
.apid-method.is-post { background: color-mix(in srgb, var(--viz-3) 24%, transparent); }
.apid-method.is-patch { background: color-mix(in srgb, var(--viz-4) 24%, transparent); }
.apid-method.is-delete { background: color-mix(in srgb, var(--viz-8) 24%, transparent); }
.apid-req { color: var(--danger-text); }
.apid-schema summary, .apid-resp summary { cursor: pointer; font-size: 14px; }
.apid-responses { display: grid; gap: var(--space-1); }
.apid-code { font: 700 12px var(--font-mono); }
.apid-resp.is-ok .apid-code { color: var(--patched); } .apid-resp.is-err .apid-code { color: var(--danger-text); }
.apid-props { list-style: none; margin: var(--space-2) 0 0; padding-left: var(--space-3); border-left: 2px solid var(--border); display: grid; gap: 6px; }
.apid-props li { display: flex; flex-wrap: wrap; gap: 4px var(--space-2); align-items: baseline; font-size: 13px; }
.apid-prop__name { font-weight: 600; } .apid-prop__type { color: var(--grape); background: none; }
.apid-prop__desc { color: var(--ink-muted); flex-basis: 100%; }
.apid-nested { flex-basis: 100%; }
/* API settings */
.apis-table code { white-space: nowrap; }
.apis-scopes { display: flex; flex-wrap: wrap; gap: 4px; }
.apis-by { font-weight: 400; }
tr.is-off { opacity: .55; }
.apis-form { display: grid; gap: var(--space-3); max-width: 720px; }
.apis-fieldset { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); display: grid; gap: var(--space-2); }
.apis-radios { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-2); }
.apis-radio { display: flex; gap: var(--space-2); padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.apis-radio span { display: grid; }
.apis-radio:has(input:checked) { border-color: var(--grape); background: var(--grape-wash); }
.apis-radio.is-disabled { opacity: .45; cursor: not-allowed; }
.apis-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px; }
.apis-form__actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
.apis-secret { border-color: var(--citrus); }
.apis-secret__warn { color: var(--warn-text); font-size: 14px; }
.apis-secret__row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.apis-secret__value { font-size: 14px; padding: var(--space-2); user-select: all; overflow-wrap: anywhere; flex: 1; }
.apis-hooks { display: grid; gap: var(--space-3); }
.apis-hook__head { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.apis-hook__url { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.apis-hook__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.apis-verify summary { cursor: pointer; font-weight: 600; display: flex; gap: var(--space-2); align-items: center; }
/* reports center jobs */
.rc-jobs { display: grid; gap: var(--space-2); }
.rc-job { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.rc-job__main { flex: 1; display: grid; gap: 4px; min-width: 0; }
.rc-job__label { font-weight: 600; }
.rc-job__bar { height: 6px; border-radius: var(--radius-pill); background: var(--viz-grid); overflow: hidden; }
.rc-job__bar span { display: block; height: 100%; background: var(--grape); transition: width .5s ease-out; }
.rc-job.is-step3 .rc-job__bar span { background: var(--viz-status-good); }
.rc-job.is-step0 .rc-job__bar span { background: var(--viz-status-critical); }
.usage-optout { display: grid; gap: var(--space-2); }
@keyframes mc-fade { from { opacity: 0; } }
@keyframes mc-rise { from { opacity: 0; transform: translateY(8px); } }
/* responsive */
@media (max-width: 900px) {
  .pd-grid, .pd-grid--trend, .pd-grid--wide, .pd-ops { grid-template-columns: minmax(0, 1fr); }
  .pd-hero { grid-template-columns: minmax(0, 1fr); }
  .apid-layout { grid-template-columns: minmax(0, 1fr); }
  .apid-nav { position: static; max-height: 240px; }
  .tp-dialog__body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .mc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-stat--hero { grid-column: 1 / -1; }
  .pr-grid, .tp-grid { grid-template-columns: minmax(0, 1fr); }
  .pd-actions { width: 100%; }
  .mc-dialog__backdrop { padding: 0; align-items: end; }
  .mc-dialog { max-height: 92vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .dash-list__err { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-card, .tp-card, .pd-next__item, .mc-dialog, .mc-dialog__backdrop, .mc-toast, .dash-health__fill, .rc-job__bar span { transition: none; animation: none; }
  .pr-card:hover, .tp-card:hover, a.pd-next__item:hover { transform: none; }
}
.tp-param__group { display: grid; gap: 4px; }
.tp-int { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
.tp-int > .mc-stepper:only-child { justify-self: start; }

/* ---------- projects: graphs, sources, auto, bulk (pages/project_groups.rs) ---------- */
.pg-trends, .pg-overview { display: grid; gap: var(--space-4); min-width: 0; }
.pg-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.pg-head .pd-section { margin: 0; }
.pg-sources-panel { display: grid; gap: var(--space-3); }
.pg-sources { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-md); }
.pg-source { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-3); min-width: 0; }
.pg-source + .pg-source { border-top: 1px solid var(--border); }
.pg-source__name { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.pg-source__error { flex-basis: 100%; color: var(--ink-muted); font-size: 13px; overflow-wrap: anywhere; }
.pg-source__actions { display: inline-flex; gap: var(--space-1); margin-left: auto; }
.pg-add { display: grid; gap: var(--space-3); }
.pg-add__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.pg-add__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pg-preview { display: grid; gap: var(--space-2); }
.pg-preview p { margin: 0; }
.pj-auto { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--radius-pill);
  font: 600 12px/20px var(--font-sans); background: var(--surface-raised); color: var(--ink-muted); white-space: nowrap; }
.pr-card__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pj-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-raised); }
.pj-sel { width: 36px; }
/* "Fix these first" on its own row (the trends took its old grid cell) */
.pd-fix, .pd-fix__list { grid-template-columns: minmax(0, 1fr); }
.pd-fix__list { margin: 0; padding: 0; list-style: none; }
.pd-fix__id, .pd-fix__pkgs { font-family: var(--font-mono); }
/* the assets table scrolls inside its panel, never the page (375 px) */
.pj-assets, .pg-sources-panel, .pg-add { min-width: 0; max-width: 100%; grid-template-columns: minmax(0, 1fr); }
/* position: relative keeps the header's sr-only labels inside the scroller */
.pj-assets > .pj-table { min-width: 0; max-width: 100%; position: relative; }
.pr-picker__bar .mc-select, .pr-picker__bar .ws-select { max-width: 100%; }
@media (max-width: 560px) {
  .pg-add__row { grid-template-columns: minmax(0, 1fr); }
  .pg-source__actions { margin-left: 0; }
}

/* ---- project compliance (pages/project_compliance.rs) ---- */
.cp-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.cp-summary__action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-left: auto; }
.cp-chip { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--border); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.cp-chip--ok { color: var(--viz-status-good); border-color: currentColor; }
.cp-chip--bad { color: var(--danger-text); background: var(--danger-wash); border-color: transparent; }
.cp-chip--warn { color: var(--warn-text); background: var(--warn-wash); border-color: transparent; }
.cp-frameworks, .cp-repos, .cp-controls { list-style: none; margin: 0; padding: 0; }
.cp-framework { padding: var(--space-3) 0; min-width: 0; }
.cp-framework + .cp-framework { border-top: 1px solid var(--border); }
.cp-framework--off .cp-framework__right .cp-chip { opacity: 0.6; }
.cp-framework__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.cp-framework__right { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cp-repos { margin-top: var(--space-2); padding-left: var(--space-3); border-left: 2px solid var(--border); }
.cp-repo { padding: var(--space-2) 0; min-width: 0; }
.cp-repo__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cp-repo__error { margin: var(--space-1) 0 0; color: var(--warn-text); }
.cp-control { display: grid; grid-template-columns: minmax(6rem, auto) 1fr; gap: 2px var(--space-3); padding: var(--space-2) 0; overflow-wrap: anywhere; }
.cp-control__id { font-family: var(--font-mono, monospace); font-size: 0.8125rem; grid-row: span 3; }
.cp-control__title { font-weight: 600; }
.cp-control__fix { font-size: 0.875rem; }
@media (max-width: 600px) {
  .cp-control { grid-template-columns: 1fr; }
  .cp-control__id { grid-row: auto; }
  .cp-summary__action { margin-left: 0; }
}

/* ---- project tabs and the Compliance tab (pages/project_dashboard.rs, compliance_charts.rs) ---- */
.pd .mc-tabs { margin-bottom: var(--space-4); }
.pd-tabpanel { display: grid; gap: var(--space-4); min-width: 0; }
.cp-glance { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.cp-glance .pd-section { margin: 0; }
.cp-glance__go { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-1); }
.cp-graphics { display: grid; gap: var(--space-4); min-width: 0; }
.cp-graphics__hero { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-4); }
.cp-score__body { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.cp-breakdown { display: grid; gap: var(--space-1); margin: 0; min-width: 10rem; }
.cp-breakdown div { display: flex; justify-content: space-between; gap: var(--space-3); }
.cp-breakdown dt { color: var(--ink-muted); }
.cp-breakdown dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.cp-matrix__table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.cp-matrix__table th, .cp-matrix__table td { padding: var(--space-2); border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.cp-matrix__table thead th { font-weight: 600; color: var(--ink-muted); white-space: nowrap; }
.cp-matrix__table tbody th { font-weight: 600; overflow-wrap: anywhere; }
.cp-top__list { list-style: none; margin: 0; padding: 0; }
.cp-top__item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-2) 0; }
.cp-top__item + .cp-top__item { border-top: 1px solid var(--border); }
.cp-top__text { display: grid; flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.cp-fix { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); font-size: 0.75rem; font-weight: 600; white-space: nowrap; color: var(--ink-muted); }
.cp-fix--pr { color: var(--viz-status-good); border-color: currentColor; }
.cp-fix--patch { color: var(--ink); border-color: currentColor; }
.cp-fix--dep { color: var(--warn-text); background: var(--warn-wash); border-color: transparent; }
.cp-control__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cp-control__cli summary { cursor: pointer; font-size: 0.8125rem; color: var(--ink-muted); }
.cp-control__cli code { display: block; margin-top: var(--space-1); font-size: 0.8125rem; overflow-wrap: anywhere; }
.cp-repo__delivery { margin: var(--space-1) 0 0; }
.cp-fixes__title { margin-top: var(--space-4); }
.cp-fixes { list-style: none; margin: 0; padding: 0; }
.cp-fixes__item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-2) 0; }
.cp-fixes__item + .cp-fixes__item { border-top: 1px solid var(--border); }
.cp-fixes__what { display: grid; flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .cp-graphics__hero { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .cp-glance__go { margin-left: 0; }
}

/* ---- regulations by country (pages/project_regulations.rs) ---- */
.rg-body { margin-top: var(--space-3); }
.rg-countries { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--space-2); }
.rg-country { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: 8px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rg-country--open, .rg-country:hover { border-color: currentColor; }
.rg-detail { margin-bottom: var(--space-3); }
.rg-reg { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rg-evidence { margin: var(--space-1) 0 0; padding-left: var(--space-4); font-size: 0.8125rem; overflow-wrap: anywhere; grid-column: 2; }
.rg-found { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-3); margin: var(--space-3) 0; font-size: 0.875rem; }
.rg-found dt { color: var(--muted, inherit); font-weight: 600; }
.rg-found dd { margin: 0; overflow-wrap: anywhere; }
.rg-form { display: grid; gap: var(--space-2); }
.rg-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.rg-chip { padding: 2px 10px; border: 1px solid var(--border); border-radius: 999px; background: none; color: inherit; font: inherit; font-size: 0.8125rem; cursor: pointer; }
.rg-chip[aria-pressed="true"] { background: var(--fizz-wash, var(--warn-wash)); border-color: currentColor; font-weight: 600; }
.rg-chip:disabled { cursor: default; opacity: 0.7; }
.rg-sliders { display: grid; gap: var(--space-3); }
.rg-declarations { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--space-2) var(--space-4); }
.rg-area { display: grid; gap: var(--space-1); }
.rg-area textarea { width: 100%; min-height: 5rem; font: inherit; font-family: var(--font-mono, monospace); font-size: 0.8125rem; padding: var(--space-2); border: 1px solid var(--border); border-radius: 6px; background: transparent; color: inherit; }
.rg-db-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--space-2); align-items: center; }
@media (max-width: 600px) {
  .rg-found { grid-template-columns: 1fr; }
  .rg-evidence { grid-column: 1; }
}
.cp-control--unchecked .cp-control__title { color: var(--ink-muted); font-weight: 500; }