/* ============================================================
   CALCULATE THIS — Tactical Console v3.0 (Light Mode)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* Surfaces — light cool steel */
  --bg:       #E8ECF2;
  --bg-2:     #DDE3EB;
  --panel:    #FFFFFF;
  --panel-hi: #F6F8FB;
  --panel-lo: #EAEEF4;

  /* Dark surfaces — for readout + footer */
  --dark:       #131C2A;
  --dark-2:     #1A2435;
  --dark-line:  #2E3C54;

  /* Lines */
  --line:     #C6D0DD;
  --line-hot: #8492AA;

  /* Text */
  --text:     #0E1726;
  --text-2:   #3E4D63;
  --muted:    #5B6A80;

  /* HUD — darker for light bg readability */
  --amber:      #D8690E;
  --amber-hot:  #EA7E1C;
  --amber-dim:  #9C4906;
  --amber-bright: #FFA02E;     /* used only on dark readout */
  --cyan:       #086FAE;
  --cyan-hot:   #0D86CC;
  --cyan-bright:#4DD4FF;        /* used only on dark readout */
  --green:      #128648;
  --red:        #B62C3A;

  /* Type */
  --display: 'Rajdhani', 'Helvetica Neue', sans-serif;
  --body:    'Inter', 'Helvetica Neue', sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(8, 111, 174, 0.06), transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(216, 105, 14, 0.05), transparent 60%);
  background-attachment: fixed;
}

/* Hex grid overlay — subtle blue-gray lines */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='%238492AA' stroke-width='0.6' stroke-opacity='0.25'%3E%3Cpolygon points='28,1 55,16 55,49 28,64 1,49 1,16'/%3E%3Cpolygon points='28,51 55,66 55,99 28,114 1,99 1,66'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 100px;
}

main, header, footer, nav, section { position: relative; z-index: 3; }

/* ============================================================
   LAYOUT SHELL
   ============================================================ */
.shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

@media (max-width: 720px) {
  .shell { padding: 0 18px; }
  body { font-size: 14px; }
}

/* ============================================================
   TOP BAR — dark band for definition
   ============================================================ */
.topbar {
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--dark);
  color: var(--panel);
  position: relative;
}

.topbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--amber-dim) 30%, var(--amber) 50%, var(--amber-dim) 70%, transparent);
  opacity: 0.7;
}

.topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.topbar-left {
  display: flex;
  gap: 24px;
  align-items: center;
}

.brand {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--panel);
  text-decoration: none;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.brand::before {
  content: '◢';
  color: var(--amber-bright);
  font-size: 14px;
}

.brand::after {
  content: '◣';
  color: var(--cyan-bright);
  font-size: 14px;
}

.topbar-meta {
  color: #95A3BB;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.topbar-meta::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #4FE8A8;
  border-radius: 50%;
  box-shadow: 0 0 8px #4FE8A8;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

.topbar-nav {
  display: flex;
  gap: 20px;
}

.topbar-nav a {
  color: #95A3BB;
  text-decoration: none;
  transition: color 0.15s;
}

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

/* ============================================================
   MASTHEAD
   ============================================================ */
.masthead {
  padding: 70px 0 50px;
  border-bottom: 1px solid var(--line-hot);
  position: relative;
}

.masthead::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 32px;
  width: 180px; height: 2px;
  background: var(--amber);
  box-shadow: 0 0 14px rgba(216, 105, 14, 0.5);
}

.masthead-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 600;
}

.masthead-eyebrow::before {
  content: '▸';
  color: var(--amber);
  font-size: 14px;
}

.masthead-eyebrow::after {
  content: '';
  flex: 1;
  max-width: 200px;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan), transparent);
}

.masthead-title {
  font-family: var(--display);
  font-size: clamp(56px, 10vw, 144px);
  line-height: 0.9;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 20px;
}

.masthead-title em {
  font-style: normal;
  color: var(--amber);
  text-shadow: 0 4px 24px rgba(216, 105, 14, 0.2);
}

.masthead-deck {
  font-family: var(--body);
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 400;
  color: var(--text-2);
  max-width: 640px;
  line-height: 1.55;
  margin-top: 28px;
  border-left: 2px solid var(--amber);
  padding-left: 18px;
}

.masthead-meta {
  position: absolute;
  right: 32px;
  bottom: 70px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
  line-height: 1.9;
  padding: 14px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

.masthead-meta strong {
  color: var(--amber);
  font-weight: 600;
}

@media (max-width: 900px) {
  .masthead-meta { display: none; }
  .masthead { padding: 50px 0 36px; }
}

/* ============================================================
   STICKY CATEGORY NAV
   ============================================================ */
.cat-nav {
  position: sticky;
  top: 0;
  background: rgba(232, 236, 242, 0.95);
  border-bottom: 1px solid var(--line-hot);
  z-index: 50;
  padding: 12px 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(14, 23, 38, 0.06);
}

.cat-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  align-items: center;
}

.cat-nav-label {
  color: var(--amber);
  margin-right: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  font-weight: 700;
}

.cat-nav a {
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.cat-nav a:hover { color: var(--cyan); }

.cat-nav a .count {
  color: var(--amber);
  font-size: 10px;
  padding: 2px 5px;
  background: var(--panel);
  border: 1px solid var(--line);
  font-weight: 600;
}

@media (max-width: 720px) {
  .cat-nav-list { gap: 6px 16px; }
}

/* ============================================================
   CATEGORY SECTIONS
   ============================================================ */
.cat {
  padding-top: 60px;
  scroll-margin-top: 56px;
}

.cat:first-of-type { padding-top: 50px; }

.cat-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-hot);
  margin-bottom: 0;
  gap: 20px;
  position: relative;
}

.cat-head::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 140px;
  height: 2px;
  background: var(--amber);
  box-shadow: 0 0 12px rgba(216, 105, 14, 0.5);
}

.cat-title {
  font-family: var(--display);
  font-size: clamp(36px, 4.5vw, 52px);
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.cat-title::before {
  content: '//';
  color: var(--amber);
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
}

.cat-title .dot {
  color: var(--amber);
  font-style: normal;
}

.cat-count {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
  white-space: nowrap;
  padding: 6px 10px;
  border: 1px solid var(--cyan);
  background: rgba(8, 111, 174, 0.06);
  font-weight: 600;
}

.cat-desc {
  grid-column: 1 / -1;
  font-family: var(--body);
  color: var(--text-2);
  font-size: 15px;
  margin-top: 4px;
  max-width: 580px;
}

/* ============================================================
   CATEGORY GRID — CALCULATOR CARDS
   ============================================================ */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 22px;
}

.cat-card {
  padding: 24px 22px 70px;
  text-decoration: none;
  color: var(--text);
  display: block;
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  transition: all 0.2s ease;
  min-height: 200px;
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

.cat-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--amber-dim);
  transition: background 0.2s, box-shadow 0.2s;
}

.cat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='50' viewBox='0 0 28 50'%3E%3Cg fill='none' stroke='%238492AA' stroke-width='0.5' stroke-opacity='0.15'%3E%3Cpolygon points='14,0.5 27.5,8 27.5,24.5 14,32 0.5,24.5 0.5,8'/%3E%3Cpolygon points='14,25.5 27.5,33 27.5,49.5 14,57 0.5,49.5 0.5,33'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 28px 50px;
  opacity: 0.7;
}

.cat-card:hover {
  background: var(--panel-hi);
  border-color: var(--amber);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(216, 105, 14, 0.15), 0 0 0 1px rgba(216, 105, 14, 0.3);
}

.cat-card:hover::before {
  background: var(--amber);
  box-shadow: 0 0 12px var(--amber);
}

.cat-card:hover .index-arrow {
  color: var(--amber);
  transform: translateX(4px);
}

.cat-card:hover .cat-card-title {
  color: var(--amber);
}

.cat-card-title {
  font-family: var(--display);
  font-size: 24px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 10px;
  transition: color 0.2s;
  position: relative;
  z-index: 1;
}

.cat-card-blurb {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.5;
  position: relative;
  z-index: 1;
}

.index-arrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
  position: absolute;
  bottom: 20px;
  left: 22px;
  transition: transform 0.2s, color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 1;
  font-weight: 600;
}

@media (max-width: 980px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .cat-grid { grid-template-columns: 1fr; }
  .cat-card { min-height: auto; padding: 22px 20px 60px; }
}

/* ============================================================
   CALCULATOR PAGE — HEADER
   ============================================================ */
.calc-header {
  padding: 50px 0 40px;
  border-bottom: 1px solid var(--line-hot);
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 50px;
  align-items: end;
  position: relative;
}

.calc-header::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 180px; height: 2px;
  background: var(--amber);
  box-shadow: 0 0 14px rgba(216, 105, 14, 0.5);
}

.calc-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.calc-kicker::before {
  content: '◆';
  color: var(--amber);
}

.calc-title {
  font-family: var(--display);
  font-size: clamp(42px, 5.5vw, 76px);
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text);
}

.calc-title em {
  font-style: normal;
  color: var(--amber);
  text-shadow: 0 4px 20px rgba(216, 105, 14, 0.2);
}

.calc-deck {
  font-family: var(--body);
  font-size: 16px;
  color: var(--text-2);
  margin-top: 20px;
  max-width: 560px;
  line-height: 1.55;
  border-left: 2px solid var(--amber);
  padding-left: 16px;
}

.calc-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 2;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 18px 22px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

.calc-meta strong {
  color: var(--amber);
  font-weight: 600;
}

@media (max-width: 820px) {
  .calc-header { grid-template-columns: 1fr; gap: 28px; }
}

/* ============================================================
   CALCULATOR BODY LAYOUT
   ============================================================ */
.calc-body {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  padding: 50px 0;
}

@media (max-width: 980px) {
  .calc-body { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================
   THE INSTRUMENT — LIGHT PANEL
   ============================================================ */
.instrument {
  background: var(--panel);
  border: 1px solid var(--line-hot);
  position: relative;
  padding: 0;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  box-shadow: 0 4px 24px rgba(14, 23, 38, 0.06);
}

.instrument::before {
  content: '◢ INSTRUMENT.MODULE ◣';
  position: absolute;
  top: 14px;
  left: 24px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--amber);
  font-weight: 700;
  z-index: 2;
}

.instrument-inner {
  padding: 56px 32px 32px;
  position: relative;
  background: var(--panel);
}

.instrument-inner::before {
  content: 'STATUS // ACTIVE';
  position: absolute;
  top: 18px;
  right: 28px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--green);
  font-weight: 600;
}

@media (max-width: 620px) {
  .instrument-inner { padding: 50px 18px 24px; }
  .instrument-inner::before { display: none; }
}

/* ============================================================
   FIELDS
   ============================================================ */
.field-group {
  margin-bottom: 28px;
  padding-top: 22px;
  border-top: 1px dashed var(--line);
}

.field-group:first-of-type {
  padding-top: 8px;
  border-top: none;
}

.field-group-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}

.field-group-label::before {
  content: '▸';
  color: var(--amber);
  font-size: 12px;
}

.field {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 520px) {
  .field-row { grid-template-columns: 1fr; }
}

.field label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 8px;
  font-weight: 500;
}

input[type="number"],
input[type="text"],
input[type="date"],
select {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  background: var(--panel-lo);
  border: 1px solid var(--line);
  border-left: 2px solid var(--amber);
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  width: 100%;
  border-radius: 0;
}

input[type="number"]:focus,
input[type="text"]:focus,
input[type="date"]:focus,
select:focus {
  background: var(--panel);
  border-color: var(--cyan);
  border-left-color: var(--amber);
  box-shadow: 0 0 0 1px var(--cyan), 0 0 8px rgba(8, 111, 174, 0.15);
}

input[type="number"]::placeholder,
input[type="text"]::placeholder {
  color: var(--muted);
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0;
}
input[type=number] { -moz-appearance: textfield; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23D8690E'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 28px;
  cursor: pointer;
}

input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--amber);
  cursor: pointer;
}

/* ============================================================
   TOGGLE BUTTONS
   ============================================================ */
.toggle-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--line-hot);
  background: var(--panel);
  margin-bottom: 8px;
}

.toggle-group button {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  border: none;
  padding: 10px 14px;
  cursor: pointer;
  color: var(--text-2);
  transition: all 0.15s;
  border-right: 1px solid var(--line);
}

.toggle-group button:last-child { border-right: none; }

.toggle-group button.active {
  background: var(--amber);
  color: var(--panel);
  box-shadow: inset 0 0 0 1px var(--amber-dim);
}

.toggle-group button:not(.active):hover {
  background: var(--panel-lo);
  color: var(--cyan);
}

/* ============================================================
   READOUT — DARK ACCENT PANEL (the screen)
   ============================================================ */
.readout {
  margin-top: 0;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--panel-lo) 100%);
  color: var(--text);
  padding: 58px 32px 28px;
  position: relative;
  border-top: 4px solid var(--amber);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(14, 23, 38, 0.06);
}

.readout::before {
  content: '▸ YOUR RESULTS';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 11px 24px;
  background: linear-gradient(90deg, var(--amber) 0%, var(--amber-hot) 100%);
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.22em;
  color: #FFFFFF;
  font-weight: 700;
  text-transform: uppercase;
  z-index: 2;
}

.readout::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 3px,
    rgba(8, 111, 174, 0.018) 3px,
    rgba(8, 111, 174, 0.018) 4px
  );
}

.readout > * { position: relative; z-index: 1; }

.readout-primary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 0 18px;
  border-bottom: 1px dashed rgba(216, 105, 14, 0.4);
  margin-bottom: 18px;
  gap: 16px;
  flex-wrap: wrap;
}

.readout-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
  font-weight: 700;
}

.readout-value {
  font-family: var(--display);
  font-size: 56px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--amber);
  text-shadow: 0 0 14px rgba(216, 105, 14, 0.15);
  text-transform: uppercase;
}

.readout-value-sm {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
}

.readout-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}

.readout-cell {
  padding: 4px 0;
}

.readout-cell .readout-label {
  display: block;
  margin-bottom: 4px;
}

.readout-cell .readout-value-sm {
  font-size: 17px;
  color: var(--amber);
  font-weight: 700;
}

/* ============================================================
   SIDE NOTES
   ============================================================ */
.sidenotes {
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
}

.sidenotes-block {
  margin-bottom: 18px;
  padding: 18px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 2px solid var(--cyan);
  box-shadow: 0 2px 8px rgba(14, 23, 38, 0.04);
}

.sidenotes-block:last-child {
  border-left-color: var(--amber);
  margin-bottom: 0;
}

.sidenotes h3 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 10px;
  font-weight: 700;
}

.sidenotes-block:last-child h3 {
  color: var(--amber) !important;
}

.sidenotes p { margin-bottom: 8px; color: var(--text-2); }
.sidenotes p:last-child { margin-bottom: 0; }
.sidenotes strong { color: var(--text); font-weight: 600; }

.sidenotes-marg {
  color: var(--muted);
  font-size: 13.5px;
  font-style: italic;
}

/* ============================================================
   LONG-FORM CONTENT
   ============================================================ */
.longform {
  max-width: 760px;
  margin: 0 auto;
  padding: 60px 0 100px;
}

.longform h2 {
  font-family: var(--display);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 48px 0 20px;
  line-height: 1.05;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 12px;
  /* Long headings must be able to break onto a second line on phones,
     otherwise the flex row overflows the viewport. */
  flex-wrap: wrap;
}

.longform h2::before {
  content: '//';
  color: var(--amber);
  font-family: var(--mono);
  font-size: 22px;
}

.longform h2 em {
  font-style: normal;
  color: var(--amber);
}

.longform h3 {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 28px 0 10px;
  color: var(--cyan);
}

.longform p {
  margin-bottom: 14px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-2);
}

.longform .lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--text);
  margin-bottom: 28px;
  padding-left: 16px;
  border-left: 2px solid var(--amber);
}

.longform .lede::first-letter {
  font-family: var(--display);
  font-size: 52px;
  float: left;
  line-height: 0.9;
  padding: 4px 10px 0 0;
  color: var(--amber);
  font-weight: 700;
}

/* Inline formula boxes used in longform */
.longform p[style*="font-family"][style*="mono"] {
  background: var(--panel) !important;
  border-left: 3px solid var(--amber) !important;
  border-top: 1px solid var(--line) !important;
  border-right: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--cyan) !important;
  font-size: 14px !important;
  padding: 16px 20px !important;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(14, 23, 38, 0.04);
}

/* ============================================================
   TABLES
   ============================================================ */
.instrument-inner table { width: 100%; border-collapse: collapse; }
.instrument-inner table th {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.16em !important;
  color: var(--cyan) !important;
  text-transform: uppercase;
  font-weight: 700 !important;
  border-bottom: 1px solid var(--line-hot) !important;
  padding: 10px 6px !important;
}
.instrument-inner table td {
  border-bottom: 1px solid var(--line) !important;
  padding: 8px 6px !important;
  color: var(--text) !important;
  font-family: var(--mono) !important;
  font-size: 13px !important;
}
.instrument-inner table td[style*="accent"] {
  color: var(--amber) !important;
  font-weight: 600;
}

.instrument-inner table input[type="text"],
.instrument-inner table input[type="number"] {
  border: none !important;
  border-bottom: 1px solid var(--line) !important;
  border-left: none !important;
  background: transparent !important;
  padding: 4px 0 !important;
  font-size: 13px !important;
}

.instrument-inner table input:focus {
  border-bottom-color: var(--amber) !important;
  box-shadow: none !important;
}

/* ============================================================
   FOOTER — dark base
   ============================================================ */
.footer {
  border-top: 2px solid var(--amber);
  margin-top: 80px;
  padding: 50px 0 30px;
  background: var(--dark);
  color: #95A3BB;
  position: relative;
}

.footer::before {
  content: '';
  position: absolute;
  top: -2px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--amber-bright), transparent);
  box-shadow: 0 0 12px var(--amber-bright);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 50px;
  margin-bottom: 40px;
}

@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

.footer-brand {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 14px;
  color: #DEE6F2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.footer-brand::before {
  content: '◢';
  color: var(--amber-bright);
}

.footer-brand::after {
  content: '◣';
  color: var(--cyan-bright);
}

.footer-tagline {
  color: #95A3BB;
  max-width: 340px;
  font-size: 14px;
}

.footer h4 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber-bright);
  margin-bottom: 14px;
  font-weight: 700;
}

.footer ul { list-style: none; }
.footer li { margin-bottom: 8px; }
.footer a, .footer li {
  color: #95A3BB;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.15s;
}
.footer a:hover { color: var(--cyan-bright); }

.footer-base {
  border-top: 1px solid var(--dark-line);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #56657E;
}

@media (max-width: 620px) {
  .footer-base { flex-direction: column; gap: 8px; }
}

/* ============================================================
   SHOW THE WORKING — formula disclosure block
   ============================================================ */
/* Prominent pointer to the working, sits under the deck in the header */
.math-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  color: #FFFFFF;
  text-decoration: none;
  margin-top: 20px;
  padding: 11px 17px;
  border: 1px solid var(--cyan);
  background: var(--cyan);
  transition: background 0.15s, box-shadow 0.18s, transform 0.15s;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

.math-link::before {
  content: '\03A3';
  font-size: 14px;
  line-height: 1;
}

.math-link::after {
  content: '\2193';
  font-size: 13px;
  transition: transform 0.15s;
}

.math-link:hover {
  background: var(--cyan-hot);
  box-shadow: 0 6px 18px rgba(8, 111, 174, 0.42);
  transform: translateY(-1px);
}

.math-link:hover::after { transform: translateY(2px); }

@media (max-width: 520px) {
  .math-link { font-size: 10px; letter-spacing: 0.1em; padding: 10px 13px; }
}

.working {
  max-width: 760px;
  margin: 0 auto;
  padding: 10px 0 90px;
  scroll-margin-top: 24px;
}

.working-panel {
  background: var(--panel);
  border: 1px solid var(--line-hot);
  border-top: 3px solid var(--cyan);
  padding: 28px 30px 26px;
  position: relative;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  box-shadow: 0 4px 20px rgba(14, 23, 38, 0.06);
}

.working-title {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
  gap: 11px;
  flex-wrap: wrap;
}

.working-title::before {
  content: '\03A3';
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 700;
}

.working-intro {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 22px;
  max-width: 62ch;
}

.working-eq {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--line);
}

.working-eq:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.working-eq-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  font-weight: 700;
  margin-bottom: 8px;
}

.working-eq code {
  display: block;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text);
  background: var(--panel-lo);
  border-left: 3px solid var(--amber);
  padding: 12px 16px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Live line showing the reader's own numbers substituted in */
.working-live {
  display: block;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-2);
  margin-top: 7px;
  padding-left: 3px;
}
.working-live b { color: var(--amber); font-weight: 700; }

.working-consts {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line-hot);
}

.working-consts h3 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  font-weight: 700;
  margin-bottom: 12px;
}

.working-consts ul { list-style: none; margin: 0; padding: 0; }

.working-consts li {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-2);
  padding: 3px 0 3px 15px;
  position: relative;
}

.working-consts li::before {
  content: '\2022';
  position: absolute;
  left: 0;
  color: var(--cyan);
}

.working-consts li b { color: var(--text); font-weight: 700; }

.working-callout {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--muted);
  font-style: italic;
}

@media (max-width: 620px) {
  .working-panel { padding: 24px 18px 22px; }
  .working-eq code { font-size: 12.5px; padding: 11px 12px; }
}

/* ============================================================
   NARROW-SCREEN OVERFLOW GUARDS
   ============================================================ */
@media (max-width: 560px) {
  /* Module labels like "Body · Testosterone" are long enough to push
     the topbar nav off-screen. Drop the label rather than the nav. */
  .topbar-meta { display: none; }

  /* The brand plus three nav items overruns a 320px viewport. Let the
     row wrap instead, so adding a nav item can never push it off-screen. */
  .topbar-inner { flex-wrap: wrap; row-gap: 8px; }
  .topbar-nav { gap: 14px; }

  /* "N instruments" sitting beside a long category title forces the
     1fr/auto grid wider than the viewport. Stack them instead. */
  .cat-head { grid-template-columns: 1fr; }
  .cat-count { justify-self: start; }
}

/* ============================================================
   HELPERS
   ============================================================ */
.serif-em { color: var(--amber); font-weight: 600; }
.mono { font-family: var(--mono); color: var(--cyan); }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.rise > * { opacity: 0; animation: rise 0.7s ease forwards; }
.rise > *:nth-child(1) { animation-delay: 0.05s; }
.rise > *:nth-child(2) { animation-delay: 0.18s; }
.rise > *:nth-child(3) { animation-delay: 0.32s; }
.rise > *:nth-child(4) { animation-delay: 0.46s; }

::selection {
  background: var(--amber);
  color: var(--panel);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--line-hot); border: 2px solid var(--bg-2); }
::-webkit-scrollbar-thumb:hover { background: var(--amber); }

/* ============================================================
   EMBED CTA — the "put this on your site" strip
   ------------------------------------------------------------
   Sits directly under the topbar, so site owners see it without
   scrolling. Deliberately a slim band rather than a panel: this
   is above the H1, and the calculator is what people came for.
   Injected by _pass.py between the EMBED-CTA markers.
   ============================================================ */
.embed-cta {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 3;
}

.embed-cta-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 11px;
  padding-bottom: 11px;
}

/* Deliberately NOT a flex container. An inline <em> inside a flex
   parent becomes its own flex item, and the text either side of it
   becomes two more, which breaks the sentence into three pieces that
   wrap independently. The kicker is a sibling instead. */
.embed-cta-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-2);
}

.embed-cta-text em {
  font-style: normal;
  font-weight: 600;
  color: var(--amber);
}

.embed-cta-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  align-self: stretch;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cyan);
  white-space: nowrap;
  padding-right: 18px;
  border-right: 1px solid var(--line);
}

.embed-cta-kicker::before {
  content: '◆';
  color: var(--amber);
  font-size: 8px;
}

/* Marks and button travel together, so that stacking the strip on a
   narrow screen costs one extra row rather than two. */
.embed-cta-action {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: none;
}

.embed-cta-marks {
  display: flex;
  align-items: center;
  gap: 13px;
  flex: none;
}

/* The marks are already drawn in --muted, so hover just lifts them
   rather than recolouring - an <img> cannot inherit currentColor. */
.embed-cta-marks img {
  width: 20px;
  height: 20px;
  display: block;
  opacity: 0.8;
  transition: opacity 0.15s;
}

.embed-cta-marks img:hover { opacity: 1; }

/* PHP's mark is a wide ellipse and React's a wide atom, so both read
   smaller than the squarer marks at the same box size. */
.embed-cta-marks img[alt="PHP"] { width: 24px; height: 24px; }
.embed-cta-marks img[alt="React"] { width: 22px; height: 22px; }

.embed-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: #FFFFFF;
  text-decoration: none;
  white-space: nowrap;
  padding: 10px 16px;
  border: 1px solid var(--amber);
  background: var(--amber);
  transition: background 0.15s, box-shadow 0.18s, transform 0.15s;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

.embed-cta-btn::after {
  content: '→';
  font-size: 12px;
  transition: transform 0.15s;
}

.embed-cta-btn:hover {
  background: var(--amber-hot);
  border-color: var(--amber-hot);
  box-shadow: 0 5px 14px rgba(216, 105, 14, 0.35);
  transform: translateY(-1px);
}

.embed-cta-btn:hover::after { transform: translateX(3px); }

/* Below this the sentence is down to about three lines beside the
   button, which reads worse than stacking. */
@media (max-width: 820px) {
  .embed-cta-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .embed-cta-text { font-size: 13.5px; }
  .embed-cta-kicker { align-self: auto; border-right: none; padding-right: 0; }
  .embed-cta-action { align-self: stretch; justify-content: space-between; }
}

/* Below this the marks and the button can no longer share a row
   without one of them shrinking past legibility. The strip sits above
   the H1, so the row is worth more than the marks here - they are a
   nicety for someone evaluating the embed, and that is a desk job. */
@media (max-width: 520px) {
  .embed-cta-text { font-size: 13px; }
  .embed-cta-btn { font-size: 9.5px; letter-spacing: 0.1em; padding: 9px 13px; }
  .embed-cta-marks { display: none; }
}

/* The embed itself is not the place to advertise embedding. */
html.ct-embed .embed-cta { display: none !important; }

/* ============================================================
   EMBED MODE — html.ct-embed
   ------------------------------------------------------------
   Switched on by ?embed=1. Same page, same markup, same script:
   the chrome is simply hidden and the instrument is left to fill
   the frame. See embed.js.
   ============================================================ */
html.ct-embed,
html.ct-embed body {
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 0;
  background: var(--panel);
  background-image: none;
  overflow-x: hidden;
}

/* Fixed-position hex overlay makes no sense inside a small frame. */
html.ct-embed body::before { display: none; }

html.ct-embed .topbar,
html.ct-embed .calc-header,
html.ct-embed .sidenotes,
html.ct-embed .longform,
html.ct-embed .working,
html.ct-embed .footer,
html.ct-embed .cat-nav,
html.ct-embed .masthead { display: none !important; }

html.ct-embed .shell { max-width: none; padding: 0; }

html.ct-embed .calc-body {
  display: block;
  grid-template-columns: none;
  gap: 0;
  padding: 0;
}

/* Square off the corners — a clipped corner against the frame edge
   just reads as a rendering fault. */
html.ct-embed .instrument {
  clip-path: none;
  box-shadow: none;
  border: none;
}

html.ct-embed .instrument-inner { padding-top: 46px; }

/* Nothing animates in on load; an embed can be scrolled past
   before it ever fires, leaving the panel invisible. */
html.ct-embed .rise > * { opacity: 1; animation: none; }

.ct-embed-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 18px;
  background: var(--dark);
  border-bottom: 1px solid var(--dark-line);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  position: relative;
  z-index: 4;
}

.ct-embed-brand {
  color: var(--amber-bright);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}

.ct-embed-brand:hover { color: #FFFFFF; }

.ct-embed-name {
  color: #8E9DB6;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ct-embed-credit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 18px;
  background: var(--panel-lo);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cyan);
  text-decoration: none;
  position: relative;
  z-index: 4;
  transition: background 0.15s, color 0.15s;
}

.ct-embed-credit:hover { background: var(--panel); color: var(--cyan-hot); }
.ct-embed-credit .ct-embed-arrow { transition: transform 0.15s; }
.ct-embed-credit:hover .ct-embed-arrow { transform: translateX(3px); }

@media (max-width: 420px) {
  .ct-embed-name { display: none; }
  .ct-embed-credit { font-size: 9px; letter-spacing: 0.1em; }
}

/* ============================================================
   THE EMBED LAB — /embed
   ============================================================ */
.lab {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 44px;
  padding: 44px 0 20px;
  align-items: start;
}

@media (max-width: 1080px) {
  .lab { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}

.lab-panel {
  background: var(--panel);
  border: 1px solid var(--line-hot);
  padding: 30px 28px 28px;
  position: relative;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  box-shadow: 0 4px 24px rgba(14, 23, 38, 0.06);
  margin-bottom: 28px;
}

.lab-panel:last-child { margin-bottom: 0; }

.lab-step {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
  font-weight: 700;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.lab-step::before {
  content: attr(data-n);
  font-size: 10px;
  color: var(--panel);
  background: var(--amber);
  padding: 3px 8px;
  letter-spacing: 0.1em;
}

.lab-hint {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 14px;
}

.lab-hint strong { color: var(--text-2); font-weight: 600; }

.lab-hint code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--panel-lo);
  border: 1px solid var(--line);
  padding: 1px 5px;
  color: var(--cyan);
}

.lab-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--text-2);
  cursor: pointer;
  line-height: 1.5;
}

.lab-check input { margin-top: 2px; flex: none; }

/* Format tabs ------------------------------------------------ */
.fmt-tabs {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--line-hot);
  background: var(--panel);
  margin-bottom: 0;
}

.fmt-tabs button {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent;
  border: none;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 11px 14px;
  cursor: pointer;
  color: var(--text-2);
  transition: all 0.15s;
  flex: 1 1 auto;
}

.fmt-tabs button.active {
  background: var(--amber);
  color: var(--panel);
  box-shadow: inset 0 0 0 1px var(--amber-dim);
}

.fmt-tabs button:not(.active):hover { background: var(--panel-lo); color: var(--cyan); }

.fmt-tabs .fmt-sep {
  flex: 1 1 100%;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--panel-lo);
  border-bottom: 1px solid var(--line);
  padding: 6px 14px;
  font-weight: 700;
}

/* Code box --------------------------------------------------- */
.code-box {
  position: relative;
  background: var(--dark);
  border: 1px solid var(--dark-line);
  border-top: none;
  padding: 44px 18px 18px;
}

.code-box::before {
  content: 'SNIPPET // READY';
  position: absolute;
  top: 15px;
  left: 18px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--green);
  font-weight: 700;
}

.code-box pre {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: #D6E2F2;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  max-height: 340px;
  overflow-y: auto;
}

.copy-btn {
  position: absolute;
  top: 10px;
  right: 12px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: var(--cyan);
  border: 1px solid var(--cyan);
  padding: 7px 13px;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}

.copy-btn:hover { background: var(--cyan-hot); transform: translateY(-1px); }
.copy-btn.done { background: var(--green); border-color: var(--green); }

.fmt-where {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 14px;
  padding-left: 14px;
  border-left: 2px solid var(--amber);
}

.fmt-where strong { color: var(--text-2); font-weight: 600; }

/* Preview ---------------------------------------------------- */
.lab-preview { position: sticky; top: 24px; }

@media (max-width: 1080px) {
  .lab-preview { position: static; }
}

.preview-shell {
  border: 1px solid var(--line-hot);
  background: var(--panel);
  box-shadow: 0 4px 24px rgba(14, 23, 38, 0.06);
}

.preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--dark);
  padding: 11px 16px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber-bright);
}

.preview-head span:last-child { color: #8E9DB6; }

.preview-shell iframe {
  display: block;
  width: 100%;
  border: 0;
  height: 640px;
  background: var(--panel);
}

.lab-live {
  font-size: 13px;
  color: var(--muted);
  margin-top: 14px;
  line-height: 1.6;
}

/* ============================================================
   BADGE STRIP — link-card previews on /embed
   ============================================================ */
.badge-preview {
  margin-top: 16px;
  padding: 18px;
  background: var(--panel-lo);
  border: 1px solid var(--line);
  display: flex;
  justify-content: center;
}

/* The `hidden` attribute only works through a UA rule of display:none,
   which the display:flex above beats. Without this the preview box sits
   there on every tab. */
.badge-preview[hidden] { display: none; }

.badge-preview img { max-width: 100%; height: auto; }
/* ---------------------------------------------------------------
   ALERT BANNER

   A page-level caveat that sits above the topbar. Two things about
   it are deliberate.

   It is NOT hidden by html.ct-embed. Embed mode strips the
   sidenotes, longform and working sections, which is where every
   other page keeps its caveats - so an embedded calculator would
   otherwise carry no warning at all on someone else's site.

   The sentence lives in a block child of the flex row, not in the
   flex row itself. An inline <em> inside a flex container becomes
   its own flex item and strands the words either side of it on
   separate lines, which is the bug the embed strip hit.
   --------------------------------------------------------------- */
.alert-banner {
  background: var(--red);
  color: #FFFFFF;
  border-bottom: 2px solid #8A2029;
}

.alert-banner-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.alert-banner-mark {
  flex: none;
  font-family: var(--mono);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
}

.alert-banner-body { min-width: 0; }

.alert-banner-kicker {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.alert-banner-text {
  margin: 0;
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
}

/* Its own line by design, so the banner is exactly two lines of text.
   Only "Click here" is the link - the rest is plain. */
.alert-banner-cta {
  margin: 2px 0 0;
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
}

@media (max-width: 720px) {
  .alert-banner-inner { padding: 14px 18px; gap: 12px; }
  .alert-banner-mark { font-size: 16px; }
  .alert-banner-text,
  .alert-banner-cta { font-size: 14px; }
}

/* No white-space:nowrap here. The link text is long enough that refusing
   to wrap pushes it past the viewport on a phone - measured at 418px of
   content in a 365px viewport before this was removed. */
.alert-banner-link {
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
}

.alert-banner-link:hover { text-decoration-thickness: 2px; }

/* Source lists. Used on any page whose numbers are averaged from
   published references rather than derived. */
.source-list {
  margin: 22px 0 0;
  padding-left: 22px;
  display: grid;
  gap: 14px;
}

.source-list li {
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}

.source-list a {
  color: var(--cyan);
  font-weight: 600;
  text-decoration: none;
}

.source-list a:hover { text-decoration: underline; }

.source-meta {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

/* ---------------------------------------------------------------
   PAGE GRID ALIGNMENT

   .longform and .working were max-width:760px centred in the shell.
   The instrument above them is not centred in the shell - it sits in
   .calc-body's 1fr column, with the 340px sidenote column and a 48px
   gap to its right. So the two blocks had different left edges AND
   different right edges, and the page read as two layouts stacked on
   top of each other.

   These now match that column exactly. 388px is the sidenote column
   plus the gap, so the arithmetic stays tied to .calc-body - change
   the grid there and this follows. Below 980px .calc-body collapses
   to a single column, so these go full width to match.
   --------------------------------------------------------------- */
/* Scoped to pages that actually have the two-column grid. about.html and
   embed.html carry a .longform with no .calc-body, and would otherwise get
   a 388px empty gutter down their right side.

   Two things have to match, not one. .calc-body sets `padding: 50px 0`,
   which cancels .shell's `0 32px` horizontal padding - so the instrument
   starts at the shell edge while a following `section.shell` starts 32px
   in. Zeroing the padding on those sections fixes the left edge; the
   calc() fixes the right. Fixing only the width leaves a 32px offset that
   is easy to miss and was the original complaint.

   Below 980px .calc-body collapses to one column and the instrument goes
   full-bleed, which is right for a panel and wrong for prose, so the
   sections keep their normal padding there. */
@media (min-width: 981px) {
  .calc-body ~ section.shell {
    padding-left: 0;
    padding-right: 0;
  }

  .calc-body ~ section.shell > .longform,
  .calc-body ~ section.shell > .working {
    max-width: calc(100% - 388px);
    margin: 0;
  }
}

/* Two columns for question-and-answer blocks, so the lower half of a
   page fills the width the instrument set rather than trailing off as
   a narrow strip. Each item is its own grid child, so a question can
   never be split from its answer the way CSS columns would. */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 44px;
  margin-top: 24px;
}

.faq-grid .faq-item h3 { margin-top: 0; }

@media (max-width: 900px) {
  .faq-grid { grid-template-columns: 1fr; gap: 0; }
  .faq-grid .faq-item h3 { margin-top: 34px; }
}

/* The index caps each category at nine cards. Anything past that gets this
   link, which sits in the grid as the next cell so the row stays even
   rather than trailing a stray line of text under the cards. */
.cat-viewall {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 22px;
  border: 1px dashed var(--line-hot);
  background: transparent;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  text-decoration: none;
  transition: all 0.15s;
}

.cat-viewall:hover {
  border-style: solid;
  border-color: var(--amber);
  color: var(--amber);
  background: var(--panel);
}

/* ---------------------------------------------------------------
   EMBED SPOKE PAGES  -  /embed/<slug>
   The snippet is pre-rendered into the HTML rather than built by
   script, so it is in the DOM for a crawler and present before JS
   runs. white-space:pre-wrap keeps it copyable without a horizontal
   scrollbar on a phone.
   --------------------------------------------------------------- */
.embed-code {
  margin: 0 0 14px;
  padding: 16px 18px;
  background: var(--dark);
  color: #D7E1EE;
  border: 1px solid var(--dark-line);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

.embed-copy {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 12px 22px;
  border: 1px solid var(--amber);
  background: var(--amber);
  color: var(--panel);
  cursor: pointer;
  transition: all 0.15s;
}

.embed-copy:hover { background: var(--amber-hot); border-color: var(--amber-hot); }

.embed-hint {
  margin: 16px 0 0;
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

.embed-hint a { color: var(--cyan); font-weight: 600; }