/* beam calculator -- layout + diagram styling.
   Inherits tokens.css + site.css (dark palette, type stack).
   One additional accent color for load indicators. */

:root {
  --beam-curve: var(--ink-accent);
  --load-color: #f59e0b;
  --select-color: #f43f5e;
}

body { margin: 0; }

.beam-header,
.beam-app,
.beam-footer {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.beam-app { position: relative; }

.beam-header {
  padding-top: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 1.5rem;
}

.beam-header .h-display { margin: .4rem 0 .7rem; }
.beam-header .lede { max-width: 65ch; }

/* ---------- example picker ---------- */

.example-row {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
  flex-wrap: wrap;
}
.example-row-label {
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--page-fg-2);
  font-weight: 500;
  flex-shrink: 0;
}

.example-picker {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.example-picker button {
  background: #141414;
  border: 1px solid var(--rule);
  padding: .35rem .5rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .08s, background .08s;
}
.example-picker button:hover,
.example-picker button:focus {
  border-color: var(--ink-accent);
  background: #181818;
  outline: none;
}
.example-picker .example-icon {
  display: block;
  width: 72px;
  height: 40px;
}

/* icon primitives shared between the example picker buttons (and later, the
   place-mode picker). thin lines, muted palette, matches main diagram tone. */
.icon-beam        { stroke: var(--page-fg-2);   stroke-width: 1.8; }
.icon-support     { fill: none; stroke: var(--page-fg-2); stroke-width: 1;   stroke-linejoin: round; }
.icon-support-wall{ stroke: var(--page-fg-2);   stroke-width: 1.4; }
.icon-ground      { stroke: var(--page-fg-3);   stroke-width: 0.8; }
.icon-load        { stroke: var(--load-color);  stroke-width: 1.2; }
.icon-load-head   { fill: var(--load-color); }
.icon-load-stem   { stroke: var(--load-color);  stroke-width: 1.2; }
.icon-load-fill   { fill: var(--load-color); fill-opacity: .18; stroke: none; }

/* ---------- place picker ---------- */

.place-field > span {
  display: block;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--page-fg-2);
  font-weight: 500;
  margin-bottom: .3rem;
}

.place-picker {
  display: inline-flex;
  gap: .3rem;
}
.place-picker button {
  background: #141414;
  border: 1px solid var(--rule);
  padding: .2rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .08s, background .08s;
}
.place-picker button:hover,
.place-picker button:focus {
  border-color: var(--page-fg-2);
  background: #181818;
  outline: none;
}
.place-picker button.is-active {
  border-color: var(--ink-accent);
  background: rgba(21, 167, 159, 0.1);
}
.place-picker .place-icon {
  display: block;
  width: 32px;
  height: 32px;
}

/* ---------- toolbar ---------- */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  align-items: end;
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.toolbar-field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--page-fg-2);
}
.toolbar-field > span { font-weight: 500; }

.toolbar-field input[type=number],
.toolbar-field select {
  background: #141414;
  color: var(--page-fg);
  border: 1px solid var(--rule);
  padding: .4rem .55rem;
  font: inherit;
  font-size: .92rem;
  text-transform: none;
  letter-spacing: normal;
  min-width: 9ch;
}

.toolbar-field input[type=number] { text-align: right; width: 11ch; }

.toolbar-field.units {
  border: none;
  padding: 0;
  margin: 0;
  flex-direction: column;
}
.toolbar-field.units legend {
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--page-fg-2);
  padding: 0;
  margin-bottom: .3rem;
}
.toolbar-field.units label {
  text-transform: none;
  letter-spacing: normal;
  font-size: .92rem;
  color: var(--page-fg);
  display: inline-flex;
  gap: .35rem;
  align-items: center;
  margin-right: .9rem;
}

.toolbar .unit {
  font-size: .78rem;
  color: var(--page-fg-3);
  margin-left: -2px;
  text-transform: none;
  letter-spacing: normal;
}

.toolbar-actions {
  display: flex;
  gap: .5rem;
  margin-left: auto;
}
.toolbar-actions button {
  background: transparent;
  color: var(--page-fg);
  border: 1px solid var(--rule);
  padding: .5rem .9rem;
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
}
.toolbar-actions button:hover { border-color: var(--page-fg-2); }

/* ---------- diagrams ---------- */

.diagrams {
  display: grid;
  gap: .4rem;
  padding: 1.5rem 0 0;
}
.diagram-svg {
  width: 100%;
  background: #101010;
  border: 1px solid var(--rule);
  display: block;
  user-select: none;
  -webkit-user-select: none;
}

/* While a drag is in flight, kill selection across the whole page so fast
   drags that overshoot the svg don't paint a blue highlight across headings,
   labels, or the readout. */
body.is-dragging,
body.is-dragging * {
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Placement mode: crosshair cursor on the beam svg signals "click to place". */
body.is-placing .diagram-beam { cursor: crosshair; }
body.is-placing .diagram-beam .support,
body.is-placing .diagram-beam .load { cursor: crosshair; }
.diagram-beam { aspect-ratio: 1000 / 180; }
.diagram-data { aspect-ratio: 1000 / 200; }

/* Focus-visible only so clicking the svg with a mouse doesn't flash an outline
   that makes the background feel "clickable." Keyboard focus still shows. */
.diagram-svg:focus-visible { outline: 1px solid var(--ink-accent); outline-offset: 2px; }
.diagram-svg:focus:not(:focus-visible) { outline: none; }
.diagram-svg[hidden] { display: none; }

/* Beam SVG elements */

.beam-line {
  stroke: var(--page-fg);
  stroke-width: 3;
}
.axis-tick {
  stroke: var(--page-fg-3);
  stroke-width: 1;
}
.axis-label {
  fill: var(--page-fg-3);
  font-family: var(--font-mono);
  font-size: 11px;
}
.axis-unit { fill: var(--page-fg-2); }

/* Supports */
.support { cursor: grab; }
.support:focus { outline: none; }
.diagram-beam.is-dragging .support { cursor: grabbing; }
.support:focus .support-glyph,
.support:focus .support-wall { stroke: var(--ink-accent); }

.support-glyph {
  fill: none;
  stroke: var(--page-fg-2);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.support-ground {
  stroke: var(--page-fg-3);
  stroke-width: 1;
}
.support-wall {
  stroke: var(--page-fg-2);
  stroke-width: 2;
}
.support-hatch {
  stroke: var(--page-fg-3);
  stroke-width: 1;
}
.support.is-selected .support-glyph,
.support.is-selected .support-wall {
  stroke: var(--select-color);
}

/* Loads */
.load { cursor: grab; }
.load:focus { outline: none; }
.diagram-beam.is-dragging .load { cursor: grabbing; }
.diagram-beam.is-dragging { cursor: grabbing; }

.load-arrow-stem {
  stroke: var(--load-color);
  stroke-width: 1.8;
  fill: none;
}
.load-arrow-head {
  fill: var(--load-color);
}
.load-dist-fill {
  fill: var(--load-color);
  fill-opacity: .15;
  stroke: var(--load-color);
  stroke-width: 1;
}
.load-label {
  fill: var(--load-color);
  font-family: var(--font-mono);
  font-size: 11px;
}
.load.is-selected .load-arrow-stem,
.load.is-selected .load-dist-fill { stroke: var(--select-color); }
.load.is-selected .load-arrow-head { fill: var(--select-color); }
.load.is-selected .load-label { fill: var(--select-color); }

/* Diagram curves */
.axis-baseline {
  stroke: var(--page-fg-3);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.diagram-line {
  fill: none;
  stroke: var(--beam-curve);
  stroke-width: 1.5;
}
.diagram-fill {
  fill: var(--beam-curve);
  fill-opacity: .15;
  stroke: none;
}
.diagram-title {
  fill: var(--page-fg-2);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.diagram-max {
  fill: var(--page-fg-3);
  font-family: var(--font-mono);
  font-size: 11px;
}

/* Hover crosshair */
.hover-line {
  stroke: var(--page-fg-3);
  stroke-width: 1;
  stroke-dasharray: 2 2;
  pointer-events: none;
}
.hover-dot {
  fill: var(--page-fg);
  stroke: var(--beam-curve);
  stroke-width: 1.5;
  pointer-events: none;
}
.hover-txt {
  fill: var(--page-fg);
  font-family: var(--font-mono);
  font-size: 11px;
  pointer-events: none;
}

/* ---------- checkbox + formulas ---------- */

.toolbar-checkbox {
  flex-direction: row;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  color: var(--page-fg);
  font-size: .92rem;
}
.toolbar-checkbox input { margin: 0; }

/* sym.js renders fractions as inline flex columns. vertical-align: middle
   puts the element's vertical center (= the fraction bar, since num and den
   are equal height) on the parent baseline + x-height/2, which is roughly
   the optical center of '+' and '-' operators. */
.frac {
  display: inline-flex;
  flex-direction: column;
  vertical-align: middle;
  text-align: center;
  font-size: .85em;
  margin: 0 .15em;
  line-height: 1.1;
}
.frac .num { border-bottom: 1px solid currentColor; padding: 0 .3em .1em; }
.frac .den { padding: .1em .3em 0; }

.formulas-block { margin-top: 1.2rem; }
.readout-grid.formulas-list dt,
.readout-grid.formulas-list dd,
.readout-grid.formulas-legend dt,
.readout-grid.formulas-legend dd {
  text-transform: none;
  letter-spacing: 0;
}
.formulas-list dd,
.formulas-list dt {
  font-family: var(--font-mono);
  font-size: 1.02rem;
  line-height: 1.9;
}
.formulas-note {
  color: var(--page-fg-2);
  font-size: .92rem;
  margin: 0;
  padding: .5rem 0;
}
.formulas-legend-heading {
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin: 1rem 0 .3rem;
}
.formulas-segments { display: flex; flex-direction: column; gap: 1.3rem; margin-top: .5rem; }
.segment { padding: .6rem .9rem; border-left: 2px solid var(--rule); }
.segment-range {
  font-family: var(--font-mono);
  font-size: .88rem;
  color: var(--page-fg-3);
  margin-bottom: .35rem;
  letter-spacing: .02em;
}
.segment-eqs dt { color: var(--page-fg-2); }
.formulas-legend dt,
.formulas-legend dd {
  font-family: var(--font-mono);
  font-size: .88rem;
  line-height: 1.6;
}

/* ---------- instability banner + grayed diagrams ---------- */

.unstable-banner {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--err);
  border-left-width: 4px;
  padding: .9rem 1.1rem;
  color: var(--page-fg);
  font-size: .92rem;
  margin-bottom: .5rem;
}
.unstable-banner strong { color: var(--err); margin-right: .35rem; }

.diagrams.is-unstable .diagram-data {
  opacity: .25;
  pointer-events: none;
  filter: grayscale(1);
}

/* ---------- readout ---------- */

.readout {
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
  margin-top: 1.5rem;
}
.readout-heading {
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--page-fg-2);
  margin: 1.2rem 0 .5rem;
  font-weight: 500;
}
.readout-grid {
  display: grid;
  grid-template-columns: minmax(12ch, max-content) 1fr;
  gap: .3rem 1.5rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: .95rem;
}
.readout-grid dt {
  color: var(--page-fg-3);
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .04em;
  align-self: center;
}
.readout-grid dd { margin: 0; color: var(--page-fg); }
.readout-grid .muted { color: var(--page-fg-3); }

/* ---------- elements table ---------- */

.table {
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
  overflow-x: auto;
}
.items-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: .9rem;
}
.items-table th {
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .72rem;
  font-weight: 500;
  color: var(--page-fg-3);
  padding: .4rem .6rem;
  border-bottom: 1px solid var(--rule);
}
.items-table td {
  padding: .35rem .6rem;
  border-bottom: 1px solid #1a1a1a;
  color: var(--page-fg);
}
.items-table tr.is-selected td {
  background: rgba(244, 63, 94, 0.08);
  outline: 1px solid rgba(244, 63, 94, 0.4);
  outline-offset: -1px;
}
.items-table input,
.items-table select {
  background: #141414;
  color: var(--page-fg);
  border: 1px solid var(--rule);
  padding: .22rem .4rem;
  font: inherit;
  font-size: .88rem;
  width: 12ch;
  text-align: right;
}
.items-table select { text-align: left; }
.items-table .muted { color: var(--page-fg-3); }
.items-table .col-actions { width: 3rem; text-align: right; }
.items-table .col-actions button {
  background: transparent;
  color: var(--page-fg-3);
  border: 1px solid var(--rule);
  font: inherit;
  font-size: 1rem;
  width: 1.7rem; height: 1.7rem;
  padding: 0;
  cursor: pointer;
  line-height: 1;
}
.items-table .col-actions button:hover {
  color: var(--err);
  border-color: var(--err);
}

/* ---------- section editor ---------- */

.section-editor {
  padding-top: 1rem;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-items: center;
  font-family: var(--font-mono);
  font-size: .9rem;
}
.section-toggle {
  display: inline-flex;
  gap: .4rem;
  align-items: center;
  color: var(--page-fg-2);
  text-transform: none;
}
.section-fields {
  display: inline-flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.section-fields label {
  display: inline-flex;
  gap: .4rem;
  align-items: baseline;
  color: var(--page-fg);
}
.section-fields input {
  background: #141414;
  color: var(--page-fg);
  border: 1px solid var(--rule);
  padding: .25rem .45rem;
  font: inherit;
  font-size: .9rem;
  width: 11ch;
}
.section-fields[hidden] { display: none; }
.section-fields .muted { color: var(--page-fg-3); }

/* ---------- hint line + footer ---------- */

.hint {
  color: var(--page-fg-3);
  font-size: .82rem;
  font-family: var(--font-mono);
  margin: 1rem 0 2rem;
}
.beam-footer {
  border-top: 1px solid var(--rule);
  margin-top: 2rem;
  padding-top: 1.5rem;
  padding-bottom: 3rem;
  color: var(--page-fg-3);
  font-size: .92rem;
}
.beam-footer a { color: var(--page-fg); border-bottom: 1px solid var(--page-fg-3); text-decoration: none; }
.beam-footer a:hover { border-bottom-color: var(--ink-accent); }

/* ---------- inline popover editor ---------- */

/* Floats over the beam svg, anchored to the currently-selected item. Quick
   access to the common edits (magnitude, type, position, delete) without
   having to find the item's row in the table below. */
.edit-popover {
  position: absolute;
  z-index: 10;
  background: #141414;
  border: 1px solid var(--rule);
  padding: .5rem .65rem;
  display: flex;
  gap: .7rem;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: .85rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .55);
  color: var(--page-fg);
  user-select: text;
}
.edit-popover[hidden] { display: none; }
.edit-popover .popover-title {
  color: var(--page-fg-3);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .72rem;
}
.edit-popover label {
  display: inline-flex;
  gap: .35rem;
  align-items: center;
  color: var(--page-fg-2);
}
.edit-popover input[type=number],
.edit-popover select {
  background: #0f0f0f;
  color: var(--page-fg);
  border: 1px solid var(--rule);
  padding: .22rem .4rem;
  font: inherit;
  font-size: .85rem;
  width: 8ch;
  text-align: right;
}
.edit-popover select { text-align: left; width: auto; }
.edit-popover .unit {
  color: var(--page-fg-3);
  font-size: .78rem;
}
.edit-popover .close-btn {
  background: transparent;
  color: var(--page-fg-3);
  border: 1px solid var(--rule);
  width: 1.5rem;
  height: 1.5rem;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}
.edit-popover .close-btn:hover {
  color: var(--err);
  border-color: var(--err);
}
.edit-popover .delete-btn {
  background: transparent;
  color: var(--page-fg-3);
  border: 1px solid var(--rule);
  padding: .22rem .5rem;
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.edit-popover .delete-btn:hover {
  color: var(--err);
  border-color: var(--err);
}

/* ---------- mobile ---------- */
@media (max-width: 768px) {
  .toolbar { gap: .8rem; }
  .toolbar-actions { margin-left: 0; }
  .items-table { font-size: .8rem; }
  .items-table input, .items-table select { width: 8ch; }
}