/* ==========================================================================
   The page-turn bench — see js/page-turn-bench.js.

   Laid out as in the flipbook's own write-up: the two views of the leaf, the
   transport, the chart of both ends over time, the readouts and the curl's
   sliders. The controls are ui.css's shadcn components; what is drawn keeps
   the book's own colours.
   ========================================================================== */

.ptb {
  --ptb-bg: #ddd9d1;
  --ptb-ink: #16150f;
  --ptb-ink-3: #6f6b61;
  --ptb-rule: rgba(22, 21, 15, 0.12);
  --ptb-cloth: #782e28;
  --ptb-signal: #2f5d8a;
  --ptb-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  container-type: inline-size;
  display: grid;
  /* minmax(0, …): nothing inside may widen the bench past the note's column. */
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--ptb-rule);
  border-radius: var(--ui-radius-lg);
  background-color: var(--ptb-bg);
  font-family: var(--ptb-mono);
  font-size: 12px;
  line-height: 1.4;
  color: var(--ptb-ink);
}

.ptb svg {
  display: block;
  width: 100%;
  height: auto;
}

/* The reader's view is boxed to the board with the same air on every side;
   the sheet, standing upright, may rise a little past it. */
.ptb__front { overflow: visible; }

/* Stacked while the bench is narrow; side by side once the reader's view
   still has room to show the board. The head-on view's type is set in its
   own units, so it is set larger when that view is drawn smaller. */
.ptb__views {
  display: grid;
  gap: 16px;
}

.ptb__top text { font-size: 24px; }

@container (min-width: 600px) {
  .ptb__views { grid-template-columns: 3fr 2fr; }
  .ptb__top text { font-size: 34px; }
}

.ptb__view { min-width: 0; }

/* The chart's type is drawn in its own units, so as the bench narrows it is
   set larger to hold its size on screen. */
.ptb__chart text { font-size: 10.5px; }

@container (max-width: 599px) {
  .ptb__chart text { font-size: 12.5px; }
}

@container (max-width: 440px) {
  .ptb__chart text { font-size: 14px; }
}

.ptb__label {
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--ptb-ink-3);
}

/* ---------- Transport ------------------------------------------------- */

.ptb__transport {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.ptb__play { min-width: 76px; }

.ptb__speed .tabs-trigger { flex: none; padding: 4px 10px; }

.ptb__time { flex: 1 1 200px; min-width: 0; }

.ptb__tval {
  min-width: 7ch;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---------- Readouts -------------------------------------------------- */

.ptb__readouts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px 16px;
}

.ptb__ro {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ptb__ro b {
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ptb-ink-3);
}

.ptb__ro span {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

/* ---------- The curl's sliders ---------------------------------------- */

.ptb__params {
  display: grid;
  gap: 12px;
}

.ptb__param {
  display: grid;
  grid-template-columns: 8ch 1fr 5ch;
  gap: 12px;
  align-items: center;
}

.ptb__param .label {
  font-size: 12px;
  font-weight: 400;
}

.ptb__param output {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

@media (max-width: 480px) {
  .ptb { padding: 12px; }
}