/* ==========================================================================
   K5 Build Journal — style.css
   Truck-paint theme (blue / chrome / yellow) for the 1977 K5 Blazer build
   journal. Vanilla CSS — no framework, no build step (project constraint).

   Every color, size, and spacing value used anywhere below the :root block
   MUST resolve to one of the custom properties declared here. No magic
   numbers. This keeps the whole theme editable from one place and keeps
   later phases (parts, journal, gallery, budget) visually consistent
   without having to re-learn the palette.

   Source of truth: .planning/phases/01-foundation-security-baseline/01-UI-SPEC.md
   ========================================================================== */

:root {
  /* ---- Color — truck-paint palette (PROJECT.md Gemini brief, UIUX-01, D-04 BOLD) ---- */
  --blue:        #1a4b77;   /* header/footer, nav, secondary buttons */
  --blue-dark:   #143a5c;   /* hover state for blue elements, admin bar background */
  --chrome:      #d1d5db;   /* chrome border under header / over footer, card borders */
  --yellow:      #facc15;   /* RESERVED: racing stripe, primary buttons, active-nav underline */
  --yellow-dark: #eab308;   /* primary button hover */
  --bg:          #f4f6f9;   /* page background (60% dominant) */
  --card:        #ffffff;   /* card surfaces */
  --ink:         #1f2937;   /* body text on light surfaces */
  --ink-muted:   #6b7280;   /* secondary text, table meta, form hints */
  --danger:      #b91c1c;   /* destructive actions + error text ONLY (4.5:1 on white) */
  --success:     #15803d;   /* flash success messages ONLY */
  --success-tint: #ecfdf3;  /* flash-success background — derived tint, paired with --success */
  --white:       #ffffff;   /* white text/surfaces on blue backgrounds (admin bar, header, nav, footer) */

  /* ---- Typography — exactly 4 sizes, exactly 2 weights (400, 700) ---- */
  --font-head:   'Montserrat', system-ui, sans-serif;
  --font-body:   'Inter', system-ui, sans-serif;
  --text-sm:     14px;      /* labels, table meta, admin bar, footer */
  --text-base:   16px;      /* body, inputs, buttons, table cells */
  --text-lg:     20px;      /* card titles, section headings (h2/h3) */
  --text-xl:     28px;      /* page titles (h1), site title */
  --leading-body: 1.5;
  --leading-head: 1.2;

  /* ---- Spacing (8-point scale) ---- */
  --space-xs:    4px;
  --space-sm:    8px;
  --space-md:    16px;
  --space-lg:    24px;
  --space-xl:    32px;
  --space-2xl:   48px;
  --space-3xl:   64px;

  /* ---- Shape + elevation ---- */
  --radius-sm:   4px;       /* buttons, inputs, badges */
  --radius-md:   8px;       /* cards */
  --shadow-card: 0 1px 3px rgba(31, 41, 55, 0.12);

  /* ---- Shell metrics ---- */
  --stripe-h:    10px;      /* BOLD racing stripe (D-04) — prominent, not a hairline */
  --chrome-h:    4px;       /* chrome border thickness (header bottom / footer top) */
  --touch-min:   44px;      /* mobile touch target floor (UIUX-02) */
  --content-max: 1100px;    /* centered content column */
}

/* ==========================================================================
   BASE — minimal reset + document defaults
   ========================================================================== */

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--bg);
}

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: var(--leading-head);
  margin: 0 0 var(--space-md) 0;
}

h1 {
  font-size: var(--text-xl);
}

h2, h3 {
  font-size: var(--text-lg);
}

p {
  margin: 0 0 var(--space-md) 0;
}

a {
  color: var(--blue);
}

img {
  max-width: 100%;
  display: block;
}

/* RULE (enforced): exactly 2 font-weights (400, 700) and 4 sizes.
   Every font-size outside :root must use var(--text-*). Do not add
   raw px/em font-size declarations below this line. */

/* ==========================================================================
   SHELL — Layout Shell Contract (top to bottom: admin bar, header, stripe,
   nav, main, footer). Class names below are a FIXED CONTRACT shared with
   Plan 05's header.php / footer.php markup — do not rename.
   ========================================================================== */

/* ---- Admin bar (only rendered when logged in) ---- */
.admin-bar {
  width: 100%;
  background: var(--blue-dark);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-md);
  padding: var(--space-xs) var(--space-md);
}

.admin-bar .btn-link {
  color: var(--white);
  text-decoration: underline;
}

.admin-bar .btn-link:hover {
  color: var(--chrome);
}

/* ---- Site header ---- */
.site-header {
  background: var(--blue);
  border-bottom: var(--chrome-h) solid var(--chrome);
  padding: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (min-width: 768px) {
  .site-header {
    padding: var(--space-lg);
  }
}

.site-title {
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--text-xl);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

/* Site title is the ONLY responsive type change allowed by the spec —
   below 480px it drops one size step to avoid wrapping. */
@media (max-width: 479px) {
  .site-title {
    font-size: var(--text-lg);
  }
}

/* ---- Racing stripe — THE brand moment (D-04 BOLD). Never thinner than
   10px. Full-width, no content, directly under the header's chrome border. ---- */
.racing-stripe {
  height: var(--stripe-h);
  background: var(--yellow);
  width: 100%;
}

/* ---- Nav ---- */
.site-nav {
  background: var(--blue);
}

/* Desktop (>=768px): horizontal flex nav, uppercase links, yellow active
   underline (shape, not just color). */
@media (min-width: 768px) {
  .site-nav {
    display: flex;
  }

  .site-nav a {
    display: flex;
    align-items: center;
    min-height: var(--touch-min);
    padding: var(--space-sm) var(--space-md);
    color: var(--white);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    border-bottom: 4px solid transparent;
    transition: background-color 150ms;
  }

  .site-nav a:hover {
    background: var(--blue-dark);
  }

  .site-nav a.active {
    border-bottom: 4px solid var(--yellow);
  }
}

/* Mobile (<768px): nav hidden until toggled open by js/main.js; links
   stack full width, each at least touch-min tall. */
@media (max-width: 767px) {
  .site-nav {
    display: none;
  }

  .site-nav.open {
    display: block;
  }

  .site-nav a {
    display: block;
    width: 100%;
    min-height: var(--touch-min);
    padding: var(--space-sm) var(--space-md);
    color: var(--white);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    border-bottom: 1px solid var(--blue-dark);
    transition: background-color 150ms;
  }

  .site-nav a:hover {
    background: var(--blue-dark);
  }

  .site-nav a.active {
    border-left: 4px solid var(--yellow);
  }
}

/* ---- Hamburger toggle button — visible only below 768px ---- */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--touch-min);
  height: var(--touch-min);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

@media (max-width: 767px) {
  .nav-toggle {
    display: inline-flex;
  }
}

/* Three 2px white bars, CSS-drawn (no icon font, no SVG dependency). */
.hamburger,
.hamburger::before,
.hamburger::after {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
}

.hamburger {
  position: relative;
}

.hamburger::before {
  position: absolute;
  top: -8px;
}

.hamburger::after {
  position: absolute;
  top: 8px;
}

/* ---- Main content column ---- */
.site-main {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
}

@media (min-width: 768px) {
  .site-main {
    padding: var(--space-2xl) var(--space-lg);
  }
}

/* ---- Footer ---- */
.site-footer {
  background: var(--blue);
  border-top: var(--chrome-h) solid var(--chrome);
  color: var(--chrome);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--space-lg);
}

.site-footer a {
  color: var(--white);
}

/* ==========================================================================
   INTERACTION RULES — focus visibility, motion, single breakpoint
   ========================================================================== */

/* Visible focus ring on every interactive element. Never outline:none
   without a replacement. Default = blue ring on light surfaces. */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* On blue surfaces the blue ring would be invisible — swap to yellow. */
.site-nav a:focus-visible,
.admin-bar button:focus-visible,
.admin-bar a:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

.btn,
.site-nav a {
  transition: background-color 150ms;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* ==========================================================================
   COMPONENT LIBRARY — cards, buttons, forms, tables, flash, login, error,
   empty state. Reused unchanged by every later phase (Parts, Journal,
   Budget, Gallery, Specs, Links). Token-driven only.
   ========================================================================== */

/* ---- Card ---- */
.card {
  background: var(--card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--chrome);
  padding: var(--space-md);
}

@media (min-width: 768px) {
  .card {
    padding: var(--space-lg);
  }
}

.card + .card {
  margin-top: var(--space-lg);
}

.card-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--text-lg);
  margin: 0 0 var(--space-sm) 0;
}

/* ---- Spec list (definition list, SPEC-01) ---- */
.spec-list {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--space-sm);
}

.spec-list dt {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin: 0;
}

.spec-list dd {
  margin: 0 0 var(--space-md) 0;
  font-size: var(--text-base);
}

@media (min-width: 768px) {
  .spec-list {
    grid-template-columns: 200px 1fr;
    row-gap: var(--space-md);
    column-gap: var(--space-lg);
  }
  .spec-list dd {
    margin-bottom: 0;
  }
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-base);
  min-height: var(--touch-min);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  text-decoration: none;
}

/* Primary — yellow fill, dark text (NEVER white on yellow). One per view max. */
.btn-primary {
  background: var(--yellow);
  color: var(--ink);
}

.btn-primary:hover {
  background: var(--yellow-dark);
}

/* Secondary — blue fill, white text. Everything else (Edit, Cancel-as-button). */
.btn-secondary {
  background: var(--blue);
  color: var(--white);
}

.btn-secondary:hover {
  background: var(--blue-dark);
}

/* Danger — destructive actions only (delete forms, later phases). */
.btn-danger {
  background: var(--danger);
  color: var(--white);
}

.btn-danger:hover {
  filter: brightness(0.9);
}

/* Link-style — transparent, underlined blue text. Cancel, admin-bar logout. */
.btn-link {
  background: transparent;
  color: var(--blue);
  text-decoration: underline;
  min-height: auto;
  padding: 0;
  font-weight: 700;
}

.btn-link:hover {
  color: var(--blue-dark);
}

/* ---- Forms ---- */
label {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--ink);
  margin-bottom: var(--space-xs);
}

input,
textarea,
select {
  font-family: var(--font-body);
  font-size: var(--text-base); /* 16px prevents iOS zoom-on-focus */
  min-height: var(--touch-min);
  border: 1px solid var(--chrome);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--white);
  width: 100%;
}

textarea {
  min-height: calc(var(--touch-min) * 3);
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--blue);
  outline-offset: 0;
}

.form-field {
  margin-bottom: var(--space-md);
}

.form-error {
  font-size: var(--text-sm);
  color: var(--danger);
  margin-top: var(--space-xs);
}

.form-field.has-error input,
.form-field.has-error textarea,
.form-field.has-error select {
  border-color: var(--danger);
}

/* Form-level error box (login page and other admin forms). #fef2f2 is the
   ONE derived tint UI-SPEC allows outside the token block. */
.form-error-box {
  border: 1px solid var(--danger);
  background: #fef2f2;
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
  color: var(--danger);
}

/* ---- Tables (contract now; first real use Phase 2-3) ---- */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}

th, td {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
}

thead th {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 2px solid var(--chrome);
}

tbody td {
  border-bottom: 1px solid var(--chrome);
}

/* No zebra striping — dividers + whitespace carry row separation instead. */

.num {
  text-align: right;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---- Flash messages ---- */
.flash {
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
  font-size: var(--text-base);
}

.flash-success {
  border-left: 4px solid var(--success);
  background: var(--success-tint);
  color: var(--ink);
}

.flash-error {
  border-left: 4px solid var(--danger);
  background: #fef2f2;
  color: var(--ink);
}

/* ---- Login page ---- */
.login-card {
  max-width: 400px;
  margin: 0 auto;
  margin-top: var(--space-xl);
}

@media (min-width: 768px) {
  .login-card {
    margin-top: var(--space-3xl);
  }
}

/* ---- Error pages (404 / 403) ---- */
.error-card {
  max-width: 480px;
  margin: 0 auto;
  margin-top: var(--space-3xl);
  text-align: center;
}

/* ---- Empty state (placeholder pages) ---- */
.empty-state h2,
.empty-state h3 {
  font-size: var(--text-lg);
}

.empty-state p {
  color: var(--ink-muted);
}

/* ---- Link groups (category sections, LINK-01) ---- */
.link-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.link-list li {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--chrome);
}

.link-list li:last-child {
  border-bottom: none;
}

.link-list a {
  color: var(--blue);
  font-weight: 700;
  text-decoration: underline;
}

.link-notes {
  margin: var(--space-xs) 0 0 0;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}