/* Disabled buttons: muted fill, grey cursor — a functional .disabled
   must also be visibly inert on every button face (IMPL-320 visual
   gate: the setup face's Create button carried the disabled attribute
   but rendered pixel-identical to an active primary). */
.btn:disabled,
.btn-primary:disabled,
.btn-ghost:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: saturate(0.55);
}

/**
 * MeayarAI — Direction C4 · Steel (shade variant of C · Gulf Gov)
 * Component layer: app shell, navigation, cards, controls, tables,
 * chat, modal, and toast. All layout uses CSS logical properties so
 * the AR/RTL <-> EN/LTR flip mirrors automatically.
 */

/* ---------------------------------------------------------------- */
/* App shell: fixed sidebar + content column                         */
/* ---------------------------------------------------------------- */

/* Dark frame: the whole page wears the chrome gradient. The content
   column is a light sheet with a curved top corner (CUBE-style notch),
   so the sidebar/topbar junction is a smooth curve, not a hard cut. */
.shell {
  min-height: 100vh;
  background: linear-gradient(180deg, var(--chrome) 0%, var(--chrome-2) 100%);
}

.sidebar {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px 20px;
  z-index: 30;
}

/* Brand lockup: the white logo sits directly on the dark frame. */
.brand {
  display: flex;
  align-items: center;
  margin: 0 0 4px;
  padding: 6px 12px 14px;
}

.brand img {
  height: 88px;
  width: auto;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--chrome-line);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  color: var(--chrome-ink-dim);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-link svg {
  flex: none;
}

.nav-link:hover {
  background: var(--chrome-hover);
  color: var(--chrome-ink);
}

.nav-link.is-active {
  background: var(--chrome-hover);
  color: var(--chrome-ink);
  font-weight: 700;
}

.main {
  margin-inline-start: var(--sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: 13px 28px;
  background: var(--chrome);
  color: var(--chrome-ink);
}

.page-title {
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* Light content sheet over the dark frame; the top corner toward the
   sidebar is rounded so the frame/sheet junction curves smoothly. */
.content {
  width: 100%;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  background: var(--canvas);
  border-start-start-radius: 22px;
}

/* Role-gated wrapper (users page): transparent to the content flex layout. */
.content-admin {
  display: contents;
}

/* ---------------------------------------------------------------- */
/* Buttons                                                           */
/* ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn:hover {
  background: var(--surface);
}

.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-ink);
}

.btn-primary:hover {
  background: #0B2BD6;
  border-color: #0B2BD6;
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}

.btn-ghost:hover {
  background: var(--surface);
  color: var(--ink);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 14.5px;
}

/* ---------------------------------------------------------------- */
/* Segmented role switcher                                           */
/* ---------------------------------------------------------------- */

.role-switch {
  display: flex;
  align-items: center;
  gap: 8px;
}

.role-switch-label {
  font-size: 14px;
  color: var(--muted);
}

.role-switch-group {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.role-switch-group .btn {
  border: none;
  background: transparent;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 14.5px;
  color: var(--muted);
}

.role-switch-group .btn:hover {
  color: var(--ink);
  background: transparent;
}

.role-switch-group .btn.is-active {
  background: var(--bg);
  color: var(--primary);
  box-shadow: var(--shadow);
}

/* ---------------------------------------------------------------- */
/* Controls sitting on the chrome topbar                             */
/* ---------------------------------------------------------------- */

.topbar .role-switch-label {
  color: var(--chrome-ink-dim);
}

.topbar .role-switch-group {
  background: var(--chrome-hover);
  border-color: transparent;
}

.topbar .role-switch-group .btn {
  color: var(--chrome-ink-dim);
}

.topbar .role-switch-group .btn:hover {
  color: var(--chrome-ink);
  background: transparent;
}

.topbar .role-switch-group .btn.is-active {
  background: #FFFFFF;
  color: var(--chrome);
  box-shadow: none;
}

.topbar .btn-ghost {
  color: var(--chrome-ink-dim);
}

.topbar .btn-ghost:hover {
  background: var(--chrome-hover);
  color: var(--chrome-ink);
}

/* Light focus ring on dark chrome surfaces. */
.sidebar :focus-visible,
.topbar :focus-visible {
  outline-color: var(--chrome-ink);
}

/* ---------------------------------------------------------------- */
/* Cards and stat cards                                              */
/* ---------------------------------------------------------------- */

.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card-pad {
  padding: 20px;
}

.card-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}

.card-sub {
  font-size: 14.5px;
  color: var(--muted);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}

.stat-card {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-label {
  font-size: 14.5px;
  color: var(--muted);
  font-weight: 600;
}

.stat-value {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
}

.stat-note {
  font-size: 14px;
  color: var(--st-done);
  font-weight: 600;
}

.reminder-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
}

.reminder-list li {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.reminder-list li::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sev-medium);
  transform: translateY(-1px);
}

/* ---------------------------------------------------------------- */
/* Pills: status, severity, and the gradient AI marker               */
/* ---------------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.pill-done { background: var(--st-done-soft); color: var(--st-done); }
.pill-processing { background: var(--st-processing-soft); color: var(--st-processing); }
.pill-failed { background: var(--st-failed-soft); color: var(--st-failed); }
.pill-critical { background: var(--sev-critical-soft); color: var(--sev-critical); }
.pill-high { background: var(--sev-high-soft); color: var(--sev-high); }
.pill-medium { background: var(--sev-medium-soft); color: var(--sev-medium); }
.pill-low { background: var(--sev-low-soft); color: var(--sev-low); }
.pill-neutral { background: var(--surface); color: var(--muted); }

/* Gradient AI pill — marks AI-powered features only. */
.ai-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--grad-ai);
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------- */
/* Banners and inline notices                                        */
/* ---------------------------------------------------------------- */

.banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 15px;
  color: var(--ink);
}

.banner svg {
  flex: none;
  color: var(--primary);
}

.notice-inline {
  margin-top: 6px;
  font-size: 14px;
  color: var(--st-failed);
}

/* ---------------------------------------------------------------- */
/* Tables                                                            */
/* ---------------------------------------------------------------- */

.table-card {
  overflow: hidden;
}

.table-scroll {
  overflow-x: auto;
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

table.data th {
  text-align: start;
  font-size: 14px;
  font-weight: 700;
  color: var(--chrome-ink);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 12px 16px;
  background: var(--chrome);
  border-bottom: 1px solid var(--chrome-line);
  white-space: nowrap;
}

table.data td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

table.data tbody tr:last-child td {
  border-bottom: none;
}

table.data tbody tr:hover {
  background: var(--surface);
}

/* SD-14: on tablet/desktop the ledger tables scroll INSIDE their card, so
   the header must stay pinned while rows move (enterprise table norm).
   The sticky target is the thead element, not the th: the header background
   (chrome/gradient) lives on the thead while the th cells are transparent,
   so a cell-level pin would let rows bleed through the header text. A
   browser without section-level sticky support degrades to the old
   scroll-away header — nothing breaks. The card keeps horizontal scroll
   for wide tables; vertical overflow is capped by the viewport so the
   pagination strip stays reachable. Card mode (≤640px, and 641–1099px on
   audit) hides the thead entirely, so the rule is desktop+tablet only.
   Direction-agnostic: `top` is unaffected by RTL, and the horizontal
   scroll already follows the document direction. */
@media (min-width: 641px) {
  .table-card > .table-scroll {
    max-height: calc(100vh - 300px);
    overflow-y: auto;
  }
  .table-card > .table-scroll > table.data > thead {
    position: sticky;
    top: 0;
    /* Above row content (pills/buttons paint no stacking context). */
    z-index: 2;
  }
}

/* IDs, dates and figures must never wrap mid-value. */
table.data td.num {
  white-space: nowrap;
}

.cell-strong {
  font-weight: 600;
}

.cell-sub {
  display: block;
  font-size: 14px;
  color: var(--muted);
  margin-top: 2px;
}

/* ---------------------------------------------------------------- */
/* Forms                                                             */
/* ---------------------------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  font-size: 14.5px;
  font-weight: 600;
}

.input,
select.input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-size: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

select.input {
  width: auto;
  min-width: 160px;
}

/* Advisory variant (IMPL-317): same layout as an inline error, but muted
   colors — used for the public-domain shared-namespace note. */
.field-error.is-note {
  background: var(--primary-soft);
  color: var(--muted);
}

.field-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--sev-high-soft);
  color: var(--sev-high);
  font-size: 14.5px;
  font-weight: 600;
}

.filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-bar .spacer {
  flex: 1;
}

/* Labeled filter control inside a filter bar (date range, type select). */
.filter-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

.filter-field .input {
  width: auto;
}

/* ---------------------------------------------------------------- */
/* Arabic date-input placeholder overlay (#227 item 11)              */
/* ---------------------------------------------------------------- */
/* Native date inputs paint their empty-state format hint in the browser
   UI locale (Latin digits), which reads as foreign chrome on Arabic
   pages. The native control is untouched; a non-interactive overlay
   carries the Arabic hint instead, and the Latin hint text turns
   transparent only while the overlay shows. English never enters these
   rules, so its native behavior is byte-identical. */
.date-ph-wrap {
  position: relative;
  display: block;
}

/* Filter rows size their inputs intrinsically (width: auto above); the
   wrapper mirrors that so the row geometry does not shift. */
.filter-field .date-ph-wrap {
  display: inline-block;
}

.date-ph {
  display: none;
  position: absolute;
  inset-inline-start: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
}

html[lang="ar"] .date-ph-wrap[data-empty="1"]:not(:focus-within) .date-ph {
  display: block;
}

html[lang="ar"] .date-ph-wrap[data-empty="1"]:not(:focus-within) > input[type="date"] {
  color: transparent;
}

/* ---------------------------------------------------------------- */
/* Filter date-range pair (UI-1, IMPL-259): from/to ride as ONE flex
   item of the toolbar so line wrapping can never separate them — a
   split pair renders as an inverted visual order under RTL. */
.date-range-pair {
  display: flex;
  flex-wrap: nowrap;
  align-items: end;
  gap: 10px;
}

/* Dropzone                                                          */
/* ---------------------------------------------------------------- */

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 24px;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.dropzone:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.dropzone-title {
  font-size: 15px;
  font-weight: 600;
}

.dropzone-sub {
  font-size: 14.5px;
  color: var(--muted);
}

/* ---------------------------------------------------------------- */
/* Pipeline columns (dashboard, analyst view)                        */
/* ---------------------------------------------------------------- */

.pipeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.pipeline-col {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pipeline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--muted);
}

.pipeline-item {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14.5px;
}

.pipeline-empty {
  font-size: 14px;
  color: var(--muted);
}

/* ---------------------------------------------------------------- */
/* Gap cards and citation blocks                                     */
/* ---------------------------------------------------------------- */

.gap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 16px;
}

.gap-card {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gap-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.gap-title {
  font-size: 14.5px;
  font-weight: 700;
}

.gap-reco {
  font-size: 15px;
  color: var(--ink);
}

.gap-label {
  font-size: 13.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.citation {
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.citation-meta {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
}

.citation-passage {
  font-size: 14.5px;
  color: var(--ink);
}

/* ---------------------------------------------------------------- */
/* Chat (Ask Meayar)                                                 */
/* ---------------------------------------------------------------- */

.chat {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.msg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 82%;
}

.msg-user {
  align-self: flex-end;
  align-items: flex-end;
}

.msg-assistant {
  align-self: flex-start;
  align-items: flex-start;
}

.msg-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
  padding-inline: 4px;
}

.bubble {
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 14px;
}

.msg-user .bubble {
  background: var(--primary);
  color: var(--primary-ink);
  border-end-end-radius: 4px;
}

.msg-assistant .bubble {
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  border-end-start-radius: 4px;
}

/* Gated refusal state — visually distinct from any answer bubble. */
.msg-refused .bubble {
  background: var(--surface);
  border: 1px dashed var(--muted);
  box-shadow: none;
  color: var(--muted);
  font-weight: 600;
}

.refusal-panel {
  width: 100%;
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--violet);
  border-radius: var(--radius-sm);
  background: var(--bg);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.refusal-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--violet);
}

.refusal-body {
  font-size: 14.5px;
  color: var(--ink);
}

.citations {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.citations-label {
  font-size: 13.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding-inline: 4px;
}

.citation-card {
  text-align: start;
  width: 100%;
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 10px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.citation-card:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
}

.citation-jump {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--primary);
}

.composer {
  display: flex;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--shadow);
}

.composer .input {
  flex: 1;
}

.composer-hint {
  font-size: 14px;
  color: var(--muted);
  padding-inline: 4px;
}

/* ---------------------------------------------------------------- */
/* Modal                                                             */
/* ---------------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal[hidden] {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 40, 0.45);
}

.modal-card {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: 82vh;
  overflow-y: auto;
  /* UX-8 (IMPL-339 UW-7): contain the scroll chain so a modal scrolled to
     its end does not send the wheel through to the page below. */
  overscroll-behavior: contain;
  background: var(--bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.modal-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
}

.modal-x {
  flex: none;
  border: none;
  background: var(--surface);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: var(--muted);
}

.modal-x:hover {
  color: var(--ink);
}

.modal-passage {
  font-size: 14.5px;
  line-height: 1.7;
  padding: 14px 16px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  border-inline-start: 3px solid var(--primary);
}

.modal-foot {
  display: flex;
  justify-content: flex-end;
  /* V4A-P2/L2 (IMPL-323): .modal-card is itself the scroll container
     (max-height 82vh), so a static footer rides the overflow and is
     clipped at the default scroll position. Stick the footer to the
     scrollport bottom and let it carry the card's bottom padding itself
     (padding-bottom + equal negative margin keep the natural-flow
     geometry unchanged), so the buttons stay reachable and the padding
     band renders behind them at every scroll position. */
  position: sticky;
  bottom: 0;
  background: var(--bg);
  padding-bottom: 22px;
  margin-bottom: -22px;
}

/* ---------------------------------------------------------------- */
/* Component inventory legend (about-components.html, four IP classes)*/
/* ---------------------------------------------------------------- */

.about-ip-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

.about-classes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.about-class {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.about-chip {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}

.about-chip-c { background: var(--primary-soft); color: var(--primary); }
.about-chip-z { background: var(--sev-low-soft); color: var(--sev-low); }
.about-chip-o { background: var(--sev-medium-soft); color: var(--sev-medium); }
.about-chip-t { background: var(--surface); color: var(--muted); border: 1px solid var(--line); }

.about-class-copy {
  display: grid;
  gap: 2px;
  font-size: 14px;
  line-height: 1.55;
}

.about-class-copy strong {
  font-size: 13.5px;
}

/* The user-menu rows are buttons, not links; neutralise the remaining
   native control chrome so they read as menu rows (font/color inheritance
   is already handled by the global button reset in tokens.css). Scoped
   to the user menu so the class cannot leak. */
.usermenu .usermenu-btn {
  border: none;
  background: none;
  cursor: pointer;
  text-align: start;
}

/* ---------------------------------------------------------------- */
/* Toast (host node created by shared runtime)                       */
/* ---------------------------------------------------------------- */

[data-toast-host] {
  position: fixed;
  /* Corner stack (W-UX1 SD-3): bottom inline-end on desktop — right in LTR,
     left in RTL via the logical inset — clear of the content the toast
     reports on. Phones get a full-width bottom strip (see ≤640 below). */
  inset-inline-end: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  z-index: 200;
  pointer-events: none;
  max-width: min(420px, calc(100vw - 32px));
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  padding-block: 10px;
  padding-inline-start: 16px;
  padding-inline-end: 10px;
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  /* Every toast carries a dismiss button (SD-3), so every toast is
     interactive inside the click-through host. */
  pointer-events: auto;
  max-width: 100%;
}

.toast-text {
  overflow-wrap: anywhere;
}

.toast.is-out {
  opacity: 0;
  transform: translateY(8px);
}

.toast:not(.is-out) {
  opacity: 1;
  transform: translateY(0);
}

/* Error toasts (IMPL-237 P1-5 / W-UX1 SD-3): danger face, never
   self-dismiss — they stay until the user closes them. */
.toast.toast-error {
  background: var(--danger, #b3261e);
}

.toast .toast-close {
  flex: none;
  margin-inline-start: 2px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  opacity: 0.85;
}

.toast .toast-close:hover {
  background: rgba(255, 255, 255, 0.16);
  opacity: 1;
}

/* Phone layout (SD-3): the stack becomes a full-width bottom strip so the
   toast never covers the content mid-screen. */
@media (max-width: 640px) {
  [data-toast-host] {
    inset-inline: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    align-items: stretch;
    max-width: none;
  }
}

/* ---------------------------------------------------------------- */
/* Inline load-failure card (W-UX1 SD-2)                             */
/* ---------------------------------------------------------------- */

/* A failed data load renders this card in place of the region's content —
   visually distinct from the honest empty state (which stays reserved for
   genuinely empty data). */
.load-error {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-2, #f8fafc);
  text-align: start;
}

.load-error-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--sev-high-soft);
  color: var(--sev-high);
}

.load-error-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.load-error-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.load-error-body {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.load-error-retry {
  flex: none;
  margin-inline-start: auto;
}

/* Compact variant for narrow surfaces (the notification bell panel). */
.load-error-compact {
  padding: 10px 12px;
  gap: 8px;
}

.load-error-compact .load-error-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
}

/* Retry in its loading state: disabled against double-fire, spinner on the
   button face. */
.load-error-retry.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.load-error-retry.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  border: 2px solid var(--line);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: load-error-spin 0.7s linear infinite;
}

@keyframes load-error-spin {
  to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------- */
/* Table skeleton rows (W-UX1)                                       */
/* ---------------------------------------------------------------- */

/* Pending-content bars shown by MEAYAR.tableSkeleton only when a first load
   outlives 400ms — fast loads never flash them. */
.skel-row td {
  pointer-events: none;
}

.skel-bar {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--surface) 25%, var(--line) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s ease infinite;
}

@keyframes skel-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skel-bar {
    animation: none;
  }
  .load-error-retry.is-loading::after {
    animation: none;
  }
}

/* ---------------------------------------------------------------- */
/* Phone touch targets (W-UX1 SD-5, WCAG 2.2 SC 2.5.8 / Apple HIG)   */
/* ---------------------------------------------------------------- */

@media (max-width: 640px) {
  /* Row icon buttons keep their 30px visual; the transparent hit area
     grows to the 44px finger target (the icon glyph is untouched). */
  .icon-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* "View all"-style inline links get the WCAG 24px floor plus vertical
     padding so the tap area clears the line box. */
  .panel-link,
  .notif-view-all,
  .src-health-more a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding-block: 2px;
  }
}

/* Skip-to-content link (U-6, IMPL-239): first focusable element on every
   shell page; visually hidden until it receives keyboard focus. */
.skip-link {
  position: fixed;
  top: 8px;
  inset-inline-start: 8px;
  z-index: 300;
  transform: translateY(-200%);
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  transition: transform 0.15s ease;
}

.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--primary, #1f6feb);
  outline-offset: 2px;
}

/* Row-body click affordance (P1-1, IMPL-239): obligations rows and ready
   ingestion queue cards open their detail from anywhere in the row. */
.data tbody tr[data-ob-row] { cursor: pointer; }
.queue-row[data-doc-row] { cursor: pointer; }
/* The decorative row checkbox is disabled, and browsers drop click events
   on disabled form controls entirely — hitting it felt like the row was
   dead (IMPL-331 E1). pointer-events:none lets the click fall through to
   the cell and bubble to the row handler; the visuals stay identical. */
.data tbody tr[data-ob-row] input[type="checkbox"][aria-hidden="true"] { pointer-events: none; }

/* Unread dot on the sidebar notifications entry (U-5, IMPL-239). */
.nav-link.has-unread::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--danger, #d92d20);
  margin-inline-start: auto;
  flex: none;
}

/* ---------------------------------------------------------------- */
/* Notifications bell + dropdown (FR-20)                             */
/* ---------------------------------------------------------------- */

.notif {
  position: relative;
}

.notif-btn {
  position: relative;
}

.notif-badge {
  position: absolute;
  top: 3px;
  inset-inline-end: 3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--sev-high);
  color: #FFFFFF;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}

.notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  width: 330px;
  max-width: 86vw;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  z-index: 60;
}

.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px 10px;
  font-size: 14.5px;
  font-weight: 700;
}

/* Header ghost action: marks every notification as read. */
.notif-mark-all {
  border: 0;
  background: transparent;
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--primary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.notif-mark-all:hover {
  background: var(--surface);
}

/* Panel footer: entry into the full notifications page. */
.notif-view-all {
  display: block;
  padding: 10px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
}

.notif-list {
  max-height: 340px;
  overflow-y: auto;
}

.notif-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  text-align: start;
  cursor: pointer;
}

.notif-item:hover {
  background: var(--surface);
}

/* Unread marker; the slot stays reserved so read rows keep alignment. */
.notif-dot {
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--primary);
  visibility: hidden;
}

.notif-item.is-unread .notif-dot {
  visibility: visible;
}

.notif-type {
  flex: none;
  margin-top: 1px;
  padding: 1px 8px;
  font-size: 11.5px;
}

.notif-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.notif-text {
  line-height: 1.45;
}

.notif-time {
  font-size: 12.5px;
  color: var(--muted);
}

/* ---------------------------------------------------------------- */
/* Topbar user chip: avatar + name trigger with a small dropdown     */
/* ---------------------------------------------------------------- */

.usermenu {
  position: relative;
}

.usermenu-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  padding-inline-start: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}

.usermenu-btn:hover {
  background: rgba(127, 140, 160, 0.14);
}

.usermenu-avatar {
  width: 26px;
  height: 26px;
  font-size: 11.5px;
}

.usermenu-name {
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
}

.usermenu-caret {
  flex: none;
  opacity: 0.7;
}

.usermenu-panel {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  min-width: 190px;
  padding: 6px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 60;
}

.usermenu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--ink);
  font-size: 14px;
}

.usermenu-item:hover {
  background: var(--surface);
  text-decoration: none;
}

/* ---------------------------------------------------------------- */
/* Shared empty state: icon slot, title, hint and an optional CTA    */
/* ---------------------------------------------------------------- */

/* IMPL-244: sparse list pages — stretch the primary card to the viewport
   so an empty/short list reads as one intentional panel instead of a short
   card stranded above blank canvas (owner feedback 2026-09-30). */
.actions-page .content > .table-card {
  flex: 1 1 auto;
}
.actions-page .content > .table-card > .table-scroll {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.actions-page .content > .table-card > .table-scroll > table {
  flex: 1 1 auto;
  height: 100%;
}
/* The empty state rides inside a td; give the table cell the room to
   center it when the card stretches. */
.actions-page .content > .table-card td:has(> .empty-state) {
  height: 100%;
  vertical-align: middle;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 30px 20px;
  text-align: center;
}

.empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 6px;
  border-radius: 12px;
  background: var(--surface);
  color: var(--muted);
}

.empty-state-title {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}

.empty-state-hint {
  margin: 0;
  max-width: 42ch;
  color: var(--muted);
  font-size: 13.5px;
}

.empty-state .btn {
  margin-top: 10px;
}

/* ---------------------------------------------------------------- */
/* RTL / Arabic refinements (Middle East conventions, FR-17)         */
/* ---------------------------------------------------------------- */

/* Arabic script is cursive: letter-spacing breaks character joining,
   so it is zeroed for every element in RTL. */
html[dir="rtl"] * {
  letter-spacing: 0;
}

/* Arabic diacritics need more vertical room. */
html[dir="rtl"] body {
  line-height: 1.7;
}

/* Uppercase is meaningless for Arabic; keep headers natural. */
html[dir="rtl"] table.data th,
html[dir="rtl"] .gap-label,
html[dir="rtl"] .citations-label {
  text-transform: none;
}

/* ---------------------------------------------------------------- */
/* Login page                                                        */
/* ---------------------------------------------------------------- */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(600px 300px at 50% -80px, var(--primary-soft), transparent),
    var(--surface);
}

/* Anchored to the page (body.login-split is the containing block), not the
   viewport: the toggle reads as part of the top of the page and scrolls
   away with it instead of floating over the content. */
.login-lang {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  z-index: 10;
}

.login-card {
  width: 100%;
  max-width: 430px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.login-brand img {
  height: 150px;
  width: auto;
}

.login-lockup {
  font-family: var(--font-brand);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.login-tagline {
  font-size: 14px;
  color: var(--muted);
}

.login-title {
  font-size: 17px;
  font-weight: 700;
  text-align: center;
}

.login-sub {
  font-size: 14.5px;
  color: var(--muted);
  text-align: center;
  margin-top: -12px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.login-divider {
  border: none;
  border-top: 1px solid var(--line);
  margin: 4px 0;
}

/* ---------------------------------------------------------------- */
/* Design-system widgets (ref-1 pass): sidebar user card, avatars,   */
/* FAB, stat icons, donut, tinted reminders, segmented filters,      */
/* search, pagination, icon buttons, chips, steps, file icons,       */
/* progress, suggestions, login split.                               */
/* ---------------------------------------------------------------- */

/* Sidebar bottom user card */
.sidebar-user {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px 4px;
  border-top: 1px solid var(--chrome-line);
}

/* Build identifier chip (IMPL-331 E3): muted one-liner under the identity
   card, populated asynchronously from GET /api/version — stays hidden
   (no reserved space) until a valid payload arrives. */
.sidebar-build {
  display: flex;
  gap: 6px;
  padding: 8px 12px 0;
  font-size: 11.5px;
  color: var(--chrome-ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user .avatar {
  width: 34px;
  height: 34px;
  font-size: 13.5px;
}

.su-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--chrome-ink);
  line-height: 1.25;
}

.su-role {
  font-size: 13.5px;
  color: var(--chrome-ink-dim);
}

/* Initial avatars */
.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  flex: none;
}

.avatar-a { background: #0D33FF; }
.avatar-b { background: #7A5AF8; }
.avatar-c { background: #12B76A; }
.avatar-d { background: #F79009; }
.avatar-e { background: #D92D20; }

.actor {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Help FAB */
.fab-help {
  position: fixed;
  inset-block-end: 20px;
  inset-inline-end: 20px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--ink);
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  z-index: 80;
}

/* Stat card icon chips + delta notes */
.stat-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stat-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.ico-critical { background: var(--sev-critical-soft); color: var(--sev-critical); }
.ico-red { background: var(--sev-high-soft); color: var(--sev-high); }
.ico-amber { background: var(--sev-medium-soft); color: var(--sev-medium); }
.ico-blue { background: var(--primary-soft); color: var(--primary); }
.ico-green { background: var(--st-done-soft); color: var(--st-done); }
.ico-violet { background: #F4F0FF; color: var(--violet); }

.stat-delta {
  font-size: 14px;
  font-weight: 600;
}

.delta-up { color: var(--st-done); }
.delta-warn { color: var(--sev-medium); }
.delta-bad { color: var(--sev-high); }

/* Live indicator */
.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--st-done);
  box-shadow: 0 0 0 3px rgba(18, 183, 106, 0.18);
}

/* Donut chart */
.donut-wrap {
  display: flex;
  align-items: center;
  gap: 24px;
}

.donut-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14.5px;
}

.donut-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex: none;
}

/* Tinted reminder rows */
.remind-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 15px;
}

.remind-item svg {
  flex: none;
  margin-top: 2px;
}

.remind-item + .remind-item {
  margin-top: 8px;
}

.remind-high { background: var(--sev-high-soft); color: #B42318; }
.remind-high svg { color: var(--sev-high); }
.remind-medium { background: var(--sev-medium-soft); color: #B54708; }
.remind-medium svg { color: var(--sev-medium); }

/* FR-24 dashboard panels: source health rows and processing-status mix. */
.src-health-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
}

.src-health-row + .src-health-row {
  border-top: 1px solid var(--line);
}

.src-health-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
}

.proc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.proc-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.proc-count {
  font-size: 15px;
  font-weight: 700;
}

.proc-bar {
  display: flex;
  height: 8px;
  margin-top: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface);
}

.proc-bar > span {
  display: block;
  height: 100%;
}

/* Segmented pill filters */
.seg {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

.seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.seg-btn .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.seg-btn:hover {
  color: var(--ink);
}

.seg-btn.is-active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}

/* Search field with leading icon */
.search {
  position: relative;
}

.search > svg {
  position: absolute;
  inset-inline-start: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.search .input {
  padding-inline-start: 38px;
  min-width: 250px;
}

/* Pagination */
.pg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
}

.pg-pages {
  display: flex;
  gap: 6px;
}

.pg-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 8px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--muted);
  cursor: pointer;
}

.pg-btn.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #FFFFFF;
}

.pg-summary {
  color: var(--muted);
  font-size: 14.5px;
}

/* Pager chevrons are directional: mirror them under RTL (H-4) so the
   "previous" arrow points along the reading direction, like .send-btn. */
html[dir="rtl"] .pg-pages .pg-btn[data-pager="prev"] svg,
html[dir="rtl"] .pg-pages .pg-btn[data-pager="next"] svg {
  transform: scaleX(-1);
}

/* Row icon buttons */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
}

.icon-btn:hover {
  background: var(--surface);
  color: var(--ink);
}

.icon-btn.danger:hover {
  color: var(--sev-high);
}

/* Blue link-style IDs */
.link-id {
  color: var(--primary);
  font-weight: 700;
  white-space: nowrap;
}

/* Coloured due dates */
.due-over { color: var(--sev-high); font-weight: 600; }
.due-ok { color: var(--st-done); font-weight: 600; }

/* Small blue outline chips (sources, linked obligations). The gap keeps
   a label and its count visually separated inside the inline-flex pill,
   where whitespace-only text nodes are collapsed (F-C). */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid #B2CCFF;
  background: #F5F9FF;
  color: var(--primary);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}

.chips {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* GAP-4: AI-confidence chip — same pill geometry as .chip with the brand
   violet accent and a filled dot, so AI rows read distinctly from the plain
   numeric confidence chip of non-AI rows. */
.chip.chip-ai {
  border-color: #cdbdf3;
  background: #f5f1fd;
  color: #5b4a9d;
}

.chip-ai-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* GAP-3: one-line regulatory-source line on the gap card face — the text
   truncates with an ellipsis; the full string rides the title attribute. */
.gap-source-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  margin-top: 2px;
}

.gap-source-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 13px;
}

/* GAP-2: collapsible "why this gap" block (native details/summary keeps the
   collapse dependency-free through re-renders). */
.gap-why {
  margin-top: 4px;
  border: 1px solid var(--line, #e6e9f0);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface);
}

.gap-why summary {
  cursor: pointer;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft, #475467);
  list-style-position: inside;
}

.gap-why[open] summary {
  border-bottom: 1px solid var(--line, #e6e9f0);
}

.gap-why-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gap-why-body p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
}

/* Gap card severity accent + inner remediation panel + numbered steps */
.gap-card.sev-accent-critical { border-inline-start: 3px solid var(--sev-critical); }
.gap-card.sev-accent-high { border-inline-start: 3px solid var(--sev-high); }
.gap-card.sev-accent-medium { border-inline-start: 3px solid var(--sev-medium); }
.gap-card.sev-accent-low { border-inline-start: 3px solid var(--sev-low); }

.gap-sev-ico {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.reco-panel {
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reco-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  counter-reset: step;
}

.steps li {
  display: flex;
  gap: 8px;
  font-size: 15px;
}

.steps li::before {
  counter-increment: step;
  content: counter(step) ".";
  font-weight: 700;
  color: var(--primary);
  flex: none;
}

/* Numbered citation cards (RAG) */
.cite-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  text-align: start;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: var(--bg);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.cite-item:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.cite-num {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Citation detail grid (client request 2026-08: full citation metadata) */
.cite-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.cite-row {
  display: flex;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
}

.cite-k {
  flex: none;
  width: 152px;
  font-weight: 700;
  color: var(--muted);
}

.cite-v {
  color: var(--ink);
}

.cite-link {
  align-self: flex-start;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
}

.cite-link:hover {
  text-decoration: underline;
}

/* Action buttons below each AI answer (client request 2026-08) */
.answer-actions {
  display: flex;
  gap: 8px;
}

/* Answer meta bar (E-08/E-09): deterministic evidence-support chip plus
   the answer's scope line (corpus + As-of generation date). */
.answer-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-block: 6px;
}

.support-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
}

.support-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.support-strong {
  color: #067647;
  background: rgba(18, 183, 106, 0.12);
}

.support-moderate {
  color: #B54708;
  background: rgba(247, 144, 9, 0.14);
}

.support-insufficient {
  color: #B42318;
  background: rgba(217, 45, 32, 0.10);
}

.scope-line {
  font-size: 13px;
  color: var(--muted);
}

/* ASK-3: titled Evidence Scope sub-card — aggregates the jurisdictions and
   regulators the answer actually cited plus the corpus scope and As-of
   date. Shares the meta row with the support chip, wraps under it on
   narrow viewports; every line wraps (no nowrap) so RTL/390px stay sane. */
.evidence-scope {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  border: 1px solid var(--line, #e6e9f0);
  border-radius: 10px;
  background: var(--surface);
}

.evidence-scope-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-soft, #475467);
}

.evidence-scope-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.evidence-scope-line {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.evidence-scope-k {
  font-weight: 600;
  color: var(--ink-soft, #475467);
}

/* Answer feedback row (IMPL-121, issue #275): target-anchored microcopy +
   thumbs with a confirm-state reason panel. Easy to click, hard to
   misclick: comfortable hit areas, spaced buttons, the negative path
   requires an explicit submit. */
.feedback-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-block: 6px;
  padding-block-start: 2px;
}

.fb-prompt {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.fb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.fb-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.fb-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.fb-up.is-on {
  color: #067647;
  border-color: #067647;
  background: rgba(18, 183, 106, 0.12);
}

.fb-down.is-on {
  color: #B42318;
  border-color: #B42318;
  background: rgba(217, 45, 32, 0.10);
}

.fb-undo {
  color: var(--muted);
}

.fb-note {
  font-size: 12.5px;
  color: var(--muted);
}

.fb-panel {
  width: 100%;
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--violet);
  border-radius: var(--radius-sm);
  background: var(--bg);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-block-start: 6px;
}

.fb-panel-label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}

.fb-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.fb-chip {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.fb-chip:hover {
  border-color: var(--primary);
}

.fb-chip.is-on {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-soft);
  font-weight: 700;
}

.fb-comment {
  resize: vertical;
  min-height: 44px;
  font: inherit;
}

.fb-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Regulatory-source block inside the gap View Source modal (E-43). */
.gap-source-block {
  display: grid;
  gap: 6px;
  margin-block: 4px 10px;
  padding: 10px 12px;
  border: 1px solid var(--line, #e6e9f0);
  border-radius: 10px;
  background: var(--surface-2, #f7f8fa);
}

.cite-link-row {
  display: flex;
  justify-content: flex-end;
  margin-block-start: 4px;
}

/* Creation-provenance badge on obligation rows (F-1). */
.origin-badge {
  font-size: 11.5px;
  white-space: nowrap;
}

/* Claim-level inline citation refs inside an answer bubble (FR-14/16/28) */
.claim {
  display: block;
}

.claim + .claim {
  margin-block-start: 8px;
}

.cite-sup {
  line-height: 0;
}

.cite-ref {
  border: none;
  background: none;
  padding: 0 1px;
  cursor: pointer;
  font-size: 0.78em;
  font-weight: 700;
  color: var(--primary);
  border-radius: 4px;
}

.cite-ref:hover {
  text-decoration: underline;
}

.cite-ref:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* Scroll-flash highlight applied when an inline ref targets a card. */
.cite-item.is-flash,
.white-workspace-concept .cite-item.is-flash {
  border-color: var(--primary);
  background: var(--primary-soft);
  animation: cite-flash 0.9s ease-out 2;
}

@keyframes cite-flash {
  0% { box-shadow: 0 0 0 0 rgba(13, 51, 255, 0.35); }
  100% { box-shadow: 0 0 0 12px rgba(13, 51, 255, 0); }
}

/* D-02 warning badge: AI-inferred translation that is still unreviewed. */
.cite-warn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-block-start: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--sev-medium);
  background: var(--sev-medium-soft);
  border: 1px solid var(--sev-medium);
}

/* Provenance rows inside the traceability modal. */
.modal-prov {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Top-bar role badge doubles as the demo role switcher */
[data-role-badge] {
  cursor: pointer;
  user-select: none;
}

/* Suggestion chips above the composer */
.sugg {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.sugg-label {
  font-size: 14px;
  color: var(--muted);
}

.sugg-chip {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: 14.5px;
  color: var(--ink);
  text-align: start;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.sugg-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Send button + RTL-mirrored plane */
.send-btn {
  flex: none;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 12px;
  background: var(--primary);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.send-btn:hover {
  background: #0B2BD6;
}

html[dir="rtl"] .send-btn svg {
  transform: scaleX(-1);
}

/* File type icons */
.file-ico {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 800;
  flex: none;
  letter-spacing: 0.02em;
}

.file-pdf { background: var(--sev-high-soft); color: var(--sev-high); }
.file-docx { background: var(--primary-soft); color: var(--primary); }
.file-txt { background: var(--surface); color: var(--muted); }

/* Slim progress bar */
.progress {
  height: 5px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.progress > span {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
}

/* Queue row (ingestion) */
.queue-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
}

.queue-row + .queue-row {
  border-top: 1px solid var(--line);
}

.queue-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.queue-meta {
  font-size: 14px;
  color: var(--muted);
}

/* Ingestion queue meta groups: source/date on the left, type/effective/
   version spread to the right edge (wraps to stacked lines on phones). */
.queue-meta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 18px;
}

/* IMPL-268 W-3 batch submit queue: one compact row per picked file with
   its own state pill; mirrors the processing-queue row grammar (file
   glyph + name + meta) at a tighter density. */
.batch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
}

.batch-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 10px 12px;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.batch-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.batch-note {
  margin-top: 10px;
}

.spinner {
  width: 14px;
  height: 14px;
  flex: none;
  border: 2px solid var(--line);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: load-error-spin 0.7s linear infinite;
}

/* Login split layout: the single row is pinned to the viewport height so
   both columns always fill the screen; taller content grows the row and
   scrolls normally. */
.login-split {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(400px, 1.1fr) 1fr;
  grid-template-rows: minmax(100vh, auto);
  grid-template-rows: minmax(100dvh, auto);
}

.login-aside {
  background: linear-gradient(160deg, var(--chrome) 0%, var(--chrome-2) 100%);
  color: #FFFFFF;
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.login-aside img {
  height: 84px;
  width: auto;
  align-self: flex-start;
}

.login-aside h1 {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.35;
}

.login-aside .sub {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.7;
}

.feat {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.feat li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.92);
}

.f-ico {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.aside-foot {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
}

.login-form-panel {
  background: var(--bg);
  padding: 40px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Stepper */
.steps-bar {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 30px;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.step-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.step.is-active .step-dot {
  background: var(--primary);
  border-color: var(--primary);
  color: #FFFFFF;
}

.step-label {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

.step.is-active .step-label {
  color: var(--primary);
  font-weight: 700;
}

.step-line {
  flex: 1;
  height: 2px;
  background: var(--line);
  margin-top: 13px;
}

.step-line.is-done {
  background: var(--primary);
}

.login-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14.5px;
}

.remember {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
}

/* ---------------------------------------------------------------- */
/* Responsive: sidebar collapses into a top bar                      */
/* ---------------------------------------------------------------- */

@media (max-width: 900px) {
  .sidebar {
    position: static;
    width: 100%;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 14px;
  }

  .brand {
    padding: 4px 8px;
    margin: 0;
  }

  .brand img {
    height: 48px;
  }

  .nav {
    flex-direction: row;
    overflow-x: auto;
    flex: 1;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  .nav-link {
    white-space: nowrap;
    padding: 8px 10px;
  }

  .main {
    margin-inline-start: 0;
  }

  .topbar {
    position: static;
    padding: 12px 16px;
  }

  .content {
    padding: 18px 16px;
    border-start-start-radius: 16px;
    border-start-end-radius: 16px;
  }

  .pipeline {
    grid-template-columns: 1fr;
  }

  .msg {
    max-width: 100%;
  }

  .sidebar-user {
    display: none;
  }

  .login-split {
    grid-template-columns: 1fr;
    /* Aside shrinks to a banner; the form row absorbs the remaining height. */
    grid-template-rows: auto 1fr;
  }

  /* The toggle now sits over the dark aside banner on phones; the default
     white pill clashes with it, so key the chip to the banner. Scoped to
     the split layout — 404.html reuses .login-lang on a light page. */
  .login-split .login-lang {
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
    font-size: 12.5px;
    letter-spacing: 0.03em;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .login-split .login-lang:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.42);
    color: #ffffff;
  }

  .login-aside {
    padding: 28px 24px;
  }

  .login-form-panel {
    padding: 28px 20px;
  }
}

/* ==========================================================================
   Welcome screen + marketing landing page
   (client feedback 2026-08: public entry before the internal workspace)
   ========================================================================== */

/* Deep navy used only on the public pages (CUBE-style dark chrome). */
:root {
  --landing-navy: #0B1B3F;
  --landing-navy-2: #12275C;
  --landing-on-navy: rgba(255, 255, 255, 0.78);
}

/* --- Landing page chrome ------------------------------------------------ */

.landing-page {
  background: var(--bg);
}

.site-container {
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 24px;
}

.site-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #FFFFFF;
  border-bottom: 1px solid var(--line);
}

.site-topbar-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 68px;
}

.site-logo {
  height: 40px;
  width: auto;
}

.site-nav {
  display: flex;
  gap: 4px;
  flex: 1;
}

.site-nav a {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-weight: 500;
  font-size: 15px;
  /* A wrapped nav label (e.g. "About MEAYAR AI" breaking after "MEAYAR")
     breaks the topbar's single-line reading — labels stay on one line at
     every width; widths that cannot fit the row scroll the nav instead
     (see the 901-1199 block below). */
  white-space: nowrap;
}

.site-nav a:hover {
  background: var(--surface);
  color: var(--primary);
}

.site-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-actions .btn {
  white-space: nowrap;
}

/* B-1 marketing drawer (≤900px, client letter 084451): off-canvas like the
   app-shell drawer; the transform mirrors with the document direction. */
.site-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #FFFFFF;
  color: var(--ink);
  cursor: pointer;
}

.site-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 80;
  width: min(320px, 84vw);
  display: flex;
  flex-direction: column;
  padding: 18px;
  background: #FFFFFF;
  transform: translateX(-110%);
  visibility: hidden;
  transition: transform 0.22s ease, visibility 0s linear 0.22s;
}

html[dir="rtl"] .site-drawer {
  transform: translateX(110%);
}

.site-drawer a {
  padding: 14px 6px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
  font-size: 16px;
}

.site-drawer a.site-drawer-login {
  margin-top: auto;
  border-bottom: 0;
}

.site-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 75;
  background: rgba(15, 35, 60, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

body.site-drawer-open .site-drawer {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.22s ease;
  box-shadow: var(--shadow-lg, 0 18px 50px rgba(15, 35, 60, 0.25));
}

body.site-drawer-open .site-drawer-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* N02 (mobile acceptance 2026-09-09): while the marketing drawer is open
   the body is frozen — position: fixed plus the inline negative top set
   from JS — so the background cannot scroll and the reading position
   survives the open/close cycle. */
body.site-drawer-open {
  position: fixed;
  inset-inline: 0;
  overflow-y: hidden;
}

/* Q02 (mobile acceptance 2026-09-09): searchable owner picker list inside
   the obligation form modal. */
.owner-picker-list {
  display: grid;
  gap: 2px;
  max-height: 176px;
  overflow-y: auto;
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #FFFFFF;
}

.owner-picker-item,
.owner-picker-empty {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 13.5px;
  text-align: start;
  cursor: pointer;
}

.owner-picker-item:hover {
  background: rgba(15, 35, 60, 0.06);
}

.owner-picker-empty {
  cursor: default;
  color: var(--muted);
}

@media (min-width: 901px) {
  .site-menu-btn,
  .site-drawer,
  .site-drawer-overlay {
    display: none;
  }
}

/* --- Hero --------------------------------------------------------------- */

.hero {
  color: #FFFFFF;
  background:
    radial-gradient(55% 60% at 85% 20%, rgba(146, 38, 230, 0.25), transparent 70%),
    radial-gradient(50% 55% at 10% 85%, rgba(13, 51, 255, 0.3), transparent 70%),
    linear-gradient(155deg, var(--landing-navy), var(--landing-navy-2));
  padding: 88px 0 96px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.hero-title {
  font-size: 44px;
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 18px;
}

.hero-sub {
  font-size: 18px;
  color: var(--landing-on-navy);
  max-width: 52ch;
  margin: 0 0 28px;
}

.btn-outline-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  color: #FFFFFF;
  font-weight: 500;
  cursor: pointer;
}

.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.12);
}

.hero-visual {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

/* --- Sections ----------------------------------------------------------- */

.section {
  padding: 76px 0;
}

.section-alt {
  background: var(--surface);
}

.section-head {
  max-width: 640px;
  margin-bottom: 40px;
}

.section-head h2 {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 10px;
}

.section-head p {
  color: var(--muted);
  font-size: 17px;
  margin: 0;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 36px;
}

.stat-card {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}

.stat-num {
  font-size: 34px;
  font-weight: 700;
  background: var(--grad-ai);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat-label {
  color: var(--muted);
  font-size: 14px;
  margin-top: 4px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.info-card {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-card h3 {
  font-size: 19px;
  font-weight: 600;
  margin: 0;
}

.info-card p {
  color: var(--muted);
  font-size: 15px;
  margin: 0;
}

.card-ico {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  color: #FFFFFF;
  background: var(--grad-ai);
}

/* --- Demo form + contact ------------------------------------------------ */

.demo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.demo-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
}

.demo-form .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.demo-form .field-full {
  grid-column: 1 / -1;
}

.demo-form label {
  font-size: 14px;
  font-weight: 500;
}

.demo-form textarea {
  min-height: 110px;
  resize: vertical;
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.contact-item .card-ico {
  width: 38px;
  height: 38px;
  flex: none;
}

.contact-item strong {
  display: block;
  font-size: 14px;
}

.contact-item span {
  color: var(--muted);
  font-size: 15px;
}

/* --- Footer ------------------------------------------------------------- */

.site-footer {
  background: var(--landing-navy);
  color: var(--landing-on-navy);
  padding: 40px 0;
}

.site-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.site-footer img {
  height: 34px;
  width: auto;
}

.site-footer nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.site-footer nav a {
  color: var(--landing-on-navy);
  font-size: 14px;
}

.site-footer nav a:hover {
  color: #FFFFFF;
}

.site-footer .rights {
  font-size: 14.5px;
  width: 100%;
  text-align: center;
  margin-top: 8px;
  opacity: 0.7;
}

/* --- Landing responsive -------------------------------------------------- */

/* R-H01 (mobile acceptance 2026-09-09, M01): the hero carries the Demo CTA;
   the header copy below 900px stays hidden (desktop keeps the header CTA). */
.hero-cta {
  display: none;
}

@media (max-width: 900px) {
  .site-topbar-inner {
    height: auto;
    flex-wrap: wrap;
    padding-block: 10px;
    gap: 10px;
  }

  /* R-H01 (mobile acceptance 2026-09-09, M01): the bar keeps Logo +
     Language + hamburger; the inline nav, the Login button, AND the Demo
     CTA leave for the drawer/hero — the bar never crowds. */
  .site-nav {
    display: none;
  }

  .site-login-link {
    display: none;
  }

  .site-demo-link {
    display: none;
  }

  .site-menu-btn {
    display: inline-flex;
  }

  .hero-cta {
    display: inline-flex;
    margin-top: 20px;
    align-self: flex-start;
  }

  .hero {
    padding: 56px 0 64px;
  }

  .hero-grid,
  .demo-grid {
    grid-template-columns: 1fr;
  }

  .hero-title {
    font-size: 32px;
  }

  .hero-visual {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .card-grid,
  .stat-row,
  .demo-form {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 52px 0;
  }
}

/* ---------------------------------------------------------------- */
/* Soft page transitions                                             */
/* ---------------------------------------------------------------- */

/* Fade the document in on load so full-page navigations between the
   static pages read as a continuous flow instead of a hard reopen. */
@keyframes meyar-page-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

body {
  animation: meyar-page-in 180ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  body {
    animation: none;
  }
}

/* ---------------------------------------------------------------- */
/* Responsive nav drawer (≤1280px): the fixed sidebar slides in from */
/* the inline-start edge over a backdrop, toggled by the hamburger.  */
/* ---------------------------------------------------------------- */

.nav-toggle,
.nav-overlay {
  display: none;
}

@media (max-width: 1280px) {
  .nav-toggle {
    display: inline-flex;
  }

  /* Hamburger groups with the page title; actions stay at the far end. */
  .topbar {
    position: sticky;
    justify-content: flex-start;
  }

  .topbar-actions {
    margin-inline-start: auto;
  }

  /* Off-canvas by default; .nav-open on <body> slides the drawer in.
     The transform mirrors with the document direction so the drawer
     always hides toward the inline-start edge. visibility keeps the
     closed drawer out of the tab order and accessibility tree —
     transform alone still exposes the links to Tab. */
  .sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--sidebar-w);
    max-width: 84vw;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    transform: translateX(-110%);
    visibility: hidden;
    transition: transform 0.22s ease, visibility 0s linear 0.22s;
    z-index: 70;
  }

  html[dir="rtl"] .sidebar {
    transform: translateX(110%);
  }

  body.nav-open .sidebar {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.22s ease;
    box-shadow: var(--shadow-lg);
  }

  /* The drawer replaces the old ≤900px "sidebar becomes a top bar"
     collapse at every width in this range. */
  .nav {
    flex-direction: column;
    overflow-x: visible;
  }

  .sidebar-user {
    display: flex;
  }

  .main {
    margin-inline-start: 0;
  }

  .nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 65;
    background: rgba(16, 24, 40, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  body.nav-open .nav-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  /* Scroll lock while the drawer is open. */
  body.nav-open {
    overflow: hidden;
  }
}


/* ==========================================================================
   Cross-document view transitions (MPA page-to-page navigation)
   Progressive enhancement: Chrome/Edge 126+, Safari 18.2+; Firefox (same-
   document-only support) and older browsers navigate at once and rely on
   the target page's entrance fade. The shell (sidebar + topbar + page
   background) stays perfectly still; only the content region transitions,
   fading and rising slightly as it enters — no directional motion, so RTL
   and LTR read identically. app.js skips the transition for shell-less
   destinations (login/landing/404) and while the pre-auth mask is still
   up, so no pinned snapshot ever shows unauthenticated chrome.
   ========================================================================== */
@view-transition {
  navigation: auto;
}

/* Chrome layers stay put during the transition: the incoming snapshot is
   drawn opaque on top of the outgoing one with blending disabled, so the
   is-active pill and any nav-set correction apply instantly without the
   additive double-exposure the UA's default plus-lighter compositing would
   produce. Names must be unique per document, so the sidebar and topbar get
   their own. */
.sidebar {
  view-transition-name: shell-sidebar;
}
.topbar {
  view-transition-name: shell-topbar;
}

::view-transition-old(shell-sidebar),
::view-transition-new(shell-sidebar),
::view-transition-old(shell-topbar),
::view-transition-new(shell-topbar) {
  animation: none;
  mix-blend-mode: normal;
  height: 100%;
  overflow: clip;
}

/* The content region gets its own transition layer so the page background
   and pinned chrome stay perfectly still while only the content changes:
   it fades and rises slightly as it enters. The root pair itself does not
   animate. */
.content {
  view-transition-name: page-content;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(page-content) {
  animation: 100ms ease-out both vt-page-out;
}

::view-transition-new(page-content) {
  animation: 180ms ease-out both vt-content-in-up;
}

@keyframes vt-page-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes vt-content-in-up {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* First-content fade once the session guard lifts the pre-auth mask.
   On prerendered activations the animation has already finished, so only
   the root cross-fade is perceived; on cold loads it softens the reveal. */
html:not(.pre-auth) .content {
  animation: 160ms ease-out both vt-content-in;
}

@keyframes vt-content-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* While a cross-document transition is active the root pair already animates
   the reveal; the per-document entrance fades would stack additional opacity
   layers onto the captured snapshot. Browsers without the pseudo-class (and
   hence without cross-document transitions) keep their entrance fades. */
html:active-view-transition body,
html:active-view-transition .content {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(page-content),
  ::view-transition-new(page-content) {
    animation: none;
  }
}

/* ≤640px: the shell topbar keeps only the hamburger and the page title —
   bindTopbarActionsRelocation() moves the .topbar-actions node (role pill,
   notifications, language, user menu) to the drawer bottom, where it
   becomes a stacked footer block; dropdown panels render inline. */
@media (max-width: 640px) {
  .sidebar .topbar-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    margin-inline-start: 0;
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }

  .sidebar .notif,
  .sidebar .usermenu {
    width: 100%;
  }

  .sidebar .notif-panel,
  .sidebar .usermenu-panel {
    position: static;
    inset-inline-end: auto;
    width: 100%;
    max-width: none;
    box-shadow: none;
    border: 1px solid var(--line);
  }
}

/* ≤640px: the notification bell stays pinned at the bar's top-right
   (owner feedback 2026-09-07) while the rest of the cluster lives in the
   drawer — the bell is a direct topbar child again, so its dropdown
   behaves exactly as on desktop. */
@media (max-width: 640px) {
  .topbar > .notif {
    margin-inline-start: auto;
  }
}

/* ≤640px bell placement (deterministic): the title flexes to absorb the
   row, the now-empty actions container is hidden, and the bell lands at
   the row's inline-end — no wrap, no auto-margin ambiguity. */
@media (max-width: 640px) {
  .topbar .page-title {
    flex: 1 1 auto;
    min-width: 0;
  }

  .topbar > .topbar-actions:empty {
    display: none;
  }

  .topbar > .notif {
    margin-inline-start: 0;
    flex: none;
  }
}

/* Bell pinning, absolute form: the sticky topbar is the containing block,
   so the bell sits at the inline-end edge regardless of flex wrapping. */
@media (max-width: 640px) {
  .topbar > .notif {
    position: absolute;
    inset-inline-end: 12px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
  }
}

/* ≤640px dedup: the relocated cluster duplicates the drawer's own
   identity footer — keep exactly one identity (the user menu, which
   carries settings/sign-out) plus the language switch. */
@media (max-width: 640px) {
  .sidebar .sidebar-user {
    display: none;
  }

  .sidebar .topbar-actions .usermenu {
    flex: 1 1 100%;
  }
}

/* ≤640px footer row fit: compact pill/lang sizing so both share one line
   even with the longer Arabic role label. */
@media (max-width: 640px) {
  .sidebar .topbar-actions .pill {
    padding: 4px 10px;
    font-size: 12.5px;
  }

  .sidebar .topbar-actions .lang-switch,
  .sidebar .topbar-actions [data-action="toggle-lang"] {
    padding: 6px 10px;
    font-size: 13px;
  }
}

/* Role badge lives inside the user dropdown (owner feedback 2026-09-07):
   it opens with the panel instead of sitting in the bar. */
.usermenu-panel [data-role-badge] {
  display: inline-flex;
  margin: 6px 10px;
}

/* Phone scrollbars: the classic WebView scrollbar overlays the cards and
   reads as clutter — hide it on phones (touch scrolling is unaffected). */
@media (max-width: 640px) {
  html {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  html::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }
}

/* Dashboard mini rows (Priority Actions etc.): long Arabic/English
   titles must wrap inside the card, never spill past the border. */
.mini-row {
  min-width: 0;
}

.mini-title,
.mini-meta {
  overflow-wrap: anywhere;
}

/* Drawer footer pairing (owner feedback 2026-09-07, fit pass): the
   account pill and the language pill share one row — account fills the
   remaining width, language stays a compact fixed pill, role badge
   stays inside the user dropdown; flex order keeps [account][language]
   in LTR and mirrors automatically in RTL. The pair must physically fit
   275px drawers: slim metrics plus a complete shrink chain
   (usermenu → btn → name ellipsis) so the pills keep a visible gap
   instead of colliding at the row edge. */
@media (max-width: 640px) {
  .sidebar .topbar-actions {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .sidebar .topbar-actions [data-role-badge] {
    display: none !important;
  }

  .sidebar .topbar-actions .usermenu {
    order: 1;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .sidebar .usermenu-btn {
    min-width: 0;
    max-width: 100%;
    padding: 4px 8px;
    padding-inline-start: 3px;
    gap: 6px;
    font-size: 12.5px;
  }

  .sidebar .usermenu-avatar {
    width: 22px;
    height: 22px;
    font-size: 10.5px;
  }

  .sidebar .usermenu-name {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    font-size: 12.5px;
  }

  .sidebar .topbar-actions [data-action="toggle-lang"] {
    order: 2;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    width: auto !important;
    gap: 4px !important;
    padding: 6px 10px !important;
    border: 1px solid var(--line) !important;
    border-radius: 999px !important;
    background: #FFFFFF !important;
    font-size: 12.5px !important;
  }

  .sidebar .topbar-actions .lang-sep {
    opacity: 0.4;
  }
}

/* 641-900px shell topbar: one compact single-line row — the title
   ellipsizes instead of pushing the actions cluster onto a second row. */
@media (min-width: 641px) and (max-width: 900px) {
  .topbar {
    flex-wrap: nowrap;
    gap: 10px;
  }

  .topbar .page-title {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* text-overflow only applies to block containers, while the base
     .page-title is a flex row (for the gaps/rag icon+pill variant):
     plain-text titles switch to block so the ellipsis actually renders
     (they previously hard-clipped mid-word), and composite titles keep
     flex and truncate their text span instead. */
  .topbar .page-title:not(:has(> *)) {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar .page-title > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The trailing ai-pill badge no longer inherits nowrap from the title
     now that only the first span is pinned — keep it on one line. */
  .topbar .page-title .ai-pill {
    flex: none;
    white-space: nowrap;
  }

  .topbar-actions {
    margin-inline-start: 0;
    flex: none;
    gap: 6px;
  }

  .topbar-actions .btn {
    padding: 8px 10px;
    font-size: 13px;
  }

  .topbar-actions .usermenu-name {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ≤640px obligations register: the desktop table becomes stacked cards —
   no horizontal scrolling (mobile ergonomics), one card per obligation,
   each cell labeled via its data-label attribute. */
@media (max-width: 640px) {
  .table-scroll,
  .table-scroll .data {
    display: block;
    width: 100%;
    overflow-x: visible;
  }

  /* VIS-4: registers that render as class "table" (the actions page —
     eight columns) degrade to the same stacked cards, minus the
     obligations-specific column rules below: every cell keeps its
     data-label so nothing is squeezed or clipped behind the hidden
     .table-card overflow. */
  .table-scroll .table {
    display: block;
    width: 100%;
    overflow-x: visible;
  }

  .table-scroll .table tbody {
    display: block;
    width: 100%;
  }

  .table-scroll .table thead {
    display: none;
  }

  .table-scroll .table tr {
    display: block;
    width: 100%;
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md, 12px);
    background: #FFFFFF;
  }

  .table-scroll .table td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    width: auto;
    min-width: 0;
    padding: 5px 0;
    border: 0;
    text-align: end;
  }

  .table-scroll .table td[colspan] {
    display: block !important;
    text-align: start;
  }

  .table-scroll .table td::before {
    content: attr(data-label);
    flex: none;
    color: #6b7d90;
    font-size: 12.5px;
    font-weight: 600;
    text-align: start;
  }

  /* Keep the table internals block-level too: a table-row-group tbody
     wraps block rows in anonymous table boxes that shrink-fit short
     content (audit/users cards rendered ~half width). */
  .table-scroll .data tbody {
    display: block;
    width: 100%;
  }

  .table-scroll .data thead {
    display: none;
  }

  .table-scroll .data tr {
    display: block;
    width: 100%;
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md, 12px);
    background: #FFFFFF;
  }

  .table-scroll .data td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    width: auto;
    min-width: 0;
    padding: 5px 0;
    border: 0;
    text-align: end;
  }

  /* Cells spanning columns (detail panels, empty states) are their row's
     first cell — exempt them from the hidden-first-column rule. */
  .table-scroll .data td[colspan] {
    display: block !important;
    text-align: start;
  }

  .table-scroll .data td::before {
    content: attr(data-label);
    flex: none;
    color: #6b7d90;
    font-size: 12.5px;
    font-weight: 600;
    text-align: start;
  }

  .table-scroll .data td:first-child {
    display: none;
  }

  .table-scroll .data td:nth-child(3) {
    display: block;
    text-align: start;
  }

  .table-scroll .data td:nth-child(3)::before {
    display: block;
    margin-bottom: 3px;
  }

  .table-scroll .data td:last-child {
    justify-content: flex-end;
  }
}

/* ≤640px obligations toolbar (owner feedback 2026-09-07): tidy rows —
   full-width search, one-line scrollable status chips, the two selects
   side by side, the three buttons on one closing row. */
@media (max-width: 640px) {
  .ob-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .ob-toolbar .search-field,
  .ob-toolbar input[type="search"],
  .ob-toolbar .search {
    width: 100%;
  }

  .ob-toolbar .seg {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 6px;
    padding-bottom: 2px;
  }

  .ob-toolbar .seg::-webkit-scrollbar {
    display: none;
  }

  .ob-toolbar .seg .seg-btn {
    flex: none;
    white-space: nowrap;
  }

  .ob-toolbar .filter-field {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
  }

  .ob-toolbar .filter-row {
    display: flex;
    gap: 10px;
    align-items: flex-end;
  }

  .ob-toolbar .btn-row {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .ob-toolbar .btn-row .btn-primary {
    flex: 1 1 auto;
  }
}

/* ≤640px obligations filter-bar (owner feedback 2026-09-07): real
   container is .filter-bar — tidy grid rows instead of the staggered
   free-flow: full-width search, one-line scrollable status chips, the
   two selects side by side, Import/Export paired, Add Obligation
   full-width closing row. */
@media (max-width: 640px) {
  .filter-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: end;
  }

  .date-range-pair {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .filter-bar .search {
    grid-column: 1 / -1;
  }

  .filter-bar .seg {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 6px;
    padding-bottom: 2px;
  }

  .filter-bar .seg::-webkit-scrollbar {
    display: none;
  }

  .filter-bar .seg .seg-btn {
    flex: none;
    white-space: nowrap;
  }

  .filter-bar .filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    min-width: 0;
  }

  .filter-bar .filter-field .input {
    width: 100%;
  }

  .filter-bar .spacer {
    display: none;
  }

  .filter-bar #import-btn,
  .filter-bar #export-btn {
    margin: 0;
  }

  .filter-bar #add-ob {
    grid-column: 1 / -1;
    justify-content: center;
  }
}

/* ≤640px status filter (owner feedback 2026-09-07): the chip row becomes
   a dropdown; the chip strip stays for desktop/tablet. */
@media (max-width: 640px) {
  .filter-bar #ob-seg {
    display: none;
  }

  .filter-bar #ob-seg-select {
    display: block;
    width: 100%;
    grid-column: 1 / -1;
  }
}

#ob-seg-select {
  display: none;
}

/* ≤640px collapsed chip rows: the dropdowns built by bindChipCollapse. */
@media (max-width: 640px) {
  .seg-collapse-select {
    display: block;
    width: 100%;
    margin-bottom: 10px;
  }
}

/* ≤640px systemic collapse (owner feedback 2026-09-07): multi-column
   content grids on the shell pages (model aliases, user cards, audit
   rows, stat grids) must fill the phone width — no half-empty rows. */
@media (max-width: 640px) {
  .content [class*="grid"],
  .content [class*="columns"],
  .content .card-grid,
  .content .cards {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .content {
    overflow-x: hidden;
  }

  .content table {
    max-width: 100%;
  }

  /* UI-2 (IMPL-259): pills are nowrap on desktop for one-line rhythm; on
     narrow screens a squeezed cell must clip the label — wrapping beats
     clipping for status readability. */
  .content .pill {
    white-space: normal;
  }

  /* UI-2 (IMPL-260): writers' status cells render a native <select> with
     an inline min-width:140px; inside the squeezed 390px table the cell
     clips it mid-word ("Undefine"). At ≤640 the select sizes to its
     content — !important overrides the inline style from statusCell(). */
  .content select[data-status-for] {
    min-width: 0 !important;
    width: auto;
    max-width: 100%;
    font-size: 13px;
  }
}

/* ≤640px dashboard processing chips: a long "failed — needs follow-up"
   chip may fill the whole row, and its label and count stay in one
   inline flow so the count is always glued to the label end instead of
   stranding on its own wrapped line (chips are nowrap inline-flex on
   desktop for one-line rhythm). */
@media (max-width: 640px) {
  #proc-status .chip {
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    line-height: 1.6;
  }

  /* Restores the separation the flex gap provided before the pill
     stopped being a flex container. */
  #proc-status .chip .num {
    margin-inline-start: 6px;
  }
}

/* ≤640px: the compliance-trend panel ships as an empty placeholder —
   the reserved chart box reads as a rendering bug on phones, so collapse
   it while empty (returns automatically once the chart is populated). */
@media (max-width: 640px) {
  .trend-chart:empty,
  .trend-summary:empty {
    display: none;
  }
}

/* ≤640px stat cards (owner feedback 2026-09-07): the four KPI boxes
   render as a compact 2x2 pair grid instead of four tall full-width
   rows. The earlier truncation came from nowrap labels — compact type
   plus wrapping labels keeps both columns readable; scoped with
   .content so the rule out-competes the systemic collapse above.
   Shared by users / gaps / dashboard (same component class). */
@media (max-width: 640px) {
  .content .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }

  .stat-card {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 12px 14px;
    gap: 10px;
  }

  .stat-value {
    font-size: 22px;
  }

  .stat-label,
  .stat-card .stat-row + * {
    font-size: 12.5px;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    /* UI-3 (IMPL-260): stat labels never break mid-word — single-word
       labels like "Suspended" must stay whole; the row-wrap rule below
       gives the label the full card width so whole words always fit. */
    overflow-wrap: normal;
    word-break: keep-all;
  }

  /* UI-3 (IMPL-260): the icon+text row wraps — the value/label stack takes
     the full card width below the icon instead of being crushed beside it
     (the crush was the mid-word break's real cause). */
  .content .stat-card .stat-row {
    flex-wrap: wrap;
  }
  .content .stat-card .stat-row > div {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* ≤640px audit filter bar: the UTC note moves to the very top of the
   filter card (owner feedback 2026-09-07). The five filter fields then
   pair two per row and Export lands beside the Action select. */
@media (max-width: 640px) {
  #audit-filters > .card-sub {
    order: -1;
    grid-column: 1 / -1;
  }
}

/* ≤640px gaps filter bars: the stat pair grid and the Run Gap Scan CTA
   each span the full row, and Export closes the filter grid full-width
   instead of stranding beside the spacer (owner feedback 2026-09-07).
   #gap-kpis joined the list in IMPL-239 (RA-2): the generic ≤640
   .filter-bar two-column grid otherwise squeezes the whole KPI grid into
   a 161px half cell — the "missing breakpoint" theory was wrong, the
   reflow rule always worked. */
@media (max-width: 640px) {
  .filter-bar #gap-stats,
  .filter-bar #gap-kpis,
  .filter-bar #run-scan,
  #gap-filters #export-btn {
    grid-column: 1 / -1;
  }

  #gap-filters #export-btn {
    justify-content: center;
  }
}

/* ≤640px dashboard mini-rows (sources status, change radar): the base
   one-line style (white-space:nowrap) makes a long source title an
   unbreakable min-content — the row, its card and finally the grid track
   all grow past the viewport and the status pills get clipped at the
   right edge. Allow the title to wrap and let grid cards shrink below
   their content min-width. */
@media (max-width: 640px) {
  .content .mini-title {
    white-space: normal;
  }

  .content .card {
    min-width: 0;
  }
}

/* ≤640px compact topbar (owner feedback 2026-09-07): slimmer chrome —
   the owner flagged the top/bottom padding as too tall on phones. */
@media (max-width: 640px) {
  .topbar {
    padding: 9px 16px;
    gap: 8px 12px;
  }
}

/* ≤640px drawer footer (owner feedback 2026-09-07): pin account +
   language to the bottom of the scrolling drawer — they used to scroll
   away with the nav — and open the account panel upward so it never
   covers the language pill sitting beside the account pill. */
@media (max-width: 640px) {
  .sidebar .topbar-actions {
    position: sticky;
    bottom: 0;
    z-index: 6;
    margin: 4px -14px -20px;
    padding: 12px 14px 20px;
    background: var(--chrome, #fff);
    border-top: 1px solid var(--line);
  }

  .sidebar .usermenu-panel {
    top: auto;
    bottom: calc(100% + 8px);
    z-index: 7;
  }
}