/* Deliberately plain: the page frames two MATLAB-looking figures and must not
   compete with them. Everything is system fonts and flat greys. */

:root {
  --ink: #222;
  --muted: #666;
  --line: #d6d6d6;
  --panel: #f6f6f6;
  /* Brick: the same house colour the guide uses. Not the same as the red the
     THRUST LINE is drawn in (#A2142F, kept as it is because every published
     figure uses it); this one is chrome, that one is data. */
  --accent: #9c3a29;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 14px/1.5 Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: #fff;
}

header {
  padding: 14px 20px 10px;
  border-bottom: 1px solid var(--line);
}
header h1 { margin: 0; font-size: 19px; letter-spacing: 0.2px; }
header .sub { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
a { color: var(--accent); }

/* The page fills the window and never scrolls as a whole: the control panel
   scrolls inside itself, so the two plots stay put and stay as large as the
   window allows. Every ancestor of the canvas therefore needs a DEFINITE
   height, which is what the grid rows and the min-height:0 below provide. */
html, body { height: 100%; }
body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}

main {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  min-height: 0;
}

#panel {
  border-right: 1px solid var(--line);
  background: var(--panel);
  padding: 14px 16px;
  /* The one scrolling region on the page. */
  overflow-y: auto;
  min-height: 0;
}
/* The panel is three tabbed panes: Geometry, LoT, Mechanism. The tab strip
   is the same one the right-hand pane uses. */
#panel .tabs { position: sticky; top: 0; background: var(--panel); z-index: 2;
  padding-bottom: 4px; margin-bottom: 8px; }
#panel .pane[hidden] { display: none; }
#panel section { margin-bottom: 20px; }
#panel h2 {
  margin: 0 0 7px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
}
#panel label { display: block; margin: 3px 0; font-size: 13px; }
#panel select,
#panel input[type=range],
#panel button { width: 100%; }
#panel select, #panel button {
  padding: 5px 6px;
  font: inherit;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 3px;
}
#panel button { cursor: pointer; }
#panel button:hover { background: #eee; }

.meta { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.hint { margin: 6px 0 0; font-size: 12px; color: var(--muted); font-style: italic; }
.warn {
  margin: 8px 0 0;
  padding: 7px 9px;
  font-size: 12px;
  border-left: 3px solid #c8860a;
  background: #fdf6e6;
  color: #6b4a03;
}

/* The right-hand column: the two plots, and the toolbar under them. */
#stage {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 0;
  min-width: 0;
}

#plots {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 12px;
  padding: 12px;
  min-height: 0;
}
/* The tab strip over the second plot: force polygon or block arch. */
.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}
.tabs .tab {
  padding: 3px 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid var(--line);
  border-bottom-color: transparent;
  background: var(--panel);
  border-radius: 4px 4px 0 0;
  color: var(--muted);
}
.tabs .tab.active {
  background: #fff;
  color: inherit;
  font-weight: 600;
}
.tabs .tab:hover { background: #eee; }
#side canvas[hidden] { display: none; }
.plot-status {
  min-height: 18px;
  text-align: center;
}
.plotmetric {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 8px;
  margin-top: 4px;
}
.plotmetric[hidden] { display: none; }
.plotmetric button {
  padding: 3px 9px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.plotmetric button:first-child { border-radius: 4px 0 0 4px; }
.plotmetric button:last-child { border-radius: 0 4px 4px 0; }
.plotmetric button.active {
  background: #fff;
  color: inherit;
  font-weight: 600;
}
.plotmetric label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.plotmetric input {
  width: 46px;
  padding: 2px 4px;
  border: 1px solid var(--line);
  font: inherit;
  font-size: 12px;
}

figure {
  margin: 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* The per-plot view tools, tucked under the canvas. */
.viewtools {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-top: 4px;
  flex-wrap: wrap;
}
.viewtools button {
  padding: 1px 7px;
  font: inherit;
  font-size: 11px;
  line-height: 1.6;
  cursor: pointer;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 3px;
}
.viewtools button:hover { background: #eee; }
.viewtools button.active {
  background: #262626;
  color: #fff;
  font-weight: 600;
}
.viewtools .hint { margin: 0 0 0 4px; font-size: 11px; }
.viewtools[hidden] { display: none; }

figcaption {
  margin-top: 5px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
/* NEVER height:100% here. A canvas sized as a percentage of a parent whose
   own height depends on its content feeds back on itself and grows without
   bound -- it reached thirty thousand pixels before this was pinned down.
   flex:1 with min-height:0 is safe because the height then comes from the
   grid rows above, which do not consult the content. */
canvas {
  display: block;
  width: 100%;
  flex: 1;
  min-height: 0;
  border: 1px solid var(--line);
  background: #fff;
  touch-action: none;
  cursor: grab;
}
canvas:active { cursor: grabbing; }

footer {
  padding: 9px 20px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}

/* The toolbar: units and what to draw, under the view and always in reach,
   so that neither is buried in the scrolling panel. */
#toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 20px;
  padding: 7px 12px;
  border-top: 1px solid var(--line);
  background: var(--panel);
  font-size: 12px;
}
#toolbar .group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}
#toolbar .glabel {
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  font-size: 11px;
}
#toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
#toolbar input[type=checkbox] { margin: 0; }
#toolbar select,
#toolbar button {
  padding: 2px 5px;
  font: inherit;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 3px;
}
#toolbar button { cursor: pointer; }
#toolbar button:hover { background: #eee; }

@media (max-width: 900px) {
  /* Narrow: let the page scroll normally again, and give the canvases a
     definite height of their own, since there are no longer full-height rows
     to inherit one from. */
  html, body { height: auto; }
  body { display: block; overflow: visible; }
  main { display: block; }
  #panel { border-right: none; border-bottom: 1px solid var(--line); overflow: visible; }
  #stage { display: block; }
  #plots { grid-template-columns: 1fr; }
  figure { display: block; }
  canvas { height: 60vh; flex: none; }
}

/* ------------------------------------------------------------ tracing UI -- */
#panel .row { display: flex; gap: 6px; margin: 6px 0; }
#panel .row button { flex: 1; }
#panel label.file { display: block; font-size: 13px; margin-bottom: 6px; }
#panel label.file input { width: 100%; font-size: 12px; margin-top: 3px; }
#panel label.inline {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin: 5px 0; font-size: 13px;
}
#panel label.inline input { width: 76px; padding: 3px 5px; font: inherit;
  border: 1px solid var(--line); border-radius: 3px; }
#panel label.image-lock {
  justify-content: flex-start;
  color: var(--muted);
}
#panel label.image-lock input { width: auto; }
#panel button.armed {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
#panel button.armed:hover { background: #8e1f26; }

#panel label.inline select { width: 110px; padding: 3px 4px; font: inherit;
  border: 1px solid var(--line); border-radius: 3px; }
#panel button + button { margin-top: 6px; }
#panel section > button { margin-top: 4px; }

ul.forces { list-style: none; margin: 8px 0 0; padding: 0; font-size: 12px; }
ul.forces li {
  display: flex; justify-content: space-between; align-items: center;
  gap: 6px; padding: 3px 0; border-bottom: 1px solid var(--line);
  color: var(--muted);
}
ul.forces button {
  width: auto; padding: 0 6px; line-height: 1.4; font-size: 11px;
  border: 1px solid var(--line); background: #fff; cursor: pointer;
  border-radius: 3px; color: var(--accent);
}
ul.forces button:hover { background: #f0e2e3; }

.verdict {
  margin: 4px 0 0; padding: 7px 9px; font-size: 12.5px; border-radius: 3px;
  border-left: 3px solid var(--line); background: #fff; color: var(--muted);
}
.verdict.ok { border-left-color: #2e7d32; background: #edf7ee; color: #1b5e20; }
.verdict.bad { border-left-color: var(--accent); background: #fbecec;
  color: #7d1c22; }

/* Where a stored example's size came from. Quieter than the warning, because
   it is not a problem -- but present, because "nominal" and "measured" look
   the same once the arch is drawn. */
#panel .scale-source {
  font-style: italic;
  opacity: 0.85;
  margin-top: 2px;
}

/* The horizontal thrust, repeated under the arch.
   The slider that matters most is in the panel, and the panel scrolls -- so on
   a short window the one control a student moves continuously can be off
   screen while the drawing it changes is in full view. This copy sits under
   the plot, where the eye already is. It is the same value, mirrored both
   ways, not a second parameter. */
.plotthrust {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 0;
  font-size: 12px;
  color: var(--muted);
}
.plotthrust label { white-space: nowrap; }
.plotthrust input[type="range"] { flex: 1 1 auto; min-width: 80px; }
.plotthrust .reading {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-align: right;
  /* The panel carries the reading in full; this one gives it up to the slider
     rather than clipping mid-word, because the control is what the row is for. */
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 0 1 auto;
}
.plotthrust input:disabled { opacity: 0.4; }

/* Narrow enough and the label is the first thing to go: "Horizontal thrust" is
   already written above the slider in the panel, and the slider is not. */
@media (max-width: 620px) {
  .plotthrust label { display: none; }
}