/* Cork engraving modeler — the bits the shared terminal theme does not cover:
   the two-up preview stage, the slider rows, and the crop canvases. */

.screen { max-width: 1500px; }

.workbench {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
}

.stage { flex: 1 1 auto; min-width: 0; }
.stage .panel { margin: 0 0 1rem; }
.stage .panel:last-child { margin-bottom: 0; }
.stage h2 { margin-top: 0; }

.controls {
  flex: 0 0 340px;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.controls .panel { margin: 0; }
.controls h2 { margin-top: 0; }

/* One group of knobs at a time, chosen from the dropdown at the top of the
   column. These used to be six stacked panels, three of them fold-out, and the
   ones near the bottom sat below the fold: Wes asked on 2026-08-16 to have the
   controls he is editing next to the images so the effect is visible without
   scrolling back and forth. Only the active group is in the document flow, so
   the column is as tall as one panel and the preview never scrolls away.

   Whether a hidden group has anything switched on still has to be visible, so
   the dropdown's own option text carries the [on] marker the badge does. */
.controls .panel[data-tab] { display: none; }
.controls .panel[data-tab].active { display: block; }
.panel-picker { padding-bottom: 0.9rem; }
.panel-picker .field { margin-bottom: 0; }
.controls h2 .badge { margin-left: 0.5rem; vertical-align: middle; }

/* Compare mode. While the snapshot is on screen the knobs are locked: letting
   one move would either edit the thing being compared against or silently
   throw the edit away, and neither is something to leave someone guessing at.
   The picker itself stays live so the groups can still be read. */
.comparing-baseline .controls .panel[data-tab] {
  opacity: 0.55;
  pointer-events: none;
}
.compare-diff {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.78rem;
  color: var(--terminal-dim);
  max-height: 9rem;
  overflow-y: auto;
}
.compare-diff li { margin-bottom: 0.15rem; }
#compare-box .button-row { margin-top: 0.6rem; }

/* --- the two preview panels ---------------------------------------------- */

.views {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.view { min-width: 0; }

.view figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
  min-height: 1.9rem;
  flex-wrap: wrap;
}

.view-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ansi-blue);
}
.view-title::before { content: "// "; opacity: 0.5; }

.view-note {
  font-size: 0.72rem;
  color: var(--terminal-dim);
}

.nav-tabs.compact {
  margin: 0;
  border: 0;
  padding: 0;
  gap: 0.4rem;
  display: inline-flex;
}
.nav-tabs.compact .tab-btn { padding: 0 0.2rem; height: auto; background: none; border: 0; }

/* The checkerboard shows through the rounded corners, so the corner radius Wes
   set is something he can actually see rather than take on trust. */
.canvas-wrap {
  position: relative;
  background-color: rgba(0, 0, 0, 0.35);
  background-image:
    linear-gradient(45deg, rgba(148, 163, 184, 0.06) 25%, transparent 25%, transparent 75%, rgba(148, 163, 184, 0.06) 75%),
    linear-gradient(45deg, rgba(148, 163, 184, 0.06) 25%, transparent 25%, transparent 75%, rgba(148, 163, 184, 0.06) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  border: 1px solid var(--window-border);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
}

.canvas-wrap canvas {
  display: block;
  max-width: 100%;
  /* The crop gestures need the raw pointer stream, not the browser's scroll. */
  touch-action: none;
  cursor: grab;
}
.canvas-wrap canvas.dragging { cursor: grabbing; }
#canvas-b { cursor: default; }

.dropzone {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  padding: 1rem;
  background: rgba(10, 14, 20, 0.92);
}
.dropzone .hint { margin: 0; }
.drop-title { font-size: 0.95rem; color: var(--ansi-blue); }
.dropzone.over { outline: 2px dashed var(--ansi-green); outline-offset: -6px; }

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

.readout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.6rem 1rem;
  margin-bottom: 0.9rem;
}
.readout-grid > div { display: flex; flex-direction: column; }
.readout-label { font-size: 0.7rem; color: var(--terminal-dim); text-transform: lowercase; }
.readout-value { font-size: 1rem; font-weight: 600; }
.readout-value.ok { color: var(--ansi-green); }
.readout-value.warn { color: var(--ansi-yellow); }
.readout-value.bad { color: var(--ansi-red); }

.curve-block { display: flex; flex-direction: column; gap: 0.3rem; }
#curve {
  width: 100%;
  height: auto;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--window-border);
  border-radius: 4px;
}

#warnings:empty { display: none; }
#warnings .banner-alert { margin-top: 0.7rem; }

/* --- knobs ---------------------------------------------------------------- */

.knob { margin-bottom: 0.75rem; }
.knob label { margin-bottom: 0.2rem; }
.knob .knob-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.knob input[type="range"] { flex: 1 1 auto; min-width: 0; }
.knob input[type="number"] {
  flex: 0 0 5.2rem;
  width: 5.2rem;
  height: 1.9rem;
  padding: 0.2rem 0.4rem;
  font-size: 0.8rem;
  text-align: right;
}

/* The theme has no range styling of its own, so give the sliders the same
   dark trough and accent thumb as everything else. */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 1.9rem;
  background: transparent;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: rgba(148, 163, 184, 0.25);
  border-radius: 2px;
}
input[type="range"]::-moz-range-track {
  height: 4px;
  background: rgba(148, 163, 184, 0.25);
  border-radius: 2px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--ansi-blue);
  border: 0;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
}
input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ansi-blue);
  border: 0;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 0.7rem;
}

#profile-state { margin-bottom: 0.6rem; }
#profile-state .badge { margin-right: 0.4rem; }

code {
  color: var(--ansi-cyan);
  background: rgba(0, 0, 0, 0.35);
  padding: 0 0.25em;
  border-radius: 3px;
}

.controls .button-row { margin-bottom: 0.6rem; }
.controls .button-row:last-child { margin-bottom: 0; }

/* --- calibrate screen ----------------------------------------------------- */

.page-nav { margin-top: 0; margin-bottom: 1.2rem; }

.calibrate { display: flex; flex-direction: column; gap: 1rem; }
.calibrate .panel { margin: 0; }
.calibrate h2 { margin-top: 0; }

.cal-tile, .cal-result-views, .tile-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 0.8rem 0 1rem;
}

/* Two tiles to choose between, each showing what it costs you in cork. Cards
   rather than a select, because the choice carries a paragraph of consequence
   and one of them is often unavailable. */
.tile-option {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "radio title" ". note";
  gap: 0.15rem 0.55rem;
  align-items: center;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--window-border);
  border-radius: 6px;
  cursor: pointer;
}
.tile-option:hover:not(.disabled) { border-color: var(--ansi-blue); }
.tile-option:has(input:checked) {
  border-color: var(--ansi-blue);
  background: rgba(56, 189, 248, 0.07);
}
.tile-option.disabled { opacity: 0.5; cursor: not-allowed; }
.tile-option input { grid-area: radio; width: auto; margin: 0; accent-color: var(--ansi-blue); }
.tile-option-title { grid-area: title; font-weight: 600; color: var(--terminal-fg); }
.tile-option:has(input:checked) .tile-option-title { color: var(--ansi-blue); }
.tile-option-note { grid-area: note; font-size: 0.74rem; line-height: 1.5; color: var(--terminal-dim); }
.cal-tile .canvas-wrap, .cal-result-views .canvas-wrap { min-height: 0; padding: 0.5rem; }

/* Building this fit on a model already tuned. Boxed rather than loose in the
   panel because it changes what the fit button below it means, and that has to
   be readable at a glance rather than found. */
.cal-seed {
  margin: 0.8rem 0 0;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--window-border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
}
.cal-seed .hint { margin: 0.45rem 0 0; }
.cal-seed-weight {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
  font-size: 0.78rem;
  color: var(--terminal-dim);
}
/* Wide enough for "12.5", no wider: a number box stretched across the row reads
   as a text field and invites a sentence. */
.cal-seed-weight input { width: 5.5rem; margin: 0; }

.cal-steps {
  margin: 0.9rem 0 0;
  padding-left: 1.2rem;
  font-size: 0.78rem;
  color: var(--terminal-dim);
  line-height: 1.6;
}
.cal-steps li { margin-bottom: 0.4rem; }
.cal-steps strong { color: var(--ansi-yellow); font-weight: 600; }

/* Tapping a corner is the point of this canvas, so it must not read as
   draggable furniture the way the crop canvas does. */
#cal-photo { cursor: crosshair; }
#cal-plot, #cal-rectified { max-width: 100%; height: auto; }
#cal-plot { width: 100%; }

#cal-warnings:empty { display: none; }

/* Two numbers and a percentage in one cell, where every neighbor holds one
   number: at a single 140px column it wraps to four ragged lines beside cells
   of one. It gets two columns, and falls back to one on a phone, where the
   grid is one column wide and `span 2` would overflow it. */
#cal-seed-result-row { grid-column: span 2; }
@media (max-width: 700px) { #cal-seed-result-row { grid-column: span 1; } }
#cal-warnings .banner-alert { margin-bottom: 0.7rem; }

.cal-detail { margin-top: 1rem; }
.cal-detail summary { cursor: pointer; font-size: 0.78rem; color: var(--terminal-dim); }
.cal-detail summary:hover { color: var(--ansi-blue); }
.cal-detail table { margin-top: 0.6rem; }

/* A button that has to sit inside a sentence — it acts, so it is a button, but
   styling it like one would shout over the text it lives in. */
.linkish {
  background: none;
  border: 0;
  padding: 0;
  height: auto;
  font: inherit;
  color: var(--ansi-blue);
  text-decoration: underline;
  cursor: pointer;
}

/* --- phone ---------------------------------------------------------------- */

@media (max-width: 900px) {
  .workbench { flex-direction: column; }
  .controls { flex: 1 1 auto; max-width: none; width: 100%; }
}

@media (max-width: 700px) {
  /* The theme's stat slot has flex-basis 0, so on a narrow header it squeezes
     to a sliver and its text runs back over the wordmark instead of wrapping.
     Give it a whole line of its own. */
  .window-stats {
    flex: 1 0 100%;
    justify-content: flex-start;
    order: 3;
  }
}

@media (max-width: 560px) {
  .views, .cal-tile, .cal-result-views, .tile-choice { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .knob input[type="number"] { flex-basis: 4.6rem; width: 4.6rem; }
}

/* A named block inside a panel, set off from what precedes it.
   Without this, "the cork itself" sat hard against the grain checkbox above and
   read as a second line of that checkbox's own label rather than as the heading
   of the picker under it. */
.panel .subsection {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--window-border);
}