/* ============================================================================
   Watheeq Deal Room — base stylesheet

   One stylesheet serves both directions. Every inline-axis rule uses CSS
   logical properties (inline-start / inline-end, padding-inline, border-inline)
   rather than left / right, so the investor shell (LTR, English-primary) and
   the internal shell (RTL, Arabic-first) both lay out correctly without a
   mirrored stylesheet and without a single direction-specific override.

   Design-system principle 3 — information before containers. Whitespace,
   alignment, typography and rules come first; a card must earn its place.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--wq-font-primary);
  font-size: var(--wq-body-l-size);
  line-height: var(--wq-body-l-line);
  font-weight: var(--wq-weight-regular);
  color: var(--dr-text);
  background: var(--dr-page-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── DIRECTION ──────────────────────────────────────────────────────────── */

/* Latin identifiers inside Arabic text must not be reordered by the bidi
   algorithm. Reference codes, filenames, emails, figures and dates are wrapped
   in .ltr so they read correctly on the Arabic-first internal screens. */
.ltr {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* Numeric columns stay tabular so figures align for comparison. */
.num {
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

/* ─── TYPOGRAPHY ─────────────────────────────────────────────────────────── */

h1, h2, h3 {
  margin: 0;
  font-weight: var(--wq-weight-semibold);
  color: var(--dr-text-strong);
}

h1 { font-size: var(--wq-h1-size); line-height: var(--wq-h1-line); }
h2 { font-size: var(--wq-h2-size); line-height: var(--wq-h2-line); }
h3 { font-size: var(--wq-h3-size); line-height: var(--wq-h3-line); }

p {
  margin: 0 0 var(--wq-space-4);
}

a {
  color: var(--dr-accent);
  text-underline-offset: 3px;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--dr-focus-ring);
  border-radius: var(--wq-radius-sm);
}

.quiet {
  color: var(--dr-text-quiet);
  font-size: var(--wq-body-size);
  line-height: var(--wq-body-line);
}

.caption {
  color: var(--dr-text-quiet);
  font-size: var(--wq-caption-size);
  line-height: var(--wq-caption-line);
  letter-spacing: .02em;
}

/* A secondary-language line sits visibly subordinate to the primary language,
   per the design system's bilingual hierarchy rule. */
.secondary-lang {
  display: block;
  color: var(--dr-text-quiet);
  font-size: var(--wq-body-size);
  line-height: var(--wq-body-line);
  font-weight: var(--wq-weight-regular);
}

/* ─── LAYOUT ─────────────────────────────────────────────────────────────── */

.shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  width: 100%;
  max-width: var(--dr-max-width);
  margin-inline: auto;
  padding-inline: var(--wq-space-6);
}

.shell--admin .container {
  max-width: var(--dr-max-width-admin);
}

main {
  flex: 1;
  padding-block: var(--wq-space-10) var(--wq-space-16);
}

/* ─── HEADER ─────────────────────────────────────────────────────────────── */

.site-header {
  background: var(--dr-surface);
  border-block-end: 1px solid var(--dr-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--wq-space-4);
  min-height: 72px;
  padding-block: var(--wq-space-3);
}

/* Identity is a link on every screen. Two ways home, the title and the mark,
   because a secondary page that offers no way back is the commonest way a data
   room starts feeling like a maze. */
.site-header__identity {
  display: flex;
  flex-direction: column;
  /* Stated rather than left to the default, because the coarse-pointer rule
     below centres every link's contents for touch targets. Without this the
     investor company centres itself under the deal title on a phone. */
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  margin-inline-end: auto;
  color: inherit;
  text-decoration: none;
  border-radius: var(--wq-radius-sm);
}

.site-header__title {
  font-size: var(--wq-title-size);
  line-height: var(--wq-title-line);
  font-weight: var(--wq-weight-semibold);
  color: var(--dr-text-strong);
}

.site-header__subtitle {
  font-size: var(--wq-body-s-size);
  line-height: var(--wq-body-s-line);
  color: var(--dr-text-quiet);
}

.site-header__identity:hover .site-header__title { color: var(--dr-accent); }

.site-header__inner--wide,
.shell--wide .container { max-width: var(--dr-max-width-admin); }

.site-header__home {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: var(--wq-radius-sm);
}

.site-header__logo {
  height: 34px;
  width: auto;
  display: block;
}

/* The phone stand-in for the horizontal mark. Held deliberately small: it is
   the brand, not the subject of the screen. */
.site-header__mark {
  height: 36px;
  width: auto;
  display: none;
}

/* ─── USER MENU ──────────────────────────────────────────────────────────── */
/* One trigger holds everything personal. On a phone it holds the navigation as
   well, which is why there is no separate hamburger: two menus splitting one
   job is how a header starts to sprawl. */

.usermenu { flex-shrink: 0; }

.usermenu > summary.usermenu__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--wq-space-2);
  width: auto;
  height: auto;
  min-height: var(--wq-control-standard);
  padding: var(--wq-space-1) var(--wq-space-3) var(--wq-space-1) var(--wq-space-1);
  border: 1px solid var(--dr-border);
  border-radius: 999px;
  background: var(--dr-surface);
  color: var(--dr-text);
  font-size: var(--wq-body-size);
  letter-spacing: normal;
  list-style: none;
  cursor: pointer;
}

.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu > summary:hover { background: var(--wq-mist); }

.avatar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--dr-accent);
  color: var(--wq-white);
  font-size: var(--wq-body-s-size);
  font-weight: var(--wq-weight-semibold);
  letter-spacing: .5px;
}

.usermenu__name {
  white-space: nowrap;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.usermenu__caret {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-inline-start: var(--wq-space-1);
  border-inline-end: 1.5px solid var(--dr-text-quiet);
  border-block-end: 1.5px solid var(--dr-text-quiet);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease;
}

.usermenu[open] .usermenu__caret { transform: rotate(-135deg) translate(-2px, -2px); }

.usermenu .usermenu__items {
  inset-inline-start: auto;
  inset-inline-end: 0;
  min-width: 232px;
}

/* Context, not a control. It says whose menu this is and what that account may
   do, and nothing in it is clickable. */
.usermenu__context {
  padding: var(--wq-space-2) var(--wq-space-3) var(--wq-space-3);
  margin-block-end: var(--wq-space-2);
  border-block-end: 1px solid var(--dr-border);
}

.usermenu__context-name {
  font-weight: var(--wq-weight-medium);
  color: var(--dr-text-strong);
}

.usermenu__context-email {
  font-size: var(--wq-body-s-size);
  color: var(--dr-text-quiet);
  margin-block: 2px var(--wq-space-2);
  overflow-wrap: anywhere;
}

.menu__item:focus-visible { background: var(--wq-mist); }

/* A single restrained gold rule under the header is the only place gold
   appears on a default screen. Recognition without occupation. */
.brand-rule {
  height: 2px;
  background: var(--dr-accent-premium);
}

/* The internal shell is unmistakably internal at a glance. */
.shell--admin .site-header {
  background: var(--dr-surface);
  border-block-end: 1px solid var(--dr-border);
}

.internal-badge {
  margin-inline-start: auto;
  flex-shrink: 0;
  padding: var(--wq-space-1) var(--wq-space-3);
  border: 1px solid var(--dr-internal-border);
  border-radius: var(--wq-radius-sm);
  background: var(--dr-internal-bg);
  color: var(--wq-warning);
  font-size: var(--wq-body-s-size);
  font-weight: var(--wq-weight-medium);
  white-space: nowrap;
}

/* ─── PANEL ──────────────────────────────────────────────────────────────── */

.panel {
  background: var(--dr-surface);
  border: 1px solid var(--dr-border);
  border-radius: var(--wq-radius-lg);
  padding: var(--wq-space-8);
}

.panel + .panel {
  margin-block-start: var(--wq-space-6);
}

.panel__title {
  font-size: var(--wq-title-size);
  line-height: var(--wq-title-line);
  font-weight: var(--wq-weight-semibold);
  color: var(--dr-text-strong);
  margin-block-end: var(--wq-space-2);
}

/* ─── STATUS ─────────────────────────────────────────────────────────────── */
/* Four approved statuses. There is deliberately no separate "delivery" state:
   evidence availability is derived from attached visible files, and actual
   disclosure is recorded in the activity log. */

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--wq-space-2);
  font-size: var(--wq-body-size);
  line-height: var(--wq-body-line);
  font-weight: var(--wq-weight-medium);
  white-space: nowrap;
}

.status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.status--pending  { color: var(--dr-status-pending); }
.status--partial  { color: var(--dr-status-partial); }
.status--complete { color: var(--dr-status-complete); }
.status--na       { color: var(--dr-status-na); }

/* ─── INTERNAL BAND ──────────────────────────────────────────────────────── */
/* Internal notes and internal ownership never reach the investor view. They
   are also visually distinct wherever they do appear, so a leak would be
   obvious to the person editing rather than to the investor reading. */

.internal {
  background: var(--dr-internal-bg);
  border-inline-start: 3px solid var(--dr-internal-border);
  border-radius: var(--wq-radius-sm);
  padding: var(--wq-space-3) var(--wq-space-4);
  font-size: var(--wq-body-size);
  line-height: var(--wq-body-line);
}

/* ─── FOOTER ─────────────────────────────────────────────────────────────── */

.site-footer {
  border-block-start: 1px solid var(--dr-border);
  padding-block: var(--wq-space-6);
  color: var(--dr-text-quiet);
  font-size: var(--wq-caption-size);
  line-height: var(--wq-caption-line);
}

/* ─── DEAL SNAPSHOT ──────────────────────────────────────────────────────── */
/* Optional and admin-controlled. The section is not rendered at all when no
   visible card exists, so there is no empty-state to design. */

.snapshot summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--wq-space-2);
  font-size: var(--wq-title-size);
  line-height: var(--wq-title-line);
  font-weight: var(--wq-weight-semibold);
  color: var(--dr-text-strong);
  padding-block: var(--wq-space-2);
}

.snapshot summary::-webkit-details-marker { display: none; }

.snapshot summary::before {
  content: "";
  width: 0;
  height: 0;
  border-block-start: 5px solid transparent;
  border-block-end: 5px solid transparent;
  border-inline-start: 6px solid var(--dr-text-quiet);
  transition: transform .15s ease;
  flex-shrink: 0;
}

.snapshot[open] summary::before {
  transform: rotate(90deg);
}

/* RTL: the disclosure triangle points the other way. Direction is meaning
   here, so this marker mirrors while non-directional icons do not. */
[dir="rtl"] .snapshot[open] summary::before {
  transform: rotate(-90deg);
}

/* Two columns is the baseline, so the common four-card set reads as a balanced
   2×2 rather than an awkward 3+1 on the narrower investor container. Wider
   viewports let the cards spread out; phones stack them. */
.snapshot__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--wq-space-5);
  margin-block-start: var(--wq-space-5);
}

@media (min-width: 900px) {
  .snapshot__grid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  }
}

@media (max-width: 479px) {
  .snapshot__grid {
    grid-template-columns: 1fr;
  }
}

.snapshot-card {
  padding-inline-start: var(--wq-space-4);
  border-inline-start: 2px solid var(--dr-accent-premium);
}

.snapshot-card__value {
  font-size: var(--wq-h2-size);
  line-height: var(--wq-h2-line);
  font-weight: var(--wq-weight-semibold);
  color: var(--dr-text-strong);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

[dir="rtl"] .snapshot-card__value {
  display: block;
  text-align: start;
}

.snapshot-card__label {
  font-size: var(--wq-body-size);
  line-height: var(--wq-body-line);
  font-weight: var(--wq-weight-medium);
  color: var(--dr-text);
  margin-block-start: var(--wq-space-1);
}

.snapshot-card__support {
  font-size: var(--wq-body-s-size);
  line-height: var(--wq-body-s-line);
  color: var(--dr-text-quiet);
  margin-block-start: 2px;
}

/* ─── PROGRESS ───────────────────────────────────────────────────────────── */
/* One quiet line, never a chart. Every number is counted at render time; no
   total is recorded anywhere, so a requirement added mid-diligence simply
   appears. */

.progress {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wq-space-5);
  padding-block: var(--wq-space-4);
  border-block-end: 1px solid var(--dr-border);
  margin-block-end: var(--wq-space-6);
}

.progress__item {
  display: inline-flex;
  align-items: baseline;
  gap: var(--wq-space-2);
  font-size: var(--wq-body-size);
}

.progress__count {
  font-size: var(--wq-title-size);
  font-weight: var(--wq-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--dr-text-strong);
}

/* ─── NEW SINCE LAST VISIT ───────────────────────────────────────────────── */

.since-last-visit {
  padding: var(--wq-space-3) var(--wq-space-4);
  background: var(--wq-mist);
  border-inline-start: 3px solid var(--wq-info);
  border-radius: var(--wq-radius-sm);
  font-size: var(--wq-body-size);
  margin-block-end: var(--wq-space-6);
}

/* ─── REQUIREMENT TREE ───────────────────────────────────────────────────── */
/* Native <details> elements: collapse works with no JavaScript, which keeps the
   content security policy free of inline script and makes the tree usable the
   moment the HTML arrives on a slow phone connection. */

.tree {
  display: flex;
  flex-direction: column;
}

.req {
  border-block-start: 1px solid var(--dr-border);
}

.req:last-child {
  border-block-end: 1px solid var(--dr-border);
}

.req > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: var(--wq-space-3);
  padding-block: var(--wq-space-4);
}

.req > summary::-webkit-details-marker { display: none; }

.req__ref {
  flex-shrink: 0;
  min-width: 2.6em;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
  color: var(--dr-text-quiet);
  font-size: var(--wq-body-size);
  font-weight: var(--wq-weight-medium);
}

.req__title {
  flex: 1;
  min-width: 0;
  font-weight: var(--wq-weight-medium);
  color: var(--dr-text-strong);
}

.req__status {
  flex-shrink: 0;
}

.req__body {
  padding-inline-start: calc(2.6em + var(--wq-space-3));
  padding-block-end: var(--wq-space-5);
}

.req__note {
  font-size: var(--wq-body-l-size);
  line-height: var(--wq-body-l-line);
  color: var(--dr-text);
  margin-block-end: var(--wq-space-4);
}

.req__na-reason {
  font-size: var(--wq-body-size);
  color: var(--dr-status-na);
  margin-block-end: var(--wq-space-4);
}

/* A nested subtree sits on a quiet rule rather than in another card. */
.req__children {
  border-inline-start: 1px solid var(--dr-border);
  padding-inline-start: var(--wq-space-4);
}

.req__children .req:first-child {
  border-block-start: none;
}

.req__children .req:last-child {
  border-block-end: none;
}

.req__empty {
  color: var(--dr-text-quiet);
  font-size: var(--wq-body-size);
  font-style: normal;
}

/* Hidden-from-investor rows are unmistakable on the internal side. */
.req--hidden > summary .req__title {
  color: var(--dr-text-quiet);
}

.req__hidden-flag {
  flex-shrink: 0;
  font-size: var(--wq-body-s-size);
  font-weight: var(--wq-weight-medium);
  color: var(--wq-warning);
}

/* ─── STAGE 0 BOOT CHECK ─────────────────────────────────────────────────── */
/* Removed once Stage 1 replaces these placeholder screens. */

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wq-space-3);
}

.checklist li {
  display: flex;
  align-items: baseline;
  gap: var(--wq-space-3);
  font-size: var(--wq-body-l-size);
}

.checklist li::before {
  content: "✓";
  color: var(--wq-success);
  font-weight: var(--wq-weight-semibold);
  flex-shrink: 0;
}

.specimen {
  display: flex;
  flex-direction: column;
  gap: var(--wq-space-2);
  margin-block-start: var(--wq-space-4);
}

.specimen > div {
  padding-block: var(--wq-space-1);
}

.w300 { font-weight: 300; }
.w400 { font-weight: 400; }
.w500 { font-weight: 500; }
.w600 { font-weight: 600; }
.w700 { font-weight: 700; }

/* ─── ERROR PAGE ─────────────────────────────────────────────────────────── */

.error-page {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--wq-space-4);
}

.error-page__code {
  font-size: var(--wq-display-size);
  line-height: var(--wq-display-line);
  font-weight: var(--wq-weight-semibold);
  color: var(--dr-accent);
}

/* ─── MOBILE ─────────────────────────────────────────────────────────────── */
/* Mobile is a first-class surface: the investor may open this from an email or
   a WhatsApp message on a phone. No horizontal scrolling, anywhere. */

@media (max-width: 767px) {
  body {
    font-size: var(--wq-body-size);
    line-height: var(--wq-body-line);
  }

  h1 { font-size: var(--wq-h2-size); line-height: var(--wq-h2-line); }
  h2 { font-size: var(--wq-h3-size); line-height: var(--wq-h3-line); }

  .container {
    padding-inline: var(--wq-space-4);
  }

  main {
    padding-block: var(--wq-space-6) var(--wq-space-10);
  }

  .panel {
    padding: var(--wq-space-5);
    border-radius: var(--wq-radius-md);
  }

  .site-header__inner {
    min-height: 60px;
  }

  .site-header__logo {
    height: 28px;
  }

  /* The internal badge would push the title off a narrow screen. */
  .internal-badge {
    display: none;
  }
}

/* Touch targets reach the comfortable control height on coarse pointers. */
@media (pointer: coarse) {
  a,
  button {
    min-height: var(--wq-control-comfortable);
    display: inline-flex;
    align-items: center;
  }
}

/* ─── FORMS ──────────────────────────────────────────────────────────────── */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--wq-space-5);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--wq-space-2);
}

.field__label {
  font-size: var(--wq-body-size);
  line-height: var(--wq-body-line);
  font-weight: var(--wq-weight-medium);
  color: var(--dr-text);
}

.field__input,
.field__select {
  width: 100%;
  min-height: var(--wq-control-comfortable);
  padding: 0 var(--wq-space-4);
  font-family: inherit;
  font-size: var(--wq-body-l-size);
  color: var(--dr-text);
  background: var(--dr-surface);
  border: var(--wq-control-border) solid var(--dr-border);
  border-radius: var(--wq-control-radius);
}

.field__input:focus,
.field__select:focus {
  outline: none;
  border-color: var(--dr-accent);
  box-shadow: var(--dr-focus-ring);
}

.field__hint {
  font-size: var(--wq-body-s-size);
  color: var(--dr-text-quiet);
}

/* ─── BUTTONS ────────────────────────────────────────────────────────────── */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wq-button-icon-gap);
  min-height: var(--wq-control-comfortable);
  padding-inline: var(--wq-button-padding-inline-standard);
  font-family: inherit;
  font-size: var(--wq-body-l-size);
  font-weight: var(--wq-weight-medium);
  border-radius: var(--wq-control-radius);
  border: var(--wq-control-border) solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.button--primary {
  background: var(--dr-accent);
  color: var(--wq-white);
}

.button--primary:hover { background: #22336A; }

.button--quiet {
  background: var(--dr-surface);
  border-color: var(--dr-border);
  color: var(--dr-text);
}

.button--quiet:hover { background: var(--wq-mist); }

.button--compact {
  min-height: var(--wq-control-compact);
  padding-inline: var(--wq-space-3);
  font-size: var(--wq-body-size);
}

.button--danger {
  background: var(--dr-surface);
  border-color: var(--wq-danger);
  color: var(--wq-danger);
}

/* ─── ALERTS ─────────────────────────────────────────────────────────────── */

.alert {
  padding: var(--wq-space-3) var(--wq-space-4);
  border-radius: var(--wq-radius-sm);
  border-inline-start: 3px solid;
  font-size: var(--wq-body-size);
  line-height: var(--wq-body-line);
  margin-block-end: var(--wq-space-5);
}

.alert--error  { background: #FBF3F3; border-color: var(--wq-danger);  color: var(--wq-danger); }
.alert--notice { background: #F1F6F3; border-color: var(--wq-success); color: var(--wq-success); }

/* ─── LOGIN ──────────────────────────────────────────────────────────────── */

.login {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--wq-space-6);
  padding: var(--wq-space-6);
}

.login__panel {
  width: 100%;
  max-width: 420px;
  background: var(--dr-surface);
  border: 1px solid var(--dr-border);
  border-radius: var(--wq-radius-lg);
  padding: var(--wq-space-10) var(--wq-space-8);
  box-shadow: var(--wq-shadow-low);
}

.login__logo {
  height: 38px;
  width: auto;
  margin-block-end: var(--wq-space-6);
}

.login__title {
  font-size: var(--wq-h2-size);
  line-height: var(--wq-h2-line);
  margin-block-end: var(--wq-space-2);
}

.login__subtitle {
  color: var(--dr-text-quiet);
  font-size: var(--wq-body-size);
  line-height: var(--wq-body-line);
  margin-block-end: var(--wq-space-8);
}

.login__footer {
  max-width: 420px;
  text-align: center;
  color: var(--dr-text-quiet);
  font-size: var(--wq-caption-size);
  line-height: var(--wq-caption-line);
  margin: 0;
}

.linkish {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: var(--wq-body-s-size);
  color: var(--dr-accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─── ADMIN TABLE ────────────────────────────────────────────────────────── */
/* Used only on internal screens. The investor experience has no wide tables. */

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wq-body-size);
}

.admin-table th,
.admin-table td {
  text-align: start;
  padding: var(--wq-space-3);
  border-block-end: 1px solid var(--dr-border);
  vertical-align: middle;
}

.admin-table th {
  font-weight: var(--wq-weight-semibold);
  color: var(--dr-text-quiet);
  font-size: var(--wq-body-s-size);
  white-space: nowrap;
}

.admin-table td form {
  display: inline;
}

.pill {
  display: inline-block;
  padding: 2px var(--wq-space-2);
  border-radius: var(--wq-radius-sm);
  font-size: var(--wq-caption-size);
  font-weight: var(--wq-weight-medium);
}

.pill--on  { background: #F1F6F3; color: var(--wq-success); }
.pill--off { background: #FBF3F3; color: var(--wq-danger); }
.pill--role { background: var(--wq-mist); color: var(--wq-info); }

.admin-table-wrap {
  overflow-x: auto;
  /* Contains the scroll rather than letting a wide table push the page. */
  max-width: 100%;
}

/* ─── STAGE 3: ADMIN CONTROLS ────────────────────────────────────────────── */
/* Administration is the same Deal Room with controls, not a separate product,
   so these sit inside the existing tree rather than beside it. */

/* Controls stay quiet until the row is open, so a list of requirements reads as
   a list of requirements rather than a wall of buttons. */
.row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--wq-space-4);
  margin-block-start: var(--wq-space-4);
  padding-block-start: var(--wq-space-3);
  border-block-start: 1px solid var(--dr-border);
}

.row-actions--tight {
  margin-block-start: var(--wq-space-3);
  gap: var(--wq-space-3);
}

.row-actions form { display: inline-flex; gap: var(--wq-space-1); }

.icon-button {
  width: var(--wq-control-compact);
  height: var(--wq-control-compact);
  min-height: var(--wq-control-compact);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--dr-border);
  border-radius: var(--wq-radius-sm);
  background: var(--dr-surface);
  color: var(--dr-text-quiet);
  font-size: 14px;
  cursor: pointer;
}

.icon-button:hover { background: var(--wq-mist); color: var(--dr-text); }

.inline-panel > summary {
  cursor: pointer;
  list-style: none;
  display: inline-block;
}

.inline-panel > summary::-webkit-details-marker { display: none; }

.inline-panel[open] {
  display: block;
  width: 100%;
  padding: var(--wq-space-4);
  margin-block-start: var(--wq-space-2);
  background: var(--wq-ivory);
  border: 1px solid var(--dr-border);
  border-radius: var(--wq-radius-md);
}

.linkish--danger { color: var(--wq-danger); }

.form--tight { gap: var(--wq-space-4); margin-block-start: var(--wq-space-4); }

.field-row {
  display: flex;
  gap: var(--wq-space-4);
  align-items: flex-start;
}

.field-row > .field { flex: 1; min-width: 0; }
.field--narrow { flex: 0 0 132px !important; }

.field--check {
  flex-direction: row;
  align-items: center;
  gap: var(--wq-space-3);
}

.field--check input { width: 20px; height: 20px; flex-shrink: 0; }

.field__input--area {
  min-height: auto;
  padding: var(--wq-space-3) var(--wq-space-4);
  line-height: var(--wq-body-l-line);
  resize: vertical;
}

.button-row { display: flex; gap: var(--wq-space-3); }

/* ─── PREVIEW AS INVESTOR ────────────────────────────────────────────────── */

.preview-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wq-space-4);
  padding: var(--wq-space-3) var(--wq-space-4);
  margin-block-end: var(--wq-space-6);
  background: var(--dr-internal-bg);
  border: 1px solid var(--dr-internal-border);
  border-radius: var(--wq-radius-md);
  font-size: var(--wq-body-size);
}

/* ─── CHEVRON ────────────────────────────────────────────────────────────── */
/* Only rendered on rows that actually contain something. */

.req__chevron {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-inline-end: 1.5px solid var(--dr-text-quiet);
  border-block-end: 1.5px solid var(--dr-text-quiet);
  transform: rotate(-45deg);
  transition: transform .15s ease;
  margin-inline-start: var(--wq-space-2);
}

.req[open] > summary .req__chevron { transform: rotate(45deg); }

.req--flat > summary { cursor: default; }

/* ─── EVIDENCE ───────────────────────────────────────────────────────────── */
/* The distinction is real but understated: a quiet label, not a badge. */

.evidence {
  display: flex;
  flex-direction: column;
  gap: var(--wq-space-2);
  margin-block-start: var(--wq-space-4);
}

.evidence__group {
  display: flex;
  align-items: baseline;
  gap: var(--wq-space-3);
}

.evidence__label {
  font-size: var(--wq-body-size);
  font-weight: var(--wq-weight-medium);
  color: var(--dr-text);
}

.evidence__label--supporting {
  font-weight: var(--wq-weight-regular);
  color: var(--dr-text-quiet);
}

/* ─── SNAPSHOT LINK ──────────────────────────────────────────────────────── */
/* A small mark, never a call-to-action button. */

.snapshot-card__link {
  font-size: var(--wq-body-size);
  text-decoration: none;
  color: var(--dr-text-quiet);
  margin-inline-start: var(--wq-space-2);
  vertical-align: super;
}

.snapshot-card__link:hover { color: var(--dr-accent); }

.snapshot-card--hidden { opacity: .62; }

/* ─── MOBILE ─────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  /* Long filenames and long titles must never set the page width. */
  .req__title,
  .snapshot-card__label,
  .evidence__group { overflow-wrap: anywhere; }

  .field-row { flex-direction: column; gap: var(--wq-space-4); }
  .field--narrow { flex: 1 1 auto !important; }

  .row-actions { gap: var(--wq-space-3); }

  /* Snapshot collapsed by default on a phone. */
  .snapshot__grid { gap: var(--wq-space-4); }
}

/* ─── MOBILE: REQUIREMENT ROW ────────────────────────────────────────────── */
/* On a phone the status label and the title compete for the same line, and the
   status wins because it must not wrap — which squeezes long requirement titles
   into a two-word column. Stacking the row fixes that: reference, title and
   chevron read across the top, status sits underneath aligned to the title. */

@media (max-width: 767px) {
  .req > summary {
    flex-wrap: wrap;
    row-gap: var(--wq-space-2);
  }

  /* basis 0, not auto: the title then takes the space that is left and wraps
     its own text, instead of wrapping the whole flex item onto a new line and
     pushing the reference code onto a line of its own. */
  .req__title   { flex: 1 1 0; min-width: 0; }
  .req__chevron { order: 2; align-self: center; }

  .req__status {
    order: 3;
    flex: 1 1 100%;
    padding-inline-start: calc(2.6em + var(--wq-space-3));
  }

  .req__hidden-flag { order: 4; }

  /* The subtree indent costs width that long titles need more. */
  .req__children  { padding-inline-start: var(--wq-space-3); }
  .req__body      { padding-inline-start: var(--wq-space-3); }

}

/* ─── LTR ISOLATION ──────────────────────────────────────────────────────── */
/* For identifiers that must keep their internal order: the CMA licence number,
   usernames, reference codes. Unlike .ltr this does not change `display`, so it
   sits inside a sentence without affecting line breaking.

   On an English page these read correctly anyway; the isolate guarantees it
   holds if the surrounding text is ever right-to-left. "18189-32" must never
   render as "32-18189". */
.ltr-isolate {
  direction: ltr;
  unicode-bidi: isolate;
}

.mono { font-variant-numeric: tabular-nums; }

/* ─── LOGIN CONFIDENTIALITY COPY ─────────────────────────────────────────── */
/* Two lines, with the weight on the first. "Confidential" is the statement;
   "Access by invitation only" qualifies it and is set smaller and italic. */

.login__confidential {
  margin: 0;
  font-size: var(--wq-body-l-size);
  line-height: var(--wq-body-l-line);
  font-weight: var(--wq-weight-medium);
  color: var(--dr-text);
}

.login__invitation {
  margin: 2px 0 var(--wq-space-8);
  font-size: var(--wq-body-size);
  line-height: var(--wq-body-line);
  font-style: italic;
  color: var(--dr-text-quiet);
}

/* ─── USERS TABLE ────────────────────────────────────────────────────────── */

.cell-wrap {
  max-width: 260px;
  overflow-wrap: anywhere;
}

/* Activity carries values nobody chose: an uploaded filename, a delivery
   reference. Neither has a length limit worth relying on, so the cell wraps
   them and the date column keeps the width it needs to stay on one line. */
.admin-table td {
  overflow-wrap: anywhere;
}

.admin-table td .num {
  white-space: nowrap;
}

.admin-table .row-actions {
  margin-block-start: 0;
  padding-block-start: 0;
  border-block-start: none;
  gap: var(--wq-space-2);
}

.admin-table .row-actions form {
  flex-wrap: wrap;
  gap: var(--wq-space-2);
}

.admin-table .inline-panel[open] {
  min-width: 260px;
}

/* ─── DOCUMENT ROWS ──────────────────────────────────────────────────────── */
/* What the investor sees of a document: what it is, why it matters here, and
   the two things they can do with it. No path, no hash, no internal filename. */

.evidence__heading {
  font-size: var(--wq-body-size);
  font-weight: var(--wq-weight-medium);
  color: var(--dr-text);
  margin-block: var(--wq-space-4) var(--wq-space-2);
}

.evidence__heading--supporting {
  font-weight: var(--wq-weight-regular);
  color: var(--dr-text-quiet);
}

.doc {
  display: flex;
  align-items: flex-start;
  gap: var(--wq-space-4);
  padding-block: var(--wq-space-3);
  border-block-start: 1px solid var(--dr-border);
}

.doc:first-of-type { border-block-start: none; }

.doc__type {
  flex-shrink: 0;
  min-width: 46px;
  padding: 2px var(--wq-space-2);
  border: 1px solid var(--dr-border);
  border-radius: var(--wq-radius-sm);
  background: var(--wq-mist);
  color: var(--dr-text-quiet);
  font-size: var(--wq-caption-size);
  font-weight: var(--wq-weight-medium);
  text-align: center;
  letter-spacing: .03em;
}

.doc__body { flex: 1 1 0; min-width: 0; }

.doc__title {
  font-size: var(--wq-body-l-size);
  color: var(--dr-text-strong);
  /* A long document title must wrap rather than set the width of the page. */
  overflow-wrap: anywhere;
}

.doc__note {
  font-size: var(--wq-body-size);
  color: var(--dr-text-quiet);
  margin-block-start: 2px;
  overflow-wrap: anywhere;
}

.doc__page {
  font-size: var(--wq-body-s-size);
  color: var(--dr-text-quiet);
  margin-block-start: 2px;
  overflow-wrap: anywhere;
}

.doc__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wq-space-3);
  margin-block-start: var(--wq-space-1);
  font-size: var(--wq-caption-size);
  color: var(--dr-text-quiet);
}

.doc__tag {
  padding: 1px var(--wq-space-2);
  border-radius: var(--wq-radius-sm);
  background: var(--wq-sand);
  color: var(--wq-clay);
  font-weight: var(--wq-weight-medium);
}

.doc__actions {
  flex-shrink: 0;
  display: flex;
  gap: var(--wq-space-2);
}

.ask { margin-block-start: var(--wq-space-5); }

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wq-space-4);
  flex-wrap: wrap;
}

/* ─── HELD DOCUMENTS (ADMIN ONLY) ────────────────────────────────────────── */

.doc--held { background: var(--dr-internal-bg); }

.doc__hold {
  margin-block-start: var(--wq-space-2);
  padding: var(--wq-space-2) var(--wq-space-3);
  border-inline-start: 3px solid var(--dr-internal-border);
  border-radius: var(--wq-radius-sm);
  background: var(--dr-internal-bg);
  font-size: var(--wq-body-size);
  color: var(--dr-text);
}

.doc__state {
  padding: 1px var(--wq-space-2);
  border-radius: var(--wq-radius-sm);
  font-weight: var(--wq-weight-medium);
}

.doc__state--held { background: #FBF3F3; color: var(--wq-danger); }
.doc__state--published { background: #F1F6F3; color: var(--wq-success); }

/* ─── EXPECTED DOCUMENT (ADMIN ONLY) ─────────────────────────────────────── */

.expected {
  margin-block-start: var(--wq-space-3);
  padding: var(--wq-space-2) var(--wq-space-3);
  border: 1px dashed var(--dr-border);
  border-radius: var(--wq-radius-sm);
  font-size: var(--wq-body-size);
  color: var(--dr-text-quiet);
}

/* ─── OVERFLOW MENU ──────────────────────────────────────────────────────── */
/* One restrained control per row instead of six permanent buttons. Native
   <details>, so it needs no JavaScript and closes on Escape. */

.menu { position: relative; }

.menu > summary {
  list-style: none;
  cursor: pointer;
  width: var(--wq-control-compact);
  height: var(--wq-control-compact);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--dr-border);
  border-radius: var(--wq-radius-sm);
  background: var(--dr-surface);
  color: var(--dr-text-quiet);
  letter-spacing: 1px;
}

.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { background: var(--wq-mist); color: var(--dr-text); }

.menu__items {
  position: absolute;
  z-index: 20;
  inset-inline-start: 0;
  min-width: 190px;
  margin-block-start: var(--wq-space-1);
  padding: var(--wq-space-2);
  background: var(--dr-surface);
  border: 1px solid var(--dr-border);
  border-radius: var(--wq-radius-md);
  box-shadow: var(--wq-shadow-overlay);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.menu__items form { display: block; }

.menu__item {
  display: block;
  width: 100%;
  text-align: start;
  padding: var(--wq-space-2) var(--wq-space-3);
  border: none;
  border-radius: var(--wq-radius-sm);
  background: none;
  font: inherit;
  font-size: var(--wq-body-size);
  color: var(--dr-text);
  cursor: pointer;
}

/* A link and a button sit side by side in this menu and must not look like two
   different kinds of thing. The hover band is the affordance; the underline a
   link would otherwise carry is not. */
.menu__item { text-decoration: none; }

.menu__item:hover { background: var(--wq-mist); }

/* Where you already are. Weight only, no rule and no filled block: it is a
   position indicator, not a control competing with the items around it. */
.menu__item.is-active {
  font-weight: var(--wq-weight-medium);
  color: var(--dr-text-strong);
}
.menu__item--danger { color: var(--wq-danger); }

/* ─── QUESTION THREADS ───────────────────────────────────────────────────── */

.thread {
  padding-block: var(--wq-space-5);
  border-block-start: 1px solid var(--dr-border);
}

.thread:first-of-type { border-block-start: none; padding-block-start: 0; }

.thread__subject {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--wq-space-2);
  font-weight: var(--wq-weight-medium);
  color: var(--dr-text-strong);
}

.msg {
  margin-block-start: var(--wq-space-3);
  padding: var(--wq-space-3) var(--wq-space-4);
  border-radius: var(--wq-radius-md);
  background: var(--wq-mist);
}

/* A reply from Watheeq is visually distinct from the question. */
.msg--watheeq {
  background: var(--wq-ivory);
  border-inline-start: 3px solid var(--dr-accent);
}

.msg__who {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wq-space-2);
  align-items: baseline;
  font-size: var(--wq-body-s-size);
  font-weight: var(--wq-weight-medium);
  color: var(--dr-text-quiet);
  margin-block-end: var(--wq-space-1);
}

.msg__body { white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 767px) {
  .doc { flex-wrap: wrap; }
  .doc__actions { flex: 1 1 100%; }
  .doc__actions .button { flex: 1; }
  .menu__items { inset-inline-start: auto; inset-inline-end: 0; }
}

/* The panel's own summary is the no-script fallback for the overflow menu. It
   is hidden only once the script has run, so the controls stay reachable if the
   script fails to load. */
.has-js .panel-fallback { display: none; }
.has-js .inline-panel[open] { display: block; }

/* ─── HEADER: PHONE ──────────────────────────────────────────────────────── */
/* Below 768px the name and the chevron come off the trigger and it becomes the
   avatar on its own, and the horizontal logo is replaced by the icon. The order
   across the header does not change with the width: identity, then the person,
   then Watheeq holding the outer edge. */

@media (max-width: 767px) {
  .site-header__inner {
    gap: var(--wq-space-3);
    min-height: 64px;
  }

  .site-header__logo { display: none; }
  .site-header__mark { display: block; }

  .site-header__title {
    font-size: var(--wq-body-l-size);
    line-height: var(--wq-body-l-line);
  }

  /* The avatar alone. A full name in a phone header either truncates or steals
     the width the deal title needs. */
  .usermenu__name,
  .usermenu__caret { display: none; }

  .usermenu > summary.usermenu__trigger {
    padding: 0;
    border-color: transparent;
    background: none;
    min-height: var(--wq-control-comfortable);
    min-width: var(--wq-control-comfortable);
    justify-content: center;
  }

  .avatar { width: 34px; height: 34px; }

  /* Comfortable targets, and never wider than the screen. */
  .usermenu .usermenu__items {
    min-width: 0;
    width: max-content;
    max-width: calc(100vw - var(--wq-space-8));
  }

  .usermenu .usermenu__items .menu__item {
    padding-block: var(--wq-space-3);
    font-size: var(--wq-body-l-size);
  }
}

/* ─── INLINE DISCUSSION ──────────────────────────────────────────────────── */
/* A view of question records that already exist, shown underneath the
   requirement they were asked about. Closed until asked for, and using the same
   thread and message styling as the Questions page, because it is the same
   conversation rather than a second one. */

.discussion { margin-block-start: var(--wq-space-3); }

.discussion__threads {
  margin-block-start: var(--wq-space-3);
  padding-inline-start: var(--wq-space-4);
  border-inline-start: 2px solid var(--dr-border);
}

.discussion__threads .thread:first-of-type {
  border-block-start: none;
  padding-block-start: 0;
}

.thread__remove { margin-block-start: var(--wq-space-4); }

/* ─── ACCOUNT DETAIL LIST ────────────────────────────────────────────────── */

.detail-list {
  margin: var(--wq-space-4) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--wq-space-3);
}

.detail-list__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--wq-space-3);
}

.detail-list dt {
  flex: 0 0 120px;
  font-size: var(--wq-body-s-size);
  color: var(--dr-text-quiet);
}

.detail-list dd {
  /* basis rather than auto, so a long job title wraps within its own column
     instead of dropping onto the line below its label. */
  flex: 1 1 200px;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ─── PROGRESSIVE ENHANCEMENT VISIBILITY ─────────────────────────────────── */
/* A control that needs the script is hidden until the script has run, and the
   plain-text instruction it replaces is hidden once it has. */

.js-only { display: none; }
.has-js .js-only { display: inline-flex; }
.has-js .no-js-only { display: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ─── SMALL LAYOUT UTILITIES ─────────────────────────────────────────────── */
/* These replace style attributes on the internal screens. The content security
   policy has no 'unsafe-inline' for styles, so those attributes were being
   blocked and quietly doing nothing: a form meant to be 420px wide was running
   the full width of the panel. A rule in the stylesheet can be seen, reviewed
   and overridden; a blocked attribute cannot. */

.measure-420 { max-width: 420px; }
.measure-460 { max-width: 460px; }
.measure-560 { max-width: 560px; }

.spaced-2 { margin-block-start: var(--wq-space-2); }
.spaced-5 { margin-block-start: var(--wq-space-5); }
.spaced-6 { margin-block-start: var(--wq-space-6); }

.text-warning { color: var(--wq-warning); }

/* ─── DOCUMENT ARCHITECTURE ──────────────────────────────────────────────── */
/* One document is one physical file, linked to as many requirements as it
   serves. These styles exist to make that legible: the role a document plays
   here, and where else the same file is used. */

.role-badge {
  display: inline-block;
  margin-inline-start: var(--wq-space-2);
  padding: 1px var(--wq-space-2);
  border-radius: var(--wq-radius-sm);
  font-size: var(--wq-caption-size);
  font-weight: var(--wq-weight-medium);
  vertical-align: middle;
}

.role-badge--primary    { background: var(--wq-mist); color: var(--dr-accent); }
.role-badge--supporting { background: var(--wq-ivory); color: var(--dr-text-quiet); }

/* "Used in: 03, 11". Quiet, but present on every document that serves more
   than one requirement, because otherwise the same file reads as three
   separate uploads. */
.doc__used {
  margin-block-start: var(--wq-space-1);
  font-size: var(--wq-caption-size);
  color: var(--dr-text-quiet);
}

.doc__state--superseded,
.doc__state--archived { color: var(--wq-warning); }
.doc__state--current  { color: var(--wq-success); }

/* A retired version stays visible internally and is unmistakably not the one
   in circulation. */
.doc--retired { opacity: .72; }

/* The three administrator panels sit under the card, across its full width.
   Without the wrap on .doc they become a fourth and fifth column in the same
   flex row and squeeze the title down to one letter per line. */
.doc { flex-wrap: wrap; }
.doc__body { flex: 1 1 260px; }

/* Closed, these take no room at all: their summaries are hidden once the
   script has run, because the actions are reached from the card's own menu,
   and an empty bordered box between every document is noise. */
.doc__panel { flex: 1 1 100%; }

/* Out of the flex flow entirely when closed. Each one still occupies a line of
   its own otherwise, and three of them put 48px of nothing between every pair
   of documents. Only applied once the script has run: without it the panel
   summaries are the way these actions are reached. */
.has-js .doc__panel:not([open]) { display: none; }

.doc__panel[open] {
  margin-block-start: var(--wq-space-3);
  padding-block-start: var(--wq-space-3);
  border-block-start: 1px dashed var(--dr-border);
}

.doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wq-space-5);
  margin-block-start: var(--wq-space-4);
}

/* The Owner / Status / Notes columns carried over from the signed requirements
   schedule. Internal, and visually separate from the live workflow status so
   the two are never read as one. */
.schedule {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wq-space-2) var(--wq-space-5);
  margin-block-start: var(--wq-space-3);
  padding: var(--wq-space-2) var(--wq-space-3);
  border-inline-start: 2px solid var(--dr-border);
  font-size: var(--wq-body-s-size);
  color: var(--dr-text-quiet);
}

.req__reference-flag {
  flex-shrink: 0;
  padding: 1px var(--wq-space-2);
  border: 1px solid var(--dr-accent-premium);
  border-radius: var(--wq-radius-sm);
  background: var(--dr-internal-bg);
  color: var(--wq-warning);
  font-size: var(--wq-caption-size);
  font-weight: var(--wq-weight-medium);
  white-space: nowrap;
}

/* A scrollable set of tick boxes rather than a multi-select: a multi-select
   needs a modifier key to choose a second item, which is exactly the mistake
   that produces a document linked to one requirement instead of three. */
.checkset {
  display: flex;
  flex-direction: column;
  gap: var(--wq-space-1);
  max-height: 220px;
  overflow-y: auto;
  padding: var(--wq-space-2);
  border: 1px solid var(--dr-border);
  border-radius: var(--wq-radius-sm);
  background: var(--dr-surface);
}

.checkset .field--check {
  display: flex;
  align-items: baseline;
  gap: var(--wq-space-2);
  font-size: var(--wq-body-s-size);
  cursor: pointer;
}

/* ─── DOCUMENT RECORD (INTERNAL) ─────────────────────────────────────────── */

.doc-record__head {
  display: flex;
  align-items: flex-start;
  gap: var(--wq-space-3);
  flex-wrap: wrap;
}

.doc-record__title {
  flex: 1 1 260px;
  min-width: 0;
  font-weight: var(--wq-weight-medium);
  color: var(--dr-text-strong);
  overflow-wrap: anywhere;
}

.doc-record--retired { opacity: .78; }

.link-table {
  margin-block-start: var(--wq-space-4);
  border-block-start: 1px solid var(--dr-border);
  font-size: var(--wq-body-s-size);
}

.link-table__head,
.link-table__row {
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr 1.4fr;
  gap: var(--wq-space-3);
  padding-block: var(--wq-space-2);
  border-block-end: 1px solid var(--dr-border);
  overflow-wrap: anywhere;
}

.link-table__head { color: var(--dr-text-quiet); font-weight: var(--wq-weight-medium); }

/* Requirement, role, note, page, internal note, Save. Each row is its own form,
   so a note saved under one requirement cannot disturb another. */
.link-table--edit .link-table__head,
.link-table--edit .link-table__row {
  grid-template-columns: 1.6fr .9fr 1.6fr .8fr 1.4fr auto;
  align-items: center;
}

.field__input--compact,
.field__select--compact {
  padding: var(--wq-space-2);
  font-size: var(--wq-body-s-size);
  width: 100%;
}

.plain-list {
  margin: var(--wq-space-2) 0;
  padding-inline-start: var(--wq-space-5);
  color: var(--dr-text-quiet);
  font-size: var(--wq-body-s-size);
}

@media (max-width: 767px) {
  .link-table__head { display: none; }
  .link-table__row  { grid-template-columns: 1fr; gap: 2px; }
  .doc-actions      { gap: var(--wq-space-3); }

  /* Six inputs cannot share a phone's width. The row stacks, and the column
     headings are already hidden, so each control carries its own label through
     aria-label and its placeholder. */
  .link-table--edit .link-table__head { display: none; }

  .link-table--edit .link-table__row {
    grid-template-columns: 1fr;
    gap: var(--wq-space-2);
    padding-block: var(--wq-space-4);
  }
}

/* ─── STILL OUTSTANDING ──────────────────────────────────────────────────── */
/* Three columns rather than four; the link table's own grid assumes a document
   row. Internal only, like everything it summarises. */
.link-table__row--three { grid-template-columns: 2fr 1fr 2.4fr; }

/* A reminder that has been answered. Kept on the requirement rather than
   removed, so the record of what was asked for survives the delivery. */
.expected--met {
  opacity: .8;
  border-inline-start-color: var(--wq-success);
}

@media (max-width: 767px) {
  .link-table__row--three { grid-template-columns: 1fr; }
}