/* sentence.css — sentence-mode chrome (P4): the . ? ! end buttons and the sentence
   list. The chip line and capture tools are styled by line.css (the shared LineEditor).
   No new colour values: the end buttons are black on white like any act control, the
   focused sentence in the list is filled with --ink, an empty one wears the calm slate. */

.sentence-mode {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

/* ---- the . ? ! buttons: the only punctuation in the app ---- */
.sentence-ends {
  display: flex;
  gap: 12px;
}
.sentence-end-btn {
  flex: 1;
  min-height: var(--control-min);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
}
.sentence-end-btn:disabled { opacity: 0.4; box-shadow: none; }

/* ---- the sentence list: move focus between sentences ---- */
.sentence-nav { display: flex; flex-direction: column; gap: 8px; }
.sentence-nav-label {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--calm-text);
}
.sentence-nav-list { display: flex; flex-direction: column; gap: 8px; }
.sentence-nav-item {
  min-height: var(--control-min);
  padding: 12px 16px;
  text-align: left;
  font-family: var(--font-body);
  font-size: 18px;
  background: var(--panel);
  border: var(--border-width) solid var(--ink);
  border-radius: var(--radius);
}
.sentence-nav-item.focused {
  background: var(--ink);
  color: var(--panel);
}
.sentence-nav-item.empty {
  background: var(--calm);
  color: var(--calm-text);
  font-style: italic;
}
.sentence-nav-item.focused.empty {
  background: var(--calm-text);
  color: var(--panel);
  font-style: normal;
}

@media (min-width: 600px) {
  .sentence-nav-item { font-size: 20px; }
}