/* Line 16012 (edit-bay-eb03-cuts-captions-r1): social clips and captions on the Google path. Colours only from
   public/css/ns-tokens.css (dark by default, light under prefers-color-scheme: light); 375 px first. The level on
   <body data-level> reveals the advanced (.eb-adv) and expert (.eb-exp) controls over the same project. */
.ebc { display: grid; gap: 16px; margin-top: 16px; }
.ebc-block { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--ns-border); min-width: 0; }
.ebc h3 { margin: 0; color: var(--ns-text); font-size: 16px; }
.ebc-len { display: inline-flex; border: 1px solid var(--ns-border-strong); border-radius: 22px; overflow: hidden; }
.ebc-len button { min-height: 40px; padding: 0 12px; border: 0; background: transparent; color: var(--ns-text); cursor: pointer; font: inherit; }
.ebc-len button[aria-checked="true"] { background: var(--ns-gold); color: var(--ns-on-accent); font-weight: 500; }
.ebc-notes { margin: 0; min-height: 1.2em; font-size: 14px; color: var(--ns-text-2); }
.ebc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ebc-clip { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--ns-border); border-radius: var(--ns-radius); background: var(--ns-card); min-width: 0; }
.ebc-quote { margin: 0; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.ebc-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--ns-text-2); }
.ebc-chip { display: inline-block; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--ns-border-strong); font-size: 12px; }
.ebc-chip--strong { border-color: var(--ns-gold); color: var(--ns-gold); font-weight: 700; }
.ebc-why { margin: 0; font-size: 13px; }
.ebc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ebc-actions .eb-primary { width: auto; min-height: 40px; padding: 0 18px; }
.ebc-play video { display: block; width: 100%; max-height: 40vh; border-radius: var(--ns-radius); background: var(--ns-bg-deep); }
.eb-adv-inline { display: none; }
.eb[data-level="advanced"] .eb-adv-inline, .eb[data-level="expert"] .eb-adv-inline { display: inline-flex; align-items: center; }

.ebc-files { display: inline-flex; gap: 6px; }
.ebc-file { display: inline-flex; align-items: center; text-decoration: none; font-size: 14px; }
.ebc-status { margin: 0; font-size: 14px; }
.ebc-status.ebc-warn { color: var(--ns-gold); }
.ebc-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.ebc label { display: grid; gap: 4px; font-size: 13px; color: var(--ns-text-2); }
.ebc select, .ebc input[type="text"], .ebc input[type="number"], .ebc textarea {
    min-height: 40px; padding: 6px 10px; border: 1px solid var(--ns-border-strong); border-radius: 10px; background: var(--ns-card); color: var(--ns-text); font: inherit; max-width: 100%; }
.ebc-source select { min-width: 180px; }
.ebc-paste summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; color: var(--ns-text); }
.ebc-paste textarea { width: 100%; min-height: 96px; resize: vertical; margin: 6px 0; }
.ebc-style { flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.ebc label.ebc-burn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: var(--ns-text); }
.ebc-burn input { width: 20px; height: 20px; accent-color: var(--ns-gold); }

.ebc-words { display: flex; flex-wrap: wrap; gap: 4px; max-height: 240px; overflow-y: auto; padding: 8px; border: 1px solid var(--ns-border); border-radius: var(--ns-radius); background: var(--ns-bg-deep); }
.ebc-w { min-height: 32px; padding: 2px 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ns-text); font: inherit; cursor: pointer; }
.ebc-w:hover { border-color: var(--ns-border-strong); }
.ebc-w[aria-selected="true"] { background: var(--ns-gold); color: var(--ns-on-accent); }
.ebc-break { align-self: center; color: var(--ns-gold); font-size: 12px; padding: 0 2px; }
.ebc-inspector { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 8px; }
.ebc-inspector .ebc-wide { flex: 1 1 100%; }
.ebc-inspector .ebc-wide input { width: 100%; }
.ebc-inspector input[type="number"] { width: 110px; }

.ebc-overlay { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); z-index: 3; max-width: 90%; margin: 0; padding: 4px 10px;
    text-align: center; font: 700 clamp(14px, 3.4vw, 22px)/1.3 var(--ns-font); color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; pointer-events: none; }
.ebc-overlay--bold { color: #ff0; font-size: clamp(16px, 4.2vw, 28px); }
.ebc-overlay--boxed { background: rgba(0, 0, 0, .6); border-radius: 6px; text-shadow: none; }
.ebt-screen, .eb-preview { position: relative; }

@media (min-width: 768px) {
    .ebc-inspector .ebc-wide { flex-basis: 320px; }
}