/*
  Page chrome for the NLOS Style Sheet.

  This file holds layout and spacing only. Every colour, radius, shadow, size
  and type step is read from nlos-styles.css through its --nl-* tokens: there
  are no hex values and no font sizes invented here. The page is a specimen of
  the system it documents, so the chrome uses the system's own scales.
*/

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

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

body {
  /* nlos-styles.css sets the page glow, background, colour and font on body. */
  min-height: 100vh;
}

.wrap {
  width: 100%;
  max-width: var(--nl-layout-content-max);
  margin-inline: auto;
  padding-inline: var(--nl-layout-gutter-mobile);
}

@media (min-width: 768px) {  /* --nl-layout-breakpoint-md */
  .wrap {
    padding-inline: var(--nl-layout-gutter-desktop);
  }
}

code {
  font-family: var(--nl-font-mono);
  font-size: 0.94em;
  font-variant-numeric: tabular-nums;
}

.skip-link {
  position: absolute;
  left: var(--nl-space-4);
  top: var(--nl-space-4);
  z-index: 100;
  padding: var(--nl-space-2) var(--nl-space-4);
  border-radius: var(--nl-radius-md);
  background-color: var(--nl-color-bg-surface);
  color: var(--nl-color-accent-text);
  border: var(--nl-stroke-hairline) solid var(--nl-color-border-control);
  transform: translateY(calc(-100% - var(--nl-space-6)));
}

.skip-link:focus-visible {
  transform: none;
}

/* ---------------------------------------------------------------- header */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--nl-space-4);
  padding-block: var(--nl-space-8) var(--nl-space-6);
}

.brandline {
  display: flex;
  align-items: center;
  gap: var(--nl-space-3);
  min-width: 0;
}

/* The NLOS mark: a round two-halves circle, navy left and gold right.
   No gradient, glow or shadow on it. Colours come from the mark tokens. */
.mark {
  flex: 0 0 auto;
  display: inline-flex;
  width: 28px;
  height: 28px;
  border-radius: var(--nl-radius-full);
  overflow: hidden;
}

.mark__half {
  width: 50%;
  height: 100%;
}

.mark__half--left {
  background-color: var(--nl-color-mark-left);
}

.mark__half--right {
  background-color: var(--nl-color-mark-right);
}

.brandline__text {
  min-width: 0;
}

.brandline h1 {
  margin: 0;
  font-size: var(--nl-type-h1-size);
  font-weight: var(--nl-type-h1-weight);
  line-height: var(--nl-type-h1-leading);
  letter-spacing: var(--nl-type-h1-tracking);
  color: var(--nl-color-text-primary);
}

.brandline__meta {
  margin: var(--nl-space-1) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nl-space-2);
  font-family: var(--nl-font-mono);
  font-size: var(--nl-type-caption-size);
  line-height: var(--nl-type-caption-leading);
  color: var(--nl-color-text-secondary);
}

.theme-control {
  display: inline-flex;
  gap: var(--nl-space-1);
  padding: var(--nl-space-1);
  border: var(--nl-stroke-hairline) solid var(--nl-color-border-default);
  border-radius: var(--nl-radius-md);
  background-color: var(--nl-color-bg-surface);
}

.theme-control__btn {
  appearance: none;
  border: 0;
  margin: 0;
  padding: var(--nl-space-2) var(--nl-space-4);
  min-height: var(--nl-control-sm);
  border-radius: var(--nl-radius-sm);
  background-color: transparent;
  color: var(--nl-color-text-secondary);
  font-family: var(--nl-font-sans);
  font-size: var(--nl-type-body-sm-size);
  font-weight: var(--nl-weight-medium);
  cursor: pointer;
  transition: background-color var(--nl-motion-fast) var(--nl-motion-ease),
    color var(--nl-motion-fast) var(--nl-motion-ease);
}

.theme-control__btn:hover {
  background-color: var(--nl-color-bg-subtle);
  color: var(--nl-color-text-primary);
}

.theme-control__btn[aria-pressed="true"] {
  background-color: var(--nl-color-accent-subtle);
  color: var(--nl-color-accent-text);
}

/* ----------------------------------------------------------------- main */

main {
  padding-bottom: var(--nl-space-16);
}

.lede {
  max-width: var(--nl-layout-prose-max);
  margin: 0 0 var(--nl-space-12);
  padding-bottom: var(--nl-space-8);
  border-bottom: var(--nl-stroke-hairline) solid var(--nl-color-border-default);
  font-size: var(--nl-type-body-lg-size);
  line-height: var(--nl-type-body-lg-leading);
  color: var(--nl-color-text-secondary);
}

.lede code {
  color: var(--nl-color-text-primary);
}

.section {
  margin-block-end: var(--nl-space-12);
}

.section-head {
  display: flex;
  align-items: baseline;
  gap: var(--nl-space-3);
  padding-bottom: var(--nl-space-2);
  border-bottom: var(--nl-stroke-hairline) solid var(--nl-color-border-default);
}

.section-index {
  font-family: var(--nl-font-mono);
  font-size: var(--nl-type-caption-size);
  font-weight: var(--nl-weight-medium);
  color: var(--nl-color-text-muted);
  font-variant-numeric: tabular-nums;
}

.section-head h2 {
  margin: 0;
  font-size: var(--nl-type-h2-size);
  font-weight: var(--nl-type-h2-weight);
  line-height: var(--nl-type-h2-leading);
  letter-spacing: var(--nl-type-h2-tracking);
  color: var(--nl-color-text-primary);
}

.section-note {
  max-width: var(--nl-layout-prose-max);
  margin: var(--nl-space-3) 0 var(--nl-space-6);
  color: var(--nl-color-text-secondary);
  font-size: var(--nl-type-body-sm-size);
  line-height: var(--nl-type-body-sm-leading);
}

.section-note--last {
  margin-top: var(--nl-space-4);
  margin-bottom: 0;
}

.sub-block {
  margin-block-end: var(--nl-space-8);
}

.sub-block > h3,
.tok-group h3 {
  margin: 0 0 var(--nl-space-3);
  font-family: var(--nl-font-mono);
  font-size: var(--nl-type-overline-size);
  font-weight: var(--nl-weight-medium);
  line-height: var(--nl-type-overline-leading);
  letter-spacing: var(--nl-type-overline-tracking);
  text-transform: uppercase;
  color: var(--nl-color-text-muted);
}

/* ----------------------------------------------------------------- brand */

.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--nl-space-3);
}

.brand-chip {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--nl-space-6);
  min-height: 108px;
  padding: var(--nl-space-4);
  border-radius: var(--nl-radius-lg);
  overflow-wrap: anywhere;
}

/* Text that sits on a fixed brand fill uses the tokens that mean "on top":
   spark-on is dark ink in both themes, module-on is white in both. */
.brand-chip--on-light {
  color: var(--nl-color-spark-on);
}

.brand-chip--on-dark {
  color: var(--nl-color-module-on);
}

.brand-chip__name,
.brand-chip__hex {
  display: block;
  font-size: var(--nl-type-caption-size);
  line-height: var(--nl-type-caption-leading);
}

.brand-chip__name {
  opacity: 0.82;
}

.brand-chip__hex {
  font-weight: var(--nl-weight-medium);
  letter-spacing: 0.01em;
}

/* ---------------------------------------------------------------- colour */

.tok-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--nl-space-8) var(--nl-space-8);
}

.tok-group__note {
  margin: calc(var(--nl-space-3) * -1) 0 var(--nl-space-3);
  font-size: var(--nl-type-caption-size);
  line-height: var(--nl-type-caption-leading);
  color: var(--nl-color-text-muted);
}

.tok-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--nl-stroke-hairline) solid var(--nl-color-border-default);
}

.tok-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--nl-space-3);
  padding-block: var(--nl-space-2);
  border-bottom: var(--nl-stroke-hairline) solid var(--nl-color-border-default);
}

.swatch {
  width: 22px;
  height: 22px;
  border-radius: var(--nl-radius-sm);
  box-shadow: inset 0 0 0 1px var(--nl-color-border-default);
}

.tok-id {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.tok-label {
  font-size: var(--nl-type-caption-size);
  line-height: var(--nl-type-caption-leading);
  color: var(--nl-color-text-secondary);
}

.tok-name {
  font-size: var(--nl-type-caption-size);
  line-height: var(--nl-type-caption-leading);
  color: var(--nl-color-text-primary);
  overflow-wrap: anywhere;
}

.tok-val {
  font-size: var(--nl-type-caption-size);
  line-height: var(--nl-type-caption-leading);
  color: var(--nl-color-text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ type */

.type-list {
  border-top: var(--nl-stroke-hairline) solid var(--nl-color-border-default);
}

.type-row {
  display: grid;
  gap: var(--nl-space-2);
  padding-block: var(--nl-space-5);
  border-bottom: var(--nl-stroke-hairline) solid var(--nl-color-border-default);
}

@media (min-width: 900px) {
  .type-row {
    grid-template-columns: 168px minmax(0, 1fr);
    gap: var(--nl-space-6);
    align-items: baseline;
  }
}

.type-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--nl-space-2);
  font-family: var(--nl-font-mono);
  font-size: var(--nl-type-caption-size);
  line-height: var(--nl-type-caption-leading);
  color: var(--nl-color-text-muted);
}

.type-role {
  color: var(--nl-color-text-primary);
  font-weight: var(--nl-weight-medium);
}

.type-pair,
.type-detail {
  font-variant-numeric: tabular-nums;
}

.type-pair {
  color: var(--nl-color-text-secondary);
}

.type-detail {
  color: var(--nl-color-text-muted);
}

.type-spec {
  margin: 0;
  color: var(--nl-color-text-primary);
  overflow-wrap: break-word;
}

/* ------------------------------------------------------- space and radius */

.space-list {
  display: grid;
  gap: var(--nl-space-2);
}

.space-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: var(--nl-space-3);
}

.space-key {
  font-size: var(--nl-type-caption-size);
  color: var(--nl-color-text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.space-bar {
  height: 10px;
  min-width: 2px;
  border-radius: 0 var(--nl-radius-sm) var(--nl-radius-sm) 0;
  background-color: var(--nl-color-border-strong);
}

.radius-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nl-space-5);
}

.radius-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nl-space-2);
  width: 76px;
}

.radius-chip {
  width: 56px;
  height: 56px;
  background-color: var(--nl-color-bg-subtle);
  border: var(--nl-stroke-hairline) solid var(--nl-color-border-strong);
}

.radius-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--nl-type-caption-size);
  line-height: var(--nl-type-caption-leading);
  color: var(--nl-color-text-secondary);
}

.radius-val {
  color: var(--nl-color-text-muted);
}

.stroke-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nl-space-6) var(--nl-space-10);
}

.stroke-item {
  display: flex;
  align-items: center;
  gap: var(--nl-space-3);
}

.stroke-line {
  width: 64px;
  height: var(--nl-stroke-hairline);
  background-color: var(--nl-color-text-muted);
}

/* The real focus ring: 2px, the ring colour, 2px offset, exactly as
   nlos-styles.css draws :focus-visible. Shown on the control below while it
   has keyboard focus; the static sample beside it is the same two tokens. */
.focus-sample {
  width: 44px;
  height: 26px;
  border-radius: var(--nl-radius-sm);
  background-color: var(--nl-color-bg-surface);
  border: var(--nl-stroke-hairline) solid var(--nl-color-border-control);
  outline: var(--nl-stroke-focus) solid hsl(var(--ring));
  outline-offset: var(--nl-stroke-focus);
}

.stroke-focus {
  appearance: none;
  min-height: var(--nl-control-sm);
  padding: var(--nl-space-1) var(--nl-space-3);
  border: var(--nl-stroke-hairline) solid var(--nl-color-border-control);
  border-radius: var(--nl-radius-sm);
  background-color: var(--nl-color-bg-surface);
  color: var(--nl-color-text-primary);
  font-family: var(--nl-font-sans);
  font-size: var(--nl-type-body-sm-size);
  cursor: pointer;
}

.stroke-meta {
  display: flex;
  flex-direction: column;
  font-size: var(--nl-type-caption-size);
  line-height: var(--nl-type-caption-leading);
  color: var(--nl-color-text-muted);
}

.stroke-meta code {
  color: var(--nl-color-text-primary);
}

.shadow-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--nl-space-6) var(--nl-space-4);
  padding-block: var(--nl-space-2);
}

.shadow-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nl-space-3);
}

.shadow-tile {
  width: 100%;
  max-width: 150px;
  height: 64px;
  border-radius: var(--nl-radius-lg);
  background-color: var(--nl-color-bg-surface);
}

.shadow-name {
  font-size: var(--nl-type-caption-size);
  color: var(--nl-color-text-secondary);
}

/* --------------------------------------------------------------- effects */

.effects {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--nl-space-6);
}

@media (min-width: 760px) {
  .effects {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nl-space-6) var(--nl-space-5);
  }

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

.effect {
  min-width: 0;
}

.effect-note {
  margin: var(--nl-space-3) 0 0;
  font-size: var(--nl-type-caption-size);
  line-height: 1.55;
  color: var(--nl-color-text-muted);
}

.effect-note code {
  padding: 0 var(--nl-space-1);
  border-radius: var(--nl-radius-sm);
  background-color: var(--nl-color-bg-subtle);
  color: var(--nl-color-text-secondary);
  font-size: var(--nl-type-caption-size);
  overflow-wrap: anywhere;
}

/* A real card surface, so the pixel corner reads on it. background-color,
   never the background shorthand: card-pixels sets background-image. */
.demo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--nl-space-1);
  width: 100%;
  min-height: 132px;
  margin: 0;
  padding: var(--nl-space-4);
  border: var(--nl-stroke-hairline) solid var(--nl-color-border-default);
  border-radius: var(--nl-radius-lg);
  background-color: var(--nl-color-bg-surface);
  color: var(--nl-color-text-primary);
  font-family: var(--nl-font-sans);
  font-size: var(--nl-type-body-size);
  line-height: var(--nl-type-body-leading);
  text-align: left;
}

.demo-card__label {
  font-size: var(--nl-type-label-size);
  font-weight: var(--nl-type-label-weight);
  line-height: var(--nl-type-label-leading);
}

.demo-card__line {
  font-size: var(--nl-type-body-sm-size);
  line-height: var(--nl-type-body-sm-leading);
  color: var(--nl-color-text-secondary);
}

.demo-card--action {
  appearance: none;
  cursor: pointer;
  transition: border-color var(--nl-motion-fast) var(--nl-motion-ease);
}

.demo-card--action:hover {
  border-color: var(--nl-color-border-strong);
}

.glow-panel {
  display: flex;
  align-items: flex-end;
  min-height: 200px;
  padding: var(--nl-space-6);
  border: var(--nl-stroke-hairline) solid var(--nl-color-border-default);
  border-radius: var(--nl-radius-lg);
  background-color: var(--nl-color-bg-canvas);
  background-image: var(--nl-page-glow);
  background-repeat: no-repeat;
  overflow: hidden;
}

.glow-panel__card {
  display: flex;
  flex-direction: column;
  gap: var(--nl-space-1);
  width: min(100%, 360px);
  padding: var(--nl-space-4);
  border: var(--nl-stroke-hairline) solid var(--nl-color-border-default);
  border-radius: var(--nl-radius-md);
  background-color: var(--nl-color-bg-surface);
  box-shadow: var(--nl-shadow-sm);
}

.glow-panel__label {
  font-size: var(--nl-type-label-size);
  font-weight: var(--nl-type-label-weight);
  line-height: var(--nl-type-label-leading);
  color: var(--nl-color-text-primary);
}

.glow-panel__line {
  font-size: var(--nl-type-caption-size);
  line-height: var(--nl-type-caption-leading);
  color: var(--nl-color-text-secondary);
}

.specimen {
  display: flex;
  align-items: center;
  gap: var(--nl-space-4);
  min-height: 96px;
  padding: var(--nl-space-4);
  border: var(--nl-stroke-hairline) solid var(--nl-color-border-default);
  border-radius: var(--nl-radius-lg);
  background-color: var(--nl-color-bg-surface);
}

/* AiThinking: the mark's ::before is absolutely positioned, so the host needs
   a positioning context and room for the 12 x 12 square. */
.thinking-mark {
  position: relative;
  display: block;
  width: 12px;
  height: 12px;
  margin: var(--nl-space-2);
  flex: 0 0 auto;
}

.thinking-demo__text {
  font-size: var(--nl-type-body-sm-size);
  line-height: var(--nl-type-body-sm-leading);
  color: var(--nl-color-text-secondary);
}

.waveform-demo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--nl-space-4);
  min-height: 96px;
  padding: var(--nl-space-4);
  border: var(--nl-stroke-hairline) solid var(--nl-color-border-default);
  border-radius: var(--nl-radius-lg);
  background-color: var(--nl-color-bg-surface);
}

/* VoiceWaveform: the bars take their height from the stylesheet (percentage
   of the box), so the flex row needs a definite height. Bar width, colour and
   corner are the component's own chrome, set from tokens here. */
.waveform {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 36px;
}

.waveform > i {
  flex: 0 0 auto;
  width: 3px;
  border-radius: 1px;
  background-color: var(--nl-color-accent-default);
}

.reduced-note {
  margin: var(--nl-space-6) 0 0;
  padding: var(--nl-space-3) var(--nl-space-4);
  border-left: var(--nl-stroke-focus) solid var(--nl-color-border-strong);
  font-size: var(--nl-type-caption-size);
  line-height: 1.6;
  color: var(--nl-color-text-muted);
}

/* -------------------------------------------------------------- changelog */

.changelog {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--nl-layout-prose-max);
}

.changelog li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--nl-space-3);
  padding-block: var(--nl-space-3);
  border-bottom: var(--nl-stroke-hairline) solid var(--nl-color-border-default);
  color: var(--nl-color-text-secondary);
}

.changelog__tag {
  align-self: start;
  padding: 1px var(--nl-space-2);
  border-radius: var(--nl-radius-full);
  border: var(--nl-stroke-hairline) solid var(--nl-color-border-default);
  background-color: var(--nl-color-bg-subtle);
  color: var(--nl-color-text-primary);
  font-family: var(--nl-font-mono);
  font-size: var(--nl-type-caption-size);
  line-height: var(--nl-type-caption-leading);
  font-variant-numeric: tabular-nums;
}

.changelog code {
  color: var(--nl-color-text-primary);
}

/* ---------------------------------------------------------------- footer */

.site-footer {
  padding-block: var(--nl-space-6) var(--nl-space-10);
  border-top: var(--nl-stroke-hairline) solid var(--nl-color-border-default);
  color: var(--nl-color-text-muted);
  font-size: var(--nl-type-caption-size);
  line-height: 1.6;
}

.site-footer p {
  margin: 0 0 var(--nl-space-1);
}

.site-footer code {
  color: var(--nl-color-text-secondary);
}