/*
 * Option C, "Workbench": the application's screens, recreated, in device frames.
 *
 * WHY THIS FILE EXISTS. The owner asked for "screens from the app" (6 October 2026). A real
 * screenshot needs a Keycloak sign-in with TOTP, which an unattended run cannot pass, and a
 * screenshot also goes stale the day a screen changes. So each screen is HTML and CSS drawn from
 * the SPA's own components - the markup in `_includes/screens/*.njk` names its source file - and
 * every figure on it is invented, as each caption says. The homepage laptop has done this since
 * 5 October 2026; this file does it for three more screens and the dashboard.
 *
 * HOW IT SCALES. Every `.device-screen` is a size container, and everything inside `.app` is
 * sized in `em` from one `--u` set in `cqi` per device. So a screen is one picture that scales as
 * a whole, at any width, the way a screenshot would - and it never reflows into a different
 * layout on a phone, which a picture of a screen must not do.
 *
 * WHAT IT IS TO A SCREEN READER. One image. `.device-screen` carries role="img" and an
 * aria-label that says what the screen shows; `.app` inside it is aria-hidden. A picture of a
 * table is not a table to read, and nothing in it is a heading or a link - the headings are `<p>`.
 *
 * THE COLOURS INSIDE `.app` ARE THE SPA'S: brand blue, the teal accent where the SPA draws it,
 * and the status colours of `index.css`. The plum is this site's and appears only on the pins,
 * which sit on top of a screen rather than in it.
 *
 * COPIED FROM OPTION C "WORKBENCH" for the combined design (owner's brief, 9 October 2026), with
 * Workbench's vermilion signal replaced by the brief's plum, and its ledger grid, its card behind
 * the words and its scroll-timeline motion removed: letterpress.css styles the tour and reveal.js
 * moves it, so nothing that carries content rides a scroll timeline.
 *
 * Linked from layout.njk with `?v=` (the assetVersion filter), for the reason site.css is.
 */

/* The device frames around the recreated screens: graphite, warm enough to sit on paper. Paper
   on it is 14.38:1. */
:root {
  --color-graphite: #23272d;
  --color-graphite-edge: #3a3f46;
}

/* ---------------------------------------------------------------- device frames */

.device {
  position: relative;
  margin: 0;
  min-width: 0;
}

.device-frame {
  position: relative;
  background: var(--color-graphite);
  box-shadow:
    inset 0 0 0 1px var(--color-graphite-edge),
    0 2px 4px rgb(17 20 24 / 10%),
    0 32px 64px -28px rgb(13 66 98 / 45%);
}

/* `overflow: clip`, not `hidden`, and that is load-bearing: `hidden` makes the screen a scroll
   container, and a pin's scroll timeline (`view()`) would then follow the screen - which never
   scrolls - instead of the page. The pins froze half drawn until this changed. `hidden` stays as
   the fallback for a browser without `clip`, which has no scroll timelines either. */
.device-screen {
  position: relative;
  overflow: hidden;
  overflow: clip;
  container-type: inline-size;
  background: var(--app-ground);
}

/* A browser window: the dots, one tab, then the page. */
.device-browser .device-frame {
  padding: 0 0.5rem 0.5rem;
  border-radius: 10px;
}

.device-browser .device-screen {
  aspect-ratio: 16 / 11;
  border-radius: 3px;
  --u: 1.38cqi;
}

.device-browser--wide .device-screen {
  aspect-ratio: 16 / 8.4;
  --u: 1.8cqi;
}

.device-browser--tall .device-screen {
  aspect-ratio: 4 / 3;
}

.device-chrome {
  display: flex;
  align-items: flex-end;
  gap: 0.875rem;
  height: 2.25rem;
  padding-left: 0.25rem;
  font-size: 0.75rem;
  line-height: 1;
  color: #d5d8dc;
}

.device-dots {
  display: flex;
  gap: 0.375rem;
  align-self: center;
}

.device-dots i {
  display: block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: #4a5058;
}

.device-tab {
  max-width: 16rem;
  padding: 0.5rem 1rem 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--app-ground);
  color: var(--color-primary-700);
  border-radius: 6px 6px 0 0;
}

/* A tablet held landscape: an even bezel and a camera. */
.device-tablet .device-frame {
  padding: 3.4%;
  border-radius: 26px;
}

.device-tablet .device-frame::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 1.5%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: #3f454d;
}

.device-tablet .device-screen {
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  --u: 1.62cqi;
}

/* A phone: a narrow bezel, rounded hard, with a speaker slot at the top. */
.device-phone {
  width: min(19rem, 100%);
  margin-inline: auto;
}

.device-phone .device-frame {
  padding: 0.75rem;
  border-radius: 2.75rem;
}

.device-phone .device-frame::before {
  content: '';
  position: absolute;
  z-index: 3;
  top: 1.35rem;
  left: 50%;
  width: 4.5rem;
  height: 1.25rem;
  margin-left: -2.25rem;
  border-radius: 1rem;
  background: var(--color-graphite);
}

.device-phone .device-screen {
  aspect-ratio: 9 / 19.5;
  border-radius: 2rem;
  --u: 3.7cqi;
}

/* The phone's status bar, under the speaker slot, in the bar's navy - so the slot never sits on
   the brand name. */
.device-phone .app {
  padding-top: 2.6em;
  background:
    linear-gradient(var(--color-primary-700), var(--color-primary-700)) top / 100% 2.6em no-repeat,
    var(--app-ground);
}

.device-caption {
  margin-top: 1rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-gray-600);
  text-align: center;
}

/* ---------------------------------------------------------------- the pins */

/* Numbered markers on top of a screen, matched to the numbered call-outs beside it. The fill is
   plum: paper numerals on it are 5.64:1. The halo is plum at 28%, which is decoration and carries
   nothing. Each screen places its own below. */
.pin {
  position: absolute;
  z-index: 2;
  width: 1.75rem;
  height: 1.75rem;
  margin: -0.875rem 0 0 -0.875rem;
  border-radius: 50%;
  background: var(--lp-plum);
  color: var(--color-background-primary);
  font: 700 0.8125rem/1.75rem var(--font-primary);
  text-align: center;
  box-shadow:
    0 0 0 4px rgb(159 67 124 / 28%),
    0 4px 10px -2px rgb(17 20 24 / 40%);
}

.pin-ogden-1 { top: 21%; left: 35%; }
.pin-ogden-2 { top: 45%; left: 74%; }
.pin-ogden-3 { top: 92%; left: 56%; }

.pin-ft-1 { top: 20%; left: 25%; }
.pin-ft-2 { top: 64%; left: 4.5%; }
.pin-ft-3 { top: 88%; left: 19%; }

.pin-ashe-1 { top: 16.5%; left: 82%; }
.pin-ashe-2 { top: 39%; left: 88%; }
.pin-ashe-3 { top: 80%; left: 93%; }

/* On a phone the screens are small, so the pins are too, and keep their numbers legible. */
@media (max-width: 40rem) {
  .device-chrome {
    height: 1.75rem;
    font-size: 0.6875rem;
  }

  .device-tab {
    padding: 0.375rem 0.75rem;
  }

  .pin {
    width: 1.375rem;
    height: 1.375rem;
    margin: -0.6875rem 0 0 -0.6875rem;
    font-size: 0.6875rem;
    line-height: 1.375rem;
    box-shadow:
      0 0 0 3px rgb(159 67 124 / 28%),
      0 3px 8px -2px rgb(17 20 24 / 40%);
  }
}

/* The numbered list a set of pins refers to. The numbers are drawn exactly as the pins are, so
   the eye pairs them without a legend. */
.callouts {
  list-style: none;
  counter-reset: callout;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.875rem;
}

.callouts li {
  counter-increment: callout;
  position: relative;
  min-height: 1.75rem;
  padding: 0.1rem 0 0 2.5rem;
  color: var(--color-gray-700);
  font-size: 1rem;
  line-height: 1.5;
}

.callouts li::before {
  content: counter(callout);
  position: absolute;
  top: 0;
  left: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--lp-plum);
  color: var(--color-background-primary);
  font: 700 0.8125rem/1.75rem var(--font-primary);
  text-align: center;
}

/* ---------------------------------------------------------------- the tour */

.tour-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.tour-row-flip {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}

.tour-row-flip .device {
  order: 2;
}

.tour-row-phone {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
}

@media (max-width: 60rem) {
  .tour-row,
  .tour-row-flip,
  .tour-row-phone {
    grid-template-columns: minmax(0, 1fr);
  }

  .tour-row-flip .device {
    order: 0;
  }
}

/* ---------------------------------------------------------------- the application, small */

/* The SPA's tokens, restated for the pictures. `--app-ground` is its page ground, the panel is
   its elevation, the rules are its gray-200 and gray-300. */
:root {
  --app-ground: #f4f1ec;
}

.app {
  height: 100%;
  font-family: var(--font-primary);
  font-size: var(--u, 1.38cqi);
  line-height: 1.45;
  color: var(--color-primary-700);
  background: var(--app-ground);
  text-align: left;
  letter-spacing: 0;
}

.app p {
  margin: 0;
}

.app table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.app th,
.app td {
  text-align: left;
  vertical-align: top;
}

.app .num {
  text-align: right;
}

/* The top bar, AppHeader.tsx at a glance. */
.app-bar {
  display: flex;
  align-items: center;
  gap: 1.1em;
  height: 3.6em;
  padding: 0 1.1em;
  background: linear-gradient(135deg, var(--color-primary-700), var(--color-primary-800));
  color: #fff;
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 0.6em;
  flex: none;
}

.app-brand img {
  display: block;
  width: auto;
  height: 2.1em;
  border: 0.13em solid #fff;
  border-radius: 0.2em;
}

/* The brand name: DaxRegular, which is where the SPA puts it. */
.app-brand-name {
  font-family: var(--font-heading);
  font-size: 1.3em;
  font-weight: 700;
  white-space: nowrap;
}

.app-nav {
  display: flex;
  gap: 0.25em;
  margin-inline: auto;
}

.app-nav-item {
  position: relative;
  padding: 0.6em 0.85em;
  border-radius: 0.2em;
  font-size: 0.875em;
  font-weight: 500;
  white-space: nowrap;
}

.app-nav-item.is-active {
  background: rgb(255 255 255 / 15%);
  font-weight: 600;
}

.app-nav-item.is-active::after {
  content: '';
  position: absolute;
  bottom: -0.15em;
  left: 10%;
  width: 80%;
  height: 0.15em;
  border-radius: 1px;
  background: var(--color-accent);
}

/* The avatar chip is filled with the accent in the SPA. */
.app-avatar {
  display: grid;
  place-items: center;
  width: 2.3em;
  height: 2.3em;
  flex: none;
  border-radius: 50%;
  background: var(--color-accent);
  font-size: 0.85em;
  font-weight: 600;
}

.app-bar--compact {
  justify-content: space-between;
}

.app-menu {
  display: grid;
  gap: 0.28em;
  align-content: center;
  justify-items: center;
  width: 2.6em;
  height: 2.6em;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 0.2em;
  background: rgb(255 255 255 / 10%);
}

.app-menu i {
  display: block;
  width: 1.2em;
  height: 0.14em;
  border-radius: 1px;
  background: #fff;
}

.app-page {
  padding: 1.5em 1.7em;
}

/* The SPA's page and panel titles are headings in its heading face. Here they are pictures of
   headings, so they are paragraphs, and they are set in Inter at 600, NOT DaxRegular: the C8
   deviation for DaxRegular covers the site's headings, the brand name and "Call us today" only
   (docs/login-page-redesign/SPEC.md), and it expires 27 October 2026. A test holds this. */
.app-h1 {
  margin-bottom: 0.7em;
  font-weight: 600;
  font-size: 1.9em;
  line-height: 1.15;
}

.app-h3 {
  margin: 0.4em 0 0.6em;
  font-size: 1em;
  font-weight: 600;
}

.app-h4 {
  margin: 1em 0 0.5em;
  font-size: 0.875em;
  font-weight: 600;
}

.app-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  margin-bottom: 1.1em;
}

.app-page-header .app-h1 {
  margin: 0;
}

.app-header-actions {
  display: flex;
  gap: 0.6em;
}

/* The tab strip, tabs.css. */
.app-tabs {
  display: flex;
  gap: 0.2em;
  margin-bottom: 1.3em;
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 2px solid var(--color-gray-200);
}

.app-tabs span {
  position: relative;
  flex: none;
  padding: 0.85em 1.1em;
  border-radius: 0.2em 0.2em 0 0;
  font-size: 0.875em;
  font-weight: 500;
  color: var(--color-gray-700);
}

.app-tabs .is-active {
  color: var(--color-primary-700);
  font-weight: 600;
  background: var(--color-primary-50);
}

.app-tabs .is-active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 10%;
  width: 80%;
  height: 3px;
  border-radius: 1px;
  background: var(--color-primary-700);
}

/* The strip scrolled to its end, as a phone shows it when the last tab is chosen. */
.app-tabs-scrolled {
  justify-content: flex-end;
}

/* The surface, surfaces.css: paper box, tinted header bar, brand rule. */
.app-surface {
  overflow: hidden;
  background: var(--color-background-elevation);
  border: 1px solid var(--color-gray-200);
  border-radius: 0.3em;
  box-shadow: 0 1px 2px rgb(17 20 24 / 6%);
}

.app-surface-header {
  padding: 0.8em 1.2em;
  background: var(--app-ground);
  border-bottom: 1px solid var(--color-primary-700);
  font-weight: 600;
  font-size: 1.2em;
}

.app-surface-body {
  padding: 1.2em;
  background: var(--color-background-primary);
}

.app-grid {
  display: grid;
  gap: 0.9em 1.1em;
}

.app-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.app-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.app-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-field {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  min-width: 0;
}

.app-label {
  font-size: 0.8em;
  font-weight: 500;
  line-height: 1.3;
}

.app-input {
  position: relative;
  display: block;
  padding: 0.5em 0.7em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: var(--color-background-primary);
  border: 1px solid var(--color-gray-300);
  border-radius: 0.2em;
  font-size: 0.85em;
  color: var(--color-gray-900);
}

.app-select {
  padding-right: 2em;
}

.app-select::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0.8em;
  width: 0.45em;
  height: 0.45em;
  margin-top: -0.35em;
  border-right: 0.12em solid var(--color-gray-700);
  border-bottom: 0.12em solid var(--color-gray-700);
  transform: rotate(45deg);
}

.app-fieldset {
  margin: 1.1em 0;
  padding: 1em;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.3em;
}

.app-legend {
  display: block;
  margin-bottom: 0.7em;
  font-size: 0.8em;
  font-weight: 600;
  color: var(--color-gray-700);
}

.app-question {
  display: block;
  margin-bottom: 0.4em;
  font-size: 0.8em;
  font-weight: 500;
}

.app-radios {
  display: flex;
  gap: 1.2em;
  margin-bottom: 0.9em;
  font-size: 0.85em;
}

.app-field .app-radios {
  margin: 0.25em 0 0;
}

.app-radio {
  display: flex;
  align-items: center;
  gap: 0.45em;
}

.app-radio::before {
  content: '';
  width: 0.95em;
  height: 0.95em;
  border: 1px solid var(--color-gray-600);
  border-radius: 50%;
  background: var(--color-background-primary);
}

.app-radio.is-checked::before {
  border-color: var(--color-primary-700);
  background: var(--color-primary-700);
  box-shadow: inset 0 0 0 0.2em var(--color-background-primary);
}

.app-calc-bar {
  margin: 0.4em 0 1.2em;
}

/* The primary action, brand blue with paper on it; the bordered one beside it. */
.app-button {
  display: inline-block;
  padding: 0.6em 1.3em;
  border: 1px solid var(--color-primary-700);
  border-radius: 0.2em;
  background: var(--color-primary-700);
  color: var(--color-background-primary);
  font-size: 0.85em;
  font-weight: 600;
  white-space: nowrap;
}

.app-button-border {
  background: transparent;
  color: var(--color-primary-700);
  border-color: var(--color-gray-200);
}

/* The Ogden results table, ogden-calculators.css: the answer is the last row and the largest. */
.app-results {
  padding-top: 1em;
  border-top: 1px solid var(--color-gray-200);
}

.app-summary {
  max-width: 34em;
}

.app-summary th,
.app-summary td {
  padding: 0.5em 0.8em;
  border-bottom: 1px solid var(--color-gray-200);
  font-size: 0.85em;
}

.app-summary th {
  width: 55%;
  font-weight: 500;
  color: var(--color-gray-700);
}

.app-summary td {
  text-align: right;
}

.app-summary-primary th,
.app-summary-primary td {
  background: var(--color-primary-50);
  font-weight: 700;
  color: var(--color-primary-700);
}

.app-summary-primary th {
  font-size: 1em;
}

.app-summary-primary td {
  font-size: 1.35em;
}

/* The Fast Track accordion, components.css. */
.app-accordion {
  background: var(--color-background-primary);
  box-shadow: 0 2px 6px -1px rgb(17 20 24 / 8%);
}

.app-step {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.75em;
  background: var(--app-ground);
  border-bottom: 1px solid var(--color-primary-700);
}

.app-step.is-active {
  border-left: 0.3em solid var(--color-primary-700);
}

.app-step-number {
  display: grid;
  place-items: center;
  width: 2.6em;
  height: 2.6em;
  flex: none;
  border-radius: 50%;
  background: var(--color-primary-50);
  font-size: 1em;
  font-weight: 600;
}

.app-step-number svg {
  width: 1.3em;
  height: 1.3em;
}

.app-step-title {
  font-weight: 600;
  font-size: 1.3em;
}

.app-step-chevron {
  width: 0.6em;
  height: 0.6em;
  margin: -0.3em 0.6em 0 auto;
  border-right: 0.15em solid var(--color-primary-700);
  border-bottom: 0.15em solid var(--color-primary-700);
  transform: rotate(45deg);
}

.app-step-content {
  display: grid;
  gap: 0.9em;
  padding: 1.1em 1.2em 1.3em;
  background: var(--color-background-primary);
  border-bottom: 1px solid var(--color-gray-200);
}

/* `.alert-warning`, the SPA's: the warning family, with its rule down the left. */
.app-alert {
  padding: 0.6em 0.85em;
  background: var(--color-warning-50);
  border-left: 0.3em solid var(--color-warning-700);
  border-radius: 0.2em;
  font-size: 0.8em;
  color: var(--color-warning-700);
}

/* The SPA's `.data-table` head: small uppercase labels over a heavier rule. */
.app-grid-table th,
.app-ref-table th,
.app-cases th {
  padding: 0.55em 0.7em;
  background: var(--app-ground);
  border-bottom: 2px solid var(--color-gray-300);
  font-size: 0.68em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-gray-700);
}

.app-grid-table td,
.app-ref-table td,
.app-cases td {
  padding: 0.55em 0.7em;
  border-bottom: 1px solid var(--color-gray-200);
  font-size: 0.8em;
  color: var(--color-gray-900);
}

/* The row just added, and the chosen row: the teal tint is where the SPA marks a selection. */
.app-grid-table .is-new td,
.app-ref-table .is-selected td {
  background: var(--color-accent-tint);
}

.app-ref-table .is-selected td:first-child {
  box-shadow: inset 0.25em 0 0 var(--color-accent);
}

.app-ref-table + .app-h3 {
  margin-top: 1.1em;
}

.app-crumbs {
  margin: 1em 0 0.7em;
  font-size: 0.8em;
  color: var(--color-gray-700);
}

.app-crumbs span {
  color: var(--color-primary-700);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* The dashboard, HomePage.tsx and index.css. */
.app-cases td:first-child {
  font-weight: 500;
  color: var(--color-primary-700);
}

.app-status {
  display: inline-block;
  padding: 0.25em 0.7em;
  border-radius: 999px;
  font-size: 0.85em;
  font-weight: 500;
  white-space: nowrap;
}

.app-status-progress {
  background: var(--color-warning-50);
  color: var(--color-warning-700);
}

.app-status-settled {
  background: var(--color-info-50);
  color: var(--color-info-600);
}

.app-status-dropped {
  background: var(--color-error-50);
  color: var(--color-error-700);
}

.app-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1em;
  margin-top: 1.2em;
}

.app-stat {
  display: flex;
  flex-direction: column;
  padding: 0.9em 1.1em;
  background: var(--color-background-elevation);
  border: 1px solid var(--color-gray-200);
  border-radius: 0.3em;
}

.app-stat-figure {
  font-size: 1.6em;
  font-weight: 700;
  line-height: 1.2;
}

.app-stat-label {
  font-size: 0.8em;
  color: var(--color-gray-700);
}