/*
 * .MD — base layer.
 *
 * This file used to be the previous design system: a second complete palette declared
 * three times over in sRGB hex (--accent-blue, --gradient-red-yellow, …) alongside the
 * oklch --pd-* system, four elevation drop-shadows, gradient buttons at .5rem radius,
 * rounded cards with a red-to-amber bar, green success alerts, and a warm-orange glow
 * behind the globe left over from the discarded hue-55 world. None of it was referenced
 * by the design system and all of it was still painting.
 *
 * What remains is the reset that Bootstrap's reboot used to provide (bootstrap.min.css
 * was 228 KB — 53% of every page's transferred bytes — for one utility class), plus the
 * two framework surfaces that need a house style: the Blazor error boundary and the
 * EditForm validation classes. Everything else lives in punct-design.css.
 *
 * Nothing here may introduce a colour. If a value is needed, it is a --pd-* token.
 */

/* ---------- Reset ---------- */

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

html {
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* The horizontal-overflow clamp that used to sit here was hiding a real bug: the artists
   grid computed to 1112px inside a 375px viewport and nine of twelve artists were silently
   cropped rather than producing a scrollbar. The grid is fixed; the clamp is gone so the
   next one fails loudly. */

h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol {
    margin: 0;
}

ul, ol {
    padding: 0;
}

img, svg, video, canvas {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

button, input, select, textarea, optgroup {
    font: inherit;
    color: inherit;
    margin: 0;
}

button, [type="button"], [type="submit"], [type="reset"] {
    -webkit-appearance: button;
    cursor: pointer;
}

button:disabled, [type="submit"]:disabled {
    cursor: not-allowed;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

hr {
    border: 0;
    border-top: 1px solid var(--pd-hairline);
    margin: 0;
}

:target {
    scroll-margin-block: clamp(24px, 6vh, 72px);
}

/* ---------- Framework surfaces ---------- */

/* EditForm stamps these on validated inputs. They used to paint #26b050 and #e50000 —
   a green and a red from outside the signal economy. */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--pd-signal);
}

.invalid {
    outline: 1px solid var(--pd-live);
}

.validation-message {
    font-family: var(--pd-font-mono);
    font-size: 10.5px;
    letter-spacing: .08em;
    color: var(--pd-live);
}

/* Blazor's unhandled-error surfaces. They shipped as a #b32121 block with a base64
   warning glyph; here they are plates on the field like everything else.
   The state is marked with a lit lamp, not a coloured edge — an accent bar down one side
   of a card is not this system's device (its dividers are 1px, its state markers are the
   band tick and the on-air dot), and red is correct here because an unhandled error is
   the one thing on the page that genuinely is live. */
.blazor-error-boundary,
#blazor-error-ui {
    background: var(--pd-void-2);
    border: 1px solid var(--pd-hairline-bright);
    border-radius: var(--pd-etch);
    color: var(--pd-ink-dim);
    font-family: var(--pd-font-sans);
    font-size: 14px;
}

.blazor-error-boundary::before,
#blazor-error-ui::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pd-live);
    margin-right: 10px;
    vertical-align: middle;
}

.blazor-error-boundary {
    padding: 14px 18px;
    margin: 16px;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    border-radius: 0;
    border-width: 1px 0 0;
    padding: 14px var(--pd-gutter);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
    color: var(--pd-ink-faint);
}