/* ==========================================================
   DASH & TELEMETRY (automotive x odds/telemetry hybrid)

   ACCENT DISCIPLINE — see COLOR-RULES.md, enforce this everywhere:
     --amber  = interactive / hover / live-active / the one CTA
     --red    = "current" flag — exactly ONE per page, never more
                (About: current-role log dot. Home: employment status dot.
                Projects: flagship-project dot. Contact: none — see COLOR-RULES.md)
     --green  = positive / shipped metric, sparingly (1-2/page)
     --metal  = structure only — borders, dividers, hairlines.
                Never a background/fill color.

   SURFACE LADDER (3 steps — page < card < elevated):
     --bg              page background
     --panel           card / panel fill
     --panel-elevated  hover / raised state
   ========================================================== */

:root {
  --bg:             #0F1012;   /* lifted off true black, cool cast */
  --panel:          #161719;
  --panel-elevated: #1C1D20;
  --text:    #E4E5E3;
  --dim:     #8C8F92;   /* metal-1, doubles as muted text */
  --metal-1: #8C8F92;
  --metal-2: #B8BABD;
  --amber:   #FF7A1A;
  --red:     #C41E2B;
  --green:   #3BE07A;
  --max-width: 1140px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }

.shell { max-width: var(--max-width); margin: 0 auto; padding: 0 28px 100px; }
a { color: var(--amber); text-decoration: none; }
a:hover { color: #ff9a4d; }

/* Metal hairline — the only place the gradient appears */
.hairline { height: 1px; background: linear-gradient(90deg, var(--metal-1), var(--metal-2)); opacity: 0.35; border: none; }

/* Status pulse — amber = live/active (default). --flag modifier = red,
   reserved for the page's single "current" marker (e.g. Home's employment status). */
.status { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; }
.status__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px var(--amber); animation: pulse 2s ease-in-out infinite; }
.status__dot--flag { background: var(--red); box-shadow: 0 0 8px rgba(196,30,43,0.6); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Nav */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 0 22px;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, var(--metal-1), var(--metal-2)) 1;
  opacity: 1;
}
.nav__logo { font-size: 14px; letter-spacing: -0.01em; color: var(--text); }
.nav__logo .cursor { display:inline-block; width:8px; height:16px; background: var(--green); margin-left:4px; vertical-align:-3px; animation: blink 1.1s step-end infinite; }
@keyframes blink { 0%,49% { opacity:1; } 50%,100% { opacity:0; } }
.nav__links { display: flex; gap: 6px; }
.nav__links a {
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--dim); padding: 8px 14px; border: 1px solid transparent; border-radius: 3px;
}
.nav__links a:hover { color: var(--text); border-color: rgba(140,143,146,0.4); }
.nav__links a.is-current { color: var(--amber); border-color: rgba(255,122,26,0.4); background: rgba(255,122,26,0.06); }
.nav__toggle { display: none; }

/* Type */
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); margin-bottom: 16px; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
h1 { font-size: 52px; line-height: 1.08; }
h2 { font-size: 28px; }
.lede { font-size: 17px; color: var(--dim); max-width: 58ch; }
.muted { color: var(--dim); font-size: 13px; }
.pos { color: var(--green); }

/* Sections */
.section { padding: 70px 0; border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, var(--metal-1), var(--metal-2)) 1; opacity: 1; }
.section:last-of-type { border-bottom: none; border-image: none; }
.section-label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); margin-bottom: 18px; display:flex; align-items:center; gap:10px; }
.section-label::before { content: ""; width: 18px; height: 1px; background: linear-gradient(90deg, var(--metal-1), var(--metal-2)); }

/* Panels — metal-toned border, never a metal fill */
.panel {
  position: relative;
  background: var(--panel);
  border: 1px solid rgba(140,143,146,0.28);
  border-radius: 3px;
  padding: 26px;
}
.panel--corners::before, .panel--corners::after { content: ""; position:absolute; width:10px; height:10px; }
.panel--corners::before { top:-1px; left:-1px; border-top:2px solid var(--metal-2); border-left:2px solid var(--metal-2); }
.panel--corners::after { bottom:-1px; right:-1px; border-bottom:2px solid var(--metal-2); border-right:2px solid var(--metal-2); }
.panel--hover:hover { border-color: rgba(255,122,26,0.35); background: var(--panel-elevated); }

/* Data/annotation placeholder block — solid --panel fill so it reads as
   an object on its own, not just a border floating on the page background. */
.slot {
  min-height: 260px;
  border: 1px dashed rgba(255,122,26,0.4);
  border-radius: 3px;
  background-color: var(--panel);
  background-image: repeating-linear-gradient(135deg, rgba(140,143,146,0.05) 0px, rgba(140,143,146,0.05) 2px, transparent 2px, transparent 14px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center; padding: 24px;
}
.slot__tag { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); border: 1px solid rgba(255,122,26,0.4); padding: 4px 10px; border-radius: 20px; }
.slot__title { font-size: 14px; color: var(--text); }
.slot__desc { font-size: 12px; color: var(--dim); max-width: 34ch; }

/* Live D3 chart panel — replaces the wireframe .slot once real/illustrative
   data is wired in. Solid fill, no dashed border, corner brackets read as
   an instrument readout rather than a placeholder. */
.chart-panel {
  border: 1px solid rgba(255,122,26,0.35);
  border-radius: 3px;
  background-color: var(--panel);
  padding: 20px 20px 10px;
}
.chart-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; flex-wrap: wrap; gap: 8px; }
.chart-panel svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-note { font-size: 10px; color: var(--dim); text-align: right; margin-top: 4px; letter-spacing: 0.02em; }

/* Buttons — amber is the only accent on interactive controls */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px; border-radius: 3px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid rgba(140,143,146,0.35); color: var(--text);
  transition: border-color 0.2s ease, background 0.2s ease;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}
.btn:hover { border-color: var(--amber); color: var(--amber); }
.btn--primary { background: var(--amber); border-color: var(--amber); color: #14100a; }
.btn--primary:hover { background: #ff8b3a; color: #14100a; }

/* Stats readout row */
.readout { display: flex; gap: 0; border: 1px solid rgba(140,143,146,0.3); border-radius: 3px; overflow: hidden; background: var(--panel); }
.readout__item { flex: 1; padding: 20px 22px; border-right: 1px solid rgba(140,143,146,0.25); }
.readout__item:last-child { border-right: none; }
.readout__num { font-size: 30px; font-weight: 700; font-family: "JetBrains Mono", monospace; color: var(--text); }
.readout__label { font-size: 11px; color: var(--dim); margin-top: 6px; letter-spacing: 0.03em; }

/* Skill matrix */
.skill-row { display: grid; grid-template-columns: 220px 1fr; gap: 20px; padding: 18px 0; border-top: 1px solid rgba(140,143,146,0.22); }
.skill-row:first-of-type { border-top: none; }
.skill-row__label { font-size: 12px; color: var(--amber); letter-spacing: 0.04em; text-transform: uppercase; }
.tag { display: inline-block; font-size: 11px; color: var(--dim); border: 1px solid rgba(140,143,146,0.3); padding: 5px 12px; border-radius: 20px; margin: 0 8px 8px 0; }
.tag--shipped { color: var(--green); border-color: rgba(59,224,122,0.4); }
.tag--active { color: var(--amber); border-color: rgba(255,122,26,0.4); background: rgba(255,122,26,0.06); cursor: default; }

/* Log-style timeline — red appears exactly once, on the current entry */
.log { border-left: 1px solid rgba(140,143,146,0.3); margin-left: 6px; }
.log-entry { position: relative; padding: 0 0 40px 26px; }
.log-entry:last-child { padding-bottom: 0; }
.log-entry::before { content:""; position:absolute; left:-5px; top:4px; width:9px; height:9px; border-radius:50%; background: var(--bg); border: 2px solid var(--metal-2); }
.log-entry.is-current::before { background: var(--red); border-color: var(--red); box-shadow: 0 0 8px rgba(196,30,43,0.6); }
.log-entry__meta { font-size: 11px; color: var(--dim); margin-bottom: 6px; }
.log-entry__role { font-size: 17px; color: var(--text); font-weight: 700; }
.log-entry__org { color: var(--amber); font-weight: 600; }

/* Grid helpers */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: 1fr 1fr; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--12 { grid-template-columns: repeat(12, 1fr); }
.span-5 { grid-column: span 5; }
.span-7 { grid-column: span 7; }
.span-4 { grid-column: span 4; }
.span-8 { grid-column: span 8; }
.span-6 { grid-column: span 6; }

/* Form */
.field { border: 1px solid rgba(140,143,146,0.32); background: var(--panel); border-radius: 3px; padding: 13px 14px; margin-bottom: 14px; color: var(--text); width: 100%; font-family: inherit; font-size: 14px; }
.field:focus { outline: none; border-color: var(--amber); }
.field--tall { min-height: 110px; resize: vertical; }
.field-label { display:block; margin-bottom: 8px; font-size: 11px; letter-spacing:0.06em; text-transform:uppercase; color: var(--dim); }
.form-note { font-size: 12px; margin-top: 12px; min-height: 16px; }
.form-note--ok { color: var(--green); }
.form-note--err { color: var(--red); }

footer.foot {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding-top: 30px; color: var(--dim); font-size: 12px;
}
footer.foot a { color: var(--dim); }
footer.foot a:hover { color: var(--amber); }

@media (max-width: 760px) {
  .grid--2, .grid--3, .grid--12 { grid-template-columns: 1fr; }
  .span-5, .span-7, .span-4, .span-8, .span-6 { grid-column: span 1; }
  .nav { flex-direction: column; gap: 14px; align-items: flex-start; }
  h1 { font-size: 36px; }
  .readout { flex-direction: column; }
  .readout__item { border-right: none; border-bottom: 1px solid rgba(140,143,146,0.25); }
  .skill-row { grid-template-columns: 1fr; }
}