/* DriverHub Data Tools: only the app's own rules, on keel's tokens (--af-*). Never
   redefine a token here. Area rules go under their own heading. */

/* ---------------------------------------------------------------- shell */
.dh-target { font-size: .8rem; padding: .2rem .55rem; border-radius: 999px; border: 1px solid var(--af-line); white-space: nowrap; }
/* The header stays on one line on wide screens: the breadcrumbs and the find box give
   way (the crumbs end in an ellipsis) instead of wrapping the tools onto a second row. */
@media (min-width: 768px) {
  .header > .container-fluid { flex-wrap: nowrap; }
  .header .crumbs { flex: 0 1 auto; }
  .header .find { flex: 0 4 20rem; width: auto; min-width: 11rem; margin-left: .5rem; }
  .header .env-badge { flex: none; }
}
/* Waiting feedback (app.js "waiting"): a thin bar once a page takes 0.3 s, then a
   "Loading… Ns" note; the wait overlay with its elapsed seconds for slow writes and
   slow links. */
.nav-bar { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 3px; z-index: 3000; overflow: hidden; background: var(--af-warning-wash); }
.nav-bar::after { content: ""; position: absolute; inset: 0; width: 35%; background: var(--af-primary); animation: nav-bar 1.1s ease-in-out infinite; }
.nav-bar[hidden], .nav-note[hidden], .busy-overlay[hidden] { display: none; }
@keyframes nav-bar { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.nav-note { position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 3000; background: var(--af-primary); color: #fff; font-size: .82rem; padding: .35rem .7rem; border-radius: 999px; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); font-variant-numeric: tabular-nums; }
.busy-overlay { position: fixed; inset: 0; z-index: 3050; background: var(--af-backdrop); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.busy-card { display: flex; gap: 1.1rem; align-items: center; background: var(--af-card); color: var(--af-ink); border: 1px solid var(--af-line); border-radius: var(--af-radius); box-shadow: var(--af-menu-shadow); padding: 1.4rem 1.6rem; max-width: 34rem; }
.busy-card .spinner-border { width: 2.2rem; height: 2.2rem; color: var(--af-primary); flex: none; }
.busy-title { font-weight: 650; font-size: 1.05rem; }
.busy-detail { color: var(--af-ink-soft); font-size: .9rem; margin-top: .2rem; }
.busy-detail:empty { display: none; }
.busy-elapsed { color: var(--af-ink-faint); font-size: .8rem; margin-top: .45rem; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .nav-bar::after { animation: none; width: 100%; opacity: .6; } }
.dh-target.is-copy { color: var(--af-ink-soft); }
.writes-off { padding: .35rem 1rem; font-size: .85rem; background: var(--af-warning-wash); color: var(--af-warning-ink); border-bottom: 1px solid var(--af-warning-edge); }

/* ---------------------------------------------------------------- Samba conventions (Matt) */
/* green shading for matches; never red for "differs" */
.is-match { background: var(--af-success-wash); }
/* the padlock sits to the right of a locked value */
.locked::after { content: "\1F512"; margin-left: .25rem; font-size: .8em; opacity: .7; }
/* archived Samba people are obvious */
.archived-person { text-decoration: line-through; color: var(--af-ink-faint); }

/* ---------------------------------------------------------------- persona pieces */
/* (shared/_persona.html and the area macros: one rule each) */
/* License numbers: a mono face with a slashed zero, everywhere (Matt). */
.lic { font-family: var(--af-mono); font-variant-numeric: slashed-zero tabular-nums; letter-spacing: .01em; }
.short-id { display: block; font-family: var(--af-mono); font-size: .72rem; color: var(--af-ink-faint); }
.short-id.d-inline { display: inline; }
.blank { color: var(--af-ink-faint); font-style: italic; font-size: .85em; }
.created-at, .persona-when { font-size: .72rem; color: var(--af-ink-faint); white-space: nowrap; }
.status-code { font-size: .7rem; font-weight: 600; color: var(--af-neutral-ink); background: var(--af-neutral-wash); border: 1px solid var(--af-line); border-radius: 4px; padding: 0 .3rem; white-space: nowrap; cursor: help; }
.dh-out { margin-left: .2rem; font-size: .75em; color: var(--af-ink-faint); text-decoration: none; }
.dh-out:hover { color: var(--af-link); }
.hris-owned { font-size: .72rem; color: var(--af-info-ink); background: var(--af-info-wash); border-radius: 4px; padding: 0 .3rem; margin-left: .3rem; cursor: help; white-space: nowrap; }
.name-link, .persona-link { text-align: left; }
/* a persona's status tag, coloured by its class */
.persona-cls { font-weight: 500; background: var(--af-neutral-wash); color: var(--af-neutral-ink); border: 1px solid var(--af-neutral-edge); }
.persona-cls.is-active { background: var(--af-success-wash); color: var(--af-success-ink); border-color: var(--af-success-edge); }
.persona-cls.is-candidate { background: var(--af-info-wash); color: var(--af-info-ink); border-color: var(--af-info-edge); }
.persona-cls.is-inactive { background: var(--af-warning-wash); color: var(--af-warning-ink); border-color: var(--af-warning-edge); }
.lk-archived-tag { background: var(--af-neutral-solid); color: #fff; }
.lk-never { background: var(--af-info-wash); color: var(--af-info-ink); border: 1px solid var(--af-info-edge); }
/* copy buttons: green for a moment once copied */
[data-copy-text].is-copied { color: var(--af-success-ink); }
/* a list row that a DriverHub fix (made in its dialog) took off the list */
.row-resolved, .table > tbody > tr.row-resolved > * { --cui-table-bg: var(--af-success-wash); background-color: var(--af-success-wash); opacity: .75; }

/* ---------------------------------------------------------------- shared */
/* (integration) typed confirmations of the bulk windows (shared/_confirm.html) */
.typed-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.typed-input { width: 12rem; }

/* ---------------------------------------------------------------- company bar */
/* (companies area: shared/_company.html) the switcher, name, data age, actions, tabs */
.company-bar { margin: -.25rem 0 1rem; border-bottom: 1px solid var(--af-line); }
/* On wide screens the bar stays under the sticky header while the page scrolls (its
   tabs stay in reach); app.js keeps --header-h equal to the header's height. */
@media (min-width: 992px) {
  .company-bar { position: sticky; top: var(--header-h, 3.5rem); z-index: 1010; /* under the header (1020) and its menus */ margin: -1rem -1rem 1rem; padding: .6rem 1rem 0; background: var(--af-canvas); }
}
@media (min-width: 1200px) {
  .company-bar { margin-left: -1.5rem; margin-right: -1.5rem; padding-left: 1.5rem; padding-right: 1.5rem; }
}
.company-bar .company-name a { color: inherit; text-decoration: none; }
.company-bar .company-name a:hover { text-decoration: underline; }
.company-bar-top { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; margin-bottom: .35rem; }
.company-bar .company-name { font-size: 1.35rem; font-weight: 650; margin: 0; color: var(--af-ink); }
.company-switch { display: flex; align-items: center; gap: .3rem; width: 15rem; }
.company-switch .combo, .company-switch .form-select { width: 100%; }
.company-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .2rem .6rem; font-size: .85rem; }
.company-meta .tag { margin-left: 0; }
.samba-fresh { font-size: .8rem; color: var(--af-ink-soft); background: var(--af-inset); border: 1px solid var(--af-line); border-radius: 999px; padding: .1rem .6rem; white-space: nowrap; cursor: help; }
@media (max-width: 575.98px) { .samba-fresh { white-space: normal; border-radius: var(--af-radius-sm); } }
.dh-age { font-size: .8rem; white-space: nowrap; }
.company-actions { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: .4rem; }
.company-tabs { flex-wrap: wrap; margin-bottom: -1px; --cui-nav-link-padding-x: .45rem; gap: .1rem .25rem; }
.company-tabs .nav-link { position: relative; padding-right: .7rem; white-space: nowrap; font-size: .9rem; }
.company-tabs .tab-off { color: var(--af-ink-faint); cursor: not-allowed; }
.tab-flag { position: absolute; top: .45rem; right: .2rem; width: .45rem; height: .45rem; border-radius: 50%; }
.tab-flag.is-critical { background: var(--af-danger-solid); }
.tab-flag.is-warning { background: var(--af-warning-mark); }
.page-guide > summary { cursor: pointer; list-style: none; font-weight: 600; }
.page-guide > summary::-webkit-details-marker { display: none; }
.page-guide:not([open]) > summary { border-bottom: 0; }
.page-guide ol { padding-left: 1.25rem; margin-bottom: .25rem; }
.page-guide li + li { margin-top: .2rem; }
/* elapsed times: amber once older than a day (or the page's own limit) */
.data-age { white-space: nowrap; }
.data-age.is-stale { color: var(--af-warning-ink); background: var(--af-warning-wash); border-radius: 4px; padding: 0 .25rem; }
@media (max-width: 767.98px) {
  .company-switch { width: 100%; }
  .company-actions { margin-left: 0; }
}

/* ---------------------------------------------------------------- jobs */
/* The header's Jobs button: a count while jobs are going (live, /jobs/feed). */
.jobs-button { border: 1px solid var(--af-line); color: var(--af-ink-soft); white-space: nowrap; }
.jobs-button.is-busy { border-color: var(--af-info-edge); background: var(--af-info-wash); color: var(--af-info-ink); }
.jobs-button.is-busy i { animation: keel-pulse 1.2s ease-in-out infinite; }
.jobs-count { background: var(--af-info-mark); color: #fff; margin-left: .2rem; }
/* Outcomes read at a glance: done solid green, done with warnings solid amber, failed or
   lost solid red, cancelled yellow. */
.badge.job-status.is-ok { background: var(--af-success-solid) !important; color: #fff !important; }
.badge.job-status.is-warnings { background: var(--af-warning-mark) !important; color: var(--af-warning-on) !important; }
.badge.job-status.is-failed, .badge.job-status.is-lost { background: var(--af-danger-solid) !important; color: #fff !important; }
.job-status i { font-size: .8em; }
.job-status.is-running i { animation: keel-pulse 1.2s ease-in-out infinite; }
.job-view { display: flex; flex-direction: column; min-height: 0; gap: .5rem; }
.job-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.job-title { font-weight: 650; color: var(--af-ink); text-decoration: none; }
.job-title:hover { text-decoration: underline; }
.job-facts { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .85rem; color: var(--af-ink-soft); }
.job-facts i { color: var(--af-ink-faint); margin-right: .15rem; }
.job-facts .job-prod { color: var(--af-danger-ink); font-weight: 650; }
.job-actions { margin-left: auto; display: flex; gap: .4rem; }
.job-actions form[hidden], .job-actions a[hidden] { display: none !important; }
.job-outcome { display: flex; align-items: center; gap: .6rem; border-radius: var(--af-radius-sm); padding: .5rem .9rem; font-size: 1.05rem; font-weight: 700; border: 1px solid transparent; }
.job-outcome.is-ok { background: var(--af-success-solid); color: #fff; }
.job-outcome.is-warnings { background: var(--af-warning-mark); color: var(--af-warning-on); }
.job-outcome.is-failed, .job-outcome.is-lost { background: var(--af-danger-solid); color: #fff; }
.job-outcome.is-running { background: var(--af-info-wash); color: var(--af-info-ink); border-color: var(--af-info-edge); }
.job-outcome.is-running i { animation: keel-pulse 1.2s ease-in-out infinite; }
.job-outcome.is-queued, .job-outcome.is-waiting { background: var(--af-neutral-wash); color: var(--af-neutral-ink); border-color: var(--af-neutral-edge); }
.job-outcome.is-cancelled { background: var(--af-warning-wash); color: var(--af-warning-ink); border-color: var(--af-warning-edge); }
.job-progress[hidden] { display: none; }
.job-bar { height: .5rem; border-radius: 999px; background: var(--af-neutral-wash); overflow: hidden; }
.job-bar-fill { height: 100%; width: 0; background: var(--af-info-mark); transition: width .3s ease; }
.job-progress-cell { min-width: 8rem; }
.job-progress-cell .job-bar { height: .4rem; }
.log-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.job-log {
  background: var(--af-log-bg); color: var(--af-log-ink);
  font-family: var(--af-mono); font-size: .8rem; line-height: 1.5;
  border-radius: 10px; padding: .75rem 1rem; margin: 0;
  min-height: 14rem; max-height: 70vh; overflow: auto; white-space: pre;
}
.job-view.is-full .job-log { max-height: calc(100vh - 22rem); min-height: 10rem; }
.job-log.wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.job-log .o-stderr { color: var(--af-log-err); }
.job-log .o-system { color: var(--af-log-sys); font-style: italic; }
.job-log:focus-visible { outline: 2px solid var(--af-accent); outline-offset: 2px; }
/* The window body is a flex column (keel): its blocks keep their height and the body
   scrolls, rather than squeezing a block with overflow hidden down to its header. */
.float-window-body > * { flex-shrink: 0; }
/* A job started from an icon next to a name (shared/_jobs.html job_icon) */
.job-icon .btn { padding: 0 .3rem; line-height: 1; vertical-align: baseline; color: var(--af-ink-soft); }
.job-icon .btn:hover, .job-icon .btn:focus-visible { color: var(--af-ink); }
.float-window-body > .job-view { flex: 1; }
.float-window-body > .job-view > .job-log { flex: 1; max-height: none; min-height: 6rem; }
.job-menu { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.job-list { list-style: none; padding: 0; margin: 0; }
.job-list li { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; border-bottom: 1px solid var(--af-line-soft); }
.job-list a { color: var(--af-ink); text-decoration: none; }
.job-list a:hover { text-decoration: underline; }
.jobs-table .job-name .cell-note { max-width: 32rem; }
.schedule-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.schedule-form { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: .5rem 0 .25rem; }
.schedule-times { width: 16rem; font-family: var(--af-mono); }
.schedule-runs { list-style: none; padding: 0; margin: .35rem 0 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
@media (max-width: 991.98px) {
  .job-actions { margin-left: 0; }
}

/* ---------------------------------------------------------------- writes */
/* the webhook browser's view window: the body pretty printed, keys / strings / numbers /
   literals in their own colours (domain.webhooks.highlighted) */
.wh-view { display: flex; flex-direction: column; gap: .5rem; height: 100%; }
.wh-view-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.wh-json { flex: 1 1 auto; margin: 0; padding: .75rem 1rem; overflow: auto; max-height: 70vh; font-family: var(--af-mono); font-size: .8rem; line-height: 1.45; white-space: pre; background: var(--af-inset); border: 1px solid var(--af-line); border-radius: var(--af-radius-sm); color: var(--af-ink); }
.float-window .wh-json { max-height: none; }
.json-key { color: var(--af-navy-ink); font-weight: 600; }
.json-str { color: var(--af-success-ink); }
.json-num { color: var(--af-info-ink); }
.json-lit { color: var(--af-warning-ink); font-weight: 600; }
/* (writes area: its rules go between this line and the next heading) */
/* Change log: one readable line per change. Production DriverHub lines stand out. */
.changes-table td { vertical-align: top; }
.changes-table .chg-person { min-width: 12rem; }
.changes-table .chg-what { min-width: 22rem; }
.changes-table .chg-change { min-width: 14rem; overflow-wrap: anywhere; }
.changes-table .chg-filter { color: inherit; text-decoration: none; }
.changes-table .chg-filter:hover { text-decoration: underline; }
.changes-table .chg-prod { color: var(--af-danger-ink); font-weight: 600; }
.chg-filters .form-control { max-width: 14rem; }
/* Webhooks: the search form's fields in a row (wrapping on small screens). */
.wh-fields { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: flex-end; }
.wh-fields > div { min-width: 9rem; }
.wh-fields .wh-q { flex: 1 1 20rem; }
.wh-fields .form-label { font-size: .8rem; margin-bottom: .15rem; color: var(--af-ink-soft); }
.wh-options { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; margin-top: .6rem; font-size: .85rem; }
.wh-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; justify-content: space-between; }
.wh-table .wh-error, .wh-failed { color: var(--af-danger-ink); }
.wh-nav { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.wh-body { max-height: 70vh; overflow: auto; padding: 1rem; font-size: .8rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.wh-headers th { width: 35%; font-weight: 500; color: var(--af-ink-soft); }
.wh-headers td { overflow-wrap: anywhere; }
.wh-others .text-truncate { max-width: 22rem; }
.wh-types td:first-child { overflow-wrap: anywhere; word-break: break-all; }
.card-header > h2 { font: inherit; margin: 0; }
/* What happened behind a webhook / an MVR (webhooks/_diagnosis.html, mvr/_why.html) */
.wh-verdict { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem 1rem; border: 1px solid; border-radius: var(--af-radius-sm); }
.wh-verdict > i { font-size: 1.4rem; line-height: 1.2; }
.wh-verdict-bad { background: var(--af-danger-wash); border-color: var(--af-danger-edge); color: var(--af-danger-ink); }
.wh-verdict-ok { background: var(--af-success-wash); border-color: var(--af-success-edge); color: var(--af-success-ink); }
.wh-verdict .small { color: var(--af-ink); }
.wh-looks td, .wh-history td { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- companies */
/* (companies area: its rules go between this line and the next heading) */
.archived-row > td { background: var(--af-neutral-wash); }
.name-cell { text-align: left; }
.help-page { max-width: 62rem; }
.help-page dt { margin-top: .5rem; }
.rules-table th { white-space: normal; min-width: 10rem; }

/* Companies list */
.portfolio .co-name-col { min-width: 14rem; }
.portfolio > thead th { white-space: normal; vertical-align: bottom; }
.portfolio .attn-col { min-width: 14rem; max-width: 26rem; }
@media (min-width: 768px) { .portfolio .attn-cell { max-width: 26rem; } }
.portfolio th a { color: inherit; }
/* burnt orange: no daily automations (Matt) */
a.is-nodaily { color: color-mix(in srgb, var(--af-warning-ink) 55%, var(--af-danger-ink)); }
.perm-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin-top: .15rem; }
.co-csm { font-size: .75rem; color: var(--af-ink-soft); margin-right: .25rem; }
.perm-tag { margin-left: .2rem; font-size: .65rem; font-weight: 600; border-radius: 4px; padding: 0 .3rem; border: 1px solid; cursor: help; }
.perm-tag.is-has { color: var(--af-success-ink); background: var(--af-success-wash); border-color: var(--af-success-edge); }
.perm-tag.is-no { color: var(--af-neutral-ink); background: var(--af-neutral-wash); border-color: var(--af-neutral-edge); }
.attn-cell { display: flex; flex-wrap: wrap; gap: .25rem; text-decoration: none; }
.attn-chip { font-size: .72rem; font-weight: 600; border-radius: 999px; padding: .05rem .5rem; border: 1px solid; white-space: nowrap; }
.attn-chip.is-critical { color: var(--af-danger-ink); background: var(--af-danger-wash); border-color: var(--af-danger-edge); }
.attn-chip.is-warning { color: var(--af-warning-ink); background: var(--af-warning-wash); border-color: var(--af-warning-edge); }
.spark { vertical-align: middle; }
.delta { font-size: .75rem; font-weight: 650; margin-left: .2rem; white-space: nowrap; }
.delta.is-up, .delta-big.is-up { color: var(--af-danger-ink); }
.delta.is-down, .delta-big.is-down { color: var(--af-success-ink); }

/* Overview: problem lines, ranked */
.attn-list { display: flex; flex-direction: column; gap: .5rem; }
.attn { display: grid; grid-template-columns: 3.5rem 1fr auto; gap: .75rem; align-items: start; padding: .7rem .9rem; background: var(--af-card); border: 1px solid var(--af-line); border-left: 4px solid var(--af-neutral-edge); border-radius: var(--af-radius-sm); color: inherit; text-decoration: none; box-shadow: var(--af-shadow); }
.attn:hover { border-color: var(--af-line-strong); }
.attn.is-critical { border-left-color: var(--af-danger-solid); }
.attn.is-warning { border-left-color: var(--af-warning-mark); }
.attn.is-info { border-left-color: var(--af-info-mark); }
.attn.is-ok { border-left-color: var(--af-success-edge); }
.attn-n { font-size: 1.35rem; font-weight: 700; line-height: 1.1; text-align: right; color: var(--af-ink); }
.attn.is-critical .attn-n { color: var(--af-danger-ink); }
.attn.is-warning .attn-n { color: var(--af-warning-ink); }
.attn-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.attn-title { font-weight: 600; color: var(--af-ink); }
.attn-why { font-size: .85rem; color: var(--af-ink-soft); }
.attn-note { font-size: .8rem; color: var(--af-ink-soft); background: var(--af-inset); border-radius: 4px; padding: .1rem .4rem; }
.attn-go { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; font-size: .8rem; color: var(--af-link); white-space: nowrap; }
.attn-area { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--af-ink-faint); }
.attn-list.is-compact .attn { padding: .4rem .75rem; box-shadow: none; }
.attn-list.is-compact .attn-n { font-size: 1rem; }
.attn-list.is-compact .attn-why { display: none; }
.attn-guide { margin: .2rem 0 0 4.25rem; font-size: .85rem; }
.attn-guide.is-flush { margin-left: 0; }
.attn-guide > summary { cursor: pointer; color: var(--af-link); }
.attn-guide ol { margin: .35rem 0 .25rem; padding-left: 1.25rem; }
.attn-more > summary { cursor: pointer; }
.sev-sum { display: inline-flex; gap: .35rem; }
.glance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem; margin: 0; }
.glance div { display: flex; flex-direction: column-reverse; }
.glance dt { font-size: .78rem; font-weight: 400; color: var(--af-ink-soft); }
.glance dd { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--af-ink); }
.trend-now { display: flex; align-items: center; gap: 1rem; }
.trend-figure { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.delta-big { font-weight: 700; }
@media (max-width: 575.98px) {
  .attn { grid-template-columns: 2.5rem 1fr; }
  .attn-go { grid-column: 2; align-items: flex-start; }
  .attn-guide { margin-left: 0; }
}

/* "What to do" boxes (shared/_advice.html, every area's lists) */
.advice { border: 1px solid var(--af-line); border-left: 4px solid var(--af-neutral-edge); border-radius: var(--af-radius-sm); padding: .5rem .75rem; background: var(--af-card); font-size: .85rem; }
.advice.need-fix { border-left-color: var(--af-warning-mark); }
.advice.need-check { border-left-color: var(--af-info-mark); }
.advice.need-none, .advice.need-ready { border-left-color: var(--af-success-edge); }
.advice-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; }
.advice-title { font-weight: 600; color: var(--af-ink); }
.need-pill { font-size: .7rem; font-weight: 700; border-radius: 999px; padding: .05rem .5rem; border: 1px solid var(--af-neutral-edge); color: var(--af-neutral-ink); background: var(--af-neutral-wash); white-space: nowrap; }
.need-fix .need-pill, .need-pill.is-fix { color: var(--af-warning-ink); background: var(--af-warning-wash); border-color: var(--af-warning-edge); }
.need-check .need-pill, .need-pill.is-check { color: var(--af-info-ink); background: var(--af-info-wash); border-color: var(--af-info-edge); }
.need-none .need-pill, .need-ready .need-pill, .need-pill.is-none { color: var(--af-success-ink); background: var(--af-success-wash); border-color: var(--af-success-edge); }
.advice-compare { margin: .35rem 0; border-collapse: collapse; }
.advice-compare th { font-weight: 500; color: var(--af-ink-soft); padding: .05rem .75rem .05rem 0; text-align: left; }
.advice-compare td { padding: .05rem 0; }
.advice-detail { color: var(--af-ink-soft); margin-top: .25rem; }
.advice-steps { margin: .35rem 0 0; padding-left: 1.25rem; }
.advice-steps li + li { margin-top: .3rem; }
.advice-steps .btn { margin-left: .25rem; padding-top: .05rem; padding-bottom: .05rem; }

/* Daily Process: the checklist, the chips, the queue */
.checklist { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .5rem; }
.cu-step { display: grid; grid-template-columns: 2.5rem 1fr auto; gap: .9rem; align-items: start; padding: .8rem 1rem; background: var(--af-card); border: 1px solid var(--af-line); border-radius: var(--af-radius-sm); box-shadow: var(--af-shadow); }
.cu-step.is-todo { border-left: 4px solid var(--af-accent); }
.cu-step.is-done { border-left: 4px solid var(--af-success-edge); }
.cu-step.is-na { opacity: .7; box-shadow: none; }
.cu-step.is-next { border-style: dashed; box-shadow: none; }
.cu-mark { position: relative; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--af-inset); color: var(--af-ink-soft); border: 1px solid var(--af-line); }
.cu-step.is-todo .cu-mark { background: var(--af-accent-wash); color: var(--af-accent-ink); border-color: var(--af-accent-edge); }
.cu-step.is-done .cu-mark { background: var(--af-success-wash); color: var(--af-success-ink); border-color: var(--af-success-edge); }
.cu-tick { position: absolute; right: -.35rem; bottom: -.3rem; width: 1rem; height: 1rem; border-radius: 50%; display: grid; place-items: center; font-size: .6rem; background: var(--af-success-solid); color: #fff; }
.cu-title { font-weight: 650; color: var(--af-ink); }
.cu-detail { font-size: .9rem; }
.cu-why { font-size: .8rem; color: var(--af-ink-soft); margin-top: .2rem; }
.cu-action { display: flex; justify-content: flex-end; align-items: flex-start; min-width: 9rem; }
.cu-action .btn { white-space: nowrap; min-width: 8rem; }
.dp-chip { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; font-weight: 650; border-radius: 999px; padding: .05rem .5rem; border: 1px solid; white-space: nowrap; text-decoration: none; }
.dp-chip.is-auto { color: var(--af-info-ink); background: var(--af-info-wash); border-color: var(--af-info-edge); }
.dp-chip.is-review { color: var(--af-warning-ink); background: var(--af-warning-wash); border-color: var(--af-warning-edge); }
.dp-auto-text { color: var(--af-info-ink); }
.dp-review-text { color: var(--af-warning-ink); }
.dp-table .dp-group { border-left: 2px solid var(--af-line-strong); }
.dp-table .scale-col { color: var(--af-ink-soft); }
.dp-table .is-nodaily-row td { color: var(--af-ink-soft); }
.dp-worked { font-size: .72rem; color: var(--af-ink-faint); }
.dp-worked.is-other { color: var(--af-warning-ink); background: var(--af-warning-wash); border-radius: 4px; padding: 0 .3rem; display: inline-block; }
.hard-pile { border-color: var(--af-warning-edge); }
.catchup-all-list { max-height: 50vh; overflow: auto; }
.catchup-all tr.is-unusual > td { background: var(--af-warning-wash); }
@media (max-width: 767.98px) {
  .cu-step { grid-template-columns: 2.5rem 1fr; }
  .cu-action { grid-column: 2; justify-content: flex-start; }
}

/* Find a driver */
.find-form .form-control { max-width: 32rem; }

/* ---------------------------------------------------------------- links */
/* (links area: its rules go between this line and the next heading) */
/* Wrong links, Samba duplicates, DriverHub personas, Samba people (and their windows). */
/* the padlock box: amber, the padlock on the right (Matt) */
.locked { display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone; background: var(--af-warning-wash); border: 1px solid var(--af-warning-edge); border-radius: var(--af-radius-xs); padding: 0 .3rem; }
.row-locked > th { color: var(--af-warning-ink); }
/* names left-aligned with the same inset everywhere */
td.lk-name { min-width: 12rem; }
.lk-name { text-align: left; }
.name-block { text-align: left; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .35rem; }
/* match shading: green for the same, lighter for the only one; differences unshaded */
.is-match-only { background: var(--af-success-wash); }
/* in tables (CoreUI paints cells through --cui-table-bg): a clear green for the same,
   a wash for the only one that has it */
.table > tbody > tr > .is-match, .match-legend > .is-match { --cui-table-bg: var(--af-success-edge); background-color: var(--af-success-edge); }
.table > tbody > tr > .is-match-only, .match-legend > .is-match-only { --cui-table-bg: var(--af-success-wash); background-color: var(--af-success-wash); }
.match-legend > span { padding: 0 .35rem; border-radius: 4px; margin-right: .3rem; font-weight: 400; }
/* archived Samba people: grey rows and a dark ARCHIVED tag */
.table > tbody > tr.row-archived > * { --cui-table-bg: var(--af-neutral-wash); background-color: var(--af-neutral-wash); color: var(--af-ink-soft); }
.lk-weak { background: transparent; border: 1px dashed currentColor; }
.lk-quiet { background: var(--af-neutral-wash); color: var(--af-neutral-ink); }
.lk-good, .lk-ok { color: var(--af-success-ink); }
.lk-warn { color: var(--af-warning-ink); font-weight: 600; }
.lk-clip { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-raw { max-height: 24rem; overflow: auto; font-size: .75rem; background: var(--af-inset); border-radius: var(--af-radius-xs); padding: .5rem; }
.lk-about { font-size: .9rem; color: var(--af-ink-soft); }
.lk-about summary { cursor: pointer; color: var(--af-ink); }
.lk-about p { margin: .4rem 0; }
/* small icon buttons (pencil, copy, trash, license picture) */
.btn-icon { border: 0; background: none; padding: 0 .2rem; color: var(--af-ink-faint); line-height: 1; vertical-align: baseline; }
.btn-icon:hover, .btn-icon:focus-visible { color: var(--af-link); }
.btn-icon.lk-unlink:hover { color: var(--af-danger-ink); }
.lk-pics span { font-size: .7rem; margin-left: .1rem; }
.lk-move { white-space: nowrap; text-align: left; line-height: 1.2; }
.lk-diagnose { white-space: nowrap; }
/* duplicate clusters: each cluster one block, its lead cell carries the verdict */
.lk-clusters > tbody.lk-cluster { border-top: 2px solid var(--af-line-strong); }
.lk-clusters .cl-lead { min-width: 11rem; border-left: 4px solid var(--af-line); }
.lk-cluster.cl-danger .cl-lead { border-left-color: var(--af-danger-solid); }
.lk-cluster.cl-warning .cl-lead { border-left-color: var(--af-warning-mark); }
.lk-cluster.is-weak .cl-lead { border-left-style: dashed; }
.cl-note { max-width: 14rem; white-space: normal; }
/* the people browser's duplicate groups */
.lk-people .grp-lead { border-left: 4px solid var(--af-line); vertical-align: top; }
.lk-people .lk-grp.tone-danger .grp-lead { border-left-color: var(--af-danger-solid); }
.lk-people .lk-grp.tone-warning .grp-lead { border-left-color: var(--af-warning-mark); }
.lk-people .lk-grp.grp-start > td { border-top: 2px solid var(--af-line-strong); }
.grp-tag { display: block; font-size: .68rem; color: var(--af-ink-faint); }
.lk-filters .btn { white-space: nowrap; }
.table > tbody > tr.advice-row > td { --cui-table-bg: var(--af-canvas); background-color: var(--af-canvas); }
/* the link banner: chain icon + tone + one sentence + evidence chips */
.link-banner { display: flex; gap: .9rem; align-items: flex-start; border: 1px solid var(--af-line); border-left-width: 5px; border-radius: var(--af-radius-sm); padding: .65rem .9rem; margin-bottom: 1rem; background: var(--af-card); }
.link-banner.tone-good { border-color: var(--af-success-edge); background: var(--af-success-wash); }
.link-banner.tone-warn { border-color: var(--af-warning-edge); background: var(--af-warning-wash); }
.link-banner.tone-bad { border-color: var(--af-danger-edge); background: var(--af-danger-wash); }
.link-icon { position: relative; font-size: 1.7rem; line-height: 1; }
.tone-good .link-icon { color: var(--af-success-ink); }
.tone-warn .link-icon { color: var(--af-warning-ink); }
.tone-bad .link-icon { color: var(--af-danger-ink); }
.tone-none .link-icon { color: var(--af-ink-faint); }
.link-icon-bad { position: absolute; right: -.35rem; bottom: -.2rem; font-size: .9rem; }
.link-title { font-weight: 650; }
.link-who { font-weight: 400; }
.link-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.link-chip { font-size: .75rem; border-radius: 999px; padding: .05rem .55rem; border: 1px solid var(--af-line); background: var(--af-card); }
.link-chip.chip-good { color: var(--af-success-ink); border-color: var(--af-success-edge); }
.link-chip.chip-bad { color: var(--af-danger-ink); border-color: var(--af-danger-edge); }
.link-chip.chip-missing { color: var(--af-ink-faint); border-style: dashed; }
.link-note { font-size: .82rem; color: var(--af-ink-soft); margin-top: .25rem; }
/* strong duplicates in another group (the person page's conflicts): a red row */
.table > tbody > tr.table-danger > * { --cui-table-bg: var(--af-danger-wash); background-color: var(--af-danger-wash); color: var(--af-ink); }
/* "†": a column from the newest extract, not the live re-sync */
abbr.from-extract { text-decoration: none; cursor: help; margin-left: .1rem; }
/* the person page */
body:not(.show-api) .api-call { display: none; }
.lk-kv th { width: 34%; font-weight: 500; color: var(--af-ink-soft); }
.kv-edit { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.kv-edit .form-control, .kv-edit .form-select { max-width: 16rem; }
.lk-license { border: 1px solid var(--af-line); border-radius: var(--af-radius-sm); padding: .6rem; margin-bottom: .6rem; }
.lk-conflicts.tone-danger { border-color: var(--af-danger-edge); }
.lk-conflicts.tone-danger > .card-header { background: var(--af-danger-wash); color: var(--af-danger-ink); }
.lk-conflicts.tone-warning > .card-header { background: var(--af-warning-wash); color: var(--af-warning-ink); }
.lk-conflicts.tone-info > .card-header { background: var(--af-info-wash); color: var(--af-info-ink); }
.lic-match.lic-exact { background: var(--af-success-wash); }
.lic-match.lic-normalized { background: color-mix(in srgb, var(--af-success-wash) 45%, transparent); }
.lk-ind-list { padding-left: 1.1rem; }
.lk-ind-list li { margin-bottom: .3rem; }
.lk-ind-details summary { font-size: .8rem; color: var(--af-link); cursor: pointer; }
.mon-tick { font-size: .75rem; color: var(--af-success-ink); }
/* the diagnose windows */
.diag-h { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--af-ink-soft); margin: .5rem 0 .35rem; }
.lk-diag .diag-keep > td { --cui-table-bg: var(--af-success-wash); background-color: var(--af-success-wash); }
.lk-diag .diag-focus > td:first-child { box-shadow: inset 3px 0 0 var(--af-accent); }
.diag-findings { padding-left: 1.1rem; font-size: .88rem; }
.diag-findings .diag-danger::marker { color: var(--af-danger-solid); }
.diag-findings .diag-warning::marker { color: var(--af-warning-mark); }
.diag-findings .diag-info::marker { color: var(--af-info-mark); }
.diag-steps { padding-left: 1.2rem; font-size: .88rem; }
.diag-steps li { margin-bottom: .35rem; }
.ai-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.ai-summary { font-size: .95rem; }
.ai-diff { background: var(--af-inset); border-radius: 4px; padding: 0 .3rem; }
.ai-loading { display: flex; align-items: center; gap: .5rem; color: var(--af-ink-soft); font-size: .9rem; }
/* dialogs opened from a floating window sit above it */
.modal.lk-dialog { z-index: 3000; }

/* ---------------------------------------------------------------- monitoring */
/* (monitoring area: its rules go between this line and the next heading) */
/* Monitoring, enroll / un-enroll, Fill Samba blanks, the Samba settings window. */
.btn-pencil { display: inline-flex; align-items: center; gap: .15rem; margin-left: .25rem; font-size: .8rem; color: var(--af-ink-soft); text-decoration: none; }
.btn-pencil:hover { color: var(--af-link-hover); }
.about > summary { cursor: pointer; color: var(--af-ink-soft); font-size: .9rem; }
.about[open] > summary { margin-bottom: .35rem; }
.dash-row { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; border: 1px solid var(--af-line); border-radius: var(--af-radius-sm); text-decoration: none; color: inherit; }
.dash-row:hover { background: var(--af-inset); }
.bulk-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; border-top: 1px solid var(--af-line-soft); padding-top: .7rem; }
.filter-pills { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.btn.filter-quiet { --cui-btn-color: var(--af-ink-soft); --cui-btn-border-color: var(--af-line); font-weight: 500; }
.btn.filter-quiet:hover { --cui-btn-hover-bg: var(--af-inset); --cui-btn-hover-color: var(--af-ink); --cui-btn-hover-border-color: var(--af-line); }
.badge.quiet-count { background: var(--af-inset); color: var(--af-ink-soft); font-weight: 600; border: 1px solid var(--af-line); }
.mon-table td { vertical-align: top; }
.mon-advice-col { min-width: 22rem; }
.mon-persona { padding: .2rem 0; border-bottom: 1px dashed var(--af-line); }
.mon-persona:last-child { border-bottom: 0; }
.mon-persona.mon-weak { opacity: .8; }
.mon-persona.archived-row { background: var(--af-inset); }
.mon-reason { display: inline-block; font-size: .7rem; border: 1px dashed var(--af-line); border-radius: 4px; padding: 0 .3rem; margin: .1rem .2rem 0 0; color: var(--af-ink-soft); }
.mon-reason.mon-reason-strong { border-style: solid; color: var(--af-ink); background: var(--af-card); }
.mon-elsewhere { color: var(--af-warning-ink); }
.lic-match { border-radius: 6px; padding: .08rem .45rem; border: 1px solid transparent; }
.lic-match.is-match { border-color: var(--af-success-edge); color: var(--af-success-ink); }
.btn-move { line-height: 1.15; font-size: .72rem; }
.bulk-list { max-height: 50vh; overflow: auto; border: 1px solid var(--af-line); border-radius: var(--af-radius-sm); }
.ack-check .form-check-input { margin-top: .2rem; }
/* The Samba settings window, laid out like DriverHub's settings screen. */
.cfg-section { border: 1px solid var(--af-line); border-radius: var(--af-radius-sm); margin-bottom: .75rem; background: var(--af-card); overflow: hidden; }
.cfg-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem .75rem; background: var(--af-inset); border-bottom: 1px solid var(--af-line); }
.cfg-about { flex-basis: 100%; font-size: .78rem; color: var(--af-ink-soft); }
.cfg-table th { width: 38%; font-weight: 600; font-size: .85rem; padding-left: .75rem; }
.cfg-table td { font-size: .85rem; }
.cfg-help { font-weight: 400; font-size: .74rem; color: var(--af-ink-soft); }
.cfg-key { font-size: .7rem; color: var(--af-ink-faint); margin-top: .15rem; word-break: break-all; }
.cfg-chips { display: flex; flex-wrap: wrap; gap: .25rem; }
.cfg-chip { display: inline-block; padding: .05rem .5rem; border-radius: 999px; background: var(--af-info-wash); border: 1px solid var(--af-info-edge); font-size: .78rem; }
.cfg-chip .cfg-id { color: var(--af-ink-faint); font-family: var(--af-mono); font-size: .7rem; }
.cfg-chip.cfg-bad { background: var(--af-danger-wash); border-color: var(--af-danger-edge); color: var(--af-danger-ink); }
.cfg-chip.cfg-off { opacity: .6; text-decoration: line-through; }
.cfg-default { font-size: .7rem; color: var(--af-ink-soft); border: 1px dashed var(--af-line); border-radius: 4px; padding: 0 .3rem; }
.cfg-tag { display: inline-block; font-size: .7rem; border-radius: 4px; padding: 0 .35rem; margin-left: .2rem; white-space: nowrap; }
.cfg-tag.cfg-unstored { color: var(--af-warning-ink); background: var(--af-warning-wash); border: 1px dashed var(--af-warning-edge); }
.cfg-tag.cfg-samedefault { color: var(--af-ink-soft); border: 1px solid var(--af-line); background: var(--af-inset); }
.cfg-legend { color: var(--af-ink-soft); }

/* ---------------------------------------------------------------- mvr */
/* MVR orders tab */
.mvr-filters { margin-bottom: .5rem; gap: .35rem; flex-wrap: wrap; }
.mvr-table .mvr-what { min-width: 20rem; }
.mvr-table td { vertical-align: top; }
.mvr-dates { white-space: nowrap; }
.mvr-settings > summary { cursor: pointer; }
details.about { font-size: .875rem; color: var(--af-ink-soft); }
details.about > summary { cursor: pointer; color: var(--af-link); }
.lv-row-saved { background: var(--af-success-wash); }
/* the viewer openers (license pictures, MVR record) */
.btn-viewer { display: inline-flex; align-items: center; gap: .15rem; padding: .05rem .3rem; border: 1px solid var(--af-line); border-radius: var(--af-radius-xs); color: var(--af-ink-soft); background: var(--af-card); text-decoration: none; vertical-align: middle; line-height: 1.2; }
.btn-viewer:hover { color: var(--af-link-hover); border-color: var(--af-line-strong); }
.btn-viewer-count { font-size: .75em; }
/* bulk windows */
.mvr-bulk-list { max-height: 45vh; overflow: auto; }
/* the viewers (license pictures, MVR record): one floating window */
.lv-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.lv-nav { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.lv-edit { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .75rem; padding: .5rem .75rem; margin-bottom: .5rem; border: 1px solid var(--af-line); border-radius: var(--af-radius-sm); background: var(--af-inset); }
.lv-edit label { display: flex; flex-direction: column; font-size: .75rem; color: var(--af-ink-soft); gap: .1rem; }
.lv-edit-actions { display: flex; gap: .4rem; }
.lv-edit-status { flex-basis: 100%; }
.lv-addlic { display: flex; flex-wrap: wrap; gap: .5rem .75rem; border: 0; margin: 0; padding: 0; }
.lv-addlic legend { font-size: .8rem; font-weight: 600; margin-bottom: .1rem; }
.lv-w-state { width: 4.2rem; }
.lv-w-number { width: 11rem; }
.lv-w-ssn { width: 8.5rem; }
.lv-w-cdl { width: 5.5rem; }
.lv-empty { background: var(--af-warning-wash); }
.lv-saved { background: var(--af-success-wash); border-color: var(--af-success-edge); }
.lv-failed { border-color: var(--af-warning-edge); box-shadow: 0 0 0 2px var(--af-warning-wash); }
.lv-records { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-bottom: .5rem; }
.lv-stage { position: relative; }
.lv-item { margin: 0; }
.lv-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin-bottom: .35rem; }
.lv-sep { width: 1px; align-self: stretch; background: var(--af-line); margin: 0 .25rem; }
.lv-zoom, .lv-page { font-size: .8rem; min-width: 3.5rem; text-align: center; color: var(--af-ink-soft); }
.lv-hint { font-size: .75rem; color: var(--af-ink-faint); margin-left: auto; }
.lv-imgwrap { position: relative; height: 60vh; min-height: 16rem; overflow: hidden; background: var(--af-canvas-deep); border-radius: var(--af-radius-sm); touch-action: none; }
.float-window .lv-imgwrap { height: max(20rem, 55vh); }
.lv-img:not([src]) { visibility: hidden; }
.lv-imgwrap.zoomed { cursor: grab; }
.lv-imgwrap.dragging { cursor: grabbing; }
.lv-img { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; object-fit: contain; transform: translate(-50%, -50%); transform-origin: center; user-select: none; }
.lv-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--af-ink-soft); font-size: .875rem; }
.lv-loading[hidden] { display: none; }
.lv-file { display: grid; place-items: center; gap: .5rem; padding: 2rem; text-align: center; color: var(--af-ink-soft); background: var(--af-inset); border-radius: var(--af-radius-sm); }
.lv-file-icon { font-size: 2.5rem; }
.lv-caption { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .5rem; }
.lv-name { max-width: 28rem; }
.lv-ids { display: flex; flex-wrap: wrap; gap: .25rem 1rem; width: 100%; color: var(--af-ink-soft); }
.lv-thumbs { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.lv-thumb { width: 4rem; height: 3rem; padding: 0; border: 2px solid var(--af-line); border-radius: var(--af-radius-xs); background: var(--af-inset); overflow: hidden; display: grid; place-items: center; font-size: .7rem; color: var(--af-ink-soft); }
.lv-thumb.active { border-color: var(--af-primary); }
.lv-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lv-thumb img.rot-90 { transform: rotate(90deg); }
.lv-thumb img.rot-180 { transform: rotate(180deg); }
.lv-thumb img.rot-270 { transform: rotate(270deg); }
.lv-footnote { font-size: .75rem; }
.float-window:has(.lv) { min-width: min(48rem, 96vw); min-height: 32rem; }
/* MVR record viewer */
.mvr-ctx { padding: .4rem .6rem; margin-bottom: .5rem; border-left: 3px solid var(--af-info-edge); background: var(--af-info-wash); color: var(--af-info-ink); font-size: .85rem; }
.mvr-ctx-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }
.mvr-who { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .5rem; }
.mvr-checks { list-style: none; padding: 0; margin: 0 0 .5rem; font-size: .875rem; }
.mvr-check.is-ok { color: var(--af-success-ink); }
.mvr-check.is-warn { color: var(--af-warning-ink); }
.mvr-filed { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-bottom: .5rem; }
.mvr-notes { margin-bottom: .5rem; }
.mvr-note { padding: .25rem 0; border-bottom: 1px solid var(--af-line-soft); }
/* the Samba MVR page */
.mvr-raw { max-height: 24rem; overflow: auto; font-size: .75rem; background: var(--af-inset); padding: .5rem; border-radius: var(--af-radius-xs); }
.mvr-call { margin-bottom: .75rem; }
.mvr-pdf-head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.mvr-pdf-head h2 { font-size: inherit; }
.mvr-pdf-frame { display: block; width: 100%; height: 60rem; border: 0; background: var(--af-card); }
/* MVR archive page */
.archive-head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.archive-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.archive-bar { height: .9rem; border-radius: 999px; background: var(--af-inset); overflow: hidden; }
.archive-bar.is-thin { height: .45rem; }
.archive-bar-fill { height: 100%; background: var(--af-primary); }
.archive-bar-fill.is-done { background: var(--af-success-solid); }
.archive-progress-col { min-width: 12rem; }
.archive-error { max-width: 32rem; white-space: normal; }