/* Cards page (/cards/): the card orbit over the card library. Every rule is scoped under .cl-root; geometry and company
   colours arrive as custom properties set through CSSOM (--x, --y, --s, --o, --zi, --c, --ct, --cl, --z, --cl-p). */

.cl-root { --cl-r: 20px; --cl-gut: 32px; --cl-bg: 16px; --cl-ease: cubic-bezier(.2, .8, .2, 1); position: relative; padding-bottom: 24px; }
.cl-root button { touch-action: manipulation; }

/* ---------------------------------------------------------------- head: title left, lede on the axis, sort right */
.cl-root .cl-head { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); gap: 24px; align-items: end; padding-top: 24px; padding-bottom: 8px; }
/* No kicker above the title, as on every page: the title stands 24 px under the head like the site's page titles. */
.cl-root .cl-head h1 { font-size: 56px; line-height: .98; margin-top: 24px; }
.cl-root .cl-lede { text-align: center; color: var(--text-2); font-size: 14px; line-height: 1.55; max-width: 64ch; margin: 0 auto; }
.cl-root .cl-lede b { color: var(--text); font-weight: 500; }
.cl-root .cl-head-s { display: flex; justify-content: flex-end; }
.cl-root .cl-select { position: relative; display: inline-flex; width: 100%; max-width: 260px; }
.cl-root .cl-select select { width: 100%; min-height: 44px; padding: 0 40px 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--glass); color: var(--text); font: inherit; font-size: 14px; appearance: none; -webkit-appearance: none; cursor: pointer; }
.cl-root .cl-select select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cl-root .cl-select option { background: var(--space-1); color: var(--text); }
.cl-root .cl-chev { position: absolute; right: 16px; top: 50%; width: 10px; height: 6px; margin-top: -3px; fill: none; stroke: var(--text); stroke-width: 1.3; pointer-events: none; }

/* ---------------------------------------------------------------- the switch on the central axis */
.cl-root .cl-switchbar { position: relative; z-index: 40; display: flex; justify-content: center; height: 54px; margin: 4px 0 16px; pointer-events: none; }
.cl-root .cl-seg { display: inline-flex; padding: 4px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(10, 11, 34, .88); }
.cl-root .cl-seg button { min-height: 40px; padding: 0 16px; border-radius: 999px; font-family: var(--font-cond); font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); transition: background .2s ease, color .2s ease; }
.cl-root .cl-seg button[aria-pressed="true"] { background: var(--gold); color: var(--space-0); }
.cl-root .cl-seg button:hover:not([aria-pressed="true"]) { color: var(--text); }
.cl-root .cl-switch { pointer-events: auto; display: inline-grid; grid-template-columns: 1fr 1fr; box-shadow: 0 12px 36px rgba(0, 0, 0, .45); }
.cl-root .cl-switch button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 112px; min-height: 44px; }
.cl-root .cl-switch svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; }

/* ---------------------------------------------------------------- hero: rings, type, orbit stage, focus facts */
.cl-root .cl-hero { --cl-p: 0; transform-origin: 50% 0; transform: translate3d(0, calc(var(--cl-p) * 56px), 0) scale(calc(1 - .07 * var(--cl-p))); opacity: calc(1 - .65 * var(--cl-p)); }
.cl-root .cl-rings { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr); grid-template-areas: "sl seasons year forms sr"; align-items: center; gap: 24px; margin-bottom: 8px; }
.cl-root .cl-side-l { grid-area: sl; justify-self: start; width: 100%; max-width: 260px; }
.cl-root .cl-side-r { grid-area: sr; justify-self: end; width: 100%; max-width: 260px; display: flex; justify-content: flex-end; }
.cl-root .cl-ring-l { grid-area: seasons; justify-content: flex-end; }
.cl-root .cl-year { grid-area: year; display: flex; justify-content: center; }
.cl-root .cl-ring-r { grid-area: forms; justify-content: flex-start; }
.cl-root .cl-rings.cl-stack { grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr); grid-template-areas: "sl sl . sr sr" ". seasons year forms ."; row-gap: 16px; }
.cl-root .cl-ring-group { display: flex; flex-wrap: wrap; gap: 12px; }
.cl-root .cl-search { position: relative; display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 16px 0 40px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--glass); }
.cl-root .cl-search:focus-within { border-color: var(--gold); }
.cl-root .cl-search input { width: 100%; min-height: 42px; border: 0; outline: none; background: transparent; color: var(--text); font: inherit; font-size: 14px; }
.cl-root .cl-search input::placeholder { color: var(--faint); }
.cl-root .cl-ico { position: absolute; left: 16px; top: 50%; width: 14px; height: 14px; margin-top: -7px; fill: none; stroke: var(--text); stroke-width: 1.3; pointer-events: none; }
.cl-root .cl-ring { width: 64px; height: 64px; flex: none; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--line-2); background: radial-gradient(circle, rgba(255, 255, 255, .05), transparent 70%); transition: border-color .2s ease, box-shadow .3s ease, transform .3s var(--cl-ease); }
.cl-root .cl-ring b { font-family: var(--font-cond); font-weight: 500; font-size: 15px; letter-spacing: .06em; line-height: 1.1; white-space: nowrap; }
.cl-root .cl-ring small { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.cl-root button.cl-ring:hover:not(:disabled) { border-color: var(--text-2); transform: scale(1.06); }
.cl-root .cl-ring:disabled { opacity: .42; cursor: default; }
.cl-root .cl-ring.cl-on { border: 2px solid var(--gold); box-shadow: 0 0 0 6px rgba(245, 209, 138, .08), 0 0 24px rgba(245, 209, 138, .25); }
.cl-root .cl-ring.cl-on b { color: var(--gold); }
.cl-root .cl-ring-year { width: 88px; height: 88px; }
.cl-root .cl-ring-year b { font-family: var(--font-sans); font-weight: 200; font-size: 22px; letter-spacing: -.02em; }
.cl-root .cl-typebar { display: flex; justify-content: center; align-items: flex-start; position: relative; z-index: 90; height: 0; overflow: visible; }
.cl-root .cl-typebar .cl-seg { transform: translateY(6px); }

.cl-root .cl-stage { position: relative; height: 400px; overflow: hidden; outline: none; border-radius: var(--cl-r); }
.cl-root .cl-stage:focus-visible { box-shadow: inset 0 0 0 2px var(--gold); }
.cl-root .cl-path { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.cl-root .cl-path ellipse { fill: none; stroke: rgba(236, 238, 246, .14); stroke-width: 1; }
.cl-root .cl-path .cl-path-2 { stroke-dasharray: 2 10; stroke: rgba(245, 209, 138, .25); }
.cl-root .cl-spin { position: absolute; left: 50%; top: 53%; width: 428px; height: 428px; margin: -214px 0 0 -214px; border-radius: 50%; border: 1px dashed rgba(245, 209, 138, .22); animation: cl-spin 90s linear infinite; pointer-events: none; }
.cl-root .cl-spin::after { content: ""; position: absolute; left: 50%; top: -4px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); }
@keyframes cl-spin { to { transform: rotate(360deg); } }
.cl-root .cl-moons { position: absolute; left: 50%; top: 53%; width: 0; height: 0; }
.cl-root .cl-moon { --x: 0px; --y: 0px; --s: 1; --o: 1; --zi: 1; position: absolute; left: 0; top: 0; z-index: var(--zi); display: flex; flex-direction: column; align-items: center; gap: 12px; opacity: var(--o); transform: translate(-50%, -50%) translate(var(--x), var(--y)) scale(var(--s)); transition: transform .8s var(--cl-ease), opacity .8s ease; will-change: transform; }
.cl-root .cl-moon.cl-still { transition: none; }
.cl-root .cl-moon.cl-gone { pointer-events: none; }
.cl-root .cl-moon-hit { display: block; border-radius: 12px; }
.cl-root .cl-moon-hit:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
.cl-root .cl-pair { display: flex; gap: 12px; justify-content: center; }
.cl-root .cl-thumb { display: block; width: 150px; aspect-ratio: 480 / 870; border-radius: 8px; overflow: hidden; background: #0D0E2A; box-shadow: 0 0 0 1px var(--line-2), 0 18px 40px rgba(0, 0, 0, .45); transition: transform .3s var(--cl-ease); }
.cl-root .cl-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cl-root .cl-moon.cl-c .cl-thumb { box-shadow: 0 0 0 1px var(--cl), 0 0 48px color-mix(in srgb, var(--cl) 30%, transparent), 0 24px 60px rgba(0, 0, 0, .6); }
.cl-root .cl-moon.cl-c .cl-thumb:hover { transform: translateY(-4px); }
.cl-root .cl-moon-cap { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--text-2); white-space: nowrap; }
.cl-root .cl-moon-cap b { font-weight: 500; color: var(--text); }
.cl-root .cl-moon:not(.cl-c) .cl-moon-cap { font-size: 22px; transition: opacity .4s ease; }
.cl-root .cl-moon:not(.cl-c) .cl-moon-cap .cl-mono { --cl-s: 44px; }
.cl-root .cl-moon:not(.cl-c) .cl-moon-cap .cl-mono span { font-size: 13px; }
.cl-root .cl-moon.cl-far .cl-moon-cap { opacity: 0; }
.cl-root .cl-step { position: absolute; top: 50%; z-index: 80; width: 56px; height: 56px; margin-top: -28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(10, 11, 34, .82); font-size: 22px; line-height: 1; transition: border-color .2s ease, background .2s ease; }
.cl-root .cl-step:hover:not(:disabled), .cl-root .cl-step:focus-visible { border-color: var(--gold); background: rgba(245, 209, 138, .1); }
.cl-root .cl-step:disabled { opacity: .35; cursor: default; }
.cl-root .cl-prev { left: 16px; }
.cl-root .cl-next { right: 16px; }

/* company monogram: the ticker on the company colour, with a light outline for very dark colours */
.cl-root .cl-mono { --cl-s: 32px; flex: none; width: var(--cl-s); height: var(--cl-s); border-radius: 50%; display: inline-grid; place-items: center; background: var(--c); box-shadow: 0 0 0 1.5px var(--cl), 0 0 16px color-mix(in srgb, var(--cl) 30%, transparent); color: var(--ct); font-family: var(--font-cond); font-weight: 600; letter-spacing: .02em; overflow: hidden; }
.cl-root .cl-mono span { font-size: calc(var(--cl-s) * .3); line-height: 1; white-space: nowrap; }
.cl-root .cl-mono-xs { --cl-s: 24px; }
.cl-root .cl-mono-xs span { font-size: 7.5px; }
.cl-root .cl-mono-sm { --cl-s: 36px; }
.cl-root .cl-mono-md { --cl-s: 44px; }

/* focus facts under the orbit: Summary, the company season, Technical sheet */
.cl-root .cl-info { margin-top: 8px; min-height: 64px; }
.cl-root .cl-fi { display: grid; grid-template-columns: 200px minmax(0, 1fr) 200px; gap: var(--cl-gut); align-items: center; }
.cl-root .cl-fi-open { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 56px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--glass); padding: 8px 16px; transition: border-color .2s ease, transform .3s var(--cl-ease); }
.cl-root .cl-fi-open b { font-family: var(--font-cond); font-weight: 500; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.cl-root .cl-fi-open small { font-size: 11px; color: var(--muted); }
.cl-root button.cl-fi-open:hover, .cl-root button.cl-fi-open:focus-visible { border-color: var(--cl); transform: translateY(-2px); }
.cl-root .cl-fi-none { opacity: .5; border-style: dashed; }
.cl-root .cl-fi-c { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; min-width: 0; }
.cl-root .cl-fi-co { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; min-width: 0; max-width: 100%; }
.cl-root .cl-fi-co b { flex: 0 1 auto; min-width: 0; margin-right: 4px; font-size: 18px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-root .cl-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--text-2); white-space: nowrap; }
.cl-root .cl-tag-season { border-color: rgba(245, 209, 138, .6); color: var(--gold); }
.cl-root .cl-fi-pos { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.cl-root .cl-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 0; text-align: center; color: var(--muted); }
/* "Show more" and "Clear the filters" use the site's shared gold pill (more-pill), as on every page. */

/* ---------------------------------------------------------------- hand-off: the axis continues into the library */
.cl-root .cl-handoff { display: flex; align-items: center; justify-content: center; gap: 16px; padding-top: 8px; padding-bottom: 24px; }
.cl-root .cl-handoff::before, .cl-root .cl-handoff::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(245, 209, 138, .45)); }
.cl-root .cl-handoff::after { background: linear-gradient(90deg, rgba(245, 209, 138, .45), transparent); }
.cl-root .cl-go { flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--glass); font-family: var(--font-cond); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); transition: border-color .2s ease, color .2s ease; }
.cl-root .cl-go:hover, .cl-root .cl-go:focus-visible { border-color: var(--gold); color: var(--gold); }

/* ---------------------------------------------------------------- library */
.cl-root .cl-library { scroll-margin-top: 88px; }
.cl-root .cl-libh { align-items: flex-end; }
.cl-root .cl-libh-l { display: flex; flex-direction: column; gap: 4px; }
.cl-root .cl-lib-n { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.cl-root .cl-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 288px; grid-auto-flow: row dense; gap: var(--cl-bg); }
.cl-root .cl-tile { position: relative; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; padding: 12px; overflow: hidden; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--cl) 22%, var(--line)); background: rgba(255, 255, 255, .03); }
.cl-root .cl-tile::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--c); box-shadow: 0 0 0 1px var(--cl), 0 0 12px var(--cl); opacity: .9; }
.cl-root .cl-tile:hover, .cl-root .cl-tile:focus-within { border-color: color-mix(in srgb, var(--cl) 55%, var(--line-2)); }
.cl-root .cl-t-hit { position: absolute; inset: 0; z-index: 1; border-radius: 18px; }
.cl-root .cl-t-hit:focus-visible { outline-offset: -3px; }
.cl-root .cl-t-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; min-height: 48px; }
.cl-root .cl-t-name { min-width: 0; display: grid; align-content: center; gap: 2px; }
/* names wrap at word boundaries onto at most two lines; every tile keeps room for two, so previews stay equal */
.cl-root .cl-t-name b { font-weight: 500; font-size: 13px; line-height: 1.2; overflow-wrap: normal; word-break: normal; hyphens: none; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cl-root .cl-t-name small { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.cl-root .cl-pvs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 8px; min-height: 0; }
.cl-root .cl-pv { position: relative; z-index: 2; display: block; min-height: 44px; height: 100%; border-radius: 8px; overflow: hidden; background: #0D0E2A; border: 1px solid rgba(255, 255, 255, .1); }
.cl-root .cl-pv img { width: 100%; height: 100%; object-fit: contain; object-position: center; transition: transform .5s var(--cl-ease); }
.cl-root .cl-pv:hover img, .cl-root .cl-pv:focus-visible img { transform: scale(1.04); }
.cl-root .cl-pv:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.cl-root .cl-t-hit:hover ~ .cl-t-head b { color: var(--gold); }
/* each preview shows the whole card, letterboxed on the tile ground, never cropped */
/* the type caption stays on one line over the bottom of its preview */
.cl-root .cl-pv-l { position: absolute; left: 4px; bottom: 4px; max-width: calc(100% - 8px); font-family: var(--font-cond); font-size: 10.5px; font-weight: 500; line-height: 1.2; letter-spacing: 0; white-space: nowrap; background: rgba(4, 5, 13, .82); padding: 2px 4px; border-radius: 4px; }
.cl-root .cl-noimg { display: grid; place-items: center; height: 100%; padding: 8px; text-align: center; font-size: 11px; color: var(--muted); }
.cl-root .cl-t-foot { display: flex; justify-content: space-between; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.cl-root .cl-t-foot span:first-child { color: var(--text-2); }
.cl-root .cl-focus { grid-column: span 2; grid-row: span 2; padding: 16px; z-index: 2; grid-template-rows: auto minmax(0, 1fr); border-color: color-mix(in srgb, var(--cl) 60%, var(--line-2)); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 18%, rgba(255, 255, 255, .05)), rgba(255, 255, 255, .02) 62%); box-shadow: 0 0 0 1px rgba(245, 209, 138, .25), 0 20px 60px rgba(0, 0, 0, .4); }
.cl-root .cl-focus .cl-t-head { padding-right: 120px; }
.cl-root .cl-focus .cl-t-name b { font-size: 20px; font-weight: 400; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cl-root .cl-focus .cl-t-name small { font-size: 12px; }
.cl-root .cl-t-orb { position: absolute; right: 16px; top: 24px; color: var(--gold); display: inline-flex; align-items: center; gap: 8px; }
.cl-root .cl-t-orb::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.cl-root .cl-f-body { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; min-height: 0; }
.cl-root .cl-f-info { display: grid; gap: 12px; min-width: 0; padding-top: 12px; border-top: 1px solid var(--line); }
.cl-root .cl-f-info dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
.cl-root .cl-f-info dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.cl-root .cl-f-info dd { font-size: 12.5px; font-weight: 500; line-height: 1.3; }
.cl-root .cl-f-head { font-size: 12.5px; line-height: 1.4; color: var(--text-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cl-root .cl-f-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.cl-root .cl-link { position: relative; z-index: 2; display: inline-flex; align-items: center; min-height: 32px; font-size: 13px; color: var(--gold); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(245, 209, 138, .4); }
.cl-root .cl-link:hover, .cl-root .cl-link:focus-visible { text-decoration-color: var(--gold); }
.cl-root .cl-filler { display: grid; grid-template-rows: auto auto auto; place-content: center; justify-content: stretch; gap: 4px; text-align: center; background: transparent; border: 1px dashed var(--line); }
.cl-root .cl-filler::before { display: none; }
.cl-root .cl-filler span { font-family: var(--font-cond); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.cl-root .cl-filler b { font-weight: 200; font-size: 36px; line-height: 1; }
.cl-root .cl-filler small { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); padding: 0 12px; overflow-wrap: anywhere; }
.cl-root .cl-none { grid-column: 1 / -1; padding: 24px 0; text-align: center; color: var(--muted); }
.cl-root .cl-more { display: flex; justify-content: center; margin-top: 24px; }
.cl-root .cl-more[hidden] { display: none; }
.cl-root .cl-indep { margin-top: 32px; font-size: 13px; line-height: 1.55; color: var(--muted); max-width: 110ch; }
.cl-root.cl-off .cl-switchbar, .cl-root.cl-off .cl-handoff, .cl-root.cl-off .cl-library > :not(.sec-head):not(.credits):not(.cl-indep) { display: none; }

/* ---------------------------------------------------------------- the card viewer */
.cl-root .cl-viewer { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 24px; border: 0; background: transparent; color: var(--text); overflow: hidden; }
.cl-root .cl-viewer[open] { display: grid; place-items: center; }
.cl-root .cl-viewer::backdrop { background: rgba(4, 5, 13, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.cl-root .cl-v-sheet { position: relative; width: min(1120px, 100%); height: 100%; display: flex; flex-direction: column; border-radius: var(--cl-r); border: 1px solid var(--line-2); background: rgba(10, 11, 34, .97); overflow: hidden; box-shadow: 0 40px 120px rgba(0, 0, 0, .6); }
.cl-root .cl-v-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.cl-root .cl-v-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cl-root .cl-v-id > div { display: flex; flex-direction: column; min-width: 0; }
.cl-root .cl-v-id b { font-weight: 500; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-root .cl-v-meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.cl-root .cl-v-meta span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-root .cl-v-mono { display: inline-flex; }
.cl-root .cl-v-types[hidden] { display: none; }
.cl-root .cl-v-act { grid-column: -2 / -1; justify-self: end; display: flex; align-items: center; gap: 8px; }
.cl-root .cl-v-zoom { display: flex; align-items: center; gap: 4px; }
.cl-root .cl-v-zv { font-family: var(--font-mono); font-size: 11px; width: 44px; text-align: center; color: var(--muted); }
.cl-root .cl-ic { width: 44px; height: 44px; flex: none; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); background: var(--glass); font-size: 18px; line-height: 1; transition: border-color .2s ease, background .2s ease; }
.cl-root .cl-ic:hover:not(:disabled), .cl-root .cl-ic:focus-visible { border-color: var(--gold); background: rgba(245, 209, 138, .08); }
.cl-root .cl-ic:disabled { opacity: .35; cursor: default; }
.cl-root .cl-v-page { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font-size: 13px; color: var(--gold); white-space: nowrap; }
.cl-root .cl-v-page:hover, .cl-root .cl-v-page:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.cl-root .cl-v-scroll { flex: 1; min-height: 0; overflow: auto; padding: 24px 24px 96px; overscroll-behavior: contain; outline: none; }
.cl-root .cl-v-scroll:focus-visible { box-shadow: inset 0 0 0 2px var(--gold); }
.cl-root .cl-v-canvas { --z: 1; width: calc(min(880px, 100%) * var(--z)); margin: 0 auto; }
.cl-root .cl-v-img { width: 100%; height: auto; max-width: none; border-radius: 8px; box-shadow: 0 0 0 1px var(--line-2); }
.cl-root .cl-v-img.cl-lo { filter: blur(2px) saturate(.85); }
.cl-root .cl-v-text { padding: 48px 0; text-align: center; color: var(--text-2); }
.cl-root .cl-v-steps { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 6px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(10, 11, 34, .94); }
.cl-root .cl-v-steps[hidden] { display: none; }
.cl-root .cl-v-pos { font-family: var(--font-mono); font-size: 12px; min-width: 72px; text-align: center; color: var(--text-2); }

/* ---------------------------------------------------------------- widths */
@media (max-width: 1320px) {
  .cl-root .cl-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cl-root .cl-fi { grid-template-columns: 180px minmax(0, 1fr) 180px; gap: 24px; }
  .cl-root .cl-fi-open b { font-size: 15px; letter-spacing: .1em; }
}
@media (max-width: 1100px) {
  .cl-root .cl-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cl-root .cl-lede { grid-column: 1 / -1; grid-row: 2; text-align: left; margin: 0; }
  .cl-root .cl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cl-root .cl-thumb { width: 130px; }
  .cl-root .cl-typebar { height: auto; margin-bottom: 8px; }
  .cl-root .cl-typebar .cl-seg { transform: none; }
}
@media (max-width: 860px) {
  .cl-root .cl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cl-root .cl-fi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cl-root .cl-fi-c { grid-column: 1 / -1; grid-row: 1; }
  .cl-root .cl-v-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .cl-root .cl-v-types { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}
@media (max-width: 1024px) {
  .cl-root .cl-rings, .cl-root .cl-rings.cl-stack { column-gap: 12px; }
  .cl-root .cl-ring-group { gap: 8px; }
  .cl-root .cl-ring { width: 54px; height: 54px; }
  .cl-root .cl-ring b { font-size: 14px; }
  .cl-root .cl-ring-year { width: 72px; height: 72px; }
  .cl-root .cl-ring-year b { font-size: 18px; }
}
/* Phones: the library only, with the rings as a compact filter block. */
@media (max-width: 760px) {
  .cl-root .cl-switchbar, .cl-root .cl-stage, .cl-root .cl-info, .cl-root .cl-handoff { display: none; }
  .cl-root .cl-hero { transform: none; opacity: 1; }
  .cl-root .cl-head { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 24px; }
  .cl-root .cl-head h1 { font-size: 48px; }
  .cl-root .cl-lede { grid-row: auto; }
  .cl-root .cl-head-s { justify-content: stretch; }
  .cl-root .cl-select { max-width: none; }
  /* the year ring anchors the left of the season and form rows, so no row stands half empty */
  .cl-root .cl-rings, .cl-root .cl-rings.cl-stack { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "sl sl" "sr sr" "year seasons" "year forms"; justify-items: stretch; gap: 12px 8px; margin: 8px 0 16px; }
  .cl-root .cl-year { align-self: center; }
  .cl-root .cl-side-l, .cl-root .cl-side-r { max-width: none; justify-self: stretch; }
  .cl-root .cl-ring-group { flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
  .cl-root .cl-ring { width: 50px; height: 50px; }
  .cl-root .cl-ring b { font-size: 13px; }
  .cl-root .cl-ring-year { width: 64px; height: 64px; }
  .cl-root .cl-ring-year b { font-size: 17px; }
  .cl-root .cl-typebar { height: auto; margin: 4px 0 20px; }
  .cl-root .cl-v-types button { min-height: 44px; font-size: 12px; }
  .cl-root .cl-seg { flex-wrap: wrap; justify-content: center; border-radius: 22px; }
  .cl-root .cl-seg button { min-height: 44px; padding: 0 12px; }
  .cl-root .cl-libh { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cl-root .cl-libh .prov { justify-content: flex-start; text-align: left; }
  .cl-root .cl-libh .prov a { display: inline-flex; align-items: center; min-height: 40px; }
  .cl-root .cl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 296px; gap: 12px; }
  .cl-root .cl-focus .cl-t-head { padding-right: 0; }
  .cl-root .cl-t-orb { display: none; }
  .cl-root .cl-pv-l { font-size: 9.5px; }
  .cl-root .cl-link { min-height: 44px; }
  .cl-root .cl-tile:not(.cl-focus) { padding: 8px; }
  .cl-root .cl-tile:not(.cl-focus) .cl-pvs { gap: 4px; }
  .cl-root .cl-t-name small { font-size: 10px; }
  .cl-root .cl-f-info dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-root .cl-focus .cl-f-head { display: none; }
  .cl-root .cl-viewer { padding: 0; }
  .cl-root .cl-v-sheet { border-radius: 0; border: 0; }
  .cl-root .cl-v-bar { padding: 8px 12px; gap: 8px 12px; }
  .cl-root .cl-v-act { gap: 4px; }
  .cl-root .cl-v-zv { width: 40px; }
  .cl-root .cl-v-scroll { padding: 16px 12px 88px; }
}
@media (max-width: 420px) {
  .cl-root .cl-v-id { grid-column: 1 / -1; }
  .cl-root .cl-v-bar { grid-template-columns: minmax(0, 1fr); }
  .cl-root .cl-v-act { justify-self: stretch; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .cl-root .cl-hero { transform: none; opacity: 1; }
  .cl-root .cl-spin { animation: none; }
  .cl-root .cl-moon, .cl-root .cl-moon-cap, .cl-root .cl-thumb, .cl-root .cl-ring, .cl-root .cl-pv img, .cl-root .cl-fi-open { transition: opacity .2s ease; }
  .cl-root button.cl-ring:hover:not(:disabled), .cl-root .cl-pv:hover img, .cl-root .cl-moon.cl-c .cl-thumb:hover, .cl-root button.cl-fi-open:hover { transform: none; }
}
@media (forced-colors: active) {
  .cl-root .cl-ring.cl-on, .cl-root .cl-seg button[aria-pressed="true"] { outline: 2px solid CanvasText; }
}

/* ---------------------------------------------------------------- space held before the data arrives */
/* The hero and the library are drawn once the card index has loaded. Until then each holds a height at or below the
   finished part's at that width, so the hand-off, the library heading and the footer do not jump when it is drawn.
   The rules end by themselves: a drawn (or failed) part is no longer empty. Without scripting nothing is drawn, so nothing is held. */
@media (scripting: enabled) {
  .cl-root [data-cl-hero]:empty { min-height: 560px; }
  .cl-root [data-cl-grid]:empty { min-height: 1100px; }
}
@media (scripting: enabled) and (max-width: 1100px) { .cl-root [data-cl-hero]:empty { min-height: 640px; } }
@media (scripting: enabled) and (max-width: 760px) { .cl-root [data-cl-hero]:empty { min-height: 280px; } }