/* Shared controls and surfaces. A section supplies geometry, never a new skin. */
.c-btn, .c-nav-link, .c-card, .c-tag, .c-tabs, .c-acc, .c-copy, .c-modal, .c-ticker, .c-toast, .c-tip, .c-header { box-sizing: border-box; color: var(--t-ink); font-family: var(--t-font-body); }
.c-btn *, .c-card *, .c-copy *, .c-header * { box-sizing: border-box; }
[hidden] { display: none !important; }
.c-btn {
  --c-fill: var(--t-yellow); --c-text: var(--t-ink);
  display: inline-flex; position: relative; align-items: center; justify-content: center; gap: .4em;
  min-height: 44px; margin: 0; padding: .52em 1.05em .38em; isolation: isolate;
  border: var(--t-outline) solid var(--t-ink); border-radius: var(--t-radius-pill);
  background: var(--c-fill); color: var(--c-text); box-shadow: var(--t-shadow-hard);
  font: 400 var(--t-font-m)/1.05 var(--t-font-display); text-decoration: none; text-align: center;
  cursor: pointer; touch-action: manipulation; vertical-align: middle; -webkit-tap-highlight-color: transparent;
  transition: transform var(--t-dur-fast) var(--t-ease-pop), opacity var(--t-dur-fast) linear;
}
.c-btn[data-variant="danger"] { --c-fill: var(--t-accent); --c-text: var(--t-paper); -webkit-text-stroke: .035em var(--t-ink); paint-order: stroke fill; text-shadow: .055em .075em 0 var(--t-ink); }
.c-btn[data-variant="ghost"] { --c-fill: var(--t-paper); }
.c-btn[data-variant="tag"] { --c-fill: var(--t-paper); border-radius: var(--t-radius-tag); box-shadow: var(--t-shadow-small); font-family: var(--t-font-body); font-weight: 700; }
.c-btn[data-size="s"] { font-size: var(--t-font-s); min-height: 32px; padding: .45em .85em .34em; }
.c-btn[data-size="l"] { font-size: var(--t-font-l); min-height: 56px; }
.c-btn[data-size="xl"] { font-size: var(--t-font-xl); min-height: 76px; border-width: var(--t-outline-heavy); padding: .52em .7em .3em; }
.c-btn[data-fit] { width: 100%; height: 100%; min-height: 0; padding: 0; font-size: inherit; }
.c-btn__icon { display: inline-flex; width: 1em; height: 1em; }
.c-btn__icon > * { width: 100%; height: 100%; object-fit: contain; }
@media (hover: hover) {
  .c-btn:hover:not([aria-disabled="true"]):not([aria-busy="true"]) { transform: translateY(-3px) rotate(-.6deg); box-shadow: var(--t-shadow-lift); }
  .c-btn[data-size="xl"]:hover:not([aria-disabled="true"]):not([aria-busy="true"]) { animation: c-rumble var(--t-dur-rumble) var(--t-ease-pop) 1; }
  .c-card[data-lift]:hover:not([aria-disabled="true"]), .c-card[role="button"]:hover:not([aria-disabled="true"]) { transform: translateY(-5px) rotate(-.5deg); box-shadow: var(--t-shadow-lift); }
}
.c-btn:active:not([aria-disabled="true"]):not([aria-busy="true"]), .c-btn[data-preview="active"] { transform: translate(2px, 3px) scale(.97, .94); box-shadow: var(--t-shadow-pressed); animation: none; }
.c-btn[data-preview="hover"] { transform: translateY(-3px) rotate(-.6deg); box-shadow: var(--t-shadow-lift); }
.c-btn:focus-visible, .c-nav-link:focus-visible, .c-card:focus-visible, .c-acc > summary:focus-visible, .c-copy input:focus-visible, .c-tabs [role="tabpanel"]:focus-visible, .c-btn[data-preview="focus"] {
  outline: var(--t-focus-width) solid var(--t-focus); outline-offset: 4px;
}
.c-card[aria-disabled="true"], .c-nav-link[aria-disabled="true"], .c-acc[aria-disabled="true"] { --c-fill: var(--t-disabled); --c-text: var(--t-muted); color: var(--t-muted); cursor: not-allowed; text-shadow: none; -webkit-text-stroke: 0; box-shadow: var(--t-shadow-small); }
.c-btn[aria-busy="true"] { cursor: progress; padding-inline-end: 2em; }
.c-btn[aria-busy="true"]::after { content: ''; width: .7em; height: .7em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; position: absolute; right: .65em; animation: c-spin var(--t-dur-spin) linear infinite; }
.c-nav-link { position: relative; display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: .35em .35em; color: var(--t-ink); font: 700 var(--t-font-m)/1 var(--t-font-body); text-decoration: none; white-space: nowrap; }
.c-nav-link::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: 3px; height: 4px; border-radius: 45% 20% 30% 10%; background: var(--t-accent); transform: scaleX(0) rotate(-2deg); transform-origin: left; transition: transform var(--t-dur-fast) var(--t-ease-pop); }
.c-nav-link:hover:not([aria-disabled="true"])::after, .c-nav-link[aria-current]::after, .c-nav-link[data-preview="hover"]::after { transform: scaleX(1) rotate(-2deg); }
.c-nav-link:hover:not([aria-disabled="true"]) { opacity:.82; }
.c-nav-link:active:not([aria-disabled="true"]) { transform: translateY(2px); }
.c-card { padding: var(--t-space-card); border: var(--t-outline) solid var(--t-ink); border-radius: var(--t-radius-card); background: var(--t-paper); box-shadow: var(--t-shadow-hard); transition: transform var(--t-dur-fast) var(--t-ease-pop); }
.c-card[data-variant="wood"] { background: var(--t-wood); border-width: var(--t-outline-heavy); border-radius: var(--t-radius-wood); }
.c-card[data-variant="stamp"] { border: var(--t-outline) double var(--t-stamp); border-radius: var(--t-radius-stamp); box-shadow: none; color: var(--t-stamp); }
.c-card[role="button"] { cursor: pointer; }
.c-card[role="button"]:active:not([aria-disabled="true"]) { transform: translateY(3px) scale(.98); }
.c-card h2, .c-card h3 { margin: 0 0 .5em; font: 400 var(--t-font-l)/1.1 var(--t-font-display); }
.c-card p { margin: .45em 0; }
/* A raster supplies this card's finish. Motion owns its transform; focus
   and selection keep the shared accessible outline without redrawing art. */
.c-card[data-art], .c-card[data-art][role="button"]:is(:hover, :active), .c-card[data-art][data-lift]:is(:hover, :active) { padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; transform:none; transition:none; }
.c-card[data-art][aria-pressed="true"] { outline:var(--t-focus-width) solid var(--t-focus); outline-offset:2px; }
.c-tag { display: inline-flex; padding: .16em .45em .12em; border: var(--t-outline) solid currentColor; border-radius: var(--t-radius-tag); background: var(--t-yellow); font: 700 var(--t-font-m)/1.05 var(--t-font-body); }
.c-tag[data-variant="pill"] { border-radius:var(--t-radius-pill); background:var(--t-paper); white-space:nowrap; }
.c-tag[data-variant="stamp"] { color: var(--t-stamp); border-radius: var(--t-radius-stamp); border-style: double; border-width: var(--t-outline-heavy); background: transparent; transform: rotate(-5deg); }
.c-count { font: 400 var(--t-font-xl)/1 var(--t-font-display); font-variant-numeric: tabular-nums; }
.c-tabs__list { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1rem; }
.c-tabs [role="tab"][aria-selected="true"] { --c-fill: var(--t-yellow); }
.c-tabs [role="tabpanel"] { padding: 1rem; border: var(--t-outline) solid var(--t-ink); border-radius: var(--t-radius-card); background: var(--t-paper); }
.c-acc { border: var(--t-outline) solid var(--t-ink); border-radius: var(--t-radius-card); background: var(--t-paper); box-shadow: var(--t-shadow-small); overflow: clip; }
.c-acc > summary { cursor: pointer; padding: 1rem 2.8rem 1rem 1rem; list-style: none; background: var(--t-yellow); font: 400 var(--t-font-m)/1.2 var(--t-font-display); position: relative; }
.c-acc > summary::-webkit-details-marker { display: none; }
.c-acc > summary::after { content: '+'; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font: 700 1.5rem/1 var(--t-font-body); }
.c-acc[open] > summary::after { content: '\2212'; }
.c-acc > summary:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.c-acc:not([aria-disabled="true"]) > summary:active { opacity:.72; }
.c-acc[aria-disabled="true"] > summary { cursor:not-allowed; opacity:.65; text-decoration:none; }
.c-acc__panel { padding: 1rem; }
.c-modal { max-width: min(760px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 1.5rem; border: var(--t-outline-heavy) solid var(--t-ink); border-radius: var(--t-radius-card); background: var(--t-paper); box-shadow: var(--t-shadow-lift); }
.c-modal::backdrop { background: rgb(23 23 21 / 65%); }
.c-modal h2 { font-family: var(--t-font-display); margin: 0 5rem 1.25rem 0; }
.c-modal [data-modal-close] { position: absolute; top: .8rem; right: .8rem; }
.c-modal__body img { display: block; max-width: 100%; max-height: 70dvh; object-fit: contain; margin-inline: auto; }
.c-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; }
.c-copy label { grid-column: 1 / -1; font: 400 var(--t-font-m)/1.1 var(--t-font-display); }
.c-copy input, .c-input { min-width: 0; min-height: 44px; width: 100%; border: var(--t-outline) solid var(--t-ink); border-radius: var(--t-radius-input); background: var(--t-paper); color: var(--t-ink); padding: .5rem .75rem; font: 700 1rem/1.2 var(--t-font-body); }
.c-copy[data-fit] { display:contents; }
.c-copy[data-fit] input { height:100%; min-height:0; font:inherit; letter-spacing:inherit; pointer-events:auto; }
.c-input:focus-visible { outline:var(--t-focus-width) solid var(--t-focus); outline-offset:2px; }
.c-input:hover:not(:disabled):not([aria-disabled="true"]), .c-copy input:hover:not(:disabled):not([aria-disabled="true"]) { box-shadow:var(--t-shadow-small); }
.c-input:active:not(:disabled):not([aria-disabled="true"]), .c-copy input:active:not(:disabled):not([aria-disabled="true"]) { box-shadow:var(--t-shadow-pressed); }
.c-input:disabled, .c-input[aria-disabled="true"], .c-copy input:disabled, .c-copy input[aria-disabled="true"] { color:var(--t-muted); background:var(--t-disabled); cursor:not-allowed; }
.c-input[aria-invalid="true"] { outline:var(--t-outline) solid var(--t-accent); }
.c-sound { white-space: nowrap; -webkit-text-stroke: 0; text-shadow: none; }
.c-sound[aria-pressed="true"] { --c-fill: var(--t-yellow); }
/* The volume slider the shared SoundToggle puts after a data-volume SOUND
   button: a native range in the theme's accent, its own focus ring. A phone's
   header bar has no room for it; the open menu carries it with SOUND. */
.c-sound-volume { flex: 0 0 auto; width: 88px; height: 24px; margin: 0; accent-color: var(--t-accent); cursor: pointer; }
.c-sound-volume:focus-visible { outline: var(--t-focus-width) solid var(--t-focus); outline-offset: 2px; }
.c-toast { position: fixed; z-index: 500; bottom: max(24px, env(safe-area-inset-bottom)); left: 50%; translate: -50% 0; max-width: calc(100vw - 32px); padding: .8rem 1.3rem; border: var(--t-outline) solid var(--t-ink); border-radius: var(--t-radius-tag); background: var(--t-yellow); box-shadow: var(--t-shadow-hard); font: 700 1.1rem/1.2 var(--t-font-body); pointer-events: none; opacity: 0; }
.c-toast[data-visible] { opacity: 1; }
.c-toast[popover] { margin: 0; top: auto; right: auto; overflow: visible; }
.c-tip { position: fixed; z-index: 600; max-width: min(260px, calc(100vw - 16px)); padding: .5rem .75rem; border: var(--t-outline) solid var(--t-ink); border-radius: var(--t-radius-tag); background: var(--t-paper); box-shadow: var(--t-shadow-small); font-size: .95rem; }
.c-ticker { position: relative; display: flex; align-items: center; gap: 1rem; overflow: clip; background: var(--t-yellow); border-block: var(--t-outline) solid var(--t-ink); padding: .75rem 1rem; }
.c-ticker__viewport { min-width: 0; flex: 1; overflow: clip; }
.c-ticker__track { display: flex; gap: 3rem; white-space: nowrap; width: max-content; padding-right: 3rem; }
.c-ticker[data-ticker-ready] .c-ticker__track { animation: c-marquee var(--t-dur-marquee) linear infinite; }
.c-ticker__pause { flex-shrink: 0; }
.c-ticker:hover .c-ticker__track, .c-ticker:focus-within .c-ticker__track, .c-ticker[data-paused="true"] .c-ticker__track { animation-play-state: paused; }
.c-header { --c-header-height: var(--t-header-desktop); display: flex; align-items: center; gap: 20px; width: 100%; height: var(--c-header-height); padding: 0 24px; background: var(--t-paper); border-bottom: var(--t-outline-heavy) solid var(--t-ink); }
.c-header__brand { flex: 0 0 auto; display: block; width: 169px; transition: transform var(--t-dur-medium) var(--t-ease-pop); }
.c-header__brand img { display: block; width: 100%; height: auto; }
.c-header__menu { flex: 1; margin-left: auto; }
.c-header__menu > summary { display: none; }
.c-header__nav { display: flex; align-items: center; justify-content: space-evenly; gap: 5px; }
.c-header__directory { display: none; }
.c-header__nav .c-nav-link { font-size: clamp(14px, 1.48vw, 21px); font-style: normal; font-weight: 800; }
.c-header__buy { flex: 0 0 auto; min-width: 168px; min-height: 50px; font-size: 24px; }
.c-header .c-sound { flex: 0 0 auto; min-height: 32px; font-size: 12px; padding-inline: .65em; }
.c-header[data-compact="true"] .c-header__brand { transform: scale(.94); }
.c-header[data-compact="true"] > .c-header__buy { transform: scale(.95); }
.c-header .c-header__brand:hover { transform: scale(.97) rotate(-1deg); }
.c-header .c-header__brand:active { transform: translateY(2px) scale(.94); }
.c-header__brand:focus-visible { outline: var(--t-focus-width) solid var(--t-focus); outline-offset: 2px; }
@media (max-width: 1100px) {
  .c-header__directory { display: contents; }
  .c-header { gap: 12px; }
  .c-header__menu { flex: 0 0 auto; order: 4; margin: 0; }
  .c-header__menu > summary { display: inline-flex; min-width: 44px; min-height: 36px; font-size: 12px; list-style: none; padding-inline: .5em; }
  .c-header__menu > summary::-webkit-details-marker { display: none; }
  /* A closed drawer is not laid out: inside the closed <details> its content
     box (content-visibility) becomes the containing block, so the menu would
     sit 42 px wide at the screen edge with its links running off it. */
  .c-header__menu:not([open]) > .c-header__nav { display: none; }
  .c-header__nav { position: absolute; top: 100%; inset-inline: 0; display: flex; flex-direction: column; align-items: stretch; gap: .2rem; max-height: calc(100dvh - var(--c-header-height)); overflow-y: auto; padding: 1rem; background: var(--t-paper); border-bottom: var(--t-outline-heavy) solid var(--t-ink); box-shadow: var(--t-shadow-hard); }
  .c-header__nav .c-nav-link { justify-content: flex-start; padding: .6rem 1rem; font-size: 24px; }
  .c-header__nav .c-nav-link::after { right: 55%; }
  .c-header__buy { margin-left: auto; min-width: 132px; }
}
@media (max-width: 767px) {
  .c-header { --c-header-height: var(--t-header-phone); gap: 8px; padding: 0 10px; border-bottom-width: var(--t-outline); }
  .c-header__brand { width: 112px; }
  .c-header__buy { min-width: 96px; min-height: 33px; padding: .42em .65em .28em; font-size: 14px; }
  .c-header .c-sound { min-width: 51px; padding: .4em .35em .25em; font-size: 10px; }
  .c-header__menu > summary { font-size: 10px; min-height: 32px; min-width: 44px; }
  .c-header > .c-sound-volume { display: none; }
}
@media (max-width: 359px) { .c-header { gap: 5px; padding-inline: 6px; } .c-header__brand { width: 89px; } .c-header__buy { min-width: 84px; font-size: 12px; } }
@keyframes c-spin { to { transform: rotate(360deg); } }
@keyframes c-rumble { 0%, 100% { transform: translateY(-3px) rotate(-.6deg); } 30% { transform: translateY(-4px) rotate(.8deg); } 65% { transform: translateY(-2px) rotate(-1deg); } }
@keyframes c-marquee { to { transform: translateX(-50%); } }
:root[data-reduced-motion="true"] :is(.c-btn, .c-card, .c-nav-link, .c-header__brand, .c-header__buy), :root[data-forge-pose] :is(.c-btn, .c-card, .c-nav-link, .c-header__brand, .c-header__buy) { transform: none !important; transition-property: opacity !important; animation: none !important; }
:root:is([data-reduced-motion="true"], [data-forge-pose]) .c-ticker__track, :root:is([data-reduced-motion="true"], [data-forge-pose]) .c-btn::after { animation: none !important; }
:root[data-reduced-motion="true"] .c-nav-link::after, :root[data-forge-pose] .c-nav-link::after { transition: none; }
:root[data-reduced-motion="true"] .c-ticker__track { width: auto; padding-right: 0; white-space: normal; flex-wrap: wrap; gap: .5rem 1rem; }
:root[data-reduced-motion="true"] [data-ticker-copy], :root[data-forge-pose] [data-ticker-copy] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .c-btn, .c-card, .c-nav-link, .c-header__brand, .c-header__buy { transform: none !important; animation: none !important; transition-property: opacity !important; }
  .c-ticker__track, .c-btn::after { animation: none !important; }
  .c-ticker[data-ticker-ready] .c-ticker__track { animation: none !important; }
  .c-ticker__track { width: auto; padding-right: 0; white-space: normal; flex-wrap: wrap; gap: .5rem 1rem; }
  [data-ticker-copy] { display: none; }
  .c-nav-link::after { transition: none; }
}

.c-dollar { font-family:var(--t-font-body); font-weight:800; display:inline-block; line-height:1; font-size:1.08em; }
.c-btn[aria-disabled="true"] { cursor:not-allowed; opacity:.88; box-shadow:var(--t-shadow-small); }
.c-header__drawer-actions, .c-header__peek { display:none; }
@media(max-width:1100px) {
 .c-header__nav { inset-inline:12px; top:calc(100% + 8px); border:var(--t-outline-heavy) solid var(--t-ink); border-radius:var(--t-radius-card); padding:14px 18px 20px; max-height:calc(100dvh - var(--c-header-height) - 22px); background:var(--t-yellow); isolation:isolate; }
 .c-header__drawer-actions { display:flex; gap:14px; padding:12px 0 2px; align-items:center; border-top:var(--t-outline) solid var(--t-ink); }
 .c-header__drawer-actions .c-header__buy { margin:0; }
 .c-header__drawer-actions .c-sound { min-height:36px; font-size:13px; }
 .c-header__drawer-actions .c-sound-volume { flex:1 1 72px; width:auto; min-width:64px; max-width:160px; height:36px; }
 .c-header__peek { display:block; position:relative; align-self:flex-end; width:72px; height:76px; flex:0 0 76px; margin-top:8px; pointer-events:none; overflow:hidden; }
}

/* A measured disclosure reuses the same ink and panel finish. */
.c-acc[data-fit] { --c-summary-height:55%; overflow:visible; border:var(--t-outline) solid var(--t-ink); border-radius:var(--t-radius-card); background:var(--t-paper); box-shadow:var(--t-shadow-small); }
.c-acc[data-fit] > summary { height:var(--c-summary-height); min-height:1.4em; padding:.12em .7em; display:flex; align-items:center; justify-content:center; text-align:center; background:transparent; color:var(--t-accent); -webkit-text-stroke:.04em var(--t-ink); paint-order:stroke fill; font-size:1.6cqw; line-height:1.05; }
.c-acc[data-fit] > summary::after { right:.1em; font-size:.8em; }
.c-acc[data-fit] > .c-acc__panel { padding:0 .35em .25em; background:var(--t-paper); color:var(--t-ink); text-align:center; font:700 1.2cqw/1.1 var(--t-font-body); }
.c-acc[data-fit][data-surface="wood"] { --c-summary-height:100%; background:var(--t-yellow); border-radius:var(--t-radius-tag); box-shadow:none; }
.c-acc[data-fit][data-raster-answer] > .c-acc__panel { position:relative; z-index:5; padding:.5em; border:var(--t-outline) solid var(--t-ink); box-shadow:var(--t-shadow-hard); }
.c-acc[data-fit]:not([open]) { --c-summary-height:100%; }
/* Sizes for the phone frames, which a portrait tablet shows too (deviceQuery). */
[data-device="phone"] .c-acc[data-fit] > summary { font-size:3.8cqw; } [data-device="phone"] .c-acc[data-fit] > .c-acc__panel { font-size:3.3cqw; } [data-device="phone"] .frame-extra.c-tag { font-size:2.8cqw; }
.c-chart-wait { position:absolute; display:flex; align-items:center; gap:var(--t-space-card); padding:.5em; }
.c-chart-wait > img { width:30%; height:100%; object-fit:contain; min-width:0; }
.c-chart-wait > p { margin:0; flex:1; font-family:var(--t-font-display); line-height:1.15; }