/* Till receipt — the manual as a long receipt from the showroom: one narrow monospace column on a paper strip with
   torn zigzag ends (gradients), dashed rules, and dotted leaders drawn by a flex item that grows.
   Designed by machine for the Slopwright. */
:root {
  color-scheme: light;
  --counter: #6e7b85;
  --paper: #fbfaf6;
  --ink: #1d1d1d;
  --fade: #4d4d4d;
  --mono: "Courier New", Courier, "Liberation Mono", "DejaVu Sans Mono", monospace;
}
* { box-sizing: border-box; }
html { overflow-x: clip; }
body {
  min-width: 320px; margin: 0; padding: 30px 12px 50px; color: var(--ink); font: 15px/1.5 var(--mono);
  background: linear-gradient(180deg, #5d6973, var(--counter) 300px), var(--counter);
}
a { color: var(--ink); text-underline-offset: 3px; }
:where(a, [tabindex]):focus-visible { outline: 2px dashed var(--ink); outline-offset: 3px; background: #ffef9a; }
img { max-width: 100%; height: auto; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 10; padding: 8px 14px; background: var(--paper); color: var(--ink); }
.skip:focus { top: 12px; }
.extra { display: none; }

/* the strip of paper, with torn zigzag ends */
.page {
  position: relative; max-width: 44ch; margin: 18px auto; padding: 22px 18px 26px;
  background: var(--paper); box-shadow: 0 16px 30px rgba(0, 0, 0, .35);
}
.page::before, .page::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; background-size: 16px 12px; background-repeat: repeat-x; }
.page::before { top: -12px; background-image: conic-gradient(from 135deg at 50% 0, var(--paper) 90deg, transparent 0); }
.page::after { bottom: -12px; background-image: conic-gradient(from -45deg at 50% 100%, var(--paper) 90deg, transparent 0); }
.main:focus { outline: none; }
hr, .chapter, .contents, .outfits, .site-foot { border-color: var(--ink); }

.site-head { text-align: center; padding-bottom: 12px; border-bottom: 2px dashed var(--ink); }
.masthead { display: flex; justify-content: center; align-items: center; gap: 10px; }
.masthead .brand { display: flex; align-items: center; min-height: 40px; }
.masthead .brand img { display: block; height: 24px; width: auto; filter: grayscale(1); }
.site-name { font-weight: 700; text-decoration: none; }
.site-name::before { content: "/ "; }
.site-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 14px; text-transform: uppercase; font-size: 13px; }
.site-nav a { display: inline-flex; align-items: center; min-height: 32px; }

.title-block { padding: 14px 0; text-align: center; border-bottom: 2px dashed var(--ink); }
.edition { margin: 0; font-size: 13px; text-transform: uppercase; }
.edition::before { content: "STORE 0001 · TILL 3 · "; }
.title { margin: 8px 0; font: 700 28px/1.1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.title::before, .title::after { content: "*"; margin: 0 .3em; }
.subtitle { margin: 0; color: var(--fade); }

/* leaders: the gap between name and price is a flex item that grows, dotted */
.contents { padding: 12px 0; border-bottom: 2px dashed var(--ink); }
.contents-title { margin: 0 0 6px; font: 700 15px var(--mono); text-transform: uppercase; }
.contents-list { margin: 0; padding: 0; list-style: none; counter-reset: c; }
.contents-list li { display: flex; align-items: baseline; gap: 4px; counter-increment: c; }
.contents-list li::after { content: counter(c, decimal-leading-zero); order: 3; }
.contents-list li::before { content: ""; order: 2; flex: 1; border-bottom: 2px dotted var(--ink); min-width: 1ch; }
.contents-list a { order: 1; display: inline-block; padding: 3px 0; }

.chapter { padding: 12px 0; border-bottom: 2px dashed var(--ink); }
.chapter-title { display: flex; gap: 1ch; margin: 0 0 8px; font: 700 15px var(--mono); text-transform: uppercase; }
.chapter-num::before { content: "#"; }
.chapter-body p { margin: 0 0 10px; }
.first { text-transform: uppercase; }
.plate { margin: 10px 0; text-align: center; }
.plate img { display: block; width: 100%; filter: grayscale(1) contrast(1.4) brightness(1.1); }
.plate figcaption { margin-top: 4px; font-size: 13px; color: var(--fade); }
.tools { margin: 0 0 10px; padding: 0; list-style: none; }
.tools li { margin-bottom: 6px; }
.tools li::before { content: "1 x "; font-weight: 700; }
.note { margin: 10px 0; padding: 8px; border: 2px solid var(--ink); text-align: center; text-transform: uppercase; }
.note p { margin: 0; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
caption { text-align: left; text-transform: uppercase; padding-bottom: 4px; }
th, td { padding: 4px 4px 4px 0; text-align: left; vertical-align: top; border-bottom: 1px dotted var(--ink); }
thead th { border-bottom: 2px solid var(--ink); text-transform: uppercase; }
.rules { margin: 0 0 10px; padding-left: 3ch; }
.rules li { margin-bottom: 6px; }
.saying { margin: 10px 0 0; padding: 8px 0; border-block: 2px solid var(--ink); text-align: center; }
.saying p { margin: 0; font-weight: 700; text-transform: uppercase; }
.saying footer { font-size: 13px; color: var(--fade); }
/* hazards and glossary as line items with leaders */
.hazards, .glossary { margin: 0; }
.hazard { margin-bottom: 8px; }
.hazard dt, .glossary dt { display: flex; align-items: baseline; gap: 4px; font-weight: 700; text-transform: uppercase; }
.hazard dt::after { content: "VOID"; order: 3; }
.glossary dt::after { content: "0.00"; order: 3; }
.hazard dt::before, .glossary dt::before { content: ""; order: 2; flex: 1; border-bottom: 2px dotted var(--ink); min-width: 1ch; }
dd { margin: 0 0 8px 2ch; color: var(--fade); }
.sign-off { margin-top: 12px; text-align: center; text-transform: uppercase; font-weight: 700; }
.sign-off::after { content: "TOTAL DUE ........ 0.00"; display: block; margin-top: 10px; padding-top: 8px; border-top: 2px solid var(--ink); }

.outfits { padding: 12px 0; border-bottom: 2px dashed var(--ink); }
.outfits-title { margin: 0 0 6px; font: 700 15px var(--mono); text-transform: uppercase; }
.outfits-lede { margin: 0 0 8px; color: var(--fade); font-size: 13px; }
.outfit-list { margin: 0; padding: 0; list-style: none; }
.outfit { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; margin-bottom: 2px; font-size: 13px; }
.outfit-link { order: 1; display: inline-block; min-height: 24px; padding: 2px 0; }
.outfit::before { content: ""; order: 2; flex: 1; border-bottom: 2px dotted var(--ink); min-width: 1ch; }
.outfit::after { content: "1.00"; order: 3; }
.outfit-by, .outfit-technique, .outfit-note { display: none; }
#th-receipt { padding: 4px; background: var(--ink); color: var(--paper); }
#th-receipt .outfit-link { color: var(--paper); font-weight: 700; }
#th-receipt::before { border-color: var(--paper); }
#th-receipt::after { content: "PAID"; font-weight: 700; }

.site-foot { padding-top: 14px; text-align: center; font-size: 13px; }
.site-foot p { margin: 0 0 8px; }
.site-foot::after { content: "THANK YOU · PLEASE COME AGAIN · NO REFUNDS ON IMPOSSIBLE THINGS"; display: block; margin-top: 12px; font-weight: 700; letter-spacing: .06em; }

/* moving between outfits: a cross-document view transition where the browser has them (Chromium did, Firefox did not, when check.mjs last ran), with the
   masthead and the title carried across; an ordinary page load elsewhere, and under reduced motion */
@view-transition { navigation: auto; }
.masthead { view-transition-name: masthead; }
.title { view-transition-name: manual-title; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }