/* ============================================================================
   Boron.Web -- the bridge between MudBlazor and the Glossy Industry system.

   The design system is square, unfilled and shadowless; MudBlazor's defaults
   are the opposite. Everything here exists to reconcile the two. Take colour,
   type and spacing from the tokens in css/glossy/ -- never hard-code a hex, a
   font name or a px value a token already carries.
   ========================================================================= */

/* --- Geometry: nothing in this system is rounded. --------------------------- */
.mud-paper,
.mud-card,
.mud-button-root,
.mud-input-control,
.mud-input,
.mud-input-slot,
.mud-chip,
.mud-dialog,
.mud-alert,
.mud-table,
.mud-menu-popover,
.mud-popover,
.mud-tooltip,
.mud-avatar,
.mud-expand-panel {
  border-radius: 0 !important;
}

/* --- Elevation: cards are flat. Shadow is for overlap and the dialog only. -- */
.mud-paper,
.mud-card,
.mud-button-root,
.mud-chip,
.mud-alert,
.mud-expand-panel {
  box-shadow: none !important;
}

.mud-dialog,
.mud-popover,
.mud-menu-popover {
  box-shadow: var(--shadow-lg) !important;
}

/* --- Cards are transparent line drawings, never filled. -------------------- */
.mud-card,
.mud-paper-outlined {
  background-color: transparent;
  border: 1px solid var(--color-divider);
}

/* --- Buttons: the heading face, square, verb-first sentence case. ---------- */
.mud-button-root {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: var(--size-control);
  letter-spacing: normal;
  text-transform: none;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
}

/* The solid accent button is the one filled object on the board. */
.mud-button-filled-primary {
  background-color: var(--color-accent);
  color: var(--color-bg);
}
.mud-button-filled-primary:hover { background-color: var(--color-accent-600); }
.mud-button-filled-primary:active { background-color: var(--color-accent-700); }

.mud-button-outlined {
  border: 1px solid var(--color-divider);
  color: var(--color-text);
}
.mud-button-outlined:hover { background-color: color-mix(in srgb, var(--color-text) 7%, transparent); }
.mud-button-outlined:active { background-color: color-mix(in srgb, var(--color-text) 14%, transparent); }

/* --- Inputs: sunken ground, hairline border, accent caret. ----------------- */
.mud-input > .mud-input-slot {
  background-color: var(--color-surface);
  caret-color: var(--color-accent);
  font-size: var(--size-control);
}
.mud-input.mud-input-outlined .mud-input-outlined-border {
  border-color: var(--color-divider);
  border-radius: 0;
}

/* --- Focus: the accent ring, never the browser default. --------------------
   Scoped to elements a person actually operates. Blazor's FocusOnNavigate puts
   focus on the <h1> after every navigation; a heading is not a control, so it
   must not draw a focus ring. */
:focus { outline: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
.mud-button-root:focus-visible,
.mud-input-slot:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* A heading focused programmatically for screen readers shows nothing. */
h1:focus, h1:focus-visible, [tabindex="-1"]:focus, [tabindex="-1"]:focus-visible {
  outline: none;
}

/* --- Tables: hairline rules, uppercase caption-size headers. --------------- */
.mud-table-root { font-size: var(--size-control); }
.mud-table-head .mud-table-cell {
  font-size: var(--size-caption);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  border-bottom: 1px solid var(--color-divider);
}
.mud-table-cell { border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }

/* --- Motion: functional and short. Nothing bounces, scales or loops. ------- */
.mud-paper, .mud-card, .mud-button-root { transition: background-color 120ms linear, border-color 120ms linear; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============================================================================
   Layout scaffolding -- the modular grid the system asks for.
   ========================================================================= */

/* Nothing may make the page itself scroll sideways. Tables and code carry
   their own scroll; everything else wraps or stacks. */
html, body { overflow-x: hidden; }

/* The nav is a flex row: let it wrap rather than widen the page. */
.nav { flex-wrap: wrap; row-gap: var(--space-3); }

.page-shell {
  max-width: var(--max-content);
  margin: 0 auto;
  padding-inline: var(--space-6);
  padding-block: 0 96px;
}

/* Sections breathe at ~68px; the system prefers whitespace to a rule. */
.section { margin-top: 68px; }
.section-tight { margin-top: var(--space-8); }

.prose { max-width: var(--max-prose); }

/* Headings are set tight and long words (URLs, part numbers) must not push
   the column wider than the screen. */
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* Equal-width cells, strong rhythm. */
.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .page-shell { padding-inline: var(--space-4); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .section { margin-top: var(--space-8); }
}

/* Tables and code carry their own horizontal scroll; the page body never does. */
.scroll-x { overflow-x: auto; }

/* The spec plate: kicker over a display figure, cells split by hairlines. */
.spec-plate { display: grid; }
.spec-plate > .cell { padding: var(--space-6); }
.spec-plate > .cell + .cell { border-left: 1px solid var(--color-divider); }
.spec-plate .figure {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: var(--size-h1);
  line-height: 1;
  letter-spacing: var(--tracking-heading);
}
@media (max-width: 700px) {
  /* !important is required here: SpecPlate sets grid-template-columns inline
     from its cell count, and an inline style otherwise wins over this rule. */
  .spec-plate { grid-template-columns: 1fr 1fr !important; }
  .spec-plate > .cell { padding: var(--space-4); }
  .spec-plate > .cell:nth-child(odd) { border-left: none; }
  .spec-plate > .cell:nth-child(n+3) { border-top: 1px solid var(--color-divider); }
  .spec-plate .figure { font-size: var(--size-h2); }
}
@media (max-width: 400px) {
  .spec-plate { grid-template-columns: 1fr !important; }
  .spec-plate > .cell { border-left: none; }
  .spec-plate > .cell + .cell { border-top: 1px solid var(--color-divider); }
}

/* Numbers are complete and unrounded, and they align on the decimal in tables. */
.num { font-variant-numeric: tabular-nums; text-align: right; }

/* Monospace only where a value must be copied verbatim, e.g. a SHA-256. */
.mono {
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: var(--size-small);
  word-break: break-all;
}