@import url("/css/tokens.css");

/* Design values come from tokens. Implementation mechanics (1fr, z-index,
   opacity) stay as written. Nothing here hard-codes a colour, a font stack,
   a spacing step or a line height. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--signal); text-underline-offset: 3px; }
a:focus-visible, .ns-btn:focus-visible, .ns-skip:focus-visible,
input:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-none);
}

img, svg { max-width: 100%; }

.ns-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.ns-skip {
  position: absolute; left: -9999px;
  background: var(--signal-fill); color: var(--on-signal);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-mono);
}
.ns-skip:focus { left: var(--space-5); top: var(--space-3); z-index: 2; }

/* ------------------------------------------------------------ page frame */

.ns-meta {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  justify-content: space-between; align-items: center;
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted);
}
.ns-meta__fields { display: flex; flex-wrap: wrap; gap: var(--space-5); }
/* No nav below tablet: five sections on one page don't earn a menu. */
.ns-meta__nav { display: none; }
.ns-meta__nav a { color: var(--ink-muted); text-decoration: none; }
.ns-meta__nav a:hover, .ns-meta__nav a[aria-current] { color: var(--ink); }

.ns-rev {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-top: var(--stroke-hairline) solid var(--rule);
  color: var(--ink-muted);
}
.ns-rev__domain { display: none; }

/* ------------------------------------------------------------------ hero */

.ns-hero {
  display: flex; flex-direction: column; gap: var(--space-6);
  padding: var(--space-5) var(--space-5) var(--space-8);
}

.ns-plate {
  border: var(--stroke-plate) solid var(--rule-strong);
  border-radius: var(--radius-none);
  padding: var(--space-4) var(--space-3) var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-3);
  min-width: var(--plate-min); max-width: 342px;
}
.ns-plate__mark { margin: 0; line-height: 0; }
.ns-plate__mark svg { display: block; width: 100%; height: auto; color: var(--ink); }
.ns-plate__rule { height: var(--stroke-hairline); background: var(--rule); }
.ns-plate__tag {
  margin: 0; font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.4;
  letter-spacing: 0.02em; color: var(--signal);
}

.ns-hero__pitch { display: flex; flex-direction: column; gap: var(--space-6); align-items: flex-start; }
.ns-hero__lede { max-width: 32ch; }

/* --------------------------------------------------------------- sections */

.ns-section {
  margin: 0 var(--space-5);
  padding: var(--space-5) 0 var(--space-8);
  border-top: var(--stroke-hairline) solid var(--rule-strong);
}
.ns-section--lead { border-top: 0; }

/* Contextual parent nav on service/problem pages. Mobile shows only the
   linked parent with an arrow; the separator and current-page label are
   tablet-and-up, once there's room to show the full "PARENT / CURRENT". */
.ns-crumb { margin: var(--space-5) var(--space-5) 0; color: var(--ink-muted); text-transform: uppercase; }
.ns-crumb__parent { color: var(--signal); text-decoration: none; }
.ns-crumb__parent:hover { text-decoration: underline; }
.ns-crumb__sep, .ns-crumb__current { display: none; }

.ns-label { display: block; color: var(--ink-muted); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; }
.ns-label__dot { padding: 0 0.15em; }

.ns-heading {
  margin: var(--space-4) 0 var(--space-4);
  font-size: 1.4375rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em;
  max-width: 24ch;
}

.ns-lede { margin: 0; font-size: 1.1875rem; line-height: 1.5; color: var(--ink); }
/* Interior lead sections (service, problem): the lede and the prose that
   follows it are two different statements, but neither carries its own
   spacing, so they were rendering as one continuous paragraph. Scoped here
   rather than on .ns-lede itself, which the hero also uses inside a flex
   container that already provides its own gap. */
.ns-section--lead .ns-lede { margin-bottom: var(--space-4); }

.ns-prose { max-width: var(--measure-prose); display: flex; flex-direction: column; gap: var(--space-4); }
.ns-prose p { margin: 0; color: var(--ink-body); }

.ns-note { margin: var(--space-4) 0 0; color: var(--ink-muted); }

.ns-list { margin: 0; padding-left: 1.2em; max-width: var(--measure-prose); color: var(--ink-body); }
.ns-list li + li { margin-top: var(--space-2); }
.ns-list--links { list-style: none; padding-left: 0; }
.ns-list--steps { color: var(--ink-body); }

/* ------------------------------------------------ engagement models table */

.ns-models { display: flex; flex-direction: column; border-top: var(--stroke-hairline) solid var(--rule-strong); }
.ns-models__row {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4) 0;
  border-bottom: var(--stroke-hairline) solid var(--rule);
}
.ns-models__row:last-child { border-bottom-color: var(--rule-strong); }
.ns-models__id { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
/* Service names are names, not metadata: 14px rather than the 12px t-service step. */
.ns-models__name,
.ns-table__name,
.ns-model-label,
.ns-route__name { font-size: 0.875rem; line-height: 1.3; }
.ns-models__name { color: var(--signal); text-transform: uppercase; text-decoration: none; }
.ns-models__name:hover { text-decoration: underline; }
.ns-models__label { color: var(--ink-muted); }
.ns-models__blurb { margin: 0; color: var(--ink-body); max-width: var(--measure-prose); }

.ns-table { display: flex; flex-direction: column; border-top: var(--stroke-hairline) solid var(--rule-strong); }
.ns-table__row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  padding: var(--space-4) 0; border-bottom: var(--stroke-hairline) solid var(--rule);
}
.ns-table__row:last-child { border-bottom-color: var(--rule-strong); }
.ns-table__name { color: var(--signal); text-transform: uppercase; white-space: nowrap; }
.ns-table__desc { color: var(--ink-muted); text-align: right; }
/* Current entry in the other-models nav: named but not linked, set in ink
   rather than signal so it reads as "you are here", not as a target. */
.ns-table__row--current .ns-table__name { color: var(--ink); }
.ns-table__current { margin-left: var(--space-2); color: var(--ink-muted); }
/* Other-models nav on mobile: name and Current tag on the first line, the
   tagline below it at full width and left-aligned. Scoped to --stack so the
   shared .ns-table rows elsewhere are untouched; desktop restores the row. */
.ns-table--stack .ns-table__row { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.ns-table--stack .ns-table__desc { text-align: left; }

/* ------------------------------------------------------- examples register */

.ns-register { display: grid; gap: 0; border-top: var(--stroke-hairline) solid var(--rule-strong); }
.ns-register__row {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-4) 0; border-bottom: var(--stroke-hairline) solid var(--rule);
}
.ns-register__title { font-weight: 500; }
.ns-register__gloss { color: var(--ink-muted); }

/* -------------------------------------------------------------- spec list */

.ns-spec { margin: var(--space-6) 0 0; border-top: var(--stroke-hairline) solid var(--rule-strong); }
.ns-spec__row {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-3) 0; border-bottom: var(--stroke-hairline) solid var(--rule);
}
/* Spec keys stay subordinate to their values, but 10px is too small in-browser. */
.ns-spec dt { color: var(--ink-muted); font-size: 0.75rem; line-height: 1.4; letter-spacing: 0.08em; }
.ns-spec dd { margin: 0; color: var(--ink); }
.ns-spec dd ul { margin: 0; }

/* Service pages: suits/includes/notIncluded as rows of an existing spec
   list rather than three separate bulleted sections repeating the same
   list style. Rows hold a <ul>, so they can't baseline-align like a single
   value can. */
.ns-spec--service .ns-spec__row { align-items: start; }

.ns-model-label { margin: var(--space-3) 0 var(--space-4); color: var(--signal); text-transform: uppercase; }
.ns-route { margin: var(--space-4) 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); }
.ns-route__name { color: var(--signal); text-transform: uppercase; text-decoration: none; }
.ns-route__name:hover { text-decoration: underline; }
.ns-route__label { color: var(--ink-muted); }

/* A navigation action, not another problem title, so it's set apart from
   the related-links list above it and styled like the site's other small
   mono actions (t-button) rather than as a fourth list item. */
.ns-view-all { margin: var(--space-4) 0 0; }
.ns-view-all a { color: var(--signal); text-transform: uppercase; text-decoration: none; }
.ns-view-all a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- closing */

.ns-closing { display: flex; flex-direction: column; gap: var(--space-5); }
.ns-statement { margin: var(--space-4) 0 0; text-transform: uppercase; color: var(--ink); }
.ns-closing__line { margin: 0; font-size: 1.125rem; line-height: 1.55; color: var(--ink); max-width: var(--measure-prose); }
.ns-closing__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.ns-closing__email { color: var(--ink-body); }

/* The system's one piece of motion. Decorative, no JavaScript. */
.ns-statement--cursor::after {
  content: "_";
  margin-left: 0.08em;
  color: var(--signal);
  animation: ns-blink 1.6s steps(1, end) infinite;
}
@keyframes ns-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ns-statement--cursor::after { animation: none; opacity: 1; }
}

.ns-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--target-min); padding: 0 var(--space-5);
  background: var(--signal-fill); color: var(--on-signal);
  border: 0; border-radius: var(--radius-none);
  text-transform: uppercase; text-decoration: none;
}
.ns-btn:hover { filter: brightness(1.06); }
/* .ns-btn on a real <button> (the contact form's Send): undo browser
   button chrome so it matches the <a> version exactly. */
button.ns-btn { font: inherit; cursor: pointer; align-self: flex-start; }

/* ----------------------------------------------------------------- form */

.ns-form { display: flex; flex-direction: column; gap: var(--space-5); margin: var(--space-5) 0 0; max-width: var(--measure-prose); }
.ns-field { display: flex; flex-direction: column; gap: var(--space-2); }
.ns-field__label { color: var(--ink-muted); }
.ns-field__input {
  font-family: var(--font-sans); font-size: 1rem; line-height: 1.5;
  color: var(--ink); background: transparent;
  border: var(--stroke-hairline) solid var(--rule-strong);
  border-radius: var(--radius-none);
  padding: var(--space-3); min-height: var(--target-min);
}
.ns-field__input::placeholder { color: var(--ink-muted); }
.ns-field__input--textarea { min-height: 12rem; resize: vertical; }
.ns-field__input--deadline { min-height: 4.5rem; resize: vertical; }

/* Honeypot: off-screen and out of the accessibility tree, so it never
   reaches a legitimate keyboard or screen-reader visitor, and never
   affects the visible field layout above it. */
.ns-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------- ≥ tablet */

@media (min-width: 768px) {
  .ns-meta, .ns-rev { padding-left: var(--space-8); padding-right: var(--space-8); }
  .ns-crumb { margin-left: var(--space-8); margin-right: var(--space-8); display: flex; align-items: baseline; gap: var(--space-2); }
  .ns-crumb__arrow { display: none; }
  .ns-crumb__sep, .ns-crumb__current { display: inline; }
  .ns-meta__nav { display: flex; flex-wrap: wrap; gap: var(--space-5); }
  .ns-rev__domain { display: inline; }
  .ns-hero {
    flex-direction: row; align-items: flex-end; justify-content: space-between;
    gap: var(--space-8); padding: var(--space-8) var(--space-8);
  }
  .ns-plate { max-width: 500px; flex: 0 0 auto; padding: var(--space-5) var(--space-4) var(--space-4); }
  .ns-plate__tag { font-size: 1.0625rem; }
  .ns-hero__lede { font-size: 1.375rem; max-width: 34ch; }

  .ns-section {
    margin: 0 var(--space-8);
    padding: var(--space-6) 0 var(--space-8);
    display: grid; grid-template-columns: 280px 1fr; column-gap: var(--space-7);
  }
  .ns-section > * { grid-column: 2; }
  .ns-section > .ns-label { grid-column: 1; grid-row: 1 / span 20; }
  .ns-heading { margin-top: 0; font-size: 1.75rem; }

  .ns-models__row { display: grid; grid-template-columns: 220px 1fr; column-gap: var(--space-6); align-items: start; }
  .ns-models__id { flex-direction: column; justify-content: flex-start; gap: var(--space-1); }

  .ns-table--stack .ns-table__row { flex-direction: row; align-items: center; gap: var(--space-3); }
  .ns-table--stack .ns-table__desc { text-align: right; }

  .ns-register { grid-template-columns: 1fr 1fr; column-gap: var(--space-7); }

  .ns-spec__row { display: grid; grid-template-columns: 160px 1fr; column-gap: var(--space-5); align-items: baseline; }

  .ns-statement { font-size: 3rem; line-height: 1.05; }
  .ns-closing__line { font-size: 1.375rem; }
}