/* The page's own type and the skip link (the room template carried neither). */
.sh { font-family: var(--ovk-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 99; padding: 8px 12px; border-radius: 10px; background: var(--bg-card, #0f1729); color: inherit; }

/* Open.Shoes — the small set of page pieces the kit does not draw (tables, forms, the price chart).
   The room's look and every card, rail and scene come from kit.css, room.css and showcase.css. */
.sh-wrap { width: min(1180px, 100% - 32px); margin: 0 auto; }
.sh-page { padding: 28px 0 64px; }
.sh-page-h { max-width: 780px; margin: 0 0 18px; }
.sh-page-h h1 { margin: 0 0 8px; font-size: clamp(26px, 4vw, 40px); letter-spacing: -.02em; }
.sh-kicker { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--room-accent, var(--accent)); }
.sh-lede { margin: 0; color: var(--text-secondary, #96a7c2); line-height: 1.6; font-size: 16.5px; }
.sh-muted { color: var(--text-muted, #7386a3); }
.sh-fine { margin: 10px 0 0; color: var(--text-muted, #7386a3); font-size: 13px; line-height: 1.55; }
/* Status words use the theme's readable status colours (--ok/--warn are defined by no theme: pale green and amber
   on light themes). */
.sh-good { color: var(--success-text, #34d399); font-weight: 700; }
.sh-stale { color: var(--warning-text, #fbbf24); font-weight: 700; }
.sh-fresh { color: var(--success-text, #34d399); font-weight: 700; }
.sh-sec { margin: 34px 0 0; }
.sh-sec h2 { margin: 0 0 8px; font-size: clamp(20px, 2.4vw, 26px); }
.sh-sec h3 { margin: 0 0 4px; font-size: 15px; }
.sh-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--room-fill, var(--accent)); border-radius: 10px; background: var(--room-fill, var(--accent)); color: var(--room-on, #fff); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.sh-btn svg { width: 18px; height: 18px; }
.sh-btn-quiet { background: transparent; color: var(--room-strong, var(--text-primary)); }
.sh-btn:hover { filter: brightness(1.06); }
.sh-search { display: grid; grid-template-columns: minmax(200px, 2fr) repeat(5, minmax(110px, 1fr)) auto; gap: 10px; align-items: end; padding: 14px; margin: 0 0 20px; border: 1px solid var(--border, rgba(255,255,255,.1)); border-radius: 14px; background: var(--bg-secondary, #101828); }
.sh-search label { display: grid; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--text-secondary, #96a7c2); }
.sh-search input, .sh-search select { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--border, rgba(255,255,255,.14)); border-radius: 9px; background: var(--bg-primary, #0a0f1c); color: var(--text-primary, #e6edf7); font: inherit; }
.sh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.sh-grid > li { min-width: 0; }
.sh-empty { padding: 28px; margin: 20px 0; border: 1px dashed var(--border, rgba(255,255,255,.16)); border-radius: 16px; }
.sh-notice { padding: 12px 14px; margin: 14px 0; border: 1px solid var(--room-accent, var(--accent)); border-radius: 12px; background: color-mix(in srgb, var(--room-accent, var(--accent)) 12%, transparent); }
.sh-table-wrap { overflow-x: auto; margin: 10px 0; }
/* The API's routes, one card each: the method and the route on one line that wraps, what it does under it. A table
   squeezed the routes into a sliver on a phone (phone sweep, 2026-11-01). */
.sh-eps { display: grid; gap: 10px; margin: 10px 0 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); }
.sh-eps > div { min-width: 0; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border, #1f2d47); background: var(--bg-card, #0f1729); }
.sh-eps dt code { font-size: 13px; line-height: 1.5; color: var(--text-primary, #e6edf7); overflow-wrap: anywhere; }
.sh-eps .sh-m { margin-right: 6px; font-weight: 800; color: var(--success-text, #22c55e); }
.sh-eps .sh-m-post, .sh-eps .sh-m-put, .sh-eps .sh-m-patch { color: var(--warning-text, #f59e0b); }
.sh-eps .sh-m-delete { color: var(--danger-text, #ef4444); }
.sh-eps dd { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-secondary, #96a7c2); }
.sh-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sh-table caption { text-align: left; padding: 0 0 8px; color: var(--text-muted, #7386a3); font-size: 13px; }
.sh-table th, .sh-table td { padding: 9px 10px; border-bottom: 1px solid var(--border, color-mix(in srgb, var(--text-primary, #fff) 8%, transparent)); text-align: left; vertical-align: top; }
.sh-table th { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted, #7386a3); }
.sh-table small { color: var(--text-muted, #7386a3); }
.sh-watch { margin: 20px 0; padding: 18px; border: 1px solid var(--room-accent, var(--accent)); border-radius: 16px; background: var(--bg-secondary, #101828); }
.sh-watch h2 { margin: 0 0 6px; font-size: 20px; }
.sh-form-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.sh-form-row label { display: grid; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--text-secondary, #96a7c2); }
.sh-form-row input, .sh-form-row select { min-height: 40px; padding: 8px 10px; border: 1px solid var(--border, rgba(255,255,255,.14)); border-radius: 9px; background: var(--bg-primary, #0a0f1c); color: var(--text-primary, #e6edf7); font: inherit; }
.sh-shoe-h { margin: 14px 0 18px; }
.sh-shoe-h h1 { margin: 0 0 8px; font-size: clamp(28px, 5vw, 46px); letter-spacing: -.02em; }
.sh-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sh-chips li { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border, rgba(255,255,255,.14)); font-size: 13px; }
.sh-chart { margin: 10px 0; padding: 12px; border: 1px solid var(--border, rgba(255,255,255,.1)); border-radius: 14px; background: var(--bg-secondary, #101828); }
.sh-chart svg { display: block; width: 100%; height: auto; }
.sh-chart-axis { stroke: var(--border, rgba(255,255,255,.16)); stroke-width: 1; }
.sh-chart-line { stroke: var(--room-accent, var(--accent)); stroke-width: 2.5; stroke-linejoin: round; }
.sh-chart circle { fill: var(--room-accent, var(--accent)); }
.sh-chart figcaption { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin-top: 6px; font-size: 13px; color: var(--text-muted, #7386a3); }
.sh-chart figcaption b { font-size: 18px; color: var(--text-primary, #e6edf7); }
.sh-curve { display: flex; gap: 8px; align-items: end; overflow-x: auto; padding: 10px 2px; }
.sh-curve-point { display: grid; justify-items: center; gap: 3px; min-width: 54px; font-size: 12px; }
.sh-curve-size { font-weight: 800; }
.sh-curve-bar { display: block; width: 26px; height: 110px; border-radius: 6px 6px 0 0; background: linear-gradient(to top, color-mix(in srgb, var(--room-accent, var(--accent)) 30%, transparent), var(--room-accent, var(--accent))); clip-path: inset(calc(100% - var(--h)) 0 0 0); }
.sh-curve-point small { color: var(--text-muted, #7386a3); }
.sh-facts { display: grid; gap: 14px; margin: 34px 0 0; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.sh-facts > h2, .sh-facts > p { grid-column: 1 / -1; }
.sh-fact { padding: 14px; border: 1px solid var(--border, rgba(255,255,255,.1)); border-radius: 14px; background: var(--bg-secondary, #101828); }
.sh-fact dl { margin: 0; } .sh-fact dt { font-weight: 700; margin-top: 8px; } .sh-fact dd { margin: 2px 0 0; color: var(--text-secondary, #96a7c2); }
.sh-drops { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sh-drop { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 14px; border: 1px solid var(--border, rgba(255,255,255,.1)); border-radius: 14px; background: var(--bg-secondary, #101828); }
.sh-drop > div { display: grid; gap: 3px; min-width: 240px; }
.sh-drop-meta, .sh-drop-src { color: var(--text-muted, #7386a3); font-size: 13px; }
.sh-colour { color: var(--text-secondary, #96a7c2); }
.sh-drop-day h2 { margin: 26px 0 8px; font-size: 20px; }
.sh-scene-note, .sh-scene-drop, .sh-scene-track { padding: 16px; border: 1px solid var(--border, rgba(255,255,255,.12)); border-radius: 14px; background: var(--bg-secondary, #101828); }
.sh-scene-drop { display: grid; gap: 5px; }
.sh-scene-drop b { font-size: 20px; }
.sh-scene-tag { justify-self: start; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--room-accent, var(--accent)) 18%, transparent); color: var(--room-strong, var(--text-primary)); font-size: 12px; font-weight: 800; }
.sh-scene-track { display: grid; gap: 8px; }
.sh-scene-track > div { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-scene-track input, .sh-track-form input { flex: 1 1 260px; min-height: 40px; padding: 8px 10px; border: 1px solid var(--border, rgba(255,255,255,.14)); border-radius: 9px; background: var(--bg-primary, #0a0f1c); color: var(--text-primary, #e6edf7); font: inherit; }
.sh-track-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; padding: 16px; border: 1px solid var(--border, rgba(255,255,255,.12)); border-radius: 14px; background: var(--bg-secondary, #101828); }
.sh-track-form label { flex-basis: 100%; font-weight: 700; }
.sh-list { padding-left: 20px; line-height: 1.65; color: var(--text-secondary, #96a7c2); }
.sh-code { overflow-x: auto; padding: 12px 14px; border-radius: 12px; background: var(--bg-secondary, #101828); border: 1px solid var(--border, rgba(255,255,255,.1)); }
.sh-page-nav { display: flex; gap: 14px; align-items: center; justify-content: center; margin: 24px 0; }
/* The end of the list is plain text in the muted colour (AA on every theme), not a faded link to no page. */
.sh-page-nav .is-off { color: var(--text-muted, #7386a3); }
.crumbs { font-size: 13px; color: var(--text-muted, #7386a3); margin: 10px 0 0; }
.crumbs a { color: inherit; }
@media (max-width: 900px) { .sh-search { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .sh-search { grid-template-columns: 1fr; } .sh-wrap { width: min(100% - 24px, 1180px); } }
/* Shared's room hero, chips and rails bleed 16 px past a 16 px gutter; this site's phone gutter is 12 px (11-01 phone sweep: +4 px) */
@media (max-width: 640px) { .sh-wrap .ovk-rail { --ovk-rail-bleed: 12px; } .sh-wrap .sc-room-hero, .sh-wrap .sc-room-chips { margin-inline: -12px; padding-inline: 12px; } }

/* The room's motif: one stroke draws the shoe, then three stores' tags rise in and the lowest lights up. Motion
   follows the network's tokens (Calm stills it); reduced motion shows the finished picture. */
.sh-motif { position: relative; width: min(100%, 400px); aspect-ratio: 16 / 11; margin: 0 auto; color: var(--room-accent); }
.sh-shoe { position: absolute; inset: 10% 6% auto; width: 84%; }
.sh-shoe path { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100;
  animation: shDraw calc(var(--ov-dur-4, .52s) * 3.5) var(--ov-ease-in-out, ease-in-out) both; }
@keyframes shDraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.sh-mt { position: absolute; display: grid; gap: 1px; padding: 7px 12px; border-radius: 10px; background: var(--ovk-panel, #121826); border: 1px solid var(--ovk-line, rgba(255,255,255,.1));
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .7); color: var(--ovk-text, #e8ecf3); font-variant-numeric: tabular-nums;
  animation: shTag var(--ov-dur-4, .52s) var(--ov-ease-spring, cubic-bezier(.34, 1.56, .64, 1)) both; }
.sh-mt small { font-size: 11px; color: var(--ovk-muted, #93a0b4); }
.sh-mt b { font-size: 18px; }
.sh-mt-1 { right: 0; top: 0; animation-delay: calc(var(--ov-dur-4, .52s) * 3); }
.sh-mt-2 { right: 18%; bottom: 0; animation-delay: calc(var(--ov-dur-4, .52s) * 3.4); }
.sh-mt-3 { left: 4%; bottom: 0; animation-delay: calc(var(--ov-dur-4, .52s) * 3.8); }
.sh-mt.is-best { border-color: var(--room-accent); box-shadow: 0 0 0 1px var(--room-accent), 0 14px 30px -18px rgba(0, 0, 0, .7); }
.sh-mt.is-best b { color: var(--room-strong, var(--room-accent)); }
/* The tags rise into place. They used to slide in from 24 px to the right and wait there through their delay, so the
   right-hand one stood past the edge for the first two seconds (the release check: a 761 px page at 768, 2026-11-02). */
@keyframes shTag { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .sh-shoe path, .sh-mt { animation: none; } }

/* Tables on a phone (phone sweep, 2026-11-01): a table of three columns or more whose cells name their column (data-label) shows each row as a card, the first
   cell its title and every other cell named by its column (html.js gives each cell its data-label). Narrower tables
   stay tables. Nothing is left out and nothing scrolls sideways. */
@media (max-width: 640px) {
    .table-wrap:has(> table thead th:nth-child(3)):has(> table td[data-label]) { overflow: visible; }
    .table-wrap > table:has(thead th:nth-child(3)):has(td[data-label]) { display: block; }
    .table-wrap > table:has(thead th:nth-child(3)):has(td[data-label]) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .table-wrap > table:has(thead th:nth-child(3)):has(td[data-label]) tbody { display: grid; gap: 10px; }
    .table-wrap > table:has(thead th:nth-child(3)):has(td[data-label]) tr { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--border, #1f2d47); border-radius: 14px; background: var(--bg-card, var(--bg-secondary, #101828)); }
    .table-wrap > table:has(thead th:nth-child(3)):has(td[data-label]) td { display: block; min-width: 0; padding: 0; border: 0; overflow-wrap: anywhere; }
    .table-wrap > table:has(thead th:nth-child(3)):has(td[data-label]) td:first-child { font-weight: 700; color: var(--text-primary, #e6edf7); }
    .table-wrap > table:has(thead th:nth-child(3)):has(td[data-label]) td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted, #7386a3); }
    .table-wrap > table:has(thead th:nth-child(3)):has(td[data-label]) td:empty { display: none; }
}