/* SimaNotes side panel.
   ============================================================================
   Colors, type sizes, spacing and radii all come from ../shared/suite.css.
   This file describes only what is specific to the SimaNotes module. If you
   find yourself typing a hex value here, add a token there instead.

   Layout: a sticky header (identity, account, recording state, tabs) over three
   mutually exclusive task views — Record, Draft, Notes — plus a footer. The
   views exist because the panel is a ~400px column: showing capture, auth,
   queue, notes and nine draft cards at once meant scrolling past the record
   button to reach the draft, and past the draft to reach the coding export.
   ========================================================================== */

body {
  padding: 0;
}

/* ============================================================================
   Header
   ========================================================================== */

.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  padding: var(--sp-3) var(--sp-4) 0;
  border-bottom: 1px solid var(--border);
  transition: background var(--t-base), border-color var(--t-base);
}

/* While recording, the whole header takes a red wash. This is the ambient
   signal: whichever tab she's on, and however far she's scrolled, the panel
   looks different when the mic is live. */
body.is-recording .app-header {
  background: var(--rec-weak);
  border-bottom-color: var(--rec-border);
}

.app-header .suite-back {
  margin-bottom: var(--sp-1);
}

/* While a take is live (or paused), navigating this page away would destroy the
   MediaRecorder, so navigationGuard.ts diverts this link into a new tab. Mark it
   before the click, not only in the toast after it. Decorative — the guard also
   rewrites the link's title, which is what a screen reader reads. */
body.is-recording .app-header .suite-back::after,
body.is-paused .app-header .suite-back::after {
  content: " \2197";
}

.app-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.app-header h1 {
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;
  margin: 0;
}

.header-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
}

.app-header .status {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 2px 0 var(--sp-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Persistent recording chip — lives in the header, so the timer stays visible
   from the Draft and Notes tabs too. */
.rec-indicator {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--rec);
  background: var(--surface);
  border: 1px solid var(--rec-border);
  border-radius: var(--r-pill);
  padding: 2px var(--sp-2);
  white-space: nowrap;
}

.rec-indicator .rec-dot {
  width: 8px;
  height: 8px;
}

.rec-indicator .rec-indicator-time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Compact demo/live switch. */
.mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.mode-toggle input {
  cursor: pointer;
  margin: 0;
}

/* ============================================================================
   Tabs — the three things she actually does.
   ========================================================================== */

.tabs {
  display: flex;
  gap: 2px;
  margin-top: var(--sp-2);
}

.tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: var(--sp-2) var(--sp-1);
  transition: color var(--t-fast), border-color var(--t-fast);
}

.tab:hover:not(:disabled) {
  background: none;
  color: var(--text);
  border-color: var(--border-strong);
}

.tab[aria-selected="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.tab[aria-selected="true"]:hover {
  background: none;
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Count badge on the Draft tab ("7") and the Record tab (pending recordings). */
.tab-badge {
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  min-width: 16px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text-muted);
}

.tab[aria-selected="true"] .tab-badge {
  background: var(--accent-weak);
  color: var(--accent);
}

.tab-badge.is-alert {
  background: var(--warn-weak);
  color: var(--warn);
}

.tab-badge:empty {
  display: none;
}

/* A tab view fills the space under the header. */
.tab-view {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
}

/* ============================================================================
   Panels
   ========================================================================== */

.capture-panel,
.notes-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--shadow-sm);
}

/* Box styling is shared (shared/suite.css); only the placement is the side
   panel's own. */
.auth-panel {
  margin: var(--sp-3) var(--sp-4) 0;
}

.capture-panel h2,
.notes-panel h2 {
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 var(--sp-3);
}

.demo-banner {
  background: var(--warn-weak);
  border: 1px solid var(--warn-border);
  color: var(--warn);
  font-size: var(--fs-xs);
  padding: var(--sp-2) var(--sp-2);
  border-radius: var(--r-sm);
}

.empty-hint {
  color: var(--text-subtle);
  font-size: var(--fs-sm);
  font-style: italic;
  margin: 0;
}

.sample-picker-wrap,
.recent-drafts-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
}

.sample-picker-wrap label,
.recent-drafts-wrap label {
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}

.sample-picker-wrap select,
.recent-drafts-wrap select {
  flex: 1;
  min-width: 0;
}

/* ============================================================================
   Record view — capture panel
   ========================================================================== */

.capture-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-3);
}

.capture-row label {
  color: var(--text-muted);
  font-weight: 500;
}

.capture-row select {
  flex: 1;
  min-width: 0;
}

/* --- The recording stage -------------------------------------------------
   Recording is the highest-stakes moment in the product, so it gets the most
   visual weight on the panel: a large clock, a pulsing dot, and a live level
   meter. The meter matters most — a moving bar is the only thing that proves
   the mic is actually picking up sound, rather than just that MediaRecorder
   is running. */

.rec-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  transition: background var(--t-base), border-color var(--t-base);
}

body.is-recording .rec-stage {
  background: var(--rec-weak);
  border-color: var(--rec-border);
}

body.is-paused .rec-stage {
  background: var(--warn-weak);
  border-color: var(--warn-border);
}

.rec-timer-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.rec-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--border-strong);
  flex: 0 0 auto;
}

body.is-recording .rec-dot {
  background: var(--rec);
  animation: sima-pulse 1.4s ease-in-out infinite;
}

body.is-paused .rec-dot {
  background: var(--warn);
}

@keyframes sima-pulse {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 var(--rec-glow);
  }
  70% {
    opacity: 0.75;
    box-shadow: 0 0 0 7px var(--rec-glow-0);
  }
}

.capture-timer {
  font-family: var(--font-mono);
  font-size: var(--fs-display);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
}

body.is-recording .capture-timer {
  color: var(--rec);
}

/* Live input level. Twelve segments light up left-to-right with the signal;
   `--level` (0–1) is set from the AnalyserNode on each animation frame. */
.rec-meter {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 18px;
  width: 100%;
  max-width: 220px;
}

.rec-meter-seg {
  flex: 1;
  height: 100%;
  border-radius: 1px;
  background: var(--surface-3);
  transition: background 0.06s linear;
}

.rec-meter-seg.is-lit {
  background: var(--ok);
}

/* The last two segments are the clipping zone. */
.rec-meter-seg.is-lit.is-hot {
  background: var(--warn);
}

.rec-meter-hint {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  margin: 0;
  text-align: center;
  min-height: 1.2em;
}

.rec-meter-hint.is-warn {
  color: var(--warn);
  font-weight: 500;
}

.capture-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}

/* Record is the one action in the panel that isn't brand green: recording red
   is reserved for this control and the states it produces. */
button.record {
  background: var(--rec-fill);
  border-color: var(--rec-fill);
  color: var(--on-rec);
  font-size: var(--fs-base);
  padding: var(--sp-2) var(--sp-4);
}

button.record:hover:not(:disabled) {
  background: var(--rec-fill-hover);
  border-color: var(--rec-fill-hover);
}

button.pause {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text-muted);
}

button.pause:hover:not(:disabled) {
  background: var(--surface-3);
  border-color: var(--text-subtle);
  color: var(--text);
}

button.stop {
  background: var(--text-muted);
  border-color: var(--text-muted);
  color: var(--on-accent);
}

button.stop:hover:not(:disabled) {
  background: var(--text);
  border-color: var(--text);
}

.capture-status {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: var(--sp-3) 0 0;
}

.capture-status.is-recording {
  color: var(--rec);
  font-weight: 500;
}

.capture-status.is-error {
  color: var(--danger);
  font-weight: 500;
}

/* Shown when the signed-in account has no provider identity on its token, so
   any recording it makes is filed under the DEFAULT provider rather than this
   user. Amber — a caution she must see BEFORE recording, because a
   mis-attributed note looks plausible and slips through. */
.provider-warning {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  background: var(--warn-weak);
  border: 1px solid var(--warn-border);
  color: var(--warn);
}

.capture-result {
  margin-top: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.capture-result audio {
  width: 100%;
}

.capture-download {
  font-size: var(--fs-sm);
  color: var(--accent);
  text-decoration: none;
  align-self: flex-start;
}

.capture-download:hover {
  text-decoration: underline;
}

#enable-mic-btn {
  margin-top: var(--sp-2);
}

.visit-label {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  background: var(--info-weak);
  border: 1px solid var(--info-border);
  border-radius: var(--r-md);
}

.visit-label-head {
  margin: 0 0 2px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--info);
}

.visit-label-src {
  font-weight: 400;
  font-size: var(--fs-xs);
  color: var(--text-subtle);
}

.visit-label label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.visit-label-hint {
  margin: 2px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  line-height: var(--lh-tight);
}

.visit-provider-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

/* The new/established answer, shown read-only once given. "change" re-asks
   the same question — a correction before upload, not a toggle on the draft. */
.visit-status-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
}

.visit-status-label {
  color: var(--text-muted);
}

.visit-status-value {
  font-weight: 600;
  color: var(--text);
}

.visit-status-value.is-missing {
  color: var(--warn);
}

.visit-status-change {
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--fs-xs);
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

/* --- The Record-time question --------------------------------------------
   A modal, deliberately: nothing else on the panel matters until it is
   answered, and it is the one moment we have the provider's attention before
   the visit starts. Covers the whole side panel; the card is centred. */
.patient-status-dialog {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: rgba(19, 26, 20, 0.45);
}

.patient-status-dialog[hidden] {
  display: none;
}

.patient-status-card {
  width: 100%;
  max-width: 340px;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}

.patient-status-heading {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  line-height: var(--lh-tight);
}

.patient-status-why {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  line-height: var(--lh-tight);
}

.patient-status-why kbd {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  padding: 0 3px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

.patient-status-choices {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.patient-status-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--text);
  cursor: pointer;
}

.patient-status-choice:hover,
.patient-status-choice:focus-visible {
  background: var(--accent-weak);
  border-color: var(--accent);
  outline: none;
}

.patient-status-choice-title {
  font-size: var(--fs-base);
  font-weight: 600;
}

.patient-status-choice-sub {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
}

.patient-status-cancel {
  margin-top: var(--sp-3);
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-decoration: underline;
  cursor: pointer;
}

.capture-import {
  margin-top: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.capture-import input[type="file"] {
  font-size: var(--fs-xs);
}

button.upload {
  align-self: stretch;
  font-size: var(--fs-base);
  padding: var(--sp-2) var(--sp-4);
}

/* ============================================================================
   Recording queue — buffered recordings not yet uploaded (pending) and ones
   uploaded but kept for reprocessing (processed).
   ========================================================================== */

.rec-queue {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.rec-queue-head {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

/* Pending recordings are never auto-deleted, so this is the only thing that
   says un-uploaded visit audio is still sitting on the laptop. Warn styling,
   not error: nothing is broken, but it needs a decision. */
.rec-stale-note {
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px solid var(--warn-border);
  border-radius: 6px;
  background: var(--warn-weak);
  color: var(--warn);
  font-size: 12px;
  line-height: 1.45;
}

.rec-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.rec-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

/* Pending recordings carry the amber "needs attention" cue. */
#rec-pending-group .rec-item {
  background: var(--warn-weak);
  border-color: var(--warn-border);
}

.rec-item-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

/* "Jul 16, 2:14 PM · 8:32 · 1.2 MB" — a whole column of these stacks in the
   queue, so the figures have to line up vertically. Proportional digits make a
   list of timestamps and durations look ragged and slower to scan. */
.rec-item-title {
  font-size: var(--fs-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.rec-item-sub {
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rec-item-actions {
  display: flex;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.rec-item-actions button {
  font-size: var(--fs-xs);
  padding: 3px var(--sp-2);
}

button.rec-open {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text-muted);
}

button.rec-open:hover:not(:disabled) {
  background: var(--surface-3);
  border-color: var(--text-subtle);
  color: var(--text);
}

button.rec-delete {
  background: none;
  border-color: transparent;
  color: var(--danger);
  text-decoration: underline;
}

button.rec-delete:hover:not(:disabled) {
  background: var(--danger-weak);
  border-color: var(--danger-border);
  color: var(--danger-hover);
  text-decoration: none;
}

/* ============================================================================
   Draft view — pipeline progress
   ========================================================================== */

/* Upload → Transcribe → Draft. Replaces a single line of status text for a
   wait that routinely runs past a minute; a static string can't distinguish
   "working" from "wedged". */
.pipeline {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

.pipeline-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.pipe-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  position: relative;
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  text-align: center;
}

/* The connector line between steps. */
.pipe-step:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 9px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--border);
}

.pipe-step.is-done:not(:first-child)::before,
.pipe-step.is-active:not(:first-child)::before {
  background: var(--accent);
}

.pipe-dot {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--surface);
  display: grid;
  place-items: center;
  font-size: 11px;
  line-height: 1;
  color: var(--on-accent);
}

.pipe-step.is-done .pipe-dot {
  background: var(--accent);
  border-color: var(--accent);
}

.pipe-step.is-done .pipe-dot::after {
  content: "✓";
}

.pipe-step.is-active .pipe-dot {
  border-color: var(--accent);
  background: var(--surface);
  animation: sima-pulse-ring 1.6s ease-out infinite;
}

.pipe-step.is-error .pipe-dot {
  background: var(--danger);
  border-color: var(--danger);
}

.pipe-step.is-error .pipe-dot::after {
  content: "!";
  font-weight: 700;
}

@keyframes sima-pulse-ring {
  0% {
    box-shadow: 0 0 0 0 var(--accent-weak);
  }
  100% {
    box-shadow: 0 0 0 8px transparent;
  }
}

.pipe-step.is-done,
.pipe-step.is-active {
  color: var(--text);
  font-weight: 500;
}

.pipe-step.is-error {
  color: var(--danger);
  font-weight: 500;
}

.pipeline-detail {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-align: center;
}

.pipeline-detail.is-error {
  color: var(--danger);
  font-weight: 500;
}

/* Skeleton cards stand in for the draft while it generates, so the shape of
   what's coming is already on screen instead of blank space. */
.skeleton-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.skeleton-line {
  height: 9px;
}

.skeleton-line.is-title {
  height: 11px;
  width: 38%;
  margin-bottom: var(--sp-1);
}

.skeleton-line.is-short {
  width: 62%;
}

/* ============================================================================
   Draft view — insert checklist
   ========================================================================== */

/* Sticky progress: nine sections is a chore, nine checkboxes is a task. */
.insert-progress {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

.insert-progress-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.insert-progress-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
}

.insert-progress-track {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}

.insert-progress-fill {
  height: 100%;
  width: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  transition: width var(--t-base);
}

.insert-progress.is-complete .insert-progress-label {
  color: var(--ok);
}

#insert-all {
  flex-shrink: 0;
}

main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: 0;
}

.note-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t-base), opacity var(--t-base);
}

.note-section header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
  gap: var(--sp-2);
}

.note-section h2 {
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* A section that has been inserted: green rail, check on the title, body
   collapsed. What's left to do is literally what's still open. */
.note-section.is-inserted {
  border-left-color: var(--ok);
}

.note-section.is-inserted h2::after {
  content: "✓";
  color: var(--ok);
  font-weight: 700;
}

.note-section.is-collapsed .note-body {
  display: none;
}

.note-section.is-collapsed {
  padding-bottom: var(--sp-2);
}

.note-section.is-collapsed header {
  margin-bottom: 0;
}

/* Expand/collapse affordance on the card title. */
.section-toggle {
  background: none;
  border: none;
  border-radius: var(--r-sm);
  padding: 0 var(--sp-1);
  color: var(--text-subtle);
  font-size: var(--fs-sm);
  line-height: 1;
  cursor: pointer;
}

.section-toggle:hover:not(:disabled) {
  background: var(--surface-3);
  color: var(--text);
}

.section-toggle::before {
  content: "▾";
  display: inline-block;
  transition: transform var(--t-fast);
}

.note-section.is-collapsed .section-toggle::before {
  transform: rotate(-90deg);
}

/* Per-section Insert status (✓ inserted / copied / error). Wraps onto its own
   full-width row beneath the header so long messages read cleanly. */
.insert-status {
  flex-basis: 100%;
  font-size: var(--fs-xs);
  margin: 0;
  color: var(--text-muted);
}

.insert-status:empty {
  display: none;
}

.insert-status.is-working {
  color: var(--info);
}

.insert-status.is-ok {
  color: var(--ok);
  font-weight: 500;
}

.insert-status.is-copied {
  color: var(--warn);
}

/* Inserted, but we couldn't confirm the text landed — amber, distinct from the
   green verified ✓, so she knows to check the field. */
.insert-status.is-warn {
  color: var(--warn);
  font-weight: 500;
}

.insert-status.is-error {
  color: var(--danger);
  font-weight: 500;
}

/* Chart context — which patient's chart the Insert buttons will write into. */
.chart-context {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.chart-context.is-on {
  background: var(--ok-weak);
  border: 1px solid var(--ok-border);
  color: var(--ok);
}

/* On Athena, but the note fields aren't reachable (wrong screen, or possible
   selector drift) — amber, so "can't insert here" is visible before the click. */
.chart-context.is-warn {
  background: var(--warn-weak);
  border: 1px solid var(--warn-border);
  color: var(--warn);
}

.chart-context.is-off {
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

/* ============================================================================
   Coding cards
   ========================================================================== */

.note-section[data-section="coding-opportunities"] {
  background: var(--info-weak);
  border-color: var(--info-border);
  border-left-color: var(--info-border);
}

.note-section[data-section="coding-opportunities"] h2 {
  color: var(--info);
}

/* "Codes for this visit" quick-reference — compact and code-forward, for fast
   manual entry into Athena's diagnosis/billing pickers. */
.note-section.codes-quickref {
  position: relative; /* the clamp boundary for .code-tip */
  background: var(--accent-weak);
  border-color: var(--accent-border);
  border-left-color: var(--accent-border);
}

.note-section.codes-quickref h2 {
  color: var(--accent);
}

/* One row per billing code: the CPT on the left, the diagnoses that bill under
   it on the right. Codes only — descriptions and rationale are in the Coding
   card just below, so spending width on them here would say it twice. */
.codes-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

.codes-table th,
.codes-table td {
  padding: var(--sp-2) var(--sp-2) var(--sp-2) 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--accent-border);
}

.codes-table tbody tr:last-child th,
.codes-table tbody tr:last-child td {
  border-bottom: 0;
  padding-bottom: 0;
}

.codes-table thead th {
  padding-top: 0;
  white-space: nowrap;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* The CPT column sizes to its content so the diagnoses get the rest of the
   width — they are the long list, and the one most likely to wrap. The gutter
   goes on every cell in the column, header included, so the two headings don't
   collide once the column collapses. */
.codes-table th:first-child,
.codes-table td:first-child {
  padding-right: var(--sp-4);
}

.codes-table .codes-cpt {
  width: 1%;
  font-weight: 400;
}

.codes-table .code {
  display: inline-block;
  margin: 0 var(--sp-2) 2px 0;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  color: var(--text);
  white-space: nowrap;
}

/* One CPT per line, but only as wide as the code itself — a full-width block
   would drag the hover underline across the whole cell and read as a blank to
   fill in. */
.codes-table .codes-cpt .code {
  display: block;
  width: fit-content;
  margin-right: 0;
}

.codes-table .codes-empty,
.codes-table .codes-unassigned {
  font-size: var(--fs-xs);
  font-style: italic;
  color: var(--text-subtle);
}

/* WELL-EXAM is a placeholder standing in for a code we can't pick, so it reads
   as unresolved rather than as a code to enter. */
.codes-table .code.code-placeholder {
  color: var(--warn);
}

/* A code carrying a descriptor is worth hovering, and nothing about a bare
   monospace code says so. A dotted underline is the long-standing convention
   for exactly this and costs no layout. */
.codes-table .code[data-tip] {
  border-bottom: 1px dotted var(--border-strong);
  cursor: help;
}

.codes-table .code[data-tip]:hover,
.codes-table .code[data-tip]:focus-visible {
  border-bottom-style: solid;
}

/* Sits above the card in one shared element, positioned in script so it stays
   inside a 400px side panel (see attachCodeTips in sections.ts). Sits under the
   WELL-EXAM panel's z-index so the two can't fight over the same corner. */
.code-tip {
  position: absolute;
  z-index: 19;
  max-width: calc(100% - 16px);
  padding: var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
  color: var(--text);
  /* The codes themselves are nowrap; their descriptors must not be. */
  white-space: normal;
  pointer-events: none; /* never eat the hover that opened it */
}

.wellexam {
  position: relative;
  display: inline-block;
  margin-left: var(--sp-1);
}

.wellexam-toggle {
  padding: 0 5px;
  border: 1px dashed var(--warn-border);
  border-radius: var(--r-sm);
  background: var(--warn-weak);
  color: var(--warn);
  font-size: var(--fs-xs);
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
}

/* suite.css's `button:hover` / `button:active` are more specific than a single
   class, so the accent fill has to be beaten explicitly on every state. */
.wellexam-toggle:hover:not(:disabled),
.wellexam-toggle:active:not(:disabled),
.wellexam-toggle:focus-visible {
  border-color: var(--warn);
  border-style: solid;
  background: var(--warn-weak);
  color: var(--warn);
}

/* Floats over the card so opening it doesn't reflow the code list underneath.
   Opens rightward, over the diagnosis column: the button lives in the narrow
   CPT column, so a right-anchored panel would hang off the card's left edge. */
.wellexam-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  min-width: 168px;
  padding: var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.wellexam-panel table {
  border-collapse: collapse;
  font-size: var(--fs-xs);
}

.wellexam-panel th,
.wellexam-panel td {
  padding: 2px 8px 2px 0;
  text-align: left;
  font-weight: 400;
  color: var(--text-muted);
}

.wellexam-panel thead th {
  font-weight: 600;
  color: var(--text-subtle);
}

/* The column for the patient status the draft named (v5.3.3): the lookup is
   then one axis, age. Neither column is lit when the status was not recorded. */
.wellexam-panel th.is-current,
.wellexam-panel td.is-current {
  background: var(--accent-weak);
  color: var(--accent);
  font-weight: 600;
}

.wellexam-panel tbody th {
  color: var(--text);
  white-space: nowrap;
}

.wellexam-panel td {
  font-family: var(--font-mono);
  color: var(--text);
}

.codes-hint {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-xs);
  font-style: italic;
  color: var(--text-muted);
}

/* ============================================================================
   Note body
   ========================================================================== */

.note-body p {
  margin: 0 0 var(--sp-2);
}

.note-body p:last-child {
  margin-bottom: 0;
}

.note-body ul {
  margin: 0;
  padding-left: 18px;
}

.note-body li {
  margin-bottom: 6px;
}

.note-body li:last-child {
  margin-bottom: 0;
}

/* Nested lists (A&P sub-bullets under each problem). */
.note-body li > ul {
  margin-top: 6px;
  margin-bottom: 2px;
}

.note-body li > ul > li {
  margin-bottom: 3px;
  color: var(--text-muted);
}

/* Inline notes — the leading assessment sentence directly under a top-level
   bullet, e.g. the clinical reasoning under each A&P diagnosis. */
.note-body li > p.inline-note {
  margin: var(--sp-1) 0 6px;
  color: var(--text);
}

/* Top-level A&P bullets (the diagnosis line) read as a tight header when
   followed by inline-note + nested bullets. */
.note-section[data-section="a-p"] .note-body > ul > li {
  margin-bottom: var(--sp-3);
}

.note-section[data-section="a-p"] .note-body > ul > li:last-child {
  margin-bottom: 0;
}

.note-body strong {
  font-weight: 600;
  color: var(--text);
}

/* Blockquoted asides — the "coding observation, not a recommendation" caveat
   and the standing Medicare note. These address the reader, not the chart, so
   they read as a set-aside panel rather than note prose. */
.note-body blockquote {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--info-border);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--info-weak);
  color: var(--text-muted);
}

.note-body blockquote > :first-child {
  margin-top: 0;
}

.note-body blockquote > :last-child {
  margin-bottom: 0;
}

/* ============================================================================
   Notes view — server-backed drafts
   ========================================================================== */

.notes-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.notes-panel-head h2 {
  margin: 0;
}

.notes-refresh {
  font-size: var(--fs-xs);
  padding: 3px var(--sp-3);
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--accent);
}

.notes-refresh:hover:not(:disabled) {
  background: var(--accent-weak);
  border-color: var(--accent-border);
}

.notes-context {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--info);
}

.notes-status {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.notes-status.is-error {
  color: var(--danger);
  font-weight: 500;
}

.notes-list {
  margin: var(--sp-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* Admin view: the visit picker that replaces the per-note row list. */
.notes-select {
  width: 100%;
  padding: var(--sp-2);
}

/* Actions for the visit currently picked in .notes-select. */
.notes-detail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

.notes-detail-meta {
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.notes-detail-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
}

.notes-detail-hint {
  font-size: var(--fs-xs);
  color: var(--warn);
}

/* Reprocess (regenerate the draft) is a secondary action next to Open, so it
   reads as visibly less prominent than the primary Open button. */
.notes-reprocess {
  flex-shrink: 0;
  padding: 3px var(--sp-3);
  font-size: var(--fs-xs);
  background: var(--surface);
  color: var(--accent);
  border-color: var(--border-strong);
}

.notes-reprocess:hover:not(:disabled) {
  background: var(--accent-weak);
  border-color: var(--accent-border);
}

.notes-reprocess:disabled {
  color: var(--text-subtle);
  border-color: var(--border);
}

.notes-open {
  flex-shrink: 0;
  padding: 3px var(--sp-3);
  font-size: var(--fs-xs);
}

/* Admin-only per-note "reassign to provider" dropdown. */
.notes-reassign {
  flex-shrink: 0;
  max-width: 130px;
  font-size: var(--fs-xs);
  padding: 3px var(--sp-1);
}

/* ============================================================================
   Footer
   ========================================================================== */

footer {
  padding: var(--sp-3) var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border);
  background: var(--bg);
}

footer .meta {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  margin: 0;
  text-align: center;
}

/* ============================================================================
   Toasts — transient outcomes that shouldn't push layout around.
   ========================================================================== */

.toast-host {
  position: fixed;
  left: var(--sp-3);
  right: var(--sp-3);
  bottom: var(--sp-3);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  font-size: var(--fs-sm);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  animation: sima-toast-in var(--t-base);
}

.toast--ok {
  border-color: var(--ok-border);
  background: var(--ok-weak);
  color: var(--ok);
}

.toast--warn {
  border-color: var(--warn-border);
  background: var(--warn-weak);
  color: var(--warn);
}

.toast--error {
  border-color: var(--danger-border);
  background: var(--danger-weak);
  color: var(--danger);
}

.toast.is-leaving {
  opacity: 0;
  transition: opacity var(--t-base);
}

@keyframes sima-toast-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* "Not sounding like you?" — the route from a finished draft to the settings
   that shape the next one. Quiet by design: it sits under the last card and
   should never compete with the Insert buttons above it. */
.draft-prefs-link {
  margin: var(--sp-4) 0 var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-subtle);
}