/* Honza IRL pixel components for the web, the map and admin (phase W2). Load after tokens.css.
 * Never in the OBS widgets: hard shadows here use filter / box-shadow, which OBS draws without
 * a GPU (tests/test_design.py checks that no widget loads this file).
 * Layout from 360 px up without media queries: flex-wrap and minmax(min(100%, X), 1fr).
 */

/* Notched frame: four box-shadows of one "pixel" in currentColor leave the corners open.
 * The element's color is the frame colour, so text inside needs its own color. */
.px {
  box-shadow: 0 calc(-1 * var(--px)) 0 0 currentColor, 0 var(--px) 0 0 currentColor,
              calc(-1 * var(--px)) 0 0 0 currentColor, var(--px) 0 0 0 currentColor;
}

/* Hard shadow without blur (follows the notched shape) */
.hs { filter: drop-shadow(var(--shadow-offset) var(--shadow-offset) 0 var(--shadow)); }

.pixel { font-family: var(--font-pixel); }
.num { font-family: var(--font-num); letter-spacing: 0; }   /* after .pixel: amounts win (Departure Mono) */

/* Buttons. Primary: yellow with dark text. Secondary: dark with a grey frame. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--tap); padding: 10px 22px; margin: var(--px);
  border: 0; border-radius: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
  font-family: var(--font-pixel); font-size: 16px; line-height: 1.2;
  color: var(--button); background: var(--button);
}
.btn > .label { color: var(--button-text); }
.btn:hover { transform: translate(0, -2px); }
.btn:active { transform: translate(0, 1px); }
.btn.secondary { color: var(--line); background: var(--bg); }
.btn.secondary > .label { color: var(--text); }
.btn.icon-only { width: var(--tap); min-width: var(--tap); padding: 0; }
.btn[disabled], .btn[aria-disabled="true"] { cursor: not-allowed; transform: none; opacity: 0.55; }

/* Cards and clickable tiles */
.card {
  margin: var(--px); padding: clamp(18px, 2.4vw, 28px);
  color: var(--line); background: var(--card);
}
.card > * { color: var(--text); }
.tile { cursor: pointer; text-align: left; font: inherit; border: 0; width: calc(100% - 2 * var(--px)); }
.tile:hover { background: var(--card-hover); transform: translate(-2px, -2px); }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(24px, 3vw, 36px); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 22px; }

/* Dashed focus frame, the whole site works from the keyboard */
:focus-visible { outline: 3px dashed var(--focus); outline-offset: 8px; }

/* 8x8 icons from /design/icons.svg: <svg class="icon"><use href="/design/icons.svg#menu"/></svg> */
.icon { width: 24px; height: 24px; flex: 0 0 auto; shape-rendering: crispEdges; fill: currentColor; vertical-align: middle; }
.icon.s16 { width: 16px; height: 16px; }
.icon.s32 { width: 32px; height: 32px; }

/* Official platform icons (brand kit files, never redrawn) */
.platform { display: block; width: 24px; height: 24px; flex: 0 0 auto; image-rendering: auto; }

/* LIVE / REC dot */
.live-dot { display: inline-block; width: 10px; height: 10px; background: var(--live); box-shadow: 0 0 0 3px var(--bg); }

/* 8bit motion: jumps in steps, never smooth (the widgets use smooth ease-out instead) */
@keyframes pxpop { 0% { transform: scale(.3); } 33% { transform: scale(.7); } 66% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes pxfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pxblink { 50% { opacity: 0; } }
@keyframes pxbob { 50% { transform: translateY(-1px); } }
@keyframes pxdrawer { 0% { transform: translateX(100%); } 33% { transform: translateX(55%); } 66% { transform: translateX(15%); } 100% { transform: translateX(0); } }
@keyframes pxsheet { 0% { transform: translateY(100%); } 33% { transform: translateY(55%); } 66% { transform: translateY(15%); } 100% { transform: translateY(0); } }
.pop { animation: pxpop .36s steps(1, end) both; }
.fade { animation: pxfade .24s steps(3) both; }
.blink { animation: pxblink 1.2s steps(1) infinite; }
.bob { animation: pxbob .9s steps(1) infinite; }
.drawer { animation: pxdrawer .36s steps(1, end) both; }
.sheet { animation: pxsheet .36s steps(1, end) both; }

@media (prefers-reduced-motion: reduce) {
  .pop, .fade, .blink, .bob, .drawer, .sheet { animation: none; }
  .btn:hover, .btn:active, .tile:hover { transform: none; }
}