/* BFFT: the house frame with an oscilloscope-blue subject colour. The two instruments
   keep their dark display wells; the article around them stays on the house paper. */

.house-frame:has(.bfft-cover) {
  --cover-a: #1d4f7c;
  --cover-b: #0b1a33;
  --cover-glow: rgba(75, 196, 205, .3);
  --cover-warm: rgba(221, 183, 85, .16);
  --accent: #2a6496;
  --bfft-well: #0e1c31;
  --bfft-cyan: #4bc4cd;
  --bfft-gold: #ddb755;
}

.bfft-body cite { font-style: italic; }
.bfft-body code { font-family: var(--h-serif); }

.bfft-code {
  margin: 1.1em 0 0; padding: 16px 20px; overflow-x: auto;
  font: 14px/1.6 ui-monospace, Menlo, Consolas, monospace;
  background: #f3f4f7; border: 1px solid var(--h-line); border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(15, 29, 61, .12);
}
.bfft-code code { font: inherit; }

/* An equation set as a short descent, then the prose that explains it. */
.bfft-equation {
  display: grid; justify-items: center; gap: 8px; margin: 14px 0 22px; padding: 26px 22px;
  color: #eef4fb; text-align: center;
  background: radial-gradient(90% 120% at 50% 0, rgba(75, 196, 205, .16), transparent 70%), var(--bfft-well);
  border: 1px solid #2c3f5c; border-radius: 4px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 8px 22px rgba(22, 31, 52, .2);
}
.bfft-equation code { font: clamp(19px, 2.6vw, 28px)/1.4 var(--h-serif); }
.bfft-equation span { color: #a9bdd4; font: 13px/1.4 var(--h-sans); }
.bfft-equation span::before { content: "↓ "; color: var(--bfft-cyan); }

.bfft-identity { margin: 1.1em 0 .4em; }
.bfft-identity code {
  display: inline-block; box-sizing: border-box; max-width: 100%; overflow-x: auto; padding: 10px 16px;
  font: clamp(17px, 2.2vw, 21px)/1.5 var(--h-serif); white-space: nowrap;
  background: color-mix(in srgb, var(--h-pearl) 70%, var(--accent) 7%);
  border: 1px solid var(--h-line); border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(15, 29, 61, .12);
}

/* The instruments: a lit housing around dark display wells. */
.bfft-lab {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px 22px; margin: 18px 0 22px; padding: 18px;
  background: linear-gradient(#f7f9fc, #e8edf4);
  border: 1px solid #b8c4d6; border-radius: 5px;
  box-shadow: inset 0 1px #fff, 0 10px 26px rgba(22, 31, 52, .16);
}
.bfft-lab canvas {
  display: block; width: 100%; max-width: 100%; height: auto; background: var(--bfft-well);
  border: 1px solid #2c3f5c; border-radius: 3px; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .4);
}
.bfft-controls { display: grid; align-content: start; gap: 6px; font: 13px/1.4 var(--h-sans); }
.bfft-controls label { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; color: var(--h-ink); }
.bfft-controls output { font-variant-numeric: tabular-nums; color: var(--accent); }
.bfft-controls input[type="range"] { width: 100%; margin: 0 0 14px; accent-color: var(--h-action-bottom); }
.bfft-controls select {
  width: 100%; min-height: 36px; margin: 0 0 14px; padding: 6px 8px;
  font: 14px var(--h-sans); color: var(--h-ink); background: #fff;
  border: 1px solid var(--h-well-edge); border-radius: 3px; box-shadow: inset 0 1px 3px rgba(29, 45, 75, .14);
}
.bfft-controls dl { margin: 6px 0 0; }
.bfft-controls dl div { padding: 8px 0; border-top: 1px solid var(--h-line); }
.bfft-controls dt { color: var(--h-muted); font-size: 12px; }
.bfft-controls dd { margin: 2px 0 0; font: 600 19px/1.2 var(--h-serif); font-variant-numeric: tabular-nums; }
.bfft-condition { grid-column: 2; }
.bfft-condition p { margin: 8px 0 0; color: var(--h-muted); font: 15px/1.5 var(--h-serif); }
.bfft-readout {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin: 0;
  background: #b8c4d6; border: 1px solid #b8c4d6; border-radius: 3px; overflow: hidden;
}
.bfft-readout div { padding: 10px 12px; background: #fff; }
.bfft-readout dt { color: var(--h-muted); font: 12px/1.3 var(--h-sans); }
.bfft-readout dd { margin: 4px 0 0; font: 600 18px/1.2 var(--h-serif); font-variant-numeric: tabular-nums; }

/* Four theorems on one sheet, divided by etched rules. */
.bfft-theorems {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 14px 0 6px;
  background: #fff; border: 1px solid var(--h-line); border-radius: 4px;
  box-shadow: 0 6px 16px rgba(22, 31, 52, .1);
}
.bfft-theorems article { padding: 18px 22px 20px; border-color: var(--h-line); }
.bfft-theorems article:nth-child(odd) { border-right: 1px solid var(--h-line); }
.bfft-theorems article:nth-child(-n+2) { border-bottom: 1px solid var(--h-line); }
.bfft-theorems h3 { margin: 0; font: 600 19px/1.25 var(--h-serif); }
.bfft-theorems p { margin: 8px 0 0; font: 16.5px/1.55 var(--h-serif); }
.bfft-theorems .bfft-formula { margin: 12px 0; color: var(--accent); font: 600 clamp(18px, 2vw, 23px)/1.4 var(--h-serif); }

/* History as a ruled timeline. */
.bfft-history { margin: 10px 0 0; padding: 0; list-style: none; max-width: 860px; }
.bfft-history li {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 20px; padding: 18px 0;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--h-rule) 8%, var(--h-rule) 92%, transparent) 1;
}
.bfft-history time { color: var(--accent); font: 600 22px/1.2 var(--h-serif); font-variant-numeric: tabular-nums; }
.bfft-history h3 { margin: 0 0 6px; font: 600 20px/1.3 var(--h-serif); }
.bfft-history p { margin: 0 0 6px; max-width: 68ch; font: 17px/1.58 var(--h-serif); }
.bfft-history a { font: 14px/1.4 var(--h-sans); }

.bfft-walks, .bfft-features { display: grid; gap: 14px; margin: 14px 0 0; }
.bfft-walks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bfft-features { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; }
.bfft-walks article, .bfft-features article {
  padding: 16px 18px 18px; background: linear-gradient(#fff, #f6f8fb);
  border: 1px solid var(--h-line); border-top: 3px solid var(--accent); border-radius: 3px;
}
.bfft-walks article:last-child { border-top-color: var(--bfft-cyan); }
.bfft-walks h3, .bfft-features h3 { margin: 0 0 6px; font: 600 19px/1.3 var(--h-serif); }
.bfft-walks p, .bfft-features p { margin: 0; font: 16.5px/1.56 var(--h-serif); }

.bfft-lab--dip { grid-template-columns: 220px minmax(0, 1fr); }
.bfft-lab--dip canvas { max-width: 620px; }

.bfft-specs { display: grid; gap: 0; margin: 14px 0 0; }
.bfft-specs > div {
  display: grid; grid-template-columns: minmax(130px, 11em) 1fr; gap: 4px 20px; padding: 10px 0;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--h-rule) 10%, var(--h-rule) 90%, transparent) 1;
}
.bfft-specs dt { font-weight: 600; }
.bfft-specs dd { margin: 0; }

.bfft-sources { margin: 10px 0 0; padding: 0; list-style: none; max-width: 860px; font: 16px/1.5 var(--h-serif); }
.bfft-sources li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 6px 0; }
.bfft-sources span { color: var(--h-muted); font: 14px/1.6 var(--h-sans); font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  .bfft-lab, .bfft-lab--dip { grid-template-columns: 1fr; }
  .bfft-condition { grid-column: 1; }
  .bfft-readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bfft-walks { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bfft-theorems, .bfft-features { grid-template-columns: 1fr; }
  .bfft-theorems article:nth-child(odd) { border-right: 0; }
  .bfft-theorems article:not(:last-child) { border-bottom: 1px solid var(--h-line); }
  .bfft-history li { grid-template-columns: 1fr; gap: 4px; }
  .bfft-specs > div { grid-template-columns: 1fr; }
  .bfft-sources li { grid-template-columns: 1fr; gap: 0; }
  .bfft-lab { padding: 12px; }
}