/* Components shared by the site and the studio: buttons, palette, themes drawer. */
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.muted { color: var(--dim); }
@keyframes blink { 50% { opacity: 0; } }
@keyframes pulse { 50% { opacity: .35; } }

/* ---------- Buttons ---------- */
.btn, .btn-sm {
  font: inherit; cursor: pointer; text-decoration: none; display: inline-block;
  color: var(--fg); background: transparent; text-shadow: inherit;
  border: 1px solid var(--dim);
}
.btn { padding: 2px 14px; font-size: 22px; }
.btn::before { content: "[ "; color: var(--dim); }
.btn::after { content: " ]"; color: var(--dim); }
.btn:hover, .btn-sm:hover { background: var(--fg); color: var(--bg); text-shadow: none; border-color: var(--fg); }
.btn:hover::before, .btn:hover::after { color: var(--bg); }
.btn.primary { background: var(--fg); color: var(--bg); text-shadow: none; border-color: var(--fg); }
.btn.primary::before, .btn.primary::after { color: var(--bg); opacity: .6; }
.btn.primary:hover { background: var(--hot); border-color: var(--hot); }
.btn-sm { font-size: 18px; padding: 0 8px; border-color: var(--faint); }
.btn-sm.danger { color: var(--danger); }
.btn-sm.armed { background: var(--danger); color: var(--bg); border-color: var(--danger); text-shadow: none; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* segmented control: the active item lifts out of the group */
.lift { display: inline-flex; align-items: stretch; --r: 6px; --sep: 9px; --lift-bg: var(--bg-raise); --lift-fg: var(--dim); --lift-on-bg: var(--fg); --lift-on-fg: var(--bg); }
.lift > * {
  margin: 0; border: 0; border-radius: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
  font: inherit; font-size: 18px; padding: 2px 11px; background: var(--lift-bg); color: var(--lift-fg); text-shadow: none;
  transition: margin .5s var(--spring), border-radius .5s var(--spring), background-color .2s, color .2s;
}
.lift > :first-child { border-top-left-radius: var(--r); border-bottom-left-radius: var(--r); }
.lift > :last-child { border-top-right-radius: var(--r); border-bottom-right-radius: var(--r); }
.lift > :hover { color: var(--hot); background: var(--lift-bg); }
.lift > :is([aria-current="page"], [aria-pressed="true"]) {
  margin-inline: var(--sep); border-radius: var(--r); background: var(--lift-on-bg); color: var(--lift-on-fg);
}
.lift > :first-child:is([aria-current="page"], [aria-pressed="true"]) { margin-left: 0; }
.lift > :last-child:is([aria-current="page"], [aria-pressed="true"]) { margin-right: 0; }
/* the neighbours round off where the gap opens */
.lift > :has(+ :is([aria-current="page"], [aria-pressed="true"])) { border-top-right-radius: var(--r); border-bottom-right-radius: var(--r); }
.lift > :is([aria-current="page"], [aria-pressed="true"]) + * { border-top-left-radius: var(--r); border-bottom-left-radius: var(--r); }
.lift-scroll { max-width: 100%; overflow-x: auto; scrollbar-width: none; padding-block: 2px; }
.lift-scroll::-webkit-scrollbar { display: none; }

/* ⌘K palette */
.pal { position: fixed; inset: 0; z-index: 75; }
.pal-back { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.pal-win {
  position: relative; margin: 14vh auto 0; width: min(640px, calc(100vw - 32px));
  background: var(--bg-raise); border: 3px double var(--fg); box-shadow: 0 0 30px var(--glow), 0 20px 60px var(--shade);
  animation: pal-in .16s var(--ease-out);
}
@keyframes pal-in { from { transform: translateY(-8px) scale(.985); opacity: 0; } }
.pal-bar { margin: 0; display: flex; justify-content: space-between; padding: 0 10px; background: var(--fg); color: var(--bg); text-shadow: none; font-size: 18px; }
.pal-bar .muted { color: var(--bg); opacity: .7; }
.pal-in { display: flex; align-items: baseline; gap: 1ch; padding: 10px 14px; border-bottom: 1px dashed var(--faint); color: var(--dim); font-size: 22px; }
.pal-in input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font: inherit; color: var(--hot); caret-color: var(--fg); text-shadow: inherit; }
.pal-in input::placeholder { color: var(--faint); }
.pal-list { list-style: none; margin: 0; padding: 6px; max-height: min(50vh, 420px); overflow-y: auto; }
.pal-list li { display: grid; grid-template-columns: 8ch minmax(0, auto) minmax(0, 1fr); gap: 1.5ch; align-items: baseline; padding: 4px 8px; cursor: pointer; }
.pal-list li[aria-selected="true"] { background: var(--fg); color: var(--bg); text-shadow: none; }
.pal-g { color: var(--dim); font-size: 16px; }
.pal-t { color: var(--hot); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-s { font-family: var(--body); font-size: 11.5px; color: var(--dim); text-shadow: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-list li[aria-selected="true"] :is(.pal-g, .pal-t, .pal-s) { color: var(--bg); }
.pal-none { color: var(--dim); padding: 10px; }
.pal-foot { margin: 0; padding: 4px 14px 8px; font-size: 16px; }

/* rolling numbers */
[data-roll] { display: inline-flex; align-items: flex-end; }
.rd { display: inline-block; height: 1.15em; line-height: 1.15em; overflow: hidden; }
.rs { display: flex; flex-direction: column; transform: translateY(calc(var(--d, 0) * -1.15em)); transition: transform .5s var(--spring); }
.rs i { display: block; height: 1.15em; line-height: 1.15em; font-style: normal; }
.rc { display: inline-block; line-height: 1.15em; }

@media (prefers-reduced-motion: reduce) {
  .rs, .pal-win { transition: none; animation: none; }
}

/* ---------- Menu drawer (js/menu.js): slides in from the right, tabs for the menu and themes ---------- */
.drawer { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.drawer-scrim { position: absolute; inset: 0; background: var(--shade); opacity: 0; transition: opacity .3s; }
.drawer-panel { --dw: min(380px, calc(100vw - 36px)); position: absolute; top: 0; right: 0; bottom: 0; width: var(--dw);
  display: flex; flex-direction: column; background: var(--bg-raise); color: var(--text); text-shadow: none;
  border-left: 1px solid var(--dim); box-shadow: -24px 0 60px var(--shade);
  transform: translateX(calc(100% + 30px)); transition: transform .38s var(--ease-out); padding-top: env(safe-area-inset-top, 0px); }
.drawer.open { pointer-events: auto; }
.drawer.open .drawer-scrim { opacity: .55; }
.drawer.open .drawer-panel { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--faint); }
.drawer-tabs { display: flex; gap: 2px; }
.drawer-tabs button { font: 18px var(--display); color: var(--dim); background: none; border: 1px solid transparent; padding: 1px 10px; cursor: pointer; }
.drawer-tabs button:hover { color: var(--hot); border-color: var(--faint); }
.drawer-tabs button[aria-selected="true"] { color: var(--bg); background: var(--fg); }
.drawer-close { font: 15px var(--display); color: var(--dim); background: none; border: 1px solid var(--faint); padding: 0 8px; cursor: pointer; }
.drawer-close:hover { color: var(--hot); border-color: var(--dim); }
.drawer-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.drawer-body[hidden] { display: none; }
#dp-menu { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 4px 14px 18px; }
.dm-sec { padding: 12px 0 4px; }
.dm-sec + .dm-sec { border-top: 1px dashed var(--faint); }
.dm-h { margin: 0 0 6px; font: 14px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.dm-h i { font-style: normal; color: var(--fg); }
.dm-pages { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.dm-pages a { display: flex; align-items: baseline; gap: 8px; padding: 6px 10px; border: 1px solid var(--faint); font: 19px var(--display); color: var(--hot); text-decoration: none; }
.dm-pages a kbd { font-size: .75em; color: var(--dim); }
.dm-pages a em { margin-left: auto; font-style: normal; font-size: .75em; color: var(--dim); }
.dm-pages a:hover { border-color: var(--fg); background: var(--bg); color: var(--hot); }
.dm-pages a[aria-current="page"] { border-color: var(--fg); box-shadow: inset 2px 0 var(--fg); }
.dm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.dm-list :is(a, button) { width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 8px; border: 0; border-radius: 4px;
  font: 13px var(--body); color: var(--text); background: none; text-align: left; text-decoration: none; cursor: pointer; }
.dm-list b { font-weight: 400; color: var(--hot); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-list em { flex: none; font-style: normal; font-size: 12px; color: var(--dim); }
.dm-list em.st-live { color: var(--fg); }
.dm-list :is(a, button):is(:hover, :focus-visible) { background: color-mix(in srgb, var(--fg) 12%, var(--bg-raise)); color: var(--text); }
.dm-inline { grid-template-columns: 1fr 1fr; }
#dp-themes .themes-list { flex: 1; }
.pal-open .drawer, .console-open .drawer:not(.open) { z-index: 40; }
@media (prefers-reduced-motion: reduce) { .drawer-panel, .drawer-scrim { transition: none; } }
.themes-list { flex: 1; overflow-y: auto; padding: 4px 10px 14px; overscroll-behavior: contain; scrollbar-width: thin; }
.themes-group { margin: 14px 6px 6px; color: var(--dim); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; }
.themes-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.theme-opt { width: 100%; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 1px 12px; align-items: center;
  text-align: left; font: inherit; color: var(--text); background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 8px 10px; cursor: pointer;
  transition: background-color .15s, border-color .15s; }
.theme-opt:hover { background: var(--bg); border-color: var(--faint); }
.theme-opt[aria-pressed="true"] { border-color: var(--fg); background: var(--bg); }
.theme-sw { grid-row: span 2; display: grid; grid-template-columns: repeat(5, 9px); height: 30px; border-radius: 4px; overflow: hidden; outline: 1px solid var(--faint); }
.theme-sw i { display: block; }
.theme-sw i:first-child { grid-column: span 1; }
.theme-name { font-family: var(--display); font-size: 18px; color: var(--hot); display: flex; gap: 8px; align-items: baseline; }
.theme-name em { font-style: normal; font-size: 13px; color: var(--dim); }
.theme-opt[aria-pressed="true"] .theme-name::after { content: "\25CF"; color: var(--fg); font-size: 11px; margin-left: auto; }
.theme-note { font-family: var(--body); font-size: 12.5px; color: var(--dim); line-height: 1.35; }
.themes-crt { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 16px 12px; border-top: 1px solid var(--faint);
  font-family: var(--body); font-size: 13px; color: var(--text); cursor: pointer; }
.themes-crt input { accent-color: var(--fg); margin: 0; }
.themes-crt em { font-style: normal; color: var(--dim); font-size: 12px; }

/* ---------- Pixel-art backdrops (js/backdrop.js) for the textured themes ---------- */
.backdrop { position: fixed; left: 0; top: 0; z-index: -1; pointer-events: none; image-rendering: pixelated; display: none; }
:root:not([data-skin="crt"]) .backdrop.on { display: block; }