/* Toolbar + alert strip shown above the form when it is opened from the home page. */
.appbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 10px max(16px, calc((100% - 1100px) / 2 + 12px));
  background: #fff;
  border-bottom: 1px solid #d9dde5;
}
.appbar .spacer { flex: 1; }
.appbar .back {
  display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px 6px 8px;
  border-radius: 999px; color: #2457d6; background: #eef2fd; text-decoration: none; font-weight: 600;
}
.appbar .back { transition: background-color .12s; }
.appbar .back:hover { background: #d3dffa; }
.appbar .who { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.appbar .inc b { color: #2457d6; font-size: 16px; }
.pill {
  padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .3px;
  background: #fff1d6; color: #9a5b00;
}
.pill[data-signed="true"] { background: #d9f5e8; color: #0b7a4e; }
.save-state { font-size: 12px; color: #6b7a90; }
.save-state.dirty { color: #b86e00; font-weight: 600; }
.save-state.err { color: #c62b3b; font-weight: 600; }
.btn {
  font: inherit; font-weight: 600; padding: 7px 16px; border-radius: 10px; cursor: pointer;
  border: 1px solid #c5cbd6; background: #fff; color: #0f1b2d; transition: background-color .12s;
}
.btn:hover { background: #e8edf6; }
.btn.primary { background: #2457d6; border-color: #2457d6; color: #fff; }
.btn.primary:hover { background: #1b44ad; border-color: #1b44ad; }
.btn.record { display: inline-flex; align-items: center; gap: 6px; color: #08714e; border-color: #9dd8c1; }
.btn.record[data-state="recording"] { color: #fff; background: #c52c3b; border-color: #c52c3b; }
.btn:disabled { opacity: .55; cursor: progress; }
.test-audio-import { display: flex; }
body.transcript-open { margin-right: min(440px, 40vw); transition: margin-right .18s ease; }
.transcript-sidebar {
  position: fixed; z-index: 30; top: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 10px;
  box-sizing: border-box; width: min(440px, 40vw); padding: 18px;
  background: #fff; border-left: 1px solid #d9dde5;
  box-shadow: -8px 0 28px rgba(15, 27, 45, .16);
}
.transcript-sidebar[hidden] { display: none; }
.transcript-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.transcript-heading h2 { margin: 0; font-size: 18px; }
.transcript-heading-actions { display: flex; align-items: center; gap: 8px; }
.transcript-stop-record[hidden] { display: none; }
.transcript-status { margin: 0; color: #536176; font-size: 13px; }
.transcript-label { font-size: 12px; font-weight: 700; color: #536176; }
.transcript-sidebar textarea {
  box-sizing: border-box; width: 100%; min-height: 120px; flex: 1; resize: vertical;
  padding: 10px; border: 1px solid #c5cbd6; border-radius: 8px;
  font: inherit; font-size: 14px; line-height: 1.5;
}
.transcript-review {
  max-height: 32vh; overflow: auto; padding: 10px; border-radius: 8px;
  background: #f4f6fa; white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: 13px; line-height: 1.5;
}
.transcript-review:empty { display: none; }
.transcript-review mark { background: #ffe59a; color: #573c00; border-radius: 3px; cursor: pointer; }
.transcript-review mark:hover { background: #ffd45e; }
.transcript-note { margin: 0; color: #6b7a90; font-size: 11px; }
.transcript-close { flex: none; }

.alerts {
  width: min(1100px, 100% - 24px); margin: 12px auto -4px; padding: 10px 14px;
  background: #fff; border-radius: 10px; border-left: 4px solid #e08a00;
  border: 1px solid #d9dde5; border-left: 4px solid #e08a00; font-size: 13px;
}
.alerts h4 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: #6b7a90; }
.alerts ul { margin: 0 0 6px; padding-left: 18px; }
.alerts li.warn { color: #9a5b00; }
.alerts li.proto { color: #1d46c4; }
.alerts li small { color: #6b7a90; }

@media (max-width: 640px) {
  .appbar { flex-wrap: wrap; gap: 8px; }
  .appbar .who { order: 3; width: 100%; }
  .save-state { display: none; }
  body.transcript-open { margin-right: 8px; }
  .transcript-sidebar { width: min(440px, 100vw); padding: 14px; }
}
@media (prefers-color-scheme: dark) { /* form sheets stay paper-white; only the bar adapts */
  .appbar { background: #141a26; border-color: #2b3445; color: #e7ecf5; }
  .appbar .back { background: #1c2740; color: #8fb0ff; }
  .transcript-sidebar { background: #141a26; border-color: #2b3445; color: #e7ecf5; }
  .transcript-review { background: #1c2433; }
  .transcript-sidebar textarea { background: #1c2433; color: #e7ecf5; border-color: #3a4558; }
  .transcript-status, .transcript-label, .transcript-note { color: #aab5c7; }
  .btn { background: #1c2433; color: #e7ecf5; border-color: #3a4558; }
  .btn:hover { background: #141a26; }
  .btn.primary { background: #2457d6; border-color: #2457d6; color: #fff; }
  .btn.primary:hover { background: #1b44ad; border-color: #1b44ad; }
}