/* Hallmark · shape: job traveller · genre: modern-minimal · theme: custom (by request: direction contract) · job: try · idea: "the site is the shop's own paperwork; tracking is a ticket stamped per station" · vibe: "shop floor tickets, concrete, safety orange" · hero: a traveller ticket with a working order lookup · nav: black header strip · footer: dark mast · imagery: photographs (stock stand-ins) · signature: stations stamped in sequence
 * axes: custom · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V5 · weakest: R, uppercase everywhere; labels now sentence case, caps kept for display only */
/* 02 · Job Traveller — shop paperwork on a concrete floor */
:root { --ink: #111; --ink2: #3a3a38; --ink3: #6a6965; --stock: #fefefb; --slab: #cfcdc8; --rule: #d9d7d2; --safety: #ff5a1f; --safety-deep: #c93d0c; --ease-out: cubic-bezier(.16, 1, .3, 1);   --ash: #a8a6a0; --safety-wash: #fff4ef; --ash-l: #d6d4cf; --ash-m: #bdbbb5; --tone-1: #8d8b86; --tone-2: rgba(0,0,0,.12); --tone-3: rgba(0,0,0,.35); --tone-4: #b9b7b1; --tone-5: rgba(0,0,0,.14); --tone-6: rgba(0,0,0,.4); --tone-7: rgba(0,0,0,.45); --tone-8: #75736e; --tone-9: #ff7440; --tone-10: #2a2a28; --tone-11: rgba(255,90,31,.06); --tone-12: #bbb; --tone-13: #bdbab4; --tone-14: rgba(17,17,17,.6); --font-cond: "Sofia Sans Condensed", system-ui, sans-serif; --font-body: "Sofia Sans", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace;
}
html { -webkit-tap-highlight-color: transparent; scrollbar-color: var(--tone-1) var(--slab); }
body { background: var(--slab) url("concrete.svg"); color: var(--ink); font-family: var(--font-body); font-size: 17px; }
::selection { background: var(--safety); color: var(--ink); }
:focus-visible { outline: 3px solid var(--safety); outline-offset: 2px; }
input { caret-color: var(--safety); }
.cond { font-family: var(--font-cond); text-transform: uppercase; letter-spacing: -.005em; line-height: .9; font-weight: 850; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
a.ul { text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1.5px; }
a.ul:hover { text-decoration-color: var(--safety); }

/* Label stock: white sheet with a soft lift off the concrete */
.ticket { background: var(--stock); position: relative; border-radius: 4px;
  box-shadow: 0 1px 1px var(--tone-2), 0 10px 22px -12px var(--tone-3); }
.ticket.hole::before { content: ""; position: absolute; left: 50%; top: 14px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%;
  background: var(--slab) url("concrete.svg"); box-shadow: inset 0 1px 2px var(--tone-3); }
/* Perforation: a row of punched dots plus side notches */
.perf { position: relative; height: 0; border-top: 2px dotted var(--tone-4); margin: 0 16px; }
.perf::before, .perf::after { content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--slab) url("concrete.svg"); }
.perf::before { left: -26px; } .perf::after { right: -26px; }
/* A stuck-on part label */
.label { background: var(--stock); border-radius: 3px; box-shadow: 0 1px 1px var(--tone-5), 0 6px 14px -8px var(--tone-6); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
a.label:hover, a.label:focus-visible { transform: translateY(-3px) rotate(0deg) !important; box-shadow: 0 2px 2px var(--tone-2), 0 18px 26px -14px var(--tone-7); }
.field-label { font-family: var(--font-cond); font-weight: 700; font-size: .92rem; color: var(--ink2); }

/* Printed form inputs: underline boxes */
.box { width: 100%; min-height: 54px; padding: .4rem .8rem; border: 2px solid var(--ink); border-radius: 2px; background: var(--stock); font-size: 1.15rem; color: var(--ink); }
.box::placeholder { color: var(--tone-8); }
.box:focus { outline: none; box-shadow: 0 0 0 3px var(--safety); }
.box[aria-invalid="true"] { border-color: var(--safety-deep); background: var(--safety-wash); }
select.box { appearance: none; padding-right: 2.4rem; background: var(--stock) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23111' stroke-width='2'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right .9rem center; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 50px; padding: 0 1.3rem; border-radius: 2px;
  font-family: var(--font-cond); font-weight: 800; font-size: 1.12rem; transition: background-color .15s, color .15s, transform .15s; }
.btn:active { transform: translateY(1px); }
.btn-go { background: var(--safety); color: var(--ink); }
.btn-go:hover { background: var(--tone-9); }
.btn-ink { background: var(--ink); color: var(--stock); }
.btn-ink:hover { background: var(--tone-10); }
.btn-line { box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--stock); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* Checkbox printed as a form box */
.tick { display: flex; align-items: center; gap: .7rem; padding: .4rem 0; cursor: pointer; }
.tick input { appearance: none; width: 20px; height: 20px; border: 2px solid var(--ink); border-radius: 1px; display: grid; place-items: center; flex: none; background: var(--stock); }
.tick input:checked { background: var(--ink); }
.tick input:checked::after { content: ""; width: 10px; height: 5px; border: 2.5px solid var(--safety); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px,-1px); }
.tick:hover span:first-of-type { text-decoration: underline; text-underline-offset: .2em; }

/* Rubber stamp */
.stamp { display: inline-block; padding: .35rem .7rem .3rem; border: 3.5px solid var(--safety-deep); color: var(--safety-deep); border-radius: 5px; background: var(--tone-11);
  font-family: var(--font-cond); font-weight: 900; line-height: 1;
  transform: rotate(-6deg); -webkit-mask: url("ink.svg"); mask: url("ink.svg"); mix-blend-mode: multiply; }
.stamp small { display: block; font-family: var(--font-cond); font-weight: 800; font-size: .8rem; letter-spacing: 0; margin-top: .2rem; }

.chip { display: inline-flex; align-items: center; gap: .3rem; min-height: 32px; padding: 0 .3rem 0 .7rem; background: var(--ink); color: var(--stock); border-radius: 2px; font-size: .88rem; font-weight: 600; }
.chip button { width: 26px; height: 26px; display: grid; place-items: center; color: var(--tone-12); }
.chip button:hover { color: var(--safety); }

.photo { overflow: hidden; background: var(--tone-13); }
.photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }

dialog::backdrop { background: var(--tone-14); }
dialog[open] { animation: dlg .4s var(--ease-out); }
@keyframes dlg { from { opacity: 0; transform: translateY(16px) rotate(-.6deg); } }
nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--safety); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } }

html, body { overflow-x: clip; }

:focus-visible { outline-color: var(--ink); }
header :focus-visible, footer :focus-visible, .bg-ink :focus-visible { outline-color: var(--safety); }
.btn { white-space: nowrap; }