:root {
  --font-body: "Brandon Text", "brandon-grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "brandon-grotesque", "Brandon Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Menlo", "Consolas", monospace;
  --bg: var(--color-surface-canvas);
  --bg-soft: var(--color-surface-default);
  --surface: var(--color-surface-default);
  --surface-strong: var(--color-surface-raised);
  --surface2: var(--color-surface-overlay);
  --surface3: var(--color-surface-raised);
  --text: var(--color-text-primary);
  --text-muted: var(--color-text-secondary);
  --text-dim: var(--color-text-muted);
  --accent: var(--color-brand);
  --accent-2: var(--color-brand-emphasis);
  --accent-dim: var(--color-brand-subtle);
  --brand: var(--color-brand);
  --brand-focus-ring: color-mix(in srgb, var(--brand) 75%, transparent);
  --brand-focus-soft: color-mix(in srgb, var(--brand) 35%, transparent);
  --brand-focus-bg: color-mix(in srgb, var(--brand) 10%, transparent);
  --success: var(--color-success);
  --warning: var(--color-warning);
  /* Semantic status colors, shared with the inspectors (dcp_inspector.css) so
     validation/flash/state messaging reads the same across the whole site. */
  --ok: var(--color-success);
  --warn: var(--color-warning);
  --bad: var(--color-danger);
  --info: var(--color-info);
  --border: var(--color-border-default);
  --border-light: var(--color-border-emphasis);
  --shadow: var(--shadow-lg);
  --app-font-size-caption: var(--text-2xs);
  --app-font-size-meta: var(--text-xs);
  --app-font-size-body: var(--text-sm);
  --app-font-size-title: var(--text-lg);
  --app-control-height-sm: var(--size-8);
  --app-control-height-md: var(--size-10);
  --app-control-height-lg: var(--size-12);
  --app-control-padding-y-sm: var(--space-1-5);
  --app-control-padding-x-sm: var(--space-3);
  --app-control-padding-y-md: var(--space-2);
  --app-control-padding-x-md: var(--space-3);
  --app-control-gap: var(--space-1-5);
  /* Buttons sized down a notch from the shared-ui defaults so they read tighter
     (closer to the original di|tools design) and don't crowd neighbouring controls. */
  --app-button-height-sm: var(--size-7);
  --app-button-height-md: var(--size-9);
  --app-button-height-lg: var(--size-11);
  --app-button-padding-y-sm: var(--space-1);
  --app-button-padding-x-sm: var(--space-3);
  --app-button-padding-y-md: var(--space-2-5);
  --app-button-padding-x-md: var(--space-5);
  --app-button-font-size-sm: var(--text-sm);
  --app-button-font-size-md: var(--text-base);
  --app-button-gap: var(--space-1-5);
  --app-radius-control: var(--radius-md);
  /* Button corner roundness — unified across every button site-wide. */
  --app-radius-button: 5px;
  --app-radius-panel: var(--radius-lg);
  --app-radius-menu: var(--radius-md);
  --app-focus-outline: var(--border-2) solid var(--color-brand);
  --app-focus-offset: var(--space-0-5);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

html {
  color-scheme: dark;
  scrollbar-color: var(--color-border-emphasis) var(--color-surface-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  scrollbar-color: var(--color-border-emphasis) var(--color-surface-canvas);
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

*::-webkit-scrollbar-track {
  background: var(--color-surface-canvas);
}

*::-webkit-scrollbar-thumb {
  background: var(--color-border-emphasis);
  border: 2px solid var(--color-surface-canvas);
  border-radius: var(--radius-full);
}

*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--color-border-emphasis) 70%, #fff);
}

body {
  margin: 0;
  color: var(--text);
  font-family: var(--font-body);
  background: var(--bg);
}

a {
  color: var(--color-text-link);
}

a:hover {
  color: #ffffff;
}

#wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

.skip-link {
  position: absolute;
  left: 0;
  top: -100%;
  padding: 0.7rem 0.95rem;
  z-index: 1050;
  background: var(--color-surface-raised);
  color: #fff;
  border-radius: var(--radius-md);
}

.skip-link:focus {
  top: 0;
}

.main-nav {
  position: sticky;
  top: 0;
  z-index: 1030;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--size-14);
  /* Full-width bar; content centered to the same 1500px max-width the React
     SPA header uses, so switching between the new UI and a legacy app is
     seamless. */
  padding: 0 max(var(--space-5), calc((100% - 1500px) / 2 + var(--space-5)));
  background: color-mix(in srgb, var(--color-surface-canvas) 85%, transparent);
  border-bottom: var(--border-1) solid var(--color-border-default);
  box-shadow: none;
  backdrop-filter: blur(14px);
}

.nav-tool-switcher {
  min-width: 0;
}

.main-nav .navbar-brand,
.main-nav .tool-switcher-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--app-control-gap);
  font-family: var(--font-display);
  font-size: var(--app-font-size-title);
  letter-spacing: 0;
  font-weight: 600;
  color: #fff;
  margin: 0;
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: 0;
  border-radius: var(--app-radius-control);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--duration-150) var(--easing-out);
}

.main-nav .tool-switcher-toggle:hover { background: rgba(255, 255, 255, 0.06); }

.main-nav .tool-switcher-toggle:hover,
.main-nav .tool-switcher-toggle:focus {
  color: #fff;
  outline: none;
}

.main-nav .tool-switcher-toggle:focus-visible {
  outline: var(--app-focus-outline);
  outline-offset: var(--app-focus-offset);
}

.main-nav .tool-switcher-toggle::after {
  display: none;
}

.main-nav .fa-solid,
.main-nav .fa-regular,
.btn .fa-solid,
.btn .fa-regular,
.dropdown-item .fa-solid,
.dropdown-item .fa-regular,
.file-input-button .fa-solid,
.file-input-button .fa-regular {
  flex: 0 0 auto;
}

.main-nav .navbar-brand .brand-glyph {
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
}

.nav-brand-separator {
  color: var(--text-muted);
  font-size: 0.58rem;
  opacity: 0.74;
}

.tool-switcher-caret {
  width: auto;
  height: auto;
  margin-left: 0.08rem;
  color: var(--text-muted);
  font-size: 0.66rem;
  opacity: 0.7;
}

.nav-tool-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Leading separator so the current-tool title reads "di|tools / Tool" like the
   React SPA header's breadcrumb. */
.nav-tool-title:not(:empty)::before {
  content: '/';
  color: var(--color-border-emphasis);
  font-weight: 400;
}

.nav-tool-name {
  min-width: 0;
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  /* Roomy enough that brandon-grotesque descenders (g/y/p) clear the
     line box; a tighter value gets clipped by overflow: hidden. */
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-actions {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
}

.nav-account {
  min-width: 0;
  flex: 0 0 auto;
}

.nav-account-button {
  display: inline-flex;
  align-items: center;
  gap: var(--app-control-gap);
  max-width: min(32vw, 15rem);
  padding: var(--space-1) var(--space-2);
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: var(--app-radius-control);
  cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}

.nav-account-button:hover,
.nav-account-button:focus {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  outline: none;
}

.nav-account-button:focus-visible {
  outline: var(--app-focus-outline);
  outline-offset: var(--app-focus-offset);
}

.nav-account-button::after {
  display: none;
}

.nav-account-chevron {
  margin-left: var(--space-0-5);
  color: var(--text-muted);
  font-size: var(--app-font-size-caption);
  opacity: 0.8;
}

.nav-account-avatar {
  width: 1.58rem;
  height: 1.58rem;
  flex: 0 0 1.58rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  object-fit: cover;
  background: var(--color-surface-raised);
  color: #fff;
  border: 0;
}

.nav-account-avatar-fallback {
  font-size: var(--app-font-size-meta);
  font-weight: 800;
}

.nav-account-copy {
  min-width: 0;
  display: grid;
  line-height: 1.05;
  text-align: left;
}

.nav-account-name,
.nav-account-detail {
  min-width: 0;
  /* Same reason as .nav-tool-name: keep descenders clear of overflow clipping. */
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-account-name {
  color: #f4f4f4;
  font-size: var(--app-font-size-meta);
  font-weight: 500;
}

.nav-account-detail {
  color: var(--text-dim);
  font-size: var(--app-font-size-caption);
}

.nav-account-menu {
  min-width: 14rem;
  margin-top: var(--space-2);
  padding: var(--space-1-5) 0;
}

.nav-account-menu-head {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  color: var(--text);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-1);
}

.nav-account-menu-head strong,
.nav-account-menu-head span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-account-menu-head strong {
  font-size: var(--app-font-size-body);
}

.nav-account-menu-head span {
  color: var(--text-muted);
  font-size: var(--app-font-size-meta);
}

.main-nav .dropdown-item.nav-account-menu-item {
  color: var(--text);
  border-radius: 0;
  padding: var(--space-2) var(--space-3);
}

.main-nav .dropdown-item.nav-account-menu-item:hover,
.main-nav .dropdown-item.nav-account-menu-item:focus {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.nav-login-button {
  gap: var(--app-control-gap);
  white-space: nowrap;
}

.nav-login-button:hover,
.nav-login-button:focus {
  text-decoration: none;
}

.main-nav .dropdown-menu {
  background: var(--color-surface-overlay);
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-lg);
  border-radius: var(--app-radius-menu);
  padding: 0;
}

/* Scoped to .main-nav so the padding beats `.main-nav .dropdown-menu { padding: 0 }`
   (equal specificity, later in source). Without this the mega-menu collapses to
   zero padding and its content sits flush against the panel edges. */
/* -4rem (not -2rem): the menu is anchored at the brand toggle (~34px in), not the
   viewport edge, so it needs extra slack on the right to keep a margin and not overflow. */
.main-nav .tool-switcher-menu {
  width: min(1320px, calc(100vw - 3rem));
  max-height: min(76vh, 720px);
  overflow-y: auto;
  margin-top: var(--space-2);
  padding: var(--space-5);
}

.tool-switcher-licenses {
  display: inline-flex;
  width: fit-content;
  margin-top: var(--space-2);
  color: #f2f2f2;
  font-size: var(--app-font-size-body);
  font-weight: 700;
}

.tool-switcher-licenses:hover,
.tool-switcher-licenses:focus {
  color: #fff;
}

/* Switcher body: a left column of big feature buttons + the category grid. */
.tool-switcher-body {
  display: flex;
  align-items: stretch;
  gap: var(--space-4);
}

.tool-switcher-featured {
  flex: 0 0 600px;
  display: flex;
  gap: var(--space-3);
}

.tool-switcher-feature-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tool-switcher-feature {
  flex: 1 1 0;
  min-height: 6.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-radius: var(--app-radius-panel);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border-subtle);
  color: #eaeaea;
  text-decoration: none;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.tool-switcher-feature:hover,
.tool-switcher-feature:focus-visible {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--color-border-emphasis);
  color: #fff;
  outline: none;
}

.tool-switcher-feature.active {
  border-color: var(--color-border-emphasis);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

.tool-switcher-feature-icon {
  width: 2.1rem;
  height: 2.1rem;
  color: var(--color-brand);
}

.tool-switcher-feature-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tool-switcher-feature-name {
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
}

.tool-switcher-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--space-3);
}

.tool-switcher-meta {
  color: var(--text-dim);
  font-size: var(--app-font-size-meta);
  line-height: 1.35;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.tool-switcher-meta p {
  margin: 0;
}

.tool-switcher-meta a {
  color: #d8d8d8;
}

.tool-switcher-group {
  min-width: 0;
  padding: var(--space-3);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--app-radius-panel);
}

.tool-switcher-group h2 {
  margin: 0 0 var(--space-2);
  color: var(--text-muted);
  font-size: var(--app-font-size-caption);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.25;
  text-transform: uppercase;
}

.tool-switcher-link,
.main-nav .dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--app-control-gap);
  color: #dbdbdb;
  border-radius: var(--app-radius-control);
  padding: var(--space-1-5) var(--space-2);
  border-top: 0;
  font-size: var(--app-font-size-body);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
}

.tool-switcher-link:first-of-type,
.main-nav .dropdown-item:first-child {
  border-top: 0;
}

.tool-switcher-link:hover,
.tool-switcher-link:focus,
.main-nav .dropdown-item:hover,
.main-nav .dropdown-item:focus {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

.tool-switcher-link.active,
.tool-switcher-licenses.active,
.main-nav .dropdown-item.active,
.main-nav .dropdown-item:active {
  color: var(--color-text-primary) !important;
  background: rgba(255, 255, 255, 0.08);
}

.tool-switcher-group.has-active {
  border-color: var(--color-border-emphasis);
  background: rgba(255, 255, 255, 0.045);
}

/* ── Beta badges — reusable "in development" markers (see docs/beta-badge.md).
   Nothing uses these by default; add the markup to a page/link to apply them. ──
   1. .beta-pill   — a small inline pill appended to a nav/home link.
   2. .beta-ribbon — a 45° corner sash for the top-left of a `position: relative`
      container (a tool card / page shell). Markup:
        <div class="beta-ribbon" aria-hidden="true"><span><b>BETA</b><small>Features subject to change</small></span></div>
*/
.beta-ribbon {
  position: absolute;
  top: 0; left: 0;
  width: 126px; height: 126px;
  overflow: visible;        /* let the band run off both edges, no hard-cut ends */
  pointer-events: none;
  z-index: 30;
}
.beta-ribbon span {
  position: absolute;
  left: -146px; top: 30px;  /* center fixed at the corner; extra width lengthens both ends */
  width: 420px;
  padding: 6px 0;
  transform: rotate(-45deg);
  background: linear-gradient(135deg, var(--color-brand-emphasis), var(--color-brand-hover));
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0,0,0,0.35);
  box-shadow: 0 2px 7px rgba(0,0,0,0.45);
}
.beta-ribbon b { display: block; font: 700 13px/1.15 var(--font-display); letter-spacing: 2px; }
.beta-ribbon small { display: block; font: 600 7.5px/1.2 var(--font-display); letter-spacing: 0.4px; text-transform: uppercase; opacity: 0.92; }

/* Beta pill placement; badge visuals come from shared-ui in src/vendor.scss. */
.beta-pill {
  margin-left: 0.4em;
  text-transform: uppercase;
  vertical-align: middle;
}
/* Keep the pill on shared-ui badge colors instead of inheriting link states. */
.dropdown-item:hover .beta-pill,
.dropdown-item:focus .beta-pill,
.tool-link:hover .beta-pill,
.tool-link:focus .beta-pill,
.tool-link:active .beta-pill { color: var(--color-text-on-brand); background: var(--color-brand); }

.page-shell {
  width: min(1180px, 96vw);
  margin: var(--space-6) auto 0;
  padding: clamp(var(--space-4), 2vw, var(--space-6));
}

body.framing-full-width .page-shell {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0.75rem 0.9rem 5px;
  height: calc(100vh - 3.2rem);
  overflow: hidden;
}

body.framing-full-width {
  overflow: hidden;
}

body.framing-full-width #wrapper {
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
}

body.framing-full-width #main-content {
  overflow: hidden;
}

body.home-page .page-shell {
  width: min(1080px, 92vw);
  /* Trim the blank space above the logo by 25% (was 24px margin + 24px padding). */
  margin-top: 18px;
  padding-top: 18px;
}

body.home-page .content-panel {
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.content-panel {
  background: var(--surface);
  border: 0;
  border-radius: var(--app-radius-panel);
  box-shadow: none;
  padding: clamp(var(--space-4), 2.6vw, var(--space-8));
}

body.framing-full-width .content-panel {
  border: 0;
  padding: 0.5rem 0.6rem 5px;
  background: transparent;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

body.framing-full-width h2 {
  margin-top: 0;
}

body.framing-full-width .framing-chart-layout.mt-3 {
  margin-top: 5px !important;
}

h1,
h2,
h3,
h4,
legend {
  font-family: var(--font-display);
  color: #f0f0f0;
  font-weight: 500;
  text-wrap: balance;
}

h2 {
  margin-bottom: 0.35rem;
}

/* ════════════════════════════════════════════════════════════════════
   Design-system refresh for the standard tool pages — brings the older
   EDL/markers/converter/CDL/list tools in line with the inspector / DCTL
   Studio look (branded header, section labels, denser controls). Scoped to
   `body:not(.home-page):not(.framing-full-width)` so the home page and the
   full-width composers (Slate/Framing) keep their own treatments.
   ════════════════════════════════════════════════════════════════════ */

/* Page titles live in the sticky navbar; keep only in-content section headings. */
body.has-nav-title:not(.dv-inspector-page):not(.drp-inspector-page):not(.dcp-inspector-page):not(.dcp-keys-page):not(.dctl-studio-page) .content-panel > h2:first-of-type {
  display: none;
}

/* Section labels (the col-form-label legends): crisp, uppercase, tracked-out
   labels — the inspector "section header" idiom. */
body:not(.home-page):not(.framing-full-width) .content-panel legend.col-form-label {
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: var(--app-font-size-meta);
  font-weight: 700;
  color: var(--text-muted);
  padding-top: var(--space-2);
}

/* Controls: a touch denser, on the inspector surface tone with cleaner borders.
   Use background-color (not the `background` shorthand) so the custom-select
   chevron background-image survives. */
body:not(.home-page):not(.framing-full-width) .content-panel .form-control,
body:not(.home-page):not(.framing-full-width) .content-panel .custom-select,
body:not(.home-page):not(.framing-full-width) .content-panel textarea {
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border-default);
}

/* Section rhythm: hairline separators + breathing room between field groups so
   a long form reads as grouped sections rather than a flat wall of rows. */
body:not(.home-page):not(.framing-full-width) .content-panel .form-group.row {
  padding-bottom: var(--space-2);
}

legend.col-form-label {
  align-self: flex-start;
  padding-top: 0.1rem;
}

p,
small,
label,
legend,
.form-text {
  color: var(--text-muted);
}

.btn-icon-swap {
  /* Match the small-control height so it lines up with the dropdowns beside it
     (the base .btn min-height would otherwise make it taller). */
  height: var(--app-control-height-sm);
  min-height: var(--app-control-height-sm);
  min-width: var(--app-button-height-lg);
  padding: 0 var(--app-button-padding-x-sm);
  line-height: var(--leading-none);
  font-size: var(--app-button-font-size-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.form-control,
.custom-select,
textarea {
  font-family: var(--font-body);
  min-height: var(--app-control-height-md);
  padding: var(--app-control-padding-y-md) var(--app-control-padding-x-md);
  font-size: var(--app-font-size-body);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-default);
  border-radius: var(--app-radius-control);
  box-shadow: none;
}

.form-control.bg-dark,
.custom-select.bg-dark,
textarea.bg-dark {
  background-color: var(--color-surface-raised) !important;
}

.form-control::placeholder,
textarea::placeholder {
  color: rgba(232, 232, 232, 0.78);
}

.custom-select {
  display: inline-block;
  width: 100%;
  min-height: var(--app-control-height-md);
  padding: var(--app-control-padding-y-md) var(--size-10) var(--app-control-padding-y-md) var(--app-control-padding-x-md);
  font-size: var(--app-font-size-body);
  font-weight: 400;
  line-height: var(--leading-snug);
  cursor: pointer;
  /* Hide the native select arrow so only our custom chevron shows (otherwise
     Safari/Chrome render both — the "double glyph"). */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--color-surface-raised);
  background-image:
    linear-gradient(45deg, transparent 50%, #cfd8e6 50%),
    linear-gradient(135deg, #cfd8e6 50%, transparent 50%),
    linear-gradient(to left, rgba(255, 255, 255, 0.08) 2.2rem, transparent 2.2rem);
  background-position:
    calc(100% - 0.95rem) calc(50% - 2px),
    calc(100% - 0.62rem) calc(50% - 2px),
    100% 0;
  background-size: 7px 7px, 7px 7px, 100% 100%;
  background-repeat: no-repeat;
}

.custom-select-sm {
  min-height: var(--app-control-height-sm);
  padding: var(--app-control-padding-y-sm) var(--size-9) var(--app-control-padding-y-sm) var(--app-control-padding-x-sm);
  font-size: var(--app-font-size-meta);
  border-radius: var(--app-radius-control);
  background-position:
    calc(100% - 0.82rem) calc(50% - 2px),
    calc(100% - 0.52rem) calc(50% - 2px),
    100% 0;
  background-size: 6px 6px, 6px 6px, 100% 100%;
}

.form-control-file,
input[type="file"] {
  display: none !important;
}

.file-input-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--app-control-gap);
  max-width: 100%;
}

.file-input-status {
  display: inline-block;
  font-size: var(--app-font-size-meta);
  color: #b8b8b8;
  vertical-align: middle;
  max-width: min(60ch, calc(100vw - 14rem));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-input-status.is-empty {
  display: none;
}

.file-input-status.is-error {
  color: var(--bad);
}

/* Framing chart image control keeps a single-line button row. */
#bg_image + .file-input-button + .file-input-status {
  display: none !important;
}

.form-upload-error {
  display: none;
  margin: var(--space-1-5) 0 var(--space-2);
  color: var(--bad);
  font-size: var(--app-font-size-body);
}

.form-upload-error.is-visible {
  display: block;
}

.form-upload-error.is-flash {
  animation: uploadErrorFlash 380ms ease-out;
}

@keyframes uploadErrorFlash {
  0% {
    opacity: 0.35;
    transform: translateY(-1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

button:disabled:not(.btn),
input[type="submit"]:disabled:not(.btn),
input[type="button"]:disabled:not(.btn),
input[type="reset"]:disabled:not(.btn) {
  opacity: 0.48;
  cursor: not-allowed;
  color: var(--color-text-secondary) !important;
  background: var(--color-surface-raised) !important;
  border-color: var(--color-border-default) !important;
  box-shadow: none !important;
}

.btn:disabled,
.btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

button:disabled:not(.btn):hover,
input[type="submit"]:disabled:not(.btn):hover,
input[type="button"]:disabled:not(.btn):hover,
input[type="reset"]:disabled:not(.btn):hover {
  color: var(--color-text-secondary) !important;
  background: var(--color-surface-raised) !important;
  border-color: var(--color-border-default) !important;
}

.submit-tooltip-wrap {
  position: relative;
  display: inline-block;
}

.form-control:focus,
textarea:focus {
  color: #fff;
  background: var(--color-surface-canvas);
  border-color: var(--color-border-emphasis);
  box-shadow: none;
}

.form-control:focus-visible,
.custom-select:focus-visible,
textarea:focus-visible,
input[type="text"]:focus-visible,
input[type="number"]:focus-visible,
input[type="search"]:focus-visible,
input[type="email"]:focus-visible,
input[type="url"]:focus-visible {
  outline: none;
  border-color: var(--color-border-emphasis);
  box-shadow: none;
}

.form-control.bg-dark:focus,
textarea.bg-dark:focus {
  background-color: var(--color-surface-canvas) !important;
}
/* A <select> keeps focus after you pick an option, so darkening it on :focus
   left it stuck a different grey than its neighbours. Keep its normal raised
   background; focus is still shown via the border. */
.custom-select.bg-dark:focus {
  background-color: var(--color-surface-raised) !important;
}

.custom-select:focus {
  background-color: var(--color-surface-canvas);
  border-color: var(--color-border-emphasis);
  background-image:
    linear-gradient(45deg, transparent 50%, #cfd8e6 50%),
    linear-gradient(135deg, #cfd8e6 50%, transparent 50%),
    linear-gradient(to left, rgba(255, 255, 255, 0.08) 2.2rem, transparent 2.2rem);
}

.form-check {
  min-height: 1.5rem;
  margin-bottom: var(--space-1);
  padding-left: 0;
}

.form-check-input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.form-check-input[type="radio"]:focus {
  outline: none;
  box-shadow: none;
}

.form-check-input[type="radio"] + .form-check-label {
  display: inline-block;
  color: var(--color-text-secondary);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-default);
  padding: 0.3rem 0.65rem;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  border-radius: var(--radius-md);
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.form-check-input[type="radio"] + .form-check-label:hover {
  border-color: rgba(216, 224, 234, 0.62);
}

.form-check-input[type="radio"]:checked + .form-check-label {
  color: #1e1e1e;
  background: #dde4ef;
  border-color: #dde4ef;
}

.form-check-input[type="radio"]:focus + .form-check-label {
  border-color: rgba(216, 224, 234, 0.7);
}

.form-check-input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: static;
  width: 0.95rem;
  height: 0.95rem;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0.45rem;
  border: 1px solid rgba(216, 224, 234, 0.55);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  box-shadow: none;
  cursor: pointer;
  flex: 0 0 auto;
}

.form-check-input[type="checkbox"]:focus {
  outline: none;
  box-shadow: none;
  border-color: rgba(216, 224, 234, 0.75);
}

.form-check-input[type="checkbox"]:checked {
  border-color: var(--brand);
  background-color: var(--brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='square' stroke-linejoin='miter' d='M3.2 8.4l2.5 2.7 7-7'/%3E%3C/svg%3E");
  background-size: 78% 78%;
  background-position: center;
  background-repeat: no-repeat;
}

.form-check-input[type="checkbox"] + .form-check-label {
  color: #d4d4d4;
  padding-left: 0;
  display: inline-flex;
  align-items: center;
}

.choice-inline {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  overflow-x: auto;
}

/* When a .choice-inline segmented control doubles as a Bootstrap grid column
   (CDL Exporter uses `col-sm-10 choice-inline`), the column's flex: 0 0 83.33%
   stretches the pill bar to the full column width. Override it so the bar hugs
   its options like every other .choice-inline (which is inline-flex). */
.choice-inline[class*="col-"] {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

.choice-inline .form-check {
  margin: 0;
}

.offset-sign-group .form-check-input[type="radio"] + .form-check-label {
  padding: 0.22rem 0.5rem;
  font-size: 0.92rem;
  min-width: 0;
  justify-content: flex-start;
}

.timecode-swap-group .form-check-input[type="radio"] + .form-check-label {
  padding: 0.22rem 0.5rem;
  font-size: 0.92rem;
  min-width: 0;
  justify-content: flex-start;
}

/* Checkbox rendered as a toggle button — same visual language as the radio
   button-groups above. Add .tform-toggle to a .form-check that wraps a checkbox;
   the box is hidden and its label becomes the pressable surface. */
.tform-toggle {
  min-height: 0;
  margin-bottom: 0;
  display: inline-flex;
}

.tform-toggle .form-check-input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}

.tform-toggle .form-check-input[type="checkbox"] + .form-check-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-text-secondary);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-default);
  padding: 0.3rem 0.65rem;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  border-radius: var(--radius-md);
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.tform-toggle .form-check-input[type="checkbox"] + .form-check-label:hover {
  border-color: rgba(216, 224, 234, 0.62);
}

.tform-toggle .form-check-input[type="checkbox"]:checked + .form-check-label {
  color: #1e1e1e;
  background: #dde4ef;
  border-color: #dde4ef;
}

.tform-toggle .form-check-input[type="checkbox"]:focus-visible + .form-check-label {
  border-color: rgba(216, 224, 234, 0.7);
  outline: var(--app-focus-outline);
  outline-offset: 1px;
}

/* A wrapping row of toggle buttons. */
.tform-toggle-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tform-toggle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}

.tform-toggle-grid .tform-toggle .form-check-label {
  width: 100%;
  justify-content: center;
}

@media (max-width: 820px) {
  .tform-toggle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 540px) {
  .tform-toggle-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Suppress the toggle-button transition during initial page load so checked
   toggles (e.g. the colour filter buttons in Resolve Markers EDL to Text, which
   are pre-checked and tinted their marker colour) don't visibly animate/flash
   their fill in on first paint — including when site.js restores saved form
   settings. `preload` is set on <html> in base.html and removed by site.js once
   the page has settled. */
html.preload .tform-toggle .form-check-label {
  transition: none !important;
}

/* Buttons and button-styled labels are never text-selectable — clicking (or
   double-clicking) one was selecting its label text. Safari only honours the
   -webkit- prefix on labels, so set both. */
.btn,
.vv-btn,
.file-input-button,
input[type="button"],
input[type="submit"],
.form-check-input + .form-check-label {
  -webkit-user-select: none;
  user-select: none;
}

/* ── Compact card layout for the simple form tools (EDL / CDL / Markers / converters)
   ───────────────────────────────────────────────────────────────────────────────
   Replaces the tall one-control-per-row Bootstrap stacks with a responsive card grid
   and a top action bar, so the primary actions stay above the fold. Reuses the existing
   control styles (.form-control-sm, .custom-select, .choice-inline, .form-check). */
.tform {
  --tform-card-padding-y: 0.85rem;
  --tform-card-padding-x: 0.95rem;
  --tform-gap: 0.85rem;
}

.tform-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.05rem;
}

.tform-head h1,
.tform-head h2 {
  margin: 0;
  font-size: clamp(1.25rem, 1.1rem + 0.55vw, 1.55rem);
  line-height: 1.05;
}

.tform-head-copy {
  min-width: min(100%, 28rem);
  max-width: 68ch;
}

.tform-lede,
.tform-head p,
.tform > .form-text {
  display: block;
  margin: 0.22rem 0 0;
  max-width: 72ch;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.42;
}

.tform-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tform-actions .btn,
.tform-actions input.btn,
.tform-inline .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--app-button-gap);
}

.tform-actions .default-settings-btn { margin-left: 0; }

.lp-copy-link-btn {
  justify-content: center;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.lp-copy-link-btn.is-copied {
  color: #ffffff;
  border-color: rgba(68, 210, 115, 0.64);
  background: rgba(15, 60, 28, 0.9);
}

.lp-copy-link-label {
  display: inline-block;
  min-width: 4.7rem;
  text-align: center;
  transition: opacity 150ms ease;
}

.lp-copy-link-label.is-fading {
  opacity: 0;
}

.tform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tform-gap);
  align-items: start;
}

.tform-grid-single {
  grid-template-columns: minmax(0, 1fr);
}

.tform-stack-layout {
  display: flex;
  flex-direction: column;
  gap: var(--tform-gap);
}

.tform-settings-row {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem 0.9rem;
  flex-wrap: wrap;
}

.tform-settings-row > .tform-field {
  flex: 1 1 7.5rem;
  min-width: 7.5rem;
  margin-bottom: 0;
}

.tform-settings-row .tform-sub {
  margin-top: 0;
}

.tform-settings-row .btn-icon-swap {
  flex: 0 0 auto;
}

.tform-padding-field {
  flex: 0 0 5.75rem !important;
  min-width: 5.75rem !important;
}

.tform-tool-grid {
  display: grid;
  grid-template-columns: minmax(16rem, 0.34fr) minmax(0, 1fr);
  gap: var(--tform-gap);
  align-items: start;
}

.tform-tool-grid-balanced {
  grid-template-columns: minmax(18rem, 0.42fr) minmax(0, 1fr);
}

.tform-editor-layout {
  align-items: stretch;
}

.tform-editor-layout > .tform-col,
.tform-editor-grid,
.tform-editor-stack {
  min-height: 0;
  height: 100%;
}

.tform-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tform-gap);
  align-items: stretch;
}

.tform-editor-stack {
  display: flex;
  flex-direction: column;
  gap: var(--tform-gap);
}

.tform-editor-stack > .tform-editor-panel {
  flex: 1 1 0;
}

.tform-editor-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.tform-editor-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--border);
}

.tform-editor-head .tform-card-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.tform-editor-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  flex: 0 0 auto;
}

.tform-editor-actions .slate-copy-icon-btn {
  position: static;
  width: 1.5rem;
  height: 1.5rem;
}

.tform-editor-body {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.tform-editor-body textarea {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  resize: none;
  overflow: auto;
  border: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--bg, #111) !important;
  color: var(--text);
  padding: 0.5rem 0.65rem;
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  line-height: 1.4;
  box-shadow: none;
  white-space: pre;
}

.tform-editor-body textarea:focus {
  outline: none;
  box-shadow: none;
}

/* Shared pane language for the smaller editorial/converter tools. Big Cut EDL is
   the reference: a quiet header strip, dark mono body, and compact inline actions. */
.minor-tool {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-height: 0;
}

.minor-tool.no-select {
  user-select: none;
  -webkit-user-select: none;
}

.minor-tool textarea,
.minor-tool pre {
  user-select: text;
  -webkit-user-select: text;
}

.minor-panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  align-items: stretch;
}

.minor-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 8px);
  background: var(--surface2, #1b1b1d);
  box-shadow: none;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.minor-panel.is-drop {
  border-color: var(--info);
  background: rgba(96, 165, 250, 0.06);
}

.minor-panel-fill {
  height: 100%;
  min-height: 100%;
}

.minor-panel-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.05rem;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--border);
}

.minor-panel-title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.2;
  text-transform: uppercase;
}

.minor-panel-title i {
  width: 1em;
  color: var(--text-dim);
  text-align: center;
}

.minor-panel-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.minor-panel-count {
  flex: 0 0 auto;
  color: var(--text-dim);
  font-size: 0.72rem;
  white-space: nowrap;
}

.minor-panel-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  flex: 0 0 auto;
  margin-left: auto;
}

.minor-panel-action {
  flex: 0 0 auto;
  padding: 0 0.2rem;
  border: 0;
  background: none;
  color: var(--info);
  cursor: pointer;
  font-size: 0.72rem;
  line-height: 1.2;
}

.minor-panel-action:hover,
.minor-panel-action:focus {
  color: #ffffff;
  outline: none;
}

.minor-panel-head .slate-copy-icon-btn {
  position: static;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
}

.minor-tag {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.25;
}

.minor-tag-a {
  color: var(--minor-a, #f2636e);
  background: rgba(242, 99, 110, 0.18);
}

.minor-tag-b {
  color: var(--minor-b, #46c46a);
  background: rgba(70, 196, 106, 0.18);
}

.minor-panel textarea,
.minor-readout {
  flex: 1 1 auto;
  width: 100%;
  min-height: 220px;
  max-height: 400px;
  margin: 0;
  padding: 0.45rem 0.6rem;
  overflow: auto;
  resize: vertical;
  box-sizing: border-box;
  border: 0;
  border-radius: 0 0 var(--radius-lg, 8px) var(--radius-lg, 8px);
  background: var(--bg, #111) !important;
  color: var(--text);
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  line-height: 1.4;
  white-space: pre;
  box-shadow: none;
}

.minor-readout {
  min-height: 120px;
}

.minor-panel textarea:focus,
.minor-readout:focus {
  outline: none;
  box-shadow: none;
}

body:not(.home-page):not(.framing-full-width) .content-panel .minor-panel textarea,
body:not(.home-page):not(.framing-full-width) .content-panel .minor-panel .minor-readout {
  border: 0;
  border-radius: 0 0 var(--radius-lg, 8px) var(--radius-lg, 8px);
  background: var(--bg, #111) !important;
  box-shadow: none;
}

.minor-panel-editor textarea {
  min-height: clamp(16rem, 26vh, 24rem);
  max-height: none;
}

.minor-panel-fill textarea,
.minor-panel-fill .minor-readout {
  min-height: 22rem;
  max-height: none;
}

.minor-panel-foot {
  margin: 0;
  padding: 0.45rem 0.65rem 0.5rem;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.tform-editor-stack > .minor-panel {
  flex: 1 1 0;
  min-height: 0;
}

.tform-editor-stack > .minor-panel textarea {
  min-height: 0;
  max-height: none;
  resize: none;
}

@media (max-width: 991.98px) {
  .minor-panel-fill {
    min-height: 20rem;
  }

  .minor-panel-fill textarea,
  .minor-panel-fill .minor-readout {
    min-height: 16rem;
  }
}

@media (max-width: 760px) {
  .minor-panel-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .tform-editor-grid {
    grid-template-columns: 1fr;
  }
}

.tform-col {
  display: flex;
  flex-direction: column;
  gap: var(--tform-gap);
  min-width: 0;
}

.tform-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--tform-card-padding-y) var(--tform-card-padding-x);
  min-width: 0;
  box-shadow: none;
}

.tform-card-title {
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.78rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.tform-card-title i {
  width: 1em;
  color: var(--text-dim);
  text-align: center;
}

.tform-field { margin-bottom: 0.65rem; }
.tform-field:last-child { margin-bottom: 0; }

.tform-field-sm { max-width: 11.875rem; }
.tform-field-md { max-width: 15rem; }
.tform-field-lg { max-width: 26.25rem; }
.tform-field-compact { width: 5.625rem; max-width: 5.625rem; }

.tform-control-row,
.tform-control-cluster {
  display: flex;
  align-items: flex-end;
  gap: 0.8rem 1rem;
  flex-wrap: wrap;
}

.tform-control-cluster {
  align-items: flex-start;
}

.tform-spacer-sm { margin-top: 0.6rem; }
.tform-spacer-md { margin-top: 0.75rem; }

.tform-card-note {
  display: block;
  margin-top: 0.65rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.42;
}

.tform-textarea-mono {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  line-height: 1.45;
  width: 100%;
}

/* Small text inputs default to the taller .form-control min-height; pin them to the
   exact small-control height so an input and a select in the same .tform-row line up. */
.tform .form-control-sm { min-height: var(--app-control-height-sm); height: var(--app-control-height-sm); }
/* In a .tform-row the fields are columns, not stacked, so the per-field bottom margin
   (only the last child resets it) lands on every field but the last and, with
   align-items:end aligning margin boxes, pushes the others' content up out of line.
   The grid gap already spaces them when they wrap to one column. */
.tform-row > .tform-field { margin-bottom: 0; }
.tform-field > label,
.tform-sub {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0 0 0.25rem;
}
/* small uppercase sub-label inside a card section */
.tform-sub {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0.85rem 0 0.4rem;
}

.tform-row .tform-sub,
.tform-control-row .tform-sub,
.tform-control-cluster .tform-sub {
  margin-top: 0;
}

.tform-row {
  display: grid;
  gap: 0.6rem;
  align-items: end;
}
.tform-row.cols-2 { grid-template-columns: 1fr 1fr; }
.tform-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.tform-row.cols-auto-sm { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
.tform-inline {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.tform-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.15rem 1.1rem;
}

.tform-check-grid.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tform-reels-card .tform-card-title {
  margin-bottom: 0.95rem;
}

.tform-reels-control-row {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.55rem;
  align-items: end;
  margin-bottom: 0.85rem;
}

.tform-reels-start-field {
  grid-column: 1 / span 2;
  width: 100%;
  max-width: none;
  margin-bottom: 0;
}

.tform-reels-defaults-action {
  grid-column: 3;
  min-width: 0;
}

.tform-reels-defaults-action .btn {
  width: 100%;
  min-height: var(--app-control-height-sm);
}

.tform-reels-card .tform-pairs {
  gap: 0.5rem;
}

.tform-reels-card .tform-pair {
  grid-template-columns: 4.6rem minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.55rem;
}

.tform-reels-card .tform-pair > .tform-pair-label {
  line-height: 1.2;
}

@media (max-width: 768px) {
  .tform-grid,
  .tform-tool-grid,
  .tform-tool-grid-balanced { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .tform-row.cols-2,
  .tform-row.cols-3,
  .tform-check-grid,
  .tform-check-grid.cols-3 { grid-template-columns: 1fr; }

  .tform-reels-control-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .tform-reels-start-field,
  .tform-reels-defaults-action {
    grid-column: auto;
  }
}
/* labelled field pairs (e.g. Longplay reels: "Reel N  [start] [end]"), two per row */
.tform-pairs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem 1.25rem;
}

.tform-pairs-compact {
  grid-template-columns: minmax(0, 1fr);
}

.tform-pair {
  display: grid;
  grid-template-columns: 70px 1fr 1fr;
  gap: 0.4rem;
  align-items: center;
}
.tform-pair > .tform-pair-label {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.tform-track-map {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem 0.9rem;
}

.tform-track-field {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
}

.tform-track-field > span {
  color: var(--text-muted);
  font-size: 0.78rem;
}

@media (max-width: 640px) {
  .tform-pairs,
  .tform-track-map { grid-template-columns: 1fr; }
}

/* ── Minor tool page-specific behavior, using the shared pane language above ── */
#bigcut {
  --bc-conf: #3fb8c4;
  --bc-add: #46c46a;
  --bc-rem: #f2636e;
  --minor-a: var(--bc-rem);
  --minor-b: var(--bc-add);
}

#bigcut .bc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

#bigcut .bc-head-copy {
  flex: 1 1 30rem;
  min-width: 0;
  max-width: 58ch;
}

#bigcut .bc-head h2 {
  margin: 0;
}

#bigcut .bc-sub {
  margin: 0.15rem 0 0;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.42;
}

#bigcut .bc-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
  flex: 0 0 auto;
  margin-left: auto;
  flex-wrap: wrap;
}

#bigcut .bc-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

#bigcut .bc-bar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

#bigcut .bc-opt {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-muted);
  font-size: 0.8rem;
}

#bigcut .bc-opt select {
  height: calc(1.45rem + 2px);
  min-height: calc(1.45rem + 2px);
  padding: 0.1rem 1.5rem 0.1rem 0.4rem;
  font-size: 0.8rem;
}

#bigcut .bc-chips {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-left: auto;
  align-items: center;
}

#bigcut .bc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.12rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 11px;
  color: var(--text-muted);
  font-size: 0.74rem;
}

#bigcut .bc-chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

#bigcut .bc-chip[data-s="conform"] .dot { background: var(--bc-conf); }
#bigcut .bc-chip[data-s="removed"] .dot { background: var(--bc-rem); }
#bigcut .bc-chip[data-s="added"] .dot { background: var(--bc-add); }

#bigcut .bc-merge-note {
  color: var(--text-dim);
  font-size: 0.74rem;
}

#bigcut .bc-viewer {
  position: relative;
  overflow-x: auto;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 8px);
  background: var(--surface2, #1b1b1d);
}

#bigcut .bc-track-row {
  position: relative;
  height: 40px;
  margin: 0.2rem 0;
}

#bigcut .bc-track-label {
  position: absolute;
  left: 0;
  top: 50%;
  width: 18px;
  z-index: 3;
  transform: translateY(-50%);
  color: var(--text-dim);
  font-size: 0.68rem;
  font-weight: 700;
}

#bigcut .bc-track {
  position: absolute;
  inset: 0 0 0 22px;
}

#bigcut .bc-connectors {
  position: absolute;
  left: 22px;
  right: 0;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}

#bigcut .bc-evt {
  position: absolute;
  top: 4px;
  bottom: 4px;
  min-width: 2px;
  overflow: hidden;
  padding: 0 3px;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 3px;
  box-sizing: border-box;
  color: rgba(0, 0, 0, 0.85);
  cursor: pointer;
  font-size: 0.62rem;
  line-height: 32px;
  white-space: nowrap;
  transition: filter 120ms ease, box-shadow 120ms ease;
}

#bigcut .bc-evt.s-conform { background: var(--bc-conf); }
#bigcut .bc-evt.s-added { background: var(--bc-add); }
#bigcut .bc-evt.s-removed { background: var(--bc-rem); opacity: 0.5; }
#bigcut .bc-evt.dim { opacity: 0.18; }
#bigcut .bc-evt.hot {
  z-index: 4;
  opacity: 1;
  filter: brightness(1.12);
  box-shadow: 0 0 0 2px #fff, 0 0 10px rgba(255, 255, 255, 0.5);
}

#bigcut .bc-empty {
  padding: 2.2rem 1rem;
  color: var(--text-dim);
  font-size: 0.85rem;
  text-align: center;
}

#bigcut .bc-table-wrap {
  overflow: auto;
  max-height: 40vh;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 8px);
}

#bigcut table.bc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.76rem;
}

#bigcut .bc-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface2, #1b1b1d);
  color: var(--text-dim);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-align: left;
  text-transform: uppercase;
}

#bigcut .bc-table td {
  padding: 0.3rem 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  white-space: nowrap;
}

#bigcut .bc-table td.clip {
  max-width: 200px;
  overflow: hidden;
  font-family: inherit;
  text-overflow: ellipsis;
}

#bigcut .bc-table tr {
  cursor: pointer;
}

#bigcut .bc-table tr.hot td {
  background: rgba(255, 255, 255, 0.06);
}

#bigcut .bc-table .mrg {
  color: var(--bc-conf);
  font-size: 0.66rem;
}

#bigcut .bc-st {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
}

#bigcut .bc-st .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

#bigcut .bc-st.conform { color: var(--bc-conf); }
#bigcut .bc-st.conform .dot { background: var(--bc-conf); }
#bigcut .bc-st.new { color: var(--bc-add); }
#bigcut .bc-st.new .dot { background: var(--bc-add); }

#bigcut .bc-tip,
#edld .edld-tip {
  position: fixed;
  z-index: 50;
  display: none;
  max-width: 340px;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--border-light, #444);
  border-radius: 6px;
  background: rgba(10, 10, 12, 0.96);
  color: var(--text);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  line-height: 1.45;
  pointer-events: none;
  white-space: pre;
}

#edld {
  --edld-add: #46c46a;
  --edld-rem: #f2636e;
  --edld-chg: #e3b341;
  --edld-mat: #6b7480;
  --minor-a: var(--edld-rem);
  --minor-b: var(--edld-add);
}

#edld .edld-head {
  margin-bottom: 0;
}

#edld .edld-sample-wrap {
  position: relative;
}

#edld .edld-sample-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 156px;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 8px);
  background: var(--surface, #1b1b1d);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

#edld .edld-sample-menu[hidden] {
  display: none;
}

#edld .edld-sample-menu button {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0.55rem;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--text);
  cursor: pointer;
  font-size: 0.8rem;
  text-align: left;
}

#edld .edld-sample-menu button:hover {
  background: rgba(255, 255, 255, 0.08);
}

#edld .edld-sample-menu .fmt-tag {
  color: var(--text-dim);
  font-size: 0.68rem;
}

#edld .edld-bar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

#edld .edld-opt {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-muted);
  font-size: 0.8rem;
}

#edld .edld-opt select {
  height: calc(1.45rem + 2px);
  min-height: calc(1.45rem + 2px);
  padding: 0.1rem 1.5rem 0.1rem 0.4rem;
  font-size: 0.8rem;
}

#edld .edld-chips {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-left: auto;
}

#edld .edld-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.12rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 11px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.74rem;
  user-select: none;
}

#edld .edld-chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

#edld .edld-chip.off { opacity: 0.4; }
#edld .edld-chip[data-s="added"] .dot { background: var(--edld-add); }
#edld .edld-chip[data-s="removed"] .dot { background: var(--edld-rem); }
#edld .edld-chip[data-s="changed"] .dot { background: var(--edld-chg); }
#edld .edld-chip[data-s="matched"] .dot { background: var(--edld-mat); }

#edld .edld-viewer {
  position: relative;
  overflow-x: auto;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 8px);
  background: var(--surface2, #1b1b1d);
}

#edld .edld-track-row {
  position: relative;
  height: 40px;
  margin: 0.2rem 0;
}

#edld .edld-track-label {
  position: absolute;
  left: 0;
  top: 50%;
  width: 18px;
  z-index: 3;
  transform: translateY(-50%);
  color: var(--text-dim);
  font-size: 0.68rem;
  font-weight: 700;
}

#edld .edld-track {
  position: absolute;
  inset: 0 0 0 22px;
}

#edld .edld-connectors {
  position: absolute;
  left: 22px;
  right: 0;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}

#edld .edld-evt {
  position: absolute;
  top: 4px;
  bottom: 4px;
  min-width: 2px;
  overflow: hidden;
  padding: 0 3px;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 3px;
  box-sizing: border-box;
  color: rgba(0, 0, 0, 0.85);
  cursor: pointer;
  font-size: 0.62rem;
  line-height: 32px;
  white-space: nowrap;
  transition: filter 120ms ease, box-shadow 120ms ease;
}

#edld .edld-evt.s-added { background: var(--edld-add); }
#edld .edld-evt.s-removed { background: var(--edld-rem); }
#edld .edld-evt.s-changed { background: var(--edld-chg); }
#edld .edld-evt.s-matched { background: var(--edld-mat); color: rgba(255, 255, 255, 0.9); }
#edld .edld-evt.dim { opacity: 0.22; }
#edld .edld-evt.hot {
  z-index: 4;
  filter: brightness(1.12);
  box-shadow: 0 0 0 2px #fff, 0 0 10px rgba(255, 255, 255, 0.5);
}
#edld .edld-evt.is-trimmed {
  border-color: rgba(0, 0, 0, 0.6);
  border-style: dashed;
}
#edld .edld-evt .edld-evt-name { display: inline-block; vertical-align: top; }
#edld .edld-evt .edld-trim { margin-right: 2px; font-size: 0.6rem; opacity: 0.85; }
#edld .edld-evt.is-trimmed:hover,
#edld .edld-evt.hot { overflow: visible; z-index: 5; }
#edld .edld-trim-tag { margin-left: 0.3rem; color: var(--edld-chg); font-size: 0.8em; }
#edld .edld-delta { font-size: 0.92em; }
#edld .edld-delta.up { color: var(--edld-add); }
#edld .edld-delta.down { color: var(--edld-rem); }

#edld .edld-empty {
  padding: 2.2rem 1rem;
  color: var(--text-dim);
  font-size: 0.85rem;
  text-align: center;
}

#edld .edld-table-wrap {
  overflow: auto;
  max-height: 40vh;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 8px);
  background: var(--surface2, #1b1b1d);
}

#edld table.edld-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.76rem;
}

#edld .edld-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface2, #1b1b1d);
  color: var(--text-dim);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-align: left;
  text-transform: uppercase;
}

#edld .edld-table td {
  padding: 0.3rem 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  white-space: nowrap;
}

#edld .edld-table td.clip {
  max-width: 220px;
  overflow: hidden;
  font-family: inherit;
  text-overflow: ellipsis;
}

#edld .edld-table tr {
  cursor: pointer;
}

#edld .edld-table tr.hot td {
  background: rgba(255, 255, 255, 0.06);
}

#edld .edld-st {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
}

#edld .edld-st .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

#edld .edld-st.added { color: var(--edld-add); }
#edld .edld-st.added .dot { background: var(--edld-add); }
#edld .edld-st.removed { color: var(--edld-rem); }
#edld .edld-st.removed .dot { background: var(--edld-rem); }
#edld .edld-st.changed { color: var(--edld-chg); }
#edld .edld-st.changed .dot { background: var(--edld-chg); }
#edld .edld-st.matched { color: var(--edld-mat); }
#edld .edld-st.matched .dot { background: var(--edld-mat); }

#edldj {
  --dj: #b48cff;
  --minor-a: var(--dj);
  --minor-b: #46c46a;
}

#edldj input {
  -webkit-user-select: text;
  user-select: text;
}

#edldj .dj-head {
  margin-bottom: 0;
}

#edldj .dj-opts {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

#edldj .dj-field {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-muted);
  font-size: 0.8rem;
}

#edldj .dj-field label {
  margin: 0;
  color: var(--text-muted);
  white-space: nowrap;
}

#edldj .dj-field input,
#edldj .dj-field select {
  height: calc(1.45rem + 2px);
  min-height: calc(1.45rem + 2px);
  font-size: 0.8rem;
}

#edldj .dj-field select.custom-select {
  width: auto;
  min-width: 5.8rem;
  padding: 0.14rem 1.55rem 0.14rem 0.55rem;
  background-image:
    linear-gradient(45deg, transparent 50%, #cfd8e6 50%),
    linear-gradient(135deg, #cfd8e6 50%, transparent 50%);
  background-position:
    calc(100% - 0.78rem) calc(50% - 2px),
    calc(100% - 0.48rem) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

#edldj .dj-field select.custom-select:focus {
  background-color: var(--color-surface-raised);
  background-image:
    linear-gradient(45deg, transparent 50%, #cfd8e6 50%),
    linear-gradient(135deg, #cfd8e6 50%, transparent 50%);
}

#edldj .dj-field #dj-format {
  min-width: 4.9rem;
}

#edldj .dj-field input[type="number"] {
  width: 4.5rem;
}

#edldj .dj-field input#dj-title {
  width: 12rem;
}

#edldj .dj-field input#dj-start {
  width: 8rem;
}

#edldj .dj-toggles {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

#edldj .dj-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.12rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.74rem;
  user-select: none;
}

#edldj .dj-toggle:hover {
  border-color: rgba(216, 224, 234, 0.62);
}

#edldj .dj-toggle:focus-visible {
  outline: var(--app-focus-outline);
  outline-offset: 1px;
}

#edldj .dj-toggle.on {
  border-color: var(--dj);
  background: rgba(180, 140, 255, 0.18);
  color: #cdb6ff;
}

#edldj .dj-pane.is-drop {
  border-color: var(--dj);
  background: rgba(180, 140, 255, 0.06);
}

#edldj .dj-copy {
  color: var(--dj);
}

#edldj .dj-bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

#edldj .dj-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.12rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 11px;
  color: var(--text-muted);
  font-size: 0.74rem;
}

#edldj .dj-warn {
  color: var(--warn, #e3b341);
  font-size: 0.74rem;
}

#edldj .dj-viewer {
  position: relative;
  overflow-x: auto;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 8px);
  background: var(--surface2, #1b1b1d);
}

#edldj .dj-track-row {
  position: relative;
  height: 40px;
  margin: 0.2rem 0;
}

#edldj .dj-track-label {
  position: absolute;
  left: 0;
  top: 50%;
  width: 18px;
  z-index: 3;
  transform: translateY(-50%);
  color: var(--text-dim);
  font-size: 0.68rem;
  font-weight: 700;
}

#edldj .dj-track {
  position: absolute;
  inset: 0 0 0 22px;
}

#edldj .dj-evt {
  position: absolute;
  top: 4px;
  bottom: 4px;
  min-width: 2px;
  overflow: hidden;
  padding: 0 3px;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 3px;
  box-sizing: border-box;
  color: rgba(0, 0, 0, 0.85);
  cursor: default;
  font-size: 0.62rem;
  line-height: 32px;
  white-space: nowrap;
  transition: filter 120ms ease, box-shadow 120ms ease;
}

#edldj .dj-evt.hot {
  z-index: 4;
  filter: brightness(1.12);
  box-shadow: 0 0 0 2px #fff, 0 0 10px rgba(255, 255, 255, 0.5);
}

#edldj .dj-empty {
  padding: 2.2rem 1rem;
  color: var(--text-dim);
  font-size: 0.85rem;
  text-align: center;
}

#edldj .dj-tip {
  position: fixed;
  z-index: 50;
  display: none;
  max-width: 360px;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--border-light, #444);
  border-radius: 6px;
  background: rgba(10, 10, 12, 0.96);
  color: var(--text);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  line-height: 1.45;
  pointer-events: none;
  white-space: pre;
}

@media (max-width: 980px) {
  #bigcut .bc-head-copy {
    flex-basis: 100%;
    max-width: none;
  }

  #bigcut .bc-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
}

#epp {
  margin-top: 1rem;
}

#epp .epp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

#epp .epp-title,
#epp .epp-name,
#epp .epp-status {
  margin: 0;
}

#epp .epp-name {
  margin-left: 0.45rem;
  color: var(--text-dim);
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

#epp .epp-status {
  color: var(--text-muted);
  font-size: 0.74rem;
}

#epp .epp-panes {
  gap: 0.7rem;
}

#epp .epp-inner {
  display: inline-block;
  min-width: 100%;
}

#epp .epp-d {
  padding: 0 1px;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

#epp .epp-d-reel { background: rgba(45, 212, 191, 0.28); }
#epp .epp-d-clip { background: rgba(74, 222, 128, 0.26); }
#epp .epp-d-source { background: rgba(96, 165, 250, 0.3); }
#epp .epp-d-locator { background: rgba(192, 132, 252, 0.34); }
#epp .epp-d-tc { background: rgba(251, 191, 36, 0.3); }
#epp .epp-d-title { background: rgba(244, 114, 182, 0.3); }
#epp .epp-d-other { background: rgba(148, 163, 184, 0.32); }
#epp .epp-line.epp-add { background: rgba(74, 222, 128, 0.16); }
#epp .epp-line.epp-rem { background: rgba(248, 113, 113, 0.18); }

#epp .epp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  margin: 0.15rem 0 0;
  color: var(--text-muted);
  font-size: 0.68rem;
}

#epp .epp-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
}

#epp .epp-legend i {
  display: inline-block;
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 2px;
}

#epp .epp-swatch-reel { background: rgba(45, 212, 191, 0.6); }
#epp .epp-swatch-clip { background: rgba(74, 222, 128, 0.55); }
#epp .epp-swatch-source { background: rgba(96, 165, 250, 0.6); }
#epp .epp-swatch-locator { background: rgba(192, 132, 252, 0.66); }
#epp .epp-swatch-tc { background: rgba(251, 191, 36, 0.62); }
#epp .epp-swatch-title { background: rgba(244, 114, 182, 0.6); }
#epp .epp-swatch-other { background: rgba(148, 163, 184, 0.62); }
#epp .epp-swatch-add { background: rgba(74, 222, 128, 0.32); }
#epp .epp-swatch-rem { background: rgba(248, 113, 113, 0.34); }

.tform .tc-lbl {
  display: block;
  margin: 0.9rem 0 0.4rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  letter-spacing: normal;
  text-transform: none;
}

.tform .tc-tc {
  width: 7.5rem;
  max-width: 7.5rem;
}

.tform .tc-start-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.tform .tc-start-row .form-check-label {
  min-width: 9rem;
  justify-content: center;
}

.tform .tc-offset {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tform .tc-offset .offset-sign-group {
  flex: 0 0 auto;
}

.tform .offset-sign-group,
.tform .timecode-swap-group {
  overflow-x: visible;
}

.tform .timecode-swap-group {
  margin: 0;
}

.strip-list-layout {
  align-items: stretch;
}

.strip-list-layout > .tform-col {
  height: 100%;
}

.cdl-exporter-page .tform-head .tform-actions .btn,
.edl-strip-list-page .tform-head .tform-actions .btn,
.resolve-strip-list-page .tform-head .tform-actions .btn {
  min-width: 10.25rem;
}

.markers-list-page .tform-grid {
  align-items: stretch;
}

.markers-list-page .tform-grid > .tform-col {
  height: 100%;
}

.strip-list-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.28rem 0.75rem;
  align-items: start;
}

.strip-list-check-grid .form-check {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  min-height: 1.45rem;
  margin: 0 !important;
  padding: 0;
}

.strip-list-check-grid .form-check-input {
  width: 0.95rem;
  height: 0.95rem;
  margin: 0;
}

.strip-list-check-grid .form-check-label {
  min-width: 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.2;
}

html.preload .mc-pending {
  visibility: hidden;
}

#includeMarkerColorBlue:checked + .form-check-label { background: #3d7edb; border-color: #3d7edb; color: #fff; }
#includeMarkerColorCyan:checked + .form-check-label { background: #3fc7d4; border-color: #3fc7d4; color: #10302f; }
#includeMarkerColorGreen:checked + .form-check-label { background: #56b25a; border-color: #56b25a; color: #fff; }
#includeMarkerColorYellow:checked + .form-check-label { background: #e8c547; border-color: #e8c547; color: #2a2410; }
#includeMarkerColorRed:checked + .form-check-label { background: #d94c4c; border-color: #d94c4c; color: #fff; }
#includeMarkerColorPink:checked + .form-check-label { background: #ee6fa0; border-color: #ee6fa0; color: #3a121f; }
#includeMarkerColorPurple:checked + .form-check-label { background: #9b5dc4; border-color: #9b5dc4; color: #fff; }
#includeMarkerColorFuchsia:checked + .form-check-label { background: #c44d9b; border-color: #c44d9b; color: #fff; }
#includeMarkerColorRose:checked + .form-check-label { background: #f0a0a8; border-color: #f0a0a8; color: #3a151a; }
#includeMarkerColorLavender:checked + .form-check-label { background: #a9a4e0; border-color: #a9a4e0; color: #211d3a; }
#includeMarkerColorSky:checked + .form-check-label { background: #8fc0e8; border-color: #8fc0e8; color: #16273a; }
#includeMarkerColorMint:checked + .form-check-label { background: #8fd6a8; border-color: #8fd6a8; color: #143524; }
#includeMarkerColorLemon:checked + .form-check-label { background: #e6e45c; border-color: #e6e45c; color: #2c2c10; }
#includeMarkerColorSand:checked + .form-check-label { background: #cba877; border-color: #cba877; color: #2e2412; }
#includeMarkerColorCocoa:checked + .form-check-label { background: #7a5848; border-color: #7a5848; color: #fff; }
#includeMarkerColorCream:checked + .form-check-label { background: #ede2c4; border-color: #ede2c4; color: #2e2a1c; }

@media (max-width: 540px) {
  .strip-list-check-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.table {
  color: #ededed;
}

.table th,
.table td {
  border-top-color: rgba(255, 255, 255, 0.12);
}

.home-hero {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  align-items: center;
  padding: 9px 1rem 0.75rem;
  border-radius: var(--radius-lg);
  background: transparent;
  border: 0;
  margin-bottom: 0.975rem;
}

.brand-block h1 {
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  margin: 0;
}

.brand-block p {
  margin-top: 0.45rem;
  font-size: 1rem;
  max-width: 62ch;
}

.home-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.home-logo img {
  max-width: 100%;
  height: auto;
}

.home-logo-by {
  font-size: 1.1rem;
  color: var(--color-text-secondary);
}

.home-shell {
  width: min(1040px, 100%);
  margin: 0 auto;
}

.longplay-mode-row .form-check-label {
  white-space: nowrap;
}

.longplay-mode-row {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* ── Hierarchical home layout ──────────────────────────────────────────
   Tier 1 flagship cards (big, icon + title + description), tier 2 featured
   cards (medium, icon + title), tier 3 utilities (plain buttons). */

.home-tier {
  margin-top: 1.6rem;
}

.home-eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 0.7rem;
}

.home-flagship-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.home-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

/* Utility tier is a stack of rows; each row spreads its items evenly across
   the full width, so rows with different counts (4 / 3 / 4) each stay flush. */
.home-utility-grid {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.home-utility-row {
  display: flex;
  gap: 0.6rem;
}

.home-utility-row > .home-card-util {
  flex: 1 1 0;
  min-width: 0;
}

/* Tier grids step down with width. Ordered widest → narrowest so the narrower
   query wins at equal specificity when both match. */
@media (max-width: 991px) {
  .home-flagship-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 540px) {
  .home-flagship-grid { grid-template-columns: 1fr; }
  .home-feature-grid { grid-template-columns: 1fr; }
  .home-utility-row { flex-direction: column; }
}

/* Shared card chrome for tiers 1 & 2. */
.home-card {
  display: flex;
  background: var(--color-surface-default);
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
  text-decoration: none;
  transition: background-color 150ms ease-out, transform 150ms ease-out,
    box-shadow 150ms ease-out;
}

.home-card:hover,
.home-card:focus-visible {
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.home-card:active {
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}

/* On hover, underline only the tool name — not the description. Utility cards
   have no separate title element, so their whole label (the name) underlines. */
.home-card:hover .home-card-title,
.home-card:focus-visible .home-card-title,
.home-card-util:hover,
.home-card-util:focus-visible {
  text-decoration: underline;
}

.home-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--color-brand);
}

.home-card-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Tier 1 — flagship: vertical, generous, with description. */
.home-card-lg {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.4rem;
}

.home-card-lg .home-card-icon {
  width: 2.75rem;
  height: 2.75rem;
}

.home-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.home-card-lg .home-card-title {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.2;
}

.home-card-desc {
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--color-text-secondary);
}

.home-card-desc code {
  font-size: 0.8em;
}

/* Tier 2 — featured: horizontal, icon beside title. Tall, prominent cards. */
.home-card-md {
  flex-direction: row;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem 1.3rem;
  min-height: 7.5rem;
}

.home-card-md .home-card-icon {
  width: 2.2rem;
  height: 2.2rem;
}

.home-card-md .home-card-title {
  font-size: 1.05rem;
  font-weight: 600;
}

/* Tier 3 — utility cards: same card chrome as tier 2, centered title. */
.home-card-util {
  align-items: center;
  justify-content: center;
  padding: 0.95rem 1.1rem;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 600;
}

/* Unify every Bootstrap / shared-ui button to --app-radius-button. vendor.css
   hardcodes .btn-primary/.btn-secondary/.vv-btn (and friends) to 0.75rem, which
   diverged from the app button radius used by .dctl-btn and the inspectors — so the
   form pages (CDL Exporter, EDL Processor, Framing, Slate) stayed very round. This
   loads after vendor.css, so it wins at equal specificity. */
.btn,
.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info,
.vv-btn,
/* doubled class to match vendor.css's .file-input-button.file-input-button (0,2,0) */
.file-input-button.file-input-button {
  border-radius: var(--app-radius-button);
}

.tool-link {
  display: inline-flex;
  min-height: var(--size-14);
  padding: var(--space-3) var(--space-6);
  text-align: center;
  align-items: center;
  justify-content: center;
  background-color: var(--color-surface-raised);
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-surface-raised) 92%, white) 0%,
    var(--color-surface-raised) 50%,
    color-mix(in srgb, var(--color-surface-raised) 90%, black) 100%
  );
  background-size: 100% 200%;
  background-position: 0 0;
  border: 0;
  border-radius: var(--app-radius-button);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-lg);
  width: 100%;
}

.tool-link:hover,
.tool-link:focus {
  background-position: 0 50%;
  box-shadow: var(--shadow-md);
}

.tool-link:active {
  background-position: 0 100%;
  box-shadow: var(--shadow-xs);
}

.framing-chart-layout {
  display: grid;
  grid-template-columns: minmax(290px, 360px) 1fr;
  gap: 1rem;
  align-items: start;
}

body.framing-full-width .framing-chart-layout {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.framing-controls {
  border: 0;
  border-radius: var(--radius-lg);
  padding: 0.9rem;
  background: var(--color-surface-default);
}

.framing-controls .controls-section-title {
  font-size: 1.08rem;
  font-weight: 600;
  margin-bottom: 0.45rem;
}

.framing-controls .controls-subsection-title {
  font-size: 0.86rem;
  font-weight: 600;
  color: #bcbcbc;
}

.framing-controls hr {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin: 0.62rem 0 0.62rem;
}

body.framing-full-width .framing-controls {
  --fc-space-2xs: 0.18rem;
  --fc-space-xs: 0.26rem;
  --fc-space-sm: 0.36rem;
  --fc-space-md: 0.5rem;
  --fc-col-gap: 0.52rem;
  position: sticky;
  top: 0;
  align-self: start;
  height: auto;
  max-height: none;
  overflow-y: auto;
  overflow-x: clip;
  overscroll-behavior-x: none;
  touch-action: pan-y;
  min-height: 0;
  padding: 0.6rem 0.62rem;
  border-radius: var(--radius-md);
}

body.framing-full-width .framing-controls .controls-section-title {
  font-size: 0.96rem;
  font-weight: 600;
  margin-bottom: var(--fc-space-sm);
  letter-spacing: 0.01em;
}

body.framing-full-width .framing-controls .controls-subsection-title {
  font-size: 0.78rem;
}

body.framing-full-width .framing-controls hr {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin: var(--fc-space-md) 0;
}

body.framing-full-width .framing-controls .form-group {
  margin-bottom: var(--fc-space-sm);
}

body.framing-full-width .framing-controls .form-group.row:has(.form-control-range),
body.framing-full-width .framing-controls .form-group.row.compact-slider-row {
  align-items: flex-start !important;
}

body.framing-full-width .framing-controls .form-group.row:has(.form-control-range) .col-form-label,
body.framing-full-width .framing-controls .form-group.row.compact-slider-row .col-form-label {
  padding-top: 0.02rem;
}

/* Compact 2-column slider rows for static control-panel sections. */
body.framing-full-width .framing-controls > .form-group.row.align-items-center:has(.form-control-range),
body.framing-full-width .framing-controls > .form-group.row.align-items-center.compact-slider-row {
  display: inline-flex !important;
  flex-direction: column;
  width: 49.5% !important;
  vertical-align: top;
  margin-bottom: var(--fc-space-sm) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
  padding-right: 0 !important;
}

body.framing-full-width .framing-controls > .form-group.row.align-items-center:has(.form-control-range) > [class*="col-sm-"],
body.framing-full-width .framing-controls > .form-group.row.align-items-center.compact-slider-row > [class*="col-sm-"] {
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

body.framing-full-width .framing-controls > .form-group.row.align-items-center:has(.form-control-range) .col-form-label,
body.framing-full-width .framing-controls > .form-group.row.align-items-center.compact-slider-row .col-form-label {
  display: block;
  font-size: 0.61rem;
  letter-spacing: 0.04em;
  color: #8d939c;
  text-transform: uppercase;
  line-height: 1.15;
  padding: 0;
  margin-bottom: 0.1rem;
}

body.framing-full-width .framing-controls > .form-group.row.align-items-center:has(.form-control-range) small.text-muted,
body.framing-full-width .framing-controls > .form-group.row.align-items-center.compact-slider-row small.text-muted {
  display: block;
  margin-top: 0.03rem;
  line-height: 1.05;
}

@media (max-width: 560px) {
  body.framing-full-width .framing-controls > .form-group.row.align-items-center:has(.form-control-range),
  body.framing-full-width .framing-controls > .form-group.row.align-items-center.compact-slider-row {
    width: 100%;
    padding-right: 0;
  }
}

/* Browser-stable fallback: apply the same compact behavior via explicit class (no :has, no body dependency). */
.framing-controls.compact-two-col .form-group.row.compact-slider-row {
  display: inline-flex !important;
  flex-direction: column;
  width: 49.5% !important;
  vertical-align: top;
  margin-bottom: var(--fc-space-sm) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
  padding-right: 0 !important;
  align-items: flex-start !important;
}

.framing-controls.compact-two-col .form-group.row.compact-slider-row > [class*="col-sm-"] {
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.framing-controls.compact-two-col .form-group.row.compact-slider-row .col-form-label {
  display: block;
  font-size: 0.61rem;
  letter-spacing: 0.04em;
  color: #8d939c;
  text-transform: uppercase;
  line-height: 1.15;
  padding: 0;
  margin-bottom: 0.1rem;
}

.framing-controls.compact-two-col .form-group.row.compact-slider-row small.text-muted {
  display: block;
  margin-top: 0.03rem;
  line-height: 1.05;
}

/* Deterministic 2-column layout for top-level compact slider rows. */
/* Flexbox wrap rather than a grid here: the previous `grid-column: 1 / -1` default +
   `grid-column: auto` auto-placement pattern rendered single-column in Safari. Flex
   wrap gives the identical two-column layout (slider rows ~50%, everything else full
   width) and is robust across browsers. */
body.framing-full-width .framing-controls.compact-two-col {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--fc-col-gap);
  align-content: flex-start;
}

body.framing-full-width .framing-controls.compact-two-col > * {
  flex: 0 0 100%;
  min-width: 0;
}

body.framing-full-width .framing-controls.compact-two-col > .form-group.row.compact-slider-row {
  flex: 0 0 calc((100% - var(--fc-col-gap)) / 2);
  width: auto !important;
  max-width: none !important;
  margin: 0 0 var(--fc-space-sm) 0 !important;
  display: block !important;
  flex-direction: initial;
}

/* Corner Label controls: always render as a compact two-column pair. */
body.framing-full-width #working_calc_label_controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--fc-col-gap);
  align-items: start;
}

body.framing-full-width #working_calc_label_controls > .form-group.row.compact-slider-row {
  width: auto !important;
  max-width: none !important;
  margin: 0 0 var(--fc-space-sm) 0 !important;
  display: block !important;
}

/* Nested slider groups (Focus, Title cards): deterministic compact 2-column grid. */
body.framing-full-width .framing-controls .compact-slider-grid,
body.framing-full-width .framing-controls .title-slider-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--fc-col-gap);
  align-items: start;
}

body.framing-full-width .framing-controls .compact-slider-grid > .form-group.row.compact-slider-row,
body.framing-full-width .framing-controls .title-slider-grid > .form-group.row.compact-slider-row {
  width: auto !important;
  max-width: none !important;
  margin: 0 0 var(--fc-space-sm) 0 !important;
  display: block !important;
}

/* Interior reticle controls (Label Size / Aspect Ratio / Width / Height / …) use the
   Bootstrap-4 `.form-row` + `.col-6` grid. The BS5 shared-ui port dropped `.form-row`,
   so it became an unstyled block and the .col-6 items stacked into one column. Give it
   the same deterministic 2-column grid as the sibling slider groups above (and override
   BS5's `.col-6 { width: 50% }` so each item fills its grid track). */
body.framing-full-width .framing-controls .form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--fc-col-gap);
  align-items: start;
}
body.framing-full-width .framing-controls .form-row > [class*="col-"] {
  width: auto;
  max-width: none;
  flex: none;
  padding-left: 0;
  padding-right: 0;
}

body.framing-full-width .framing-controls .form-check {
  margin-bottom: var(--fc-space-xs);
  min-height: 1.15rem;
}

body.framing-full-width .framing-controls .wc-toggle {
  margin-top: var(--fc-space-xs) !important;
  margin-bottom: var(--fc-space-xs) !important;
}

body.framing-full-width .framing-controls .wc-side-label-row {
  margin-top: var(--fc-space-xs) !important;
  margin-bottom: var(--fc-space-xs) !important;
}

body.framing-full-width .framing-controls .wc-side-label-row > [class*="col-sm-"] {
  display: flex;
  align-items: center;
}

body.framing-full-width .framing-controls .wc-side-label-check {
  margin: 0 !important;
}

body.framing-full-width .framing-controls .wc-side-label-row .col-sm-7 input {
  width: 100%;
}

body.framing-full-width .framing-controls .optional-pattern-offset-row {
  margin-top: var(--fc-space-sm) !important;
}

body.framing-full-width .framing-controls .form-check.my-2 {
  margin-top: var(--fc-space-xs) !important;
  margin-bottom: var(--fc-space-xs) !important;
}

body.framing-full-width .framing-controls .form-check.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body.framing-full-width .framing-controls .controls-section-title.mb-2,
body.framing-full-width .framing-controls > .d-flex.align-items-center.justify-content-between.mb-2 {
  margin-bottom: var(--fc-space-sm) !important;
}

body.framing-full-width .framing-controls .col-form-label {
  font-size: 0.83rem;
  line-height: 1.2;
  color: #b8b8b8;
}

body.framing-full-width .framing-controls .form-control,
body.framing-full-width .framing-controls .custom-select {
  height: calc(1.45rem + 2px);
  /* Pin min-height too — the global .form-control min-height (2.5rem) would
     otherwise win and leave these fields ~40px tall despite the compact height. */
  min-height: calc(1.45rem + 2px);
  padding: 0.14rem 0.34rem;
  font-size: 0.83rem;
}

body.framing-full-width .framing-controls .btn.btn-sm {
  height: calc(1.45rem + 2px);
  min-height: calc(1.45rem + 2px);
  padding: 0.12rem 0.36rem;
  font-size: 0.79rem;
}

body.framing-full-width .framing-controls .field-hint {
  font-size: 0.61rem;
  margin-bottom: 0.12rem;
}

body.framing-full-width .framing-controls .editable-slider-value {
  display: inline-block;
  min-width: 1.8rem;
  padding: 0 0.18rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: #e2e2e2;
  cursor: text;
}

body.framing-full-width .framing-controls .editable-slider-value:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--brand-focus-bg);
  color: #ffffff;
  box-shadow: 0 0 0 1px var(--brand-focus-soft);
}

body.framing-full-width .framing-controls input[type="range"],
body.framing-full-width .framing-controls .form-control-range {
  -webkit-appearance: none;
  appearance: none;
  height: 0.8rem;
  padding: 0;
  background: linear-gradient(
    to right,
    var(--brand) 0%,
    var(--brand) var(--range-pct, 0%),
    #6a6a6a var(--range-pct, 0%),
    #6a6a6a 100%
  );
  border-radius: 999px;
  overflow: hidden;
  cursor: pointer;
}

body.framing-full-width .framing-controls input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  background: transparent;
  border-radius: 999px;
}

body.framing-full-width .framing-controls input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -2px;
  border: 2px solid var(--brand);
  background: #ffffff;
  border-radius: 50%;
  box-shadow: none;
}

body.framing-full-width .framing-controls input[type="range"]::-moz-range-track {
  height: 8px;
  background: #6a6a6a;
  border-radius: 999px;
}

body.framing-full-width .framing-controls input[type="range"]::-moz-range-progress {
  height: 8px;
  background: var(--brand);
  border-radius: 999px;
}

body.framing-full-width .framing-controls input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 2px solid var(--brand);
  background: #ffffff;
  border-radius: 50%;
  box-shadow: none;
}

body.framing-full-width .framing-controls input[type="range"]:focus {
  outline: none;
}

.framing-preview {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-surface-overlay);
  padding: 0.75rem;
  position: sticky;
  top: 4.7rem;
  align-self: start;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}

.preview-hover-distance {
  position: absolute;
  z-index: 5;
  display: none;
  pointer-events: none;
  background: rgba(8, 8, 8, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #e3e3e3;
  padding: 0.2rem 0.4rem;
  font-size: 0.72rem;
  line-height: 1.35;
  white-space: pre-line;
  max-width: min(680px, 86vw);
}

body.framing-full-width .framing-preview {
  display: flex;
  border: 0;
  background: transparent;
  padding: 0;
  top: 0;
  height: 100%;
  max-height: none;
  overflow: hidden;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  min-height: 0;
  --fc-bottom-h: 10.8rem;
}

#chart_preview {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 78vh;
  display: block;
  image-rendering: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

body.framing-full-width #chart_preview {
  width: auto;
  height: auto;
  max-width: 100%;
  border: 0;
  /* Centered so the chart stays balanced as the drag handle shrinks it. */
  align-self: center;
  /* Reserved height below the canvas (controls + readout). The canvas ↔
     readout drag handle adjusts --fc-bottom-h; see initCanvasResizer. */
  max-height: calc(100% - var(--fc-bottom-h, 10.8rem));
}

.reticle-row-actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Compact borderless arrow buttons for reordering list items in the
   settings panes — mirrors DCTL Studio's .dctl-icon-btn. */
.icon-move-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 2px;
}
.icon-move-btn:hover:not(:disabled) { color: var(--text); }
.icon-move-btn:disabled { opacity: 0.32; cursor: default; }
.icon-move-btn i { pointer-events: none; }

.interior-rows {
  display: grid;
  gap: 0.75rem;
}

.interior-row {
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.6rem;
  background: rgba(24, 24, 24, 0.62);
}

.reticle-toggle-stack {
  display: grid;
  gap: 0.04rem;
  margin-bottom: 0.32rem;
}

.reticle-toggle-stack .form-check {
  margin-bottom: 0;
  min-height: 1.05rem;
}

.field-hint {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: #8d939c;
  text-transform: uppercase;
  margin-bottom: 0.18rem;
}

.color-compact {
  width: 4.4rem;
  min-width: 4.4rem;
  padding: 0.08rem;
}

.framing-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.preview-readout {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

.preview-readout-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: #a8a8a8;
}

.preview-readout-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-left: auto;
}

.project-menu-dropdown {
  display: inline-flex;
  align-items: center;
}

.project-menu-dropdown .dropdown-menu {
  background: var(--color-surface-overlay);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0.16rem 0;
  min-width: 10rem;
}

.project-menu-dropdown.dropup .dropdown-menu {
  top: auto !important;
  bottom: calc(100% + 0.24rem) !important;
  left: 0 !important;
  right: auto !important;
  margin: 0 !important;
  transform: none !important;
}

.project-menu-dropdown .dropdown-item {
  color: #e6e6e6;
  font-size: 0.8rem;
  line-height: 1.25;
  padding: 0.28rem 0.62rem;
  background: transparent;
}

.project-menu-dropdown .dropdown-item:hover,
.project-menu-dropdown .dropdown-item:focus {
  color: #ffffff;
  background: rgba(255, 31, 31, 0.18);
}

.project-menu-dropdown .dropdown-item:active {
  color: #ffffff;
  background: rgba(255, 31, 31, 0.24);
}

.project-menu-header {
  color: #aeb4bc;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding-top: 0.22rem;
  padding-bottom: 0.12rem;
}

.project-menu-load-list {
  max-height: min(11.5rem, 48vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.project-menu-load-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-menu-load-item.is-current {
  color: #ffffff;
  background: rgba(255, 31, 31, 0.24);
}

.project-menu-load-empty { padding: 0.35rem 1rem; color: #9aa0a8; font-size: 0.8rem; }

/* ── Tool-nav "Projects" dropdown ──────────────────────────────────────────────
   A dark button + custom (JS-toggled) menu placed in the top nav by tools that save
   and recall projects. Visually matches DCTL Studio's Projects menu (same tokens /
   dimensions), so any tool's Projects button looks and reads the same. */
.tool-projects { position: relative; }
/* Match DCTL Studio's nav "Projects" button exactly: the shared-ui raised button
   (dctl_studio.css `.dctl-btn`, the line-839 definition), not the old flat style. */
.tool-projects-btn {
  min-height: var(--app-button-height-sm);
  padding: var(--app-button-padding-y-sm) var(--app-button-padding-x-sm);
  border: 0;
  border-radius: var(--app-radius-button);
  background-color: var(--color-surface-raised);
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-surface-raised) 92%, white) 0%,
    var(--color-surface-raised) 50%,
    color-mix(in srgb, var(--color-surface-raised) 90%, black) 100%
  );
  background-size: 100% 200%;
  background-position: 0 0;
  color: var(--color-text-primary);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-display);
  font-size: var(--app-button-font-size-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-1);
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--app-button-gap);
  transition:
    background-color 150ms ease,
    background-position 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease,
    transform 100ms ease;
}
.tool-projects-btn:hover {
  background-color: var(--color-surface-raised);
  background-position: 0 50%;
  color: var(--color-text-primary);
  box-shadow: var(--shadow-md);
}
.tool-projects-btn:active {
  transform: translateY(1px);
  background-position: 0 100%;
  box-shadow: var(--shadow-xs);
}
.tool-projects-btn:focus-visible {
  outline: var(--app-focus-outline);
  outline-offset: var(--app-focus-offset);
}

/* Unified header-button styling — matches Codebook's .vp-navbtn across every
   tool's nav actions (DCTL Studio, Color Plotter, HDR Calculator, Framing,
   Slate, Longplay). Scoped to `.main-nav .nav-actions` and given 3-class
   specificity so it wins over each tool's own button rules regardless of the
   order its stylesheet loads. Active/disabled states stay tool-specific. */
.main-nav .nav-actions .vp-navbtn,
.main-nav .nav-actions .dctl-btn,
.main-nav .nav-actions .hdr-navbtn,
.main-nav .nav-actions .cp-btn,
.main-nav .nav-actions .tool-projects-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  padding: 6px 11px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-soft);
  background-image: none;
  box-shadow: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.2;
  white-space: nowrap;
}
.main-nav .nav-actions .vp-navbtn:hover,
.main-nav .nav-actions .dctl-btn:hover,
.main-nav .nav-actions .hdr-navbtn:hover,
.main-nav .nav-actions .cp-btn:hover,
.main-nav .nav-actions .tool-projects-btn:hover {
  border-color: var(--accent);
  background: var(--bg-soft);
  background-position: 0 0;
  box-shadow: none;
  transform: none;
}
/* These header buttons carry their own chevron icon, so drop Bootstrap's
   redundant dropdown-toggle caret to match Codebook's single-chevron look. */
.main-nav .nav-actions .tool-projects-btn.dropdown-toggle::after {
  display: none;
}

.tool-projects-menu {
  position: absolute; right: 0; top: calc(100% + 4px);
  background: var(--surface2); border: 1px solid var(--border-light);
  min-width: 320px; max-height: 80vh; overflow-y: auto;
  z-index: 30; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.tool-projects-menu[hidden] { display: none; }
.tool-projects-menu > button {
  display: flex; align-items: baseline; gap: 12px; width: 100%; text-align: left;
  background: none; border: none; color: var(--text-muted);
  padding: 5px 12px; font-size: 12px; line-height: 1.4; cursor: pointer; white-space: nowrap;
}
.tool-projects-menu > button:hover { background: var(--surface3); color: var(--text); }
.tool-menu-empty { padding: 9px 12px; font-size: 11px; color: var(--text-dim); }
.tool-proj-row { display: flex; align-items: stretch; border-top: 1px solid var(--border); }
.tool-proj-load {
  flex: 1 1 auto; min-width: 0; display: block; text-align: left;
  background: none; border: none; color: var(--text-muted);
  padding: 9px 12px; font-size: 12px; cursor: pointer;
}
.tool-proj-load:hover { background: var(--surface3); color: var(--text); }
.tool-proj-load .tool-proj-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-proj-load small { display: block; color: var(--text-dim); font-size: 10px; margin-top: 1px; }
.tool-proj-del {
  flex: none; background: none; border: none; border-left: 1px solid var(--border);
  color: var(--text-dim); padding: 0 11px; font-size: 12px; cursor: pointer;
}
.tool-proj-del:hover { background: var(--surface3); color: var(--text); }

#image_settings_readout {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  resize: none;
  overflow: auto;
  box-sizing: border-box;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.79rem;
  line-height: 1.3;
}

.fc-readout-copy-wrap {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.fc-readout-copy-wrap #image_settings_readout {
  padding-right: 2.35rem;
}

.fc-readout-copy-btn {
  position: absolute;
  top: 0.36rem;
  right: 0.36rem;
  z-index: 2;
}

.preview-export-row {
  flex: 0 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: max-content minmax(120px, 220px) auto 1fr;
  gap: 0.55rem;
  align-items: center;
  min-width: 0;
}

.preview-export-row label {
  font-size: 0.82rem;
  color: #a8a8a8;
  white-space: nowrap;
}

.preview-output-input {
  max-width: 200px;
}

.preview-toggle-group {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  min-width: 0;
  flex-wrap: wrap;
}

.preview-toggle-btn {
  min-width: 4.95rem;
}

.preview-toggle-btn.is-disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

/* Depressed (toggled-on) buttons read as "active" with a yellow highlight, app-wide —
   e.g. the Framing S3D / Print / Increment toggles. Matches the yellow DCTL Studio
   uses for Bypass / Waveform. (aria-pressed is set only on real toggle buttons.) */
.btn[aria-pressed="true"]:not(:disabled) {
  color: #1a1a1a;
  background: #e3b341;
  border-color: #e3b341;
}
.btn[aria-pressed="true"]:not(:disabled):hover,
.btn[aria-pressed="true"]:not(:disabled):focus {
  color: #1a1a1a;
  background: #f0c14b;
  border-color: #f0c14b;
}

.preview-seq-control {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.preview-seq-export {
  justify-self: start;
}

.preview-seq-input {
  width: 3.6rem;
  min-width: 3.6rem;
  max-width: 3.6rem;
}

.preview-seq-reset {
  min-width: 4.9rem;
}

.preview-compact-check {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.82rem;
  color: #a8a8a8;
  white-space: nowrap;
}

.preview-output-label {
  margin-right: -0.2rem;
}

.preview-btn-compact {
  min-width: 5.2rem;
  width: auto;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  justify-self: start;
}

.preview-compact-check .form-check-input[type="checkbox"] {
  margin-right: 0.38rem;
}

.preview-compact-check .form-check-label {
  color: #cfcfcf;
}

#export_reticle_dimensions_wrap.is-disabled {
  opacity: 0.62;
}

#export_reticle_dimensions_wrap.is-disabled {
  cursor: not-allowed;
}

.preview-compact-check .custom-select {
  min-width: 14rem;
  max-width: 19rem;
}

.preview-format-group {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  grid-column: 4;
  justify-self: end;
  margin-left: auto;
}

#export_format {
  width: 13rem;
  min-width: 13rem;
  max-width: 13rem;
}

.preview-export-row .btn {
  justify-self: end;
}

/* Preview-pane controls (export row inputs/selects + all preview buttons in the
   export row and readout actions) — compact to the same ~26px height as the
   settings pane and the DCTL Studio / Color Plotter reference. The global
   .form-control / .btn 40px min-height would otherwise win. */
.btn.preview-btn-compact,
.preview-export-row .form-control,
.preview-export-row .custom-select {
  height: calc(1.45rem + 2px);
  min-height: calc(1.45rem + 2px);
}
.preview-export-row .form-control,
.preview-export-row .custom-select {
  padding: 0.14rem 0.4rem;
  font-size: 0.83rem;
}
.btn.preview-btn-compact {
  padding-top: 0.08rem;
  padding-bottom: 0.08rem;
  font-size: 0.8rem;
}

.preview-seq-inline {
  flex: 0 0 auto;
}

.fade-up {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp 0.45s ease forwards;
}

.fade-delay-1 {
  animation-delay: 0.08s;
}

.fade-delay-2 {
  animation-delay: 0.14s;
}

.fade-delay-3 {
  animation-delay: 0.2s;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 991px) {
  .main-nav {
    gap: 0.7rem;
  }

  .nav-actions {
    justify-content: flex-end;
  }

  body.dctl-studio-page .main-nav {
    grid-template-columns: auto minmax(0, 1fr);
  }

  body.dctl-studio-page .nav-actions {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 0.1rem;
  }

  body.dctl-studio-page .dctl-nav-actions {
    flex: 0 0 auto;
  }

  .main-nav .tool-switcher-menu {
    width: min(680px, calc(100vw - 2rem));
  }

  /* Stack the feature-button columns above the category grid. */
  .tool-switcher-body {
    flex-direction: column;
  }

  .tool-switcher-featured {
    flex: 0 0 auto;
  }

  .tool-switcher-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-hero {
    text-align: center;
  }

  .home-logo img {
    max-width: 210px;
  }

  .form-group.row > [class*="col-sm-"],
  .row > [class*="col-sm-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  legend.col-form-label {
    margin-bottom: 0.35rem;
  }

  .choice-inline {
    flex-wrap: wrap;
    overflow: visible;
  }

  .file-input-wrap {
    flex-wrap: wrap;
    align-items: flex-start;
  }
}

.slate-layout {
  display: grid;
  grid-template-columns: minmax(290px, 360px) 1fr;
  gap: 1rem;
  align-items: stretch;
  height: 100%;
  flex: 1 1 auto;
  min-height: 0;
}

body.framing-full-width .slate-layout.mt-3 {
  margin-top: 5px !important;
}

.slate-controls {
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface-default);
  padding: 0.7rem;
  position: sticky;
  top: 0;
  align-self: stretch;
  max-height: 100%;
  overflow-y: auto;
  min-height: 0;
}

body.framing-full-width .slate-controls {
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: clip;
  overscroll-behavior-x: none;
  touch-action: pan-y;
}

.slate-controls .controls-section-title {
  font-size: 0.96rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.slate-controls .col-form-label {
  font-size: 0.81rem;
  color: #b8b8b8;
}

.slate-controls .form-control,
.slate-controls .custom-select {
  height: calc(1.45rem + 2px);
  /* Pin min-height too — the global .form-control min-height (2.5rem) would
     otherwise win and leave these fields ~40px tall despite the compact height. */
  min-height: calc(1.45rem + 2px);
  padding: 0.14rem 0.34rem;
  font-size: 0.83rem;
}

/* The compact control padding above (0.34rem all round) leaves no room for the
   .custom-select chevron and its 2.2rem highlight, so long option text ran under
   it. Reserve right padding on selects (only) in both compact-control contexts. */
body.framing-full-width .framing-controls .custom-select,
.slate-controls .custom-select {
  padding-right: var(--size-9);
}

/* The colour swatches were oversized (~70x40). Halve them. The 40px height came
   from the shared min-height on .form-control (the compact `height` above doesn't
   override min-height), so both are reset here. */
body.framing-full-width .framing-controls input.color-compact,
.slate-controls input.color-compact {
  width: 2.2rem;
  min-width: 2.2rem;
  height: 1.3rem;
  min-height: 1.3rem;
  padding: 0.05rem;
}

.slate-controls .btn.btn-sm {
  height: calc(1.45rem + 2px);
  min-height: calc(1.45rem + 2px);
  padding: 0.12rem 0.36rem;
  font-size: 0.79rem;
}

/* The Background image's "Choose File" comes from the global file-input
   enhancer (.file-input-button), which is chunkier than the image card's
   compact .slate-card-choose. Size it to match (doubled class beats
   vendor.css's .file-input-button.file-input-button). */
.slate-controls .file-input-button.file-input-button {
  height: calc(1.45rem + 2px);
  min-height: calc(1.45rem + 2px);
  padding: 0.12rem 0.5rem;
  font-size: 0.79rem;
}

.slate-controls hr {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin: 0.62rem 0;
}

.slate-action-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.28rem;
}

.slate-tab-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.slate-project-tabs {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.slate-project-tab {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: var(--color-surface-overlay);
  color: #d9d9d9;
  font-size: 0.75rem;
  line-height: 1.2;
  border-radius: var(--radius-md);
  padding: 0.22rem 0.5rem;
  cursor: pointer;
  max-width: 12.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slate-project-tab.is-active {
  border-color: #ff1f1f;
  color: #ffffff;
  background: #2a0f11;
}

.slate-preview {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  /* Reserved height below the canvas (controls + text editor). The
     canvas ↔ editor drag handle adjusts this; see initCanvasResizer. */
  --slate-bottom-h: 15rem;
}

#slate_preview {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100% - var(--slate-bottom-h, 15rem));
  align-self: center;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  image-rendering: auto;
  display: block;
}

/* Drag handle separating the canvas from the controls + text editor. */
.canvas-resizer {
  flex: 0 0 auto;
  align-self: stretch;
  width: 100%;
  height: 11px;
  margin: -3px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: row-resize;
  touch-action: none;
}
.canvas-resizer:focus-visible {
  outline: none;
}
.canvas-resizer-grip {
  width: 46px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
  transition: background-color 140ms ease, width 140ms ease;
}
.canvas-resizer:hover .canvas-resizer-grip,
.canvas-resizer:focus-visible .canvas-resizer-grip,
.canvas-resizer.dragging .canvas-resizer-grip {
  background: rgba(255, 255, 255, 0.5);
  width: 64px;
}

.slate-export-row {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
}

.slate-export-fields {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: nowrap;
  overflow: hidden;
  min-width: 0;
  white-space: normal;
}

.slate-export-fields > * {
  flex: 0 0 auto;
}

.slate-export-fields .preview-output-input {
  width: auto;
  min-width: 120px;
  flex: 1 1 180px;
}

.slate-export-fields .preview-format-group {
  width: 220px;
  min-width: 200px;
  flex: 0 1 220px;
  margin-left: auto;
  justify-content: flex-end;
}

.slate-export-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  flex-wrap: nowrap;
  overflow: visible;
  white-space: nowrap;
  width: 100%;
}

.slate-export-buttons > * {
  flex: 0 0 auto;
}

#load_project_file {
  display: none !important;
}

.slate-editor-readout {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.slate-editor-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.5rem;
}

.slate-editor-pane {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.slate-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: nowrap;
  font-size: 0.82rem;
}

.slate-editor-head-right {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: nowrap;
}

.slate-tab-label {
  color: #ffffff;
  font-weight: 600;
}

.slate-editor-tip {
  text-align: left;
  color: #8d939c;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1.3;
}

.slate-editor-copy-wrap {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

#slate_text_editor {
  flex: 1 1 auto;
  display: block;
  width: 100%;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  resize: none;
  overflow-y: auto !important;
  overflow-x: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  box-sizing: border-box;
  padding-right: 2.35rem;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.86rem;
  line-height: 1.3;
}

.slate-help-modal[hidden] {
  display: none !important;
}

.slate-help-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.slate-help-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}

.slate-help-dialog {
  position: relative;
  width: min(760px, 96vw);
  max-height: 86vh;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(16, 16, 16, 0.98);
  padding: 0.85rem;
}

.slate-help-content {
  font-size: 0.79rem;
  color: #d6d6d6;
  line-height: 1.35;
}

.slate-help-content pre {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #f2f2f2;
  font-size: 0.76rem;
  line-height: 1.3;
  padding: 0.5rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.slate-help-code-wrap {
  position: relative;
  margin: 0.35rem 0 0.68rem;
}

.slate-help-code-wrap pre {
  margin: 0;
  padding-right: 2.35rem;
}

.slate-copy-icon-btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius-sm);
  background: var(--color-surface-overlay);
  color: #cfd4dc;
  width: 1.62rem;
  height: 1.62rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease, opacity 140ms ease;
}

.slate-copy-icon-btn:hover,
.slate-copy-icon-btn:focus {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.54);
  background: rgba(15, 15, 15, 0.94);
  outline: none;
}

.slate-copy-icon-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 31, 31, 0.36);
}

.slate-copy-icon-btn[disabled] {
  cursor: default;
  opacity: 0.84;
}

.slate-copy-icon-btn i {
  width: 0.94rem;
  height: 0.94rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.86rem;
}

.slate-copy-icon-btn.is-copied {
  color: #ffffff;
  border-color: rgba(68, 210, 115, 0.64);
  background: rgba(15, 60, 28, 0.9);
}

.slate-copy-icon-btn.is-error {
  color: #ffffff;
  border-color: rgba(255, 73, 73, 0.66);
  background: rgba(78, 20, 20, 0.92);
}

.slate-help-copy-btn {
  position: absolute;
  top: 0.38rem;
  right: 0.38rem;
  z-index: 2;
}

.slate-editor-copy-btn {
  position: absolute;
  top: 0.36rem;
  right: 0.36rem;
  z-index: 2;
}

body.slate-help-open {
  overflow: hidden;
}

#audio_track_editor {
  flex: 1 1 auto;
  width: 100%;
  min-height: 12rem;
  resize: vertical;
  overflow: auto;
  box-sizing: border-box;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.86rem;
  line-height: 1.3;
}

#slate_text_editor.is-mono,
#audio_track_editor.is-mono {
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}

.slate-card-actions {
  display: flex;
  align-items: center;
  gap: 0.32rem;
  flex-wrap: wrap;
}

.slate-card-file-meta {
  display: block;
  margin-top: 0.2rem;
  color: #9d9d9d;
  font-size: 0.68rem;
  line-height: 1.2;
  word-break: break-word;
}

.slate-card-drop-hint {
  display: block;
  margin-top: 0.16rem;
  color: #8d939c;
  font-size: 0.66rem;
  line-height: 1.2;
}

.slate-card-row.is-drag-over {
  border-color: rgba(255, 31, 31, 0.86);
  box-shadow: inset 0 0 0 1px rgba(255, 31, 31, 0.4);
}

body.framing-full-width .slate-controls .interior-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--fc-col-gap, 0.52rem);
  align-content: start;
}

body.framing-full-width .slate-controls .interior-row > * {
  grid-column: 1 / -1;
}

body.framing-full-width .slate-controls .interior-row > .form-group.row.compact-slider-row {
  grid-column: auto;
  width: auto !important;
  max-width: none !important;
  margin: 0 0 var(--fc-space-sm, 0.36rem) 0 !important;
  display: block !important;
  align-items: initial !important;
}

@media (max-width: 1280px) {
  .slate-layout {
    grid-template-columns: minmax(290px, 360px) 1fr;
  }

  .slate-export-fields,
  .slate-export-buttons {
    gap: 0.4rem;
  }
}

@media (max-width: 767px) {
  .main-nav {
    align-items: start;
    padding: 0.36rem 0.65rem;
  }

  .main-nav .tool-switcher-toggle {
    font-size: 1rem;
  }

  .nav-tool-title {
    padding-top: 0.14rem;
  }

  .nav-tool-name {
    max-width: 100%;
    font-size: 0.9rem;
  }

  .nav-account-button {
    max-width: 2.35rem;
    padding: 0.18rem;
  }

  .nav-account-copy {
    display: none;
  }

  .main-nav .tool-switcher-menu {
    width: calc(100vw - 1.5rem);
    max-height: calc(100vh - 4.5rem);
    padding: var(--space-4);
  }

  /* Stack the three feature columns so the buttons stay full-width. */
  .tool-switcher-featured {
    flex-direction: column;
  }

  .tool-switcher-grid {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .page-shell {
    width: 94vw;
    margin-top: 1rem;
    padding: 0.5rem;
  }

  .content-panel {
    border-radius: var(--radius-lg);
    padding: 1rem;
  }

  .framing-chart-layout {
    grid-template-columns: 1fr;
  }

  .framing-preview {
    position: static;
  }

  .slate-layout {
    grid-template-columns: 1fr;
    height: 100%;
  }

  .slate-editor-stack {
    grid-template-columns: 1fr;
  }

  .slate-controls,
  .slate-preview {
    position: static;
    max-height: 100%;
    height: 100%;
  }

  .slate-export-fields,
  .slate-export-buttons {
    gap: 0.35rem;
  }

  #slate_preview {
    max-height: 56vh;
  }
}

/* ─── Full-bleed app and tool pages ───────────────────────────────────── */
body.dv-inspector-page .page-shell,
body.drp-inspector-page .page-shell,
body.dcp-inspector-page .page-shell,
body.dcp-keys-page .page-shell,
body.dctl-studio-page .page-shell,
body.bigcut-page .page-shell,
body.cdl-exporter-page .page-shell,
body.edl-dj-page .page-shell,
body.edl-diff-page .page-shell,
body.edl-processor-page .page-shell,
body.edl-strip-list-page .page-shell,
body.timecode-converter-page .page-shell,
body.longplay-converter-page .page-shell,
body.resolve-markers-generator-page .page-shell,
body.resolve-strip-list-page .page-shell,
body.markers-list-page .page-shell,
body.hdr-calc-page .page-shell {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Match the Resolve Project Inspector pane: a centred 1500px column. The shell
   above goes full-bleed so this inner container can centre at the same width as
   the inspector's #drp-app (max-width 1500px, padding 24px 28px). */
body.bigcut-page #bigcut,
body.cdl-exporter-page .tform,
body.edl-dj-page #edldj,
body.edl-diff-page #edld,
body.edl-processor-page .tform,
body.edl-strip-list-page .tform,
body.timecode-converter-page .tform,
body.longplay-converter-page .tform,
body.resolve-markers-generator-page .tform,
body.resolve-strip-list-page .tform,
body.markers-list-page .tform,
body.hdr-calc-page .hdr-shell {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 24px 28px;
  box-sizing: border-box;
}

body.dv-inspector-page .content-panel,
body.drp-inspector-page .content-panel,
body.dcp-inspector-page .content-panel,
body.dcp-keys-page .content-panel,
body.dctl-studio-page .content-panel,
body.bigcut-page .content-panel,
body.cdl-exporter-page .content-panel,
body.edl-dj-page .content-panel,
body.edl-diff-page .content-panel,
body.edl-processor-page .content-panel,
body.edl-strip-list-page .content-panel,
body.timecode-converter-page .content-panel,
body.longplay-converter-page .content-panel,
body.resolve-markers-generator-page .content-panel,
body.resolve-strip-list-page .content-panel,
body.markers-list-page .content-panel,
body.hdr-calc-page .content-panel {
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  flex: 1;
}

body.dv-inspector-page #main-content,
body.drp-inspector-page #main-content,
body.dcp-inspector-page #main-content,
body.dcp-keys-page #main-content,
body.dctl-studio-page #main-content,
body.bigcut-page #main-content,
body.cdl-exporter-page #main-content,
body.edl-dj-page #main-content,
body.edl-diff-page #main-content,
body.edl-processor-page #main-content,
body.edl-strip-list-page #main-content,
body.timecode-converter-page #main-content,
body.longplay-converter-page #main-content,
body.resolve-markers-generator-page #main-content,
body.resolve-strip-list-page #main-content,
body.markers-list-page #main-content,
body.hdr-calc-page #main-content {
  display: flex;
  flex-direction: column;
}

body.dv-inspector-page #dv-wrap,
body.drp-inspector-page #drp-wrap,
body.dcp-inspector-page #dcp-wrap,
body.dcp-keys-page #dcp-keys-wrap,
body.dctl-studio-page #dctl-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* DCTL Studio is viewport-locked: the window doesn't scroll. The flex chain
   gives #dctl-app the leftover height below the sticky navbar, so the app can
   keep its header + output fixed and scroll only the module list. min-height:0
   lets each flex child shrink below content size to enable that. */
body.dctl-studio-page { overflow: hidden; }
body.dctl-studio-page #wrapper { height: 100vh; overflow: hidden; }
body.dctl-studio-page #main-content,
body.dctl-studio-page .page-shell,
body.dctl-studio-page .content-panel,
body.dctl-studio-page #dctl-wrap { min-height: 0; }
@media (max-width: 1100px) {
  body.dctl-studio-page { overflow: auto; }
  body.dctl-studio-page #wrapper { height: auto; min-height: 100vh; overflow: visible; }
}

/* ─── Licenses page (/licenses) ─────────────────────────────── */
.licenses-page {
  max-width: 820px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-9);
  color: var(--text);
}
.licenses-page h1 { font-size: 1.5rem; margin: 0 0 var(--space-3); }
.licenses-page h2 { font-size: 1.1rem; margin: var(--space-7) 0 var(--space-3); }
.licenses-page h3 { font-size: 0.95rem; margin: var(--space-5) 0 var(--space-2); color: var(--text-muted); }
.licenses-intro { color: var(--text-muted); line-height: 1.5; margin: 0 0 var(--space-4); }
.license-list { list-style: none; padding: 0; margin: 0; }
.license-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
}
.license-list li > a:first-child { font-weight: 600; color: var(--text); }
.license-ver { color: var(--text-dim); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.license-tag {
  font-size: 0.72rem;
  letter-spacing: 0.3px;
  padding: 1px 7px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  color: var(--text-muted);
  white-space: nowrap;
}
.license-copy { flex: 1 1 100%; color: var(--text-dim); font-size: 0.82rem; }
.license-copy a { color: var(--text-muted); }
.license-text {
  white-space: pre-wrap;
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: var(--space-4);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-muted);
  overflow-x: auto;
}
.licenses-note { color: var(--text-dim); font-size: 0.85rem; line-height: 1.5; margin-top: var(--space-4); }
.licenses-note a { color: var(--text-muted); }
.vv-signin-button {
  align-items: center;
  display: inline-flex;
  gap: 0.6rem;
}

.vv-signin-button img {
  height: 1.35rem;
  width: auto;
}