/*
 * The customer-chatbot deck.
 *
 * Tokens are copied from `frontend/shared/src/styles/tokens.generated.css` rather than imported:
 * this page is built by a different Dockerfile from a different directory, and a relative import
 * across that boundary is a file that resolves in a checkout and 404s in the image. Only the values
 * this deck actually uses are here, so the copy stays small enough to notice when it drifts.
 *
 * One slide fills the viewport and the deck scrolls between them, rather than transforming a single
 * stage. Scroll-snap does the paging, `deck.js` only moves focus — so the deck still works with
 * JavaScript disabled, still prints, and a reader who prefers to scroll may simply scroll.
 */

@font-face {
  font-family: "Alexandria";
  src: url("fonts/alexandria-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2212;
}

@font-face {
  font-family: "Alexandria";
  src: url("fonts/alexandria-arabic.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}

:root {
  --surface: #f8fafc;
  --surface-raised: #ffffff;
  --surface-sunken: #f1f5f9;
  --border-subtle: #e5e7eb;
  --border-strong: #cbd5e1;
  --text-primary: #0f172a;
  --text-muted: #64748b;
  --primary: #0042c8;
  --primary-subtle: #eef4ff;
  --primary-border: #dbeafe;
  --accent: #ff7e20;
  --accent-subtle: #fff7ed;
  --accent-strong: #ea580c;
  --danger: #e11d48;
  --danger-subtle: #fff1f2;

  /* The dark ground. Derived from the bank's own #0042c8 rather than a neutral navy, so the cover
     reads as NAB's blue at low luminance instead of as a generic dark slide. */
  --ink: #05102e;
  --ink-raised: #0c1c47;
  --ink-border: #1e3068;
  --on-ink: #ffffff;
  --on-ink-muted: #97a9d4;

  --slide-padding: clamp(1.5rem, 4vw, 5rem);
  --measure: 62ch;
}

/* A dark slide restates the tokens rather than overriding each rule, so every component inside it
   — cards, tables, rules, the eyebrow — inverts without knowing it is on a dark ground. */
.slide--dark {
  --surface: var(--ink);
  --surface-raised: var(--ink-raised);
  --surface-sunken: var(--ink-raised);
  --border-subtle: var(--ink-border);
  --border-strong: var(--ink-border);
  --text-primary: var(--on-ink);
  --text-muted: var(--on-ink-muted);
  --primary: var(--accent);
  --primary-subtle: var(--ink-raised);
  --primary-border: var(--ink-border);

  background: var(--ink);
  color: var(--on-ink);
  border-bottom-color: var(--ink-border);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: "Alexandria", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text-primary);
  background: var(--surface);
  font-size: clamp(0.95rem, 0.6rem + 0.5vw, 1.15rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------------------------
 * The deck
 * ------------------------------------------------------------------------------------ */

.deck {
  scroll-snap-type: y mandatory;
  height: 100dvh;
  overflow-y: auto;
}

.slide {
  scroll-snap-align: start;
  min-height: 100dvh;
  padding: var(--slide-padding);
  padding-top: max(var(--slide-padding), env(safe-area-inset-top, 0px));
  padding-bottom: max(var(--slide-padding), env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  position: relative;
  border-bottom: 1px solid var(--border-subtle);
}

/* A slide whose content is genuinely taller than the viewport scrolls within itself rather than
 * being clipped — which is what happened to the reuse table at laptop height. */
.slide--tall {
  justify-content: flex-start;
  overflow-y: auto;
}

.slide__eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

/* The accent rule. `::before` rather than a border on the text, so it sits on the baseline block
   and does not stretch when the eyebrow wraps on a narrow screen. */
.slide__eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 2px;
  background: var(--accent);
  flex: none;
}

.slide h1 {
  font-size: clamp(2rem, 1rem + 4vw, 4rem);
  line-height: 1.1;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.02em;
}

.slide h2 {
  font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  line-height: 1.15;
  font-weight: 650;
  margin: 0;
  letter-spacing: -0.01em;
  max-width: 22ch;
}

.slide h3 {
  font-size: 1.05rem;
  font-weight: 650;
  margin: 0 0 0.35rem;
}

.slide p {
  margin: 0;
  max-width: var(--measure);
  color: var(--text-muted);
}

.slide p.lead {
  font-size: clamp(1.05rem, 0.8rem + 0.7vw, 1.4rem);
  color: var(--text-primary);
  max-width: 48ch;
}

.slide strong {
  color: var(--text-primary);
  font-weight: 650;
}

.slide code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.88em;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

/* ---------------------------------------------------------------------------------------
 * Pieces
 * ------------------------------------------------------------------------------------ */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
  width: 100%;
}

.card {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 1.25rem;
}

.card--accent {
  border-color: var(--accent-border, #fed7aa);
  background: var(--accent-subtle);
}

.card--primary {
  border-color: var(--primary-border);
  background: var(--primary-subtle);
}

.card--danger {
  border-color: #fecdd3;
  background: var(--danger-subtle);
}

.card p {
  font-size: 0.95rem;
}

.rule-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
  max-width: var(--measure);
}

.rule-list li {
  padding-inline-start: 1.5rem;
  position: relative;
  color: var(--text-muted);
}

.rule-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.62em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 2px;
  background: var(--accent);
}

.rule-list li strong {
  display: block;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.92rem;
}

/* Tables are the one thing allowed to be wider than the slide, in their own scroller, so a
 * narrow screen scrolls the table instead of the page. */
.table-scroll {
  overflow-x: auto;
  width: 100%;
}

th,
td {
  text-align: start;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}

th {
  font-weight: 650;
  color: var(--text-primary);
  white-space: nowrap;
}

td {
  color: var(--text-muted);
}

td strong {
  color: var(--text-primary);
}

.tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}

.tag--built {
  background: var(--primary-subtle);
  color: var(--primary);
}

.tag--new {
  background: var(--accent-subtle);
  color: var(--accent-strong);
}

.tag--decision {
  background: var(--danger-subtle);
  color: var(--danger);
}

figure {
  margin: 0;
  width: 100%;
}

figure svg {
  width: 100%;
  height: auto;
  max-height: 58vh;
  display: block;
}

figcaption {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  max-width: var(--measure);
}

.diagram-label {
  font-family: "Alexandria", system-ui, sans-serif;
  font-size: 13px;
  fill: var(--text-primary);
}

.diagram-label--muted {
  fill: var(--text-muted);
  font-size: 11.5px;
}

.diagram-box {
  fill: var(--surface-raised);
  stroke: var(--border-strong);
  stroke-width: 1.5;
}

.diagram-box--primary {
  fill: var(--primary-subtle);
  stroke: var(--primary);
}

.diagram-box--accent {
  fill: var(--accent-subtle);
  stroke: var(--accent-strong);
}

.diagram-box--forbidden {
  fill: var(--danger-subtle);
  stroke: var(--danger);
  stroke-dasharray: 5 4;
}

.diagram-line {
  stroke: var(--border-strong);
  stroke-width: 1.5;
  fill: none;
}

.diagram-line--forbidden {
  stroke: var(--danger);
  stroke-dasharray: 5 4;
}

/* ---------------------------------------------------------------------------------------
 * Chrome
 * ------------------------------------------------------------------------------------ */

.deck-progress {
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 10;
  transition: transform 120ms linear;
}

.deck-counter {
  position: fixed;
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  inset-inline-end: 1rem;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  z-index: 10;
}

.slide__footer {
  position: absolute;
  bottom: var(--slide-padding);
  inset-inline-start: var(--slide-padding);
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------------------------
 * Print — one slide per page, so the deck is also the PDF
 * ------------------------------------------------------------------------------------ */

@media print {
  .deck-progress,
  .deck-counter {
    display: none;
  }

  .deck {
    height: auto;
    overflow: visible;
  }

  .slide {
    min-height: auto;
    page-break-after: always;
    break-after: page;
    border-bottom: none;
    padding: 2rem;
  }

  .slide:last-child {
    page-break-after: auto;
  }

  body {
    background: #fff;
  }
}

/* ---------------------------------------------------------------------------------------
 * Branding
 *
 * Both marks are supplied as files rather than redrawn. NAB's is the official SVG from the bank's
 * own asset set, in its blue #0042c8 and a white inverse — the same blue as `--primary`, which is
 * where that token came from. UTEEK's is the supplied artwork, cropped to the mark and keyed off
 * its paper, in brand orange and white.
 *
 * Sized by height, never by width: the two marks have different aspect ratios, and matching their
 * widths makes one of them visually twice the weight of the other.
 * ------------------------------------------------------------------------------------ */

.lockup {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.25rem);
  flex-wrap: wrap;
}

.lockup img {
  display: block;
  width: auto;
}

.lockup__nab {
  height: clamp(2rem, 4.5vw, 3.25rem);
}

.lockup__uteek {
  /* Taller than a width-match would give. The two marks have very different aspect ratios — NAB's
     is 3.5:1 with its Arabic lockup, UTEEK's is 1.35:1 — so equal widths make UTEEK read as half
     the weight. Matched by optical size instead. */
  height: clamp(1.8rem, 4vw, 3rem);
}

/* The hairline between the two marks. A partnership deck that runs them together reads as one
   organisation; a divider says there are two. */
.lockup__divider {
  width: 1px;
  align-self: stretch;
  min-height: 2rem;
  background: var(--border-strong);
  flex: none;
}

/* The corner mark on a content slide: present, small, and out of the way. Positioned rather than
   in the flow, so it cannot push a slide's content and change how much fits. */
.slide__mark {
  position: absolute;
  bottom: var(--slide-padding);
  inset-inline-start: var(--slide-padding);
  height: 1.7rem;
  width: auto;
  opacity: 0.65;
}

/* A slide whose content may reach the bottom keeps the mark out of its way by not having one —
   see the markup. Nothing to do here. */

/* ---------------------------------------------------------------------------------------
 * The cover and the close
 * ------------------------------------------------------------------------------------ */

.slide--cover {
  gap: clamp(1.5rem, 4vh, 3rem);
}

.slide--cover h1 {
  font-size: clamp(2.25rem, 1rem + 5vw, 5rem);
  max-width: 18ch;
}

.slide--cover .lockup {
  margin-bottom: clamp(0.5rem, 3vh, 2rem);
}

/* The cover's own accent: a rule the width of the title block, under the logos. Drawn with a
   gradient so it fades rather than stopping, which at full width reads as a border. */
.cover-rule {
  height: 2px;
  width: min(100%, 34rem);
  background: linear-gradient(to right, var(--accent), rgba(255, 126, 32, 0));
  border: 0;
  margin: 0;
}

.slide--cover .meta {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--on-ink-muted);
}

.slide--cover .meta > div {
  display: grid;
  gap: 0.15rem;
}

.slide--cover .meta dt {
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.slide--cover .meta dd {
  margin: 0;
  color: var(--on-ink);
}

@media print {
  .slide--dark {
    /* Printers do not fill a page with ink, and a browser's "background graphics" setting is off
       by default — so the cover would print as white text on white. Inverted for paper. */
    background: #fff;
    color: var(--text-primary);
    --text-primary: #0f172a;
    --text-muted: #64748b;
    --on-ink: #0f172a;
    --on-ink-muted: #64748b;
  }

  img.for-print {
    display: block;
  }

  img.for-screen {
    display: none;
  }
}

/* The white marks are invisible on paper, so the dark slides carry both variants and one is hidden
   at a time. `content: none` on an <img> does not swap a source — it removes replaced content in
   some engines and does nothing in others, which is a rule that looks like it works.
 *
 * `img.for-print` and not `.for-print`: `.lockup img` above is (0,1,1) and a lone class is (0,1,0),
 * so the bare selector loses and the deck showed both marks side by side. */
img.for-print {
  display: none;
}

/* ---------------------------------------------------------------------------------------
 * Diagram vocabulary, used by the technical slides
 * ------------------------------------------------------------------------------------ */

/* A step that exists but is not the subject of the slide. */
.diagram-box--ghost {
  fill: var(--surface-sunken);
  stroke: var(--border-subtle);
  stroke-width: 1.5;
}

/* The audit rail, and anything else drawn as a channel rather than a step. */
.diagram-rail {
  fill: var(--surface-sunken);
  stroke: var(--border-strong);
  stroke-width: 1.5;
  stroke-dasharray: none;
}

.diagram-line--thin {
  stroke: var(--border-subtle);
  stroke-width: 1;
}

.diagram-line--accent {
  stroke: var(--accent-strong);
  stroke-width: 2;
}

.diagram-label--accent {
  fill: var(--accent-strong);
  font-size: 11.5px;
  font-weight: 600;
}

.diagram-label--danger {
  fill: var(--danger);
  font-size: 11.5px;
  font-weight: 600;
}

.diagram-label--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  fill: var(--text-muted);
}

/* A figure that carries numbers under it: the parameters a diagram abstracts away. */
.figure-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.75rem;
  margin-top: 0.9rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.figure-notes b {
  color: var(--text-primary);
  font-weight: 650;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.95em;
}