/*
* Field Lab v3: base + component CSS. Requires tokens.css first.
*
*
*
*
* Opt-in by class (everything is prefixed fl-) except the small base layer
* in ยง1, which only sets page colours, fonts and the focus ring.
* The look: square plates, 1px ink rules, mono uppercase labels, one hot
* orange, hard offset "stamp" shadows, graph-paper hairlines.
*
* v3 changes from v2: the stamp shadow is ink in both themes; the running
* pill is outlined with a ringed orange dot (+ an "open" pill); disabled and
* pill-CTA buttons; the bracket-cornered card; the notice; the list row,
* whose hover is a surface-2 fill with the arrow turning orange (v2 filled
* the whole row orange). Accent is reserved for one primary action per view,
* the headline mark, the scan line and small live indicators.
*/
/* ---- 1. Base -------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body {
background: var(--bg);
color: var(--ink);
font: var(--t-body);
font-variant-numeric: tabular-nums;
}
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--on-accent); }
/* ---- 2. Type -------------------------------------------------------- */
/* Display: Archivo squeezed to ~70% width. Add text-transform:uppercase
* yourself for the full Field Lab headline (the site kept mixed case). */
.fl-display { font-family: var(--f-display); font-stretch: 70%; font-weight: 800; letter-spacing: -.02em; }
.fl-h1 { font: var(--t-h1); font-stretch: 68%; letter-spacing: -.03em; }
.fl-h2 { font: var(--t-h2); font-stretch: 82%; letter-spacing: -.03em; }
.fl-h3 { font: var(--t-h3); font-stretch: 90%; letter-spacing: -.02em; }
.fl-mono { font-family: var(--f-mono); }
.fl-label { font: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.fl-spec-text { font: var(--t-spec); letter-spacing: .08em; text-transform: uppercase; }
/* Headline highlight: an orange plate behind a word. */
.fl-mark { background: var(--accent); color: var(--on-accent); padding: 0 .06em; }
/* Bracket label: [ LIKE THIS ], brackets in accent ink. */
.fl-bracket { font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; }
.fl-bracket::before { content: "[ " / ""; color: var(--accent-ink); white-space: pre; }
.fl-bracket::after { content: " ]" / ""; color: var(--accent-ink); white-space: pre; }
/* ---- 3. Buttons ----------------------------------------------------- */
/* Hover lifts the button up-left and leaves a hard "stamp" behind it. */
.fl-btn {
font: 700 16px/1 var(--f-body);
min-height: 48px; padding: 0 20px;
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
border: 1.5px solid var(--ink); border-radius: var(--radius-sm);
background: transparent; color: var(--ink); text-decoration: none; cursor: pointer;
transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.fl-btn--primary { background: var(--accent); color: var(--on-accent); }
.fl-btn--secondary { background: var(--surface); }
.fl-btn--ghost { border-color: transparent; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.fl-btn:not(.fl-btn--ghost):not(.fl-btn--pill):not(:disabled):hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-stamp); }
.fl-btn--ghost:hover { background: var(--surface-2); }
.fl-btn:active:not(:disabled) { transform: none; box-shadow: none; }
.fl-btn:disabled { background: var(--surface-2); color: var(--ink-2); border: 1.5px dashed var(--line); cursor: not-allowed; text-decoration: none; transform: none; box-shadow: none; }
/* Pill CTA: rounded, with an arrow disc that turns 45deg on hover.
* See the experiments ↗ */
.fl-btn--pill { border-radius: var(--radius-pill); padding: 0 6px 0 20px; gap: 14px; }
.fl-btn--pill:hover { transform: none; box-shadow: none; background: var(--ink); color: var(--bg); }
.fl-btn__arrow { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--bg); display: inline-grid; place-items: center; font: 500 16px/1 var(--f-mono); transition: transform .25s var(--ease); }
.fl-btn--pill:hover .fl-btn__arrow { transform: rotate(45deg); }
.fl-btn--pill.fl-btn--primary:hover .fl-btn__arrow { background: var(--accent); color: var(--on-accent); }
/* ---- 4. Surfaces ---------------------------------------------------- */
/* Card: a square plate on the page. Panel: a heavier plate with a stamp. */
.fl-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-none); padding: var(--space-5); }
.fl-card--link { transition: background .2s var(--ease), border-color .2s var(--ease); }
.fl-card--link:hover { background: var(--surface-2); border-color: var(--ink); }
/* Bracket card: bg plate, 1.5px ink border, two corner ticks (top-left,
* bottom-right), as in the Field Lab v3 component sheet. */
.fl-card--ticks { position: relative; background: var(--bg); border: 1.5px solid var(--ink); }
.fl-card--ticks::before, .fl-card--ticks::after { content: ""; position: absolute; width: 10px; height: 10px; border: 1.5px solid var(--ink); background: var(--bg); }
.fl-card--ticks::before { top: -6px; left: -6px; border-right: 0; border-bottom: 0; }
.fl-card--ticks::after { bottom: -6px; right: -6px; border-left: 0; border-top: 0; }
.fl-panel { background: var(--surface); border: 1px solid var(--ink); box-shadow: var(--shadow-stamp-lg); padding: var(--space-5); }
/* Spec sheet: two-column key/value table in mono caps (Field Lab hero). */
.fl-spec { margin: 0; border: 1px solid var(--ink); background: var(--bg); font: var(--t-spec); letter-spacing: .08em; text-transform: uppercase; }
.fl-spec > div { display: grid; grid-template-columns: 84px 1fr; border-top: 1px solid var(--line); }
.fl-spec > div:first-child { border-top: 0; }
.fl-spec dt, .fl-spec dd { margin: 0; padding: 6px 8px; }
.fl-spec dt { color: var(--ink-2); border-right: 1px solid var(--line); }
/* Band: the always-dark strip (telemetry, command bar). Focus rings flip. */
.fl-band { background: var(--band); color: var(--band-ink); }
.fl-band :focus-visible { outline-color: var(--band-ink); }
/* Notice: an ink tag, a message, an optional dismiss button.
* */
.fl-notice { display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid var(--ink); background: var(--surface-2); padding: 12px 14px; }
.fl-notice > b { font: 700 12px/18px var(--f-mono); background: var(--ink); color: var(--bg); padding: 0 6px; letter-spacing: .06em; flex: none; }
.fl-notice > p { margin: 0; font-size: 15px; line-height: 22px; flex: 1; }
.fl-notice > button { background: none; border: 0; color: var(--ink); font: 600 12px/1 var(--f-mono); text-transform: uppercase; min-width: 44px; min-height: 44px; margin: -12px -14px -12px 0; cursor: pointer; }
.fl-notice > button:hover { background: var(--bg); }
/* List row: a link row whose hover fill rises from the bottom in surface-2
* and whose arrow disc turns orange. Put .fl-row__arrow last. */
.fl-row { position: relative; display: flex; gap: 16px; align-items: center; padding: 20px 12px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; isolation: isolate; overflow: hidden; }
.fl-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--surface-2); transform: scaleY(0); transform-origin: bottom; transition: transform .4s var(--ease); }
.fl-row:hover::before, .fl-row:focus-visible::before { transform: scaleY(1); }
.fl-row:focus-visible { outline-offset: -3px; }
.fl-row__arrow { margin-left: auto; flex: none; width: 44px; height: 44px; border: 1.5px solid var(--ink); border-radius: 50%; display: grid; place-items: center; font: 500 18px/1 var(--f-mono); transition: transform .3s var(--ease), background .2s; }
.fl-row:hover .fl-row__arrow, .fl-row:focus-visible .fl-row__arrow { background: var(--accent); color: var(--on-accent); border-color: var(--ink); transform: translateX(4px); }
/* ---- 5. Rules ------------------------------------------------------- */
.fl-rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.fl-rule--ink { border-top: 2px solid var(--ink); }
/* ---- 6. Pills (status only) ----------------------------------------- */
.fl-pill { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border: 1.5px solid var(--ink); border-radius: var(--radius-pill); white-space: nowrap; }
.fl-pill::before { content: ""; width: 7px; height: 7px; background: currentColor; }
/* running: outlined, a blinking orange dot ringed in ink. open: dashed,
* hollow square. shipped: solid ink with a tick. archived: dashed, muted. */
.fl-pill--running { color: var(--ink); }
.fl-pill--running::before { border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--ink); animation: fl-blink 1.4s steps(2) infinite; }
.fl-pill--open { color: var(--ink); border-style: dashed; }
.fl-pill--open::before, .fl-pill--archived::before { background: none; border: 1.5px solid currentColor; }
.fl-pill--shipped { background: var(--ink); color: var(--bg); }
.fl-pill--shipped::before { width: 9px; height: 9px; clip-path: polygon(0 50%, 35% 90%, 100% 10%, 85% 0, 35% 60%, 15% 40%); }
.fl-pill--archived { color: var(--ink-2); border-style: dashed; }
@keyframes fl-blink { 50% { opacity: .25; } }
/* ---- 7. Graph paper ------------------------------------------------- */
/* 32px hairline grid. Purely decorative (--hairline never carries meaning).
* .fl-graph-paper--fade fades it out towards the bottom, as in the hero. */
.fl-graph-paper {
background-color: var(--bg);
background-image:
linear-gradient(var(--hairline) 1px, transparent 1px),
linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
background-size: 32px 32px;
}
.fl-graph-paper--fade { position: relative; isolation: isolate; }
.fl-graph-paper--fade::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background:
linear-gradient(var(--hairline) 1px, transparent 1px) 0 0 / 32px 32px,
linear-gradient(90deg, var(--hairline) 1px, transparent 1px) 0 0 / 32px 32px;
-webkit-mask-image: linear-gradient(#000 60%, transparent);
mask-image: linear-gradient(#000 60%, transparent);
}
/* ---- 8. Motion ------------------------------------------------------ */
/* Rise-in: 18px up + fade, 800ms. Stagger with --rd (delay). */
.fl-rise { opacity: 0; transform: translateY(18px); animation: fl-rise .8s var(--ease) var(--rd, 0s) forwards; }
@keyframes fl-rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.fl-rise { animation: none; opacity: 1; transform: none; }
.fl-btn, .fl-btn__arrow, .fl-row::before, .fl-row__arrow { transition: none; }
.fl-pill--running::before { animation: none; }
}