/* ==========================================================================
   base.css - reset, typography, forms, focus and accessibility primitives
   No colour literals. Everything resolves through tokens.css.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--mk-font-body);
  font-size: var(--mk-text-base);
  line-height: var(--mk-leading-body);
  color: var(--mk-ink);
  background: var(--mk-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--mk-font-display);
  font-weight: 600;
  line-height: var(--mk-leading-tight);
  color: var(--mk-heading);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--mk-text-lg); }
h2 { font-size: var(--mk-text-md); }
h3 { font-size: var(--mk-text-base); }
h4 { font-size: var(--mk-text-sm); }

p { margin: 0 0 var(--mk-space-3); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--mk-info);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

a:hover { border-bottom-color: currentColor; }

small { font-size: var(--mk-text-xs); }

code, kbd, pre {
  font-family: var(--mk-font-mono);
  font-size: 0.875em;
}

hr {
  height: 1px;
  margin: var(--mk-space-5) 0;
  border: 0;
  background: var(--mk-line);
}

img, svg, video { max-width: 100%; height: auto; }

ul, ol { margin: 0 0 var(--mk-space-3); padding-left: var(--mk-space-5); }

/* --------------------------------------------------------------------------
   Focus. Visible on every interactive element, never removed.
   -------------------------------------------------------------------------- */

:focus { outline: none; }

:focus-visible {
  outline: 3px solid var(--mk-focus);
  outline-offset: 2px;
  border-radius: var(--mk-radius-sm);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

label,
.mk-label {
  display: block;
  margin-bottom: var(--mk-space-1);
  font-size: var(--mk-text-sm);
  font-weight: 600;
  color: var(--mk-heading);
}

.mk-label .mk-req {
  margin-left: 2px;
  color: var(--mk-danger);
  font-weight: 700;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="search"],
input[type="url"],
select,
textarea {
  display: block;
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: var(--mk-text-base);
  color: var(--mk-ink);
  background: var(--mk-surface);
  /* WCAG 2.2 1.4.11 asks 3:1 of the boundary that identifies a control as a
     control. --mk-line is the decorative weight and reaches only 1.4:1. */
  border: 1px solid var(--mk-line-strong);
  border-radius: var(--mk-radius);
  transition: border-color var(--mk-dur) var(--mk-ease),
              box-shadow var(--mk-dur) var(--mk-ease);
}

textarea { min-height: 104px; resize: vertical; line-height: var(--mk-leading-body); }

/* The chevron is drawn with two gradient wedges rather than an inline SVG.
   A data URI is a separate document: it cannot read a CSS custom property and
   it does not inherit currentColor, so an SVG chevron means a second copy of a
   brand colour living outside tokens.css, which is exactly what the rebrand
   had to go and find. Gradients take var() directly. */
select {
  appearance: none;
  padding-right: 36px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--mk-slate) 50%),
    linear-gradient(135deg, var(--mk-slate) 50%, transparent 50%);
  background-position:
    calc(100% - 19px) calc(50% - 2px),
    calc(100% - 14px) calc(50% - 2px);
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

input:hover,
select:hover,
textarea:hover { border-color: var(--mk-slate); }

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--mk-brand-strong);
  box-shadow: 0 0 0 3px rgb(var(--mk-brand-strong-rgb) / 18%);
  outline: none;
}

input::placeholder,
textarea::placeholder { color: var(--mk-slate); opacity: 1; }

input[disabled],
select[disabled],
textarea[disabled],
input[readonly] {
  /* background-color, not background: the shorthand resets background-image
     and would erase the chevron on a disabled select. */
  background-color: var(--mk-line-soft);
  color: var(--mk-slate);
  cursor: not-allowed;
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--mk-danger);
  box-shadow: 0 0 0 3px rgb(var(--mk-danger-rgb) / 14%);
}

.mk-field { margin-bottom: var(--mk-space-4); }

.mk-hint {
  margin-top: var(--mk-space-1);
  font-size: var(--mk-text-xs);
  color: var(--mk-slate);
}

.mk-error {
  display: flex;
  gap: 6px;
  margin-top: var(--mk-space-1);
  font-size: var(--mk-text-xs);
  font-weight: 500;
  color: var(--mk-danger);
}

.mk-check {
  display: flex;
  align-items: flex-start;
  gap: var(--mk-space-2);
  margin-bottom: var(--mk-space-2);
  font-size: var(--mk-text-base);
  font-weight: 400;
  color: var(--mk-ink);
  cursor: pointer;
}

.mk-check input[type="checkbox"],
.mk-check input[type="radio"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--mk-brand-strong);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Standalone checkboxes
   A checkbox inside .mk-check is wrapped by its label, so the whole row is the
   target and its own size hardly matters. One on its own, such as the select
   box in a table row, is the entire target, and at the browser default of 13px
   it fails the 24px minimum and is genuinely hard to hit on a phone.
   -------------------------------------------------------------------------- */

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--mk-brand-strong);
  cursor: pointer;
}

/* Table row selectors carry no label, so the control is the whole target. */
.mk-table input[type="checkbox"],
.mk-table input[type="radio"] {
  width: 24px;
  height: 24px;
  margin: 0;
}

fieldset {
  margin: 0 0 var(--mk-space-5);
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
  margin-bottom: var(--mk-space-3);
  font-family: var(--mk-font-display);
  font-size: var(--mk-text-md);
  font-weight: 600;
  color: var(--mk-heading);
}

/* --------------------------------------------------------------------------
   Accessibility helpers
   -------------------------------------------------------------------------- */

.mk-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.mk-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  padding: 10px 18px;
  color: var(--mk-surface);
  background: var(--mk-brand-deep);
  border-bottom-right-radius: var(--mk-radius);
  transform: translateY(-110%);
  transition: transform var(--mk-dur) var(--mk-ease);
}

.mk-skip-link:focus-visible { transform: translateY(0); }

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

/* --------------------------------------------------------------------------
   Utilities used across pages
   -------------------------------------------------------------------------- */

.mk-stack   { display: flex; flex-direction: column; gap: var(--mk-space-4); }
.mk-stack-2 { display: flex; flex-direction: column; gap: var(--mk-space-2); }
.mk-row     { display: flex; align-items: center; gap: var(--mk-space-3); }
.mk-row-wrap{ display: flex; align-items: center; gap: var(--mk-space-3); flex-wrap: wrap; }
.mk-spacer  { flex: 1 1 auto; }
.mk-muted   { color: var(--mk-slate); }
.mk-strong  { font-weight: 600; }
.mk-nowrap  { white-space: nowrap; }
.mk-right   { text-align: right; }
.mk-mono    { font-family: var(--mk-font-mono); font-variant-numeric: tabular-nums; }
.mk-num     { font-variant-numeric: tabular-nums; }
.mk-mt-0    { margin-top: 0; }
.mk-mb-0    { margin-bottom: 0; }
.mk-hide    { display: none !important; }