/* Page styles owned by the admin-platform screens (users, settings, sync, audit, calendar).
   Tokens only (tokens.css) — light, dark and high-contrast come for free. Class prefix: ap-. */

/* ── Shared ─────────────────────────────────────────────────────────────────────────────────── */
.ap-page { --ap-gap: var(--space-6); }
.ap-cell-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.ap-sub { font-size: var(--fs-xs); color: var(--text-muted); }
.ap-off { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-sm); color: var(--text-muted); }
.ap-pad { padding: var(--space-4) var(--space-5); }
.ap-link { color: var(--primary-text); font-weight: var(--fw-medium); text-decoration: none; }
.ap-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.ap-linkbtn {
  padding: 0; border: 0; background: none; font: inherit; font-weight: var(--fw-medium); color: var(--text);
  cursor: pointer; text-align: start;
}
.ap-linkbtn:hover { color: var(--primary-text); text-decoration: underline; text-underline-offset: 3px; }
.ap-row--muted > td, .ap-row--muted.table-card { opacity: .62; }
.ap-row-actions { display: inline-flex; gap: var(--space-1); }

/* Role chip */
.ap-role {
  --ap-c: var(--stage-cancelled); --ap-soft: var(--stage-cancelled-soft); --ap-text: var(--stage-cancelled-text);
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 9px; border-radius: var(--radius-pill);
  background: var(--ap-soft); color: var(--ap-text); font-size: var(--fs-xs); font-weight: var(--fw-semibold); white-space: nowrap;
  line-height: 1.4;
}
.ap-role .icon { color: var(--ap-c); }
.ap-role--sm { padding: 1px 8px 1px 7px; font-size: var(--fs-2xs); }
.ap-role--admin { --ap-c: var(--stage-assigned); --ap-soft: var(--stage-assigned-soft); --ap-text: var(--stage-assigned-text); }
.ap-role--client { --ap-c: var(--stage-pending); --ap-soft: var(--stage-pending-soft); --ap-text: var(--stage-pending-text); }
.ap-role--courier { --ap-c: var(--stage-served); --ap-soft: var(--stage-served-soft); --ap-text: var(--stage-served-text); }
.ap-role--lawyer { --ap-c: var(--stage-in_progress); --ap-soft: var(--stage-in_progress-soft); --ap-text: var(--stage-in_progress-text); }

/* Sector chip */
.ap-sector { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); white-space: nowrap; }
.ap-sector__mark { width: 10px; height: 10px; border-radius: 3px; background: var(--ap-sector, var(--text-muted)); box-shadow: 0 0 0 2px var(--surface); flex-shrink: 0; }
.ap-sector--jewish { --ap-sector: var(--primary); }
.ap-sector--muslim { --ap-sector: var(--stage-served); }
.ap-sector--druze { --ap-sector: var(--stage-draft); }
.ap-sector--christian { --ap-sector: var(--stage-in_progress); }
.ap-sector--all { --ap-sector: var(--text-subtle); }

/* ── Users ──────────────────────────────────────────────────────────────────────────────────── */
.ap-user { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.ap-user__text { min-width: 0; }
.ap-user__name { font-weight: var(--fw-semibold); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.ap-user__email { font-size: var(--fs-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.ap-generated {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--primary); border-radius: var(--radius-md); background: var(--primary-soft); color: var(--primary-text);
}
.ap-generated__value { font-size: var(--fs-md); font-weight: var(--fw-semibold); letter-spacing: .04em; color: var(--text); word-break: break-all; }

/* ── Settings ───────────────────────────────────────────────────────────────────────────────── */
.ap-settings__layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.ap-settings__nav { position: sticky; top: calc(var(--topbar-h) + var(--space-5)); }
.ap-settings__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ap-nav-item {
  display: flex; align-items: center; gap: var(--space-3); padding: 9px var(--space-3); border-radius: var(--radius-md);
  color: var(--text-muted); font-weight: var(--fw-medium); font-size: var(--fs-sm); text-decoration: none;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.ap-nav-item .icon { flex-shrink: 0; }
.ap-nav-item:hover { background: var(--surface-2); color: var(--text); }
.ap-nav-item.is-active { background: var(--primary-soft); color: var(--primary-text); }
.ap-nav-item__dirty { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 3px var(--warning-soft); }
.ap-nav-skel { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); }

.ap-group { scroll-margin-top: calc(var(--topbar-h) + var(--space-5)); overflow: visible; }
.ap-group__head {
  display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}
.ap-group__icon {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius-lg); flex-shrink: 0;
  background: var(--primary-soft); color: var(--primary-text);
}
.ap-group__title { font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: var(--lh-tight); outline: none; }
.ap-group__desc { margin-top: var(--space-1); font-size: var(--fs-sm); color: var(--text-muted); max-width: 64ch; }
.ap-group__body { padding: var(--space-2) var(--space-6) var(--space-6); }
.ap-sec { padding-top: var(--space-5); }
.ap-sec + .ap-sec { margin-top: var(--space-5); border-top: 1px solid var(--border-subtle); }
.ap-sec__title {
  margin-bottom: var(--space-4); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-muted);
  letter-spacing: .02em;
}
.ap-sec__grid { gap: var(--space-5) var(--space-6); }
.ap-sec__grid + .ap-sec__switches { margin-top: var(--space-5); }
.ap-sec__switches { display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-2); }
.ap-sec__switches .ap-set--bool { padding: var(--space-3) var(--space-4); }
.ap-sec__switches .ap-set--bool + .ap-set--bool { border-top: 1px solid var(--border-subtle); }
.ap-set { min-width: 0; }
.ap-set .field__error { margin-top: var(--space-2); }
.ap-time { max-width: 160px; }
.ap-restore {
  display: inline-flex; align-items: center; gap: 5px; margin-top: var(--space-1-5); padding: 0; border: 0; background: none;
  font: inherit; font-size: var(--fs-xs); color: var(--primary-text); cursor: pointer;
}
.ap-restore:hover { text-decoration: underline; text-underline-offset: 3px; }

.ap-tiers__scroll { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.ap-tiers__table { width: 100%; border-collapse: collapse; min-width: 620px; }
.ap-tiers__table th, .ap-tiers__table td { padding: var(--space-2-5, 10px) var(--space-3); text-align: start; vertical-align: middle; }
.ap-tiers__table thead th { background: var(--surface-2); border-bottom: 1px solid var(--border-subtle); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.ap-tiers__table tbody tr + tr > * { border-top: 1px solid var(--border-subtle); }
.ap-tiers__th { display: block; }
.ap-tiers__sub { display: block; font-size: var(--fs-2xs); font-weight: var(--fw-regular); color: var(--text-muted); }
.ap-tiers__table .ap-tiers__input { width: 96px; text-align: center; font-variant-numeric: tabular-nums; }
.ap-tiers__start { color: var(--text-muted); font-size: var(--fs-sm); font-style: italic; }
.ap-tiers__note { margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--text-muted); max-width: 80ch; }
.ap-tiers .field__error { margin-top: var(--space-2); }

.ap-secret, .ap-testmail__head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.ap-secret { padding: var(--space-3) var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.ap-secret + .ap-secret { margin-top: var(--space-3); }
.ap-secret__icon {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-md); flex-shrink: 0;
  background: var(--surface-sunken); color: var(--text-muted);
}
.ap-secret__text { flex: 1 1 220px; min-width: 0; }
.ap-secret__label { font-weight: var(--fw-semibold); }
.ap-secret__hint { font-size: var(--fs-sm); color: var(--text-muted); }
.ap-secret__actions { display: flex; gap: var(--space-2); }
.ap-testmail { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-2); border: 1px solid var(--border-subtle); }
.ap-testmail__row { display: flex; gap: var(--space-2); align-items: flex-start; }
.ap-testmail__row .field { flex: 1 1 auto; max-width: 420px; }
.ap-testmail p { display: flex; align-items: center; gap: var(--space-1-5); }

.ap-savebar { justify-content: flex-end; }
.ap-savebar__text { display: inline-flex; align-items: center; gap: var(--space-2); margin-inline-end: auto; font-weight: var(--fw-medium); color: var(--warning-text); }

/* ── Database ───────────────────────────────────────────────────────────────────────────────── */
.ap-problems { margin: 0; padding-inline-start: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); }
.ap-error-text { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--danger-text); word-break: break-word; }

.ap-tables td { vertical-align: top; }
.ap-tables td:first-child { display: table-cell; white-space: nowrap; }
.ap-tables td:first-child .icon { margin-inline-end: var(--space-2); vertical-align: -2px; }
.ap-tables__group th {
  background: var(--surface-sunken); color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  text-align: start; padding-block: var(--space-1-5, 6px);
}
.ap-tables tr.is-clickable { cursor: pointer; }
.ap-tables tr.is-clickable:hover td { background: var(--surface-hover, var(--surface-sunken)); }
.ap-tables tr.is-clickable:focus-visible { outline: 2px solid var(--focus-ring, var(--primary)); outline-offset: -2px; }

.ap-sources { list-style: none; margin: 0; padding: 0; }
.ap-source { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-5); }
.ap-source + .ap-source { border-top: 1px solid var(--border-subtle); }
.ap-source__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--primary-text); flex-shrink: 0; }
.ap-source__name { font-weight: var(--fw-semibold); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.ap-source__text { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; }
.ap-source__path { margin-top: 2px; overflow-wrap: anywhere; direction: ltr; text-align: end; }

.ap-data__scroll { overflow-x: auto; max-width: 100%; }
.ap-data__scroll table td, .ap-data__scroll table th { white-space: nowrap; }

.ap-sheets { width: 100%; }
.ap-sheets td:first-child { display: flex; align-items: center; gap: var(--space-2); }
.ap-sheets__icon { color: var(--success); }

.ap-facts { margin: 0; display: flex; flex-direction: column; }
.ap-facts > div { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-2-5, 10px) 0; }
.ap-facts > div + div { border-top: 1px solid var(--border-subtle); }
.ap-facts dt { color: var(--text-muted); font-size: var(--fs-sm); flex-shrink: 0; }
.ap-facts dd { margin: 0; text-align: end; font-size: var(--fs-sm); font-weight: var(--fw-medium); min-width: 0; overflow-wrap: anywhere; }
.ap-jobs, .ap-services { list-style: none; margin: 0; padding: 0; }
.ap-job { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); }
.ap-job + .ap-job { border-top: 1px solid var(--border-subtle); }
.ap-job__name { font-weight: var(--fw-medium); font-size: var(--fs-sm); }
.ap-job__meta { font-size: var(--fs-xs); color: var(--text-muted); }
.ap-services { display: flex; flex-direction: column; gap: var(--space-2); }
.ap-disclosure > summary {
  cursor: pointer; width: fit-content; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--primary-text);
  border-radius: var(--radius-xs);
}
.ap-disclosure > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.ap-disclosure[open] > summary { margin-bottom: var(--space-3); }
.ap-services li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-sm); }

/* ── Audit ──────────────────────────────────────────────────────────────────────────────────── */
.ap-daterange { display: inline-flex; align-items: center; gap: var(--space-1-5); color: var(--text-muted); }
.ap-daterange .input { width: 148px; min-width: 0; }
.ap-range-error { margin-top: calc(-1 * var(--space-2)); margin-bottom: var(--space-3); }
.ap-col-details { min-width: 260px; max-width: 460px; }
.ap-details { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.ap-details__summary { font-size: var(--fs-sm); color: var(--text-muted); overflow-wrap: anywhere; }
.ap-details__list { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--space-3); font-size: var(--fs-sm); }
.ap-details__list > div { display: contents; }
.ap-details__list dt { color: var(--text-muted); white-space: nowrap; }
.ap-details__list dd { margin: 0; overflow-wrap: anywhere; }
.ap-expand {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--primary-text);
}
.ap-expand:hover { text-decoration: underline; text-underline-offset: 3px; }
.ap-chip { gap: var(--space-1-5); padding-inline-end: 4px; }
.ap-chip__x {
  display: grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 50%; padding: 0;
  background: transparent; color: inherit; cursor: pointer;
}
.ap-chip__x:hover { background: var(--primary-soft-2, var(--surface-sunken)); }

/* ── Calendar ───────────────────────────────────────────────────────────────────────────────── */
.ap-cal-card { overflow: hidden; }
.ap-cal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-5) var(--space-6) var(--space-3); }
.ap-cal-head__title { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.ap-cal-head__range { font-size: var(--fs-sm); color: var(--text-muted); }
.ap-cal-nav { display: inline-flex; align-items: center; gap: var(--space-1); }
.ap-cal-tabs > .tabs__list { padding-inline: var(--space-6); }
.ap-cal-tabs > .tabs__panel { outline-offset: -2px; }
.ap-cal-body { padding: var(--space-4) var(--space-6) var(--space-5); }
.ap-cal-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-4); }
.ap-cal-summary { font-size: var(--fs-sm); color: var(--text-muted); }
.ap-cal-summary strong { color: var(--text); }
.ap-cal-foot { display: flex; align-items: flex-start; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); font-size: var(--fs-xs); color: var(--text-muted); }
.ap-cal-foot .icon { margin-top: 1px; }

.ap-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.ap-legend__item { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); }
.ap-legend__item.is-off { color: var(--text-subtle); }
.ap-legend__item.is-off .ap-legend__swatch { opacity: .45; }
.ap-legend__swatch { position: relative; display: inline-block; width: 22px; height: 12px; border-radius: 4px; }
.ap-legend__off { font-size: var(--fs-xs); }

.ap-tl { --ap-label-w: 64px; display: flex; flex-direction: column; }
.ap-tl__axis, .ap-tl__day { display: grid; grid-template-columns: var(--ap-label-w) minmax(0, 1fr); align-items: center; gap: var(--space-3); }
.ap-tl__axis { margin-bottom: var(--space-1); }
.ap-tl__ticks { position: relative; height: 18px; }
.ap-tl__tick {
  position: absolute; top: 0; transform: translateX(50%); font-size: var(--fs-2xs); color: var(--text-subtle);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ap-tl__tick:first-child { transform: none; }
.ap-tl__tick:last-child { transform: translateX(100%); }
.ap-tl__days { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.ap-tl__day { min-height: 28px; }
.ap-tl__label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-1); font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
.ap-tl__wd { font-weight: var(--fw-semibold); color: var(--text); }
.ap-tl__day.is-weekend .ap-tl__wd { color: var(--stage-assigned-text); }
.ap-tl__day.is-today .ap-tl__label { color: var(--primary-text); }
.ap-tl__day.is-today .ap-tl__wd { color: var(--primary-text); }
.ap-tl__track {
  position: relative; height: 26px; border-radius: 7px; background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border-subtle); overflow: hidden;
}
.ap-tl__day.is-today .ap-tl__track { outline: 2px solid var(--primary); outline-offset: 1px; }
.ap-tl__grid { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border-subtle); }
.ap-tl__seg {
  position: absolute; top: 3px; bottom: 3px; display: flex; align-items: center; justify-content: center; overflow: hidden;
  border-radius: 5px; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); line-height: 1; white-space: nowrap;
}
.ap-tl__seg.is-cont-start { border-start-start-radius: 0; border-end-start-radius: 0; }
.ap-tl__seg.is-cont-end { border-start-end-radius: 0; border-end-end-radius: 0; }
.ap-tl__seg-text { padding-inline: var(--space-2); overflow: hidden; text-overflow: ellipsis; }
.ap-tl__seg--shabbat { background: var(--stage-assigned-soft); color: var(--stage-assigned-text); box-shadow: inset 0 0 0 1px var(--stage-assigned); }
.ap-tl__seg--holiday { background: var(--stage-in_progress-soft); color: var(--stage-in_progress-text); box-shadow: inset 0 0 0 1px var(--stage-in_progress); }
.ap-tl__seg--muslim_holiday { background: var(--stage-served-soft); color: var(--stage-served-text); box-shadow: inset 0 0 0 1px var(--stage-served); }
.ap-tl__seg--override {
  background-color: var(--danger-soft); color: var(--danger-text); box-shadow: inset 0 0 0 1px var(--danger);
  background-image: repeating-linear-gradient(-45deg, transparent 0 6px, var(--surface-overlay) 6px 8px);
}
.ap-tl__seg--hours {
  top: 0; bottom: 0; border-radius: 0; box-shadow: none;
  background-image: repeating-linear-gradient(45deg, var(--border) 0 1.5px, transparent 1.5px 6px);
  background-color: var(--surface-sunken);
}
.ap-legend__swatch.ap-tl__seg--hours { border-radius: 4px; box-shadow: inset 0 0 0 1px var(--border); }
.ap-tl__now { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-inline-start: -1px; background: var(--danger); border-radius: 2px; z-index: 1; }
.ap-tl__now::before { content: ''; position: absolute; top: 0; inset-inline-start: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }

.ap-sector-edit { display: flex; align-items: center; gap: var(--space-2); }
.ap-sector-edit .input { min-width: 150px; }
.ap-holiday-summary {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-2);
  border: 1px solid var(--border-subtle); font-size: var(--fs-sm); color: var(--text);
}

/* ── Responsive ─────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ap-modes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1023.98px) {
  .ap-settings__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .ap-settings__nav {
    position: sticky; top: var(--topbar-h); z-index: var(--z-sticky); margin-inline: calc(-1 * var(--page-pad));
    padding: var(--space-2) var(--page-pad); background: var(--surface-overlay);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle);
  }
  .ap-settings__nav ul { flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: var(--space-1); }
  .ap-settings__nav ul::-webkit-scrollbar { display: none; }
  .ap-nav-item { white-space: nowrap; padding: 7px var(--space-3); }
  .ap-nav-item .grow { flex: none; }
}
@media (max-width: 767.98px) {
  .ap-group__head { padding: var(--space-4); gap: var(--space-3); }
  .ap-group__icon { width: 36px; height: 36px; }
  .ap-group__body { padding: 0 var(--space-4) var(--space-5); }
  .card.ap-sync-hero { flex-direction: column; align-items: stretch; gap: var(--space-4); padding: var(--space-5); }
  .ap-sync-hero__main { width: 100%; }
  .ap-sync-hero__icon { width: 52px; height: 52px; }
  .ap-sync-hero__title { font-size: var(--fs-xl); }
  .ap-path { display: flex; }
  .ap-testmail__row { flex-direction: column; align-items: stretch; }
  .ap-testmail__row .field { max-width: none; }
  .ap-cal-head, .ap-cal-body { padding-inline: var(--space-4); }
  .ap-cal-tabs > .tabs__list { padding-inline: var(--space-4); overflow-x: auto; }
  .ap-tl { --ap-label-w: 46px; }
  .ap-tl__label { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.15; }
  .ap-tl__tick:nth-child(even) { display: none; }
  .ap-tl__seg-text { display: none; }
  .ap-daterange { width: 100%; }
  .ap-daterange .input { flex: 1; width: auto; }
  .ap-col-details { min-width: 0; }
  .ap-savebar__text span { font-size: var(--fs-sm); }
}

/* ── Security screen ──────────────────────────────────────────────────────────────────────── */
.sec-hero { display: flex; gap: var(--space-6); align-items: center; padding: var(--space-6); border-inline-start: 4px solid var(--border); }
.sec-hero--success { border-inline-start-color: var(--success); }
.sec-hero--warning { border-inline-start-color: var(--warning); }
.sec-hero--danger { border-inline-start-color: var(--danger); }
.sec-grade { display: grid; place-items: center; width: 92px; height: 92px; border-radius: var(--radius-xl); flex-shrink: 0; background: var(--surface-sunken); }
.sec-grade.is-success { background: var(--success-soft); color: var(--success-text, var(--success)); }
.sec-grade.is-warning { background: var(--warning-soft); color: var(--warning-text, var(--warning)); }
.sec-grade.is-danger { background: var(--danger-soft); color: var(--danger-text, var(--danger)); }
.sec-grade__g { font-size: 42px; font-weight: var(--fw-bold); line-height: 1; }
.sec-grade__s { font-size: var(--fs-xs); font-weight: var(--fw-semibold); margin-top: 2px; }
.sec-hero__main { flex: 1; min-width: 0; }
.sec-hero__eyebrow { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
.sec-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.sec-chip { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: var(--fs-sm); background: var(--surface-sunken); border: 1px solid var(--border-subtle); }
.sec-chip b { font-size: var(--fs-md); }
.sec-chip.is-danger { background: var(--danger-soft); color: var(--danger-text, var(--danger)); border-color: transparent; }
.sec-chip.is-warning { background: var(--warning-soft); color: var(--warning-text, var(--warning)); border-color: transparent; }
.sec-chip.is-info { background: var(--info-soft, var(--primary-soft)); color: var(--info-text, var(--primary-text)); border-color: transparent; }
.sec-chip.is-success { background: var(--success-soft); color: var(--success-text, var(--success)); border-color: transparent; }
.sec-chip.is-zero { opacity: .55; }
.sec-hero__note { margin-top: var(--space-3); color: var(--text-muted); font-size: var(--fs-sm); }

.sec-group { }
.sec-group__title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-lg); font-weight: var(--fw-bold); margin: 0 0 var(--space-3); }
.sec-finding { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-4); background: var(--surface); border-inline-start: 3px solid var(--border); }
.sec-finding.is-danger { border-inline-start-color: var(--danger); }
.sec-finding.is-warning { border-inline-start-color: var(--warning); }
.sec-finding.is-success { border-inline-start-color: var(--success); }
.sec-finding.is-neutral { border-inline-start-color: var(--text-subtle); }
.sec-finding__head { display: flex; gap: var(--space-3); align-items: flex-start; }
.sec-finding__icon { color: var(--text-muted); margin-top: 1px; }
.sec-finding.is-danger .sec-finding__icon { color: var(--danger); }
.sec-finding.is-warning .sec-finding__icon { color: var(--warning); }
.sec-finding.is-success .sec-finding__icon { color: var(--success); }
.sec-finding__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-weight: var(--fw-semibold); }
.sec-finding__cat { font-size: var(--fs-xs); color: var(--text-subtle); margin-top: 1px; }
.sec-finding__detail { margin: var(--space-2) 0 0; color: var(--text); font-size: var(--fs-sm); line-height: var(--lh-relaxed); }
.sec-finding__evidence { margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--text-muted); word-break: break-all; }
.sec-remedy, .sec-ai { margin-top: var(--space-3); }
.sec-remedy__label, .sec-ai__label { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-muted); margin-bottom: 4px; }
.sec-ai { border-top: 1px dashed var(--border-subtle); padding-top: var(--space-3); }
.sec-ai__label { color: var(--primary-text); }
.sec-ai__text { margin: 0 0 var(--space-2); font-size: var(--fs-sm); line-height: var(--lh-relaxed); }
.sec-code { direction: ltr; text-align: left; background: var(--code-bg, #0f172a); color: var(--code-fg, #e2e8f0); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.5; white-space: pre-wrap; word-break: break-word; margin: 0; }
.sec-ai-card .sec-steps { margin: var(--space-3) 0; padding-inline-start: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--fs-sm); }
.sec-ai-meta { display: flex; flex-wrap: wrap; gap: 4px var(--space-2); font-size: var(--fs-sm); color: var(--text-muted); }
.sec-ai-bar { height: 6px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; margin-top: var(--space-2); }
.sec-ai-bar span { display: block; height: 100%; background: var(--primary); }
.sec-ai-bar span.is-high { background: var(--danger); }
.sec-ai-summary { margin-top: var(--space-3); padding: var(--space-3); background: var(--primary-soft); border-radius: var(--radius-md); font-size: var(--fs-sm); display: flex; gap: 6px; align-items: baseline; }
.sec-mon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.sec-mon { padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-sunken); border: 1px solid var(--border-subtle); }
.sec-mon.is-danger { background: var(--danger-soft); border-color: transparent; }
.sec-mon.is-warning { background: var(--warning-soft); border-color: transparent; }
.sec-mon__value { font-size: var(--fs-2xl); font-weight: var(--fw-bold); }
.sec-mon__label { font-size: var(--fs-xs); color: var(--text-muted); }
.sec-ips { margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: var(--fs-sm); }
.sec-ips__label { color: var(--text-muted); }
.sec-ip { padding: 1px 8px; border-radius: 999px; background: var(--surface-sunken); border: 1px solid var(--border-subtle); }
.sec-pass > summary { cursor: pointer; font-weight: var(--fw-semibold); display: inline-flex; align-items: center; gap: 6px; padding: var(--space-2) 0; }