/**
 * 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-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);
}

/* 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;
}

.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;
}

/* ---------------------------------------------------------------- */
/* 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;
  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;
}

/* ---------------------------------------------------------------- */
/* About dialog (four-class IP statement, built by the shared        */
/* runtime on every shell page — #227 item 12 / ARCH-03 §5.4.5)      */
/* ---------------------------------------------------------------- */

.about-intro {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

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

.about-ip-intro {
  margin: 2px 0 10px;
  font-size: 14px;
  color: var(--muted);
}

.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;
}

.about-foot {
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

/* The About trigger inside the topbar user menu is a button, not a link;
   neutralise the remaining native control chrome so it reads as a menu row
   (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;
  /* Full-viewport host with centred content: toasts appear mid-screen
     where they cannot be missed, instead of hugging the bottom edge. */
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 200;
  pointer-events: none;
}

.toast {
  background: var(--ink);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

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

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

/* Error toasts (IMPL-237 P1-5 / IMPL-239): longer hold, dismiss button,
   pointer-events enabled so the close button stays clickable. */
.toast.toast-error {
  pointer-events: auto;
  background: var(--danger, #b3261e);
  padding-right: 12px;
}

.toast .toast-close {
  margin-inline-start: 10px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}

/* 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; }

/* 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;
}

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

.demo-env-badge {
  display: inline-block;
  padding: 4px 12px;
  border: 1px dashed var(--line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  background: var(--surface, #fff);
}

/* ---------------------------------------------------------------- */
/* 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);
}

.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-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-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;
}

/* 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;
}

/* app.js adds .page-leave just before an internal navigation. */
body.page-leave {
  opacity: 0;
  transition: opacity 140ms ease-in;
}

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

  body.page-leave {
    transition: 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 keep the legacy JS fade from
   app.js. Kept to a quiet cross-fade per the government visual baseline; no
   directional motion so RTL and LTR read identically. The shell (sidebar +
   topbar) is pinned as its own static layer, so only the content area
   cross-fades — the chrome never appears to reload. 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;
}

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

::view-transition-new(root) {
  animation: 160ms ease-out both vt-page-in;
}

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

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

/* 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) {
    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;
  }

  .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%;
  }
}

/* ≤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;
    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;
    overflow-wrap: anywhere;
  }
}

/* ≤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;
  }
}