/* ── shared lens patterns: one header, one table, one set of states ── */

/* page header (every lens) */
.lens { padding-bottom: 40px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gap); padding: 28px 0 18px; }
.page-title { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3vw, 32px); letter-spacing: -0.025em; line-height: 1.1; }
.page-scope { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2px; margin-top: 6px; font-size: 14px; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.page-scope b { color: var(--fg); font-weight: 600; }
.page-scope .sep { margin: 0 8px; color: var(--fg-faint); }
.vs-prev { cursor: help; text-decoration: underline dotted color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 3px; }
.page-act { flex-shrink: 0; }
.page-act:empty { display: none; }

/* the row under the header: lens switch / search + contextual hint */
.lens-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: var(--gap); }
.lens-hint { font-size: 12.5px; color: var(--fg-faint); }
.card-hint { display: block; font-size: 12px; color: var(--fg-faint); margin-top: 2px; }
.foot-note { margin-top: 12px; font-size: 12px; color: var(--fg-faint); max-width: 760px; }

.search { display: flex; align-items: center; gap: 9px; flex: 1 1 280px; max-width: 460px; height: 38px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); color: var(--fg-faint); }
.search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--fg); font-size: 14px; }
.search input:focus { outline: none; }
.pills { display: flex; gap: 6px; flex-wrap: wrap; }

/* inline alert (refresh failures) */
.alert { display: flex; align-items: center; gap: 10px; padding: 11px 14px; margin-bottom: var(--gap); border-radius: var(--r-sm); font-size: 13.5px; color: var(--fg); background: var(--crit-tint); border: 1px solid color-mix(in srgb, var(--crit) 40%, transparent); }
.alert svg { color: var(--crit); }
.alert button { margin-left: auto; }

/* empty / error state */
.state { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 56px 20px; text-align: center; color: var(--fg-muted); }
.state svg { color: var(--fg-faint); }
.state b { color: var(--fg); font-size: 15px; }
.state span { font-size: 13px; }
.state .btn-secondary { margin-top: 8px; }

/* skeletons */
.skel { display: block; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--raised) 25%, color-mix(in srgb, var(--raised) 60%, var(--line-2)) 37%, var(--raised) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.skel-rows { padding: 8px 0; }
.skel-row { height: 40px; margin: 8px var(--pad); }
.skel-chart { height: 180px; margin: 8px 8px 0; }
.skel-kpi { height: 96px; }

/* status / severity mark: a dot and a word, colour carries meaning */
.mark { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--fg-muted); white-space: nowrap; }
.mark i { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-faint); flex-shrink: 0; }
.mark.crit i { background: var(--crit); } .mark.warn i { background: var(--warn); } .mark.pos i { background: var(--pos); }
.mark.crit { color: var(--fg); }

/* ── the one table (Complaints list, Accountability ranking) ── */
.tbl-card { overflow: hidden; transition: opacity 0.2s var(--ease); }
.tbl-card.is-loading { opacity: 0.6; }
.tbl-scroll { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--fg-faint); padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl th:first-child, .tbl td:first-child { padding-left: var(--pad); }
.tbl th:last-child, .tbl td:last-child { padding-right: var(--pad); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl th.num { text-align: right; }
.tbl tbody tr { transition: background 0.12s; }
.tbl tbody tr:hover { background: var(--raised); }
.tbl tbody tr.is-sel { background: var(--brand-tint); box-shadow: inset 3px 0 0 var(--brand); }
.th-sort { display: inline-flex; align-items: center; gap: 3px; color: inherit; }
.th-sort:hover, .th-sort.on { color: var(--fg); }

/* clickable rows (Complaints) */
.tbl-rows tbody tr { cursor: pointer; }
.tbl-rows tbody tr:focus-visible { box-shadow: inset 3px 0 0 var(--brand); border-radius: 0; }
.c-id a { font-family: var(--mono); font-size: 12px; color: var(--fg-muted); white-space: nowrap; }
.c-date { white-space: nowrap; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.c-two { max-width: 380px; }
.c-two b { display: block; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-two small { display: block; font-size: 11.5px; color: var(--fg-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cap { text-transform: capitalize; }

/* ranked rows (Accountability) */
.c-rank { width: 44px; color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.c-owner { min-width: 220px; }
.owner { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.owner b { font-weight: 600; font-size: 13.5px; }
.owner small { font-size: 11.5px; color: var(--fg-faint); }
.owner:hover b { color: var(--brand-hi); }
:root[data-theme='light'] .owner:hover b { color: var(--brand-deep); }
.row-go { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--brand-hi); }
:root[data-theme='light'] .row-go { color: var(--brand-deep); }
.row-go:hover { text-decoration: underline; }
.c-bar { min-width: 150px; }
.c-bar > * { vertical-align: middle; }
.c-bar .bar { display: inline-block; width: calc(100% - 44px); max-width: 140px; height: 6px; border-radius: 99px; background: var(--sunken); overflow: hidden; margin-right: 8px; }
.c-bar .bar i { display: block; height: 100%; border-radius: 99px; background: var(--warn); }
.c-issue { color: var(--fg-muted); max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl tr.is-zero td { color: var(--fg-faint); }
.tbl tr.is-zero .owner b { color: var(--fg-muted); }

.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px var(--pad); font-size: 12.5px; color: var(--fg-muted); border-top: 1px solid var(--line); }
.pager:empty { display: none; }
.pager-nav { display: flex; align-items: center; gap: 10px; }
.flip { display: inline-flex; transform: rotate(180deg); }

/* modal layer (the complaint drawer) */
.overlay { position: fixed; inset: 0; z-index: 400; display: flex; justify-content: flex-end; background: rgba(3, 8, 10, 0.55); backdrop-filter: blur(3px); }