/* Small amount of CSS Tailwind can't express. Colour values mirror assets/tailwind.config.js. */
:root {
  --brand-red: #DD1F2F;
  --brand-gray: #636466;
  --ink: #282729;
  --line: #E3E3E3;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 3px; }

/* Icons from /assets/icons.svg: stroke = currentColor, accent = brand red */
.icon { display: inline-block; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Datum grid — brand pattern; keep ≤15% visual weight */
.datum-grid { background-image: url('/assets/img/brand/datum-tile.svg'); background-size: 192px 192px; }
.datum-grid-white { background-image: url('/assets/img/brand/datum-tile-white.svg'); background-size: 192px 192px; }
.fade-mask-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); }
.fade-mask-l { -webkit-mask-image: linear-gradient(270deg, transparent, #000 70%); mask-image: linear-gradient(270deg, transparent, #000 70%); }

/* Header nav: current page = red + underline (About comp) */
.nav-link { position: relative; }
.nav-link[aria-current="page"] { color: var(--brand-red); }
.nav-link[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 2px; background: var(--brand-red); }

/* Red L-shaped corner frame on images (About comp) */
.corner-frame { position: relative; }
.corner-frame::after { content: ""; position: absolute; top: -12px; right: -12px; width: 52px; height: 52px; border-top: 4px solid var(--brand-red); border-right: 4px solid var(--brand-red); pointer-events: none; }

/* Accordion */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary .chev { transform: rotate(180deg); }
.chev { transition: transform .2s ease; }

/* Filter chips */
[data-filter][aria-pressed="true"] { background: var(--brand-red); border-color: var(--brand-red); color: #fff; }

/* Spec table numerals */
.tabular { font-variant-numeric: tabular-nums; }

/* Hero load: the locator drops onto the datum — the one orchestrated moment */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes locate { 0% { opacity: 0; transform: translateY(-40px); } 70% { opacity: 1; transform: translateY(3px); } 100% { opacity: 1; transform: none; } }
@keyframes ring { from { opacity: 0; transform: rotate(-25deg) scale(.96); } to { opacity: 1; transform: none; } }
.anim-rise { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
.anim-ring { animation: ring 1.2s cubic-bezier(.2,.7,.2,1) both; transform-origin: center; transform-box: fill-box; }
.anim-locate { animation: locate .8s cubic-bezier(.3,.8,.3,1) .9s both; transform-box: fill-box; }
.d1 { animation-delay: .08s; } .d2 { animation-delay: .16s; } .d3 { animation-delay: .24s; } .d4 { animation-delay: .4s; } .d5 { animation-delay: .5s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anim-rise, .anim-ring, .anim-locate { animation: none !important; }
  .chev { transition: none; }
}

/* Mockup annotations — hidden by default; ?notes=1 or the "Mockup notes" toggle adds html.show-notes.
   [TBC] flags = confirmed-missing data; [data-sample] = invented sample data shown as if real. */
.todo-flag { display: none; }
html.show-notes .todo-flag { display: inline-block; }
html.show-notes [data-sample] { outline: 1px dashed var(--brand-red); outline-offset: 2px; background-color: rgba(221, 31, 47, .06); }
html.show-notes [data-todo] { text-decoration: underline dashed var(--brand-red); }
.notes-toggle { position: fixed; left: 12px; bottom: 12px; z-index: 70; font: 500 11px/1 Inter, system-ui, sans-serif; padding: 7px 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 2px; opacity: .75; }
.notes-toggle:hover { opacity: 1; }
html.show-notes .notes-toggle { border-color: var(--brand-red); color: var(--brand-red); opacity: 1; }
.todo-flag { font-size: 11px; line-height: 1.2; padding: 2px 6px; border: 1px dashed var(--brand-red); color: var(--brand-red); border-radius: 2px; vertical-align: middle; }

/* Icons on red or dark fills: accent follows the text colour so it stays visible */
.bg-brand-red .icon, .bg-night .icon, .bg-ink .icon, .icon-mono { --brand-red: currentColor; }