/* Click Inspection: the dashboard pages, the time-saved page, and the dashboard
 * section of the home page.
 *
 * Same rules as site.css: the page is the app's light theme, the chrome is
 * graphite, green is automation and success, copper is the inspector's own
 * hand. The portal's screens are shown in its light theme (with its map, which
 * is dark in both themes) inside a light frame, so the dashboard reads light
 * from the first moment (owner, 2026-10-04). The app's screens are dark, as
 * the app is, inside a phone.
 */

.pg {
  padding-top: var(--nav-h);
}
.pg figure,
.dash-intro figure,
.saved figure {
  margin: 0;
}

/* ------------------------------------------------------------------ hero */
.pg-hero {
  padding: clamp(40px, 7vw, 88px) 0 clamp(28px, 4vw, 48px);
  background:
    radial-gradient(1200px 380px at 85% -10%, rgba(53, 199, 122, 0.12), transparent 70%),
    var(--ci-canvas);
  border-bottom: 1px solid var(--ci-hair);
}
.pg-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--ci-ink-3);
}
.pg-crumbs li + li::before {
  content: '/';
  margin-right: 6px;
  color: var(--ci-edge);
}
.pg-crumbs a {
  color: var(--ci-ink-2);
  text-decoration: none;
}
.pg-crumbs a:hover {
  text-decoration: underline;
}
.pg-hero h1 {
  max-width: 22ch;
  margin-top: 14px;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.pg-hero .lede {
  max-width: 46rem;
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
}
.pg-hero .actions {
  margin-top: 28px;
}

/* Which plans a tool is on. */
.pg-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--ci-r-pill);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}
.pg-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.pg-badge--core {
  background: var(--ci-green-tint);
  color: var(--ci-green-ink);
}
.pg-badge--premium {
  background: var(--ci-copper-tint);
  color: var(--ci-copper-ink);
}
.pg-badge--corporate {
  background: var(--ci-graphite);
  color: var(--ci-on-graphite);
}
.pg-badge--corporate::before {
  background: var(--ci-copper);
}

/* --------------------------------------------------------------- frames */
/* A portal screen: a light frame, a hairline, a long soft shadow.
 *
 * ⚠ LIGHT, AND SO IS THE GROUND UNDER THE SCREENSHOT (owner, 2026-10-04: "the
 * dashboard should be in light mode"). The frame was graphite, and with the
 * screenshot still loading (they are lazy) the frame's dark face filled the
 * whole box, so the dashboard arrived as a black slab before it arrived at
 * all. The image's own ground is the pale grey of a tool card's shot. */
.pg-window {
  margin: 0;
  border-radius: 16px;
  padding: 8px;
  background: linear-gradient(180deg, var(--ci-surface), var(--ci-raised));
  box-shadow:
    inset 0 0 0 1px rgba(20, 23, 28, 0.1),
    inset 0 1px 0 #ffffff,
    0 40px 80px -40px rgba(20, 23, 28, 0.45),
    0 18px 36px -24px rgba(20, 23, 28, 0.3);
}
.pg-window img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  background: #f4f6f8;
  box-shadow: 0 0 0 1px rgba(20, 23, 28, 0.08);
}
/* A generated document: paper on the page. */
.pg-paper {
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(20, 23, 28, 0.08),
    0 30px 60px -36px rgba(20, 23, 28, 0.5);
}
.pg-paper img {
  width: 100%;
  height: auto;
}
/* A panel cut from a portal screen: already framed by its own glass. */
.pg-panel {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  box-shadow:
    0 0 0 1px rgba(20, 23, 28, 0.08),
    0 28px 56px -34px rgba(20, 23, 28, 0.45);
}
.pg-panel img {
  width: 100%;
  height: auto;
}
figcaption,
.pg-caption {
  margin-top: 12px;
  font-size: 14px;
  color: var(--ci-ink-3);
}
.pg-window figcaption,
.pg-panel figcaption {
  padding: 4px 8px 6px;
  color: var(--ci-on-graphite-3);
}
.pg-hero-shot {
  margin-top: clamp(28px, 4vw, 48px);
}

/* ----------------------------------------------------------- key features */
/* Four claims in one ruled row on white, straight under a tool page's hero
   (owner, 2026-10-25: each tool page "highlighting to key features"). A short
   Field Green rule marks each, because each is something the app does. */
.pg-keys {
  background: var(--ci-surface);
  border-bottom: 1px solid var(--ci-hair);
}
.pg-keys dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pg-keys dl > div {
  padding: clamp(24px, 3vw, 36px) clamp(16px, 2vw, 28px);
  border-left: 1px solid var(--ci-hair);
}
.pg-keys dl > div:first-child {
  border-left: 0;
  padding-left: 0;
}
.pg-keys dt {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ci-ink);
  text-wrap: balance;
}
.pg-keys dt::before {
  content: '';
  display: block;
  width: 22px;
  height: 3px;
  margin-bottom: 14px;
  border-radius: 2px;
  background: var(--ci-green);
}
.pg-keys dd {
  margin: 8px 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ci-ink-2);
  text-wrap: pretty;
}
@media (max-width: 960px) {
  .pg-keys dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pg-keys dl > div:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }
  .pg-keys dl > div:nth-child(n + 3) {
    border-top: 1px solid var(--ci-hair);
  }
}
@media (max-width: 560px) {
  .pg-keys dl {
    grid-template-columns: 1fr;
  }
  .pg-keys dl > div {
    border-left: 0;
    padding: 20px 0;
  }
  .pg-keys dl > div + div {
    border-top: 1px solid var(--ci-hair);
  }
}

/* -------------------------------------------------------------- sections */
.pg-section {
  padding: clamp(52px, 8vw, 104px) 0;
}
.pg-section + .pg-section {
  border-top: 1px solid var(--ci-hair);
}
.pg-section--canvas {
  background: var(--ci-canvas);
}
.pg-section h2 {
  max-width: 24ch;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  letter-spacing: -0.03em;
}
.pg-section > .wrap > .eyebrow {
  margin-bottom: 12px;
}

/* Feature cards: the light glass the rules and pricing cards use. */
.pg-features {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}
.pg-features--three {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.pg-features li {
  padding: 22px;
  border-radius: var(--ci-r-panel);
  background: linear-gradient(160deg, #ffffff 0%, #f7f9fb 100%);
  box-shadow:
    inset 0 0 0 1px rgba(20, 23, 28, 0.08),
    inset 0 1px 0 #ffffff,
    0 18px 36px -24px rgba(20, 23, 28, 0.35);
}
.pg-features h3 {
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}
.pg-features p {
  margin-top: 8px;
  font-size: 0.97rem;
  color: var(--ci-ink-2);
}
.pg-features .k {
  display: block;
  margin-bottom: 10px;
  font: 600 12px/1 var(--ci-mono);
  letter-spacing: 0.08em;
  color: var(--ci-green-ink);
}

/* A picture beside its words. */
.pg-split {
  display: grid;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.pg-split--flip {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
.pg-split--flip > :first-child {
  order: 2;
}
.pg-split p + p {
  margin-top: 12px;
}
.pg-split .lede {
  margin-top: 14px;
}
.pg-split ul {
  margin: 18px 0 0;
  padding-left: 1.1em;
  color: var(--ci-ink-2);
}
.pg-split li + li {
  margin-top: 8px;
}
@media (max-width: 860px) {
  .pg-split,
  .pg-split--flip {
    grid-template-columns: 1fr;
  }
  .pg-split--flip > :first-child {
    order: 0;
  }
}

/* A set of charts or documents. */
.pg-gallery {
  margin-top: 34px;
  display: grid;
  gap: 28px 22px;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  align-items: start;
}
.pg-gallery--wide {
  grid-template-columns: 1fr;
}
.pg-gallery--two {
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
}
.pg-gallery--docs {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

/* What it will not pretend: the honesty that is the product's edge. */
.pg-honest {
  margin-top: 26px;
  padding: 22px 24px;
  border-radius: var(--ci-r-panel);
  background: var(--ci-surface);
  box-shadow: inset 0 0 0 1px var(--ci-hair);
  max-width: 52rem;
}
.pg-honest h3 {
  font-size: 1rem;
}
.pg-honest ul {
  margin: 10px 0 0;
  padding-left: 1.1em;
  color: var(--ci-ink-2);
  font-size: 0.97rem;
}
.pg-honest li + li {
  margin-top: 6px;
}

/* Plan box. */
.pg-plan {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: center;
  justify-content: space-between;
  padding: 24px 26px;
  border-radius: var(--ci-r-panel);
  background: var(--ci-graphite);
  color: var(--ci-on-graphite);
}
.pg-plan p {
  max-width: 46rem;
  color: var(--ci-on-graphite-2);
}
.pg-plan b {
  color: var(--ci-on-graphite);
}

/* ------------------------------------------------------------ tool cards */
/* Three to a row at full width (2026-10-13), so the nine tools make a square
   and each card's picture is large enough to read; two on a tablet, one on
   a phone. */
.pg-tools {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  column-gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}
/* Each card takes two rows of the list's grid, its picture and its words, so
   the pictures in a row share the tallest one's height and the titles under
   them line up (2026-10-25, when the pictures became charts of their own). */
.pg-tools > li {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 0;
  margin-bottom: 18px;
}
.pg-tool {
  position: relative;
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 0;
  border-radius: var(--ci-r-panel);
  overflow: hidden;
  background: var(--ci-surface);
  text-decoration: none;
  box-shadow:
    inset 0 0 0 1px rgba(20, 23, 28, 0.08),
    0 18px 36px -26px rgba(20, 23, 28, 0.4);
  transition:
    box-shadow var(--ci-hover-ms) ease,
    transform var(--ci-hover-ms) ease;
}
.pg-tool:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(53, 199, 122, 0.55),
    0 22px 44px -26px rgba(20, 23, 28, 0.45);
}
.pg-tool__shot {
  /* No aspect-ratio here: once a taller neighbour stretches the row, an
     aspect-ratio would widen the picture past its card. A picture is 16:9 by
     its own size; a chart holds 3:2 with the spacer below. */
  background: #f4f6f8;
  overflow: hidden;
  /* A report tool's card shows its chart on white paper (2026-10-25); the
     hairline keeps it from running into the white body beneath. */
  border-bottom: 1px solid var(--ci-hair);
}
.pg-tool__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}
.pg-tool__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 20px;
  flex: 1;
}
.pg-tool__body h3 {
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}
.pg-tool__body p {
  font-size: 0.95rem;
  color: var(--ci-ink-2);
}
.pg-tool__body .pg-badge {
  align-self: flex-start;
  margin-top: auto;
  font-size: 12px;
  padding: 4px 10px;
}

/* ------------------------------------------------------------ tile charts */
/* THE TILES ARE THE CHARTS (owner, 2026-10-25: "I would like to see the
   graphs and charts on the main page in the tiles"). Each report tool's chart
   is drawn in the page at the card's own size from the demo account's figures
   (build-pages.mjs, TILE_CHARTS), in its document's print colours, which come
   with the figures. The finding leads in ink; the chart draws left to right as
   the card comes into view. Never a cut-out of the document. */
.ct {
  overflow: visible;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
  padding: 16px 18px 18px;
  background:
    linear-gradient(180deg, var(--ci-surface) 0%, var(--ci-canvas) 100%);
  font-variant-numeric: tabular-nums;
}
/* 3:2 at the least (a percentage padding reads the card's width), taller
   when the chart needs it; it spans both rows, so the chart's row takes the
   rest and the chart sits at its foot. */
.ct::before {
  content: '';
  grid-area: 1 / 1 / 3 / 2;
  padding-top: 58%;
}
.ct__body {
  grid-area: 2 / 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
}
.ct__head {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
}
.ct__head b {
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ci-ink);
  text-wrap: balance;
}
.ct__head span {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ci-ink-3);
}
.ct-mono {
  font-family: var(--ci-mono);
  font-size: 0.95em;
  letter-spacing: -0.01em;
  color: var(--ci-ink);
}

/* Rows: what and its figure on one line, the bar beneath. */
.ct-rows {
  list-style: none;
  margin: auto 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
.ct-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 5px;
}
.ct-row__label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  color: var(--ci-ink-2);
}
.ct-row__label small {
  margin-left: 8px;
  font-size: 11.5px;
  color: var(--ci-ink-3);
}
.ct-row__value {
  font-size: 13px;
  font-weight: 700;
  color: var(--ci-ink);
}
.ct-row__value small {
  font-weight: 500;
  color: var(--ci-ink-3);
}
.ct-track {
  grid-column: 1 / -1;
  position: relative;
  height: 12px;
  border-radius: 4px;
  background: rgba(20, 23, 28, 0.06);
  overflow: hidden;
}
.ct-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--c);
  border-radius: 0 4px 4px 0;
}
/* A stacked score: parts butt together with a 2px surface gap. */
.ct-fill--part {
  border-radius: 0;
  box-shadow: inset -2px 0 0 var(--ci-surface);
}
/* Payback to the dearer quote, paler than to the cheaper one. */
.ct-fill--pale {
  opacity: 0.4;
}
.ct-band {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: rgba(20, 23, 28, 0.1);
}
/* A gas named beside its trade colour. */
.ct-gas {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-radius: 2px;
  background: var(--c);
  vertical-align: 0;
}

/* The key under a chart. */
.ct-key {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 11.5px;
  color: var(--ci-ink-2);
}
.ct-key li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ct-key__swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--c);
}
.ct-rows + .ct-key,
.ct-grid + .ct-key {
  margin-top: -2px;
}

/* Projects: the road to a lodged file, in the portal's status tones. */
.ct-stage--draft { --c: rgb(160, 166, 176); }
.ct-stage--captured { --c: rgb(63, 193, 201); }
.ct-stage--analysed { --c: rgb(122, 162, 227); }
.ct-stage--reviewed { --c: rgb(224, 160, 58); }
.ct-stage--exported { --c: var(--ci-green); }
.ct-road {
  display: flex;
  gap: 3px;
  height: 30px;
  margin-top: auto;
}
.ct-seg {
  background: var(--c);
  border-radius: 4px;
}
.ct-stages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.ct-stages li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 8px;
  border-top: 3px solid var(--c);
}
.ct-stages b {
  font-size: 1.35rem;
  line-height: 1;
  color: var(--ci-ink);
}
.ct-stages span {
  font-size: 11.5px;
  color: var(--ci-ink-2);
}

/* Audit Aid: every requirement in the manifest's order, then three of them. */
.ct-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 3px;
  height: 22px;
  margin-top: auto;
}
.ct-cell {
  border-radius: 3px;
}
.ct-cell--held { background: var(--ci-green); }
.ct-cell--gap { background: var(--ci-copper); }
.ct-cell--not-applicable { background: rgba(20, 23, 28, 0.12); }
.ct-manifest {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}
.ct-manifest li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--ci-ink-2);
}
.ct-manifest li span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ct-chip {
  flex: none;
  padding: 2px 8px;
  border-radius: var(--ci-r-pill);
  font-size: 11.5px;
  font-weight: 600;
}
.ct-chip--held { background: var(--ci-green-tint); color: var(--ci-green-ink); }
.ct-chip--gap { background: var(--ci-copper-tint); color: var(--ci-copper-ink); }

/* AHU: every area of every unit, one cell each. */
.ct-grid {
  display: grid;
  grid-template-columns: auto repeat(var(--cols), minmax(0, 1fr));
  align-items: center;
  gap: 4px;
  margin-top: auto;
}
.ct-grid__ref {
  padding-right: 6px;
  font-family: var(--ci-mono);
  font-size: 12px;
  color: var(--ci-ink);
}
.ct-grid__cell {
  aspect-ratio: 1;
  border-radius: 4px;
  background: var(--c);
}

/* Drawn left to right as the card comes into view, row after row; without
   scroll-driven animation, or with reduced motion, the chart is simply there. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ct-track,
    .ct-road,
    .ct-strip,
    .ct-grid {
      animation: ct-draw linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 38%;
    }
    .ct-row .ct-track {
      animation-range: entry calc(30% + var(--i, 0) * 6%) cover calc(38% + var(--i, 0) * 6%);
    }
    @keyframes ct-draw {
      from {
        clip-path: inset(0 100% 0 0);
      }
      to {
        clip-path: inset(0 0 0 0);
      }
    }
  }
}
/* Previous / next tool. */
.pg-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}
.pg-pager a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 18px;
  border-radius: var(--ci-r-button);
  text-decoration: none;
  background: var(--ci-surface);
  box-shadow: inset 0 0 0 1px var(--ci-hair);
  min-width: min(100%, 260px);
}
.pg-pager a:hover {
  box-shadow: inset 0 0 0 1px var(--ci-green);
}
.pg-pager small {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ci-ink-3);
}
.pg-pager .next {
  margin-left: auto;
  text-align: right;
}

.pg-sample {
  margin-top: 18px;
  font-size: 13px;
  color: var(--ci-ink-3);
}

/* ------------------------------------------------- home page: dashboard */
/* Light, as the portal is in its light theme (owner, 2026-10-03), and first
   after the story, so it carries the soft green light. The screen keeps its
   graphite bezel, the monitor it is shown on (.pg-window). */
.dash-intro {
  padding: var(--section-y) 0;
  background:
    radial-gradient(900px 360px at 80% 0%, rgba(53, 199, 122, 0.1), transparent 70%),
    var(--ci-canvas);
  overflow: hidden;
}
.dash-intro h2 {
  max-width: 20ch;
  margin-top: 12px;
  font-size: clamp(1.9rem, 4vw, 3rem);
  letter-spacing: -0.035em;
}
/* The section's heading is its label since its headline line came out
   (owner, 2026-10-13), so it keeps the label's size. */
.dash-intro h2.eyebrow {
  max-width: none;
  margin-top: 0;
  font-size: 12px;
  letter-spacing: 0.14em;
}
.dash-intro .pg-window {
  margin-top: clamp(28px, 4vw, 48px);
}
.dash-intro .actions {
  margin-top: 30px;
}

/* ------------------------------------------------- home page: time saved */
.saved {
  padding: var(--section-y) 0;
  background: var(--ci-page);
  border-top: 1px solid var(--ci-hair);
}
.saved h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
}
.saved__grid {
  margin-top: 34px;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

/* ------------------------------------------------------- time comparison */
.tc-card {
  padding: 24px;
  border-radius: var(--ci-r-panel);
  background: linear-gradient(160deg, #ffffff 0%, #f7f9fb 100%);
  box-shadow:
    inset 0 0 0 1px rgba(20, 23, 28, 0.08),
    0 18px 36px -24px rgba(20, 23, 28, 0.35);
}
.tc-card h3 {
  font-size: 1.12rem;
}
.tc-card .tc-sub {
  margin-top: 4px;
  font-size: 0.92rem;
  color: var(--ci-ink-3);
}
.tc-bars {
  margin: 20px 0 0;
  display: grid;
  gap: 12px;
}
.tc-bar {
  display: grid;
  grid-template-columns: 9.5rem 1fr auto;
  gap: 12px;
  align-items: center;
  font-size: 0.92rem;
}
.tc-bar__track {
  display: block;
  height: 14px;
  border-radius: 999px;
  background: var(--ci-raised);
  overflow: hidden;
}
.tc-bar__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ci-edge);
  transition: width 300ms var(--ci-ease-out-quad);
}
.tc-bar--ci .tc-bar__fill {
  background: linear-gradient(90deg, var(--ci-green-lo), var(--ci-green-hi));
}
.tc-bar__v {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 4.8rem;
  text-align: right;
}
.tc-saving {
  margin-top: 18px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.tc-saving b {
  font-size: 2.2rem;
  letter-spacing: -0.04em;
  color: var(--ci-green-ink);
  font-variant-numeric: tabular-nums;
}
.tc-saving span {
  color: var(--ci-ink-2);
}
@media (max-width: 520px) {
  .tc-bar {
    grid-template-columns: 1fr auto;
  }
  .tc-bar__track {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tc-bar__fill,
  .pg-tool {
    transition: none;
  }
}

/* The calculator. */
.calc {
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  margin-top: 34px;
}
@media (max-width: 920px) {
  .calc {
    grid-template-columns: 1fr;
  }
}
.calc fieldset {
  margin: 0;
  padding: 20px 22px 22px;
  border: 0;
  border-radius: var(--ci-r-panel);
  background: var(--ci-surface);
  box-shadow: inset 0 0 0 1px var(--ci-hair);
}
.calc fieldset + fieldset {
  margin-top: 16px;
}
.calc legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 12px;
  font-weight: 700;
  font-size: 1rem;
}
.calc .seg {
  display: inline-flex;
  padding: 4px;
  border-radius: 12px;
  background: var(--ci-raised);
  box-shadow: inset 0 0 0 1px var(--ci-hair);
}
.calc .seg button {
  min-height: 40px;
  padding: 8px 18px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font: 600 14.5px/1 var(--ci-sans);
  color: var(--ci-ink-2);
  cursor: pointer;
}
.calc .seg button[aria-pressed='true'] {
  background: var(--ci-graphite);
  color: var(--ci-on-graphite);
}
.calc label.num {
  display: grid;
  grid-template-columns: 1fr 6.5rem;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  font-size: 0.95rem;
  color: var(--ci-ink-2);
}
.calc label.num + label.num {
  border-top: 1px solid var(--ci-hair);
}
.calc input[type='number'] {
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  border-radius: 9px;
  border: 1px solid var(--ci-edge);
  background: var(--ci-canvas);
  font: 600 15px/1.2 var(--ci-sans);
  color: var(--ci-ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.calc input[type='number']:focus-visible {
  outline: 2px solid var(--ci-green-ink);
  outline-offset: 1px;
}
.calc-out {
  position: sticky;
  top: calc(var(--nav-h) + 16px);
}
.calc-breakdown {
  width: 100%;
  margin-top: 16px;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.calc-breakdown th,
.calc-breakdown td {
  padding: 9px 8px;
  white-space: nowrap;
  border-bottom: 1px solid var(--ci-hair);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.calc-breakdown th:first-child,
.calc-breakdown td:first-child {
  text-align: left;
  white-space: normal;
}
.calc-breakdown thead th {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ci-ink-3);
  font-weight: 600;
}
.calc-breakdown tfoot td {
  font-weight: 700;
  border-bottom: 0;
}
.calc-breakdown .ci {
  color: var(--ci-green-ink);
}
.assume {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.assume th,
.assume td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--ci-hair);
  vertical-align: top;
  text-align: left;
}
.assume thead th {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ci-ink-3);
}
.assume td input {
  max-width: 5.5rem;
}
.assume td small,
.assume th small {
  display: block;
  font-weight: 400;
  margin-top: 4px;
  color: var(--ci-ink-3);
}
.table-scroll {
  overflow-x: auto;
  margin-top: 20px;
}

/* ---------------------------------------------------------------- signup
 * The form on the light page in a glass card, the plans as the pricing
 * section's cards made into choices (a green ring on the one picked, as
 * .tier--lit draws it), and what happens next on graphite with the lockup,
 * as the close section carries it. */
.su-hero {
  padding-bottom: clamp(48px, 7vw, 96px);
}
.su-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.9fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.su-hero h1 {
  font-size: clamp(2rem, 4vw, 3.1rem);
}
.su-card {
  margin-top: 30px;
  padding: clamp(20px, 3vw, 30px);
  border-radius: var(--ci-r-panel);
  background: linear-gradient(160deg, #ffffff 0%, #f7f9fb 100%);
  box-shadow:
    inset 0 0 0 1px rgba(20, 23, 28, 0.08),
    inset 0 1px 0 #ffffff,
    0 30px 60px -36px rgba(20, 23, 28, 0.45);
}
.su-plans {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 10px;
}
.su-plans legend,
.su-field label {
  display: block;
  padding: 0;
  margin-bottom: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ci-ink);
}
.su-plan {
  position: relative;
  display: block;
  padding: 16px 18px 16px 52px;
  border-radius: var(--ci-r-card);
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(20, 23, 28, 0.13);
  cursor: pointer;
  transition:
    box-shadow var(--ci-hover-ms) ease,
    background-color var(--ci-hover-ms) ease;
}
.su-plan:hover {
  box-shadow: inset 0 0 0 1px rgba(20, 23, 28, 0.26);
}
.su-plan input {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: 18px;
  top: 19px;
  width: 20px;
  height: 20px;
  margin: 0;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: inset 0 0 0 1.5px var(--ci-edge);
  cursor: pointer;
}
.su-plan input:checked {
  background: radial-gradient(circle, var(--ci-on-green) 0 3.5px, transparent 4px),
    linear-gradient(180deg, var(--ci-green-hi), var(--ci-green-lo));
  box-shadow: var(--ci-green-glow);
}
.su-plan input:focus-visible {
  outline: 2px solid var(--ci-green-ink);
  outline-offset: 3px;
}
.su-plan:has(input:checked) {
  background: linear-gradient(160deg, #ffffff 45%, #eefaf3 100%);
  box-shadow:
    inset 0 0 0 2px var(--ci-green),
    0 16px 32px -22px rgba(53, 199, 122, 0.6);
}
.su-plan__body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
}
.su-plan__name {
  flex: 1 1 auto;
  font-size: 1.06rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.su-plan__price {
  color: var(--ci-ink-2);
  font-size: 0.9rem;
}
.su-plan__price b {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ci-ink);
  font-variant-numeric: tabular-nums;
}
.su-plan__note {
  flex-basis: 100%;
  margin-top: 6px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ci-ink-2);
}
.su-field {
  margin-top: 24px;
}
.su-field input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--ci-r-button);
  background: #ffffff;
  color: var(--ci-ink);
  font: inherit;
  font-size: 1rem;
  box-shadow:
    inset 0 0 0 1px rgba(20, 23, 28, 0.16),
    inset 0 1px 2px rgba(20, 23, 28, 0.06);
  transition: box-shadow var(--ci-hover-ms) ease;
}
.su-field input:hover {
  box-shadow:
    inset 0 0 0 1px rgba(20, 23, 28, 0.28),
    inset 0 1px 2px rgba(20, 23, 28, 0.06);
}
.su-field input:focus {
  outline: none;
  box-shadow:
    inset 0 0 0 2px var(--ci-green),
    0 0 0 4px rgba(53, 199, 122, 0.18);
}
.su-hint {
  margin-top: 8px;
  font-size: 0.88rem;
  color: var(--ci-ink-3);
}
.su-error {
  margin-top: 20px;
  padding: 12px 14px;
  border-radius: var(--ci-r-button);
  background: #fdeeee;
  color: var(--ci-alert-ink);
  font-size: 0.95rem;
  box-shadow: inset 0 0 0 1px rgba(205, 33, 39, 0.25);
}
.su-submit {
  margin-top: 24px;
  min-height: 52px;
  font-size: 15.5px;
}
.su-submit:disabled {
  opacity: 0.7;
  cursor: progress;
}
.su-secure {
  margin-top: 14px;
  font-size: 0.88rem;
  color: var(--ci-ink-2);
  text-align: center;
}
/* A padlock in CSS: a body and a shackle. */
.su-lock {
  position: relative;
  display: inline-block;
  vertical-align: -1px;
  width: 11px;
  height: 8px;
  margin-right: 8px;
  border-radius: 2px;
  background: var(--ci-green-ink);
}
.su-lock::before {
  content: '';
  position: absolute;
  left: 2px;
  top: -6px;
  width: 7px;
  height: 7px;
  border: 1.6px solid var(--ci-green-ink);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  box-sizing: border-box;
}
.su-small {
  margin-top: 12px;
  font-size: 0.84rem;
  color: var(--ci-ink-3);
  text-align: center;
}

.su-side {
  display: grid;
  gap: 16px;
  position: sticky;
  top: calc(var(--nav-h) + 24px);
}
.su-panel {
  padding: clamp(22px, 3vw, 30px);
  border-radius: 16px;
  color: var(--ci-on-graphite);
  background:
    radial-gradient(340px 170px at 50% 14%, rgba(53, 199, 122, 0.16), transparent 70%),
    linear-gradient(180deg, #1c1f24, #131519);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 40px 80px -40px rgba(20, 23, 28, 0.55);
}
.su-panel__logo {
  width: min(210px, 62%);
  height: auto;
  margin: 0 auto;
}
.su-panel h2 {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--ci-graphite-hair);
  font-size: 1.12rem;
  letter-spacing: -0.01em;
}
.su-steps {
  list-style: none;
  counter-reset: su;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.su-steps li {
  counter-increment: su;
  position: relative;
  padding-left: 40px;
  color: var(--ci-on-graphite-2);
  font-size: 0.94rem;
  line-height: 1.5;
}
.su-steps li::before {
  content: counter(su);
  position: absolute;
  left: 0;
  top: -1px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 600 12px / 1 var(--ci-mono);
  color: var(--ci-on-green);
  background: linear-gradient(180deg, var(--ci-green-hi), var(--ci-green-lo));
  box-shadow: var(--ci-green-glow);
}
.su-steps li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 12.5px;
  top: 30px;
  bottom: -14px;
  width: 1px;
  background: var(--ci-graphite-edge);
}
.su-steps b {
  color: var(--ci-on-graphite);
  font-weight: 600;
}
.su-note {
  padding: 20px 22px;
  border-radius: var(--ci-r-panel);
  background: linear-gradient(160deg, #ffffff 0%, #f7f9fb 100%);
  box-shadow:
    inset 0 0 0 1px rgba(20, 23, 28, 0.08),
    0 18px 36px -24px rgba(20, 23, 28, 0.35);
}
.su-note h2 {
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}
.su-note p {
  margin-top: 8px;
  font-size: 0.93rem;
  color: var(--ci-ink-2);
}
.su-note b {
  color: var(--ci-ink);
}
@media (max-width: 920px) {
  .su-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .su-side {
    position: static;
  }
}
/* Sign-ups paused (build-pages.mjs, SIGNUP_OPEN): one short message, so the
   section takes the screen and the footer sits at the bottom of it. */
.su-paused {
  display: grid;
  align-content: center;
  min-height: calc(100dvh - 150px);
}
/* No button in the bar on this page, so the wordmark keeps its room. */
@media (max-width: 420px) {
  .ci-nav--bare .ci-brand__word {
    display: block;
  }
}
@media (max-width: 520px) {
  .su-plan {
    padding: 14px 14px 14px 46px;
  }
  .su-plan input {
    left: 14px;
    top: 17px;
  }
}

/* ------------------------------------------------------------ zone sketch */
/* The app's own screen, in a phone: the same graphite titanium as the phone in
   the story (css/phone.css), without the screen machinery it needs there. */
.pg-phone {
  width: min(100%, 330px);
  margin: 0 auto;
  padding: 9px;
  border-radius: 46px;
  background: linear-gradient(145deg, #4a5059 0%, #23272d 18%, #15181c 50%, #2a2f36 82%, #50565f 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.14),
    inset 0 0 0 4px #0b0d10,
    0 40px 70px -30px rgba(12, 14, 17, 0.55),
    0 18px 30px -18px rgba(12, 14, 17, 0.5);
}
.pg-phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 38px;
}
/* Words beside the phone. */
.sk-hero {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
}
.sk-hero .pg-badge {
  margin-top: 4px;
}
@media (max-width: 860px) {
  .sk-hero {
    grid-template-columns: 1fr;
  }
}
/* The home page's section: light, after time saved (owner, 2026-10-03). The
   words lead beside the app's own screen in a phone, laid out as on the zone
   sketch page (.sk-hero; owner, 2026-10-05: "put an image of the phone with
   the zone sketch too"), so the drawings are seen to come from it. Then the
   two exported sheets side by side at full width, level with each other
   (owner, 2026-10-03: the 3D view used to sit lower). Neither overlaps the
   other: each sheet's title block runs along its foot, and it is the part
   that proves the drawing is to scale. */
.sk-home {
  padding: var(--section-y) 0;
  background: var(--ci-canvas);
  border-top: 1px solid var(--ci-hair);
}
.sk-home h2 {
  max-width: 20ch;
  margin-top: 12px;
  font-size: clamp(1.9rem, 4vw, 3rem);
  letter-spacing: -0.035em;
}
.sk-home .lede {
  margin-top: 16px;
  max-width: 40rem;
}
.sk-points {
  margin: 20px 0 0;
  padding-left: 1.1em;
  color: var(--ci-ink-2);
}
.sk-points li + li {
  margin-top: 8px;
}
.sk-home__intro {
  max-width: 44rem;
}
.sk-set {
  margin: clamp(40px, 5vw, 64px) 0 0;
  display: grid;
  gap: clamp(20px, 2.6vw, 32px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.sk-sheet {
  margin: 0;
}
.sk-sheet figcaption {
  margin-top: 12px;
  font-size: 14px;
  color: var(--ci-ink-3);
}
.sk-home .actions {
  margin-top: clamp(32px, 4vw, 48px);
}
@media (max-width: 720px) {
  .sk-set {
    grid-template-columns: 1fr;
  }
}
/* The exported pages, one to a row: an A4 sheet at a true scale is mostly
   paper, and two-up the drawing on it is too small to read. */
.sk-drawings {
  max-width: 60rem;
}

/* ------------------------------------------------------------- the report */
/* How the report is put together: four steps, in the order they happen, set
   on hairlines rather than cards, because the order is the point. The markers
   are the report's own literal text, so they are set as such. */
.rp-steps {
  list-style: none;
  counter-reset: rp;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  gap: 28px clamp(20px, 3vw, 40px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1200px) {
  .rp-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .rp-steps {
    grid-template-columns: 1fr;
  }
}
.rp-steps li {
  counter-increment: rp;
  padding-top: 18px;
  border-top: 1px solid var(--ci-edge);
}
.rp-steps li::before {
  content: counter(rp, decimal-leading-zero);
  display: block;
  margin-bottom: 12px;
  font: 600 12px/1 var(--ci-mono);
  letter-spacing: 0.08em;
  color: var(--ci-green-ink);
}
.rp-steps h3 {
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}
.rp-steps p {
  margin-top: 8px;
  font-size: 0.97rem;
  color: var(--ci-ink-2);
}
.rp-steps b {
  font: 600 0.84em var(--ci-mono);
  letter-spacing: 0.02em;
  color: var(--ci-ink);
}
/* What raises a recommendation, and what you can do with one: a finding (or
   an action) in ink, then what follows from it. */
.rp-rules {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 0 clamp(20px, 3vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  max-width: 64rem;
}
.rp-rules li {
  padding: 12px 0;
  border-top: 1px solid var(--ci-hair);
  color: var(--ci-ink-2);
}
.rp-rules b {
  font-weight: 600;
  color: var(--ci-ink);
}
/* The home page's section, after the zone sketch (owner, 2026-10-05): the
   words, then one recommendation the survey raised, wide enough to read. */
.rp-home {
  padding: var(--section-y) 0;
  background: var(--ci-page);
  border-top: 1px solid var(--ci-hair);
}
.rp-home h2 {
  max-width: 20ch;
  margin-top: 12px;
  font-size: clamp(1.9rem, 4vw, 3rem);
  letter-spacing: -0.035em;
}
.rp-home .lede {
  margin-top: 16px;
  max-width: 40rem;
}
.rp-home .actions {
  margin-top: clamp(28px, 3vw, 40px);
}
/* The words beside the summary itself (2026-10-25): the sheet is the picture. */
.rp-home__grid {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
}
.rp-home__intro {
  position: sticky;
  top: calc(var(--nav-h) + 32px);
}
@media (max-width: 980px) {
  .rp-home__grid {
    grid-template-columns: 1fr;
  }
  .rp-home__intro {
    position: static;
  }
}
.rp-hero-doc {
  margin-top: clamp(32px, 4vw, 52px);
  max-width: 62rem;
}

/* THE EXECUTIVE SUMMARY ITSELF (owner, 2026-10-25). The app's own generated
   text for the sample account, typeset as the document: a graphite title band
   as the printed report has, then the sections on hairlines. What the app
   worked out from the survey is marked in Field Green, what it left for the
   inspector in Copper: the Two Hands rule, in the text itself. */
.rp-doc {
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--ci-surface);
  box-shadow:
    0 0 0 1px rgba(20, 23, 28, 0.08),
    0 30px 60px -36px rgba(20, 23, 28, 0.5);
}
.rp-doc__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  padding: 20px clamp(18px, 3vw, 30px) 18px;
  background: var(--ci-graphite);
  border-bottom: 3px solid var(--ci-green);
}
.rp-doc__kind {
  width: 100%;
  font: 600 12px/1 var(--ci-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ci-green);
}
.rp-doc__site {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ci-on-graphite);
}
.rp-doc__state {
  font-size: 13px;
  color: var(--ci-on-graphite-2);
}
.rp-doc__sections {
  list-style: none;
  margin: 0;
  padding: 4px clamp(18px, 3vw, 30px) 10px;
}
.rp-doc__sections > li + li {
  border-top: 1px solid var(--ci-hair);
}
.rp-doc__row,
.rp-doc summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 18px 0 10px;
}
.rp-doc summary {
  padding-bottom: 18px;
  cursor: pointer;
  list-style: none;
}
.rp-doc summary::-webkit-details-marker {
  display: none;
}
.rp-doc details[open] summary {
  padding-bottom: 10px;
}
/* An open or closed row says so with its own chevron, drawn in the edge
   colour so it never competes with the title. */
.rp-doc summary .rp-doc__title::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 12px;
  border-right: 2px solid var(--ci-edge);
  border-bottom: 2px solid var(--ci-edge);
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--ci-hover-ms) ease;
}
.rp-doc details[open] summary .rp-doc__title::after {
  transform: translateY(1px) rotate(-135deg);
}
.rp-doc summary:hover .rp-doc__title {
  color: var(--ci-green-ink);
}
.rp-doc summary:focus-visible {
  outline: 2px solid var(--ci-green-ink);
  outline-offset: 3px;
  border-radius: 4px;
}
.rp-doc__title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ci-ink);
}
.rp-doc__from {
  font-size: 13px;
  color: var(--ci-ink-3);
}
.rp-doc__body {
  max-width: 66ch;
  padding-bottom: 20px;
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--ci-ink-2);
}
.rp-doc__body p,
.rp-doc__body ul {
  margin: 0;
}
.rp-doc__body p + p,
.rp-doc__body p + ul,
.rp-doc__body ul + p {
  margin-top: 10px;
}
.rp-doc__body ul {
  padding-left: 1.1em;
}
.rp-doc__body li + li {
  margin-top: 4px;
}
/* The marks. Each is a highlighter stroke laid behind the words: a
   background, not a text colour alone, so it reads in any light. */
mark.rp-fig,
mark.rp-gap {
  /* Not the browser's yellow: the stroke is the background image below. */
  background-color: transparent;
  border-radius: 4px;
  padding: 1px 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
mark.rp-fig {
  background-image: linear-gradient(var(--ci-green-tint), var(--ci-green-tint));
  color: var(--ci-green-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
mark.rp-gap {
  background-image: linear-gradient(var(--ci-copper-tint), var(--ci-copper-tint));
  color: var(--ci-copper-ink);
  font: 600 0.86em var(--ci-mono);
  letter-spacing: 0.01em;
}
/* ONE AUTHORED MOMENT: as the sheet comes into view the marks are laid down,
   as a highlighter would, so the reader sees what the app worked out. Where
   the browser cannot tie this to scroll, or motion is reduced, the marks are
   simply there. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rp-doc mark {
      animation: rp-mark linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 40%;
    }
  }
}
@keyframes rp-mark {
  from {
    background-size: 0% 100%;
  }
  to {
    background-size: 100% 100%;
  }
}
/* The key to the marks. */
.rp-legend {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 14px;
  color: var(--ci-ink-2);
}
.rp-legend li {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.rp-hero-doc .rp-legend {
  margin: 0 0 18px;
}

/* ---------------------------------------------------- privacy and support */
/* The reading pages the app stores link to (owner, 2026-10-05): one column
   at a reading measure, headings on hairlines, lists set like the text. */
/* The measure is on the children, so the column starts where the heading
   above it does rather than centring inside the page width. */
.pg-prose > * {
  max-width: 46rem;
}
.pg-prose h2 {
  max-width: 46rem;
  margin: 48px 0 12px;
  padding-top: 24px;
  border-top: 1px solid var(--ci-hair);
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  letter-spacing: -0.02em;
}
.pg-prose h2:first-child {
  margin-top: 0;
}
.pg-prose p,
.pg-prose li {
  color: var(--ci-ink-2);
  line-height: 1.65;
}
.pg-prose p + p {
  margin-top: 12px;
}
.pg-prose ul,
.pg-prose ol {
  margin: 12px 0 0;
  padding-left: 1.2em;
}
.pg-prose li + li {
  margin-top: 10px;
}
.pg-prose ul + p,
.pg-prose ol + p {
  margin-top: 16px;
}
.pg-prose b {
  color: var(--ci-ink);
}
.pg-prose a {
  color: var(--ci-green-ink, inherit);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------ the TM44 guide */
/* "What is a TM44 inspection?" (2026-10-07). The rules as a path of
   junctions: an ink marker on a hairline rail, the question, the rule, and
   only the ways ahead, the way a sign at a junction shows only the turns
   from where you stand. The last junction is the outcome and fills its
   marker with ink. No new colour: green-ink marks the way that continues,
   because it is the one word on a light ground that says go. */
.tg-lede {
  max-width: 46rem;
  margin-top: 14px;
}
.tg-path {
  list-style: none;
  margin: clamp(32px, 4vw, 48px) 0 0;
  padding: 0;
  max-width: 54rem;
}
.tg-step {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: clamp(14px, 2.4vw, 24px);
  padding-bottom: clamp(30px, 4vw, 44px);
}
/* The rail joins one marker to the next and stops at the last. */
.tg-step::before {
  content: '';
  position: absolute;
  left: 21px;
  top: 52px;
  bottom: 8px;
  width: 2px;
  background: var(--ci-edge);
}
.tg-step:last-child {
  padding-bottom: 0;
}
.tg-step:last-child::before {
  display: none;
}
.tg-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ci-surface);
  box-shadow:
    inset 0 0 0 1px var(--ci-edge),
    0 10px 20px -14px rgba(20, 23, 28, 0.45);
  font: 700 16px/1 var(--ci-sans);
  color: var(--ci-ink);
  font-variant-numeric: tabular-nums;
}
.tg-end .tg-mark {
  background: var(--ci-ink);
  box-shadow: 0 10px 20px -12px rgba(20, 23, 28, 0.6);
  color: #ffffff;
}
.tg-body h3 {
  margin-top: 11px;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
}
.tg-body p {
  max-width: 46rem;
  margin-top: 10px;
  color: var(--ci-ink-2);
  line-height: 1.65;
}
.tg-body a {
  color: var(--ci-green-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* The ways ahead: each a condition and where it leads, one line apiece. */
.tg-ways {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  max-width: 46rem;
  border-radius: var(--ci-r-card);
  background: var(--ci-surface);
  box-shadow:
    inset 0 0 0 1px rgba(20, 23, 28, 0.08),
    0 14px 30px -24px rgba(20, 23, 28, 0.35);
}
.tg-ways li {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 6px 18px;
  padding: 12px 16px;
  font-size: var(--ci-t-row);
  line-height: 1.5;
}
.tg-ways li + li {
  border-top: 1px solid var(--ci-hair);
}
.tg-ways b {
  color: var(--ci-ink);
  font-weight: 600;
}
.tg-ways li > span {
  color: var(--ci-ink-2);
}
.tg-arrow {
  margin-right: 6px;
  color: var(--ci-ink-3);
}
.tg-go li > span,
.tg-ways .tg-go > span {
  color: var(--ci-green-ink);
  font-weight: 600;
}
.tg-ways .tg-go .tg-arrow {
  color: var(--ci-green-ink);
}
@media (max-width: 640px) {
  .tg-ways li {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* A reading split: the words take the wider column and the drawing the
   narrower, on either side. On a phone the words come first. */
.tg-split {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
.tg-split--left {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.tg-split--left > figure {
  order: -1;
}
@media (max-width: 860px) {
  .tg-split,
  .tg-split--left {
    grid-template-columns: minmax(0, 1fr);
  }
  .tg-split--left > figure {
    order: 0;
  }
  .tg-figure {
    max-width: 300px;
  }
}

/* The app's own drawings, at their own proportions, never cropped. */
.tg-figure img,
.tg-draw img {
  display: block;
  width: 100%;
  height: auto;
}
.tg-figure {
  max-width: 420px;
  justify-self: center;
}
.tg-levels {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  margin-top: clamp(28px, 4vw, 44px);
}
.tg-level {
  padding: 22px 24px 26px;
  border-radius: var(--ci-r-panel);
  background: linear-gradient(160deg, #ffffff 0%, var(--ci-canvas) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(20, 23, 28, 0.08),
    inset 0 1px 0 #ffffff,
    0 18px 36px -24px rgba(20, 23, 28, 0.35);
}
/* Two drawings side by side and level; one drawing at the same height. */
.tg-draw {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
  min-height: 0;
}
.tg-draw:has(> img:only-child) {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}
.tg-draw:has(> img:only-child) img {
  width: 50%;
}
.tg-level h3 {
  margin-top: 18px;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
}
.tg-level p {
  margin-top: 8px;
  color: var(--ci-ink-2);
}
.tg-after {
  margin-top: 22px;
}
.tg-after a {
  color: var(--ci-green-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Assessor list in the Click Inspection split. */
.tg #click ul {
  margin: 18px 0 0;
  padding-left: 1.1em;
  color: var(--ci-ink-2);
}
.tg #click li + li {
  margin-top: 8px;
}
.tg #click .eyebrow {
  margin-bottom: 10px;
}
.tg-sources li {
  overflow-wrap: anywhere;
}
.tg-checked {
  font-size: var(--ci-t-row);
  color: var(--ci-ink-3);
}

/* ------------------------------------------------------------- the app page */
/* site/app.html (owner, 2026-10-08). The page stays in the light world. Each
   phone shows one screen in one theme, and down the working day the themes
   take turns, light then dark (owner, 2026-10-08), so both are seen without a
   switch to find. */

/* Dark beside light: the same Account screen both ways. */
.ap-pair {
  display: grid;
  gap: clamp(16px, 2.5vw, 28px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.ap-pair .pg-phone {
  width: min(100%, 300px);
}
.ap-pair figcaption,
.ap-shot figcaption {
  margin-top: 14px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ci-ink-3);
}

/* The working day runs a step larger, as the feature sections do, so its
   steps can take the headline size beneath it. */
.ap #workflow-h {
  max-width: 20ch;
  font-size: clamp(1.9rem, 4vw, 3rem);
  letter-spacing: -0.035em;
}

/* The working day, one step to a row, so each title and its words have the
   width to themselves (owner, 2026-10-08: paired steps were crowded). The
   theme picks the side: a light screen sits right of its words, a dark one
   left, so the page swings as the screens change. The last step stands alone
   in the middle. The step number is information here: it is the order to
   work in. */
.ap-steps {
  --ap-shot: clamp(240px, 28vw, 330px);
  list-style: none;
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 0;
}
.ap-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ap-shot);
  gap: clamp(32px, 8vw, 120px);
  align-items: center;
  padding: clamp(48px, 7vw, 96px) 0;
  border-top: 1px solid var(--ci-hair);
}
.ap-step--dark {
  grid-template-columns: var(--ap-shot) minmax(0, 1fr);
}
.ap-step--dark .ap-shot {
  order: -1;
}
.ap-shot {
  margin: 0;
}
.ap-shot .pg-phone {
  width: 100%;
}
.ap-step--finale {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 40px;
  text-align: center;
}
.ap-step--finale .ap-shot {
  width: var(--ap-shot);
}
.ap-step--finale h3,
.ap-step--finale .ap-step__words > p:last-child {
  margin-left: auto;
  margin-right: auto;
}
.ap-step__when {
  margin: 0;
  font-weight: 600;
  color: var(--ci-ink-3);
}
.ap-step__n {
  margin-right: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--ci-green-ink);
}
.ap-step h3 {
  max-width: 20ch;
  margin-top: 10px;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;
}
.ap-step__words > p:last-child {
  max-width: 36rem;
  margin-top: 14px;
  color: var(--ci-ink-2);
}
.ap-step__words b {
  color: var(--ci-ink);
}
.ap-step__words a {
  color: var(--ci-green-ink);
}
/* One column: the words first, then the phone, centred under them. */
@media (max-width: 860px) {
  .ap-step,
  .ap-step--dark {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .ap-step--dark .ap-shot {
    order: 0;
  }
  .ap-step .ap-shot {
    justify-self: center;
    width: min(100%, 280px);
  }
  .ap-step--finale {
    justify-items: start;
    text-align: left;
  }
  .ap-step--finale h3,
  .ap-step--finale .ap-step__words > p:last-child {
    margin-left: 0;
  }
}

/* What it does on site: three short groups, each under one plain heading and
   one divider, rather than seven rows ruled off one by one. */
.ap-facts {
  display: grid;
  gap: clamp(28px, 4vw, 48px) clamp(28px, 5vw, 64px);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  margin: clamp(26px, 4vw, 40px) 0 0;
}
.ap-facts__group {
  padding-top: 20px;
  border-top: 1px solid var(--ci-edge);
}
.ap-facts__group h3 {
  font-size: 1.12rem;
  letter-spacing: -0.01em;
}
.ap-facts dl {
  margin: 0;
}
.ap-facts dl > div {
  margin-top: 20px;
}
.ap-facts dt {
  font-weight: 600;
  color: var(--ci-ink);
}
.ap-facts dd {
  max-width: 34rem;
  margin: 4px 0 0;
  color: var(--ci-ink-2);
}