/* SurveyNest brand tokens, 29 Sep 2026.
   Colours: the SurveyNest brand kit, page 02 (posted in the Surveys LTD group, 08:13). Type and edges: the owner's picks on
   the choices board (logo B, type T3, sharpened edges, the name as one word). Fonts sit beside this file (SIL OFL 1.1). */
@font-face{font-family:"Archivo";src:url("fonts/Archivo-Variable.woff2") format("woff2-variations"),url("fonts/Archivo-Variable.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/IBMPlexSans-Variable.woff2") format("woff2-variations"),url("fonts/IBMPlexSans-Variable.woff2") format("woff2");font-weight:100 700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/IBMPlexMono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/IBMPlexMono-500.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  /* Brand. Teal carries the brand; Signal is a spark for lines, nodes and highlights, never body text on light. */
  --sn-teal:#1F5C5B;          /* primary: buttons, headings, the logo, report rules */
  --sn-deep-teal:#0F2E2D;     /* dark grounds, report cover shade */
  --sn-signal:#14B8A6;        /* accent on light */
  --sn-signal-light:#2DD4BF;  /* accent on dark */
  /* Neutrals. Mostly Mist and Ink. */
  --sn-mist:#EAEEEC;          /* app background */
  --sn-card:#F8F9F6;          /* cards, inputs */
  --sn-line:#C9CFC9;          /* borders, dividers */
  --sn-muted:#5D6A70;         /* secondary text */
  --sn-ink:#1F2A33;           /* body text */
  /* Condition ratings: functional, never decorative. They appear only on ratings. */
  --sn-urgent:#C2412D;        /* 3 Urgent */
  --sn-repair:#C99416;        /* 2 Repair (use Ink text on it) */
  --sn-no-repair:#3C8C5A;     /* 1 No repair */
  --sn-not-inspected:#8A938F; /* NI */
  /* Type. The name and headings in Archivo, wide and bold; text in IBM Plex Sans; readings, dates and refs in Plex Mono. */
  --sn-font-display:"Archivo","IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sn-display-stretch:118%;
  --sn-display-weight:750;
  --sn-font-text:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sn-font-data:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --sn-h1:44px; --sn-h2:24px; --sn-body:16px; --sn-data:12px;
  /* Sharpened edges */
  --sn-radius:2px;            /* corners (the kit's 12px, cut) */
  --sn-hairline:1px;          /* rules and borders */
  --sn-active-edge:3px;       /* a Signal edge on the active panel */
}

.sn-display{font-family:var(--sn-font-display);font-stretch:var(--sn-display-stretch);font-weight:var(--sn-display-weight);letter-spacing:-.01em}
.sn-wordmark{font-family:var(--sn-font-display);font-stretch:var(--sn-display-stretch);font-weight:var(--sn-display-weight);letter-spacing:.01em}
.sn-data{font-family:var(--sn-font-data);font-weight:500}
/* The measuring scale: a quiet graphic detail under a panel or a rule. Colour it with `color`. */
.sn-scale{height:10px;opacity:.5;background:
  repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 8px) bottom/100% 5px no-repeat,
  repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 40px) bottom/100% 10px no-repeat}

/* Web additions, 29 Sep 2026 (from the landing page, survey-nest-site/). Additive: nothing above changes.
   Contrast on Deep teal #0F2E2D by the WCAG 2 formula: Card 13.7:1, Signal light 7.8:1, on-dark muted 9.2:1. */
:root{
  --sn-on-dark:#F8F9F6;        /* text on Deep teal (the Card colour) */
  --sn-on-dark-muted:#B9D3CD;  /* secondary text on Deep teal */
  --sn-line-on-dark:#2B5553;   /* hairlines on Deep teal */
  --sn-display-web:clamp(40px, 12px + 5.2vw, 88px); /* a web hero may set a headline larger than the app's H1 44 */
  --sn-ease:cubic-bezier(.22,1,.36,1);              /* one ease-out for every move; never a bounce */
  --sn-focus:#1F5C5B;          /* keyboard focus ring on light: 2 px, 2 px clear of the element */
  --sn-focus-on-dark:#2DD4BF;  /* keyboard focus ring on Deep teal */
  --sn-radius-pill:999px;      /* buttons are pills (the owner, 29 Sep 2026); every other corner keeps --sn-radius */
}
/* Status tags: every feature shown says where it stands, In pilot or Coming (docs/product/goal-prompts/feature-status.md).
   In pilot: a filled survey point. Coming: a hollow point and a dashed edge. Put tags on Deep teal inside .sn-on-dark. */
.sn-status{display:inline-flex;align-items:center;gap:6px;padding:3px 7px;border:1px solid currentColor;border-radius:var(--sn-radius);font:500 12px/1.2 var(--sn-font-data);white-space:nowrap}
.sn-status::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;border:1.5px solid currentColor;box-sizing:border-box}
.sn-status--pilot{color:var(--sn-teal);background:var(--sn-card)}
.sn-status--pilot::before{background:var(--sn-signal);border-color:var(--sn-signal)}
.sn-status--coming{color:var(--sn-muted);border-style:dashed}
.sn-on-dark .sn-status--pilot{color:var(--sn-signal-light);background:transparent}
.sn-on-dark .sn-status--pilot::before{background:var(--sn-signal-light);border-color:var(--sn-signal-light)}
.sn-on-dark .sn-status--coming{color:var(--sn-on-dark-muted)}
/* The measuring line: the mark's dashed Signal line with arrow ends (dash to gap 3 : 2.2, as in logo/mark.svg), used as a
   rule, a scan line or a progress line. Size it with width; colour it with color (Signal on light, Signal light on dark). */
.sn-measure{position:relative;height:9px;color:var(--sn-signal);
  background:repeating-linear-gradient(90deg,currentColor 0 6px,transparent 6px 10.4px) center/calc(100% - 14px) 2px no-repeat}
.sn-measure::before,.sn-measure::after{content:"";position:absolute;top:0;width:8px;height:9px;background:currentColor}
.sn-measure::before{left:0;clip-path:polygon(0 50%,100% 0,100% 100%)}
.sn-measure::after{right:0;clip-path:polygon(0 0,100% 50%,0 100%)}