/*
  BEASTMODE DEVELOPMENT -- BASE / RESET
  Owner: type/style lane. Depends on tokens.css. Dark-only ground, a real
  reset, selection color, focus-visible rings, scrollbar, image defaults,
  hairline primitives, and the 12-col grid container. No light mode exists.
*/

/* -----------------------------------------------------------------------
   RESET
----------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: auto; /* Lenis (motion lane) owns smooth scroll; native stays off */
}

html,
body {
  height: 100%;
}

body {
  background: var(--bmd-void);
  overflow-x: hidden; /* belt + suspenders: no horizontal body scroll, ever */
  min-height: 100dvh;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

button {
  cursor: pointer;
}

svg {
  display: block;
}

table {
  border-collapse: collapse;
}

/* -----------------------------------------------------------------------
   IMAGE / MEDIA DEFAULTS
----------------------------------------------------------------------- */

img,
picture,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

img {
  -webkit-user-drag: none;
  user-select: none;
}

/* -----------------------------------------------------------------------
   SELECTION
----------------------------------------------------------------------- */

::selection {
  background: var(--bmd-red);
  color: var(--bmd-void);
}

::-moz-selection {
  background: var(--bmd-red);
  color: var(--bmd-void);
}

/* -----------------------------------------------------------------------
   FOCUS -- keyboard-visible only, in the brand red. Never suppressed.
----------------------------------------------------------------------- */

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--bmd-red);
  outline-offset: 3px;
  border-radius: var(--radius-1);
}

/* form controls sitting on a filled surface need the ring to read on both
   the control and the ground behind it */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: 2px solid var(--bmd-red);
  outline-offset: 2px;
}

/* -----------------------------------------------------------------------
   SCROLLBAR -- thin, dark, red thumb-on-hover. Firefox + WebKit.
----------------------------------------------------------------------- */

html {
  scrollbar-width: thin;
  scrollbar-color: var(--bmd-ash) var(--bmd-void);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bmd-void);
}

::-webkit-scrollbar-thumb {
  background-color: var(--bmd-ash);
  border-radius: var(--radius-1);
  border: 2px solid var(--bmd-void);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--bmd-red-deep);
}

/* -----------------------------------------------------------------------
   HAIRLINE PRIMITIVES -- 1px rules at low opacity divide everything.
----------------------------------------------------------------------- */

.hr {
  border: 0;
  border-top: 1px solid var(--bmd-hairline);
  width: 100%;
}

.hr--strong {
  border-top-color: var(--bmd-ash);
}

.hr--red {
  border-top-color: var(--bmd-red);
  box-shadow: 0 0 8px 0 var(--bmd-red-glow);
}

.hr-v {
  border: 0;
  border-left: 1px solid var(--bmd-hairline);
  align-self: stretch;
  width: 0;
}

/* scroll-progress hairline (motion lane drives the transform/scale) */
/* The scroll-progress indicator is owned entirely by motion.js, which creates
   and styles .bmd-progress-hair itself (see motion.css). There is deliberately
   no duplicate wrapper here — an earlier one out-specified motion's own rule
   and painted a full-viewport red sheet. */


/* -----------------------------------------------------------------------
   GRID CONTAINER -- 12 columns, fluid gutters, capped max-width.
----------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--edge-pad);
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--gutter);
}

/* span utilities: .col-2 through .col-12 */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

@media (max-width: 640px) {
  /* below this, everything collapses to full-width stacking by default;
     components that need a different mobile span set it explicitly in
     layout.css / components.css (lead lane) -- this is just the floor. */
  .grid-12 > [class^="col-"] {
    grid-column: span var(--grid-cols);
  }
}

/* -----------------------------------------------------------------------
   REDUCED MOTION -- real static fallback, not a stub. Anything animated
   elsewhere in the system must respect this; the base rule kills the
   two motion primitives that live in this file (scroll-progress fill,
   any base-level transition) outright rather than just shortening them.
----------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .scroll-progress {
    transition: none !important;
  }
}