/* style — the Change angle CAMERA panel, to Simon's design.

   Simon: "Camera panel layout should be based on this HTML file" (Camera
   Panel.html, 16 Sep). Restated here from that page's inline styles: a
   #121213 card on a #262627 hairline with 14px corners; a crimson dot and a
   tracked heading; the stage in a 10px bordered box on a faint 34px grid;
   the rows label 112 / control / value 76 in mono; a 3px track with the
   crimson fill up to a 14px thumb ringed in crimson at 16%; the lens as
   pills; a quiet reset button and a switch; and the sentence under
   RESULTING SHOT with a 2px crimson bar down its left. The rooms' own sheet
   is injected after every linked one, so each rule here is written one
   notch more specific (html in front) rather than relying on order. */

html .sm-acamstep {
  background: #121213; border: 1px solid #262627; border-radius: 14px; padding: 0;
  overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
html .sm-acamhead {
  display: flex; align-items: center; gap: 12px; padding: 13px 20px; border-bottom: 1px solid #1f1f20;
}
html .sm-acamdot { width: 6px; height: 6px; border-radius: 50%; background: #ec1a52; flex: none; }
html #sm-main .sm-acamhead .sm-lab {
  margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #e9e9ec;
}
html .sm-acamstage {
  margin: 16px 20px 0; position: relative; border: 1px solid #262627; border-radius: 10px; overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.024) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.024) 0 1px, transparent 1px 34px) #0e0e0f;
}
html .sm-acamstage #sm-acam {
  display: block; width: 100%; max-width: none; height: auto; aspect-ratio: 16 / 8.2;
  border: 0; border-radius: 0; background: transparent;
}
html .sm-acamstep .sm-camrow { margin: 12px 20px 0; max-width: none; }
html .sm-acamstep .sm-camhint { font-size: 12.5px; line-height: 1.5; color: #82828c; max-width: 72ch; }
html .sm-acamstep .sm-camhint b { font-weight: 400; color: #b9b9c2; }

html .sm-acamgrp {
  margin: 14px 20px 0; display: grid; gap: 1px; border: 1px solid #262627; border-radius: 10px;
  overflow: hidden; background: #141415;
}
html .sm-acamrow {
  display: grid; grid-template-columns: 112px minmax(0, 1fr) 76px; align-items: center; gap: 18px;
  padding: 6px 18px; background: #111112;
}
html .sm-acamrow.lens { grid-template-columns: 112px minmax(0, 1fr); padding: 10px 18px; }
html .sm-acamk {
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #8b8b95;
}
/* box-shadow: none -- the app's own range rule (12-card-sections.css) cuts
   a groove into the input with an inset shadow, which on a 22px-tall
   transparent box is a black hairline across the top. Simon: "a weird black
   line above the slider." */
html .sm-acamrow input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; background: transparent;
  cursor: grab; touch-action: none; outline: none; box-shadow: none; border: 0; border-radius: 0;
}
html .sm-acamrow input[type=range]:active { cursor: grabbing; }
html .sm-acamrow input[type=range]::-webkit-slider-runnable-track {
  height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #ec1a52 0, #ec1a52 var(--pct, 50%), #2e2e2f var(--pct, 50%), #2e2e2f 100%);
}
html .sm-acamrow input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5.5px; border-radius: 50%; border: 0;
  background: #ec1a52; box-shadow: 0 0 0 4px rgba(236, 26, 82, .16);
}
html .sm-acamstep .sm-acamv {
  min-width: 0; font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 13px;
  text-align: right; color: #e9e9ec; font-variant-numeric: tabular-nums;
}
html .sm-acamlenses { display: flex; flex-wrap: wrap; gap: 6px; }
html .sm-acamlens {
  padding: 6px 11px; border-radius: 999px; border: 1px solid #2e2e2f; background: #1a1a1b; color: #9a9aa4;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 12px; cursor: pointer;
}
html .sm-acamlens:hover { color: #d4d4dc; border-color: #3a3a3b; }
html .sm-acamlens.on { border-color: #ec1a52; background: rgba(236, 26, 82, .14); color: #ff6f92; }

/* THE BODY ROW. Its own line above the foot, because the button on it is the
   one control in this panel that spends money and takes half a minute --
   levelling it with "Back to original camera" would say they are the same
   kind of press. The status line beside it is the only thing that speaks
   while SAM 3D works, so it keeps its space whether or not it has words in
   it: a line that appears and shoves the sliders down mid-drag is worse than
   an empty one. */
html .sm-acambody {
  margin: 14px 20px 0; display: flex; align-items: center; gap: 12px; min-height: 34px;
}
html .sm-acambodyb {
  padding: 9px 16px; border-radius: 8px; border: 1px solid #3a2a30; background: rgba(236, 26, 82, .12);
  color: #ff6f92; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; flex: none;
}
html .sm-acambodyb:hover { border-color: #ec1a52; color: #fff; }
html .sm-acambodyb:disabled { opacity: .55; cursor: default; border-color: #333334; color: #9a9aa4; background: #1a1a1b; }
html .sm-acambodym {
  font-size: 11.5px; color: #8e8e98; line-height: 1.35; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

html .sm-acamfoot {
  margin: 12px 20px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
}
html .sm-acamreset {
  padding: 9px 16px; border-radius: 8px; border: 1px solid #333334; background: #1a1a1b; color: #c9c9d2;
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
html .sm-acamreset:hover { border-color: #444; color: #fff; }
html .sm-acamsend { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; margin: 0; }
html .sm-acamsend input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
html .sm-acamsw {
  width: 34px; height: 20px; border-radius: 999px; padding: 3px; display: flex; background: #2e2e2f;
  transition: background .16s; box-sizing: border-box; flex: none;
}
html .sm-acamsw i { display: block; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .16s; }
html .sm-acamsend input:checked + .sm-acamsw { background: #ec1a52; }
html .sm-acamsend input:checked + .sm-acamsw i { transform: translateX(14px); }
html .sm-acamsendk { font-size: 13px; color: #a6a6b0; }

/* SMALLER, BOTH LINES. Simon: "Reduce the size of the font on the Change
   Angle tool that says 'Resulting Shot' and then it describes the prompt."

   The block is a readout of what the sliders above it add up to, not
   something anybody types into -- it is the panel telling you what it is
   about to ask for. At 13px the sentence carried the weight of body copy and
   pulled the eye off the controls that actually do the work, which on a
   panel whose whole point is the rig is the wrong thing to be looking at.
   Down to 11.5, with the kicker down to 9 and the padding eased to match, so
   the band reads as a caption under the controls rather than as a paragraph
   competing with them. */
html .sm-acamresult {
  margin: 12px 20px 18px; padding: 10px 14px; border-left: 2px solid #ec1a52; background: #141213;
  border-radius: 0 8px 8px 0;
}
html .sm-acamresk {
  font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #7b7b85;
}
html .sm-acamstep .sm-acamwords {
  margin: 5px 0 0; font-size: 11.5px; line-height: 1.45; color: #d4d4dc; font-style: normal;
}
html .sm-acamstep .sm-acamwords::first-letter { text-transform: uppercase; }

/* CAMERA / 3D WORLD, top middle of the viewer (Simon, 22 Sep). */
html .sm-acamstage { position: relative; }
html .sm-acamviews {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: rgba(20,20,24,.86); border: 1px solid rgba(255,255,255,.12);
}
html .sm-acamviews button {
  border: 0; background: transparent; color: var(--text-dim); font: inherit; font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; cursor: pointer;
}
html .sm-acamviews button:hover { color: #fff; }
html .sm-acamviews button.on { background: var(--accent); color: #fff; }

/* THE MOVING CAMERA'S TIMELINE (Change angle for clips, Moving camera).
   Under the rig: a bar the length of the shot, a playhead, a diamond per
   keyframe. simple.js: acamKeysHtml. */
html .sm-kf { margin: 10px 20px 4px; }
html .sm-kfbar { position: relative; height: 30px; cursor: pointer; touch-action: none; }
html .sm-kftrack { position: absolute; left: 0; right: 0; top: 12px; height: 6px; border-radius: 3px; background: #26262a; }
html .sm-kfkeys { position: absolute; inset: 0; }
html .sm-kfkey { position: absolute; top: 8px; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg);
  background: #c9c9d2; border: 1px solid #0b0b0c; border-radius: 2px; cursor: pointer; z-index: 2; }
html .sm-kfkey:hover { background: #fff; }
html .sm-kfkey.on { background: var(--accent); }
html .sm-kfhead { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--accent); pointer-events: none; z-index: 3; }
html .sm-kfhead::before { content: ''; position: absolute; top: -2px; left: -4px; border: 5px solid transparent; border-top-color: var(--accent); }
html .sm-kfrow { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
html .sm-kfsp { flex: 1; }
html .sm-kft { font-size: 11px; color: #9a9aa2; font-variant-numeric: tabular-nums; }
html .sm-kfb { padding: 6px 10px; border-radius: 6px; border: 1px solid #333334; background: #1a1a1b; color: #c9c9d2;
  font: inherit; font-size: 12px; cursor: pointer; }
html .sm-kfb:hover { border-color: #444; color: #fff; }
html .sm-kfb.on { border-color: var(--accent); color: #fff; }
html .sm-kfb:disabled { opacity: .4; cursor: default; }
html .sm-kfhint { font-size: 11px; color: #77777f; margin-top: 6px; }