/* Fuatilia design system — local only (no CDN, system fonts). Colour is never the only signal: every state has an icon + label. */
:root {
  --bg: #f4f5f3; --card: #ffffff; --ink: #16181a; --ink-2: #4a5057; --ink-3: #6b7178; --line: #e3e5e1; --line-2: #d3d6d1;
  --brand: #157a3a; --brand-2: #0f5e2c; --brand-soft: #e6f2ea; --action: #1f5aa8; --action-soft: #e8f0fa;
  --red: #c0261a; --red-soft: #fbeae8; --purple: #3e2f57; --purple-soft: #efeaf6; --amber: #b54708; --amber-soft: #fdf1e6;
  --blue: #1d4a85; --blue-soft: #e7eef8; --grey: #7a8087; --grey-soft: #f0f1f2; --teal: #0b6464; --teal-soft: #e3f2f2;
  --focus: #1f5aa8; --sel-bg: #f1f2f1; --sel-edge: #b4b9bc; --sel-ink: #5b6168; --radius: 14px; --radius-s: 9px; --shadow: 0 1px 2px rgba(20,24,28,.05), 0 1px 1px rgba(20,24,28,.03);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 15px/1.45 var(--font); color: var(--ink); background: #fafafa radial-gradient(circle, #d6dad5 1px, transparent 1.3px) 0 0 / 16px 16px; }   /* a white canvas with a dot grid on every page (owner, 1 Oct) */
a { color: var(--action); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 8px; z-index: 50; }
.skip:focus { left: 8px; }

/* layout */
.shell { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.nav { background: #fafbf9; border-right: 1px solid var(--line); padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.nav { scrollbar-width: none; }   /* still scrolls (wheel, keyboard, touch); no grey bar beside the menu */
.nav::-webkit-scrollbar { display: none; }
.brand { display: flex; gap: 10px; align-items: center; padding: 2px 6px 14px; text-decoration: none; color: var(--ink); }
.brand-mark { width: 36px; height: 36px; border-radius: 10px; background: var(--brand); color: #fff; display: grid; place-items: center; }
.brand b { font-size: 19px; display: block; line-height: 1.1; }
.brand small { color: var(--ink-3); font-size: 12px; }
.nav h2 { font-size: 11px; letter-spacing: .08em; color: var(--ink-3); margin: 14px 8px 4px; text-transform: uppercase; }
.nav a.item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 500; }
.nav a.item:hover { background: var(--grey-soft); }
.nav a.item[aria-current="page"] { background: var(--card); box-shadow: var(--shadow); color: var(--brand-2); border: 1px solid var(--line); }
.nav a.item .count { margin-left: auto; background: var(--ink); color: #fff; border-radius: 999px; font-size: 12px; padding: 0 7px; min-width: 22px; text-align: center; }
.nav .status-card { margin-top: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; font-size: 13px; color: var(--ink-2); }
.main { min-width: 0; }
.topbar { display: flex; align-items: center; gap: 10px; padding: 14px 24px; flex-wrap: wrap; }
.topbar h1 { font-size: 22px; margin: 0 auto 0 0; }
.content { padding: 0 24px 40px; display: grid; gap: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-main { display: grid; grid-template-columns: 1.1fr 1.4fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .grid-3, .grid-main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 800px) { .shell { grid-template-columns: 1fr; } .nav { position: static; height: auto; } .grid-2, .grid-3, .grid-main { grid-template-columns: 1fr; } }

/* cards */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); min-width: 0; }
.card h2, .card h3 { margin: 0 0 10px; font-size: 16px; }
.card .sub { color: var(--ink-3); font-size: 13px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.kpi { padding: 4px 16px; border-left: 1px solid var(--line); }
.kpi:first-child { border-left: 3px solid var(--red); }
.kpi .label { display: flex; gap: 6px; align-items: center; color: var(--ink-2); font-size: 13px; }
.kpi .value { font-size: 30px; font-weight: 700; line-height: 1.1; margin: 4px 0; }
.kpi .note { color: var(--ink-3); font-size: 12px; }
@media (max-width: 900px) { .kpis { grid-template-columns: 1fr 1fr; } }

/* chips and buttons */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid var(--line-2); background: var(--card); white-space: nowrap; max-width: 100%; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.chip.red { color: var(--red); background: var(--red-soft); border-color: #f2c7c2; }
.chip.purple { color: var(--purple); background: var(--purple-soft); border-color: #d8cfe6; }
.chip.amber { color: var(--amber); background: var(--amber-soft); border-color: #f3d3b5; }
.chip.blue { color: var(--blue); background: var(--blue-soft); border-color: #c9d8ee; }
.chip.teal { color: var(--teal); background: var(--teal-soft); border-color: #bfe0e0; }
.chip.grey { color: var(--ink-2); background: var(--grey-soft); }
.chip.green { color: var(--brand-2); background: var(--brand-soft); border-color: #bfdcc8; }
.chip.sim { color: #6b3fa0; background: #f3ecfb; border-color: #dccbf1; }
.chip.warn { color: #7a5b00; background: #fff6d6; border-color: #f0dc95; }
.btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); padding: 8px 14px; border-radius: 10px; font: 600 14px var(--font); cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--grey-soft); }
.btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn.primary:hover { background: var(--brand-2); }
.btn.danger { color: var(--red); border-color: #f2c7c2; }
.btn.small { padding: 4px 10px; font-size: 13px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; }
.seg a, .seg button { padding: 7px 12px; font-weight: 700; color: var(--ink); text-decoration: none; border: 0; background: var(--card); font: 700 13px var(--font); cursor: pointer; }
.seg [aria-current="true"], .seg [aria-pressed="true"] { background: var(--ink); color: #fff; }
.pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); background: var(--card); padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; }

/* banners */
.banner { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 12px; font-size: 14px; border: 1px solid; }
.banner.red { background: var(--red-soft); border-color: #f2c7c2; color: #7d1a11; }
.banner.amber { background: var(--amber-soft); border-color: #f3d3b5; color: #6e2c04; }
.banner.info { background: var(--blue-soft); border-color: #c9d8ee; color: #173b6b; }
.banner.sim { background: #f3ecfb; border-color: #dccbf1; color: #4c2b75; }
.banner.public-demo a[data-framed] { margin-left: auto; white-space: nowrap; font-weight: 600; display: inline-flex; gap: 4px; align-items: center; }

/* tables and lists */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 700; }
tr.row-link:hover { background: #fafbfa; }
.mono { font-family: var(--mono); font-size: 13px; }
.muted { color: var(--ink-3); }
.small { font-size: 13px; }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
dl.kv dt { color: var(--ink-3); }
dl.kv dd { margin: 0; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.timeline li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 14px; }
.timeline .when { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }

/* item cards */
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.item-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.item-card:hover { border-color: var(--line-2); }
.item-card.k-investigation_alert { border-color: #f2c7c2; }
.item-card .id { font-size: 22px; font-weight: 800; letter-spacing: .01em; }
.item-card .foot { margin-top: auto; border-top: 1px solid var(--line); padding-top: 8px; display: flex; justify-content: space-between; font-size: 13px; }

/* SMS + evidence */
.sms { font-family: var(--mono); background: #fbfbf8; border: 1px dashed var(--line-2); border-radius: 10px; padding: 10px 12px; white-space: pre-wrap; word-break: break-word; }
mark.ev { background: #fff0a8; border-radius: 3px; padding: 0 2px; }
mark.ev.s-absent_explicit { background: #d9efe0; }
mark.ev.s-uncertain, mark.ev.s-conflicting { background: #fde2c8; }
mark.ev.s-death, mark.ev.s-validated, mark.ev.s-flagged { background: #e7def3; }
.state { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; }
.state.present { color: var(--red); } .state.absent_explicit { color: var(--teal); } .state.not_mentioned { color: var(--ink-3); }
.state.uncertain, .state.conflicting { color: var(--amber); }

/* phones */
.phones { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.phone { background: #1b1d1f; border-radius: 26px; padding: 10px; box-shadow: 0 8px 22px rgba(0,0,0,.14); display: flex; flex-direction: column; min-height: 440px; }
.phone .screen { background: #eef0ec; border-radius: 18px; flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.phone header { padding: 10px 12px; background: #fff; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 14px; }
.phone header small { display: block; font-weight: 500; color: var(--ink-3); font-size: 12px; }
.phone .thread { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 6px; max-height: 320px; }
.bubble { max-width: 88%; padding: 7px 10px; border-radius: 14px; font-size: 13px; line-height: 1.35; word-break: break-word; }
.bubble.out { align-self: flex-end; background: #d4edda; border-bottom-right-radius: 4px; }
.bubble.in { align-self: flex-start; background: #fff; border-bottom-left-radius: 4px; border: 1px solid var(--line); }
.bubble .meta { display: block; font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.phone form { display: flex; gap: 6px; padding: 8px; background: #fff; border-top: 1px solid var(--line); }
.phone form input { flex: 1; min-width: 0; border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 12px; font: 14px var(--font); }

/* forms */
label { font-weight: 600; font-size: 14px; }
input[type=text], input[type=search], select, textarea { border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 10px; font: 14px var(--font); background: #fff; color: var(--ink); max-width: 100%; }
fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 0; }
legend { font-weight: 700; padding: 0 6px; }
.radio-row { display: flex; flex-wrap: wrap; gap: 6px; }
.radio-row label { font-weight: 500; display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.radio-row input:checked + span { font-weight: 700; }

/* toast */
#toast { position: fixed; bottom: 18px; right: 18px; max-width: 420px; z-index: 40; display: grid; gap: 8px; }
.toast { background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 12px; font-size: 14px; box-shadow: 0 8px 22px rgba(0,0,0,.2); }
.toast.error { background: var(--red); }
.toast.conflict { background: #7a5b00; }
.stale { opacity: .6; }
.empty { color: var(--ink-3); text-align: center; padding: 22px; }

/* fixes + utilities (no inline styles: CSP style-src 'self') */
[hidden] { display: none !important; }
.timeline ul { margin: 6px 0; padding-left: 18px; }
.timeline ul li { display: list-item; }
.grid-main { grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr); }
@media (max-width: 1000px) { .grid-main { grid-template-columns: 1fr; } }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row-end { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.stack { display: grid; gap: 16px; align-content: start; min-width: 0; }
.stack-s { display: grid; gap: 8px; }
.stack-m { display: grid; gap: 10px; }
.inline-form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.big { font-size: 26px; font-weight: 700; }
.maxw { max-width: 640px; }
.id-sub { font-size: 15px; }

/* Narrow screens: long chips wrap, wide tables scroll inside their own box instead of the page */
.chip svg, .chip .dot { flex: none; }
fieldset { min-width: 0; }
dd, li { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 1400px) { .chip { white-space: normal; } }
@media (max-width: 800px) { table { display: block; max-width: 100%; overflow-x: auto; } }
.inline-form, .inline-form select, .inline-form input { max-width: 100%; min-width: 0; }
/* Phones: the menu becomes one scrollable row so the page content starts on the first screen */
@media (max-width: 800px) {
  .nav { flex-direction: row; align-items: center; gap: 4px; overflow-x: auto; overflow-y: hidden; height: auto; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .nav h2, .nav .status-card, .nav .brand small { display: none; }
  .nav .brand { margin: 0 8px 0 0; flex: none; }
  .nav .item { flex: none; white-space: nowrap; margin: 0; }
}

/* ================================================================ shell v2 (agent A): rail / expanded sidebar, top bar, bell */
.red { color: var(--red); } .teal { color: var(--teal); } .amber { color: var(--amber); } .b { font-weight: 700; }
.grow { flex: 1 1 auto; }
kbd { font: 600 11px var(--mono); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; background: #fff; color: var(--ink-2); }
.nav button.item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--ink); background: none; border: 0; font: 500 15px var(--font); cursor: pointer; width: 100%; text-align: left; }
.nav button.item:hover { background: var(--grey-soft); }
.nav .item svg { flex: none; }
.nav a.item.sim { color: #6b3fa0; }
.nav .brand-mark { background: var(--brand); }
.nav .rail-only, .nav .item.rail-only { display: none; }
.nav-bottom { margin-top: auto; display: grid; gap: 4px; padding-top: 12px; }
.nav .status-card { margin-top: 0; padding: 0 0 12px; overflow: hidden; display: grid; gap: 6px; }
.nav .status-card > * { margin: 0 12px; }
.nav .status-card .sc-mark { margin: 0; padding: 12px 12px 0; background: linear-gradient(180deg, var(--brand-soft), #fff); display: block; }
.nav .status-card .sc-mark svg { width: 34px; height: 34px; padding: 8px; border-radius: 9px; background: var(--brand); color: #fff; }
.nav .status-card b { color: var(--ink); font-size: 14px; }
.nav .status-card p { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.nav .status-card[data-state="down"] .sc-mark { background: linear-gradient(180deg, var(--red-soft), #fff); }
.nav .status-card[data-state="down"] .sc-mark svg { background: var(--red); }
.nav .status-card .sc-link { font-size: 12.5px; display: inline-flex; gap: 5px; align-items: center; }
.btn.block { display: flex; justify-content: center; width: auto; }
.idsearch { position: relative; display: flex; align-items: center; margin: 0 0 6px; }
.idsearch-ic { position: absolute; left: 10px; color: var(--ink-3); display: flex; }
.idsearch input { width: 100%; padding: 8px 44px 8px 32px; border-radius: 10px; background: #fff; }
.idsearch kbd { position: absolute; right: 8px; }

/* icon rail (every page except the dashboard, unless Réglages says otherwise) */
@media (min-width: 801px) {
  .is-rail .shell { grid-template-columns: 64px 1fr; }
  .is-rail .nav { padding: 12px 8px; align-items: center; gap: 2px; overflow: visible; }
  .is-rail .nav .brand { padding: 0 0 10px; }
  .is-rail .nav .brand-text, .is-rail .nav h2, .is-rail .nav .status-card { display: none; }
  .is-rail .nav .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .is-rail .nav .item { width: 44px; height: 42px; justify-content: center; padding: 0; position: relative; }
  .is-rail .nav .rail-only, .is-rail .nav .item.rail-only { display: flex; }
  .is-rail .nav a.item[aria-current="page"] { background: var(--brand-soft); border-color: transparent; box-shadow: none; color: var(--brand-2); }
  .is-rail .nav .item .count { position: absolute; top: 2px; right: 0; margin: 0; font-size: 10px; min-width: 17px; padding: 0 4px; line-height: 16px; }
  .is-rail .nav .item[data-tip]:hover::after, .is-rail .nav .item[data-tip]:focus-visible::after {
    content: attr(data-tip); position: absolute; left: 52px; top: 50%; transform: translateY(-50%); background: var(--ink); color: #fff;
    font: 600 12.5px var(--font); padding: 5px 9px; border-radius: 7px; white-space: nowrap; z-index: 30; pointer-events: none; }
  .is-rail .nav .idsearch { display: none; position: absolute; left: 60px; top: 58px; width: 280px; z-index: 35; background: #fff;
    border: 1px solid var(--line-2); border-radius: 12px; padding: 8px; box-shadow: 0 10px 28px rgba(20,24,28,.16); }
  .is-rail .nav .idsearch .idsearch-ic { left: 18px; }
  .is-rail .nav .idsearch kbd { right: 16px; }
  .is-rail .nav.search-open .idsearch { display: flex; }
  .is-rail .nav-bottom { justify-items: center; }
}

/* top bar */
.topbar { gap: 8px; min-height: 64px; }
.topbar h1 { font-size: 22px; }
.topbar-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.crumbs { display: flex; align-items: center; gap: 8px; margin-right: auto; font-size: 15px; min-width: 0; flex-wrap: wrap; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .sep { color: var(--ink-3); }
.crumbs .crumb-cur { border: 1px solid var(--line-2); background: var(--card); border-radius: 8px; padding: 2px 10px; font-weight: 700; color: var(--brand-2); }
.pill-link { color: var(--ink); text-decoration: none; }
.pill-link:hover { background: var(--grey-soft); }
.user-chip { color: var(--ink); text-decoration: none; padding: 5px 8px 5px 12px; border-radius: 10px; }
.user-chip:hover { background: var(--grey-soft); }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 38px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--card); color: var(--ink); cursor: pointer; position: relative; list-style: none; }
.icon-btn:hover { background: var(--grey-soft); }
summary.icon-btn::-webkit-details-marker, .menu > summary::-webkit-details-marker { display: none; }
.menu > summary { list-style: none; cursor: pointer; }
.bell-wrap, .menu { position: relative; }
.bell-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff; font: 700 11px/18px var(--font); border: 2px solid var(--bg); }
.popover { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; background: #fff; border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 12px 30px rgba(20,24,28,.16); width: 340px; max-width: calc(100vw - 24px); padding: 10px; }
.pop-head { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 4px 4px; }
.pop-note { margin: 0 4px 6px; }
.notif-list { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow-y: auto; display: grid; gap: 2px; }
.notif-list a { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 9px; color: var(--ink); text-decoration: none; font-size: 13.5px; }
.notif-list a:hover { background: var(--grey-soft); }
.notif-list li.unread a { background: #f6f9fd; }
.notif-list .notif-txt { flex: 1; min-width: 0; }
.notif-list small { display: block; color: var(--ink-3); font-size: 12px; }
.notif-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--grey-soft); color: var(--ink-2); flex: none; }
.notif-ic.red { background: var(--red-soft); color: var(--red); }
.pop-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid var(--line); margin-top: 6px; padding: 8px 4px 2px; font-size: 13.5px; flex-wrap: wrap; }
.pop-foot a { display: inline-flex; gap: 4px; align-items: center; font-weight: 600; }
.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.page-head h1 { font-size: 24px; margin: 0 8px 0 0; }
.page-head > :last-child:not(h1) { margin-left: auto; }
.content:focus { outline: none; }

/* dashboard */
.card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.card-head h2 { margin: 0; font-size: 17px; }
.select-wrap { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; padding: 0 4px 0 10px; font-weight: 600; font-size: 14px; }
.select-wrap select { border: 0; padding: 7px 6px; font-weight: 700; background: transparent; }
.day-pick, .head-form { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.js .js-hide { display: none; }
.menu-pop { width: 320px; display: grid; gap: 8px; font-size: 14px; }
.menu-pop a { display: inline-flex; gap: 6px; align-items: center; }
.menu-pop h3 { margin: 0; }
dl.defs { margin: 0; display: grid; gap: 2px; }
dl.defs dt { font-weight: 700; margin-top: 4px; } dl.defs dd { margin: 0; color: var(--ink-2); }
.kpi { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; border-radius: 0 8px 8px 0; }
a.kpi:hover { background: #fafbfa; }
.kpi .value.red { color: var(--red); }
.kpi.k-alert { border-left: 3px solid var(--red); }
.kpi-extra { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
.kpi-extra a { color: var(--ink-2); text-decoration: none; display: inline-flex; gap: 5px; align-items: center; }
.kpi-extra a:hover { color: var(--ink); text-decoration: underline; }
.search-box { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; padding: 0 10px; color: var(--ink-3); min-width: 0; }
.search-box input { border: 0; padding: 8px 0; min-width: 0; width: 170px; background: transparent; }
.search-box input:focus-visible { outline: none; }
.search-box:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.seg button { display: inline-flex; gap: 6px; align-items: center; }
label.check { display: flex; gap: 8px; align-items: center; font-weight: 500; padding: 3px 0; }
.ldot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--grey); flex: none; }
.ldot.g-investigation { background: var(--red); } .ldot.g-death { background: var(--purple); } .ldot.g-review { background: var(--amber); }
.ldot.g-incomplete { background: var(--blue); } .ldot.g-info { background: var(--grey); }

/* rich item cards */
.items { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
/* owner's dashboard design (1 Oct): text on the left, the figure large on the right running behind the footer box */
.icard { position: relative; display: flex; flex-direction: column; background: #f6f7f5; border: 1px solid var(--line);
  border-radius: 16px; padding: 16px 16px 14px; min-width: 0; min-height: 268px; overflow: hidden; }
.icard:hover { border-color: var(--line-2); background: #f3f4f1; }
.icard:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.icard.is-hot { background: #fff6f4; border-color: #f2c7c2; }
.icard-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; padding-right: 38%; }
.icard-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.spill { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: 13.5px; color: var(--ink); white-space: nowrap; }
.spill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grey); flex: none; }
.spill.red .dot { background: var(--red); } .spill.teal .dot { background: var(--teal); } .spill.amber .dot { background: var(--amber); }
.spill.blue .dot { background: var(--blue); } .spill.grey .dot { background: var(--grey); } .spill.purple .dot { background: var(--purple); }
.spill.red svg { color: var(--red); }
.icard .icard-id { margin: 2px 0 0; font-size: 27px; font-weight: 800; letter-spacing: .005em; line-height: 1.15; }
.icard-id a { color: var(--ink); text-decoration: none; }
.icard-id a.stretched::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.icard-id a:focus-visible { outline: none; }
.icard-title { margin: 0; font-weight: 700; font-size: 15.5px; line-height: 1.3; overflow-wrap: anywhere; }
.icard-sum { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.icard-art { position: absolute; top: 10px; right: 2px; bottom: 0; width: 42%; display: flex; justify-content: center; align-items: flex-start;
  pointer-events: none; }
.icard-foot { position: relative; z-index: 1; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 11px;
  display: grid; gap: 5px; font-size: 14px; margin-top: 14px; box-shadow: 0 1px 2px rgba(20, 24, 28, .04); }
.icard-foot .metric b { font-weight: 800; }
.row-sb { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.icard-art .bf-mini { width: 100%; height: auto; -webkit-mask-image: none; mask-image: none; }
.art-tag { position: absolute; top: 40%; left: 50%; transform: translateX(-50%); background: #fff; border: 1.5px solid var(--line-2); border-radius: 999px; padding: 3px 12px; font-size: 13px; font-weight: 700; white-space: nowrap; box-shadow: 0 1px 3px rgba(20, 24, 28, .08); }
.art-circle { width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; margin-top: 10px; }
.art-circle.purple { background: var(--purple-soft); color: var(--purple); }
.art-circle.mourning { width: 120px; height: 120px; background: #eeeaf2; border: 1px solid #ddd5e6; }
.art-ribbon { width: 64px; height: 64px; }
.art-ribbon path { fill: none; stroke: #2d2238; stroke-width: 6.5; stroke-linejoin: round; }
.art-ribbon .over-edge { stroke: #eeeaf2; stroke-width: 10; }
.art-circle.green { background: #e3f1e7; color: var(--brand-2); }
.art-circle.green svg { width: 40px; height: 40px; }
svg.bar { display: block; width: 100%; height: 6px; border-radius: 3px; background: repeating-linear-gradient(135deg, #e8eae6 0 3px, #f6f7f5 3px 6px); }
svg.bar.segs { background: none; }
svg.bar .fill { fill: var(--ink); } svg.bar .fill.red { fill: var(--red); } svg.bar .fill.teal { fill: var(--teal); }
svg.bar .seg-empty { fill: #e8eae6; }
.area-chips { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.area-chips .chip { font-size: 12px; padding: 1px 7px; }
.icard.g-info .icard-foot span:last-child { color: var(--brand-2); font-weight: 700; }
/* list view: one row per item */
.items.is-list { grid-template-columns: 1fr; gap: 8px; }
.items.is-list .icard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); grid-template-rows: auto; padding: 10px 12px; min-height: 0; }
.items.is-list .icard-main { padding-right: 0; }
.items.is-list .icard-art { display: none; }
.items.is-list .icard-foot { grid-column: 2; grid-row: 1; margin: 0; }
.items.is-list .icard-main { flex-direction: row; flex-wrap: wrap; align-items: baseline; align-content: flex-start; gap: 4px 12px; }
.items.is-list .icard-pills { margin: 0; }
.items.is-list .icard-id { font-size: 18px; }
.items.is-list .icard-sum { flex-basis: 100%; }
@media (max-width: 700px) { .items.is-list .icard { grid-template-columns: 1fr; } .items.is-list .icard-foot { grid-column: 1; grid-row: auto; } }

/* work queue */
.head-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.head-tools .seg a { padding: 7px 9px; }
.head-tools .btn.primary { padding: 8px 12px; }
.page-head { gap: 8px; }
.head-tools .select-wrap select { padding: 7px 2px; }
.seg.tabs a { white-space: nowrap; }
.queue-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 14px; align-items: start; }
@media (max-width: 1100px) { .queue-layout { grid-template-columns: 1fr; } }
.queue-card { padding: 12px 0 0; overflow: hidden; }
.queue-card .card-head { padding: 0 12px; }
.legend { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; flex-wrap: wrap; color: var(--ink-2); }
.legend li { display: inline-flex; gap: 5px; align-items: center; }
.table-wrap { overflow-x: auto; }
.qtable { font-size: 13.5px; }
.qtable th { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ink-2); padding: 8px 10px; }
.qtable thead th:first-child { padding-left: 50px; }
.qtable tr.band th { background: #f4f5f3; color: var(--ink); font-size: 13.5px; font-weight: 700; padding: 6px 12px; border-top: 1px solid var(--line); }
.qtable tr.band .ldot { margin-right: 8px; }
.qtable td { padding: 8px 10px; vertical-align: middle; }
.qrow { cursor: pointer; }
.qrow:hover { background: #fafbf9; }
.qrow td.sum { min-width: 240px; max-width: 420px; }
.qrow td.sum > span { display: block; line-height: 1.3; }
.el { display: flex; gap: 10px; align-items: center; }
.el-txt { display: grid; gap: 2px; justify-items: start; }
.el-id { font-weight: 800; color: var(--ink); text-decoration: none; }
.el-id:hover { text-decoration: underline; }
.kic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--grey-soft); color: var(--ink-2); flex: none; }
.kic.g-investigation { background: var(--red-soft); color: var(--red); } .kic.g-death { background: var(--purple-soft); color: var(--purple); }
.kic.g-review { background: var(--amber-soft); color: var(--amber); } .kic.g-incomplete { background: var(--blue-soft); color: var(--blue); }
.kchip { display: inline-block; white-space: nowrap; border-radius: 6px; padding: 1px 8px; font-weight: 700; font-size: 12.5px; background: var(--grey-soft); color: var(--ink-2); }
.kchip.g-investigation { background: var(--red-soft); color: var(--red); } .kchip.g-death { background: var(--purple-soft); color: var(--purple); }
.kchip.g-review { background: var(--amber-soft); color: var(--amber); } .kchip.g-incomplete { background: var(--blue-soft); color: var(--blue); }
.who { display: inline-flex; gap: 7px; align-items: center; white-space: nowrap; }
.avatar { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-2); font: 800 11px var(--font); flex: none; }
td.delay { min-width: 92px; }
td.delay a { color: var(--brand-2); text-decoration: none; }
td.delay a:hover { text-decoration: underline; }
td.delay svg.bar { margin-top: 4px; height: 5px; }
.qfoot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border-top: 1px solid var(--line); }
.preview { position: sticky; top: 12px; display: grid; gap: 10px; align-content: start; }
.preview.g-investigation { border-color: #f2c7c2; }
.pv-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.eyebrow { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; margin: 0; }
.pv-title { margin: 0; font-size: 18px; }
.pv-sms { display: grid; gap: 3px; background: #f4f5f3; border-radius: 10px; padding: 8px 10px; overflow-wrap: anywhere; }
.pv-kv { font-size: 13.5px; }
details.why { border: 1px solid var(--line-2); border-radius: 10px; }
details.why.g-investigation { border-color: #f2c7c2; }
details.why > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; font-weight: 700; border-radius: 10px; }
details.why.g-investigation > summary { background: var(--red-soft); color: #7d1a11; }
details.why > summary::-webkit-details-marker { display: none; }
details.why[open] > summary svg { transform: rotate(180deg); }
details.why ol { margin: 8px 0; padding: 0 10px 0 34px; font-size: 13px; display: grid; gap: 6px; }
details.why ol li::marker { font-weight: 800; color: var(--red); }
.caution { display: flex; gap: 8px; align-items: flex-start; background: #fff6d6; border: 1px solid #f0dc95; color: #5c4600; border-radius: 10px; padding: 8px 10px; font-size: 13px; margin: 0; }
.caution svg { flex: none; margin-top: 2px; }
.pv-actions { display: grid; gap: 8px; }
.pv-areas { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 13.5px; }
.pv-areas .ids { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.pv-areas .chip { text-decoration: none; font-size: 12px; }

/* settings + login */
.settings kbd { font-size: 12px; }
.persona-list { display: grid; gap: 8px; }
.persona { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 12px; cursor: pointer; font-weight: 500; }
.persona:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.persona input { margin-top: 4px; }
.persona small { display: block; font-size: 12.5px; }

/* narrow screens: rail and expanded both collapse to the scrollable top row; no horizontal page scroll */
@media (max-width: 800px) {
  .nav .idsearch, .nav .nav-bottom .status-card, .nav .rail-search-btn { display: none; }
  .nav-bottom { margin: 0; padding: 0; display: flex; gap: 4px; }
  .nav .nav-toggle { display: none; }
  .nav .rail-only { display: flex; }
  .is-rail .nav .lbl { display: inline; }
  .topbar { padding: 10px 12px; }
  .content { padding: 0 12px 32px; }
  .topbar-tools { margin-left: 0; }
  .user-chip b { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kpi { border-left: 0; border-top: 1px solid var(--line); padding: 8px 4px; }
  .kpi.k-alert { border-left: 3px solid var(--red); padding-left: 10px; }
  .search-box input { width: 120px; }
  .popover { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; }
  .qtable thead { display: none; }
  .qtable, .qtable tbody, .qtable tr, .qtable td, .qtable th { display: block; width: 100%; }
  .qtable tr.qrow { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
  .qtable tr.qrow td { border: 0; padding: 2px 0; }
  .qtable tr.qrow td:first-child { grid-column: 1 / -1; }
  .qrow td.sum { max-width: none; grid-column: 1 / -1; }
  .table-wrap { overflow: visible; }
}
@media (max-width: 800px) {
  .shell, .is-rail .shell { grid-template-columns: minmax(0, 1fr); }
  .nav { min-width: 0; max-width: 100vw; position: relative; }
  .nav .item { position: relative; }
  .main { min-width: 0; max-width: 100vw; }
}
.pill-down { color: var(--red); background: var(--red-soft); border-color: #f2c7c2; }
.pill-down:hover { background: #f8dcd8; }
/* The topbar shows either « Local · internet non requis » or « Extraction indisponible », not both (every page). */
.topbar-tools:has(#model-chip:not([hidden])) > a.pill-link[href="/systeme"]:not(#model-chip) { display: none; }
/* Hidden labels are absolutely positioned: keep them inside a scrolling table instead of widening the page */
table, .table-scroll { position: relative; }

/* auto-refresh control (app.js), the nav's "more demos" group, and the compact shell used where space is short */
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--action); text-decoration: underline; cursor: pointer; }
.ar-ctl { display: inline-flex; gap: 4px; align-items: baseline; white-space: nowrap; }
.qfoot .ar-ctl { margin-left: auto; }
.nav-more > summary { list-style: none; }
.nav-more > summary::-webkit-details-marker { display: none; }
.nav summary.item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--ink-2); font-weight: 500; cursor: pointer; }
.nav summary.item:hover { background: var(--grey-soft); }
.nav summary.item .count { margin-left: auto; background: var(--grey-soft); color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 999px; font-size: 12px; padding: 0 7px; min-width: 22px; text-align: center; }
.nav-more[open] > summary .count { display: none; }
.nav-more { display: grid; gap: 4px; }
.pill-local .short { display: none; }
@media (min-width: 801px) and (max-height: 900px) {
  .is-expanded .nav { padding: 10px 12px; gap: 1px; }
  .is-expanded .nav a.item, .is-expanded .nav button.item, .is-expanded .nav summary.item { padding: 5px 10px; }
  .is-expanded .nav h2 { margin: 8px 8px 2px; }
  .is-expanded .nav .brand { margin-bottom: 4px; }
  .is-expanded .nav .idsearch { margin-bottom: 2px; }
  .is-expanded .nav-more { gap: 1px; }
  .is-expanded .nav-bottom { padding-top: 6px; gap: 1px; }
  .is-expanded .nav .status-card { gap: 4px 8px; padding: 8px 10px; }
  .is-expanded .nav .status-card .sc-mark { padding: 0; }
  .is-expanded .nav .status-card .sc-mark svg { width: 26px; height: 26px; padding: 5px; }
  .is-expanded .nav .status-card p { font-size: 12px; line-height: 1.3; }
  .is-expanded .nav .status-card .btn { padding: 4px 10px; }
}
@media (min-width: 801px) and (max-width: 1440px) {
  /* top bar tools that no longer fit beside the breadcrumb: the expanded sidebar, or Swahili's longer labels */
  .is-expanded:not(.page-dashboard) .pill-local .full, html[lang="sw"] body:not(.page-dashboard) .pill-local .full,
  .is-expanded:not(.page-dashboard) .user-chip .uc-role, html[lang="sw"] body:not(.page-dashboard) .user-chip .uc-role {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .is-expanded:not(.page-dashboard) .pill-local .short, html[lang="sw"] body:not(.page-dashboard) .pill-local .short { display: inline; }
  .is-expanded:not(.page-dashboard) .crumbs .crumb-cur, html[lang="sw"] body:not(.page-dashboard) .crumbs .crumb-cur {
    max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.topbar .ar-ctl .ar-state { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 1101px) and (max-width: 1440px) {
  /* the queue table keeps its Délai column in view when the sidebar is expanded or the labels are Swahili */
  .is-expanded .queue-layout, html[lang="sw"] .queue-layout { grid-template-columns: minmax(0, 1fr) 280px; }
  .is-expanded .qtable .kchip, html[lang="sw"] .qtable .kchip { white-space: normal; }
  .is-expanded .qtable .kic, html[lang="sw"] .qtable .kic { display: none; }
  .is-expanded .qtable thead th:first-child, html[lang="sw"] .qtable thead th:first-child { padding-left: 10px; }
  .is-expanded .qtable td, .is-expanded .qtable th, html[lang="sw"] .qtable td, html[lang="sw"] .qtable th { padding-left: 6px; padding-right: 6px; }
}
@media (min-width: 801px) and (max-width: 1400px) {
  html[lang="sw"] .page-dashboard .btn-refresh .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 800px) {
  .nav-more { display: flex; gap: 4px; flex: none; }
  .nav-more > summary.item { flex: none; white-space: nowrap; }
}

/* state pill and evidence chip: shared by the reported-signs page and the alert page (Hifi-Body) */
.sg-state-pill { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 6px; border-radius: 999px; background: var(--grey-soft); border: 1px solid var(--line-2); }
.sg-state-pill.st-present { background: var(--red-soft); border-color: #f2c7c2; }
.sg-state-pill.st-absent_explicit { background: var(--teal-soft); border-color: #bfe0e0; }
.sg-state-pill.st-not_mentioned { border-style: dashed; }
.sg-state-pill.st-uncertain, .sg-state-pill.st-conflicting { background: var(--amber-soft); border-color: #f3d3b5; }
/* evidence is quoted SMS text: wrap only between words, never inside one */
.sg-ev { display: inline-block; padding: 1px 6px; border-radius: 6px; background: var(--grey-soft); font-weight: 700; overflow-wrap: break-word; }
.sg-ev.st-present { background: #f9d3ce; color: #7d1a11; }
.sg-ev.st-absent_explicit { background: #cfeaea; color: #094848; }
.sg-ev.st-uncertain, .sg-ev.st-conflicting { background: #fde2c8; color: #6e2c04; }

/* how quickly to act (owner request 1 Oct): review queue and work queue — a badge with its reasons in words */
.rv-lvl { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 12.5px; line-height: 1.35; }
.rv-lvl > b { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px 1px 7px; border-radius: 999px; font-size: 12px; letter-spacing: .01em; white-space: nowrap; }
.rv-lvl svg { flex: none; }
.rv-lvl.lvl-act { color: var(--red); } .rv-lvl.lvl-act > b { background: var(--red); color: #fff; }
.rv-lvl.lvl-check { color: var(--amber); } .rv-lvl.lvl-check > b { background: var(--amber-soft); color: var(--amber); border: 1px solid #f1cfae; }
.rv-lvl.lvl-routine { color: var(--ink-3); } .rv-lvl.lvl-routine > b { background: var(--grey-soft); color: var(--ink-2); }
.rv-lvl-r { color: var(--ink-2); }
.rv-lvl-r::before { content: "· "; color: var(--ink-3); }
/* the contact's 21 days, from the start to today (the contact page's calendar, small) */
/* the 21-day course (owner requests of 1 Oct): a progress ring (day of 21), three count chips, then the 21 days in
   three weeks: a glyph and a colour for what was reported, today ringed with its date, the days to come as dots.
   The ring is calendar progress only; nothing here is a reading of the person's health. */
.rv-course { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; min-width: 0; }   /* anchors its screen-reader-only labels: inside a list that scrolls on its own they must scroll with it, or they stretch the page */
.rv-ring { position: relative; width: 52px; height: 52px; flex: none; }
.rv-ring svg { width: 52px; height: 52px; display: block; }
.rv-ring-bg { fill: #fff; stroke: #e4e8e3; stroke-width: 4.5; }
.rv-ring-fg { fill: none; stroke: var(--brand); stroke-width: 4.5; stroke-linecap: round; }
.rv-ring-t { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; line-height: 1; }
.rv-ring-t b { font: 800 17px/1 var(--font); color: var(--ink); letter-spacing: -.02em; }
.rv-ring-t i { font: 700 9.5px/1.2 var(--font); font-style: normal; color: var(--ink-3); }
.rv-course-main { display: grid; gap: 6px; min-width: 0; }
.rv-course-h { display: flex; flex-wrap: wrap; gap: 4px 5px; align-items: center; font-size: 12px; color: var(--ink-2); line-height: 1.3; }
.rv-strip-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* the ring says it; kept for readers and where the ring is hidden */
.rv-cchip { display: inline-flex; gap: 4px; align-items: center; padding: 1px 8px 1px 6px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
            background: #fff; border: 1px solid var(--line-2); color: var(--ink-2); }
.rv-cchip b { font-weight: 800; color: var(--ink); }
.rv-cchip > span[aria-hidden] { font-weight: 800; }
.rv-cchip.c-ok { background: var(--teal-soft); border-color: #bfe0e0; } .rv-cchip.c-ok > span[aria-hidden] { color: var(--teal); }
.rv-cchip.c-sign { background: var(--red-soft); border-color: #f2c7c2; } .rv-cchip.c-sign > span[aria-hidden], .rv-cchip.c-sign b { color: var(--red); }
.rv-cchip.c-none { border-style: dashed; border-color: var(--ink-3); }
.rv-cchip.c-none.is-zero { border-color: var(--line-2); color: var(--ink-3); } .rv-cchip.c-none.is-zero b { color: var(--ink-3); }
.rv-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; padding-bottom: 13px; }
.rv-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; min-width: 0; }
.rv-week-l { grid-column: 1 / -1; font: 700 9.5px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; white-space: nowrap; overflow: hidden; }
.rv-week [data-j] { position: relative; height: 21px; border-radius: 6px; display: grid; place-items: center; font: 800 11px/1 var(--font); color: transparent; }
.rv-strip .s-nothing { background: var(--teal-soft); color: var(--teal); box-shadow: inset 0 0 0 1px #bfe0e0; }
.rv-strip .s-signs { background: var(--red); color: #fff; }
.rv-strip .s-death { background: var(--purple); color: #fff; }
.rv-strip .s-incomplete, .rv-strip .s-attention { background: var(--blue-soft); color: var(--blue); box-shadow: inset 0 0 0 1px #c9d8ee; }
.rv-strip .s-not_seen { background: var(--amber-soft); color: var(--amber); box-shadow: inset 0 0 0 1px #f1cfae; }
.rv-strip .s-no_report, .rv-strip .s-no_report_cutoff { background: #fff; box-shadow: inset 0 0 0 1px var(--ink-3); color: var(--ink-2); }
/* days to come: a small dot on a faint track, so the eye stops at today */
.rv-strip .s-upcoming, .rv-strip .s-expected:not(.today) { background: #f1f3f0; }
.rv-strip .s-upcoming::before, .rv-strip .s-expected:not(.today)::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #b9c0b9; }
.rv-strip .today { box-shadow: 0 0 0 2px var(--ink), 0 0 0 5px rgba(22, 24, 26, .10); background: #fff; z-index: 1; }
.rv-strip .today.s-signs { background: var(--red); } .rv-strip .today.s-nothing { background: var(--teal-soft); }
.rv-strip .today.s-incomplete, .rv-strip .today.s-attention { background: var(--blue-soft); } .rv-strip .today.s-not_seen { background: var(--amber-soft); }
.rv-strip .today.s-death { background: var(--purple); }
.rv-strip .today::after { content: attr(data-d); position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 5px; white-space: nowrap;
                          font: 800 9.5px/1 var(--mono); color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .rv-strip .today { animation: rv-today 2.6s ease-in-out infinite; }
  @keyframes rv-today { 50% { box-shadow: 0 0 0 2px var(--ink), 0 0 0 7px rgba(22, 24, 26, .04); } }
}
/* work queue (owner request 1 Oct): the same levels as the review queue, a priority column, rows tinted to match */
.qrow.lvl-act { background: #fff7f5; } .qrow.lvl-act:hover { background: #fff1ee; }
.qrow.lvl-check { background: #fffbf4; } .qrow.lvl-check:hover { background: #fff6e8; }
.qrow.lvl-act td:first-child { box-shadow: inset 4px 0 0 var(--red); }
.qrow.lvl-check td:first-child { box-shadow: inset 4px 0 0 #e3a066; }
.qtable td.lvl { min-width: 130px; max-width: 170px; }
.qtable td.lvl .rv-lvl { display: grid; justify-items: start; gap: 3px; }
.qtable td.lvl .rv-lvl-r::before { content: ""; }
.q-course { display: block; margin-top: 9px; max-width: 470px; }
.qtable td { padding: 8px 8px; }
.qtable .el { gap: 8px; }
@media (min-width: 1101px) and (max-width: 1380px) { .queue-layout { grid-template-columns: minmax(0, 1fr) 250px; } }
@media (min-width: 801px) and (max-width: 1380px) {
  .qrow td.sum { min-width: 200px; }
  .qtable td.lvl { min-width: 112px; }
  .qtable .kchip { white-space: normal; }
  .qtable thead th:first-child { padding-left: 46px; }
}
/* work queue (owner request 1 Oct): like the review queue, the list stays in view and scrolls on its own, scrollbar
   hidden; the search bar, the column titles, the footer and the preview stay put */
@media (min-width: 1101px) {
  .queue-card { position: sticky; top: 12px; max-height: calc(100vh - 24px); display: flex; flex-direction: column; }
  .queue-card > .table-wrap { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .queue-card > .table-wrap::-webkit-scrollbar { display: none; }
  .queue-card > .table-wrap:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
  .queue-card .qtable thead th { position: sticky; top: 0; z-index: 2; background: var(--card); box-shadow: inset 0 -1px 0 var(--line); }
  .queue-card .qtable tr.band th { position: sticky; top: 35px; z-index: 1; }
}

/* ================================================================ menu v3 (owner request, 1 Oct): the menu tells the demo's story
   Dashboard, then 1 Act · 2 Follow · 3 Prove, each group headed by a number and its verb (with a short hint when
   expanded), and the demonstration tools apart in a tinted zone. In the rail every icon keeps a short name under it and
   each group shows its verb above a hairline, so the menu reads without hovering. Colour is never the only cue: the
   current page is also a filled pill with a bold name; the status dot sits beside a "Status" label. */
.nav .sl { display: none; }
.nav .nav-h { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 1px 8px; margin: 16px 8px 4px; font-size: 11px;
              letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); min-width: 0; }
.nav .nav-n { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff;
              font: 800 10.5px/1 var(--font); letter-spacing: 0; }
.nav .nav-v { flex: none; font-weight: 800; color: var(--ink-2); }
.nav .nav-hint { grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; letter-spacing: 0;
                 font-weight: 500; font-size: 12px; line-height: 1.2; }
.nav a.item[aria-current="page"] svg { color: var(--brand); }
.nav a.item[aria-current="page"] .lbl { font-weight: 700; }
.nav-demo { margin-top: 14px; padding: 2px 4px 6px; border-radius: 12px; background: #f6f2fb; border: 1px dashed #d8c7ee; display: grid; gap: 2px; }
.nav-demo .nav-h { margin: 8px 6px 4px; color: #6b3fa0; }
.nav-demo .nav-v { color: #5a3590; }
.nav-demo .nav-n { background: #6b3fa0; }
.nav-demo .nav-n svg { width: 11px; height: 11px; }
.nav-demo a.item, .nav-demo summary.item { color: #4f2d80; }
.nav-demo a.item:hover, .nav-demo summary.item:hover { background: #ece3f7; }
.nav-demo a.item[aria-current="page"] { color: #4f2d80; }
.nav-demo a.item[aria-current="page"] svg { color: #6b3fa0; }
.nav-demo summary.item .count { background: #fff; border-color: #d8c7ee; color: #5a3590; }

/* the status card, compact: the shield beside its title, the two links on one row */
.nav .status-card { grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 6px 8px; padding: 10px 12px; }
.nav .status-card > * { margin: 0; }
.nav .status-card .sc-mark { padding: 0; background: none; }
.nav .status-card .sc-mark svg { width: 28px; height: 28px; padding: 6px; border-radius: 8px; }
.nav .status-card b { line-height: 1.2; }
.nav .status-card p, .nav .status-card .btn, .nav .status-card .sc-link { grid-column: 1 / -1; }
.nav .status-card .sc-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.nav .status-card .sc-foot .btn { padding: 4px 10px; font-size: 13px; }
.nav .status-card[data-state="down"] .sc-mark { background: none; }
@media (min-height: 901px) { .is-expanded .nav a.item, .is-expanded .nav summary.item { padding-top: 5px; padding-bottom: 5px; } }
@media (min-height: 961px) { .is-expanded .nav a.item, .is-expanded .nav summary.item { padding-top: 6px; padding-bottom: 6px; } }
@media (min-height: 1121px) { .is-expanded .nav a.item, .is-expanded .nav summary.item { padding-top: 7px; padding-bottom: 7px; } }

@media (min-width: 801px) {
  .is-rail .shell { grid-template-columns: 78px 1fr; }
  .is-rail .nav { padding: 10px 6px 12px; gap: 2px; }
  .is-rail .nav .brand { padding: 0 0 8px; }
  .is-rail .nav .item { width: 64px; height: auto; min-height: 48px; flex-direction: column; justify-content: center; gap: 3px; padding: 6px 2px 5px; border: 1px solid transparent; }
  .is-rail .nav .sl { display: block; max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 10.5px/1.15 var(--font);
                      letter-spacing: -.005em; color: var(--ink-2); }
  .is-rail .nav a.item[aria-current="page"] { background: var(--brand-soft); border-color: #bfe0ca; }
  .is-rail .nav a.item[aria-current="page"] .sl { color: var(--brand-2); font-weight: 800; }
  .is-rail .nav .item .count { top: 2px; right: 3px; }
  .is-rail .nav .item[data-tip]:hover::after, .is-rail .nav .item[data-tip]:focus-visible::after { left: 70px; }
  .is-rail .nav .idsearch { left: 72px; }
  .is-rail .nav .nav-h { display: flex; flex-direction: column; justify-content: center; width: 60px; margin: 6px 0 2px; padding-top: 7px; border-top: 1px solid var(--line-2); gap: 0; }
  .is-rail .nav .nav-n, .is-rail .nav .nav-hint { display: none; }
  .is-rail .nav .nav-v { max-width: 66px; overflow: hidden; font-size: 8.5px; letter-spacing: .03em; color: var(--ink-3); }
  .is-rail .nav-demo { width: 70px; margin-top: 8px; padding: 2px 2px 4px; justify-items: center; }
  .is-rail .nav-demo .nav-h { border-top: 0; padding-top: 4px; margin: 2px 0 0; }
  .is-rail .nav-demo .nav-n { display: grid; }
  .is-rail .nav-demo .nav-v { display: none; }
  .is-rail .nav-demo .sl { color: #5a3590; }
  .is-rail .nav-demo a.item[aria-current="page"] { background: #ece3f7; border-color: #d8c7ee; }
  .is-rail .nav-demo a.item[aria-current="page"] .sl { color: #4f2d80; }
  .is-rail .nav-more { justify-items: center; }
  .nav-sys::before { content: ""; position: absolute; top: 6px; right: 17px; width: 9px; height: 9px; border-radius: 50%; background: var(--brand);
                     box-shadow: 0 0 0 2px #fafbf9; }
  .nav:has(#health-pill[data-state="down"]) .nav-sys::before { background: var(--red); }
}
/* shorter screens: tighter rail; below 820 px of height the rail falls back to icons only (names stay in the tooltips) */
@media (min-width: 801px) and (max-height: 1000px) {
  .is-rail .nav { padding-top: 8px; gap: 1px; }
  .is-rail .nav .brand { padding-bottom: 4px; }
  .is-rail .nav .item { min-height: 42px; padding: 3px 2px 2px; gap: 2px; }
  .is-rail .nav .nav-h { margin: 3px 0 1px; padding-top: 5px; }
  .is-rail .nav-demo { margin-top: 5px; }
  .is-rail .nav-demo .nav-h { display: none; }   /* the tint already marks the zone */
}
@media (min-width: 801px) and (max-height: 1060px) {
  .is-expanded .nav .nav-hint { display: none; }
  .is-expanded .nav .nav-h { margin: 10px 8px 2px; }
  .is-expanded .nav .status-card p { display: none; }   /* the top bar already says "local · no internet needed" */
}
@media (min-width: 801px) and (max-height: 900px) {
  .is-expanded .nav .nav-h { margin: 9px 8px 2px; }
  .is-expanded .nav-demo { margin-top: 8px; }
  .is-expanded .nav-demo .nav-h { display: none; }   /* the tint already marks the zone */
}
@media (min-width: 801px) and (max-height: 820px) {
  .is-expanded .nav a.item, .is-expanded .nav button.item, .is-expanded .nav summary.item { padding-top: 4px; padding-bottom: 4px; }
  .is-expanded .nav .brand { padding-bottom: 6px; }
}
@media (min-width: 801px) and (max-height: 860px) {
  .is-rail .nav .nav-v { display: none; }
  .is-rail .nav .nav-h { padding-top: 0; margin: 4px 0; }
  .is-rail .nav-demo .nav-h { display: none; }
}
@media (min-width: 801px) and (max-height: 800px) {
  .is-rail .nav .sl { display: none; }
  .is-rail .nav .item { min-height: 36px; }
}
@media (max-width: 800px) {
  .nav-demo { display: contents; }
  .nav .nav-h { display: none; }
}

/* ================================================================ work queue as cards (owner request, 1 Oct)
   Each item is a white card with a soft shadow on a quiet panel, instead of ruled table rows. It stays a table (the
   column headers and the keyboard order are kept): the rows are spaced, the first and last cells carry the rounded
   corners, and every cell draws its share of the border and of the shadow under the card. The work level is the
   badge and a light tint; the selected item has a green ring. No coloured stripe on the left edge. */
.queue-card { background: #f3f5f2; }
.queue-card .card-head { padding: 0 14px; margin-bottom: 6px; }
.qtable { border-collapse: separate; border-spacing: 0 9px; font-size: 13.5px; }
.queue-card > .table-wrap { padding: 0 10px 6px; }
.qtable thead th { border-bottom: 0; padding: 4px 8px 0; font-size: 12px; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.qtable tr.band th { background: transparent; border: 0; padding: 12px 4px 0; font-size: 13px; font-weight: 800; letter-spacing: .01em; color: var(--ink); }
.qtable tr.band [data-band-n] { display: inline-grid; place-items: center; min-width: 22px; padding: 0 6px; margin-left: 2px; border-radius: 999px;
                                background: #fff; border: 1px solid var(--line-2); font: 700 12px var(--font); color: var(--ink-2); }
.qtable tbody tr:not(.band):not(.qrow) td { background: transparent; border: 0; padding: 2px 6px 0; }
.qtable tr.qrow td { background: #fff; border: 0; border-top: 1px solid #e4e7e2; border-bottom: 1px solid #e4e7e2; padding: 12px 7px; transition: background .12s; }
/* one shadow for the whole card: a layer behind the row (the first cell's ::before, positioned on the row). A CSS
   filter on the row would leave hairlines between the cells on a high-density screen; a shadow per cell would shade
   the neighbouring cell. */
.queue-card > .table-wrap { isolation: isolate; }
.qtable tr.qrow { position: relative; }
.qtable tr.qrow td:first-child::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 14px; pointer-events: none;
                                         background: var(--qbg);   /* the card's own colour behind the cells: nothing shows between them */
                                         box-shadow: 0 5px 12px -2px rgba(22, 30, 26, .13); transition: box-shadow .12s; }
.qtable tr.qrow:hover td:first-child::before { box-shadow: 0 9px 18px -3px rgba(22, 30, 26, .20); }
.qtable tr.qrow td:first-child { border-left: 1px solid #e4e7e2; border-radius: 14px 0 0 14px; padding-left: 12px; }
.qtable tr.qrow td:last-child { border-right: 1px solid #e4e7e2; border-radius: 0 14px 14px 0; padding-right: 12px; }
.qtable thead th:first-child { padding-left: 12px; }
.queue-card .qrow td.sum { min-width: 230px; max-width: none; }
.queue-card .qtable td.lvl { min-width: 104px; max-width: 150px; }
.queue-card td.delay { min-width: 80px; }
/* where the table is tight (expanded menu or Swahili's longer words on a laptop): the owner is the initials, the
   name stays for screen readers and in the tooltip; "unassigned" is never shortened */
@media (min-width: 1101px) and (max-width: 1700px) {
  .is-expanded .qtable .who-name:not(.red), html[lang="sw"] .qtable .who-name:not(.red) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .is-expanded .queue-card .qrow td.sum, html[lang="sw"] .queue-card .qrow td.sum { min-width: 200px; }
}
.qrow, .qrow:hover, .qrow.lvl-act, .qrow.lvl-act:hover, .qrow.lvl-check, .qrow.lvl-check:hover { background: transparent; box-shadow: none; }
.qrow.lvl-act td:first-child, .qrow.lvl-check td:first-child { box-shadow: 1px 0 0 var(--qbg); }
.qtable tr.qrow.lvl-act td { background: #fff8f6; border-color: #f3d2cd; }
.qtable tr.qrow.lvl-check td { background: #fffcf6; border-color: #f1dfc6; }
/* cells meet at fractional pixels: each one spills its own background one pixel to the right, so no hairline shows
   between the cells of a card on a high-density screen */
.qtable tr.qrow { --qbg: #fff; }
.qtable tr.qrow.lvl-act { --qbg: #fff8f6; }
.qtable tr.qrow.lvl-check { --qbg: #fffcf6; }
.qtable tr.qrow td:not(:last-child) { box-shadow: 1px 0 0 var(--qbg); }
.qtable .el-id { font-size: 15px; letter-spacing: .01em; }
.qtable td.mono.b { font-size: 14.5px; }
.qrow td.sum > span:first-child { font-weight: 600; color: var(--ink); line-height: 1.35; }
.qtable td.delay b { font-size: 14px; }
.qfoot { background: #f3f5f2; }
@media (min-width: 1101px) {
  .queue-card .qtable thead th { background: #f3f5f2; box-shadow: none; padding-bottom: 6px; }
  .queue-card .qtable tr.band th { top: 24px; background: #f3f5f2; padding-bottom: 4px; }
}
@media (max-width: 800px) {
  .qtable { border-spacing: 0; }
  .qtable tr.qrow { border: 1px solid #e4e7e2; border-radius: 14px; margin: 8px 0; padding: 10px 12px; background: #fff; }
  .qtable tr.qrow td, .qtable tr.qrow td:first-child, .qtable tr.qrow td:last-child { border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 2px 0; }
  .qtable tr.qrow.lvl-act { background: #fff8f6; border-color: #f3d2cd; } .qtable tr.qrow.lvl-check { background: #fffcf6; border-color: #f1dfc6; }
}
/* where the strip is narrow (the review side queue, a tight table): no ring; the day chip says "J9/21" */
.rv-queue .rv-course { grid-template-columns: minmax(0, 1fr); margin-top: 4px; }
.rv-queue .rv-ring { display: none; }
.rv-queue .rv-strip-k, .rv-course.no-ring .rv-strip-k { position: static; width: auto; height: auto; clip: auto; overflow: visible; font: 800 11.5px var(--mono); color: var(--ink);
                                                        background: var(--grey-soft); border: 1px solid var(--line-2); border-radius: 6px; padding: 1px 6px; }
.rv-queue .rv-strip { gap: 5px; }
.rv-queue .rv-week-l { letter-spacing: 0; font-size: 9px; }
/* the chips keep their glyph and number; the word stays for screen readers and in the tooltip-free strip summary */
.rv-queue .rv-cchip-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rv-queue .rv-cchip { padding: 1px 7px; }
.rv-queue .rv-week [data-j] { height: 18px; border-radius: 5px; font-size: 9.5px; }
/* an expanded menu or Swahili on a laptop: the summary column is too narrow for the ring beside 21 readable days */
@media (min-width: 1101px) and (max-width: 1700px) {
  .is-expanded .q-course .rv-course, html[lang="sw"] .q-course .rv-course { grid-template-columns: minmax(0, 1fr); }
  .is-expanded .q-course .rv-ring, html[lang="sw"] .q-course .rv-ring { display: none; }
  .is-expanded .q-course .rv-week-l, html[lang="sw"] .q-course .rv-week-l { letter-spacing: 0; font-size: 9px; }
  .is-expanded .q-course .rv-strip, html[lang="sw"] .q-course .rv-strip { gap: 6px; }
  .is-expanded .q-course .rv-strip-k, html[lang="sw"] .q-course .rv-strip-k { position: static; width: auto; height: auto; clip: auto; overflow: visible; font: 800 11.5px var(--mono);
    color: var(--ink); background: var(--grey-soft); border: 1px solid var(--line-2); border-radius: 6px; padding: 1px 6px; }
}
@media (min-width: 1101px) and (max-width: 1340px) {
  .is-expanded .queue-card .qrow td.sum, html[lang="sw"] .queue-card .qrow td.sum { min-width: 176px; }
  .is-expanded .qtable td.lvl .rv-lvl > b, html[lang="sw"] .qtable td.lvl .rv-lvl > b { white-space: normal; border-radius: 10px; }
  .is-expanded .queue-card .qtable td.lvl, html[lang="sw"] .queue-card .qtable td.lvl { min-width: 96px; }
  .is-expanded .queue-card td.delay, html[lang="sw"] .queue-card td.delay { min-width: 66px; }
  .is-expanded .qtable tr.qrow td, html[lang="sw"] .qtable tr.qrow td { padding-left: 5px; padding-right: 5px; }
}

/* ================================================================ work queue, timeline view (owner request, 1 Oct)
   A Gantt reading of the same rows: a shared calendar (month band, weekday + date), a "today" line through every
   row, and each contact's 21 follow-up days as bars: consecutive days with the same stored state are one bar (glyph
   + words + number of days), the days to come are a dashed track up to day 21. Colour repeats the glyph and the
   words, never the other way round. */
.q-views { margin-left: 4px; }
.q-views a { display: inline-flex; gap: 6px; align-items: center; }
.qgantt { table-layout: fixed; border-spacing: 0 6px; min-width: 860px; }
.qgantt col.gc-item { width: 178px; } .qgantt col.gc-contact { width: 54px; } .qgantt col.gc-lvl { width: 112px; }
.qgantt col.gc-owner { width: 38px; } .qgantt col.gc-time { width: 82px; }
.qgantt thead th { padding: 0; vertical-align: bottom; overflow: visible; }
.qgantt tr.g-months th { padding: 0 1px 4px; }
.qgantt .g-lead { text-align: left; padding-left: 12px; font-size: 12px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.qgantt .g-lead svg { vertical-align: -2px; margin-right: 4px; color: var(--ink-3); }
.qgantt .g-month { text-align: center; }
.qgantt .g-mband { display: block; margin: 0 1.5px; background: #e4e8e3; border-radius: 7px; padding: 5px 2px; overflow: hidden; white-space: nowrap;
                   font: 800 10.5px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.qgantt tr.g-days th { padding: 5px 6px 6px; font-size: 12px; }
.qgantt tr.g-days th:first-child { padding-left: 12px; }
.qgantt tr.g-days th.g-d { padding: 4px 0 5px; text-align: center; line-height: 1.15; }   /* pinned (sticky) on a wide screen: that also anchors the "today" tag */
@media (max-width: 1100px) { .qgantt tr.g-days th.g-d { position: relative; } }
.qgantt .g-wd { display: block; font: 700 8.5px var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); overflow: hidden; }
.qgantt .g-dn { display: block; font: 700 12px var(--mono); color: var(--ink); }
.qgantt th.g-d.we .g-dn, .qgantt th.g-d.we .g-wd { color: #9aa29a; }
.qgantt th.g-d.today .g-dn { background: #1e4f6b; color: #fff; border-radius: 6px; margin: 0 1px; }
.qgantt th.g-d.today .g-wd { color: #1e4f6b; }
.qgantt .g-today-tag { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 1px; padding: 2px 7px; border-radius: 6px; z-index: 3;
                       background: #1e4f6b; color: #fff; font: 800 10.5px var(--font); letter-spacing: .02em; white-space: nowrap; }
.qgantt tr.qrow td { padding: 8px 6px; vertical-align: middle; }
.qgantt tr.qrow td:first-child { padding-left: 10px; }
.qgantt .el { gap: 7px; }
.qgantt .kic { width: 26px; height: 26px; }
.qgantt .kchip { white-space: normal; font-size: 11.5px; line-height: 1.25; }
.qgantt .el-id { font-size: 14px; }
.qgantt td.lvl { min-width: 0; }
.qgantt td.lvl .rv-lvl-r { display: none; }                       /* the reasons are in the card view and the preview */
.qgantt td.lvl .rv-lvl > b { font-size: 11.5px; padding: 2px 8px 2px 6px; }
html[lang="sw"] .qgantt td.lvl .rv-lvl > b { white-space: normal; border-radius: 10px; }
.qgantt td.delay { min-width: 0; }
.qgantt td.delay b { font-size: 12.5px; }
.qgantt tr.qrow td.g-cell { padding: 9px 1px; }
.qgantt tr.qrow td.g-cell:last-child { padding-right: 8px; }
/* today: one line through every row */
.qgantt tr.qrow td.today { background: linear-gradient(#1e4f6b, #1e4f6b) center / 2px 100% no-repeat, var(--qbg); }
.g-bar, .g-track { display: flex; align-items: center; gap: 5px; height: 26px; border-radius: 8px; padding: 0 7px; min-width: 0; overflow: hidden; white-space: nowrap;
                   font: 700 11.5px/1 var(--font); }
.g-bar.is-one, .g-bar.g-now { padding: 0; justify-content: center; }
.g-gl { flex: none; font-weight: 800; font-size: 12px; }
.g-lab { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.g-n { flex: none; margin-left: auto; padding: 1px 6px; border-radius: 999px; background: rgba(255, 255, 255, .7); font: 800 10.5px var(--mono); color: inherit; }
.g-bar.s-nothing { background: var(--teal-soft); color: #0b5a5a; box-shadow: inset 0 0 0 1px #b5dada; }
.g-bar.s-signs { background: var(--red); color: #fff; } .g-bar.s-signs .g-n { background: rgba(255, 255, 255, .22); }
.g-bar.s-death { background: var(--purple); color: #fff; } .g-bar.s-death .g-n { background: rgba(255, 255, 255, .22); }
.g-bar.s-incomplete, .g-bar.s-attention { background: var(--blue-soft); color: #173b6b; box-shadow: inset 0 0 0 1px #c9d8ee; }
.g-bar.s-not_seen { background: var(--amber-soft); color: #6e2c04; box-shadow: inset 0 0 0 1px #f1cfae; }
.g-bar.s-no_report, .g-bar.s-no_report_cutoff { background: #fff; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--ink-3); }
.g-bar.s-expected, .g-bar.s-upcoming { background: #fff; }
.g-bar.g-now { box-shadow: 0 0 0 2px #1e4f6b, 0 0 0 5px rgba(30, 79, 107, .14); position: relative; z-index: 1; }
.g-track { justify-content: flex-end; color: var(--ink-3); font: 600 10.5px var(--mono); border: 1px dashed #c3c9c3;
           background: repeating-linear-gradient(90deg, #f6f7f5 0 6px, #eff1ee 6px 12px); }
.g-note { margin: 2px 6px 8px; }
@media (min-width: 1101px) {
  .queue-card .qgantt thead tr.g-months th { top: 0; padding-top: 6px; height: 34px; }
  .queue-card .qgantt thead tr.g-days th { top: 40px; height: 36px; }
  .queue-card .qgantt tr.band th { top: 82px; }
  /* pinned rows are opaque, including the gaps between them: nothing shows through while the list scrolls */
  .queue-card .qgantt thead th { background: #f3f5f2; box-shadow: 0 -7px 0 #f3f5f2, 0 7px 0 #f3f5f2; }
  .queue-card .qgantt tr.band th { box-shadow: 0 -7px 0 #f3f5f2; }
  .queue-card .qgantt thead tr.g-days th.today { z-index: 4; }   /* its "today" tag sits above the neighbours' backgrounds */
}
@media (max-width: 800px) {
  .qgantt, .qgantt thead, .qgantt tbody, .qgantt tr, .qgantt td, .qgantt th { display: revert; width: auto; }   /* stays a table: it scrolls sideways */
  .qgantt thead { display: table-header-group; }
  .queue-card > .table-wrap { overflow-x: auto; }
}

/* work queue cards (owner request, 1 Oct): the 21-day strip takes the whole width of its column, with larger cells
   and more air between the weeks; a count of zero days without a report is not shown (less to read) */
.q-course { max-width: none; margin-top: 11px; }
.q-course .rv-course { gap: 14px; }
.q-course .rv-course-main { gap: 9px; }
.q-course .rv-strip { gap: 16px; padding-bottom: 16px; }
.q-course .rv-week { gap: 4px; }
.q-course .rv-week-l { margin-bottom: 4px; }
.q-course .rv-week [data-j] { height: 25px; border-radius: 7px; font-size: 12px; }
.q-course .rv-strip .today::after { margin-top: 6px; font-size: 10px; }
.q-course .rv-cchip.c-none.is-zero { display: none; }
/* the strip adapts to the width it really has: under 520 px no ring (the day chip says it) and tighter weeks */
.q-course { container-type: inline-size; }
@container (max-width: 520px) {
  .q-course .rv-course { grid-template-columns: minmax(0, 1fr); }
  .q-course .rv-ring { display: none; }
  .q-course .rv-strip-k { position: static; width: auto; height: auto; clip: auto; overflow: visible; font: 800 11.5px var(--mono); color: var(--ink);
                          background: var(--grey-soft); border: 1px solid var(--line-2); border-radius: 6px; padding: 1px 6px; }
  .q-course .rv-strip { gap: 8px; }
  .q-course .rv-week { gap: 2px; }
  .q-course .rv-week-l { letter-spacing: 0; font-size: 9px; }
}
@container (max-width: 300px) { .q-course .rv-week [data-j] { height: 21px; font-size: 10.5px; border-radius: 5px; } .q-course .rv-strip { gap: 5px; } }
.queue-card .qtable:not(.qgantt) td.sum { width: 46%; }   /* the summary and its strip get the room; the other columns keep what they need */
.g-text { display: block; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* a row with no follow-up course says what it is */

/* ================================================================ work queue canvas (owner request, 1 Oct, from a
   node-canvas reference): a near-white panel with a dot grid, plain white cards whatever the level (the level is
   said by its badge and its words, in red where it must stand out), and a grey selection instead of a coloured ring.
   Keyboard focus keeps the blue outline. */
.queue-card { background: #fafafa radial-gradient(circle, #d3d7d2 1px, transparent 1.3px) 0 0 / 16px 16px; }
.qfoot { background: #fafafa; }
.qtable tr.qrow, .qtable tr.qrow.lvl-act, .qtable tr.qrow.lvl-check { --qbg: #fff; }
.qtable tr.qrow td, .qtable tr.qrow.lvl-act td, .qtable tr.qrow.lvl-check td { background: #fff; border-color: #e6e8e5; }
.qtable tr.qrow td:first-child::before { box-shadow: 0 1px 2px rgba(22, 30, 26, .05), 0 6px 16px -4px rgba(22, 30, 26, .12); }
.qtable tr.qrow:hover td:first-child::before { box-shadow: 0 1px 2px rgba(22, 30, 26, .06), 0 10px 22px -5px rgba(22, 30, 26, .18); }
.qtable tr.qrow.is-sel { --qbg: var(--sel-bg); }
.qtable tr.qrow.is-sel td { background: var(--sel-bg); border-color: var(--sel-edge); box-shadow: inset 0 1px 0 var(--sel-edge), inset 0 -1px 0 var(--sel-edge), 1px 0 0 var(--qbg); }
.qtable tr.qrow.is-sel td:first-child { box-shadow: inset 1px 0 0 var(--sel-edge), inset 0 1px 0 var(--sel-edge), inset 0 -1px 0 var(--sel-edge), 1px 0 0 var(--qbg); }
.qtable tr.qrow.is-sel td:last-child { box-shadow: inset -1px 0 0 var(--sel-edge), inset 0 1px 0 var(--sel-edge), inset 0 -1px 0 var(--sel-edge); }
.qtable tr.qrow.is-sel td:first-child::before { box-shadow: 0 8px 18px -4px rgba(22, 30, 26, .22); }
.qgantt tr.qrow td.today { background: linear-gradient(#1e4f6b, #1e4f6b) center / 2px 100% no-repeat, var(--qbg); }
@media (min-width: 1101px) {
  .queue-card .qtable thead th, .queue-card .qtable tr.band th { background: #fafafa; }
  .queue-card .qgantt thead th { background: #fafafa; box-shadow: 0 -7px 0 #fafafa, 0 7px 0 #fafafa; }
  .queue-card .qgantt tr.band th { box-shadow: 0 -7px 0 #fafafa; }
}
/* group titles as grey bars (owner request, 1 Oct), like the month bands above them: the bar is drawn behind the words, the
   cell itself stays the opaque cover that hides the cards sliding under a pinned title */
.queue-card .qtable tr.band th { padding: 13px 12px 7px; }
@media (max-width: 1100px) { .queue-card .qtable tr.band th { position: relative; z-index: 0; } }   /* wider: the title is pinned (sticky), which already anchors the bar */
.queue-card .qtable tr.band th::before { content: ""; position: absolute; inset: 6px 0 0; z-index: -1; border-radius: 9px; background: #eceeec; box-shadow: inset 0 0 0 1px #dfe2df; }
.queue-card .qtable tbody:first-of-type tr.band th { padding-top: 7px; }
.queue-card .qtable tbody:first-of-type tr.band th::before { top: 0; }
@media (min-width: 1101px) { .queue-card .qtable tr.band th { z-index: 2; } }   /* a pinned title also covers the raised « today » marker of the row sliding under it */
@media (max-width: 800px) {
  .qtable tr.qrow, .qtable tr.qrow.lvl-act, .qtable tr.qrow.lvl-check { background: #fff; border-color: #e6e8e5; }
  .qtable tr.qrow.is-sel { background: var(--sel-bg); border-color: var(--sel-edge); outline: 0; box-shadow: inset 0 0 0 1px var(--sel-edge); }
  .qtable tr.qrow td, .qtable tr.qrow.lvl-act td, .qtable tr.qrow.lvl-check td, .qtable tr.qrow.is-sel td { background: transparent; box-shadow: none; }
}

/* ================================================================ list tables as cards (owner request, 4 Oct: "like the way you
   designed" the work queue). Any list table can take `.ctable` inside a `.card.canvas`: it stays a table (headers,
   keyboard order, screen-reader structure), each row is drawn as a white card with one soft shadow on the dotted
   canvas. Same construction as the work queue: the first cell's ::before is the card behind the row. */
.card.canvas { background: #fafafa radial-gradient(circle, #d3d7d2 1px, transparent 1.3px) 0 0 / 16px 16px; padding: 10px 12px 8px; }
.card.canvas > h2 { margin: 6px 8px 2px; }
.card.canvas > .table-scroll, .card.canvas > .dz-scroll, .card.canvas > .rv-table-wrap { isolation: isolate; padding: 0 4px 10px; }
table.ctable { border-collapse: separate; border-spacing: 0 10px; }
.ctable thead th { background: transparent; border: 0; padding: 6px 12px 0; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.ctable tbody tr { position: relative; background: transparent; }
.ctable tbody td, .ctable tbody th { background: #fff; border: 0; border-top: 1px solid #e6e8e5; border-bottom: 1px solid #e6e8e5; padding: 13px 12px; vertical-align: top; }
.ctable tbody tr > :not(:last-child) { box-shadow: 1px 0 0 #fff; }
.ctable tbody tr > :first-child { border-left: 1px solid #e6e8e5; border-radius: 14px 0 0 14px; padding-left: 16px; }
.ctable tbody tr > :last-child { border-right: 1px solid #e6e8e5; border-radius: 0 14px 14px 0; padding-right: 16px; }
.ctable tbody tr > :first-child::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 14px; pointer-events: none; background: #fff;
                                       box-shadow: 0 1px 2px rgba(22, 30, 26, .05), 0 6px 16px -4px rgba(22, 30, 26, .12); transition: box-shadow .12s; }
.ctable tbody tr:hover > :first-child::before { box-shadow: 0 1px 2px rgba(22, 30, 26, .06), 0 10px 22px -5px rgba(22, 30, 26, .18); }
.ctable tbody tr.row-link:hover { background: transparent; }
.ctable tbody td > a:first-child > b { font-size: 15px; letter-spacing: .01em; }

.ctable td.mono:not(.small), .ctable td.sg-nowrap { white-space: nowrap; }
.sg-list-table.ctable tbody td, .sg-list-table.ctable thead th { padding-left: 7px; padding-right: 7px; }
.sg-list-table.ctable td:first-child { min-width: 13.5em; padding-left: 14px; }
.sg-list-table.ctable .state { font-size: 13.5px; }
/* a report that says a death (owner request, 4 Oct): its own colour, the app's purple for deaths, with the chip in words.
   It is the report's content, not a verdict: the supervisor still decides (rule 6). */
.ctable tbody tr.is-death td { background: var(--purple-soft); border-color: #b9a8d6; box-shadow: 1px 0 0 var(--purple-soft); }
.ctable tbody tr.is-death td:last-child { box-shadow: none; }
.ctable tbody tr.is-death td:first-child { border-left: 5px solid var(--purple); }
.ctable tbody tr.is-death > :first-child::before { background: var(--purple-soft); box-shadow: 0 1px 2px rgba(62, 47, 87, .1), 0 6px 16px -4px rgba(62, 47, 87, .3); }
.ctable tbody tr.is-death .chip.purple { background: var(--purple); color: #fff; border-color: var(--purple); }
.card.canvas > p { margin: 0 8px 2px; }
#ct-table.ctable tbody td { vertical-align: middle; }
#ct-table.ctable tbody td:nth-child(2) { white-space: nowrap; }
.card.canvas > h2 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ctable td.empty { text-align: center; color: var(--ink-3); }
.ctable tbody th { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); text-align: left; }
/* a selected row (rules) and an inactive one keep the card and change its colour */
.ctable tbody tr.is-sel > * { background: var(--sel-bg); border-color: var(--sel-edge); box-shadow: 1px 0 0 var(--sel-bg); }
.ctable tbody tr.is-sel > :first-child::before { background: var(--sel-bg); box-shadow: 0 8px 18px -4px rgba(22, 30, 26, .22); }
.ctable tbody tr.rule-off > * { background: #f4f5f4; color: var(--ink-2); box-shadow: 1px 0 0 #f4f5f4; }
.ctable tbody tr.rule-off > :first-child::before { background: #f4f5f4; }
/* settings (owner request, 4 Oct): complete rows; the last card alone on its row takes the full width, and each
   card's action sits on the card's bottom line */
@media (min-width: 801px) {
  .settings > .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .settings > .card { display: flex; flex-direction: column; }
  .settings > .card > :last-child:is(p, form) { margin-top: auto; }
  .settings > .card > form { display: flex; flex-direction: column; flex: 1; }
  .settings > .card > form > :last-child { margin-top: auto; align-self: flex-start; }
}
@media (min-width: 801px) { .settings > .card > p:last-child { padding-top: 12px; margin-bottom: 0; } .settings > .card > form > :last-child { margin-top: auto; padding-top: 0; } .settings > .card > form > fieldset:last-of-type { margin-bottom: 14px; } }
/* narrow single cards (role chooser, "not found") sit in the middle of the page (owner request, 5 Oct) */
.login-card { margin: 28px auto 0; width: 100%; }