/* ===========================================================================
   MICHELIN Campaign Operations - application stylesheet
   ---------------------------------------------------------------------------
   Single stylesheet, no build step, no CDN. Everything is driven by the
   custom properties in :root so the corporate palette and the corporate font
   can be replaced in one place.

   To switch to the official MICHELIN corporate typeface later, drop the font
   files into assets/fonts/, declare the @font-face below and change
   --font-brand. Nothing else in the application refers to a font name.
   =========================================================================== */

/*
@font-face {
  font-family: 'Michelin';
  src: url('../fonts/Michelin-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
*/

:root {
  /* Brand ---------------------------------------------------------------- */
  --michelin-blue: #27509B;
  --michelin-blue-dark: #1d3d78;
  --michelin-navy: #00205B;
  --michelin-navy-soft: #0A2D6E;
  --michelin-yellow: #FCE500;

  /* Neutrals ------------------------------------------------------------- */
  --bg: #F4F6FA;
  --surface: #FFFFFF;
  --surface-muted: #F8FAFC;
  --surface-sunken: #F1F4F9;
  --border: #E3E8EF;
  --border-strong: #D3DAE6;
  --text: #16233A;
  --text-muted: #5B6B85;
  --text-subtle: #8494AC;

  /* Status --------------------------------------------------------------- */
  --ok: #0F8A5F;
  --ok-bg: #E7F6EF;
  --ok-border: #A8DEC6;
  --info: #27509B;
  --info-bg: #EAF0FA;
  --info-border: #BFD0EC;
  --medium: #B7791F;
  --medium-bg: #FDF4E3;
  --medium-border: #F0D9A8;
  --high: #C2570C;
  --high-bg: #FDF0E6;
  --high-border: #F5CFAE;
  --critical: #C4271C;
  --critical-bg: #FDECEA;
  --critical-border: #F5B7B1;
  --neutral: #64748B;
  --neutral-bg: #F1F5F9;
  --neutral-border: #DCE3EC;

  /* Shape ---------------------------------------------------------------- */
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(16, 33, 65, .06);
  --shadow: 0 1px 3px rgba(16, 33, 65, .08), 0 6px 16px -8px rgba(16, 33, 65, .12);
  --shadow-lg: 0 12px 32px -12px rgba(16, 33, 65, .28);

  --sidebar-w: 246px;
  --topbar-h: 64px;

  --font-brand: 'Open Sans', 'Segoe UI', Arial, Helvetica, sans-serif;
  --font-mono: 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
}

/* --------------------------------------------------------------- reset --- */
*, *::before, *::after { box-sizing: border-box; }

/* The browser hides [hidden] with a very weak rule, so any class that sets
   display would silently reveal it. Dropdown panels are .card elements and
   are toggled through this attribute, so the guard has to win outright. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body { overflow-x: hidden; }
body {
  font-family: var(--font-brand);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
p { margin: 0 0 10px; }
a { color: var(--michelin-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
table { border-collapse: collapse; width: 100%; }
input, select, textarea, button { font: inherit; color: inherit; }
.icon { width: 18px; height: 18px; flex: 0 0 auto; }
.icon--sm { width: 15px; height: 15px; }
.icon--lg { width: 22px; height: 22px; }

/* ================================================================ layout == */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--michelin-navy);
  color: #C9D5EA;
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
}
.sidebar__brand {
  padding: 14px 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.sidebar__logo {
  display: flex; align-items: center; gap: 10px;
  color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .02em;
}
.sidebar__logo-mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--michelin-yellow);
  color: var(--michelin-navy);
  display: grid; place-items: center;
  font-weight: 800; font-size: 15px; letter-spacing: -.03em;
}
.sidebar__sub {
  margin-top: 7px; padding-left: 2px;
  font-size: 11.5px; color: #8FA5C8; letter-spacing: .02em;
}
/* Co-branded lockup, placed directly on the background with no plate behind
   it. Upload a light version as assets/images/logo-light.png and it is used
   automatically wherever the lockup sits on the navy background. */
.brand-lockup { display: block; padding: 2px 0; }
.brand-lockup img { display: block; width: 100%; height: auto; }
.brand-lockup--onDark { max-width: 330px; padding: 0; }
.sidebar__brand .brand-lockup { margin-bottom: 8px; }

/* Collapsed sidebar: swap the wide lockup for the compact mark. */
.brand-mark { display: none; }
.brand-mark img { display: block; width: 34px; height: 34px; border-radius: 8px; }

.sidebar__nav { flex: 1; overflow-y: auto; padding: 12px 10px 12px; }
.sidebar__group-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
  color: #6E86AC; padding: 14px 10px 6px; font-weight: 700;
}
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: 8px;
  color: #C4D2E8; font-size: 13.5px; font-weight: 500;
  transition: background .13s ease, color .13s ease;
  position: relative;
}
.nav-item:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.nav-item.is-active {
  background: var(--michelin-blue); color: #fff; font-weight: 600;
}
.nav-item.is-active::before {
  content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--michelin-yellow);
}
/* The marker on the left edge takes the row's own colour rather than staying
   yellow on every screen: a yellow bar against an orange or red row reads as
   two things disagreeing about which screen you are on. */
.nav-item--critical.is-active::before { background: var(--critical); }
.nav-item--warn.is-active::before     { background: var(--michelin-yellow); }
.nav-item--pending.is-active::before  { background: #F5811F; }

/* Critical Cases and Needs Attention keep their own colour when selected, so
   the severity of the screen you are on is never in doubt. */
.nav-item--critical.is-active { background: var(--critical); }
/* A translucent badge disappears into the red fill, so it flips to solid
   white with red figures instead. */
.nav-item--critical.is-active .nav-item__count--critical {
  background: #fff;
  color: var(--critical);
}

.nav-item--warn.is-active { background: var(--michelin-yellow); color: var(--michelin-blue); }
/* The badge inverts the card's pairing - solid blue with yellow figures. */
.nav-item--warn.is-active .nav-item__count--warn {
  background: var(--michelin-blue);
  color: var(--michelin-yellow);
}
/* The marker sits outside the row, on the navy, so yellow on yellow was never
   the problem it was written for - it reads perfectly well there. */
.nav-item--warn.is-active::before { background: var(--michelin-yellow); }
/* Import Center sits outside the scrolling list so it is always reachable.
   A hairline rule is the only thing setting it apart - the link itself is an
   ordinary nav item. Equal padding top and bottom keeps it centred between
   this rule and the footer's, and the block stays tight so the menu does not
   scroll. */
.sidebar__cta {
  flex: 0 0 auto;
  margin: 0 12px;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, .10);
}

.nav-item__count {
  margin-left: auto; font-size: 11px; font-weight: 700;
  background: rgba(255, 255, 255, .13); color: #fff;
  padding: 1px 7px; border-radius: 999px; min-width: 22px; text-align: center;
}
.nav-item__count--critical { background: var(--critical); color: #fff; }
/* Yellow badge with blue figures - white would not survive on this yellow. */
.nav-item__count--warn { background: var(--michelin-yellow); color: var(--michelin-blue); }
/* Grey with white figures: somebody is waiting on us, but nothing is on fire -
   these are answers to read, not deadlines missed. Selected, the row takes the
   amber that Pending wears everywhere else in the application. */
.nav-item__count--pending { background: var(--neutral); color: #fff; }
/* Brighter than the amber used on white: on this navy the darker one reads as
   brown. Same meaning, a colour that survives the background it sits on. */
.nav-item--pending.is-active { background: #F5811F; color: #fff; }
/* A translucent badge on this orange leaves the figure too pale to read; a
   solid darker fill gives it something to sit against. */
.nav-item--pending.is-active .nav-item__count--pending { background: #9C4A08; color: #fff; }
/* Equal padding, and no stray paragraph margin, so the block sits centred
   between the rule above it and the bottom of the sidebar. */
.sidebar__footer {
  padding: 14px 16px; border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: 11px; color: #7D93B8; line-height: 1.5;
}
.sidebar__footer p { margin: 0; }
.sidebar__privacy {
  display: flex; align-items: flex-start; gap: 8px;
  color: #9DB2D2; margin-bottom: 8px;
}

/* -------------------------------------------------------------- content -- */
.main {
  flex: 1; min-width: 0;
  margin-left: var(--sidebar-w);
  display: flex; flex-direction: column;
}

.topbar {
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 18px;
  padding: 0 24px;
  position: sticky; top: 0; z-index: 30;
}
.topbar__title { font-size: 15px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.topbar__title span { display: block; font-size: 11.5px; font-weight: 400; color: var(--text-muted); letter-spacing: 0; }

/* The search yields space first: the campaign name and the Demo Data badge
   must never be clipped or wrapped. */
.search {
  position: relative; flex: 1 1 240px; min-width: 210px; max-width: 380px;
}
.search input {
  width: 100%; padding: 8px 36px 8px 36px;
  border: 1px solid var(--border-strong); border-radius: 8px;
  text-overflow: ellipsis;
  background: var(--surface-muted); font-size: 13px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.search input:focus {
  outline: none; background: #fff;
  border-color: var(--michelin-blue);
  box-shadow: 0 0 0 3px rgba(39, 80, 155, .12);
}
.search .icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--text-subtle);
}
.search__hint {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 10.5px; color: var(--text-subtle);
  border: 1px solid var(--border-strong); border-radius: 4px; padding: 0 5px;
  background: #fff;
}

.topbar__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.campaign-select {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 5px 10px 5px 12px; background: var(--surface-muted);
  flex: 0 0 auto;
}
.campaign-select label { font-size: 10.5px; color: var(--text-subtle); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
/* No width cap: the campaign name is the context for everything on screen, so
   it is never truncated. The select sizes itself to the longest campaign. */
.campaign-select select {
  border: 0; background: transparent; font-size: 13px; font-weight: 600;
  color: var(--michelin-navy); cursor: pointer; padding: 0 2px 0 0;
  max-width: none; text-overflow: clip;
}
.campaign-select select:focus { outline: none; }

/* Footer: both rows centred, so nothing hugs the right edge. */
.app-footer {
  padding: 16px 24px 26px; border-top: 1px solid var(--border);
  background: var(--surface); color: var(--text-muted); font-size: 12px;
}
.app-footer__row {
  display: flex; flex-wrap: wrap; gap: 12px 16px;
  align-items: center; justify-content: center; text-align: center;
}
.app-footer__row--meta { margin-top: 10px; }

/* Language picker: flag + code, opening a small list. */
.flag { display: block; border-radius: 2px; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(16,33,65,.12); }
.lang-trigger {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  height: 36px; padding: 0 9px;
  border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--surface-muted); cursor: pointer; color: var(--text-muted);
  transition: background .15s, border-color .15s;
}
.lang-trigger:hover { background: #fff; border-color: #BCC7D8; color: var(--text); }
.lang-trigger__code { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; }
.lang-option {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 7px;
  font-size: 13px; color: var(--text); text-decoration: none;
}
.lang-option:hover { background: var(--surface-muted); text-decoration: none; }
.lang-option.is-active { font-weight: 600; }
.lang-option__check { margin-left: auto; color: var(--michelin-blue); display: flex; }

.badge-demo {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--michelin-yellow); color: #4A3D00;
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
  padding: 4px 9px; border-radius: 5px; text-transform: uppercase;
  flex: 0 0 auto; white-space: nowrap;
}

.icon-btn {
  position: relative; width: 36px; height: 36px; border-radius: 8px;
  border: 1px solid var(--border-strong); background: #fff;
  display: grid; place-items: center; cursor: pointer; color: var(--text-muted);
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--surface-muted); color: var(--michelin-blue); }
.icon-btn__badge {
  position: absolute; top: -5px; right: -5px;
  background: var(--critical); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  padding: 3px 5px; border-radius: 999px; border: 2px solid #fff;
}

.user-chip { display: flex; align-items: center; gap: 9px; padding-left: 10px; border-left: 1px solid var(--border); }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--michelin-blue); color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  flex: 0 0 auto; aspect-ratio: 1 / 1; overflow: hidden;
}
.avatar--sm { width: 24px; height: 24px; font-size: 10px; }
/* Account avatar rendered from an image rather than initials. */
.avatar--photo { background: #fff; border: 1px solid var(--border); overflow: hidden; padding: 2px; }
.avatar--photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.user-chip__name { font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.user-chip__role { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

.content { padding: 22px 24px 44px; flex: 1; }
.page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head__text h1 { font-size: 21px; }
.page-head__text p { color: var(--text-muted); font-size: 13px; margin: 3px 0 0; max-width: 760px; }
.page-head__actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ================================================================= cards == */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  /* Column flex so that when a grid stretches a card to match a taller
     neighbour, the body takes the slack and the footer stays on the floor
     instead of floating above empty space. */
  display: flex; flex-direction: column;
}
.card > .card__body { flex: 1 1 auto; }
.card__head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.card__head h2, .card__head h3 { font-size: 14px; font-weight: 700; }
.card__head p { margin: 2px 0 0; font-size: 12px; color: var(--text-muted); font-weight: 400; }
.card__actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* Narrow column: the actions drop onto their own row so the description keeps
   the full width of the card instead of being squeezed into a column of words. */
.card__head--stacked { flex-wrap: wrap; }
.card__head--stacked .card__actions { margin-left: 0; flex-basis: 100%; flex-wrap: wrap; }

/* Card header that opens and closes its own body. */
.card__head--toggle {
  width: 100%; text-align: left; background: none; border: 0;
  border-bottom: 1px solid var(--border); cursor: pointer;
  font: inherit; color: inherit; border-radius: var(--radius) var(--radius) 0 0;
  transition: background .13s;
}
.card__head--toggle:hover { background: var(--surface-muted); }
.card__chevron { margin-left: auto; color: var(--text-subtle); display: flex; transition: transform .18s; }
.card__head--toggle[aria-expanded="true"] .card__chevron { transform: rotate(180deg); }
.card__body { padding: 18px; }
.card__body--flush { padding: 0; }
.card__footer {
  padding: 11px 18px; border-top: 1px solid var(--border);
  background: var(--surface-muted); font-size: 12px; color: var(--text-muted);
  display: flex; align-items: center; gap: 10px;
  border-radius: 0 0 var(--radius) var(--radius);
}

.grid { display: grid; gap: 16px; }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* minmax(0, …) lets a column shrink below its content's intrinsic width;
   without it a wide table inside pushes the whole page sideways. */
.grid--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.grid--1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }

/* ================================================== campaign health band == */
.health {
  background: linear-gradient(102deg, var(--michelin-navy) 0%, #143a7d 58%, var(--michelin-blue) 100%);
  color: #fff; border-radius: var(--radius-lg);
  padding: 20px 24px; display: flex; gap: 28px; align-items: center; flex-wrap: wrap;
  box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.health::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--michelin-yellow);
}
.health__label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: #A9C0E6; font-weight: 700; margin-bottom: 5px;
}
.health__headline { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.health__headline b { color: var(--michelin-yellow); font-weight: 700; }
.health__sep { width: 1px; align-self: stretch; background: rgba(255, 255, 255, .18); }
/* Always two to a row, so the group reads as a fixed 2x2 block at every
   width instead of reflowing into a ragged 3 + 1. */
.health__attention { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.health__chip {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 9px; padding: 8px 13px; color: #fff; font-size: 12.5px;
  transition: background .15s;
}
a.health__chip:hover { background: rgba(255, 255, 255, .2); text-decoration: none; }
/* Pushed to the far edge of the chip and held back a little, so it labels the
   figure without competing with it. */
.health__chip-icon { margin-left: auto; width: 17px; height: 17px; opacity: .65; }
.health__chip b { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
/* Qualifies the e-mail figures above it: quiet, but on the same panel so it
   is read together with them. */
.health__note {
  display: flex; align-items: center; gap: 7px;
  margin-top: 11px; font-size: 11.5px; color: #93AAD0;
}
.health__note .icon { opacity: .7; }
.health__chip--critical {
  background: var(--critical);
  border-color: var(--critical);
  color: #fff;
}
/* Michelin yellow: past the limit, so it must read as an alert next to the
   red critical chip without competing with it. */
.health__chip--warn {
  background: var(--michelin-yellow);
  border-color: var(--michelin-yellow);
  color: #4A3D00;
}
a.health__chip--warn:hover { background: #EBD500; border-color: #EBD500; }
.health__chip--warn b { color: #2F2700; }
a.health__chip--critical:hover { background: #A81F16; border-color: #A81F16; }
.health__chip--critical b { color: #fff; }

/* ==================================================================== KPI == */
.kpi {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 15px 17px;
  box-shadow: var(--shadow-sm); display: block; position: relative;
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
a.kpi:hover { text-decoration: none; box-shadow: var(--shadow); border-color: var(--border-strong); transform: translateY(-1px); }
.kpi__label {
  font-size: 11.5px; color: var(--text-muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  display: flex; align-items: center; gap: 7px;
}
.kpi__value { font-size: 27px; font-weight: 700; letter-spacing: -.025em; margin-top: 7px; line-height: 1.1; }
.kpi__meta { font-size: 12px; color: var(--text-muted); margin-top: 5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kpi__meta b { color: var(--text); font-weight: 600; }
/* A KPI that earns twice the room. The span is clamped automatically when the
   grid drops to a single column, so nothing overflows on narrow screens. */
.kpi--wide { grid-column: span 2; }

/* Three figures across the width instead of one number and a footnote: the
   breakdown is the useful part here, so each piece gets its own size and its
   own filtered destination. */
.kpi-split { display: flex; align-items: stretch; gap: 0; margin-top: 10px; }
.kpi-split__item {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: 4px 18px; color: inherit;
  border-left: 1px solid var(--border);
}
.kpi-split__item:first-child { padding-left: 0; border-left: 0; }
.kpi-split__item:hover { text-decoration: none; }
.kpi-split__item:hover .kpi-split__label { color: var(--text); }
.kpi-split__value {
  font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.kpi-split__label { font-size: 12px; color: var(--text-muted); transition: color .13s ease; }
.kpi-split__item--high .kpi-split__value { color: var(--high); }
.kpi-split__item--critical .kpi-split__value { color: var(--critical); }
/* The headline keeps the card's own accent. */
.kpi--critical .kpi-split__item:first-child .kpi-split__value { color: var(--critical); }

@media (max-width: 700px) {
  .kpi-split { flex-wrap: wrap; gap: 12px; }
  .kpi-split__item { flex: 1 1 40%; padding-left: 0; border-left: 0; }
}
/* The "x" that joins a figure to what it counts - smaller and lighter than
   the words around it, and sitting on the baseline rather than floating at
   mid-height the way the × glyph does. */
.kpi__times { font-size: 9px; color: var(--text-subtle); vertical-align: baseline; }
.kpi--critical { border-color: var(--critical-border); background: linear-gradient(180deg, #FFF8F7 0%, #fff 60%); }
.kpi--critical .kpi__value { color: var(--critical); }
.kpi--warn { border-color: var(--high-border); }
.kpi--warn .kpi__value { color: var(--high); }
.kpi--ok .kpi__value { color: var(--ok); }
.kpi__spark { position: absolute; right: 14px; top: 14px; color: var(--text-subtle); }

.progress { height: 6px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; margin-top: 10px; display: flex; }
.progress span { display: block; height: 100%; }
.progress__ok { background: var(--ok); }
.progress__info { background: var(--michelin-blue); }
.progress__medium { background: #E0A82E; }
.progress__high { background: var(--high); }
.progress__critical { background: var(--critical); }
.progress__neutral { background: var(--border-strong); }

/* Case number, so a card stays identifiable while scrolling a long list. */
.case-index {
  width: 30px; height: 30px; border-radius: 7px;
  display: grid; place-items: center; flex: 0 0 auto;
  font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: #fff; background: var(--critical);
}
.case-index--high { background: var(--high); }
.case-index--medium { background: #E0A82E; }
.case-index--low { background: var(--ok); }

/* ------------------------------------------------------------- age bar --- */
.agebar-wrap { min-width: 140px; }
/* Registration code shown as a secondary line under the customer name. */
.cell-code-sm { font-size: 11.5px; }
.agebar__value { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.agebar__value--overdue { color: var(--critical); font-weight: 700; }
.agebar__over-label { color: var(--critical); font-weight: 700; }
.agebar {
  display: flex; height: 8px; border-radius: 999px;
  background: var(--surface-sunken); overflow: hidden; margin-top: 5px;
}
.agebar__used { display: block; height: 100%; background: var(--michelin-blue); }
/* Everything past the limit, in Michelin yellow: it reads instantly against
   the red and matches the yellow used for overdue elsewhere. */
.agebar__over { display: block; height: 100%; background: var(--critical); }

/* ================================================================ alerts == */
.alert {
  border: 1px solid var(--border); border-left: 4px solid var(--neutral);
  background: var(--surface); border-radius: var(--radius);
  padding: 14px 18px; display: flex; gap: 14px; align-items: flex-start;
}
.alert__icon { flex: 0 0 auto; margin-top: 1px; }
.alert h3 { font-size: 14px; }
.alert p { font-size: 13px; color: var(--text-muted); margin: 3px 0 0; }
.alert--critical { border-left-color: var(--critical); background: var(--critical-bg); border-color: var(--critical-border); }
.alert--critical h3, .alert--critical .alert__icon { color: var(--critical); }
.alert--critical p { color: #7A2018; }
.alert--warn { border-left-color: var(--high); background: var(--high-bg); border-color: var(--high-border); }
.alert--warn h3, .alert--warn .alert__icon { color: var(--high); }
.alert--info { border-left-color: var(--michelin-blue); background: var(--info-bg); border-color: var(--info-border); }
.alert--info h3, .alert--info .alert__icon { color: var(--michelin-blue); }
.alert--ok { border-left-color: var(--ok); background: var(--ok-bg); border-color: var(--ok-border); }
.alert--ok h3, .alert--ok .alert__icon { color: var(--ok); }
.alert__actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.critical-banner {
  border: 1px solid var(--critical-border); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #FFF5F4 0%, #fff 100%);
  padding: 18px 20px; box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--critical);
}
.critical-banner__head { display: flex; align-items: center; gap: 12px; }
.critical-banner__title { font-size: 16px; font-weight: 700; color: var(--critical); }
/* Indented to line up with the title and description, which sit after the
   icon (icon 22px + 12px gap). */
.critical-banner__grid {
  display: flex; gap: 26px; margin-top: 13px; flex-wrap: wrap;
  padding-left: 34px;
}
.critical-banner__item { font-size: 13px; color: var(--text-muted); }
.critical-banner__item b { display: block; font-size: 20px; color: var(--text); font-weight: 700; letter-spacing: -.02em; }
/* The call to action rides at the end of the figures row, so the banner stays
   three lines tall. It wraps underneath when the row runs out of space. */
.critical-banner__actions { margin-left: auto; align-self: center; }

/* ================================================================ badges == */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; line-height: 1.6;
  padding: 1px 8px; border-radius: 5px; white-space: nowrap;
  border: 1px solid transparent;
}
.badge--ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-border); }
.badge--info { background: var(--info-bg); color: var(--info); border-color: var(--info-border); }
.badge--warn { background: var(--medium-bg); color: var(--medium); border-color: var(--medium-border); }
.badge--danger { background: var(--critical-bg); color: var(--critical); border-color: var(--critical-border); }
.badge--high { background: var(--high-bg); color: var(--high); border-color: var(--high-border); }

.badge--neutral { background: var(--neutral-bg); color: var(--neutral); border-color: var(--neutral-border); }
.badge--brand { background: var(--info-bg); color: var(--michelin-navy); border-color: var(--info-border); }
.badge--yellow { background: #FFFBE0; color: #7A6A00; border-color: #F2E48A; }

/* One hue per clarification reason, so a column of them can be scanned by
   colour. Every pairing is a dark text on its own tinted ground, which keeps
   each one legible on white. */
.badge--r1 { background: #FDECEA; color: #A6221A; border-color: #F3B9B3; } /* missing invoice   */
.badge--r2 { background: #FDF0E6; color: #A2470A; border-color: #F1CBA8; } /* unreadable        */
.badge--r3 { background: #FDF4E3; color: #8A5B12; border-color: #EDD49B; } /* wrong invoice     */
.badge--r4 { background: #F3F7E8; color: #4F6B18; border-color: #CFE0AC; } /* product missing   */
.badge--r5 { background: #E9F6EF; color: #0B6E4C; border-color: #A6D9C2; } /* duplicate         */
.badge--r6 { background: #E7F4F7; color: #0F6377; border-color: #A8D5E0; } /* dealer            */
.badge--r7 { background: #EBEFFA; color: #2B4694; border-color: #BDC9EC; } /* data mismatch     */
.badge--r8 { background: #F2EDFA; color: #543C93; border-color: #CFC0E9; } /* purchase date     */
.badge--r0 { background: var(--neutral-bg); color: var(--neutral); border-color: var(--neutral-border); }

/* Severity and badge sit side by side all over the application, so their boxes
   are built the same way: the type size differs, the line height and padding
   do not, and both come out the same height. */
.sev {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; line-height: 1.6;
  padding: 1px 8px; border-radius: 5px; border: 1px solid transparent;
  white-space: nowrap;
}
.sev i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.sev--low { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-border); }
.sev--medium { background: var(--medium-bg); color: var(--medium); border-color: var(--medium-border); }
.sev--high { background: var(--high-bg); color: var(--high); border-color: var(--high-border); }
.sev--critical { background: var(--critical-bg); color: var(--critical); border-color: var(--critical-border); }

.sla {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; padding: 2px 8px;
  border-radius: 5px; border: 1px solid transparent; white-space: nowrap;
}
.sla i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sla--low { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-border); }
.sla--medium { background: var(--medium-bg); color: var(--medium); border-color: var(--medium-border); }
.sla--high { background: var(--high-bg); color: var(--high); border-color: var(--high-border); }
.sla--critical { background: var(--critical-bg); color: var(--critical); border-color: var(--critical-border); }
.sla--ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-border); }
.sla--neutral { background: var(--neutral-bg); color: var(--neutral); border-color: var(--neutral-border); }

.prio {
  display: inline-grid; place-items: center; min-width: 30px;
  font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 5px;
  border: 1px solid transparent; letter-spacing: .03em;
}
.prio--p1 { background: var(--critical); color: #fff; }
.prio--p2 { background: var(--high); color: #fff; }
.prio--p3 { background: var(--medium-bg); color: var(--medium); border-color: var(--medium-border); }
.prio--p4 { background: var(--neutral-bg); color: var(--neutral); border-color: var(--neutral-border); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-sunken); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 10px; font-size: 11.5px; color: var(--text-muted);
}
.chip--keyword { background: var(--critical-bg); border-color: var(--critical-border); color: var(--critical); font-weight: 600; font-family: var(--font-mono); font-size: 11px; }
.chip--ai { background: var(--info-bg); border-color: var(--info-border); color: var(--michelin-navy); }

.code { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: var(--michelin-navy); }

/* =============================================================== buttons == */
/* Settings, grouped. The page is a pile of unrelated cards otherwise, so each
   category gets a quiet label and a hairline above it. */
.settings-section { margin: 26px 0 12px; padding-top: 20px; border-top: 1px solid var(--border); }
.settings-section:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.settings-section h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-muted); margin: 0 0 3px;
}
.settings-section p { margin: 0; font-size: 12.5px; color: var(--text-muted); }

.btn {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--border-strong); background: #fff; color: var(--text);
  cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--surface-muted); text-decoration: none; border-color: #BCC7D8; }
.btn:focus-visible { outline: 2px solid var(--michelin-blue); outline-offset: 2px; }
.btn--primary { background: var(--michelin-blue); border-color: var(--michelin-blue); color: #fff; }
.btn--primary:hover { background: var(--michelin-blue-dark); border-color: var(--michelin-blue-dark); color: #fff; }
/* Green action button: reading the mailbox only ever reads - it changes
   nothing on the mail server and sends nothing. Must sit after .btn, which
   would otherwise override the background at equal specificity. */
.btn--success { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn--success:hover { background: var(--ok); border-color: var(--ok); color: #fff; filter: brightness(.93); }
/* Spreadsheet green, so the import action matches the Sheets mark above it. */
.btn--sheets { background: #0F9D58; border-color: #0F9D58; color: #fff; }
.btn--sheets:hover { background: #0B7C46; border-color: #0B7C46; color: #fff; }
.btn--sheets:focus-visible { outline-color: #0B7C46; }
.btn--critical { background: var(--critical); border-color: var(--critical); color: #fff; }
.btn--critical:hover { background: #A81F16; border-color: #A81F16; color: #fff; }
/* The report button: red like the file type it produces, with the icon sitting
   on a white tile on the left so the file type reads at a glance. */
.btn--pdf { background: var(--critical); border-color: var(--critical); color: #fff; padding-left: 6px; }
.btn--pdf:hover { background: #A81F16; border-color: #A81F16; color: #fff; }
.btn--pdf .icon {
  color: var(--critical); background: #fff; border-radius: 6px;
  box-sizing: content-box; padding: 6px;
}
.btn--pdf:focus-visible { outline-color: var(--critical); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn--ghost:hover { background: var(--surface-sunken); color: var(--text); }
.btn--sm { padding: 5px 10px; font-size: 12px; border-radius: 7px; }
/* Icon-only: the label is in the title, so the padding does not pretend there
   is text to sit beside. */
.btn--icon { padding: 5px; }
/* A row's controls, kept together and never wrapped onto a second line. */
.row-actions { display: flex; gap: 2px; justify-content: flex-end; align-items: center; }
.row-actions form { display: contents; }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .55; pointer-events: none; }

/* ================================================================ tables == */
/* Horizontal scroll for wide tables. Note that overflow-x:auto also makes the
   vertical axis a scroll container, which is why a sticky header inside must
   stick to THIS box - see .table-wrap--sticky - and not to the page. */
.table-wrap { width: 100%; overflow-x: auto; }

/* A tall table that keeps its header in view: the wrapper does the vertical
   scrolling, so the sticky header has something to stick to. */
.table-wrap--sticky { max-height: calc(100vh - 260px); overflow: auto; }
.table-wrap--sticky thead th { position: sticky; top: 0; z-index: 3; }
.table { font-size: 13px; }
.table th {
  text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted);
  padding: 10px 16px; background: var(--surface-muted);
  border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
.table td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: var(--surface-muted); }
.table tbody tr:last-child td { border-bottom: 0; }
.table--compact td { padding: 8px 12px; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table td.center, .table th.center { text-align: center; font-variant-numeric: tabular-nums; }
.table a.row-link { font-weight: 600; }
.th-sort { color: inherit; display: inline-flex; align-items: center; gap: 4px; }
.th-sort:hover { color: var(--michelin-blue); text-decoration: none; }
.th-sort.is-active { color: var(--michelin-blue); }
.sort-arrow { font-size: 8px; }

.cell-customer { display: flex; align-items: center; gap: 9px; min-width: 0; }
.cell-customer__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-customer__meta { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-stack { display: flex; flex-direction: column; gap: 2px; }
.cell-sub { font-size: 11.5px; color: var(--text-muted); }
.truncate { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Message preview: two lines, cut with an ellipsis at the end of the second.
   .truncate above is single-line and capped at 320px, which left a gap in the
   wide subject column; this one fills the cell and uses the vertical space. */
.cell-preview {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; white-space: normal; line-height: 1.45; max-width: 100%;
  margin-top: 6px;
}
.nowrap { white-space: nowrap; }

/* The attribution queue: a working list, capped so it cannot push the inbox
   off the screen. Six rows is what fits before it stops being scannable. */
.attribution-queue { max-height: 336px; overflow-y: auto; }

/* Import log: one line per run. A table of ten numeric columns was unreadable
   at two or three imports a day, and most of those numbers are zero. */
.import-log { display: flex; flex-direction: column; }
.import-log__row {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 18px; border-bottom: 1px solid var(--border);
}
.import-log__row:last-child { border-bottom: 0; }
.import-log__row.is-reverted { color: var(--text-subtle); opacity: .6; }
.import-log__what { flex: 1; min-width: 0; }
.import-log__name {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.import-log__counts { display: flex; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.import-log__stat {
  font-size: 11.5px; font-variant-numeric: tabular-nums;
  padding: 2px 8px; border-radius: 999px;
  background: var(--surface-sunken); color: var(--text-muted);
}
.import-log__stat--ok   { background: var(--ok-bg); color: var(--ok); }
.import-log__stat--warn { background: var(--high-bg); color: var(--high); }
.import-log__action { flex: 0 0 auto; min-width: 92px; text-align: right; }

/* Invoice numbers are looked up constantly, so they stay on one line and keep
   the monospace weight; the product name is reference detail and steps back. */
.cell-product {
  display: block; font-size: 10.5px; line-height: 1.4; letter-spacing: -.1px;
  color: var(--text-muted); white-space: nowrap;
}
.th-secondary { display: block; font-weight: 600; opacity: .72; margin-top: 2px; }

.empty { padding: 44px 20px; text-align: center; color: var(--text-muted); }
.empty__icon { color: var(--text-subtle); margin-bottom: 10px; }
.empty h3 { font-size: 14px; margin-bottom: 4px; }
.empty p { font-size: 13px; max-width: 420px; margin: 0 auto; }

.pagination {
  display: flex; align-items: center; gap: 6px; padding: 12px 18px;
  border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-muted);
}
.pagination__pages { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.pagination a, .pagination span.page {
  min-width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--border-strong); border-radius: 7px; background: #fff;
  color: var(--text); font-weight: 600; padding: 0 8px;
}
.pagination a:hover { background: var(--surface-muted); text-decoration: none; }
.pagination .is-current { background: var(--michelin-blue); border-color: var(--michelin-blue); color: #fff; }
.pagination .is-disabled { opacity: .45; pointer-events: none; }

/* =============================================================== filters == */
.filters {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 16px; box-shadow: var(--shadow-sm);
}
.filters__row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
.field label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-subtle); }
.field select, .field input, .field textarea {
  border: 1px solid var(--border-strong); border-radius: 7px;
  padding: 7px 9px; font-size: 13px; background: #fff; min-height: 34px;
  transition: border-color .15s, box-shadow .15s;
}
.field select:focus, .field input:focus, .field textarea:focus {
  outline: none; border-color: var(--michelin-blue); box-shadow: 0 0 0 3px rgba(39, 80, 155, .12);
}
.field--grow { flex: 1; min-width: 220px; }
/* Fields on a fixed grid: every gap the same, whatever the column width. */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid .field { min-width: 0; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }
.filters__meta {
  display: flex; align-items: center; gap: 10px; margin-top: 10px;
  padding-top: 10px; border-top: 1px dashed var(--border);
  font-size: 12.5px; color: var(--text-muted); flex-wrap: wrap;
}
.filters__count { font-weight: 700; color: var(--michelin-blue); }

/* ================================================================ tabs ==== */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 16px; flex-wrap: wrap; }
.tab {
  padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--text-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--text); text-decoration: none; }
.tab.is-active { color: var(--michelin-blue); border-bottom-color: var(--michelin-blue); }
.tab__count { font-size: 11px; background: var(--surface-sunken); border-radius: 999px; padding: 1px 7px; margin-left: 6px; }

/* ============================================================== AI panel == */
.ai-notice {
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--info-bg); border: 1px solid var(--info-border);
  border-left: 4px solid var(--michelin-blue);
  border-radius: var(--radius-sm); padding: 11px 14px; font-size: 12.5px; color: var(--michelin-navy);
}
.ai-notice b { display: block; font-size: 13px; }
.ai-notice p { margin: 2px 0 0; color: #33507F; }
.ai-notice--strong { background: #FFFBE0; border-color: #F2E48A; border-left-color: var(--michelin-yellow); color: #5A4E00; }
.ai-notice--strong p { color: #6B5D00; }

.ai-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); }
.confidence { display: flex; align-items: center; gap: 8px; min-width: 150px; }
.confidence__bar { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; }
.confidence__bar span { display: block; height: 100%; background: var(--michelin-blue); }
.confidence__value { font-weight: 700; font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; }

.draft {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-muted); padding: 14px 16px;
  font-size: 13px; line-height: 1.65; white-space: pre-wrap;
  max-height: 340px; overflow-y: auto;
}
.draft textarea { width: 100%; min-height: 240px; resize: vertical; }

/* ============================================================== timeline == */
.timeline { position: relative; padding-left: 26px; }
.timeline::before {
  content: ''; position: absolute; left: 9px; top: 6px; bottom: 6px;
  width: 2px; background: var(--border);
}
.timeline__item { position: relative; padding: 0 0 15px; }
.timeline__dot {
  position: absolute; left: -26px; top: 1px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 2px solid var(--border-strong);
  display: grid; place-items: center; color: var(--text-muted);
}
.timeline__dot .icon { width: 11px; height: 11px; }
.timeline__dot--brand { border-color: var(--michelin-blue); color: var(--michelin-blue); }
.timeline__dot--danger { border-color: var(--critical); color: var(--critical); background: var(--critical-bg); }
.timeline__dot--warn { border-color: var(--high); color: var(--high); background: var(--high-bg); }
.timeline__dot--ok { border-color: var(--ok); color: var(--ok); background: var(--ok-bg); }
.timeline__dot--info { border-color: var(--michelin-blue); color: var(--michelin-blue); background: var(--info-bg); }
.timeline__time { font-size: 11.5px; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.timeline__text { font-size: 13px; }
.timeline__op { font-size: 11.5px; color: var(--text-muted); }

/* ============================================================== threads == */
.thread { display: flex; flex-direction: column; gap: 14px; }
.msg { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.msg__head {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--surface-muted); border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.msg__who { font-weight: 600; font-size: 13px; }
.msg__mail { font-size: 12px; color: var(--text-muted); }
.msg__date { margin-left: auto; font-size: 12px; color: var(--text-muted); }
.msg__body { padding: 14px; font-size: 13px; line-height: 1.65; white-space: pre-wrap; }
.msg--customer { border-left: 3px solid var(--michelin-blue); }
.msg--michelin { border-left: 3px solid var(--ok); background: #FCFDFE; }
.msg--michelin .msg__head { background: var(--ok-bg); border-bottom-color: var(--ok-border); }
.msg--critical { border-left: 3px solid var(--critical); }
.msg--critical .msg__head { background: var(--critical-bg); border-bottom-color: var(--critical-border); }

/* ============================================================ definition == */
.dl { display: grid; grid-template-columns: 148px 1fr; gap: 9px 14px; font-size: 13px; }
.dl dt { color: var(--text-muted); font-size: 12.5px; }
.dl dd { margin: 0; font-weight: 500; }
.dl--wide { grid-template-columns: 190px 1fr; }

/* ================================================================ charts == */
.chart-box { position: relative; height: 260px; }
.chart-box--sm { height: 200px; }
.chart-box--lg { height: 320px; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; font-size: 12px; color: var(--text-muted); }
.legend__item { display: flex; align-items: center; gap: 6px; }
.legend__swatch { width: 10px; height: 10px; border-radius: 3px; }

.funnel { display: flex; flex-direction: column; gap: 10px; }
.funnel__row { display: flex; align-items: center; gap: 12px; }
.funnel__label { width: 130px; font-size: 12.5px; color: var(--text-muted); flex: 0 0 auto; }
.funnel__bar { flex: 1; height: 30px; background: var(--surface-sunken); border-radius: 6px; overflow: hidden; }
.funnel__fill {
  height: 100%; background: linear-gradient(90deg, var(--michelin-navy), var(--michelin-blue));
  display: flex; align-items: center; padding: 0 10px; color: #fff;
  font-size: 12px; font-weight: 700; min-width: 44px;
}
/* Validated and voucher-sent: the rungs where the customer is served. */
.funnel__fill--ok { background: linear-gradient(90deg, #0B6E4C, var(--ok)); }
.funnel__pct { width: 62px; text-align: right; font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ================================================================= misc === */
.stat-list { display: flex; flex-direction: column; }
.stat-list__row {
  display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid var(--border); font-size: 13px;
}
.stat-list__row:last-child { border-bottom: 0; }
.stat-list__label { color: var(--text-muted); }
.stat-list__value { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Due Date overview laid out along the page: the donut on the left, the four
   age buckets filling the rest as a row of tiles. */
.sla-overview { display: flex; align-items: center; gap: 28px; }
.sla-overview__chart { flex: 0 0 190px; min-width: 0; height: 190px; }
.sla-overview__list {
  flex: 1; min-width: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
.sla-overview__item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: inherit; background: var(--surface-muted);
  transition: border-color .15s, background .15s;
}
.sla-overview__item:hover { border-color: var(--border-strong); background: #fff; text-decoration: none; }
.sla-overview__range { font-size: 12px; color: var(--text-muted); }
.sla-overview__value { font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

@media (max-width: 1180px) {
  .sla-overview { flex-direction: column; align-items: stretch; gap: 18px; }
  /* Stacked, the chart reads better on top. */
  .sla-overview__chart { flex: 0 0 auto; order: -1; }
  .sla-overview__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Priority totals in the queue header - larger than a badge, because they
   are the headline of the card rather than a label on a row. */
.prio-pill {
  display: inline-flex; align-items: center; gap: 6px;
  /* The card header stretches its children, which would turn these into tall
     blobs next to the button. */
  align-self: center;
  padding: 7px 14px; border-radius: 8px; /* squared off, to match the button beside them */
  font-size: 14px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2;
  border: 1px solid transparent;
  white-space: nowrap; /* "20 P1" must never break across two lines */
}
.prio-pill--p1 { background: var(--critical-bg); color: var(--critical); border-color: var(--critical-border); }
.prio-pill--p2 { background: var(--medium-bg); color: var(--medium); border-color: var(--medium-border); }

/* Dims the table while the next page is being fetched, without collapsing
   the card's height and making the page jump. */
#queue-panel { transition: opacity .12s ease; }
#queue-panel.is-loading { opacity: .55; pointer-events: none; }

/* Card-footer pager. */
.pager { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.pager__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid var(--border-strong); border-radius: 7px;
  color: var(--text); background: #fff;
}
.pager__btn .icon { width: 16px; height: 16px; }
/* "Previous" is the same chevron, turned around. */
.pager__btn--prev .icon { transform: rotate(180deg); }
a.pager__btn:hover { background: var(--surface-muted); border-color: #BCC7D8; text-decoration: none; }
.pager__btn.is-disabled { color: var(--text-subtle); background: var(--surface-sunken); border-color: var(--border); }
.pager__pages { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pager__all { font-size: 12px; margin-left: 4px; }

.queue-reason { font-size: 12.5px; color: var(--text); }
.queue-action { font-size: 12px; color: var(--text-muted); font-style: italic; }

.dropzone {
  border: 2px dashed var(--border-strong); border-radius: var(--radius);
  background: var(--surface-muted); padding: 32px 20px; text-align: center;
  transition: border-color .15s, background .15s; cursor: pointer;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--michelin-blue); background: var(--info-bg); }
.dropzone__icon { color: var(--michelin-blue); margin-bottom: 8px; }
.dropzone h3 { font-size: 14px; }
.dropzone p { font-size: 12.5px; color: var(--text-muted); margin: 4px 0 0; }
.dropzone__file { margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--michelin-blue); }

/* Brand-marked sources: the Google logos carry their own colour, so the tile
   behind them stays neutral instead of tinting them blue. */
.dropzone--sheets:hover, .dropzone--sheets.is-over { border-color: #0F9D58; background: #F1FAF4; }
.dropzone--gmail:hover,  .dropzone--gmail.is-over  { border-color: #EA4335; background: #FEF4F3; }
.dropzone--sheets .dropzone__file { color: #0B7C46; }
.dropzone--gmail  .dropzone__file { color: #C5221F; }

.source-card { display: flex; gap: 14px; align-items: flex-start; }
.source-card__icon {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: var(--info-bg); color: var(--michelin-blue); flex: 0 0 auto;
}
.source-card__icon--brand { background: #fff; border: 1px solid var(--border); }
.source-card__meta { font-size: 12.5px; color: var(--text-muted); }

/* Centred over a dimmed page: a sync result has to be read, not glimpsed in
   the corner while the eye is on the table underneath. The backdrop is what
   makes it unmissable; the stack itself stays a plain column. */
.flash-stack {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; gap: 10px;
  align-items: center; justify-content: center;
  background: rgba(16, 27, 50, .55);
  padding: 24px;
}
.flash-stack:empty { display: none; }
.flash-stack .flash { max-width: 760px; width: 100%; }
.flash {
  background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--michelin-blue);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  padding: 18px 22px; font-size: 14px; display: flex; gap: 12px; align-items: center;
  text-align: center; animation: flash-in .25s ease;
}
.flash--success { border-left-color: var(--ok); }
.flash--error { border-left-color: var(--critical); }
/* A destructive action that succeeded - reads as done, but not as harmless. */
.flash--danger { border-left-color: var(--critical); }
.flash--warning { border-left-color: var(--high); }
@keyframes flash-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(10, 22, 44, .55);
  display: grid; place-items: center; z-index: 70; padding: 24px;
}
.modal {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  width: min(640px, 100%); max-height: 86vh; overflow: auto;
}
.modal__head { padding: 18px 22px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; }
.modal__body { padding: 20px 22px; }
.modal__foot { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; background: var(--surface-muted); }

.tooltip { position: relative; cursor: help; border-bottom: 1px dotted var(--text-subtle); }
.tooltip::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); left: 50%;
  transform: translateX(-50%); background: var(--michelin-navy); color: #fff;
  font-size: 11.5px; font-weight: 500; line-height: 1.45; padding: 7px 10px; border-radius: 6px;
  width: max-content; max-width: 280px; opacity: 0; pointer-events: none;
  transition: opacity .14s; z-index: 50; box-shadow: var(--shadow-lg); white-space: normal; text-align: left;
}
.tooltip:hover::after { opacity: 1; }

/* Anchored below the trigger: used in the top bar, where a tooltip opening
   upwards would be clipped by the edge of the window. */
.tooltip--below::after { bottom: auto; top: calc(100% + 7px); }

.privacy-note {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--text-muted);
  background: var(--surface-sunken); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 9px;
}

/* ================================================================= login == */
.login {
  min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr;
  background: var(--bg);
}
.login__aside {
  background: linear-gradient(160deg, var(--michelin-navy) 0%, #16407f 55%, var(--michelin-blue) 100%);
  color: #fff; padding: 48px 52px; display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.login__aside::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--michelin-yellow); }
.login__aside h2 { color: #fff; font-size: 27px; letter-spacing: -.02em; line-height: 1.28; }
/* Runs the full width of the panel, like the feature list underneath it. */
.login__aside p { color: #B6C8E6; font-size: 14px; margin-top: 12px; }
.login__points { display: flex; flex-direction: column; gap: 13px; margin-top: 28px; }
.login__point { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; color: #D6E1F4; }
.login__point .icon { color: var(--michelin-yellow); margin-top: 2px; }
.login__form-wrap { display: grid; place-items: center; padding: 40px 24px; }
.login__form { width: min(400px, 100%); }
.login__form h1 { font-size: 21px; margin-bottom: 4px; }
.login__form > p { color: var(--text-muted); font-size: 13px; margin-bottom: 22px; }
.login__account {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 11px 14px; margin-bottom: 22px; background: var(--surface-muted);
}
.login__avatar { width: 42px; height: 42px; object-fit: contain; flex: 0 0 auto; }
.login__account-name { font-weight: 700; font-size: 14px; }
.login__account-role { font-size: 12px; color: var(--text-muted); }

.login__demo {
  margin-top: 20px; padding: 13px 15px; border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm); background: var(--surface-muted); font-size: 12.5px; color: var(--text-muted);
  text-align: center; /* the password stands alone, so it sits in the middle */
}
.login__demo b { color: var(--text); }
.login__demo code { font-family: var(--font-mono); background: #fff; border: 1px solid var(--border); padding: 1px 5px; border-radius: 4px; }

/* =========================================================== responsive === */
@media (max-width: 1250px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1320px) {
  .topbar__title { display: none; }
}

@media (max-width: 1180px) {
  :root { --sidebar-w: 68px; }
  .sidebar__logo span, .sidebar__sub, .sidebar__group-label, .nav-item span:not(.nav-item__count), .sidebar__footer p { display: none; }
  .sidebar__brand .brand-lockup { display: none; }
  .brand-mark { display: block; }
  .sidebar__brand { padding: 16px 12px; }
  .nav-item { justify-content: center; padding: 10px; }
  .nav-item__count { position: absolute; top: 2px; right: 2px; margin: 0; font-size: 9px; padding: 0 4px; min-width: 0; }
  .grid--2-1, .grid--1-2, .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .search { max-width: none; }
}
@media (max-width: 900px) {
  .grid--4 { grid-template-columns: 1fr; }
  .content { padding: 16px 14px 40px; }
  .topbar { padding: 0 14px; gap: 10px; }
  .campaign-select, .user-chip__name, .user-chip__role, .topbar__title span { display: none; }
  .login { grid-template-columns: 1fr; }
  .login__aside { display: none; }
  .health { gap: 16px; }
  .health__sep { display: none; }
  .dl { grid-template-columns: 1fr; gap: 2px 0; }
  .dl dd { margin-bottom: 8px; }
}

@media print {
  .sidebar, .topbar, .page-head__actions, .filters, .pagination { display: none; }
  .main { margin-left: 0; }
  .card { break-inside: avoid; box-shadow: none; }
}

/* Status headline ---------------------------------------------------------
   The decision on a registration, in the campaign file's own vocabulary. It
   sits at the top of the case file because it is the answer to the first
   question anyone asks when opening one. */
.status-headline {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  margin-bottom: 24px;
  border: 1px solid var(--neutral-border);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: var(--neutral-bg);
}
.status-headline__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.status-headline__pill { margin-left: auto; font-size: 10.5px; white-space: nowrap; }
.status-headline__value {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.1;
  color: var(--neutral);
}
.status-headline--ok      { background: var(--ok-bg);       border-color: var(--ok-border);       }
.status-headline--ok      .status-headline__value { color: var(--ok); }
.status-headline--danger  { background: var(--critical-bg); border-color: var(--critical-border); }
.status-headline--danger  .status-headline__value { color: var(--critical); }
.status-headline--high    { background: var(--high-bg);     border-color: var(--high-border);     }
.status-headline--high    .status-headline__value { color: var(--high); }
.status-headline--warn    { background: var(--medium-bg);   border-color: var(--medium-border);   }
.status-headline--warn    .status-headline__value { color: var(--medium); }
.status-headline--info    { background: var(--info-bg);     border-color: var(--info-border);     }
.status-headline--info    .status-headline__value { color: var(--info); }

/* What the reviewer wrote in the file's Reason column. */
.review-note {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-muted, var(--neutral-bg));
}
.review-note p {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text);
}

/* The registrations table carries the campaign file's own columns, so it is
   wider than the screen by design and scrolls sideways inside its card. */
.table-wrap--wide { overflow-x: auto; }
.table--sheet { width: max-content; min-width: 100%; }
.table--sheet th,
.table--sheet td { white-space: nowrap; }
/* The headings are the file's own column names; upper-casing them would make
   "submissionDateTime" unrecognisable next to the spreadsheet. */
.table--sheet th { text-transform: none; letter-spacing: 0; }
.table--sheet th:first-child,
.table--sheet td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface);
  box-shadow: 1px 0 0 var(--border);
}
.table--sheet thead th:first-child { z-index: 4; }
.table--sheet tbody tr:hover td:first-child { background: var(--surface-hover, var(--neutral-bg)); }
.cell-clip {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* Two cards on one row read as a pair, so they end where each other ends -
   a short card beside a tall one looks like something failed to load. */
.grid > .card { height: 100%; }

/* The campaign file's columns in a case file: 38 label/value pairs, laid out
   in as many columns as the width allows rather than one long list. */
.dl--file {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px 24px;
}
.dl--file__pair { min-width: 0; }
.dl--file dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text-muted);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dl--file dd {
  margin: 0;
  font-size: 13px;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* A card that is the only one in its grid cell still ends where the row does. */
.grid > .stack { height: 100%; }
.grid > .stack > .card:only-child { flex: 1; }

/* The customer half of the file sits in a narrow card, so its pairs need a
   smaller minimum before they will sit two to a row. */
.dl--file--narrow { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* A message runs to a paragraph. Showing all of it would make the card taller
   than everything else on the page; the whole text is in the tooltip. */
.cell-longtext {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* A value kept out of plain sight until it is asked for: veiled just enough
   to be unreadable, not so much that the row looks damaged. A click clears it. */
.masked {
  display: inline-block;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: bottom;
  cursor: pointer;
  filter: blur(1.6px);
  user-select: none;
  transition: filter .12s ease;
}
.masked:hover { filter: blur(1.4px); }
.masked.is-revealed { filter: none; user-select: text; cursor: text; }
/* A hash is one string; broken across two lines it stops looking like one, and
   the row it sits on jumps height the moment someone reveals it. It is set
   smaller so all 64 characters fit on that line. */
.masked { font-size: 11px; letter-spacing: -.01em; }
/* In a case file there is room for two lines, which lets the hash be written
   large enough to read. In the table it stays on its row - the row is what has
   to stay scannable. */
.dl--file .masked {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.masked:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }

/* Choosing the registrations table's columns. The list is the arrangement, so
   it reads top to bottom in the order the table will. */
.column-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  max-height: 420px;
  overflow-y: auto;
}
.column-list__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}
.column-list__item:last-child { border-bottom: 0; }
.column-list__item:hover { background: var(--neutral-bg); }
.column-list__label {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.column-list__name {
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.column-list__moves { display: flex; gap: 2px; flex-shrink: 0; }
.column-list__moves .btn { padding: 2px 8px; line-height: 1.2; }
.column-list__item:first-child [data-move="up"],
.column-list__item:last-child [data-move="down"] { visibility: hidden; }

/* Page steppers: an arrow says "back" and "forward" in every language, and
   two words of unequal length made the row jump as the page changed. */
.pagination__arrow { display: inline-flex; align-items: center; justify-content: center; }
.pagination__arrow--prev .icon { transform: rotate(180deg); }

.icon--xs { width: 12px; height: 12px; }

/* The registrations table keeps the platform's own text size - it holds names
   and addresses people read. Only the timestamp is set smaller, because the
   day and the hour are read at a glance rather than word by word. */
.table--sheet td { padding: 12px; }

/* A moment, read in two passes: the day you scan for, the hour you check
   once you have found the row. */
.stamp { display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.3; font-size: 12px; }
.stamp__date,
.stamp__time { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.stamp__date .icon,
.stamp__time .icon { color: var(--text-subtle); flex-shrink: 0; }
.stamp__time { font-size: 10.5px; color: var(--text-muted); }

/* Landing on the table after turning a page: leave room for the sticky top
   bar, or the first rows arrive hidden underneath it. */
#rows { scroll-margin-top: calc(var(--topbar-h) + 12px); }

/* The jump to either end is a narrower control than a page number: it is not
   one of the pages, it is the edge of them. */
.pagination .pagination__arrow--edge { min-width: 20px; width: 20px; padding: 0; }

/* Marking an item resolved: the campaign's own blue, with the tick in the
   campaign's yellow. It is the one action on the row that changes what the
   queue shows, so it does not look like the link beside it. */
.btn--resolve {
  background: var(--michelin-blue);
  border-color: var(--michelin-blue);
  color: #fff;
}
.btn--resolve:hover {
  background: var(--michelin-blue-dark);
  border-color: var(--michelin-blue-dark);
  color: #fff;
}
/* A drawn tick at 15px is a hairline; it is the confirmation of an action, so
   it is drawn heavier than the icons that merely label things. */
.btn--resolve .icon { color: #fff; stroke-width: 3; }

/* The bar that appears once rows are selected. It sits above the list rather
   than floating over it: nothing it covers is worth hiding. */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--info-bg);
}
.bulk-bar[hidden] { display: none; }
.bulk-bar__count { font-size: 12.5px; font-weight: 600; color: var(--michelin-blue); margin-right: auto; }
.is-hidden { display: none; }

/* The column of tick boxes exists only while selecting: a column of empty
   boxes on every visit asks to be read every time, for the one visit in ten
   where several rows are settled at once. */
.bulk-cell { display: none; }
.is-selecting .bulk-cell { display: table-cell; }
.bulk-bar--start { background: transparent; }
.bulk-bar--start[hidden] { display: none; }

/* Two pills of different type sizes are inline boxes on different baselines,
   so one sits lower than the other. A flex row lines them up on their middles. */
.cell-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

/* The operator's own words on a resolved item: upright, not italic like the
   recommended action above it, so the two are not read as one sentence. */
.queue-note { font-size: 12px; color: var(--text); margin-top: 3px; }
.queue-note b { font-weight: 600; color: var(--text-muted); }

/* The manual-link box: the ID is a number, and the label sits inside the field
   so nobody types the prefix as part of it. */
.id-input { display: flex; align-items: stretch; }
.id-input__prefix {
  display: flex; align-items: center;
  padding: 0 10px;
  border: 1px solid var(--border-strong); border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--surface-muted);
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--text-muted);
}
.id-input input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; min-width: 0; flex: 1; }

/* What that ID turns out to be, filled in while the number is typed. */
.lookup {
  margin-top: 8px; padding: 9px 11px; font-size: 12.5px; line-height: 1.45;
  border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius-sm);
  background: var(--surface-muted);
}
.lookup[hidden] { display: none; }
.lookup__meta { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.lookup--ok   { border-left-color: var(--ok);       background: var(--ok-bg); }
.lookup--info { border-left-color: var(--info);     background: var(--info-bg); }
.lookup--warn { border-left-color: var(--critical); background: var(--critical-bg); color: var(--critical); }

/* A second address this person writes from, under the decision. It is the
   reason their next message might arrive unmatched, so it is worth having on
   the record rather than only inside the thread. */
.secondary-mail {
  margin: -10px 0 16px;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}
.secondary-mail__address { font-size: 12.5px; word-break: break-all; margin-top: 2px; }

/* A switch offered beside the result count, because the count is what it
   changes. */
.filters__toggle {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
}
/* Lettered like the filter labels above it: it is one of them, only offered
   later, once there is something for it to narrow. */
.filters__toggle span {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-subtle);
}

/* The ID itself, darker than the words around it. */
.filters__toggle b { color: var(--text-muted); font-weight: 800; }

/* A KPI whose number carries the meaning of its state: amber for undecided,
   red for refused - the same colours those states wear everywhere else. */
.kpi--pending .kpi__value { color: var(--high); }
.kpi--danger .kpi__value  { color: var(--critical); }

/* A wait that has gone on long enough to be worth noticing. */
.cell-sub.is-late { color: var(--critical); font-weight: 600; }

/* A checkbox standing where a select would: same height, same alignment, so
   the filter row does not step. */
.filters__box {
  display: flex; align-items: center; gap: 7px;
  min-height: 34px; font-size: 13px; cursor: pointer;
}

/* A switch among selects: no heading of its own, so it lines up with the
   controls beside it rather than with their labels. */
.field--switch { justify-content: flex-end; }

/* Language: one card per choice, both visible. A dropdown for two options
   hides half of them behind a click. */
.lang-choice { display: flex; gap: 8px; flex-wrap: wrap; }
.lang-choice__option {
  display: flex; align-items: center; gap: 9px; flex: 1 1 160px;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 12px; font-size: 13px; color: var(--text);
  text-decoration: none; background: #fff;
  transition: border-color .15s, background .15s;
}
.lang-choice__option:hover { border-color: var(--border-strong); background: var(--surface-muted); text-decoration: none; }
.lang-choice__option.is-active { border-color: var(--michelin-blue); background: var(--info-bg); font-weight: 600; }
.lang-choice__check { margin-left: auto; color: var(--michelin-blue); display: flex; }

/* One switch, one box. Loose in a stack, a long description wrapped under the
   checkbox and the next title read as part of it. */
.switch-card {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; background: #fff;
  transition: border-color .15s, background .15s;
}
.switch-card:hover { border-color: var(--border-strong); background: var(--surface-muted); }
.switch-card > input { margin-top: 2px; flex: 0 0 auto; }
.switch-card > span { min-width: 0; }
.filters__box .icon { color: var(--text-muted); }