/*
  VELO Instrument Standard v1: tokens, faces, grid, controls and motion. Plain CSS, so a static-HTML tool
  can link it as it is; Next apps import it before their Tailwind globals.
  Source of truth: velo-tools/_standard/. Apps carry a synced copy in <app>/standard/ (see sync.sh).

  Colour (§3.1): canon hexes, plus neutral derivations. Each derivation is Near Black mixed into
  Off-White (or the reverse) in OKLab at the stated percentage, contrast measured on its field:
    ink-88  #282e3d  12.89:1  hover on Near Black controls
    ink-72  #494f5b   7.82:1  secondary text
    ink-56  #6d727c   4.59:1  captions
    ink-48  #80848c   3.57:1  the letter vessel outline and control borders (non-text, 3:1 floor)
    ink-10  #dfdfe0   1.27:1  decorative hairlines only
    ink-04  #f0efec   1.09:1  quiet fills, hover rows and the vessel fill (mixed in OKLCH, so it keeps
                               Off-White's warm hue; the OKLab mix #efefee read cool)
    paper-72 #b1b3b7  8.45:1 on Near Black, secondary text on the dark gate panel
    gold-hover #dbbd51  Near Black mixed 10% into Gold; Near Black text on it 9.64:1
  Measured with the WCAG 2.x relative-luminance formula, 26 Sep 2026.
*/

@font-face { font-family: 'PP Neue Montreal'; src: url('/fonts/ppneuemontreal-book.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'PP Neue Montreal'; src: url('/fonts/ppneuemontreal-medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'PP Neue Montreal'; src: url('/fonts/ppneuemontreal-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
/* PP Editorial New Ultrabold Italic: Pattern A words inside one landing H1 per surface (canon §2.3) */
@font-face { font-family: 'PP Editorial New'; src: url('/fonts/ppeditorialnew-ultrabolditalic.woff2') format('woff2'); font-weight: 800; font-style: italic; font-display: swap; }

:root {
  --paper: #faf9f7;
  --ink: #111827;
  --sky: #5DBBF5;
  --purple: #6127A8;
  --steel: #4884A8;
  --gold: #F5D251;
  --ink-88: #282e3d;
  --ink-72: #494f5b;
  --ink-56: #6d727c;
  --ink-48: #80848c;
  --ink-10: #dfdfe0;
  --ink-04: #f0efec;
  --paper-72: #b1b3b7;
  --gold-hover: #dbbd51;

  /* Motion (§3.6): ease-out only, no bounce, nothing on layout properties */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur: .42s;
  --pour: 1.1s;
  --settle: 180ms;
  --enter: 240ms;
}

html { background: var(--paper); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* skip link: off-screen until focused, then a Near Black tab at the top left */
.skip-link { position: absolute; left: 16px; top: -64px; z-index: 50; padding: 10px 16px; border-radius: 4px; background: var(--ink); color: var(--paper); font-weight: 500; }
.skip-link:focus { top: 12px; }
.on-ink :focus-visible { outline-color: var(--paper); }

/* Grid (§3.3): a 1152px field (12 columns of 74px, 24px gutters) centred at 1248px and up;
   48px side margins from 768px; 32px below 768px, 8% of a 390px short side (canon §4.4). */
.wrap { width: 100%; margin-inline: auto; padding-inline: 32px; }
@media (min-width: 768px) { .wrap { padding-inline: 48px; } }
@media (min-width: 1248px) { .wrap { max-width: 1152px; padding-inline: 0; } }
.grid12 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; }
@media (min-width: 768px) { .grid12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

/* Buttons (§3.5): one Gold primary a view, a Near Black secondary, a line tertiary. 4px radius. */
.cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px; white-space: nowrap; border-radius: 4px; font-weight: 500; font-size: 17px; line-height: 28px; padding: 14px 22px; min-height: 56px; transition: background-color var(--settle) var(--ease), color var(--settle) var(--ease); }
.cta-gold { background: var(--gold); color: var(--ink); }
.cta-gold:hover { background: var(--gold-hover); }
.cta-ink { background: var(--ink); color: var(--paper); }
.cta-ink:hover { background: var(--ink-88); }
.cta-line { border: 1px solid var(--ink); color: var(--ink); min-height: 48px; padding: 9px 18px; }
.cta-line:hover { background: var(--ink-04); }
.cta:disabled { opacity: .5; cursor: not-allowed; }
.textbtn { border-radius: 4px; color: var(--ink-72); text-decoration: underline; text-decoration-color: var(--ink-48); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.textbtn:hover { color: var(--ink); text-decoration-color: var(--ink); }
.prose-link { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.field { width: 100%; border-radius: 4px; background: var(--paper); color: var(--ink); font-size: 17px; line-height: 28px; border: 1px solid var(--ink-48); padding: 13px 14px; min-height: 56px; }
.field::placeholder { color: var(--ink-56); opacity: 1; }
.on-ink .field { border-color: var(--paper); }

/* Disclosure row (§3.5): native details, the marker drawn as a stroke chevron */
.disclosure > summary { list-style: none; cursor: pointer; }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure .chev { transition: transform var(--settle) var(--ease); }
.disclosure[open] .chev { transform: rotate(180deg); }
/* or a text affordance in place of the chevron: the summary's own line, underlined like a text button */
.disclosure > summary .summary-link { text-decoration: underline; text-decoration-color: var(--ink-48); text-underline-offset: 5px; text-decoration-thickness: 1px; }
.disclosure > summary:hover .summary-link, .disclosure[open] > summary .summary-link { text-decoration-color: var(--ink); }

/* Motion (§3.6) */
.reveal { animation: rise var(--dur) var(--ease) both; animation-delay: calc(var(--i, 0) * .06s); }
.enter { animation: rise var(--enter) var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.pour { animation: pour var(--pour) var(--ease) both; animation-delay: calc(.15s + var(--i, 0) * .09s); }
@keyframes pour { from { transform: translateY(var(--from)); } }
.settle { transition: transform var(--settle) var(--ease), background-color var(--settle) var(--ease), color var(--settle) var(--ease); }

/* Vestibular safety: reduced motion removes every transform, stagger and transition */
@media (prefers-reduced-motion: reduce) {
  .reveal, .enter, .pour { animation: none !important; opacity: 1 !important; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  body { background: var(--paper); color: var(--ink); }
  .no-print { display: none !important; }
  .pour, .reveal, .enter { animation: none !important; opacity: 1 !important; }
}