/* T449: calm G1-G6 ramp (replaces T441's Garmin/spec neon). Sequential film/paper tones: lightness carries the order (G1 palest .. G6 darkest on paper; reversed on film via .on-film), hue only helps. Orange only at G4 = attention (DESIGN.md), G5/G6 = the one hard over-limit signal. Garmin keeps high-contrast spec colours for sun (grip-v2.mjs). Derivations: docs/ai/handoffs/T449-result.md; refs media/inspo/2026-10-03-papir.md (#2 Kinfolk muted panel, #3 Stripe Press non-black ink, #7 riso pale ink), BRAND.md paper/ink/lean. Opaque fill + own text colour. */
:root{--g1:#C9D4BC;--g1-fg:#1F1C18;--g2:#DCC987;--g2-fg:#1F1C18;--g3:#E3A94F;--g3-fg:#1F1C18;--g4:#D8722F;--g4-fg:#1F1C18;--g5:#A5301C;--g5-fg:#F6EFE0;--g6:#4B1B24;--g6-fg:#F6EFE0;--gx:#E2D9C6;--gx-fg:#1F1C18;--gring:#1F1C18}
/* film ground (analyse, dark tools): add class on-film or data-ground=film to the container; the pages are paper-only so no OS-scheme switch */
.on-film,[data-ground=film]{--g1:#333B2B;--g1-fg:#E8DFCC;--g2:#4E5A35;--g2-fg:#F6EFE0;--g3:#7D6A2B;--g3-fg:#F6EFE0;--g4:#C27A2C;--g4-fg:#171510;--g5:#F2805F;--g5-fg:#171510;--g6:#F9D3C6;--g6-fg:#171510;--gx:#211E19;--gx-fg:#E8DFCC;--gring:#E8DFCC}
.gb{display:inline-flex;align-items:center;gap:.5em;padding:.3em .6em;border-radius:3px;font-family:var(--font-data);font-size:.8rem;font-weight:500;letter-spacing:.02em;line-height:1.3;white-space:nowrap;box-shadow:0 0 0 1px var(--gring);background:var(--gx);color:var(--gx-fg)}
.gb:not([data-b]),.gb[data-b=GX]{outline:1px dashed currentColor;outline-offset:-4px}
.gb[data-b=G1]{background:var(--g1);color:var(--g1-fg)}.gb[data-b=G2]{background:var(--g2);color:var(--g2-fg)}.gb[data-b=G3]{background:var(--g3);color:var(--g3-fg)}.gb[data-b=G4]{background:var(--g4);color:var(--g4-fg)}.gb[data-b=G5]{background:var(--g5);color:var(--g5-fg)}.gb[data-b=G6]{background:var(--g6);color:var(--g6-fg)}
.gm{display:inline-flex;gap:2px}.gm i{display:block;width:5px;height:11px;border:1px solid currentColor;box-sizing:border-box}.gm i.on{background:currentColor}
.grip-key,.grip-card{margin:2.2em 0}
.grip-key ul{list-style:none;padding:0;margin:1em 0}.grip-key li{display:grid;grid-template-columns:9.5em 1fr;gap:.2em 1em;align-items:center;padding:.55em 0;border-bottom:1px solid rgba(var(--fg-rgb),.12)}
.grip-key li strong{font-weight:500}.grip-key .gb{justify-self:start}
@media(max-width:520px){.grip-key li{grid-template-columns:1fr}}
.grip-note{font-size:.9rem;color:var(--papir)}
.grip-card fieldset{border:0;padding:0;margin:0 0 1.2em;min-width:0}.grip-card legend{font-family:var(--font-data);font-size:.75rem;letter-spacing:.02em;padding:0;margin-bottom:.45em}
.lvl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.lvl label{display:flex;flex-direction:column;justify-content:center;min-height:44px;margin:0;padding:.5em .7em;border:1px solid var(--dempet);border-radius:6px;background:var(--grunn);cursor:pointer;text-transform:none;letter-spacing:0;font-family:var(--font-text);font-size:1rem;color:var(--papir)}
.lvl input{position:absolute;opacity:0;width:1px;height:1px}
.lvl input:checked+span{font-weight:500}.lvl label:has(input:checked){border:2px solid var(--papir);padding:calc(.5em - 1px) calc(.7em - 1px)}
.lvl label:has(input:focus-visible){outline:3px solid var(--oransje);outline-offset:4px}
.lvl small{font-family:var(--font-data);font-size:.75rem}
@media(max-width:520px){.lvl{grid-template-columns:1fr 1fr}}
.grip-card select{width:100%;min-height:44px;background:var(--grunn);color:var(--papir);border:1px solid var(--dempet);border-radius:6px;padding:.55em .7em;font-family:var(--font-data);font-size:1rem}
.grip-result{display:grid;grid-template-columns:auto 1fr;gap:.4em 1.4em;align-items:center;background:var(--grunn);border:1px solid rgba(var(--fg-rgb),.15);border-radius:8px;padding:1em 1.2em;margin:1.2em 0}
.grip-result .gb{font-size:1.1rem;padding:.4em .8em}.grip-result .pct{font-size:clamp(2rem,6vw,2.8rem);line-height:1}.grip-result .enhet{font-family:var(--font-data);font-size:.78rem}
.grip-result p{grid-column:1/-1;margin:.2em 0}
@media(max-width:520px){.grip-result{grid-template-columns:1fr}}
.grip-table{width:100%;border-collapse:collapse;font-family:var(--font-data);font-size:.8rem;table-layout:fixed}
.grip-table caption{text-align:left;margin-bottom:.6em;font-family:var(--font-text);font-size:.95rem}
.grip-table th,.grip-table td{padding:.4em .3em;border-bottom:1px solid rgba(var(--fg-rgb),.12);text-align:left;vertical-align:middle;overflow-wrap:break-word}
.grip-table thead th{font-weight:400;font-size:.75rem;letter-spacing:.04em}.grip-table tbody th{font-weight:500}
.grip-table button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;min-height:44px;padding:4px;background:transparent;border:2px solid transparent;border-radius:4px;color:var(--papir);cursor:pointer;font:inherit}
.grip-table button[aria-pressed=true]{border-color:var(--papir)}.grip-table button:focus-visible{outline:3px solid var(--oransje);outline-offset:2px}
.grip-table .gb{font-size:.75rem;padding:.2em .4em}.grip-table .gu .gb{margin-right:.6em}
.grip-table .gm i{width:4px;height:9px}
@media(max-width:620px){.grip-table .gm{display:none}.grip-table{font-size:.75rem}}
.table-scroll .grip-table{min-width:0}
@media(forced-colors:active){.gb{border:1px solid CanvasText;forced-color-adjust:none}}
@media print{.grip-card button{border:0}}
@media(max-width:620px){.grip-table thead th{font-size:.75rem;letter-spacing:0;overflow-wrap:normal}.grip-table th:first-child{width:22%}}
/* T453: «anywhere» (arvet fra body) brøt ord midt i («asfal t»); break-word bryter bare når en celle ellers flyter over. */