/* =====================================================================
   Version 2 tokens.

   The designs depart from the RBFA Play design system's gold and burgundy in
   favour of a flaming red against neutral slate. That is a product decision
   made in the handoff, not a drift — the DS stylesheets still supply the base
   type roles; this replaces the accent and the surfaces on top of them.

   Loaded *after* tokens.css, so a page part-way through the migration renders
   in one palette rather than two. Everything here is a token: no page should
   name a hex value, because the next palette decision should be one file.
   ===================================================================== */

:root {
  /* The accent, and the gradient it is drawn with. The flat colour is the
     fallback wherever a gradient cannot go — a border, an SVG stroke. */
  --v2-accent: var(--c-accent-49a);
  --v2-accent-2: var(--c-accent-59);
  --v2-accent-gradient: linear-gradient(135deg, var(--c-accent-49a), var(--c-accent-59));
  --v2-accent-deep: linear-gradient(135deg, var(--c-accent-49a), var(--c-accent-24));
  /* The accent at the weight of a background. The partner colour already
     had one (--v2-partner-soft) and the accent did not, so anything that
     wanted to wash a row in it reached for --v2-page and lost the colour.
     Opaque rather than an alpha: it is drawn over both --v2-surface and
     --v2-page, and an alpha gives two different pinks. */
  --v2-accent-soft: var(--c-accent-97);

  /* Ink, in three weights. Anything below --v2-ink-mute is not readable on
     the page ground at 12px, which is the smallest type here. */
  --v2-ink: var(--c-info-11);
  --v2-ink-soft: var(--c-neutral-27);
  --v2-ink-mute: var(--c-neutral-61);
  --v2-ink-meta: var(--c-neutral-46);

  /* Surfaces and the lines between them. */
  --v2-page: var(--c-neutral-96);
  --v2-surface: var(--c-neutral-100);
  --v2-band: var(--c-neutral-98b);              /* zebra stripe, odd rows */
  --v2-hairline: var(--c-neutral-91);
  --v2-hairline-warm: var(--c-neutral-93);
  --v2-rule: var(--c-neutral-84);

  /* The three capability levels, from the card designs. Not a ramp of one hue:
     the levels are a hierarchy, not a magnitude, and three distinct colours
     are what let a wall of cards be read by level at a glance. */
  --v2-level-1: var(--c-info-17);
  --v2-level-2: var(--c-info-39);
  --v2-level-3: var(--c-warn-47b);

  /*
   * The two parties on this programme, RBFA and its development partner.
   *
   * RBFA is royal gold — the brand's *primary* in the design system
   * (colors_and_type.css, --rbfa-gold-*). Flaming red is the brand's
   * interactive accent, which is already what --v2-accent means here: on
   * buttons, on today's date, on the one thing that matters. A party drawn
   * in the same red as the Save button reads as a control.
   *
   * Here rather than in one page's stylesheet because two screens draw the
   * two parties now — the roadmap's legend and the team calendar — and a
   * party whose colour is copied is a party whose colour drifts.
   */
  --v2-gold-50: var(--c-brand-95);
  --v2-gold-100: var(--c-brand-89a);
  --v2-gold-200: var(--c-brand-74);
  --v2-gold-300: var(--c-brand-65);
  --v2-gold-400: var(--c-brand-59);
  --v2-gold-600: var(--c-brand-47);
  --v2-gold-700: var(--c-brand-30);
  --v2-partner: var(--c-brand-48);
  --v2-partner-soft: rgba(29, 78, 216, .07);
  --v2-partner-line: rgba(29, 78, 216, .35);

  /* A row that needs attention: a UAT requirement with no open stories. */
  --v2-warn-row: var(--c-danger-94);

  /* A standing caveat about the data — the report's data warnings, and
     housekeeping's note about a field that is not mapped. Here rather than in
     one page's stylesheet, because two pages now say the same kind of thing
     and they should say it the same way. */
  --warn-bg: var(--c-danger-97a);
  --warn-rule: var(--c-danger-84);
  --warn-ink: var(--c-danger-29);

  /*
   * Not settled yet: a risk, an open question, something worth a look.
   *
   * The brand's Royal Gold, and the same three values lib/deck-base.js has
   * carried as `amber` / `amberBg` / `amberLn` since the decks were written
   * — so a warning on a screen and a warning on a slide are one colour.
   * Six stylesheets had picked it out by hand before it was a token.
   *
   * Three golds, and they are not interchangeable with the two families
   * above. `--warn-*` is a caveat about the *data* and is red-orange;
   * `--v2-warn-row` is a row that needs attention and is red. This one is
   * amber on purpose: it prompts a look rather than reporting a fault, and
   * red here would claim something is wrong when nothing is.
   */
  --v2-warn-bg: var(--c-warn-94a);
  --v2-warn-line: var(--c-warn-79);
  --v2-warn-text: var(--c-warn-32);

  /* The Airfocus hover tooltip in the grids — a full-column fill. */
  --v2-airfocus: var(--c-info-60a);
  /* The AF badge sits on white inside that fill, so it needs the darker step. */
  --v2-airfocus-ink: var(--c-info-39a);
  /* A flagged row, hovered. One step down from the resting fill, so the row
     still reads as flagged while the pointer is on it. */
  --v2-warn-row-hover: var(--c-danger-91);

  --v2-shadow-card: 0 1px 2px rgba(164, 140, 78, .10);
  --v2-shadow-panel: 0 1px 2px rgba(17, 24, 39, .04);
  --v2-shadow-rail: 2px 0 10px rgba(0, 0, 0, .18);

  --v2-radius: 8px;
  --v2-radius-lg: 14px;
  --v2-radius-pill: 1000px;

  --v2-rail: 64px;
  /* The demo banner's own height: 18px of line inside 9px of padding. The
     rail is fixed, so it has to be told about anything above it. */
  --v2-banner: 36px;
  --v2-rail-open: 240px;
  /* The second level, which opens beside the rail rather than inside it. */
  --v2-rail-panel: 232px;
  /* What the Report button occupies in the bottom right, plus a gap: a 40px
     pill 22px off the edge, and 26px so the last row is not merely uncovered
     but readable. Every page's content is padded by it, because the button is
     fixed and does not know what is under it. */
  --v2-fab-clear: 88px;
  /* What separates one block of a page from the next, down the main column.
     A token because a block that means to sit *on* the one below it has to
     close this gap, and a literal in two files is a gap that drifts. */
  --v2-stack-gap: 20px;

  --v2-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/*
 * The teams, by name.
 *
 * Named rather than indexed: a colour that shifts when a team is added is a
 * colour nobody can learn. These are the same names the Airfocus `team` field
 * carries, so a lookup needs no mapping table.
 */
:root {
  --team-black: var(--c-neutral-00);
  --team-yellow: var(--c-warn-47b);
  --team-red: var(--c-accent-49a);
  --team-uiux: var(--c-info-39);
  --team-arch: var(--c-brand-65a);
  --team-uat: var(--c-success-45);
  --team-unassigned: var(--c-neutral-61);
}

/* =====================================================================
   Rendered Markdown.

   Descriptions are stored as Markdown and rendered as DOM by lib/markdown.js.
   The styles live here rather than beside one page because four screens show
   a description — the explorer's drawer, the builder's cards, the printed
   document — and a description that reads differently on each is four
   descriptions.
   ===================================================================== */

.md-h { margin: 0 0 4px; font-weight: 700; line-height: 1.3; color: var(--v2-ink); }
h1.md-h { font-size: 16px; }
h2.md-h { font-size: 15px; }
h3.md-h, h4.md-h, h5.md-h, h6.md-h { font-size: 13px; }
/* Not the first: a description opening with a heading should not begin with a
   gap the surrounding layout already provided. */
.md-h:not(:first-child) { margin-top: 12px; }

.md-p { margin: 0 0 8px; }
.md-p:last-child { margin-bottom: 0; }

.md-list { margin: 0 0 8px; padding-left: 20px; }
.md-list:last-child { margin-bottom: 0; }
.md-list li { margin: 2px 0; }

/* A table in a description — usually an acceptance list, sometimes a
   mapping. Its own scroller, so eight columns of criteria do not push the
   panel they are in sideways. */
.md-table-wrap { margin: 0 0 8px; overflow-x: auto; }
.md-table-wrap:last-child { margin-bottom: 0; }
.md-table { border-collapse: collapse; font-size: 12px; min-width: 100%; }
.md-table th, .md-table td {
  border: 1px solid var(--v2-hairline); padding: 5px 8px;
  text-align: left; vertical-align: top;
}
.md-table th { background: var(--v2-page); font-weight: 700; white-space: nowrap; }

.md-quote {
  margin: 0 0 8px; padding: 2px 0 2px 10px;
  border-left: 2px solid var(--v2-hairline); color: var(--v2-ink-soft);
}

.md-code {
  font-family: var(--v2-mono); font-size: .92em;
  background: var(--v2-page); border-radius: 4px; padding: 1px 4px;
}
.md-pre {
  margin: 0 0 8px; padding: 8px 10px;
  background: var(--v2-page); border-radius: var(--v2-radius);
  /* Its own scroller: a long line of code must not make the page scroll
     sideways. */
  overflow-x: auto;
}
.md-pre code { font-family: var(--v2-mono); font-size: 12px; white-space: pre; }

.md-link { color: var(--v2-accent); text-decoration: underline; }

/* ---------- consent, once a session ----------

   Built by lib/airfocus-consent.js rather than by any one page, so the
   sentence about who is responsible for what lands in Airfocus is one
   sentence rather than three that drift. */

.af-consent { border: 0; border-radius: 12px; padding: 0; max-width: 460px; width: 90vw; }
.af-consent::backdrop { background: rgba(0, 0, 0, .4); }
.af-consent .dialog-body {
  padding: 22px 24px; display: flex; flex-direction: column; gap: 12px;
}
.af-consent h2 { margin: 0; font-size: 16px; font-weight: 700; }
.af-consent p {
  margin: 0; font-size: 12.5px; line-height: 19px; color: var(--v2-ink-soft, var(--c-neutral-35a));
}
.af-consent .af-consent-what {
  font-weight: 600; color: var(--v2-ink, var(--c-neutral-10a));
}
.af-consent .dialog-actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px;
}

/* ---------- "Link to a requirement" (HELP-50, HELP-48) ----------

   Built by lib/link-requirements-dialog.js for every page that links
   Airfocus requirements in bulk, so /scope and Housekeeping look alike. */

.rl-dialog {
  border: 0; border-radius: 12px; padding: 0; max-width: 520px; width: 92vw;
  background: var(--v2-surface); color: var(--v2-ink);
}
.rl-dialog::backdrop { background: rgba(0, 0, 0, .4); }
.rl-dialog .dialog-body { padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.rl-dialog h2 { margin: 0; font-size: 16px; font-weight: 700; }
.rl-dialog p { margin: 0; font-size: 12.5px; line-height: 19px; color: var(--v2-ink-soft); }
.rl-field { display: flex; flex-direction: column; gap: 4px; }
.rl-field-name { font-size: 12px; font-weight: 700; color: var(--v2-ink); }
.rl-input {
  font: inherit; font-size: 13px; padding: 7px 9px; color: var(--v2-ink);
  background: var(--v2-surface); border: 1px solid var(--v2-rule); border-radius: var(--v2-radius);
}
.rl-dialog .rl-found { min-height: 19px; color: var(--v2-ink-meta); }
.rl-dialog .rl-problem { color: var(--v2-warn-text); font-weight: 600; }
.rl-dialog .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.rl-list { margin: 0; padding: 0; list-style: none; max-height: 50vh; overflow-y: auto; }
.rl-row {
  display: grid; grid-template-columns: 64px 110px 1fr; gap: 2px 8px; align-items: baseline;
  padding: 6px 0; border-top: 1px solid var(--v2-hairline); font-size: 12.5px;
}
.rl-row:first-child { border-top: 0; }
.rl-outcome { font-weight: 700; }
.rl-row[data-outcome="linked"] .rl-outcome { color: var(--c-success-24b); }
.rl-row[data-outcome="failed"] .rl-outcome { color: var(--c-danger-27); }
.rl-row[data-outcome="skipped"] .rl-outcome { color: var(--v2-ink-mute); }
.rl-key { font-family: var(--v2-mono); font-size: 12px; }
.rl-title { color: var(--v2-ink-soft); overflow-wrap: break-word; }
.rl-reason { grid-column: 2 / -1; color: var(--v2-ink-meta); overflow-wrap: break-word; }
.rl-dialog .rl-question { font-weight: 600; color: var(--v2-ink); }