/* ============================================
   GEEKS2METATS DOCUMENTATION HUB
   Aesthetic: Workshop service manual, industrial,
   warm dark theme for outdoor/trailer readability
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Bungee+Inline&family=Newsreader:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* Surface colors - warm, vintage paper/soot */
  --bg-deep: #14110f;
  --bg-base: #1c1917;
  --bg-raised: #292524;
  --bg-card: #2c2a26;
  --border-subtle: #44403c;
  --border-bold: #78716c;

  /* Text - cream paper, not pure white */
  --text-primary: #f5e9d4;
  --text-secondary: #d6c8af;
  --text-muted: #a8a29e;
  --text-dim: #78716c;

  /* Accents */
  --amber: #ff6b35;      /* BBQ heat, workshop orange */
  --amber-bright: #ff8c42;
  --amber-dim: #c44d20;
  --blueprint: #5b8aa0;  /* faded blueprint blue */
  --caution: #fbbf24;    /* hazard yellow */
  --success: #84cc16;    /* completed lime */
  --danger: #dc2626;     /* warning red */

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 4rem;
}

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: 'Newsreader', Georgia, serif;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;

  /* Subtle grid paper background */
  background-image:
    linear-gradient(rgba(245, 233, 212, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 233, 212, 0.015) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: center top;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: 'Bungee', 'Impact', sans-serif;
  font-weight: normal;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--text-primary);
}

h1 {
  font-size: clamp(2rem, 6vw, 3.5rem);
  text-transform: uppercase;
}

h2 {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  text-transform: uppercase;
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
  color: var(--amber);
  border-bottom: 2px solid var(--border-bold);
  padding-bottom: var(--space-sm);
}

h3 {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  text-transform: uppercase;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
  color: var(--blueprint);
}

h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
  color: var(--text-secondary);
}

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

a {
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid var(--amber-dim);
  transition: all 0.15s ease;
}

a:hover {
  color: var(--amber-bright);
  border-bottom-color: var(--amber-bright);
}

code, .mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9em;
  background: var(--bg-deep);
  padding: 0.1em 0.3em;
  border-radius: 2px;
  color: var(--blueprint);
}

strong, b {
  color: var(--text-primary);
  font-weight: 700;
}

em {
  color: var(--amber);
  font-style: italic;
}

/* ============================================
   LAYOUT
   ============================================ */

.container {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--space-md) var(--space-md) var(--space-2xl);
}

.container-wide {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-md) var(--space-md) var(--space-2xl);
}

/* ============================================
   HEADER / NAV
   ============================================ */

.site-header {
  position: sticky;
  top: 0;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-sm) var(--space-md);
  z-index: 100;
  backdrop-filter: blur(8px);
}

.site-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.site-brand {
  font-family: 'Bungee', sans-serif;
  font-size: 1rem;
  color: var(--amber);
  text-transform: uppercase;
  border-bottom: none;
  letter-spacing: 0.05em;
}

.site-brand:hover {
  color: var(--amber-bright);
}

.site-nav {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.site-nav a {
  color: var(--text-muted);
  border-bottom: none;
  margin-left: var(--space-md);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.site-nav a:hover {
  color: var(--amber);
}

/* ============================================
   HERO / DOC HEADER
   ============================================ */

.doc-hero {
  padding: var(--space-2xl) 0 var(--space-xl);
  border-bottom: 4px double var(--border-bold);
  margin-bottom: var(--space-xl);
}

.doc-hero h1 {
  margin-bottom: var(--space-md);
}

.doc-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
}

.doc-meta-item {
  border-left: 3px solid var(--amber);
  padding-left: var(--space-md);
}

.doc-meta-label {
  display: block;
  color: var(--text-dim);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-xs);
}

.doc-meta-value {
  color: var(--text-primary);
  font-weight: 700;
}

/* ============================================
   BADGES & STATUS
   ============================================ */

.badge {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.25em 0.6em;
  border: 1px solid currentColor;
  border-radius: 2px;
}

.badge-pending {
  color: var(--caution);
}

.badge-progress {
  color: var(--blueprint);
}

.badge-done {
  color: var(--success);
}

.badge-amber {
  color: var(--amber);
}

/* ============================================
   SESSION CARDS
   ============================================ */

.session {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-left: 6px solid var(--amber);
  border-radius: 3px;
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
  position: relative;
  overflow: hidden;
}

.session::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  background:
    repeating-linear-gradient(
      45deg,
      var(--caution),
      var(--caution) 8px,
      var(--bg-base) 8px,
      var(--bg-base) 16px
    );
  opacity: 0.08;
  pointer-events: none;
}

.session-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.session-title {
  margin: 0;
  color: var(--text-primary);
}

.session-number {
  font-family: 'JetBrains Mono', monospace;
  color: var(--amber);
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  display: block;
  margin-bottom: var(--space-xs);
}

.session-time {
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.session-outcome {
  background: var(--bg-deep);
  border-left: 3px solid var(--blueprint);
  padding: var(--space-md);
  margin: var(--space-md) 0;
  font-style: italic;
  color: var(--text-secondary);
}

/* ============================================
   PHASE / STEP LISTS
   ============================================ */

.phase {
  margin: var(--space-lg) 0;
}

.phase-header {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--amber);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  border-bottom: 1px dashed var(--border-subtle);
  padding-bottom: var(--space-xs);
  margin-bottom: var(--space-md);
}

/* ---- Step list layout (DO NOT REDUCE PADDING WITHOUT REREADING THIS) ----
   The numbered step badge is absolutely positioned at left:0 of the li, and
   the step text is pushed right by padding-left. If padding-left ever drops
   below the badge's outer width plus a visible gap, the badge's right edge
   clips into the first letter of the step text (looks like the "P" in
   "Park" is being eaten by the box). This has regressed twice already on
   unrelated styles.css edits, hence the variable + calc encoding below:
   one source of truth for the badge width, padding-left is derived from
   it, so editing one without the other still keeps the relationship safe. */
ol.steps {
  list-style: none;
  counter-reset: step;
  padding-left: 0;
  --step-badge-width: 2.4rem;
  --step-text-gap: 1.6rem;
}

ol.steps li {
  counter-increment: step;
  position: relative;
  padding-left: calc(var(--step-badge-width) + var(--step-text-gap));
  margin-bottom: var(--space-md);
  min-height: 2rem;
}

ol.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--amber);
  background: var(--bg-deep);
  border: 1px solid var(--amber-dim);
  border-radius: 2px;
  padding: 0.2em 0.4em;
  min-width: var(--step-badge-width);
  text-align: center;
}

/* ---- Step notes log (rendered by garage-notes.js inside step <li>s) ---- */

.step-notes {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px dashed var(--border-subtle);
  font-size: 0.9rem;
}

.step-notes-existing:empty {
  display: none;
}

.step-note {
  display: flex;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-bottom: 1px dotted var(--border-subtle);
}

.step-note:last-child {
  border-bottom: none;
}

.step-note-text {
  flex: 1;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-wrap: break-word;
}

.step-note-meta {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding-top: 0.15rem;
}

.step-note-delete {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.2rem;
  cursor: pointer;
}

.step-note-delete:hover {
  color: var(--danger);
}

.step-note-form {
  margin-top: var(--space-sm);
  display: flex;
  gap: 0.4rem;
  align-items: flex-start;
}

.step-note-form textarea {
  flex: 1;
  background: var(--bg-deep);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 3px;
  padding: 0.4rem 0.55rem;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 0.9rem;
  line-height: 1.4;
  resize: vertical;
  outline: none;
  min-height: 2.4rem;
}

.step-note-form textarea:focus {
  border-color: var(--amber-dim);
}

.step-note-form button {
  background: var(--bg-deep);
  color: var(--amber);
  border: 1px dashed var(--amber-dim);
  border-radius: 3px;
  padding: 0.35rem 0.7rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  white-space: nowrap;
}

.step-note-form button:hover:not(:disabled) {
  background: var(--amber);
  color: var(--bg-base);
  border-style: solid;
}

.step-note-form button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

ul {
  padding-left: 1.5rem;
  margin-bottom: var(--space-md);
}

ul li {
  margin-bottom: var(--space-xs);
}

/* ============================================
   CALLOUTS
   ============================================ */

.callout {
  padding: var(--space-md);
  margin: var(--space-md) 0;
  border-radius: 3px;
  border-left: 4px solid;
}

.callout-verify {
  background: rgba(91, 138, 160, 0.1);
  border-color: var(--blueprint);
}

.callout-verify::before {
  content: 'VERIFY';
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--blueprint);
  letter-spacing: 0.15em;
  display: block;
  margin-bottom: var(--space-xs);
}

.callout-warning {
  background: rgba(251, 191, 36, 0.08);
  border-color: var(--caution);
}

.callout-warning::before {
  content: '⚠ CAUTION';
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--caution);
  letter-spacing: 0.15em;
  display: block;
  margin-bottom: var(--space-xs);
}

.callout-tow-ready {
  background: rgba(132, 204, 22, 0.08);
  border-color: var(--success);
  text-align: center;
}

.callout-tow-ready::before {
  content: '✓ TOW-READY';
  font-family: 'Bungee', sans-serif;
  font-size: 1rem;
  color: var(--success);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: var(--space-sm);
}

/* ============================================
   CHECKLIST
   ============================================ */

.checklist {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0;
}

.checklist li {
  padding-left: 2rem;
  position: relative;
  margin-bottom: var(--space-sm);
}

.checklist li::before {
  content: '☐';
  position: absolute;
  left: 0;
  top: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.2rem;
  color: var(--amber);
}

/* ============================================
   TABLES
   ============================================ */

table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-md) 0;
  font-size: 0.95rem;
}

th {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--amber);
  border-bottom: 2px solid var(--border-bold);
}

td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}

tr:hover td {
  background: var(--bg-raised);
}

/* ============================================
   HUB GRID - for index pages
   ============================================ */

.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
  margin: var(--space-xl) 0;
}

.hub-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 3px;
  padding: var(--space-lg);
  transition: all 0.2s ease;
  text-decoration: none;
  color: inherit;
  display: block;
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
  overflow: hidden;
}

.hub-card:hover {
  border-color: var(--amber);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  color: inherit;
}

.hub-card-category {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: var(--space-xs);
}

.hub-card-title {
  font-family: 'Bungee', sans-serif;
  font-size: 1.3rem;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
  line-height: 1.2;
}

.hub-card-desc {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
}

.hub-card-meta {
  margin-top: var(--space-md);
  display: flex;
  gap: var(--space-md);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ============================================
   FOOTER
   ============================================ */

.site-footer {
  margin-top: var(--space-2xl);
  padding: var(--space-lg);
  border-top: 1px solid var(--border-subtle);
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}

/* ============================================
   PRINT
   ============================================ */

@media print {
  body {
    background: white;
    color: black;
    font-size: 11pt;
  }

  .site-header, .site-footer {
    display: none;
  }

  .session {
    page-break-inside: avoid;
    border: 1px solid black;
    background: white;
  }

  .session::before {
    display: none;
  }

  h1, h2, h3 {
    color: black;
  }

  a {
    color: black;
    border-bottom: 1px solid black;
  }
}

/* ============================================
   MOBILE TWEAKS
   ============================================ */

@media (max-width: 600px) {
  body {
    font-size: 17px;
  }

  .container, .container-wide {
    padding: var(--space-sm);
  }

  .session {
    padding: var(--space-md);
  }

  ol.steps {
    /* Tighter gap on small screens — still computed from the badge width so
       the safety relationship holds. See DO NOT REDUCE comment above. */
    --step-text-gap: 0.9rem;
  }

  .site-nav a {
    margin-left: var(--space-sm);
  }
}

/* ============================================
   PARTS MANIFEST PAGE
   ============================================ */

.order-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-left: 6px solid var(--blueprint);
  border-radius: 3px;
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.order-number {
  font-family: 'JetBrains Mono', monospace;
  color: var(--blueprint);
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  display: block;
  margin-bottom: var(--space-xs);
}

.order-totals {
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
}

.order-total {
  display: block;
  color: var(--amber);
  font-size: 1.05rem;
  font-weight: 700;
}

.order-eta {
  display: block;
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-top: var(--space-xs);
}

.order-meta-line {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 1px dashed var(--border-subtle);
}

.part-item {
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: 3px;
  padding: var(--space-md);
  margin: var(--space-md) 0;
}

.part-item h3 {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: none;
  color: var(--text-primary);
  letter-spacing: 0;
  line-height: 1.3;
  margin: 0 0 var(--space-sm);
}

.part-desc {
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
  font-size: 0.95rem;
}

.part-use, .part-why {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
}

.part-use strong, .part-why strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--amber);
  margin-right: var(--space-xs);
}

.part-link {
  margin-top: var(--space-md);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
}

.parts-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.parts-gallery img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-base);
  cursor: zoom-in;
}

.parts-gallery:empty {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--text-dim);
  padding: var(--space-sm) var(--space-md);
  border: 1px dashed var(--border-subtle);
  border-radius: 3px;
  text-align: center;
  margin-top: var(--space-md);
}

.parts-gallery:empty::before {
  content: "📷 photo well — owner unlock to upload";
}

/* Same gallery shape used for work-plan phase photo wells */
.photo-well {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.photo-well img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-base);
  cursor: zoom-in;
}

.photo-well:empty {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--text-dim);
  padding: var(--space-sm) var(--space-md);
  border: 1px dashed var(--border-subtle);
  border-radius: 3px;
  text-align: center;
  margin-top: var(--space-md);
}

.photo-well:empty::before {
  content: "📷 photo well — owner unlock to upload";
}

/* Upload button injected by garage-upload.js when an owner cookie is present */
.photo-upload-btn {
  background: var(--bg-deep);
  border: 1px dashed var(--amber);
  color: var(--amber);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: var(--space-md);
  cursor: pointer;
  border-radius: 3px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.photo-upload-btn:hover {
  background: var(--amber);
  color: var(--bg-base);
}

.photo-upload-progress {
  grid-column: 1 / -1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--blueprint);
  padding: var(--space-sm);
  text-align: center;
}

@media (max-width: 600px) {
  .parts-gallery,
  .photo-well {
    grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
  }
  .parts-gallery img,
  .photo-well img,
  .photo-upload-btn {
    height: 95px;
  }
  .order-header {
    flex-direction: column;
  }
  .order-totals {
    text-align: left;
  }
}