/* These styles are generated from project.scss. */

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

/* iOS Ink palette */
:root { --note-ink: #244e45; --note-border: #e4e9e6; }
.record-container { display: flex; flex-direction: column; align-items: center; min-height: 70vh; padding-top: clamp(2rem, 8vh, 5rem); }
#recordButton { padding: 16px 32px; border-radius: 999px; font-size: 1.05rem; font-weight: 600; background: var(--note-ink); border-color: var(--note-ink); }
#recordButton:hover { background: #193b33; }
#recordButton.is-recording { background: #a13c36; border-color: #a13c36; }
#timeElapsed { font-variant-numeric: tabular-nums; color: #6c757d; }
#visualizer { display: flex; justify-content: center; align-items: center; gap: 2px; width: min(420px, 100%); height: 80px; }
#visualizer .bar { flex: 1; height: 2px; border-radius: 2px; background: var(--note-ink); }
.notes-library, .note-detail { max-width: 850px; margin: 1.5rem auto 4rem; }
.notes-library a, .note-detail a { color: var(--note-ink); text-underline-offset: 3px; }
.note-list-item { padding: 1.25rem 0; border-bottom: 1px solid var(--note-border); }
.note-list-item > a { font-size: 1.2rem; font-weight: 600; text-decoration: none; }
.note-list-item > a:hover { text-decoration: underline; }
.note-list-item .text-muted { font-size: .95rem; }
.note-date { font-size: .8rem; color: #6c757d; margin: .3rem 0 1rem; }
.note-actions { position: relative; flex-shrink: 0; }
.note-actions summary { list-style: none; cursor: pointer; border: 1px solid var(--note-border); border-radius: 50%; width: 42px; height: 42px; display: grid; place-items: center; color: var(--note-ink); }
.note-actions summary::-webkit-details-marker { display: none; }
.note-actions-menu { position: absolute; right: 0; top: 48px; width: 190px; background: white; border: 1px solid var(--note-border); border-radius: 12px; padding: 6px; box-shadow: 0 8px 24px #00000012; z-index: 10; }
.note-actions-menu a, .note-actions-menu button { display: block; width: 100%; padding: 10px; text-align: left; background: none; border: 0; border-radius: 6px; font-size: .9rem; text-decoration: none; }
.note-actions-menu a:hover, .note-actions-menu button:hover { background: #f1f5f3; }
.note-player { display: flex; align-items: center; gap: 10px; background: #f3f6f4; padding: 16px; border-radius: 20px; margin-bottom: 2rem; }
.note-player audio { width: 100%; min-width: 0; flex: 1; }
.player-skip { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 48px; min-height: 44px; padding: 8px; border: 1px solid #d8dfd2; border-radius: 5px; background: #fcfcf8; color: #46604e; font-size: .85rem; font-weight: 550; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; }
.player-skip:hover:not(:disabled) { background: #eff2e8; }
.player-skip:disabled { opacity: .5; cursor: default; }
.player-skip:focus-visible { outline: 2px solid var(--note-ink); outline-offset: 3px; }
@media (max-width: 480px) { .note-player { padding: 10px; gap: 6px; } }
.note-detail .btn-primary { background: var(--note-ink); border-color: var(--note-ink); border-radius: 10px; }
.note-detail .btn-primary:hover { background: #193b33; border-color: #193b33; }
.note-detail #transcription-text { line-height: 1.75; margin-top: 1rem; }

.mt-10 {
  margin-top: 6rem;
}

.formatted-transcript {
  white-space: pre-wrap;
}

.timestamp {
  min-width: 60px;
}

.detail-segment-title {
  cursor: pointer;
  position: relative;
}

.detail-segment-title::before {
  content: "▼";
  font-size: 0.8em;
  margin-right: 8px;
}

.detail-segment-title.collapsed::before {
  content: "▶";
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.75rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.25rem;
}

h5 {
  font-size: 1.1rem;
}

h6 {
  font-size: 1rem;
}