/* l3nn.org v2 — production stylesheet. Classes verbatim from mock/index.html
(DESIGN LOCKED V1, 2026-09-15) — see docs/DESIGN.md. Mock-only parts removed
per the PV-4 brief: the `.view`/`:target` single-file routing (this build emits
real multi-page HTML, one file per route), the `.island` dashed-outline markers
(PV-6 territory, not shipped), and the Google Fonts
holding the canvas) draws the content and the HTML twin is clip-hidden —
never display:none, so it stays in the accessibility tree and reachable by
keyboard. Additive-only rules, documented per PV-4-testimony.md's
convention; nothing above this block changes. */
[data-ui][data-ui-status^="ok"]{position:relative}
[data-ui][data-ui-status^="ok"] > :not([data-ui-surface]):not(script){
position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
/* Keyboard focus anywhere inside the island reverses the above: hide the
canvas, give the twin its box back — the higher-specificity selectors here
win regardless of source order. */
[data-ui][data-ui-status^="ok"]:focus-within > [data-ui-surface]{display:none}
[data-ui][data-ui-status^="ok"]:focus-within > :not([data-ui-surface]):not(script){
position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;
}
/* A grid root (the hero's .wrap is a 1.35fr 1fr grid) must hand the surface the
whole row, or the host measures one column and lays the island out at 56 %. */
[data-ui] > [data-ui-surface]{grid-column:1 / -1}
[data-ui-surface] canvas{display:block;max-width:100%}
[data-ui-surface][data-ui-link]{cursor:pointer}
/* PV-6b mobile (docs/tasks/PV-6b-mobile.md): additive fixes found by
Lighthouse mobile + manual audit at 360/390/414/768. No horizontal
overflow, tap-target/font-size/islands checks were already clean at
these widths (see the testimony) — the three real findings below are
fixed with CSS only, each scoped to <=880px (docs/DESIGN.md §5's mobile
boundary) so nothing above this block or above 880px changes. */
@media (max-width: 880px) {
/* Sysbar nav links: padding:4px 0 at 10-11px font leaves a ~24px-tall
click box, short of a 44px touch target. Pad height directly (the bar
is sticky, not fixed, so it can grow without overlapping anything
below it); grow the horizontal box too but cancel it with an equal
negative margin so the visible gap between links and the one-line fit
at 360px are unchanged — only the invisible hit area widens. */
.sysbar nav a{padding:15px 6px;margin:0 -6px}
/* font-size (best-practices) measured 53.83% legible text on /contact/:
footer alone is 11px and ~30% of that page's text, pushing the page
under Lighthouse's 60% threshold. Raise the three sub-12px classes;
desktop keeps 11px (rule above, unchanged). */
footer{font-size:12px}
.channels dt{font-size:12px}
label{font-size:12px}
/* iOS Safari zooms the viewport on focusing an input/textarea under
16px. Desktop keeps the 13px value from the rule above. */
input,textarea{font-size:16px}
}