/* InstantPalette - base (layer 2 of 4: tokens -> base -> site -> tool)
Reset, type, icons, focus, kbd, generic buttons, dialog / popover / sheet / drawer / modal shells, toasts,
reduced motion. No page layout here (site.css) and nothing tool-specific (tool.css).
FONTS - copy these three tags verbatim into every page , before the stylesheets. No CSS @import anywhere.
Exactly two families: Instrument Sans (variable wght 400-700) and Martian Mono (wdth 75-100, wght 500 only).
Martian Mono is only ever used at weight 500: never set another weight on mono text (no synthetic bold). */
/* ---------- Metric-matched fallback (measured 2026-09-11 against Arial: width 102%, ascent .97, descent .25) ---------- */
@font-face {
font-family: "Instrument Sans Fallback";
src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans");
size-adjust: 102%;
ascent-override: 95%;
descent-override: 24.5%;
line-gap-override: 0%;
}
/* ---------- Reset + base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
margin: 0;
background: var(--ground);
color: var(--ink-1);
font: 400 15px/1.5 var(--f-sans);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden; /* fallback */
overflow-x: clip; /* clip, not hidden: keeps position: sticky working */
}
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; margin: 0; text-align: inherit; }
button:disabled { cursor: default; }
a { color: inherit; }
kbd {
font: 500 12px/1 var(--f-mono);
padding: 4px 6px 3px;
border: 1px solid var(--line-2);
border-bottom-width: 2px;
border-radius: 5px;
background: var(--raised);
color: var(--ink-1);
white-space: nowrap;
}
.mono { font-family: var(--f-mono); font-weight: 500; }
/* Icons: from the inline sprite. 24x24 grid, 1.75 stroke. */
.i {
width: 20px; height: 20px; flex: none;
fill: none; stroke: currentColor; stroke-width: 1.75;
stroke-linecap: round; stroke-linejoin: round;
}
.i-chev { width: 16px; height: 16px; color: var(--ink-2); }
.i-flip { transform: scaleX(-1); } /* i-arrow as a back arrow */
/* Visually hidden (screen-reader only) */
.vh {
position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
position: absolute; left: 8px; top: -120px; z-index: var(--z-skip);
padding: 10px 14px; border-radius: var(--r);
background: var(--raised); color: var(--ink-1); text-decoration: none;
font: 500 14px/1.2 var(--f-sans);
}
.skip:focus { top: 8px; box-shadow: var(--shadow-pop); }
/* Focus: one ring everywhere (swatches use their own dual ring in tool.css). Never outline:none without a replacement. */
:focus-visible { outline: 2px solid var(--ink-1); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
/* ---------- Brand mark (step wedge) + wordmark, shared by the tool top bar and the site header ---------- */
.wedge { width: 24px; height: 24px; color: var(--ink-1); flex: none; }
.wm { font: 700 18px/20px var(--f-sans); letter-spacing: -.02em; }
/* ---------- Generic buttons ---------- */
/* Icon button (40px; 44px on touch) */
.ib { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r); color: var(--ink-1); flex: none; }
/* Hover styles apply to real hover-capable pointers only: touch browsers keep :hover on the last tapped control */
@media (hover: hover) and (pointer: fine) { .ib:hover { background: var(--hover); } }
.ib:active { background: var(--press); }
.ib-sm { width: 32px; height: 32px; }
/* Text nav link with a 44px hit area */
.nav-a {
display: inline-flex; align-items: center; min-height: 44px;
padding: 0 10px; border-radius: var(--r);
font: 500 14px/1 var(--f-sans); color: var(--ink-1); text-decoration: none; white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) { .nav-a:hover { background: var(--hover); } }
.nav-a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
/* Outlined button on raised surfaces (dialogs, sheets) */
.btn-o {
height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 0 12px;
border: 1px solid var(--line-2); border-radius: var(--r);
background: var(--raised); color: var(--ink-1);
font: 500 14px/1 var(--f-sans); white-space: nowrap; text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { .btn-o:hover { border-color: var(--ink-3); } }
.btn-o.ic { width: 40px; padding: 0; }
.btn-o .i { width: 18px; height: 18px; }
.btn-strong { border-color: var(--ink-1); }
@media (hover: hover) and (pointer: fine) { .btn-strong:hover { border-color: var(--ink-1); box-shadow: inset 0 0 0 1px var(--ink-1); } }
/* Ghost button on the ground (content CTAs, "Use ", back link, 404). Never filled. */
.ghost {
align-self: flex-start;
height: 36px; display: inline-flex; align-items: center; gap: 8px;
padding: 0 12px;
border: 1px solid var(--line-2); border-radius: var(--r);
background: transparent; color: var(--ink-1);
font: 500 14px/1 var(--f-sans); text-decoration: none; white-space: nowrap;
transition: border-color var(--dur-1) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .ghost:hover { border-color: var(--ink-1); } }
.ghost .i { width: 18px; height: 18px; }
.ghost-lg { height: 44px; padding: 0 16px; }
.ghost-strong { border-color: var(--ink-1); }
@media (hover: hover) and (pointer: fine) { .ghost-strong:hover { box-shadow: inset 0 0 0 1px var(--ink-1); } }
/* A