/* ── Screenplay register: dialogue lines, cast chips, speaker menu ──
   Loaded after views.css. Uses the e-konte palette (--ek-* on .ek-document)
   and ek- names only, like the rest of the sheet. */

/* ── Dialogue lines on a shot ── */

.ek-dlg {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ek-dlg-line {
  position: relative;
  padding-right: 14px;
}

.ek-dlg-name {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 16px;
  padding: 0 5px;
  margin: 0 0 2px;
  border-radius: 2px;
  border: 1px solid var(--ek-grid);
  border-left-width: 3px;
  background: #fff;
  color: var(--ek-ink);
  cursor: pointer;
}

.ek-dlg-name:hover {
  border-color: var(--ek-blue);
}

.ek-dlg-name--empty {
  color: var(--ek-ink-faint);
  font-weight: 400;
  text-transform: none;
  border-style: dashed;
}

.ek-dlg-name--static {
  cursor: default;
}

.ek-dlg-paren {
  display: inline-block;
  font-size: 10px;
  font-style: italic;
  color: var(--ek-blue);
  margin-left: 4px;
  min-width: 1em;
}

/* An empty direction stays out of the way until the line is hovered or it
   has focus (opacity, not display: the focus restore must be able to land). */
.ek-dlg-paren:empty {
  opacity: 0;
}

.ek-dlg-line:hover .ek-dlg-paren:empty,
.ek-dlg-paren:focus {
  opacity: 1;
}

.ek-dlg-text {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ek-ink);
}

.ek-dlg-jp {
  font-family: 'Noto Serif JP', serif;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ek-ink);
}

.ek-dlg--compact .ek-dlg-jp {
  font-size: 12px;
}

.ek-dlg-line--beat .ek-dlg-beat {
  font-size: 11px;
  font-style: italic;
  color: var(--ek-ink-light);
}

.ek-dlg-x {
  position: absolute;
  top: 0;
  right: 0;
  border: none;
  background: none;
  color: var(--ek-ink-faint);
  cursor: pointer;
  font-size: 12px;
  line-height: 16px;
  padding: 0 2px;
  opacity: 0;
}

.ek-dlg-line:hover .ek-dlg-x {
  opacity: 1;
}

.ek-dlg-x:hover {
  color: var(--ek-red);
}

/* Add chips under the lines: + EMI · + KENJI · + beat · + … */

.ek-dlg-add {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.ek-dlg-chip {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.5px;
  padding: 1px 6px;
  border-radius: 2px;
  border: 1px dashed var(--ek-grid);
  background: transparent;
  color: var(--ek-ink-faint);
  cursor: pointer;
}

.ek-dlg-chip:hover {
  color: var(--ek-blue);
  border-color: var(--ek-blue);
}

.ek-dlg-chip--beat {
  font-style: italic;
}

/* ── Speaker menu (a row menu anchored under the cue) ── */

.ek-speaker-menu {
  top: 100%;
  left: 0;
  right: auto;
  min-width: 180px;
}

.ek-speaker-menu__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

/* ── Slug line fields (INT./EXT. · LOCATION – TIME) ── */

.ek-scene-slug {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.ek-scene-intext {
  font: inherit;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
}

.ek-scene-location,
.ek-scene-tod {
  text-transform: uppercase;
}

.ek-scene-slug__dash {
  color: var(--ek-ink-faint);
}

.ek-scene-tod-pick {
  border: none;
  background: transparent;
  color: var(--ek-ink-faint);
  cursor: pointer;
  font-size: 10px;
  padding: 0 2px;
}

.ek-scene-tod-pick:hover {
  color: var(--ek-blue);
}

.ek-scene-slug--dark,
.ek-scene-slug--dark .ek-editable,
.ek-scene-slug--dark .ek-scene-intext {
  color: var(--ek-paper);
}

.ek-scene-slug--dark .ek-scene-slug__dash,
.ek-scene-slug--dark .ek-scene-tod-pick {
  color: rgba(255, 255, 255, 0.5);
}

.ek-scene-slug--dark .ek-editable:empty::before {
  color: rgba(255, 255, 255, 0.4);
}

.ek-scene-slug--dark .ek-scene-intext option {
  color: var(--ek-ink);
}

/* ── Lock ── */

.ek-scene-lock {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border: 1px solid var(--ek-grid);
  border-radius: 2px;
  background: #fff;
  color: var(--ek-ink-light);
  cursor: pointer;
  white-space: nowrap;
}

.ek-scene-lock:hover {
  background: var(--ek-highlight);
}

.ek-scene-lock--on {
  background: var(--ek-ink);
  color: var(--ek-paper);
  border-color: var(--ek-ink);
}

/* ── E-konte / board scene header additions ── */

.ek-section-header__left,
.ek-section-header__right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ek-section-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--ek-paper);
  opacity: 0.6;
}

.ek-section-titles {
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
}

.ek-section-range {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--ek-paper);
  opacity: 0.75;
}

.ek-section-header .ek-editable:focus {
  color: var(--ek-ink) !important;
}

.ek-section-header .ek-scene-lock {
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 0.3);
}

.ek-section-header .ek-scene-lock--on {
  background: var(--ek-paper);
  color: var(--ek-ink);
  border-color: var(--ek-paper);
}

.ek-section-delete:disabled {
  opacity: 0.25;
  cursor: default;
}

/* ── Compact episode head (Scenes / Script) ── */

.ek-episode-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 4px 0 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ek-ink);
}

.ek-episode-head__title {
  font-family: 'Spectral', Georgia, serif;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--ek-ink);
  margin: 0;
}

.ek-episode-head__meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--ek-ink-light);
  margin-top: 4px;
}

/* ── Scene strip (one scene scoped) ── */

.ek-scene-strip {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 4px 0 16px;
}

.ek-scene-strip__select {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  padding: 4px 6px;
  border: 1px solid var(--ek-grid);
  background: #fff;
  color: var(--ek-ink);
  max-width: 480px;
}

.ek-toolbar__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ── Export menu (toolbar) ── */

.ek-export-menu {
  top: 30px;
  right: auto;
  min-width: 230px;
}

/* ── Scenes overview ── */

.ek-scenes-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

.ek-scenes-count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--ek-ink-light);
}

.ek-scenes-tools {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ek-scenes-empty {
  padding: 24px;
  text-align: center;
  color: var(--ek-ink-faint);
  font-style: italic;
}

.ek-scenes-list {
  background: var(--ek-paper);
  border: 2px solid var(--ek-ink);
}

.ek-scene-row {
  display: grid;
  grid-template-columns: 64px 1fr 170px 170px;
  border-bottom: 1px solid var(--ek-grid);
}

.ek-scene-row:last-child {
  border-bottom: none;
}

.ek-scene-row > div {
  padding: 10px;
  border-right: 1px solid var(--ek-grid);
}

.ek-scene-row > div:last-child {
  border-right: none;
}

.ek-scene-row--locked {
  background: rgba(232, 224, 208, 0.45);
}

.ek-scene-row__order {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--ek-paper-dark);
}

.ek-scene-num {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: 14px;
  color: var(--ek-ink);
}

.ek-scene-grip {
  cursor: grab;
  color: var(--ek-ink-faint);
}

.ek-scene-move {
  border: 1px solid var(--ek-grid);
  background: #fff;
  color: var(--ek-ink-light);
  font-size: 10px;
  line-height: 14px;
  padding: 0 5px;
  cursor: pointer;
  border-radius: 2px;
}

.ek-scene-move:disabled {
  opacity: 0.3;
  cursor: default;
}

.ek-scene-row__main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ek-scene-titles {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.ek-scene-title-jp {
  font-family: 'Noto Serif JP', serif;
  font-size: 13px;
}

.ek-scene-title-en {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ek-ink-light);
}

.ek-scene-synopsis {
  font-size: 12px;
  line-height: 1.6;
  color: var(--ek-ink);
}

.ek-scene-row__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--ek-ink-light);
}

.ek-scene-status {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 1px 6px;
  width: max-content;
  cursor: pointer;
}

.ek-scene-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: flex-start;
  align-content: flex-start;
}

.ek-scene-open,
.ek-scene-delete {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border: 1px solid var(--ek-grid);
  border-radius: 2px;
  background: #fff;
  color: var(--ek-ink-light);
  cursor: pointer;
}

.ek-scene-open {
  border-color: var(--ek-ink);
  color: var(--ek-ink);
}

.ek-scene-open:hover {
  background: var(--ek-highlight);
}

.ek-scene-delete:hover {
  color: var(--ek-red);
  border-color: var(--ek-red);
}

.ek-scene-delete:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Cards */

.ek-scene-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  background: var(--ek-paper-dark);
  border: 2px solid var(--ek-ink);
  min-height: 200px;
}

.ek-scene-card {
  width: 240px;
  background: #fff;
  border: 1px solid var(--ek-grid);
  box-shadow: 2px 3px 0 rgba(42, 37, 32, 0.12);
  padding: 10px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}

.ek-scene-card--locked {
  border-style: dashed;
  border-color: var(--ek-ink-light);
  background: var(--ek-paper);
}

.ek-scene-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ek-scene-card__handle {
  cursor: grab;
  color: var(--ek-ink-faint);
}

.ek-scene-card__lock {
  margin-left: auto;
  font-size: 12px;
}

.ek-scene-card__heading {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--ek-ink);
}

.ek-scene-card__title {
  font-family: 'Noto Serif JP', serif;
  font-size: 12px;
  color: var(--ek-ink-light);
}

.ek-scene-card .ek-scene-synopsis {
  min-height: 3.2em;
}

.ek-scene-card__foot {
  display: flex;
  justify-content: space-between;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: var(--ek-ink-faint);
  border-top: 1px dotted var(--ek-grid);
  padding-top: 6px;
}

.ek-scene-card .ek-scene-tools {
  opacity: 0;
  transition: opacity 100ms;
}

.ek-scene-card:hover .ek-scene-tools,
.ek-scene-card:focus-within .ek-scene-tools {
  opacity: 1;
}

/* ── Script view ── */

.ek-script {
  font-family: 'Courier Prime', 'Courier New', Courier, monospace;
  font-size: 12pt;
  line-height: 1.35;
  color: #111;
  background: #fff;
  border: 1px solid var(--ek-grid);
  box-shadow: 2px 3px 0 rgba(42, 37, 32, 0.12);
  padding: 40px 56px 40px 48px;
  max-width: 820px;
  margin: 0 auto 24px;
}

.ek-script-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--ek-ink-faint);
  margin: -16px 0 24px;
}

.ek-script-toolbar__toggles {
  display: flex;
  gap: 6px;
}

.ek-script-empty {
  text-align: center;
  color: var(--ek-ink-faint);
  font-style: italic;
}

.ek-script-scene {
  margin-bottom: 28px;
}

.ek-script-scene__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 8px;
}

.ek-script-scene__num {
  min-width: 28px;
  color: var(--ek-ink-faint);
  font-weight: 400;
}

.ek-script-scene__head .ek-scene-slug {
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  letter-spacing: 0;
}

.ek-script-scene__meta {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  text-transform: none;
  color: var(--ek-ink-faint);
}

.ek-script-scene__titles {
  margin-left: 40px;
  display: flex;
  gap: 10px;
  font-size: 10pt;
  color: var(--ek-ink-light);
}

.ek-script-scene__en {
  text-transform: uppercase;
  letter-spacing: 1px;
}

.ek-script-scene__jp {
  font-family: 'Noto Serif JP', serif;
}

.ek-script-synopsis {
  margin: 4px 0 8px 40px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 11px;
  font-style: italic;
  color: var(--ek-ink-faint);
}

.ek-script-rows {
  display: flex;
  flex-direction: column;
}

.ek-script-row {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 0 8px;
  padding: 6px 0;
  position: relative;
}

.ek-script-gutter {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--ek-ink-faint);
  padding-top: 3px;
  user-select: none;
}

.ek-script-gutter__num {
  font-size: 12px;
  font-weight: 600;
  color: var(--ek-ink-light);
}

.ek-script-gutter__tag {
  font-size: 9px;
  letter-spacing: 1px;
}

.ek-script-gutter__dur .ek-duration-seconds {
  font-size: 9px;
  min-width: 1.5em;
  text-align: right;
  font-family: 'IBM Plex Mono', monospace;
}

.ek-script-gutter__grip,
.ek-script-gutter__menu,
.ek-script-gutter__x {
  opacity: 0;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--ek-ink-faint);
  font-size: 11px;
  padding: 0;
  font-family: 'IBM Plex Mono', monospace;
}

.ek-script-row:hover .ek-script-gutter__grip,
.ek-script-row:hover .ek-script-gutter__menu,
.ek-script-row:hover .ek-script-gutter__x,
.ek-script-row:focus-within .ek-script-gutter__menu {
  opacity: 1;
}

.ek-script-gutter__grip {
  cursor: grab;
}

.ek-script-gutter__x:hover {
  color: var(--ek-red);
}

.ek-script-frame {
  width: 40px;
  margin-top: 4px;
}

.ek-script-shot__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ek-script-action {
  white-space: pre-wrap;
}

/* Dialogue in screenplay layout: cue centred-ish, text indented */

.ek-script .ek-dlg {
  gap: 8px;
  margin: 2px 0;
}

.ek-script .ek-dlg-line {
  padding-left: 120px;
  padding-right: 100px;
}

.ek-script .ek-dlg-line--beat {
  padding-left: 0;
}

.ek-script .ek-dlg-name {
  display: block;
  width: max-content;
  margin: 0 0 0 96px;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  letter-spacing: 0;
  border-color: transparent;
  border-left-width: 3px;
  background: transparent;
  padding: 0 4px;
  line-height: 1.35;
}

.ek-script .ek-dlg-name:hover {
  border-color: var(--ek-grid);
}

.ek-script .ek-dlg-name--empty {
  border-style: dashed;
  border-color: var(--ek-grid);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
}

.ek-script .ek-dlg-paren {
  display: block;
  margin-left: 60px;
  font-size: inherit;
  font-style: normal;
  color: #111;
}

.ek-script .ek-dlg-text {
  font-size: inherit;
  line-height: 1.35;
  color: #111;
}

.ek-script .ek-dlg-jp {
  font-size: 11pt;
  color: var(--ek-ink-light);
}

.ek-script .ek-dlg-line--beat .ek-dlg-beat {
  font-size: inherit;
  font-style: normal;
  color: #111;
}

.ek-script .ek-dlg-x {
  right: 80px;
}

/* Sound cues and breathing spaces */

.ek-script-cue__label {
  font-weight: 700;
}

.ek-script-beat {
  text-align: center;
  color: var(--ek-ink-light);
}

.ek-script-beat .ek-duration-seconds {
  display: inline-block;
  min-width: 1.5em;
  font-family: inherit;
}

/* Inline strip at the end of a shot */

.ek-script-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  opacity: 0.35;
  transition: opacity 120ms;
  margin-top: 2px;
}

.ek-script-row:hover .ek-script-strip,
.ek-script-row:focus-within .ek-script-strip,
.ek-script-scene > .ek-script-strip {
  opacity: 1;
}

.ek-script-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.3px;
  padding: 2px 8px;
  border: 1px solid var(--ek-grid);
  border-radius: 2px;
  background: #fff;
  color: var(--ek-ink-light);
  cursor: pointer;
  white-space: nowrap;
}

.ek-script-btn:hover {
  border-color: var(--ek-blue);
  color: var(--ek-blue);
}

.ek-script-btn--primary {
  border-color: var(--ek-ink);
  color: var(--ek-ink);
}

.ek-script-chip {
  border-style: dashed;
  text-transform: uppercase;
}

.ek-script-sep {
  width: 1px;
  height: 16px;
  background: var(--ek-grid);
  margin: 0 4px;
}

/* Writing bar — sticky at the bottom of the scrolling content */

.ek-script-bar {
  position: sticky;
  bottom: 0;
  z-index: 30;
  margin: 16px -20px -20px;
  padding: 10px 20px 8px;
  background: var(--ek-paper);
  border-top: 2px solid var(--ek-ink);
  box-shadow: 0 -4px 12px rgba(42, 37, 32, 0.08);
}

.ek-script-bar__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.ek-script-bar .ek-script-btn {
  font-size: 11px;
  padding: 4px 10px;
}

.ek-script-bar__hint {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: var(--ek-ink-faint);
  margin-top: 6px;
}

.ek-script-bar .ek-row-menu {
  top: auto;
  bottom: calc(100% + 4px);
  left: 0;
  right: auto;
}

.ek-script-menu {
  top: 20px;
  left: 0;
  right: auto;
  min-width: 200px;
}

/* ── Versions panel ── */

.ek-toolbar__btn--dim {
  opacity: 0.5;
}

.ek-versions__hint {
  font-size: 12px;
  line-height: 1.5;
  color: var(--nf-text-muted);
  margin: 0 0 12px;
}

.ek-versions__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.ek-versions__table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--nf-border);
  vertical-align: middle;
}

.ek-versions__table td:first-child {
  font-family: 'IBM Plex Mono', monospace;
  white-space: nowrap;
}

.ek-versions__reason {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 2px;
  background: var(--nf-bg-hover);
  color: var(--nf-text-muted);
}

.ek-versions__reason--manual {
  background: var(--nf-accent-muted);
  color: var(--nf-accent-deep);
}

.ek-versions__reason--restore {
  background: #f3e6c6;
  color: #8a6420;
}

.ek-versions__title {
  color: var(--nf-text);
}