/* The laboratories share the journal's visual language. Diagram and chart colors
   remain semantic: loads, temperatures, warnings and series keep their meaning. */
@font-face {
  font-family: "Journal Value Serif";
  src: url("/fonts/ValueSerifPro-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
:root {
  --navy: #181818;
  --ink: #181818;
  --muted: #66635e;
  --teal: #6b1e2e;
  --teal-light: #efe7e8;
  --accent: #6b1e2e;
  --line: #d7d4cc;
  --canvas: #faf9f6;
  --bg: #f7f6f2;
  --white: #faf9f6;
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
body { background: var(--bg); color: var(--ink); }
:where(button, a, input, select, textarea, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
button, input:not([type=range]):not([type=checkbox]), select, textarea { border-radius: 0 !important; }
button, select { min-height: 40px; }
h1, .structure-lab h2, .simulation-app .trend-heading h2 { font-family: "Journal Value Serif", Georgia, serif; font-weight: 400; }
h1 { font-size: clamp(1.8rem, 2.5vw, 2.6rem); letter-spacing: -.025em; }
button { box-shadow: none !important; }
button.primary:hover { background: #531725; }
input, select, textarea { color: var(--ink); }
header, footer, .topbar, .simulation-bar, .parameters, .panel { background: var(--canvas); }
label, .subtitle, .eyebrow, .section-tag, .breadcrumb { color: var(--muted); }
.eyebrow { font-weight: 500; letter-spacing: .14em; }
/* Structure notebook: tabs and ruled sections retain every original control. */
.structure-lab .sidebar { background: var(--bg); color: var(--ink); border-right: 1px solid var(--line); }
.structure-lab .brand { font-family: "Journal Value Serif", Georgia, serif; font-size: 1.5rem; font-weight: 400; color: var(--ink); letter-spacing: -.025em; }
.structure-lab .brand-mark, .structure-lab .brand small { color: var(--accent); }
.structure-lab .brand-sub, .structure-lab .nav-label, .structure-lab .sidebar-bottom, .structure-lab .sidebar-bottom b { color: var(--muted); }
.structure-lab .nav-btn { color: var(--muted); border-radius: 0; }
.structure-lab .nav-btn:hover { background: #efece5; color: var(--ink); }
.structure-lab .nav-btn.active { color: var(--accent); background: #efe7e8; box-shadow: none; border-left: 2px solid var(--accent); }
.structure-lab .nav-symbol { color: inherit; }
.structure-lab .page { padding-top: 36px; }
.structure-lab .modes { padding: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.structure-lab .modes button.active { background: transparent; color: var(--accent); border-bottom: 2px solid var(--accent); }
.structure-lab .panel { border-radius: 0; }
.structure-lab .panel-header { padding-block: 18px; }
.structure-lab .panel-header h2 { font-size: 1.25rem; }
.structure-lab .panel-header h3 { font-weight: 500; }
.structure-lab .pill, .structure-lab .element-chip, .structure-lab .avatar { border-radius: 0; }
.structure-lab .pill { background: transparent; color: var(--muted); border-color: var(--line); }
.structure-lab .pill.ok { color: #31604c; }
.structure-lab .stats { gap: 0; border-block: 1px solid var(--line); }
.structure-lab .stat { border: 0; border-right: 1px solid var(--line); background: transparent; border-radius: 0; }
.structure-lab .stat:last-child { border-right: 0; }
.structure-lab .stat-value { font-variant-numeric: tabular-nums; font-weight: 500; }
.structure-lab .properties, .structure-lab .equation, .structure-lab .notebook, .structure-lab .notebook .panel-header { border-radius: 0; background: #f5f3ee; }
.structure-lab .callout { border-radius: 0; }
.structure-lab .steps { border-radius: 0; background: var(--canvas); }
.structure-lab .steps button.active { color: var(--accent); background: var(--teal-light); }
.structure-lab .modal, .structure-lab .check-card, .structure-lab .lesson { border-radius: 0; box-shadow: none; }
.structure-lab .question { font-family: "Journal Value Serif", Georgia, serif; color: var(--ink); }
/* HVAC: the engineering diagram stays central; readouts form a ruled data strip. */
.simulation-app .engineering-layout { background: var(--bg); }
.simulation-app .brand { letter-spacing: .08em; }
.simulation-app .brand-mark { border-radius: 0; color: var(--accent); background: transparent; font-family: "Journal Value Serif", Georgia, serif; font-weight: 400; }
.simulation-app .download { border-radius: 0; color: var(--ink); }
.simulation-app .workspace { background: #f5f3ee; }
.simulation-app .model-workspace, .simulation-app .trends { border-radius: 0; border-color: var(--line); }
.simulation-app .model-workspace h1 { font-size: clamp(1.5rem, 2vw, 2rem); }
.simulation-app .view-modes { border-radius: 0; background: var(--canvas); border-color: var(--line); }
.simulation-app .view-modes button.selected, .simulation-app .preset-buttons button.selected, .simulation-app .simulation-bar .primary { background: var(--accent); color: var(--canvas); border-color: var(--accent); }
.simulation-app .parameters h2, .simulation-app .parameters h2 span { color: var(--ink); font-weight: 500; }
.simulation-app .parameters h2 { color: var(--accent); }
.simulation-app .param>label, .simulation-app .select-param, .simulation-app .visibility label, .simulation-app .playback label { color: var(--muted); }
.simulation-app .param-controls input[type=number], .simulation-app .select-param select, .simulation-app .simulation-bar select { background: var(--canvas); color: var(--ink); border-color: var(--line); }
.simulation-app .parameter-note, .simulation-app .chart-readout, .simulation-app .trend-heading>span, .simulation-app .range-ends, .simulation-app .meter-grid p { color: var(--muted); }
.simulation-app .meter-grid { gap: 0; border-block: 1px solid var(--line); }
.simulation-app .meter-grid article { background: transparent; border: 0; border-right: 1px solid var(--line); border-radius: 0; }
.simulation-app .meter-grid article>span { color: var(--muted); }
.simulation-app .meter-grid .cost-meter { background: #efece5; }
.simulation-app .meter-grid strong { color: var(--ink); }
.simulation-app .trends { background: var(--canvas); }
.simulation-app .chart-panel h3 { color: var(--ink); }
.simulation-app .thermal-strip { background: var(--canvas); }
.simulation-app .tag { border-radius: 0; box-shadow: none; }
.simulation-app .pid-status, .simulation-app .pid-readbacks, .simulation-app .toggle-btn, .simulation-app .status { border-radius: 0; }
.simulation-app .pid-readbacks { background: #f5f3ee; }
.simulation-app .notice { background: #efece5; color: var(--muted); }
.simulation-app .notice.warning { background: #fff3e8; color: #795728; }
@media (max-width: 760px) {
  .structure-lab .page { padding-top: 24px; }
  .structure-lab .sidebar { background: var(--canvas); border-top-color: var(--line); }
  .structure-lab .nav-btn.active { border-left: 0; border-top: 2px solid var(--accent); }
  .structure-lab .page-heading { align-items: start; }
}
/* Hypotheses read as a reference sheet, with no decorative modal effects. */
.structure-lab .modal-backdrop { background: #18181880; backdrop-filter: none; }
.structure-lab .modal, .structure-lab .modal-title { background: var(--canvas); }
.structure-lab .hypothesis-grid { gap: 0 24px; }
.structure-lab .hypothesis { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 20px 0; }
.structure-lab .hypothesis h3 { font-family: "Journal Value Serif", Georgia, serif; font-size: 1.2rem; font-weight: 400; color: var(--ink); }
.structure-lab .legend i.teal { background: #087f8c; }
.structure-lab .callout:not(.warning):not(.error) { background: #efece5; border-color: var(--accent); color: var(--ink); }