/* ============================================================
   RFID in Rail · Manual — styles
   Light, editorial layout. Real screenshots inside phone bezels.
   ============================================================ */

:root {
  --c-bg: #F6F7F9;
  --c-paper: #FFFFFF;
  --c-rule: #E2E5EA;
  --c-ink: #111418;
  --c-ink-mute: #4F5663;
  --c-ink-faint: #8B95A3;

  --c-steel: #2B323C;
  --c-accent: #19B27A;          /* mint — matchar appens "ok"-pricka */
  --c-accent-soft: #DCF3E9;
  --c-warn: #E08400;
  --c-warn-soft: #FFEDD1;
  --c-stop: #C8302A;
  --c-stop-soft: #FBE2E0;
  --c-order: #E47A1A;           /* order-orange */

  --ff-display: "Space Grotesk", system-ui, sans-serif;
  --ff-body: "Inter", system-ui, sans-serif;
  --ff-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

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

html, body {
  font-family: var(--ff-body);
  background: var(--c-bg);
  color: var(--c-ink);
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }
img { display: block; }

/* =============== App shell =============== */
.app {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
}
@media (max-width: 880px) { .app { grid-template-columns: 1fr; } }

/* =============== Sidebar =============== */
.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid var(--c-rule);
  background: var(--c-paper);
  padding: 28px 22px 40px;
}
.sidebar-brand {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.sidebar-back {
  display: block;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  text-decoration: none;
  padding: 4px 0;
  margin-bottom: 16px;
  transition: color 120ms;
}
.sidebar-back:hover { color: var(--c-accent); }
.sidebar-kicker {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--c-ink-faint);
  text-transform: uppercase;
  margin: 2px 0 22px;
}
.sidebar-section {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--c-ink-faint);
  text-transform: uppercase;
  margin: 18px 0 6px;
}
.sidebar nav { display: flex; flex-direction: column; gap: 1px; }
.sidebar nav a {
  text-decoration: none;
  color: var(--c-ink-mute);
  font-size: 13.5px;
  padding: 5px 10px;
  border-radius: 6px;
  border-left: 2px solid transparent;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.sidebar nav a:hover { background: var(--c-bg); color: var(--c-ink); }
.sidebar nav a.active {
  background: var(--c-bg);
  color: var(--c-ink);
  border-left-color: var(--c-accent);
  font-weight: 600;
}
@media (max-width: 880px) {
  .sidebar {
    position: static; height: auto;
    border-right: 0; border-bottom: 1px solid var(--c-rule);
  }
}

/* =============== Main =============== */
.main { padding: 56px 56px 120px; max-width: 1080px; }
@media (max-width: 720px) { .main { padding: 32px 22px 80px; } }

.hero { margin-bottom: 64px; }
.hero-kicker {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 12px;
}
.hero h1 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 46px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  text-wrap: balance;
}
.hero-lede {
  font-size: 17px;
  color: var(--c-ink-mute);
  max-width: 640px;
  text-wrap: pretty;
}
.hero-meta {
  margin-top: 28px;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--c-ink-faint);
  text-transform: uppercase;
}
.hero-meta span strong {
  display: block;
  color: var(--c-ink);
  font-weight: 700;
}

/* =============== Chapters =============== */
.chapter { margin-bottom: 96px; scroll-margin-top: 24px; }
.chapter-num {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--c-accent);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.chapter h2 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  text-wrap: balance;
}
.chapter-lede {
  font-size: 16px;
  color: var(--c-ink-mute);
  max-width: 640px;
  margin-bottom: 32px;
  text-wrap: pretty;
}
.chapter h3 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 20px;
  margin: 44px 0 10px;
  letter-spacing: -0.01em;
}
.chapter p { margin-bottom: 14px; max-width: 640px; text-wrap: pretty; }

/* Step list */
.steps {
  counter-reset: step;
  list-style: none;
  margin: 16px 0 28px;
  max-width: 660px;
}
.steps li {
  counter-increment: step;
  position: relative;
  padding: 12px 0 12px 42px;
  border-top: 1px solid var(--c-rule);
}
.steps li:last-child { border-bottom: 1px solid var(--c-rule); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0; top: 14px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--c-accent);
  font-weight: 700;
}
.steps li strong { font-family: var(--ff-display); font-weight: 700; }

/* Notes */
.note {
  border-left: 3px solid var(--c-accent);
  background: var(--c-paper);
  padding: 14px 18px;
  margin: 22px 0;
  max-width: 660px;
  border-radius: 0 8px 8px 0;
}
.note-label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 4px;
}
.note p { margin: 0; font-size: 14.5px; }
.note.warn { border-left-color: var(--c-warn); }
.note.warn .note-label { color: var(--c-warn); }
.note.stop { border-left-color: var(--c-stop); }
.note.stop .note-label { color: var(--c-stop); }

/* =============== Screen + annotations layout =============== */
.screen-block {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  align-items: start;
  margin: 32px 0 16px;
}
.screen-block.wide { grid-template-columns: 320px 1fr; }
.screen-block.reverse {
  grid-template-columns: 1fr 280px;
}
.screen-block.reverse .callouts { order: 1; }
.screen-block.reverse .phone-shot { order: 2; }
@media (max-width: 880px) {
  .screen-block, .screen-block.wide, .screen-block.reverse {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .screen-block .phone-shot { margin: 0 auto; }
  .screen-block.reverse .callouts { order: unset; }
  .screen-block.reverse .phone-shot { order: unset; }
}

.callouts {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 12px;
}
.callouts li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: start;
}
.callouts .num {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--c-ink);
  color: white;
  display: grid;
  place-items: center;
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 11px;
}
.callouts .num.accent { background: var(--c-accent); }
.callouts .num.order { background: var(--c-order); }
.callouts .num.warn { background: var(--c-warn); }
.callouts .num.stop { background: var(--c-stop); }
.callouts h4 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 2px;
}
.callouts p {
  margin: 0;
  font-size: 13.5px;
  color: var(--c-ink-mute);
  max-width: none;
}

/* =============== Phone bezel with real screenshot =============== */
.phone-shot {
  width: 280px;
  border-radius: 34px;
  padding: 9px;
  background: #1A1E25;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 24px 60px -28px rgba(17,20,24,0.45),
    0 8px 24px -12px rgba(17,20,24,0.3);
  overflow: hidden;
}
.phone-shot.wide { width: 320px; border-radius: 38px; padding: 11px; }
.phone-shot .screen {
  width: 100%;
  border-radius: 26px;
  overflow: hidden;
  background: #F6F7F9;
  display: block;
}
.phone-shot.wide .screen { border-radius: 30px; }
.phone-shot img {
  width: 100%;
  height: auto;
  display: block;
}

/* =============== Side-by-side compare =============== */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin: 28px 0 12px;
  max-width: 720px;
}
@media (max-width: 720px) { .compare { grid-template-columns: 1fr; } }
.compare > figure { margin: 0; }
.compare figcaption {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
  margin-top: 10px;
  text-align: center;
}
.compare .phone-shot { margin: 0 auto; }

/* =============== Grid of 4 tag-type screens =============== */
.tag-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 28px 0 16px;
  max-width: 920px;
}
@media (max-width: 880px) { .tag-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tag-grid { grid-template-columns: 1fr; max-width: 280px; margin: 28px auto; } }
.tag-grid figure { margin: 0; }
.tag-grid .phone-shot { width: 100%; padding: 6px; border-radius: 24px; }
.tag-grid .phone-shot .screen { border-radius: 18px; }
.tag-grid figcaption {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 14px;
  margin-top: 10px;
  text-align: center;
}
.tag-grid figcaption span {
  display: block;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--c-ink-mute);
  letter-spacing: 0.06em;
  margin-top: 2px;
  text-transform: uppercase;
}

/* =============== Tab/feature badges =============== */
.kbd {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border: 1px solid var(--c-rule);
  background: var(--c-paper);
  border-radius: 5px;
  color: var(--c-ink);
}
code {
  font-family: var(--ff-mono);
  font-size: 0.92em;
  background: var(--c-paper);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--c-rule);
}

hr.rule { border: 0; border-top: 1px solid var(--c-rule); margin: 28px 0; max-width: 660px; }

/* =============== Footer =============== */
.footer {
  margin-top: 80px;
  padding-top: 32px;
  border-top: 1px solid var(--c-rule);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--c-ink-faint);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 660px;
}