/* Crate Ruler's own pieces on top of the kit: the finder sheet, the readout and the tape. Colors, faces
   and radius come from identity.json through the --id-* values each page declares. */
body { font-size: 1.0625rem; }
h1, h2, h3, .brand { font-family: var(--font-display); font-weight: 400; letter-spacing: 0; }
h2 { font-size: var(--step-2); }
.site-header .brand { font-size: var(--step-1); gap: var(--s2); }
.site-header nav a { font-weight: 700; }
.hero-title { line-height: 1.05; max-width: 18ch; }
.promise { color: var(--ink); max-width: 34ch; }
.crumb { font-size: var(--step--1); margin: 0 0 var(--s1); }
.narrow { max-width: 760px; }

/* The band: a steel-blue field with a measuring grid, the finder sheet on it. */
.stage { background-image: linear-gradient(rgb(255 255 255 / 0.07) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.07) 1px, transparent 1px); background-size: 28px 28px; }
html[data-layout="stage"] .stage-sheet { max-width: 60rem; text-align: left; display: grid; gap: var(--s5); border: 3px solid var(--ink); }
@media (min-width: 760px) { html[data-layout="stage"] .stage-sheet.split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; } }
.inputs { display: grid; gap: var(--s4); align-content: start; }
.seg { display: flex; border-radius: var(--radius); }
.seg button { flex: 1 1 auto; border-radius: var(--radius-s); }
.seg button[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); box-shadow: none; }
.mode { display: grid; gap: var(--s3); }
.mode[hidden] { display: none; }
.dims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
@media (max-width: 420px) { .dims { grid-template-columns: 1fr; } }
.hint { color: var(--ink-2); font-size: var(--step--1); margin: 0; }
select.input { width: 100%; font-weight: 700; }

/* The readout: the size in big slab numerals, then the crate drawn on the tape. */
.readout { display: grid; gap: var(--s2); align-content: start; }
.readout .lead { font-weight: 700; color: var(--ink-2); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.06em; }
.readout .size-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2); }
.readout .big { font: 400 clamp(3.6rem, 2.4rem + 6vw, 6rem)/0.95 var(--font-display); color: var(--brand-text); font-variant-numeric: tabular-nums; }
.readout .unit { font: 400 var(--step-1)/1.1 var(--font-display); }
.readout .why { margin: 0; color: var(--ink-2); max-width: 44ch; }
.readout .btn { justify-self: start; margin-top: var(--s2); }

.tape { position: relative; margin-top: var(--s3); padding-top: 3.25rem; }
.tape .crate { position: absolute; left: 0; top: 0; height: 3rem; width: 0; border: 3px solid var(--ink); border-bottom: 0; border-radius: var(--radius-s) var(--radius-s) 0 0; background: repeating-linear-gradient(90deg, transparent 0 14px, color-mix(in oklab, var(--ink) 55%, transparent) 14px 16px), var(--surface); transition: width 0.25s ease; }
.tape .crate.off { opacity: 0; }
.tape .rule { position: relative; height: 2.6rem; background: #fcefb0; border: 3px solid var(--ink); border-radius: 2px; overflow: hidden;
  background-image: linear-gradient(90deg, #1b1d22 2px, transparent 2px), linear-gradient(90deg, #1b1d22 1px, transparent 1px);
  background-size: calc(100% / 54 * 6) 0.9rem, calc(100% / 54) 0.5rem; background-repeat: repeat-x; background-position: -1px 0, 0 0; }
.tape .rule span { position: absolute; bottom: 0.2rem; transform: translateX(-50%); font: 700 0.75rem/1 var(--font-body); color: #1b1d22; }
.tape .pin { position: absolute; top: -0.4rem; bottom: -0.4rem; width: 4px; margin-left: -2px; background: var(--accent); transition: left 0.25s ease; }
.tape .pin.off { opacity: 0; }
.tape-caption { font-size: var(--step--1); color: var(--ink-2); margin: var(--s1) 0 0; }

.divider-box { border-top: 3px dashed var(--line-strong); padding-top: var(--s4); display: grid; gap: var(--s2); }
.divider-box .why { margin: 0; }
@media (min-width: 760px) {
  .stage-sheet.finder { grid-template-areas: "inputs readout" "divider readout"; }
  .finder > .inputs { grid-area: inputs; } .finder > .readout { grid-area: readout; } .finder > .divider-box { grid-area: divider; align-self: start; }
}

/* The rest of the page. */
.chart { width: 100%; border-collapse: collapse; margin-block: var(--s4); background: var(--surface); border: 3px solid var(--ink); }
.chart th, .chart td { text-align: left; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); }
.chart th { font-size: var(--step--1); color: var(--ink-2); }
.chart td:nth-child(2) b { color: var(--brand-text); font-family: var(--font-display); font-weight: 400; font-size: var(--step-1); }
@media (max-width: 520px) { .chart th:nth-child(3), .chart td:nth-child(3) { display: none; } }
.breed-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s3); }
.breed-list a { display: block; padding: var(--s3); border: 3px solid var(--ink); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 700; box-shadow: var(--shadow-1); }
.breed-list a:hover { background: var(--brand); color: var(--brand-ink); }
.section-alt { background: color-mix(in oklab, var(--surface) 70%, var(--bg)); }
.fine { color: var(--ink-2); font-size: var(--step--1); margin-top: var(--s5); }
.steps { margin-top: var(--s4); }
@media (max-width: 759px) { html[data-layout="stage"] .stage { padding-block: var(--s4); } html[data-layout="stage"] .stage-sheet { padding: var(--s4); gap: var(--s4); } }
.readout .btn + .why { margin-top: var(--s2); }
@media (max-width: 480px) { html[data-layout="stage"] .hero-title { font-size: 2.15rem; } html[data-layout="stage"] .promise { font-size: var(--step-0); } }