/* Aspect ratio calculator only; everything shared lives in shared/site.css. */

.calc-title { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--ink-soft); }

/* Inputs are sized to their content by calculator.js. */
.sentence .num { width: 2ch; max-width: 100%; }
.num[data-derived="true"]:not([aria-invalid="true"]) { background-image: repeating-linear-gradient(90deg, var(--rule-c) 0 0.12em, transparent 0.12em 0.24em); }

.lock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  margin-top: 14px;
  padding: 0 14px;
  border: 1px solid var(--rule);
  border-radius: var(--r-control);
  background: none;
  font-size: 16px;
  font-weight: 500;
}
.lock svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.lock .shackle { transform: translateY(-2px) rotate(-18deg); transform-origin: 16px 11px; transition: transform 0.12s; }
.lock[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.lock[aria-pressed="true"] svg rect { fill: currentColor; }
.lock[aria-pressed="true"] .shackle { transform: none; }
.lock + .hint { margin-top: 8px; }

.presets { margin-top: 20px; display: grid; gap: 8px; }
.preset-row { display: flex; flex-wrap: wrap; gap: 8px; }
.preset-row button {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--rule);
  border-radius: var(--r-control);
  background: none;
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.preset-row button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

#scene { display: block; width: 100%; }

.actions { align-items: center; }