/* Resize or crop image: one stage the photo fits in, the crop box drawn on it, the controls in blocks beside it.
   The stage takes its shape from what it shows (set by the script), never from the window's height, so it is the
   same size on the page and inside the app's frame. */
.rc-stage { position: relative; width: 100%; aspect-ratio: 16 / 10; max-height: 640px; border-radius: 18px; background: #ecebe9; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.rc-stage canvas { display: block; width: 100%; height: 100%; }
.rc-readout { position: absolute; left: 12px; bottom: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(14, 8, 7, 0.72); color: #fff; font: 600 11.5px/1 var(--sans); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; pointer-events: none; white-space: nowrap; }
.rc-readout:empty { display: none; }

/* the side panel, in blocks */
.rc-panel { display: grid; gap: 12px; align-content: start; }
.rc-block { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.rc-block h3 { margin: 0; font: 600 12px/1.2 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.rc-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.rc-chips button { padding: 9px 2px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: 500 12.5px/1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.rc-chips button:hover { border-color: rgba(14, 8, 7, 0.35); }
.rc-chips button.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.rc-seg { display: grid; grid-template-columns: 1fr 1fr; justify-self: stretch; }
.rc-seg-3 { grid-template-columns: 1fr 1fr 1fr; }
.rc-seg button { padding: 9px 6px; font-size: 13px; white-space: nowrap; }
.rc-seg button[disabled] { opacity: 0.4; cursor: not-allowed; }
.rc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rc-two-wide { grid-template-columns: 3fr 2fr; }
.rc-two .field input[type="number"] { padding-left: 12px; padding-right: 10px; }
.rc-two .field select { padding-right: 30px; background-position: right 10px center; }
.rc-hint { margin: 0; font: 400 12.5px/1.45 var(--sans); color: var(--muted); }
.rc-hint:empty { display: none; }
.rc-hint b { font-weight: 600; color: var(--ink); }
.rc-panel .btn { width: 100%; }

@media (max-width: 860px) {
  .rc-stage { border-radius: 14px; }
  .rc-block { padding: 12px; border-radius: 12px; }
}