/*
 * The demo site's own frame: sidebar, top bar, sections, swatches, spec tables.
 * It follows the app shell (Sidebar, AppLayout): a 240px gray-50 sidebar, a 56px top bar,
 * a page with 32px padding (the app's is 24px; this site keeps more air). Colors and sizes come from tokens.css.
 */

/* ── Frame ── */

/* The room for the scrollbar is always there, so a short page and a long one are equally wide */
html {
  scrollbar-gutter: stable;
}

body {
  display: grid;
  grid-template-columns: var(--size-sidebar) minmax(0, 1fr);
  grid-template-rows: var(--size-topbar) 1fr;
  min-height: 100vh;
}

.sc-side {
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-right: 1px solid var(--color-gray-200);
  background: var(--color-gray-50);
  overflow-y: auto;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sc-side .brand {
  height: 40px;
  margin-bottom: 8px;
  padding: 0 12px;
}

/* The mark beside the name: this is the documentation site, not the app */
.sc-side__docs {
  display: inline-flex;
  align-items: center;
  height: 20px;
  margin-left: -2px;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-100);
  color: var(--color-primary-700);
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* This menu lists many more pages than the app's, so its rows are lower than the app's 44px items */
.sc-side .navlink {
  height: auto;
  min-height: 32px;
  padding: 6px 12px 6px 28px;
  line-height: 20px;
}

/* A group is a <details>: its title is the <summary> that folds and unfolds its pages */
.sc-side__title {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.sc-side__title:hover {
  background: var(--color-gray-100);
}

.sc-side__chevron {
  width: 6px;
  height: 6px;
  margin: 0 2px 2px 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s;
}

.sc-side__title::-webkit-details-marker {
  display: none;
}

.sc-side__group:not([open]) .sc-side__chevron {
  margin-bottom: 0;
  transform: rotate(-45deg);
}

.sc-side__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
}

/* A link holds the size of its Medium label (the hidden copy drawn from data-label), so the
   menu does not shift or re-wrap when the highlight moves to another page */
.sc-side a.navlink {
  display: grid;
}

.sc-side a.navlink > span,
.sc-side a.navlink::after {
  grid-area: 1 / 1;
}

.sc-side a.navlink::after {
  content: attr(data-label);
  visibility: hidden;
  font-weight: 500;
}

.sc-side__list[hidden] {
  display: none;
}

.sc-side__planned {
  cursor: default;
  color: var(--color-gray-500);
}

.sc-side__planned:hover {
  background: transparent;
  color: var(--color-gray-500);
}

.sc-side__soon {
  height: 20px;
  margin-left: auto;
  padding: 0 6px;
}

.sc-side__hint {
  margin-top: auto;
  padding: 0 12px;
}

.sc-top {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--size-topbar);
  padding: 0 32px;
  border-bottom: 1px solid var(--color-gray-200);
  background: var(--color-white);
}

.sc-menu {
  display: none;
  height: 36px;
  padding: 0 12px;
}

.sc-crumb {
  display: flex;
  gap: 8px;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-gray-500);
}

.sc-crumb__page {
  color: var(--color-gray-900);
  font-weight: 600;
}

.sc-top__note {
  margin-left: auto;
}

.sc-main {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  max-width: 1264px;
  padding: 32px;
}

.sc-scrim {
  display: none;
}

/* ── Page head and sections (the gallery's Section and Row, ComponentsGallery.tsx) ── */

.sc-hero {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sc-hero__overline {
  color: var(--color-primary-600);
}

.sc-hero p,
.sc-section__head p {
  max-width: 760px;
  color: var(--color-gray-500);
}

.sc-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sc-section__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-gray-200);
}

.sc-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sc-row__items {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
}

.sc-row__items--tight {
  gap: 8px;
}

.sc-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sc-grid-2,
.sc-grid-3,
.sc-grid-4 {
  display: grid;
  gap: 16px;
}

.sc-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.sc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.sc-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* Where a sample comes from in the app */
.sc-source {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-gray-500);
}

.sc-source code,
.sc-list code,
.sc-change code,
.sc-hero code,
.sc-section__head code,
.t-caption code,
.field__hint code,
.table code {
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}

.sc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 20px 20px 40px;
  list-style: disc;
  max-width: 880px;
}

.sc-list strong {
  font-weight: 600;
}

/* A sample that needs the page background behind it (the app shell parts) */
.sc-stage {
  padding: 16px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.sc-stage--narrow {
  width: var(--size-sidebar);
}

/* ── Swatches ── */

.sc-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.swatch {
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.swatch__chip {
  height: 72px;
  border-bottom: 1px solid var(--color-gray-200);
}

.swatch__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
}

.swatch__name {
  font-weight: 500;
  color: var(--color-gray-900);
}

.swatch__value {
  color: var(--color-gray-500);
}

.swatch__use {
  margin-top: 4px;
}

.swatch--small .swatch__chip {
  height: 40px;
}

.sc-status-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.sc-status-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sc-status-card .sc-swatches {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sc-fn-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
}

/* ── Spec samples ── */

.sc-sample {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 28px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.sc-bar {
  height: 16px;
  border-radius: 2px;
  background: var(--color-primary-600);
}

.sc-shape {
  width: 88px;
  height: 56px;
  border: 1px solid var(--color-gray-300);
  background: var(--color-white);
}

.sc-shape--card { border-color: var(--color-gray-200); border-radius: var(--radius-lg); }

.sc-typeface {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sc-typeface__name {
  font-size: 40px;
  line-height: 48px;
  font-weight: 600;
}

.sc-typeface__sample {
  font-size: 16px;
  line-height: 24px;
}

.sc-uses {
  color: var(--color-gray-500);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Catalog tiles and the previous / next pager ── */

/* The catalog holds one section per group; space them like the page's own sections */
.sc-catalog {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.sc-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.sc-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 20px;
  color: var(--color-gray-900);
}

a.sc-tile:hover {
  border-color: var(--color-primary-300);
  color: var(--color-gray-900);
}

.sc-tile p {
  color: var(--color-gray-500);
}

.sc-tile--planned {
  box-shadow: none;
  background: transparent;
}

.sc-pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--color-gray-200);
}

.sc-pager__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sc-pager__link--next {
  margin-left: auto;
  text-align: right;
}

.sc-pager__title {
  font-weight: 600;
}

/* ── Narrow screens: the sidebar slides over the page ── */

@media (max-width: 900px) {
  body {
    display: block;
  }

  .sc-side {
    position: fixed;
    z-index: 20;
    left: 0;
    width: var(--size-sidebar);
    transform: translateX(-100%);
  }

  .nav-open .sc-side {
    transform: none;
    box-shadow: var(--shadow-popover);
  }

  .nav-open .sc-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 10;
    background: rgba(22, 32, 42, 0.3);
  }

  .sc-menu {
    display: inline-flex;
  }

  .sc-top,
  .sc-main {
    padding-left: 16px;
    padding-right: 16px;
  }

  .sc-top__note {
    display: none;
  }

  .sc-grid-2,
  .sc-grid-3,
  .sc-grid-4,
  .clock,
  .stagecounts {
    grid-template-columns: minmax(0, 1fr);
  }

  .stagebar {
    overflow-x: auto;
  }

  .stagebar__step {
    min-width: 96px;
  }
}

/* ── Dev conversation: one card per proposed change to the app ── */

.sc-change__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 920px;
  padding: 20px;
}

.sc-change__part {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sc-change__part ul,
.sc-change__part ol {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 20px;
}

.sc-change__part ul { list-style: disc; }
.sc-change__part ol { list-style: decimal; }

.sc-change__part strong {
  font-weight: 600;
}

/* ── Diagrams: inline SVG drawn with the same tokens ── */

.sc-diagram {
  padding: 24px;
  overflow-x: auto;
}

.sc-diagram svg {
  display: block;
  width: 100%;
  min-width: 720px;
  height: auto;
}

.dg-box {
  fill: var(--color-white);
  stroke: var(--color-gray-300);
  stroke-width: 1;
}

.dg-box--main {
  fill: var(--color-primary-100);
  stroke: var(--color-primary-600);
}

.dg-box--data {
  fill: var(--color-gray-100);
  stroke: var(--color-gray-300);
}

.dg-box--made {
  fill: var(--color-white);
  stroke: var(--color-gray-500);
  stroke-dasharray: 4 3;
}

.dg-title {
  fill: var(--color-gray-900);
  font-size: 14px;
  font-weight: 600;
  text-anchor: middle;
}

.dg-sub {
  fill: var(--color-gray-500);
  font-size: 12px;
  text-anchor: middle;
}

.dg-label {
  fill: var(--color-gray-700);
  font-size: 12px;
  text-anchor: middle;
}

.dg-line {
  fill: none;
  stroke: var(--color-gray-500);
  stroke-width: 1.5;
}

.dg-head {
  fill: var(--color-gray-500);
}

/* ── Flows: a board of the app's screens; assets/demo.js shows them one at a time ── */

.demo-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
}

.demo-bar__stepper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.demo-bar__stepper[hidden] {
  display: none;
}

.demo-bar__stepper .btn {
  width: var(--size-control);
  padding: 0;
}

.segmented {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  background: var(--color-white);
}

/* One weight for both states, so the two buttons never change width */
.segmented__item {
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-gray-700);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.segmented__item[aria-pressed='true'] {
  background: var(--color-primary-100);
  color: var(--color-primary-700);
}

.board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 32px 24px;
  align-items: start;
}

.board__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.board__item--wide {
  grid-column: 1 / -1;
}

.board__caption {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.board__caption b {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

.board__caption span {
  max-width: 760px;
  color: var(--color-gray-500);
}

/* Steps the screen itself cannot show: another outcome of the same button, a step outside the app */
.board__more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 10px 16px;
  border: 1px dashed var(--color-gray-300);
  border-radius: var(--radius-lg);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-gray-500);
}

/* In the demo one screen is on show, as wide as the page allows */
.board--demo {
  display: block;
}

.board--demo .board__item[hidden] {
  display: none;
}

.frame {
  overflow: hidden;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  background: var(--color-gray-50);
}

.frame__chrome {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border-bottom: 1px solid var(--color-gray-200);
  background: var(--color-white);
}

.frame__url {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
}

.frame__screen {
  overflow-x: auto;
}

/* What stands in for a page that has no screens on this site yet */
.sc-standin {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 720px;
  padding: 20px;
  border: 1px dashed var(--color-gray-300);
  border-radius: var(--radius-lg);
  color: var(--color-gray-700);
}

/* ── A page in sections (all the components, all the sign-in layouts) ──
   Each section opens with its own head, under a rule, like a page of its own. The menu marks the
   one on screen as the page scrolls (nav.js). */

.sc-block {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 48px;
  border-top: 1px solid var(--color-gray-300);
  scroll-margin-top: 24px;
}

/* ── Sign-in layouts (signInLayouts/index.html, assets/signInLayouts.js) ──
   Proposed designs for the sign-in page. Each board is a 1280 × 800 laptop screen, scaled to its
   frame by the script. The boards keep fixed Valere colors; their class names start with sl- so
   they never meet the site's own .chip, .pill or .tag. */

.sl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sl-tag--primary {
  border-color: var(--color-primary-300);
  background: var(--color-primary-100);
  color: var(--color-primary-700);
}

.sl-frame {
  background: var(--color-white);
}

.sl-chrome {
  gap: 12px;
  height: auto;
  min-height: 44px;
  padding-block: 6px;
}

.sl-chrome .frame__url {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-tools {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.sl-tool {
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
  line-height: 16px;
}

/* Pause and Play take the same room, so the bar never moves */
.sl-tool[data-sl-action='pause'] {
  min-width: 68px;
}

.sl-viewport {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1280 / 800;
}

.sl-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 1280px;
  height: 800px;
  transform-origin: 0 0;
  container-type: inline-size;
}

.sl-viewport:not([data-sl-fit]) .sl-screen {
  visibility: hidden;
}

.sl-notes,
.lg-notes,
.nf-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px 28px;
}

.sl-notes dt,
.lg-notes dt,
.nf-notes dt {
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  color: var(--color-gray-500);
}

.sl-notes dd,
.lg-notes dd,
.nf-notes dd {
  margin: 4px 0 0;
}

/* The sign-in form on a board: the app's fields and button, without the card around them */
.sl-signin {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 400px;
}

html.sl-locked {
  overflow: hidden;
}

.sl-full {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--color-gray-900);
}

.sl-full__body {
  position: absolute;
  inset: 0;
  container-type: inline-size;
}

.sl-full__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  height: 36px;
  box-shadow: var(--shadow-popover);
}

@media (max-width: 560px) {
  .sl-chrome .frame__url {
    display: none;
  }
}

/* The flows in this layout (flows/signIn.html, flows/resetPassword.html). Proposed, not in the app:
   the strength bar under a new password, a rule that failed when the form was sent, and the warning
   and notice bars of the states only the design boards have (too many attempts, session ended). */

.sl-meter {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 2px;
}

.sl-meter__bar {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.sl-meter__seg {
  height: 4px;
  border-radius: 2px;
  background: var(--color-gray-200);
  transition: background-color 0.3s;
}

.sl-meter[data-tone='crit'] { --sl-meter-mark: var(--color-crit-mark); --sl-meter-text: var(--color-crit-text); }
.sl-meter[data-tone='warn'] { --sl-meter-mark: var(--color-warn-mark); --sl-meter-text: var(--color-warn-text); }
.sl-meter[data-tone='good'] { --sl-meter-mark: var(--color-good-mark); --sl-meter-text: var(--color-good-text); }

.sl-meter[data-level='1'] .sl-meter__seg:nth-child(-n + 1),
.sl-meter[data-level='2'] .sl-meter__seg:nth-child(-n + 2),
.sl-meter[data-level='3'] .sl-meter__seg:nth-child(-n + 3),
.sl-meter[data-level='4'] .sl-meter__seg {
  background: var(--sl-meter-mark);
}

/* The label keeps its width, so the bar never resizes as the word changes */
.sl-meter__label {
  min-width: 48px;
  text-align: right;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--sl-meter-text, var(--color-gray-500));
}

.rule--fail {
  color: var(--color-crit-text);
}

.alert--warn { background: var(--color-warn-tint); color: var(--color-warn-text); }
.alert--info { background: var(--color-gray-100); color: var(--color-gray-700); }

/* The boards themselves */

.sl-auth {
  --start: 0s;
  --sl-teal-light: #6cc5c9; /* the Land teal, lightened for a dark panel */
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  height: 100%;
  background: var(--color-white);
  color: var(--color-gray-900);
  font: 400 14px/20px var(--font-sans);
  overflow: hidden;
}
.sl-auth.sl-is-paused, .sl-auth.sl-is-paused *, .nf-board.sl-is-paused, .nf-board.sl-is-paused * { animation-play-state: paused !important; }
.sl-auth.sl-is-restarting, .sl-auth.sl-is-restarting *, .nf-board.sl-is-restarting, .nf-board.sl-is-restarting * { animation: none !important; }

.sl-auth__panel { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 40px 48px; color: #fff; }
.sl-auth__panel--light { color: var(--color-gray-900); }
.sl-panel__art { position: absolute; inset: 0; z-index: 0; }
.sl-panel__art svg { display: block; width: 100%; height: 100%; }
.sl-panel__brand { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; font: 600 18px/28px var(--font-sans); }
.sl-panel__mark { display: block; flex-shrink: 0; width: 32px; height: 32px; }
.sl-panel__mark .logo__ink { fill: var(--color-white); }
.sl-auth__panel--light .sl-panel__mark .logo__ink { fill: var(--color-primary-600); }
.sl-panel__copy { position: relative; z-index: 2; display: grid; gap: 12px; max-width: 440px; }
.sl-panel__title { font: 600 32px/40px var(--font-sans); letter-spacing: -.01em; }
.sl-panel__text { font-size: 15px; line-height: 24px; opacity: .8; }
.sl-auth__panel--light .sl-panel__text { color: var(--color-gray-500); opacity: 1; }

.sl-auth__form { display: flex; align-items: center; justify-content: center; padding: 48px 32px; }

/* Below a laptop width the panel folds to a band with the brand and the headline */
@container (max-width: 860px) {
  .sl-auth { grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow-y: auto; }
  .sl-auth__panel { min-height: 220px; padding: 24px; gap: 24px; }
  .sl-panel__title { font-size: 22px; line-height: 28px; }
  .sl-panel__text, .sl-jny, .sl-net, .sl-fb, .sl-hs, .sl-tube, .sl-gl { display: none; }
  .sl-auth__form { padding: 32px 20px; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .sl-auth, .sl-auth *, .nf-board, .nf-board * { animation: none !important; }
}

/* ════ A · Site plan ════ */
.sl-auth--a { --T: 16s; --start: -12s; }
.sl-auth--a .sl-auth__panel { background: #0c1f3d; }
.sl-a-contours path { fill: none; stroke: #fff; stroke-opacity: .11; stroke-width: 1; stroke-linejoin: round; animation: sl-a-drift 28s ease-in-out infinite alternate; }
.sl-a-glow { animation: sl-a-glow 7s ease-in-out infinite alternate; }
.sl-a-draw { animation: sl-a-wrap var(--T) linear infinite var(--start); }
.sl-a-parcel { fill: var(--sl-teal-light); fill-opacity: .14; stroke: var(--sl-teal-light); stroke-width: 2.5; stroke-linejoin: round; stroke-dasharray: var(--len); stroke-dashoffset: 0; animation: sl-a-parcel var(--T) ease-in-out infinite var(--start); }
.sl-a-road { fill: none; stroke: #fff; stroke-opacity: .4; stroke-width: 1.5; stroke-dasharray: var(--len); stroke-dashoffset: 0; animation: sl-a-road var(--T) ease-in-out infinite var(--start); }
.sl-a-lots { animation: sl-a-fade var(--T) linear infinite var(--start); }
.sl-a-lots path { fill: none; stroke: var(--sl-teal-light); stroke-opacity: .6; stroke-width: 1; stroke-dasharray: 4 5; }
.sl-a-homes rect { fill: #fff; fill-opacity: .9; transform-box: fill-box; transform-origin: center; animation: sl-a-home var(--T) cubic-bezier(.3, 1.4, .5, 1) infinite; animation-delay: calc(var(--start) + var(--i) * .2s); }
.sl-a-shadow { fill: #000; opacity: .35; animation: sl-a-shadow var(--T) linear infinite var(--start); }
.sl-a-pin { animation: sl-a-pin var(--T) cubic-bezier(.3, .9, .4, 1.3) infinite var(--start); }
.sl-a-label { animation: sl-a-label var(--T) ease-out infinite var(--start); }
.sl-a-label text { font: 600 12px var(--font-sans); fill: var(--color-gray-900); }
.sl-a-label .sl-a-label__sub { font-weight: 400; font-size: 11px; fill: var(--color-gray-500); }
.sl-a-legend path { fill: #fff; fill-opacity: .65; }
.sl-a-legend text { font: 500 10px var(--font-mono); fill: #fff; fill-opacity: .65; }

@keyframes sl-a-drift { from { transform: translateX(-10px); } to { transform: translateX(10px); } }
@keyframes sl-a-glow { from { opacity: .55; } to { opacity: 1; } }
@keyframes sl-a-wrap { 0%, 12.5% { opacity: 0; } 15.6%, 87.5% { opacity: 1; } 90.6%, 100% { opacity: 0; } }
@keyframes sl-a-parcel {
  0%, 15.6% { stroke-dashoffset: var(--len); fill-opacity: 0; }
  31.25% { stroke-dashoffset: 0; fill-opacity: 0; }
  37.5%, 100% { stroke-dashoffset: 0; fill-opacity: .14; }
}
@keyframes sl-a-road { 0%, 31.25% { stroke-dashoffset: var(--len); } 40.6%, 100% { stroke-dashoffset: 0; } }
@keyframes sl-a-fade { 0%, 40.6% { opacity: 0; } 46.9%, 100% { opacity: 1; } }
@keyframes sl-a-home { 0%, 46.9% { transform: scale(0); } 49.4% { transform: scale(1.15); } 50.6%, 100% { transform: scale(1); } }
@keyframes sl-a-shadow { 0%, 62.5% { opacity: 0; } 64.4%, 100% { opacity: .35; } }
@keyframes sl-a-pin { 0%, 61.25% { transform: translateY(-46px); opacity: 0; } 63.75% { transform: translateY(3px); opacity: 1; } 65%, 100% { transform: translateY(0); opacity: 1; } }
@keyframes sl-a-label { 0%, 65.6% { opacity: 0; transform: translateX(-6px); } 68.75%, 100% { opacity: 1; transform: translateX(0); } }

/* ════ B · Deal journey ════ */
@property --sl-p { syntax: '<number>'; inherits: true; initial-value: 1; }
.sl-auth--b { --T: 18s; --start: -14s; }
.sl-auth--b .sl-auth__panel { background: linear-gradient(160deg, var(--color-primary-100) 0%, var(--color-gray-50) 48%, var(--color-gray-100) 100%); border-right: 1px solid var(--color-gray-200); }
.sl-jny { position: absolute; z-index: 1; left: 48px; top: 104px; width: 420px; display: grid; gap: 24px; animation: sl-b-wrap var(--T) linear infinite var(--start); }
.sl-jny__card { display: grid; gap: 6px; padding: 16px 18px; border: 1px solid var(--color-gray-200); border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(22, 32, 42, .06); }
.sl-jny__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sl-jny__name { font: 600 16px/24px var(--font-sans); }
.sl-jny__phase { display: grid; }
.sl-jny__tag { grid-area: 1 / 1; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 9999px; font: 600 12px/1 var(--font-sans); white-space: nowrap; }
.sl-jny__tag--lead { background: var(--color-gray-100); color: var(--color-gray-700); opacity: 0; animation: sl-b-lead var(--T) linear infinite var(--start); }
.sl-jny__tag--opp { background: var(--color-primary-100); color: var(--color-primary-700); justify-self: end; animation: sl-b-opp var(--T) linear infinite var(--start); }
.sl-jny__meta { font-size: 13px; line-height: 20px; color: var(--color-gray-500); }
.sl-jny__same { font-size: 12px; line-height: 16px; color: var(--color-gray-500); }
.sl-jny__same b { color: var(--color-gray-700); font-weight: 600; }
.sl-jny__track { position: relative; }
.sl-jny__line, .sl-jny__fill { position: absolute; left: 6px; top: 25px; height: 350px; width: 2px; border-radius: 1px; }
.sl-jny__line { background: var(--color-gray-200); }
.sl-jny__fill { background: var(--color-primary-600); transform-origin: top; animation: sl-b-fill var(--T) ease-in-out infinite var(--start); }
.sl-jny__runner { position: absolute; left: 2px; top: 20px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-primary-600); box-shadow: 0 0 0 4px rgba(31, 78, 140, .18); transform: translateY(350px); animation: sl-b-run var(--T) ease-in-out infinite var(--start); }
.sl-jny__steps { list-style: none; padding: 0; display: grid; }
.sl-jny__step { --sl-p: 1; position: relative; display: flex; align-items: center; gap: 12px; height: 50px; padding-left: 30px; animation: sl-b-s0 var(--T) linear infinite var(--start); }
.sl-jny__dot { position: absolute; left: 0; width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--fn) calc(var(--sl-p) * 100%), var(--color-gray-300)); background: color-mix(in srgb, var(--fn) calc(var(--sl-p) * 100%), #fff); }
.sl-jny__label { font-weight: 500; color: color-mix(in srgb, var(--color-gray-900) calc(var(--sl-p) * 100%), var(--color-gray-500)); }
.sl-jny__chip { margin-left: auto; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 9999px; background: var(--tint); color: var(--fn); font: 600 12px/1 var(--font-sans); opacity: var(--sl-p); transform: translateX(calc((1 - var(--sl-p)) * -8px)); }

@keyframes sl-b-wrap { 0%, 5.56% { opacity: 0; } 7.2%, 88.9% { opacity: 1; } 92.2%, 100% { opacity: 0; } }
@keyframes sl-b-lead { 0%, 27.22% { opacity: 1; } 29.4%, 100% { opacity: 0; } }
@keyframes sl-b-opp { 0%, 27.22% { opacity: 0; } 29.4%, 100% { opacity: 1; } }
@keyframes sl-b-run {
  0%, 15% { transform: translateY(0); }
  17.78%, 24.44% { transform: translateY(50px); }
  27.22%, 33.89% { transform: translateY(100px); }
  36.67%, 43.33% { transform: translateY(150px); }
  46.11%, 52.78% { transform: translateY(200px); }
  55.56%, 62.22% { transform: translateY(250px); }
  65%, 71.67% { transform: translateY(300px); }
  74.44%, 100% { transform: translateY(350px); }
}
@keyframes sl-b-fill {
  0%, 15% { transform: scaleY(0); }
  17.78%, 24.44% { transform: scaleY(.1429); }
  27.22%, 33.89% { transform: scaleY(.2857); }
  36.67%, 43.33% { transform: scaleY(.4286); }
  46.11%, 52.78% { transform: scaleY(.5714); }
  55.56%, 62.22% { transform: scaleY(.7143); }
  65%, 71.67% { transform: scaleY(.8571); }
  74.44%, 100% { transform: scaleY(1); }
}
@keyframes sl-b-s0 { 0%, 8.33% { --sl-p: 0; } 10.5%, 100% { --sl-p: 1; } }
@keyframes sl-b-s1 { 0%, 17.78% { --sl-p: 0; } 20%, 100% { --sl-p: 1; } }
@keyframes sl-b-s2 { 0%, 27.22% { --sl-p: 0; } 29.4%, 100% { --sl-p: 1; } }
@keyframes sl-b-s3 { 0%, 36.67% { --sl-p: 0; } 38.9%, 100% { --sl-p: 1; } }
@keyframes sl-b-s4 { 0%, 46.11% { --sl-p: 0; } 48.3%, 100% { --sl-p: 1; } }
@keyframes sl-b-s5 { 0%, 55.56% { --sl-p: 0; } 57.8%, 100% { --sl-p: 1; } }
@keyframes sl-b-s6 { 0%, 65% { --sl-p: 0; } 67.2%, 100% { --sl-p: 1; } }
@keyframes sl-b-s7 { 0%, 74.44% { --sl-p: 0; } 76.7%, 100% { --sl-p: 1; } }

/* ════ C · Connected record ════ */
.sl-auth--c { --T: 18s; --start: -13s; }
.sl-auth--c .sl-auth__panel { background: radial-gradient(ellipse 70% 50% at 25% 15%, rgba(31, 78, 140, .55), transparent 70%), radial-gradient(60% 40% at 80% 90%, rgba(11, 107, 111, .35), transparent 70%), linear-gradient(180deg, #121f36 0%, #0b1526 100%); }
.sl-auth--c .sl-panel__art { background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px); background-size: 28px 28px; background-position: 14px 14px; }
.sl-net { position: absolute; z-index: 1; left: 50%; top: 150px; width: 560px; height: 440px; margin-left: -280px; animation: sl-c-wrap var(--T) linear infinite var(--start); }
.sl-net__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.sl-net__lines path { fill: none; stroke: #fff; stroke-opacity: .22; stroke-width: 1.5; stroke-dasharray: var(--len); stroke-dashoffset: 0; animation: sl-c-line var(--T) ease-out infinite; animation-delay: calc(var(--start) + var(--i) * .1s); }
.sl-net__lines path:nth-child(1) { --i: 0; } .sl-net__lines path:nth-child(2) { --i: 1; } .sl-net__lines path:nth-child(3) { --i: 2; }
.sl-net__lines path:nth-child(4) { --i: 3; } .sl-net__lines path:nth-child(5) { --i: 4; } .sl-net__lines path:nth-child(6) { --i: 5; }
.sl-net__card { position: absolute; width: 168px; display: grid; gap: 2px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px; background: #17284a; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); animation: sl-c-in var(--T) ease infinite, sl-c-float var(--fl, 7s) ease-in-out infinite alternate; animation-delay: calc(var(--start) + var(--fi) * .15s), calc(var(--fi) * -1.3s); }
.sl-net__site { left: 170px; top: 168px; width: 220px; padding: 12px 14px; background: #233a63; border-color: rgba(255, 255, 255, .28); animation: sl-c-in var(--T) ease infinite, sl-c-float 8s ease-in-out infinite alternate, sl-c-glow var(--T) ease-out infinite; animation-delay: var(--start), -2s, var(--start); }
.sl-net__eyebrow { font: 600 10px/14px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.sl-net__name { font: 600 13px/18px var(--font-sans); color: #fff; }
.sl-net__site .sl-net__name { font-size: 15px; line-height: 22px; }
.sl-net__sub { font-size: 11px; line-height: 16px; color: rgba(255, 255, 255, .72); }
.sl-swap { display: inline-grid; vertical-align: top; }
.sl-swap > span { grid-area: 1 / 1; }
.sl-swap__a { opacity: 0; animation: sl-c-swap-a var(--T) linear infinite var(--start); }
.sl-swap__b { animation: sl-c-swap-b var(--T) linear infinite var(--start); }
.sl-swap__a--site { animation-name: sl-c-swap-a2; }
.sl-swap__b--site { animation-name: sl-c-swap-b2; }
.sl-hl { border-radius: 3px; padding: 0 3px; margin: 0 -3px; animation: sl-c-hl var(--T) linear infinite var(--start); }
.sl-hl--site { animation-name: sl-c-hl2; }
.sl-net__pulse { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--sl-teal-light); box-shadow: 0 0 10px 2px rgba(108, 197, 201, .6); opacity: 0; --x1: 280px; --y1: 220px; animation: sl-c-p0 var(--T) ease-in-out infinite var(--start); }

@keyframes sl-c-wrap { 0%, 8.3% { opacity: 0; } 10%, 88.9% { opacity: 1; } 92.2%, 100% { opacity: 0; } }
@keyframes sl-c-in { 0%, 8.3% { opacity: 0; } 12%, 100% { opacity: 1; } }
@keyframes sl-c-float { from { transform: translateY(-3px); } to { transform: translateY(3px); } }
@keyframes sl-c-line { 0%, 11.1% { stroke-dashoffset: var(--len); } 16.7%, 100% { stroke-dashoffset: 0; } }
@keyframes sl-c-p0 { 0%, 17.78% { opacity: 0; transform: translate(var(--x0), var(--y0)); } 18.3% { opacity: 1; } 22.22% { opacity: 1; transform: translate(var(--x1), var(--y1)); } 22.5%, 100% { opacity: 0; transform: translate(var(--x1), var(--y1)); } }
@keyframes sl-c-p1 { 0%, 22.78% { opacity: 0; transform: translate(var(--x0), var(--y0)); } 23.3% { opacity: 1; } 27.22% { opacity: 1; transform: translate(var(--x1), var(--y1)); } 27.5%, 100% { opacity: 0; transform: translate(var(--x1), var(--y1)); } }
@keyframes sl-c-p2 { 0%, 27.78% { opacity: 0; transform: translate(var(--x0), var(--y0)); } 28.3% { opacity: 1; } 32.22% { opacity: 1; transform: translate(var(--x1), var(--y1)); } 32.5%, 100% { opacity: 0; transform: translate(var(--x1), var(--y1)); } }
@keyframes sl-c-p3 { 0%, 32.78% { opacity: 0; transform: translate(var(--x0), var(--y0)); } 33.3% { opacity: 1; } 37.22% { opacity: 1; transform: translate(var(--x1), var(--y1)); } 37.5%, 100% { opacity: 0; transform: translate(var(--x1), var(--y1)); } }
@keyframes sl-c-p4 { 0%, 37.78% { opacity: 0; transform: translate(var(--x0), var(--y0)); } 38.3% { opacity: 1; } 42.22% { opacity: 1; transform: translate(var(--x1), var(--y1)); } 42.5%, 100% { opacity: 0; transform: translate(var(--x1), var(--y1)); } }
@keyframes sl-c-p5 { 0%, 42.78% { opacity: 0; transform: translate(var(--x0), var(--y0)); } 43.3% { opacity: 1; } 47.22% { opacity: 1; transform: translate(var(--x1), var(--y1)); } 47.5%, 100% { opacity: 0; transform: translate(var(--x1), var(--y1)); } }
@keyframes sl-c-p6 { 0%, 57.2% { opacity: 0; transform: translate(var(--x0), var(--y0)); } 57.7% { opacity: 1; } 61.1% { opacity: 1; transform: translate(var(--x1), var(--y1)); } 61.4%, 100% { opacity: 0; transform: translate(var(--x1), var(--y1)); } }
@keyframes sl-c-glow {
  0%, 22.22% { box-shadow: 0 8px 24px rgba(0, 0, 0, .25), 0 0 0 0 rgba(108, 197, 201, 0); }
  23.4% { box-shadow: 0 8px 24px rgba(0, 0, 0, .25), 0 0 0 8px rgba(108, 197, 201, .35); }
  25.6%, 27.22% { box-shadow: 0 8px 24px rgba(0, 0, 0, .25), 0 0 0 0 rgba(108, 197, 201, 0); }
  28.4% { box-shadow: 0 8px 24px rgba(0, 0, 0, .25), 0 0 0 8px rgba(108, 197, 201, .35); }
  30.6%, 32.22% { box-shadow: 0 8px 24px rgba(0, 0, 0, .25), 0 0 0 0 rgba(108, 197, 201, 0); }
  33.4% { box-shadow: 0 8px 24px rgba(0, 0, 0, .25), 0 0 0 8px rgba(108, 197, 201, .35); }
  35.6%, 37.22% { box-shadow: 0 8px 24px rgba(0, 0, 0, .25), 0 0 0 0 rgba(108, 197, 201, 0); }
  38.4% { box-shadow: 0 8px 24px rgba(0, 0, 0, .25), 0 0 0 8px rgba(108, 197, 201, .35); }
  40.6%, 42.22% { box-shadow: 0 8px 24px rgba(0, 0, 0, .25), 0 0 0 0 rgba(108, 197, 201, 0); }
  43.4% { box-shadow: 0 8px 24px rgba(0, 0, 0, .25), 0 0 0 8px rgba(108, 197, 201, .35); }
  45.6%, 47.22% { box-shadow: 0 8px 24px rgba(0, 0, 0, .25), 0 0 0 0 rgba(108, 197, 201, 0); }
  48.4% { box-shadow: 0 8px 24px rgba(0, 0, 0, .25), 0 0 0 8px rgba(108, 197, 201, .35); }
  50.6%, 61.1% { box-shadow: 0 8px 24px rgba(0, 0, 0, .25), 0 0 0 0 rgba(108, 197, 201, 0); }
  62.3% { box-shadow: 0 8px 24px rgba(0, 0, 0, .25), 0 0 0 8px rgba(232, 163, 23, .45); }
  64.5%, 100% { box-shadow: 0 8px 24px rgba(0, 0, 0, .25), 0 0 0 0 rgba(232, 163, 23, 0); }
}
@keyframes sl-c-swap-a { 0%, 55.6% { opacity: 1; } 57%, 100% { opacity: 0; } }
@keyframes sl-c-swap-b { 0%, 55.6% { opacity: 0; } 57%, 100% { opacity: 1; } }
@keyframes sl-c-swap-a2 { 0%, 61.1% { opacity: 1; } 62.5%, 100% { opacity: 0; } }
@keyframes sl-c-swap-b2 { 0%, 61.1% { opacity: 0; } 62.5%, 100% { opacity: 1; } }
@keyframes sl-c-hl { 0%, 55.6% { background-color: transparent; } 57% { background-color: rgba(232, 163, 23, .35); } 66.7%, 100% { background-color: transparent; } }
@keyframes sl-c-hl2 { 0%, 61.1% { background-color: transparent; } 62.5% { background-color: rgba(232, 163, 23, .35); } 72%, 100% { background-color: transparent; } }

/* ════ D · Land to homes ════ */
.sl-auth--d { --T: 16s; --start: -12s; }
.sl-auth--d .sl-auth__panel { background: #14294a; }
.sl-d-sunglow { animation: sl-d-glow 9s ease-in-out infinite alternate; }
.sl-d-cloud { fill: #fff; fill-opacity: .1; animation: sl-d-drift var(--dur) linear infinite; }
.sl-d-hill--far { fill: #23395c; }
.sl-d-hill--mid { fill: #3a4a1e; }
.sl-d-hill--front { fill: #2e3a14; }
.sl-d-jib { transform-box: fill-box; transform-origin: 44px 20px; animation: sl-d-swing 14s ease-in-out infinite alternate; }
.sl-d-build { animation: sl-d-wrap var(--T) linear infinite var(--start); }
.sl-d-plot { fill: none; stroke: #fff; stroke-opacity: .55; stroke-width: 1.5; stroke-dasharray: var(--len); stroke-dashoffset: 0; animation: sl-d-plot var(--T) ease-in-out infinite var(--start); }
.sl-d-house { transform-box: fill-box; transform-origin: 50% 100%; animation: sl-d-rise var(--T) cubic-bezier(.3, 1.3, .5, 1) infinite; animation-delay: calc(var(--start) + var(--i) * .3s); }
.sl-d-win { fill: var(--color-warn-mark); animation: sl-d-win1 var(--T) linear infinite; animation-delay: calc(var(--start) + var(--i) * .18s); }
.sl-d-win--late { animation-name: sl-d-win2; animation-delay: calc(var(--start) + var(--i) * .15s); }

@keyframes sl-d-glow { from { opacity: .7; } to { opacity: 1; } }
@keyframes sl-d-drift { from { transform: translateX(var(--from)); } to { transform: translateX(var(--to)); } }
@keyframes sl-d-swing { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes sl-d-wrap { 0%, 9.4% { opacity: 0; } 11.25%, 87.5% { opacity: 1; } 91.25%, 100% { opacity: 0; } }
@keyframes sl-d-plot { 0%, 11.25% { stroke-dashoffset: var(--len); } 18.75%, 100% { stroke-dashoffset: 0; } }
@keyframes sl-d-rise { 0%, 20% { transform: scaleY(0); } 25%, 100% { transform: scaleY(1); } }
@keyframes sl-d-win1 { 0%, 46.9% { fill: #3d4a5c; } 48.5%, 100% { fill: #f59e0b; } }
@keyframes sl-d-win2 { 0%, 55% { fill: #3d4a5c; } 56.5%, 100% { fill: #f59e0b; } }

.sl-auth.sl-is-offscreen, .sl-auth.sl-is-offscreen *, .nf-board.sl-is-offscreen, .nf-board.sl-is-offscreen * { animation-play-state: paused !important; }

.sl-tone-good { --tone-mark: var(--color-good-mark); --tone-tint: var(--color-good-tint); --tone-text: var(--color-good-text); }
.sl-tone-warn { --tone-mark: var(--color-warn-mark); --tone-tint: var(--color-warn-tint); --tone-text: var(--color-warn-text); }
.sl-tone-crit { --tone-mark: var(--color-crit-mark); --tone-tint: var(--color-crit-tint); --tone-text: var(--color-crit-text); }
.sl-fn-bo { background: var(--color-fn-backoffice-tint); color: var(--color-fn-backoffice); }
.sl-fn-land { background: var(--color-fn-land-tint); color: var(--color-fn-land); }
.sl-fn-p { background: var(--color-fn-partnerships-tint); color: var(--color-fn-partnerships); }
.sl-fn-con { background: var(--color-fn-construction-tint); color: var(--color-fn-construction); }
.sl-fn-legal { background: var(--color-fn-legal-tint); color: var(--color-fn-legal); }
.sl-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 9999px; font: 600 12px/1 var(--font-sans); white-space: nowrap; }
.sl-chip--sm { height: 18px; padding: 0 6px; font-size: 10.5px; }
.sl-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 9999px; background: var(--tone-tint); color: var(--tone-text); font: 600 12px/1 var(--font-sans); white-space: nowrap; transition: background-color .4s, color .4s; }
.sl-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--tone-mark); transition: background-color .4s; }
.sl-stall { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 9999px; background: var(--color-crit-tint); color: var(--color-crit-text); font: 600 12px/1 var(--font-sans); white-space: nowrap; transition: opacity .35s, transform .35s; }
.sl-stall.sl-is-off { opacity: 0; transform: translateY(-4px); }
.sl-ring { position: relative; flex: none; width: 104px; height: 104px; }
.sl-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.sl-ring__track { fill: none; stroke: var(--color-gray-100); stroke-width: 10; }
.sl-ring__bar { fill: none; stroke: var(--tone-mark); stroke-width: 10; stroke-linecap: round; transition: stroke .4s; }
.sl-ring__num { position: absolute; inset: 0; display: grid; place-items: center; font: 600 32px/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--color-gray-900); }
.sl-ring--sm { width: 60px; height: 60px; }
.sl-ring--sm .sl-ring__track, .sl-ring--sm .sl-ring__bar { stroke-width: 12; }
.sl-ring--sm .sl-ring__num { font-size: 18px; }
.sl-avatar { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; font: 600 11px/1 var(--font-sans); }
.sl-toast { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 8px; background: var(--color-gray-900); color: #fff; font: 500 13px/18px var(--font-sans); white-space: nowrap; box-shadow: 0 12px 28px rgba(22, 32, 42, .28); opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; }
.sl-toast.sl-is-on { opacity: 1; transform: none; }

/* ════ E · Morning meeting (split-flap) ════ */
.sl-auth--e .sl-auth__panel { background: radial-gradient(ellipse 90% 60% at 30% 35%, #243445 0%, #18181b 62%, #0f171f 100%); }
.sl-fb { position: absolute; z-index: 1; left: 48px; top: 190px; display: grid; gap: 14px; padding: 20px; border: 1px solid #2a3644; border-radius: 10px; background: #0c1218; box-shadow: 0 24px 48px rgba(0, 0, 0, .35); }
.sl-fb__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sl-fb__title { font: 600 11px/16px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--color-warn-mark); }
.sl-fb__cols, .sl-fb__row { display: grid; grid-template-columns: 196px 178px 88px 10px; column-gap: 16px; align-items: center; }
.sl-fb__cols span { font: 600 10px/14px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: #7d8a99; }
.sl-fb__rows { display: grid; gap: 8px; }
.sl-fb__cells { display: flex; gap: 2px; }
.sl-flap { position: relative; display: grid; place-items: center; width: 16px; height: 26px; overflow: hidden; border-radius: 2px; background: linear-gradient(#253140 0 50%, #1d2834 50% 100%); color: #f3f5f8; font: 500 15px/1 var(--font-mono); }
.sl-flap::after { content: ''; position: absolute; left: 0; right: 0; top: calc(50% - .5px); height: 1px; background: rgba(0, 0, 0, .6); }
.sl-flap__ch { display: block; }
.sl-flap.sl-is-fa .sl-flap__ch { animation: sl-flap-a 90ms ease-out; }
.sl-flap.sl-is-fb .sl-flap__ch { animation: sl-flap-b 90ms ease-out; }
@keyframes sl-flap-a { from { transform: scaleY(.1); opacity: .5; } to { transform: none; opacity: 1; } }
@keyframes sl-flap-b { from { transform: scaleY(.1); opacity: .5; } to { transform: none; opacity: 1; } }
.sl-lamp { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #34414f; transition: background-color .3s, box-shadow .3s; }
.sl-lamp--crit { background: var(--color-crit-mark); box-shadow: 0 0 8px rgba(214, 69, 69, .75); }
.sl-lamp--warn { background: var(--color-warn-mark); box-shadow: 0 0 8px rgba(232, 163, 23, .6); }
.sl-lamp--good { background: var(--color-good-mark); box-shadow: 0 0 8px rgba(46, 158, 91, .6); }
.sl-fb__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-top: 4px; font-size: 11px; line-height: 16px; color: #9aa7b6; }
.sl-fb__legend span { display: inline-flex; align-items: center; gap: 6px; }
.sl-fb__legend .sl-lamp { width: 8px; height: 8px; box-shadow: none; }

/* ════ F · Health Score ════ */
.sl-auth--f .sl-auth__panel { background: linear-gradient(170deg, var(--color-gray-50) 0%, var(--color-gray-100) 100%); border-right: 1px solid var(--color-gray-200); }
.sl-hs { position: absolute; z-index: 1; left: 48px; top: 112px; width: 440px; }
.sl-hs__card { display: grid; gap: 16px; padding: 20px 22px 0; border: 1px solid var(--color-gray-200); border-radius: 8px; background: #fff; box-shadow: 0 8px 24px rgba(22, 32, 42, .08); overflow: hidden; }
.sl-hs__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sl-hs__name { font: 600 16px/24px var(--font-sans); }
.sl-hs__meta { font-size: 13px; line-height: 20px; color: var(--color-gray-500); }
.sl-hs__score { display: flex; align-items: center; gap: 20px; }
.sl-hs__status { display: grid; gap: 8px; justify-items: start; }
.sl-hs__caption { font: 600 11px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--color-gray-500); }
.sl-hs__rows { display: grid; margin: 0 -22px; }
.sl-hs__row { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 8px 22px; border-top: 1px solid var(--color-gray-100); transition: background-color .5s; }
.sl-hs__row.sl-is-changed { background: var(--color-primary-100); }
.sl-hs__label { font-size: 13px; line-height: 18px; font-weight: 600; }
.sl-hs__detail { font-size: 12px; line-height: 16px; color: var(--color-gray-500); }
.sl-hs__pts { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 600 14px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--color-gray-500); }
.sl-hs__pts.sl-is-neg { color: var(--color-crit-text); }
.sl-hs .sl-toast { position: absolute; right: -32px; bottom: -26px; }

/* ════ G · Handoff line (tube map) ════ */
.sl-auth--g .sl-auth__panel { background: #fff; border-right: 1px solid var(--color-gray-200); }
.sl-tube { position: absolute; z-index: 1; left: 48px; right: 48px; top: 100px; height: 470px; }
.sl-tube svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sl-tube__seg { fill: none; stroke-width: 8; stroke-linejoin: round; stroke-linecap: round; }
.sl-tube__st { fill: #fff; stroke: var(--color-gray-900); stroke-width: 3; }
.sl-tube__lbl { font: 500 11px var(--font-sans); fill: var(--color-gray-700); }
.sl-tube__note { font: italic 400 11px var(--font-sans); fill: var(--color-gray-500); }
.sl-tube__key { font: 500 11px var(--font-sans); fill: var(--color-gray-700); }
.sl-tube__keyhead { font: 600 10px var(--font-sans); letter-spacing: .08em; fill: var(--color-gray-500); }
.sl-train__halo { fill: var(--color-primary-600); fill-opacity: .18; }
.sl-train__dot { fill: var(--color-primary-600); stroke: #fff; stroke-width: 2.5; }
.sl-train__tag { fill: var(--color-gray-900); }
.sl-train__name { font: 600 11px var(--font-sans); fill: #fff; }

/* ════ H · Live app ════ */
.sl-auth--h .sl-auth__panel { background: radial-gradient(ellipse 70% 50% at 75% 18%, rgba(116, 193, 170, .22), transparent 70%), linear-gradient(155deg, #25574e 0%, #1e483f 55%, #153a33 100%); }
.sl-gl { position: absolute; z-index: 1; left: 50%; top: 112px; width: 520px; height: 480px; margin-left: -260px; perspective: 1800px; }
.sl-gl__plane { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(14deg) rotateY(-16deg) rotateZ(2deg); }
.sl-gl__card { position: absolute; display: grid; gap: 6px; padding: 14px 16px; border-radius: 8px; background: #fff; color: var(--color-gray-900); box-shadow: 0 18px 40px rgba(6, 20, 40, .35); transform: translateZ(var(--z, 0px)); animation: sl-gl-bob var(--b, 7s) ease-in-out infinite alternate; }
@keyframes sl-gl-bob { from { transform: translateZ(var(--z, 0px)) translateY(-4px); } to { transform: translateZ(var(--z, 0px)) translateY(4px); } }
.sl-gl__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sl-gl__name { font: 600 15px/22px var(--font-sans); }
.sl-gl__tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 4px; background: var(--color-gray-100); color: var(--color-gray-700); font: 600 11px/1 var(--font-sans); }
.sl-gl__eyebrow { font: 600 10.5px/14px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--color-gray-500); }
.sl-gl__big { font: 600 26px/32px var(--font-sans); font-variant-numeric: tabular-nums; }
.sl-gl__note { font-size: 12px; line-height: 16px; color: var(--color-gray-500); }
.sl-sb { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 4px; }
.sl-sb li { display: grid; gap: 6px; font-size: 10.5px; line-height: 14px; color: var(--color-gray-500); white-space: nowrap; }
.sl-sb li::before { content: ''; height: 6px; border-radius: 3px; background: var(--color-gray-200); transition: background-color .5s; }
.sl-sb li.sl-is-done::before { background: var(--color-primary-300); }
.sl-sb li.sl-is-current { color: var(--color-gray-900); font-weight: 600; }
.sl-sb li.sl-is-current::before { background: var(--color-primary-600); }
.sl-gl__health { display: flex; align-items: center; gap: 12px; }
.sl-gl__acts { list-style: none; padding: 0; display: grid; }
.sl-gl__acts li { display: grid; grid-template-columns: 16px auto 1fr auto; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--color-gray-100); font-size: 12.5px; line-height: 18px; }
.sl-ck { position: relative; width: 16px; height: 16px; border: 1.5px solid var(--color-gray-300); border-radius: 50%; transition: background-color .3s, border-color .3s; }
.sl-ck::after { content: ''; position: absolute; left: 4px; top: 1.5px; width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; transition: opacity .2s; }
.sl-is-done .sl-ck { background: var(--color-good-mark); border-color: var(--color-good-mark); }
.sl-is-done .sl-ck::after { opacity: 1; }
.sl-gl__act { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .3s; }
.sl-is-done .sl-gl__act { color: var(--color-gray-500); text-decoration: line-through; }
.sl-gl__due { font-size: 12px; color: var(--color-gray-500); }
.sl-is-done .sl-gl__due { color: var(--color-good-text); font-weight: 600; }
.sl-gl__toast { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; background: var(--color-gray-900); color: #fff; font: 500 13px/18px var(--font-sans); white-space: nowrap; opacity: 0; transition: opacity .35s; }
.sl-gl__toast.sl-is-on { opacity: 1; }

/* ── Logo proposals (logos/index.html) ──
   Twelve marks, every one at the same size: a 120 px tile with the mark at 72 px, so they can be
   compared side by side. A ground sets the ink (--lg-ink) and its own color (--lg-ground); a mark
   draws its main shape in currentColor and its knockouts in the ground, so one symbol serves the
   white and the navy ground. The function colors and the good green are lightened on navy, as the
   sign-in boards lighten the Land teal. */

.lg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.lg-ground {
  --lg-ink: var(--color-primary-600);
  --lg-ground: var(--color-white);
  --lg-ink-2: var(--color-primary-300);
  --lg-good: var(--color-good-mark);
  --lg-fn-backoffice: var(--color-fn-backoffice);
  --lg-fn-land: var(--color-fn-land);
  --lg-fn-partnerships: var(--color-fn-partnerships);
  --lg-fn-construction: var(--color-fn-construction);
  --lg-fn-legal: var(--color-fn-legal);
  background: var(--lg-ground);
}

.lg-ground--navy {
  --lg-ink: var(--color-white);
  --lg-ground: var(--color-primary-700);
  --lg-good: #5ccf86;
  --lg-fn-backoffice: #b9a6e6;
  --lg-fn-land: #6cc5c9;
  --lg-fn-partnerships: #e38ac0;
  --lg-fn-construction: #c6d36a;
  --lg-fn-legal: #b7c3d1;
  border-color: var(--color-primary-700);
  color: var(--color-white);
}

.lg-mark {
  display: block;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  color: var(--lg-ink);
}

.lg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 120px);
  gap: 20px 16px;
}

.lg-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px 16px;
}

.lg-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.lg-figure figcaption {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-gray-500);
  text-align: center;
}

.lg-tile {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
}

/* The mark beside the name, as the auth card sets them: 32 px and Semibold 18 */
.lg-tile--wide {
  grid-auto-flow: column;
  gap: 10px;
  width: auto;
  padding: 0 28px;
  font: 600 18px/28px var(--font-sans);
  color: var(--color-gray-900);
}

.lg-tile--wide .lg-mark {
  width: 32px;
  height: 32px;
}

/* All twelve at one of the app's sizes, in one row */
.lg-small {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
}

.lg-small--28 .lg-mark { width: 28px; height: 28px; }
.lg-small--16 .lg-mark { width: 16px; height: 16px; }

/* Where the app shows its mark: the sidebar (28 px), the auth card (32 px), the browser tab (16 px) */
/* The three boxes differ in height; their captions line up along the bottom */
.lg-places {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 20px 16px;
}

.lg-place {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
}

.lg-place--side {
  width: 240px;
  height: 72px;
  padding: 0 4px;
}

.lg-place--side .brand {
  height: 40px;
  padding: 0 12px;
}

.lg-place--side .lg-mark { width: 28px; height: 28px; }

.lg-place--auth {
  gap: 10px;
  height: 72px;
  padding: 0 32px;
  box-shadow: var(--shadow-card);
  font: 600 18px/28px var(--font-sans);
  color: var(--color-gray-900);
}

.lg-place--auth .lg-mark { width: 32px; height: 32px; }

.lg-place--tab {
  --lg-ground: var(--color-gray-100);
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-gray-700);
}

.lg-place--tab .lg-mark { width: 16px; height: 16px; }

@media (max-width: 560px) {
  .lg-grid {
    grid-template-columns: repeat(auto-fill, 100px);
  }

  .lg-tile {
    width: 100px;
    height: 100px;
  }

  .lg-tile .lg-mark {
    width: 60px;
    height: 60px;
  }

  .lg-tile--wide {
    width: 100%;
    justify-content: center;
  }
}

/* ── Not found page (notFound/index.html) ──
   Each board is a 1280 × 800 screen like the sign-in boards, in the same frame with the same Pause,
   Restart and Full size (assets/signInLayouts.js): the app shell with the Not found page in its page
   area. The pictures move in CSS alone. --T is the loop and --start puts the first frame at the end
   of the loop, so a screenshot shows the picture finished; Restart sets --start to 0. Every animated
   group's resting values are the end of the loop, which is also what reduced motion shows. */

.nf-board {
  --T: 12s;
  --start: -11s;
  height: 100%;
  overflow: hidden;
  background: var(--color-gray-50);
  color: var(--color-gray-900);
  font: 400 14px/20px var(--font-sans);
}

.nf-board .shell {
  height: 100%;
  min-height: 0;
}

.nf-board .shell__page {
  flex-grow: 1;
  justify-content: center;
}

/* The app's page today: the text alone, 560 wide, 64 px under the top bar (32 of them the page's padding) */
.nf-board--today .shell__page {
  justify-content: flex-start;
}

.nf-today {
  width: 100%;
  max-width: 560px;
  margin: 32px auto 0;
}

/* Signed out: the auth layout, the card alone on gray-50 */
.nf-board--auth {
  display: grid;
  place-items: center;
}

.nf-board--auth .authcard {
  width: 440px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}

/* A proposal: the picture on the left, the page's text on the right */
.nf-page {
  display: grid;
  grid-template-columns: 500px minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  width: 100%;
  max-width: 1020px;
  margin: 0 auto;
}

.nf-art {
  display: block;
  width: 100%;
  height: auto;
}

.nf-art text {
  font-family: var(--font-sans);
}

.nf-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 560px;
}

.nf-text__code {
  font: 500 14px/20px var(--font-mono);
  color: var(--color-gray-500);
}

.nf-text h1 {
  margin: 0;
  font-size: 28px;
  line-height: 36px;
  font-weight: 600;
}

.nf-text p {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-gray-700);
}

.nf-text__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.nf-text__rule {
  width: 100%;
  height: 1px;
  background: var(--color-gray-200);
}

.nf-text__foot {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-gray-500);
}

/* Full size on a narrow window: the text under the picture, then no sidebar */
@container (max-width: 1100px) {
  .nf-page {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    max-width: 560px;
  }
}

@container (max-width: 760px) {
  .nf-board .shell__side {
    display: none;
  }
}

@keyframes nf-wrap { 0%, 6% { opacity: 0; } 9%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }

/* ── Empty plot: the boundary draws itself, the pin drops, the label slides in ── */
.nf-plot__draw { animation: nf-wrap var(--T) linear infinite var(--start); }
.nf-plot__plot { fill: var(--color-primary-600); fill-opacity: .06; stroke: var(--color-primary-600); stroke-width: 2.5; stroke-linejoin: round; stroke-dasharray: var(--len); stroke-dashoffset: 0; animation: nf-plot-draw var(--T) ease-in-out infinite var(--start); }
.nf-plot__shadow { opacity: .25; animation: nf-plot-shadow var(--T) linear infinite var(--start); }
.nf-plot__pin { animation: nf-plot-pin var(--T) ease-out infinite var(--start); }
.nf-plot__label { animation: nf-plot-label var(--T) ease-out infinite var(--start); }
@keyframes nf-plot-draw { 0%, 12% { stroke-dashoffset: var(--len); fill-opacity: 0; } 42% { stroke-dashoffset: 0; fill-opacity: 0; } 50%, 100% { stroke-dashoffset: 0; fill-opacity: .06; } }
@keyframes nf-plot-shadow { 0%, 56% { opacity: 0; } 60%, 100% { opacity: .25; } }
@keyframes nf-plot-pin { 0%, 52% { transform: translateY(-44px); opacity: 0; } 58% { transform: translateY(3px); opacity: 1; } 60%, 100% { transform: translateY(0); opacity: 1; } }
@keyframes nf-plot-label { 0%, 62% { opacity: 0; transform: translateX(-6px); } 68%, 100% { opacity: 1; transform: translateX(0); } }

/* ── Signpost: the clouds drift, the loose arm swings on its one nail ── */
.nf-sign__cloud { animation: nf-sign-cloud 16s ease-in-out infinite alternate; }
.nf-sign__cloud--b { animation-duration: 22s; animation-delay: -8s; }
.nf-sign__loose { transform-origin: 0 0; transform: rotate(25deg); animation: nf-sign-swing 2.6s ease-in-out infinite alternate; }
@keyframes nf-sign-cloud { from { transform: translateX(-18px); } to { transform: translateX(18px); } }
@keyframes nf-sign-swing { from { transform: rotate(20deg); } to { transform: rotate(30deg); } }

/* ── Not a stage: the rail fills and each dot lights as it is passed; the odd one shakes its head ── */
.nf-stage__rail { fill: none; stroke: var(--color-primary-600); stroke-width: 4; stroke-linecap: round; stroke-dasharray: var(--len); stroke-dashoffset: 0; animation: nf-stage-rail var(--T) linear infinite var(--start); }
.nf-stage__dot { fill: var(--color-primary-600); stroke: var(--color-primary-600); stroke-width: 3; animation: nf-stage-dot var(--T) linear infinite; animation-delay: calc(var(--start) + var(--i) * 0.06 * var(--T)); }
.nf-stage__lost { animation: nf-stage-shake var(--T) ease-in-out infinite var(--start); }
@keyframes nf-stage-rail { 0%, 10% { stroke-dashoffset: var(--len); } 70%, 100% { stroke-dashoffset: 0; } }
@keyframes nf-stage-dot { 0%, 11.5% { fill: var(--color-white); } 12.5%, 100% { fill: var(--color-primary-600); } }
@keyframes nf-stage-shake { 0%, 76% { transform: translateX(0); } 77.5% { transform: translateX(-5px); } 79% { transform: translateX(5px); } 80.5% { transform: translateX(-4px); } 82% { transform: translateX(3px); } 83.5%, 100% { transform: translateX(0); } }

/* ── Lost record: every record floats a little; the broken link's dashes run ── */
.nf-rec__node { animation: nf-rec-float 4s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.9s); }
.nf-rec__lost { animation: nf-rec-float 3s ease-in-out infinite alternate; }
.nf-rec__broken { fill: none; stroke: var(--color-gray-300); stroke-width: 2; stroke-dasharray: 6 6; animation: nf-rec-march 1.6s linear infinite; }
@keyframes nf-rec-float { from { transform: translateY(-3px); } to { transform: translateY(3px); } }
@keyframes nf-rec-march { to { stroke-dashoffset: -24; } }

/* ── Fog on the field: the stars breathe, three bands of fog drift at their own pace ── */
.nf-fog__star { animation: nf-fog-twinkle 3s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.7s); }
.nf-fog__band { animation: nf-fog-drift 14s ease-in-out infinite alternate; }
.nf-fog__band--b { animation-duration: 19s; animation-delay: -6s; }
.nf-fog__band--c { animation-duration: 11s; animation-delay: -3s; }
@keyframes nf-fog-twinkle { from { opacity: .3; } to { opacity: 1; } }
@keyframes nf-fog-drift { from { transform: translateX(-40px); } to { transform: translateX(40px); } }

/* ── Crane: the trolley runs out along the jib, the hook comes down, the digit swings and settles ── */
.nf-crane__load { animation: nf-crane-load var(--T) ease-in-out infinite var(--start); }
.nf-crane__hook { animation: nf-crane-hook var(--T) ease-in-out infinite var(--start); }
.nf-crane__digit { transform-origin: 0 0; animation: nf-crane-swing var(--T) ease-in-out infinite var(--start); }
@keyframes nf-crane-load { 0%, 16% { transform: translateX(-120px); } 50%, 100% { transform: translateX(0); } }
@keyframes nf-crane-hook { 0%, 48% { transform: translateY(-110px); } 84%, 100% { transform: translateY(0); } }
@keyframes nf-crane-swing { 0%, 16% { transform: rotate(0deg); } 28% { transform: rotate(5deg); } 42% { transform: rotate(-4deg); } 56% { transform: rotate(3deg); } 70% { transform: rotate(-1.5deg); } 82%, 100% { transform: rotate(0deg); } }

/* ── Illustrations (illustrations/index.html) ──
   Spot pictures for the app's empty, all-clear, error and done states, drawn once each on a
   200 × 140 grid in the app's tokens: a 2 px line in the action green, the primary and Land tints for
   fills, grays for what is missing. Still pictures: a state is read, not watched. The parts of a
   picture carry classes (il-paper, il-tint, il-dash …) styled here, so one symbol serves every
   place and size on the page. */

.il-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.il-spot {
  display: block;
  flex-shrink: 0;
  width: 200px;
  height: 140px;
  color: var(--color-primary-600);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.il-spot--sm {
  width: 140px;
  height: 98px;
}

.il-paper { fill: var(--color-white); }
.il-tint { fill: var(--color-primary-100); }
.il-land { fill: var(--color-fn-land-tint); stroke: var(--color-fn-land); }
.il-soft { stroke: var(--color-gray-300); }
.il-dash { stroke: var(--color-gray-300); stroke-dasharray: 4 4; }
.il-good { stroke: var(--color-good-mark); }
.il-good-fill { fill: var(--color-good-tint); stroke: var(--color-good-mark); }
.il-crit { stroke: var(--color-crit-mark); }
.il-crit-fill { fill: var(--color-crit-tint); stroke: var(--color-crit-mark); }
.il-warn-fill { fill: var(--color-warn-mark); stroke: none; }
.il-ink-fill { fill: currentColor; stroke: none; }
.il-text { fill: var(--color-gray-500); stroke: none; font: 600 10px/1 var(--font-sans); }

.il-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  gap: 24px 16px;
}

.il-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.il-figure figcaption {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-gray-500);
  text-align: center;
}

/* One case: the state in its place, then where it is, what the app says today, what is proposed */
.il-cases {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 24px;
}

.il-case {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.il-case__title {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.il-case .table-wrap,
.il-case .card {
  width: 100%;
}

.il-case .table th {
  white-space: nowrap;
}

/* The empty state itself: the picture, a sentence, sometimes a button */
.il-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 16px;
  text-align: center;
  color: var(--color-gray-700);
}

.il-empty p {
  margin: 0;
  max-width: 320px;
}

.il-empty .t-caption {
  color: var(--color-gray-500);
}

.il-card-empty {
  padding: 20px;
}

/* A whole page area, for the page that could not be loaded */
.il-page {
  padding: 40px 32px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-gray-50);
}

.il-notes {
  display: grid;
  gap: 4px;
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-gray-500);
}

.il-notes div {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 8px;
}

.il-notes dt {
  font-weight: 600;
  color: var(--color-gray-700);
}

.il-notes dd {
  margin: 0;
}

.il-notes code {
  font-size: 11px;
}

@media (max-width: 560px) {
  .il-cases {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A Not found proposal carries no shell: the brand mark top left, the picture and the text centered */
.nf-board--bare {
  display: flex;
  flex-direction: column;
  padding: 24px 40px 40px;
}

.nf-bare__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 18px/28px var(--font-sans);
  color: var(--color-gray-900);
}

.nf-bare__body {
  display: grid;
  flex-grow: 1;
  place-items: center;
  min-height: 0;
}

/* ── Hatch Farm walkthrough (flows/hatchFarm.html) ──
   The twelve-step demo as full pages of the app, for show only: the shell with a page in its area,
   built from the site's components. Nothing on a screen works; the one control that leads to the
   next screen carries hf-go. The step rail above the board is marked by demo.js. */

.steprail {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steprail li {
  flex: 1 1 0;
  min-width: 0;
}

/* The current step gets a little more room than the others */
.steprail li:has(.is-current) {
  flex-grow: 1.6;
}

.steprail__step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  width: 100%;
  padding: 6px 8px 8px;
  border: 0;
  border-top: 2px solid var(--color-gray-200);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: none;
  font: inherit;
  text-align: left;
  color: var(--color-gray-700);
  cursor: pointer;
}

.steprail__step:hover {
  background: var(--color-gray-100);
}

.steprail__step.is-current {
  border-top-color: var(--color-primary-600);
  background: var(--color-primary-100);
  color: var(--color-primary-700);
}

.steprail__num {
  flex-shrink: 0;
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-gray-500);
}

.steprail__step.is-current .steprail__num {
  color: var(--color-primary-700);
}

.steprail__title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.steprail__step .chip {
  height: 18px;
  padding: 0 6px;
  font-size: 10px;
}

/* A walkthrough's step: the number and the role on one line, the title under them */
.steprail__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

@media (max-width: 900px) {
  .steprail {
    flex-wrap: wrap;
  }

  .steprail li {
    flex-basis: 23%;
  }
}

/* The frame's bar names who is signed in on that screen */
.hf-chrome__user {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-gray-500);
}

/* The pages */
.hf-screen .shell {
  min-height: 0;
}

.hf-screen .shell__page {
  gap: 24px;
}

.hf-crumb {
  display: flex;
  gap: 6px;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-gray-500);
}

/* The breadcrumbs proper, above a record page's header: a dashboard's eyebrow keeps the small line above */
nav.hf-crumb {
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
}

nav.hf-crumb > span:last-child {
  color: var(--color-gray-900);
  font-weight: 500;
}

nav.hf-crumb .icon {
  color: var(--color-gray-400);
}

.hf-crumb a {
  color: var(--color-gray-500);
}

.hf-head {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 24px;
}

.hf-head__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.hf-head__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.hf-head__title h1,
.hf-page-title {
  margin: 0;
  font-size: 28px;
  line-height: 36px;
  font-weight: 600;
}

.hf-head__moves {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}

.hf-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 24px;
  margin: 0;
}

/* No rule above the header facts, a thin rule between them (the design concept, like .facts) */
.hf-facts > * + * {
  padding-left: 24px;
  border-left: 1px solid var(--color-gray-200);
}

.hf-facts--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0;
  border: 0;
}

.hf-facts--6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.hf-stage {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hf-stage__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.hf-stage h2 {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.hf-stage__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-gray-500);
}

.hf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}

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

.hf-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.hf-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
}

.hf-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background: var(--color-gray-50);
}

.hf-form__row,
.hf-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.hf-form__actions {
  display: flex;
  gap: 8px;
}

.hf-timeline {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hf-timeline li {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-gray-100);
}

.hf-timeline li:last-child {
  border-bottom: 0;
}

.hf-timeline time {
  font-size: 12px;
  line-height: 20px;
  color: var(--color-gray-500);
}

.hf-timeline__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* The author's initials lead a timeline row (lead-detail/ActivityTimeline.tsx, after the design concept) */
.hf-timeline__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}

.hf-timeline__notes {
  margin: 4px 0 0;
  color: var(--color-gray-700);
}

.hf-muted {
  color: var(--color-gray-500);
}

.hf-value {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}

.hf-pair {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hf-side-head {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  color: var(--color-gray-500);
}

.hf-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hf-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-gray-100);
}

.hf-list li:last-child {
  border-bottom: 0;
}

.hf-list__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.hf-funnel {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 48px 80px;
  gap: 10px 12px;
  align-items: center;
  margin: 0;
}

.hf-funnel__bar {
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-primary-100);
}

.hf-funnel__bar i {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-primary-600);
}

/* The league table's health: a thin bar for the score before its chip (dashboard/executive-cards.tsx) */
.hf-health {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.hf-health__bar {
  width: 80px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-gray-100);
}

.hf-health__bar i {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-good-mark);
}

.hf-health__bar--warn i { background: var(--color-warn-mark); }
.hf-health__bar--crit i { background: var(--color-crit-mark); }

.hf-popover {
  position: relative;
}

.hf-popover .breakdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 5;
  width: 384px;
}

/* The one control on a screen that leads to the next one */
.hf-go {
  position: relative;
  box-shadow: 0 0 0 3px var(--color-white), 0 0 0 6px var(--color-focus);
  animation: hf-go 1.6s ease-in-out infinite;
}

@keyframes hf-go {
  50% { box-shadow: 0 0 0 3px var(--color-white), 0 0 0 10px rgba(47, 111, 208, 0.3); }
}

@media (prefers-reduced-motion: reduce) {
  .hf-go { animation: none; }
}

/* Fixes after the first look: action rows in narrow cards, the breakdown popover, row buttons, the new tab tag */
.hf-popover {
  position: relative;
  display: inline-block;
}

.hf-popover .breakdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 5;
  width: 384px;
  max-width: none;
}

.hf-screen .tab {
  white-space: nowrap;
}

.hf-new {
  margin-left: 6px;
  vertical-align: 1px;
}

.hf-cell-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  white-space: nowrap;
}

.hf-cell-actions .btn {
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
}

.hf-go-text {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
}

.hf-action {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-gray-100);
}

.hf-action:last-child {
  border-bottom: 0;
}

.hf-action__text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.hf-action__due {
  font-size: 12px;
  line-height: 20px;
  white-space: nowrap;
  color: var(--color-gray-500);
}

/* The Buyers and Contractors tables have eight columns: tighter type and padding so they fit the page area */
.hf-tight .table {
  font-size: 12px;
  line-height: 16px;
}

.hf-tight .table th,
.hf-tight .table td {
  padding: 8px 10px;
}

.hf-tight .chip {
  white-space: nowrap;
}

.hf-screen .tabs .hf-new {
  align-self: center;
  margin: 0 8px 0 -6px;
}

.hf-screen .tabs .hf-new {
  position: relative;
  z-index: 1;
}

/* The flow stepper's screen list is the site's dropdown; it takes the room between the arrows */
.demo-bar__stepper .select-wrap {
  flex: 1 1 auto;
  min-width: 280px;
  max-width: 560px;
}

/* Every flow shows where the reader is: a rail of its screens above the bar (a walkthrough brings its
   own rail of steps), and the arrows named after the screens they lead to */
/* A flow of plain screens: one line per step, the number and the title; a long title is cut */
.steprail--screens .steprail__step {
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  padding: 6px 8px;
}

.steprail--screens .steprail__title {
  display: block;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.steprail--screens .steprail__step.is-current .steprail__title {
  font-weight: 600;
}

/* The bar and the rail as one block, closer to the screen than the page's other blocks */
.demo-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.demo-head + .board {
  margin-top: -20px;
}

.demo-bar__stepper .demo-bar__nav {
  width: auto;
  max-width: 280px;
  padding: 0 12px;
  gap: 8px;
}

.demo-bar__name {
  overflow: hidden;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--color-gray-700);
}

.demo-bar__nav:disabled .demo-bar__name {
  color: inherit;
}

.demo-bar__arrow {
  flex-shrink: 0;
}

/* A role chip never runs into the next step */
.steprail__meta {
  overflow: hidden;
}

.steprail__meta .chip {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Full screen for a flow's screen (demo.js): a layer over the page with the same previous / next ── */
html.demo-locked {
  overflow: hidden;
}

.demo-full {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: var(--color-gray-900);
}

.demo-full[hidden] {
  display: none;
}

.demo-full__bar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 16px;
  border-bottom: 1px solid var(--color-gray-200);
  background: var(--color-white);
}

.demo-full__nav {
  width: var(--size-control);
  padding: 0;
}

.demo-full__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.demo-full__count {
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  color: var(--color-gray-500);
}

.demo-full__body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 24px;
}

.demo-full__stage {
  width: min(100%, 1280px);
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

/* The button in a frame's bar */
.demo-full__open {
  height: 28px;
  margin-left: auto;
  padding: 0 10px;
  font-size: 12px;
  line-height: 16px;
}

.hf-chrome__user + .demo-full__open {
  margin-left: 12px;
}

/* In the layer the frame stands alone: no border of its own, and no second Full screen button */
.demo-full__stage .frame {
  border: 0;
  border-radius: 0;
}

.demo-full__stage .demo-full__open {
  display: none;
}