/* ==========================================================================
   RDB CORE — SHARED ENGINEERING LAYER (Phase 2, Checkpoint A.1)
   --------------------------------------------------------------------------
   This file carries the engineering that survived Checkpoint A review and
   deliberately carries NO visual identity. It owns:

     - reset and box model
     - accessible focus system (surface-aware)
     - 44px+ touch-target floors
     - form control behaviour and states
     - responsive container/grid mechanics
     - reduced-motion support
     - media aspect ratios and placeholder mechanics

   It owns none of: palette, typography, geometry, composition, density.
   Those belong to the direction stylesheets, which define the custom
   properties below. Loading core alone renders an unstyled-but-usable page.

   Every direction MUST define, at minimum:
     --c-bg --c-surface --c-ink --c-muted --c-line --c-input-line
     --c-accent --c-accent-ink --c-brand --focus-ring --radius
   ========================================================================== */

:root {
  /* Neutral fallbacks — directions override all of these. */
  --c-bg: #ffffff;
  --c-surface: #ffffff;
  --c-ink: #111111;
  --c-muted: #5a5a5a;
  --c-line: #dddddd;
  --c-line-strong: #bbbbbb;
  --c-input-line: #767676;   /* must clear 3:1 against the field background */
  --c-accent: #111111;
  --c-accent-ink: #ffffff;
  --c-brand: #111111;
  --c-error: #b3261e;
  --c-error-bg: #fcedec;
  --c-success: #17693f;

  --focus-ring: #1677b8;
  --focus-w: 3px;
  --focus-offset: 2px;

  --radius: 8px;
  --radius-sm: 4px;
  --radius-lg: 14px;

  /* Control sizing — the 44px floor is non-negotiable. */
  --tap-min: 44px;
  --control-h: 48px;
  --control-h-mobile: 52px;

  /* Spacing scale (4px base) */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --container: 1200px;
  --gutter: 24px;

  --motion: 140ms ease-out;
}

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

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

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-size: 17px;              /* mobile-readable floor */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, picture, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* --------------------------------------------------------------------------
   FOCUS — visible on every interactive element, and surface-aware.
   A single ring colour cannot clear 3:1 on both light and dark surfaces, so
   containers may set --focus-ring locally.
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: var(--focus-w) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

.u-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: var(--s3) var(--s4);
  background: var(--c-ink);
  color: var(--c-bg);
}
.u-skip:focus { left: 0; }

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

/* --------------------------------------------------------------------------
   LAYOUT MECHANICS
   -------------------------------------------------------------------------- */
.u-container {
  width: min(var(--container), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

.u-grid { display: grid; gap: var(--s5); }
.u-grid-2 { grid-template-columns: repeat(2, 1fr); }
.u-grid-3 { grid-template-columns: repeat(3, 1fr); }
.u-grid-4 { grid-template-columns: repeat(4, 1fr); }

.u-hidden { display: none !important; }

.u-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1023px) {
  .u-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  :root { --gutter: 16px; }
  .u-grid-2, .u-grid-3, .u-grid-4 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   INTERACTIVE FLOORS
   Any element acting as a control clears the tap minimum regardless of the
   visual treatment a direction applies.
   -------------------------------------------------------------------------- */
.u-btn,
.u-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: var(--control-h);
  padding: var(--s3) var(--s5);
  border: 0;
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion), border-color var(--motion),
              color var(--motion), box-shadow var(--motion), transform var(--motion);
}

.u-btn:disabled,
.u-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .55;
  transform: none;
  box-shadow: none;
}

.u-btn-block { width: 100%; }

@media (max-width: 767px) {
  .u-btn { min-height: var(--control-h-mobile); width: 100%; }
  .u-btn-row-stack { display: grid; gap: var(--s3); }
}

/* --------------------------------------------------------------------------
   FORM CONTROLS
   Behaviour and states live here; skin lives in the direction file.
   -------------------------------------------------------------------------- */
.u-field { display: block; }

.u-label {
  display: block;
  margin-bottom: var(--s2);
  font-size: 15px;
  font-weight: 600;
}

.u-input,
.u-select,
.u-textarea {
  width: 100%;
  min-height: var(--control-h);
  padding: var(--s3) var(--s4);
  background: var(--c-surface);
  color: var(--c-ink);
  border: 1.5px solid var(--c-input-line);
  border-radius: var(--radius);
  transition: border-color var(--motion), box-shadow var(--motion);
}

.u-textarea { min-height: 120px; resize: vertical; line-height: 1.6; }

.u-select {
  appearance: none;
  padding-right: 44px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: right var(--s4) center;
}

/* Placeholder-state select reads as "unset"; .is-chosen is applied by JS. */
.u-select:not(.is-chosen) { color: var(--c-muted); }
.u-select.is-chosen { font-weight: 600; }

.u-input:focus-visible,
.u-select:focus-visible,
.u-textarea:focus-visible {
  outline: var(--focus-w) solid var(--focus-ring);
  outline-offset: 1px;
}

.u-input.is-error,
.u-select.is-error,
.u-textarea.is-error {
  border-color: var(--c-error);
  background: var(--c-error-bg);
}

.u-input:disabled,
.u-select:disabled,
.u-textarea:disabled { opacity: .6; cursor: not-allowed; }

.u-help { font-size: 14px; color: var(--c-muted); margin-top: var(--s2); }

.u-err {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  margin-top: var(--s2);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-error);
}

.u-req { color: var(--c-error); font-weight: 700; }

.u-status:empty { display: none; }
.u-status {
  margin-top: var(--s4);
  padding: var(--s3) var(--s4);
  border-radius: var(--radius);
  border: 1px solid var(--c-error);
  background: var(--c-error-bg);
  color: var(--c-error);
  font-size: 15px;
  font-weight: 600;
}
.u-status.is-ok {
  border-color: var(--c-success);
  background: #eaf4ef;
  color: var(--c-success);
}

@media (max-width: 767px) {
  .u-input, .u-select, .u-textarea {
    min-height: var(--control-h-mobile);
    font-size: 16px;              /* prevents iOS zoom-on-focus */
  }
}

/* --------------------------------------------------------------------------
   MEDIA + DEVELOPMENT PLACEHOLDERS
   Placeholders are compositional: each states the photograph intended for the
   slot, so crop and subject are reviewable before real photography exists.
   -------------------------------------------------------------------------- */
.u-media {
  position: relative;
  overflow: hidden;
  background: var(--c-line);
}
.u-media img { width: 100%; height: 100%; object-fit: cover; }

.u-16x9 { aspect-ratio: 16 / 9; }
.u-4x3  { aspect-ratio: 4 / 3; }
.u-3x4  { aspect-ratio: 3 / 4; }
.u-1x1  { aspect-ratio: 1 / 1; }
.u-21x9 { aspect-ratio: 21 / 9; }

.u-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  padding: var(--s4);
  text-align: center;
}
.u-ph-art { width: min(64%, 190px); opacity: .5; }
.u-ph-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.u-ph-note { font-size: 13px; opacity: .8; max-width: 30ch; }

/* --------------------------------------------------------------------------
   MOBILE NAVIGATION DRAWER (behaviour; skin per direction)
   -------------------------------------------------------------------------- */
.u-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  flex-direction: column;
  background: var(--c-bg);
}
.u-drawer.is-open { display: flex; }
.u-drawer-list { flex: 1 1 auto; overflow-y: auto; }
.u-drawer-list a {
  display: flex;
  align-items: center;
  min-height: 56px;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
}

.u-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  background: transparent;
  border: 1.5px solid currentColor;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

@media (max-width: 1023px) {
  .u-burger { display: inline-flex; }
  .u-desktop-only { display: none !important; }
}
@media (min-width: 1024px) {
  .u-mobile-only { display: none !important; }
}