/* Screen Recorder: layout. Colours come from the --sl-* tokens that shared/theme/theme.js sets (with fallbacks). */
:root {
  --rc-bg: var(--sl-background, #161616); --rc-panel: var(--sl-surface, #1f1f1f); --rc-line: var(--sl-border, #333);
  --rc-fg: var(--sl-text, #ececec); --rc-dim: color-mix(in srgb, var(--rc-fg) 72%, transparent);
  --rc-accent: var(--sl-accent, #a2fff6); --rc-on-accent: var(--sl-on-accent, #0a1817); --rc-radius: 8px; --rc-red: #e5484d;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: var(--rc-bg); color: var(--rc-fg); font: 14px/1.45 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; display: flex; flex-direction: column; overflow: hidden; }
p, h2 { margin: 0; }
/* The header (shared/appbar) with the shared header buttons in the bar's look */
.rc-bar { position: sticky; top: 0; z-index: 5; background: var(--rc-panel); border-bottom: 1px solid var(--rc-line); padding: 0 16px;
  --tlbx-hbtn-h: 36px; --tlbx-hbtn-radius: 8px; --tlbx-hbtn-bg: var(--rc-panel); --tlbx-hbtn-line: var(--rc-line); --tlbx-hbtn-fs: 13px; }
.rc-bar .brand { display: grid; place-items: center; width: 36px; height: 36px; flex: none; color: var(--rc-accent); text-decoration: none; }
/* View · Panel (shared/frame/frame.css): the stage in the middle, the settings on the right */
.rc-main { flex: 1 1 auto; min-height: 0; }
.rc-view { display: flex; flex-direction: column; gap: 14px; padding: 16px; overflow-y: auto; }
.rc-stage { position: relative; display: grid; place-items: center; min-height: 280px; aspect-ratio: 16 / 9; max-height: 62vh; width: 100%;
  border: 1px solid var(--rc-line); border-radius: var(--rc-radius); background: #0b0b0d; overflow: hidden; }
.rc-live, .rc-play { width: 100%; height: 100%; object-fit: contain; background: #0b0b0d; grid-area: 1 / 1; }
.rc-play.rc-audio { height: 54px; align-self: center; background: transparent; }
.rc-empty { grid-area: 1 / 1; display: grid; justify-items: center; gap: 8px; text-align: center; padding: 20px; max-width: 46ch; color: #ececec; }
.rc-empty-icon { width: 56px; height: 56px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.rc-empty-title { font-size: 17px; font-weight: 650; }
.rc-empty-text { color: #c9c9cf; }
/* The countdown over the live picture, and the recording badge in the corner */
.rc-count { grid-area: 1 / 1; display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; font-size: 72px; font-weight: 750;
  color: #fff; background: rgba(0, 0, 0, .62); font-variant-numeric: tabular-nums; }
.rc-badge { position: absolute; top: 10px; left: 10px; display: flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px;
  background: rgba(0, 0, 0, .72); color: #fff; font: 600 13px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
.rc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rc-red); animation: rc-blink 1s steps(2, start) infinite; }
.rc-badge[data-state="paused"] .rc-dot { animation: none; background: #f5a524; }
@keyframes rc-blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .rc-dot { animation: none; } }
/* Trim: the kept part on a bar, two sliders and the playhead buttons */
.rc-trim { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--rc-line); border-radius: var(--rc-radius); background: var(--rc-panel); }
.rc-trim h2, .rc-support h2 { font-size: 15px; font-weight: 650; }
.rc-bar-wrap { height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--rc-fg) 14%, transparent); overflow: hidden; }
.rc-range { height: 100%; margin-left: var(--a, 0%); width: calc(var(--b, 100%) - var(--a, 0%)); background: var(--rc-accent); border-radius: 5px; }
.rc-trim-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rc-trim-field { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.rc-trim-field output { font: 500 13px ui-monospace, SFMono-Regular, Menlo, monospace; margin-left: 6px; }
.rc-trim-field input { width: 100%; accent-color: var(--rc-accent); }
@media (pointer: coarse) { .rc-trim-field input { height: var(--tlbx-hit, 44px); } }
.rc-trim-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rc-kept { color: var(--rc-dim); font-size: 13px; margin-left: auto; }
.rc-note { color: var(--rc-dim); font-size: 13px; }
.rc-note:empty { display: none; }
.rc-panel-open { display: none; }
/* What this browser can record */
.rc-support { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--rc-line); border-radius: var(--rc-radius); background: var(--rc-panel); }
.rc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rc-table th, .rc-table td { text-align: left; vertical-align: top; padding: 7px 8px 7px 0; border-top: 1px solid var(--rc-line); }
.rc-table tbody tr:first-child > * { border-top: 0; }
.rc-table th[scope="row"] { font-weight: 600; width: 34%; }
.rc-st { width: 64px; font-weight: 700; }
.rc-st::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; background: var(--rc-dot); }
.rc-yes { --rc-dot: #2da44e; } .rc-no { --rc-dot: var(--rc-red); } .rc-partial { --rc-dot: #f5a524; }
.rc-other summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.rc-grid thead th { font-weight: 650; border-top: 0; }
.rc-fine { color: var(--rc-dim); font-size: 12.5px; margin-top: 8px; }
/* The settings inside the panel (the shared .sf-* controls, shared/frame/frame.css) */
.rc-source { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
.rc-source .sui-btn { height: auto; min-height: 34px; white-space: normal; line-height: 1.2; padding: 6px 8px; }
.rc-check { display: flex; gap: 8px; align-items: center; font-size: 13px; min-height: 30px; }
.rc-check input { accent-color: var(--rc-accent); width: 16px; height: 16px; }
.rc-gif { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.rc-group .sf-field + .sf-field { margin-top: 8px; }
.rc-group .sf-note { margin-top: 8px; }
@media (max-width: 560px) { .rc-bar { --tlbx-hbtn-h: 32px; } .rc-trim-row { grid-template-columns: 1fr; } .rc-table th[scope="row"] { width: auto; } }
@media (max-width: 860px) {
  .rc-view { padding: 12px 16px calc(var(--sf-foot-h, 0px) + 16px); }
  .rc-stage { min-height: 200px; }
  .rc-panel-open { display: inline-flex; align-self: flex-start; }
  .sf-phone .rc-panel { max-height: 70vh; }
}