/* ============================================================
   Engineering Notes — shared stylesheet
   Extends the design tokens and components from the main portfolio
   site (index.html). Reuses --bg, --card, --blue, --mono, --sans
   etc. exactly as defined there so these pages feel native, not
   bolted on.
   ============================================================ */

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

:root {
  --bg:        #0A0F1E;
  --card:      #0D1B36;
  --surface:   #112044;
  --blue:      #3B82F6;
  --blue-dim:  #1E3A5F;
  --green:     #10B981;
  --amber:     #F59E0B;
  --white:     #E2F0FF;
  --slate:     #64748B;
  --slate-l:   #94A3B8;
  --mono:      'JetBrains Mono', monospace;
  --sans:      'Inter', sans-serif;
  --r:         8px;
}

html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--white); font-family: var(--sans); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; }

/* ── NAV (identical to main site) ───────────────────────────── */
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 1rem 2rem; background: rgba(10,15,30,0.9); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(59,130,246,0.1); }
.nav-name { font-size: 15px; font-weight: 600; color: var(--white); letter-spacing: -0.01em; text-decoration: none; }
.nav-name span { color: var(--blue); }
.nav-links { display: flex; gap: 2rem; list-style: none; align-items: center; }
.nav-links a { font-size: 13px; color: var(--slate-l); text-decoration: none; transition: color 0.2s; }
.nav-links a:hover { color: var(--white); }
.nav-cta { font-size: 13px; font-weight: 500; padding: 7px 16px; background: var(--blue); color: #fff; border-radius: var(--r); text-decoration: none; transition: background 0.2s; }
.nav-cta:hover { background: #2563EB; }

/* ── BUTTONS (identical to main site) ───────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 0.7rem 1.4rem; border-radius: var(--r); font-size: 13.5px; font-weight: 500; text-decoration: none; transition: all 0.2s; border: none; cursor: pointer; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: #2563EB; transform: translateY(-1px); }
.btn-secondary { background: rgba(59,130,246,0.1); color: var(--blue); border: 1px solid rgba(59,130,246,0.3); }
.btn-secondary:hover { background: rgba(59,130,246,0.2); }
.btn-ghost { background: transparent; color: var(--slate-l); border: 1px solid rgba(100,116,139,0.3); }
.btn-ghost:hover { color: var(--white); border-color: var(--blue); }

/* ── EN HERO ─────────────────────────────────────────────────── */
.en-hero { padding: 8rem 2rem 3rem; max-width: 860px; margin: 0 auto; }
.en-kicker { font-family: var(--mono); font-size: 11px; color: var(--blue); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1rem; display: flex; align-items: center; gap: 8px; }
.en-kicker::before { content: ''; width: 24px; height: 1px; background: var(--blue); }
.en-title { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 600; line-height: 1.15; color: var(--white); margin-bottom: 0.75rem; letter-spacing: -0.02em; }
.en-desc { font-size: 15px; color: var(--slate-l); line-height: 1.7; margin-bottom: 1rem; max-width: 680px; }
.en-meta { font-family: var(--mono); font-size: 12px; color: var(--slate); margin-bottom: 1.75rem; display: flex; align-items: center; gap: 10px; }
.en-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--slate); }
.en-cta-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── CONTENT CONTAINER ──────────────────────────────────────── */
.en-container { max-width: 860px; margin: 0 auto; padding: 0 2rem; }
.en-section { padding: 3rem 0; border-top: 1px solid rgba(59,130,246,0.08); }
.en-section:first-of-type { border-top: 1px solid rgba(59,130,246,0.08); }
.en-section-label { font-family: var(--mono); font-size: 10.5px; color: var(--blue); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.5rem; }
.en-section-title { font-size: 1.5rem; font-weight: 600; color: var(--white); margin-bottom: 1.25rem; letter-spacing: -0.01em; }
.en-body p { font-size: 15px; color: var(--slate-l); line-height: 1.8; margin-bottom: 1.1rem; }
.en-body p:last-child { margin-bottom: 0; }
.en-body strong { color: var(--white); font-weight: 500; }
.en-body code { font-family: var(--mono); font-size: 13px; background: var(--surface); color: #93C5FD; padding: 2px 6px; border-radius: 4px; }

/* ── DECISION CARDS (Section 4) ─────────────────────────────── */
.decision-card { background: var(--card); border: 1px solid rgba(59,130,246,0.12); border-radius: 10px; padding: 1.5rem 1.75rem; margin-bottom: 1.25rem; }
.decision-card:last-child { margin-bottom: 0; }
.decision-title { font-size: 15.5px; font-weight: 600; color: var(--white); margin-bottom: 1rem; display: flex; align-items: center; gap: 8px; }
.decision-title::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }
.decision-row { display: grid; grid-template-columns: 110px 1fr; gap: 14px; margin-bottom: 0.85rem; font-size: 13.5px; line-height: 1.65; }
.decision-row:last-child { margin-bottom: 0; }
.decision-label { font-family: var(--mono); font-size: 10.5px; color: var(--slate); text-transform: uppercase; letter-spacing: 0.06em; padding-top: 2px; }
.decision-value { color: var(--slate-l); }
.decision-value.tradeoff { color: #FCD34D; }
@media(max-width:600px){ .decision-row { grid-template-columns: 1fr; gap: 4px; } }

/* ── ARCHITECTURE DIAGRAM (Section 3, pure HTML/CSS) ────────── */
.arch-diagram { display: flex; flex-direction: column; align-items: center; gap: 0; margin: 1.5rem 0 2rem; }
.arch-node { background: var(--card); border: 1px solid rgba(59,130,246,0.2); border-radius: var(--r); padding: 0.9rem 1.5rem; text-align: center; width: 100%; max-width: 480px; }
.arch-node-label { font-size: 14px; font-weight: 600; color: var(--white); margin-bottom: 2px; }
.arch-node-sub { font-family: var(--mono); font-size: 11px; color: var(--slate-l); }
.arch-node.accent { border-color: rgba(59,130,246,0.45); background: var(--blue-dim); }
.arch-arrow { font-family: var(--mono); color: var(--blue); font-size: 13px; padding: 6px 0; line-height: 1; }
.arch-branch { display: flex; gap: 12px; width: 100%; max-width: 720px; flex-wrap: wrap; justify-content: center; margin: 0 0 0; }
.arch-branch .arch-node { max-width: 220px; flex: 1; min-width: 160px; }
@media(max-width:640px){ .arch-branch { flex-direction: column; align-items: center; } .arch-branch .arch-node { max-width: 480px; width: 100%; } }

/* ── FLOW LIST (Section 5, operational flow) ────────────────── */
.flow-list { counter-reset: flow; }
.flow-step { position: relative; padding: 0 0 1.5rem 2.5rem; border-left: 1px solid rgba(59,130,246,0.18); }
.flow-step:last-child { padding-bottom: 0; border-left-color: transparent; }
.flow-step::before { counter-increment: flow; content: counter(flow); position: absolute; left: -13px; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--card); border: 1px solid rgba(59,130,246,0.35); color: var(--blue); font-family: var(--mono); font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.flow-step-title { font-size: 14.5px; font-weight: 600; color: var(--white); margin-bottom: 0.3rem; }
.flow-step-desc { font-size: 13.5px; color: var(--slate-l); line-height: 1.7; }

/* ── CHECKLIST GRID (Security / Scalability sections) ───────── */
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.75rem; margin-top: 0.5rem; }
@media(max-width:640px){ .check-grid { grid-template-columns: 1fr; } }
.check-item-title { font-size: 13.5px; font-weight: 600; color: var(--white); margin-bottom: 0.35rem; display: flex; align-items: center; gap: 7px; }
.check-item-title .ic { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.check-item-title .ic.on { background: var(--green); }
.check-item-title .ic.partial { background: var(--amber); }
.check-item-desc { font-size: 13px; color: var(--slate-l); line-height: 1.65; }

/* ── LIMITATIONS (Section 8 — honest callout style) ─────────── */
.limitation-card { background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.2); border-radius: var(--r); padding: 1.1rem 1.4rem; margin-bottom: 1rem; }
.limitation-card:last-child { margin-bottom: 0; }
.limitation-title { font-size: 13.5px; font-weight: 600; color: #FCD34D; margin-bottom: 0.4rem; }
.limitation-desc { font-size: 13.5px; color: var(--slate-l); line-height: 1.65; }

/* ── LESSON QUOTES (Section 10) ──────────────────────────────── */
.lesson-block { margin-bottom: 1.75rem; }
.lesson-block:last-child { margin-bottom: 0; }
.lesson-heading { font-size: 14px; font-weight: 600; color: var(--blue); margin-bottom: 0.5rem; }

/* ── FOOTER NAV (bottom of page) ─────────────────────────────── */
.en-footer-nav { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding: 3rem 0 5rem; }
.en-footer-nav .btn { font-size: 13px; }

footer { padding: 1.5rem 2rem; text-align: center; font-family: var(--mono); font-size: 11px; color: var(--slate); border-top: 1px solid rgba(59,130,246,0.08); }
footer a { color: var(--slate-l); text-decoration: none; }
footer a:hover { color: var(--blue); }