/* ClinoVoice app. Quiet greys, one accent for the primary action, colour
   only where the clinician has something to do. Follows docs/app-wireframes.html. */
:root {
  --ink: #1f2328; --mute: #6b7280; --line: #d9dde3; --bg: #f4f5f7; --card: #fff;
  --accent: #2f6db5; --accent-ink: #fff; --warn: #b7791f; --ok: #2f855a; --fail: #c53030; --rec: #7a8a9a;
  --level-low: #b8c2cc; --level-edge: #d2a65c; --level-good: #6fa587;
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; color: var(--ink);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); font-size: 15px; line-height: 1.45; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; }
input[type=text], input[type=search], input[type=email], input[type=date], input[type=time], select, textarea {
  border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; background: #fff; color: var(--ink); line-height: 1.3; vertical-align: middle; }
input[type=date], input[type=time], select { min-height: 38px; }
input[type=checkbox] { width: 16px; height: 16px; vertical-align: middle; }
.narrow { display: none; }

.topbar { display: flex; align-items: center; gap: 28px; padding: 10px 24px; min-height: 60px; background: #fff; border-bottom: 1px solid var(--line); }
.topbar .brand { font-weight: 600; font-size: 17px; color: var(--ink); text-decoration: none; }
.topbar nav { display: flex; gap: 4px; }
.topbar nav a { color: var(--mute); text-decoration: none; padding: 8px 14px; border-radius: 7px; white-space: nowrap; }
.topbar nav a:hover { color: var(--ink); background: #f4f5f7; }
.topbar nav a.on { color: var(--ink); background: #eceff3; font-weight: 500; }
.badge { background: var(--warn); color: #fff; border-radius: 10px; font-size: 12px; padding: 1px 7px; margin-left: 6px; }
.topbar .right { margin-left: auto; color: var(--mute); font-size: 14px; }

.device { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: #fff; color: var(--mute);
  border-radius: 999px; padding: 6px 14px; font-size: 14px; cursor: pointer; white-space: nowrap; }
.device:hover:not([disabled]) { border-color: #aeb6c0; color: var(--ink); }
.device[disabled] { cursor: default; }
.device-dot { width: 9px; height: 9px; border-radius: 50%; background: #aeb6c0; }
.device[data-status="connected"] { color: var(--ink); }
.device[data-status="connected"] .device-dot { background: var(--level-good); }
.device[data-status="disconnected"] .device-dot { background: var(--level-edge); }
.site-foot { max-width: 1180px; margin: 0 auto; padding: 8px 24px 28px; font-size: 13px; color: var(--mute); display: flex; flex-wrap: wrap; gap: 4px 16px; }
.site-foot a { color: var(--mute); }
.site-foot .build { margin-left: auto; font-variant-numeric: tabular-nums; }

.page { padding: 24px; max-width: 1180px; margin: 0 auto; }
h1 { font-size: 22px; margin: 0 0 16px; }
h2 { font-size: 13px; margin: 0; color: var(--mute); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.grow { flex: 1; }
.mute { color: var(--mute); font-size: 13px; }
.message { background: #eef4fb; border: 1px solid #9db4d1; color: #2f5b8f; border-radius: 6px; padding: 8px 12px; margin-bottom: 14px; }
.error { background: #fff1f0; border: 1px solid var(--fail); color: var(--fail); border-radius: 6px; padding: 8px 12px; margin-bottom: 14px; }
.inline { display: inline; margin: 0; }

.btn { display: inline-block; border: 1px solid var(--line); background: #fff; color: var(--ink); padding: 8px 14px; border-radius: 7px; font-size: 14px; white-space: nowrap; cursor: pointer; text-decoration: none; line-height: 1.3; }
.btn:hover { border-color: #aeb6c0; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.danger { border-color: var(--fail); color: var(--fail); }
.btn.ghost { border-color: transparent; color: var(--mute); background: transparent; }
.btn[disabled] { opacity: .5; cursor: default; }
.link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font-size: 13px; }

.pill { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 13px; border: 1px solid var(--line); color: var(--mute); background: #fff; white-space: nowrap; }
.pill.work { border-color: #9db4d1; color: #2f5b8f; background: #eef4fb; }
.pill .spinner, .notice .spinner { display: inline-block; width: 9px; height: 9px; border: 2px solid #9db4d1; border-top-color: #2f5b8f; border-radius: 50%; margin-right: 6px; vertical-align: -1px; animation: spin 0.9s linear infinite; }
.pill.queued::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid #2f5b8f; margin-right: 6px; box-sizing: border-box; }
@keyframes spin { to { transform: rotate(360deg); } }
th.select, td.select { width: 40px; padding-right: 0; }
.pill.ready { border-color: var(--warn); color: var(--warn); background: #fff8ea; }
.pill.ok { border-color: var(--ok); color: var(--ok); background: #eefaf2; }
.pill.fail { border-color: var(--fail); color: var(--fail); background: #fff1f0; }
@keyframes breathe { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 13px; color: var(--mute); font-weight: 500; padding: 12px 16px; border-bottom: 1px solid var(--line); }
td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td .sub { color: var(--mute); font-size: 13px; margin-top: 2px; }
tr.cancelled td { color: var(--mute); text-decoration: line-through; }
td.actions { text-align: right; white-space: nowrap; }
td.actions form { display: inline; }
td.actions > * + * { margin-left: 6px; }
.location { padding: 12px 16px; background: #fafbfc; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 13px; }

.daybar { display: flex; align-items: center; gap: 12px 14px; padding: 14px 16px; margin-bottom: 16px; flex-wrap: wrap; }
.daybar .date { font-weight: 600; font-size: 17px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg a, .seg button { padding: 8px 14px; font-size: 14px; border: 0; border-right: 1px solid var(--line); color: var(--ink); text-decoration: none; background: #fff; cursor: pointer; }
.seg a:last-child, .seg button:last-child { border-right: 0; }
.seg .on { background: var(--ink); color: #fff; }

/* Forms */
.form { display: grid; grid-template-columns: 220px 1fr; gap: 14px 18px; align-items: center; padding: 20px; }
.form label { color: var(--mute); font-size: 14px; }
.form input[type=text], .form input[type=email], .form input[type=date], .form input[type=time], .form select, .form textarea { width: 100%; max-width: 440px; }
.form .full { grid-column: 1 / -1; }
.form .choices { display: flex; gap: 16px; }
.form .choices label { color: var(--ink); }
fieldset { border: 0; padding: 0; margin: 0; }

/* Recording overlay and wrap-up sheet */
.overlay { position: fixed; inset: 0; background: rgba(240, 242, 245, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: flex; align-items: center; justify-content: center; z-index: 10; }
.console { width: 480px; max-width: calc(100% - 32px); background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px 26px 20px; box-shadow: 0 10px 40px rgba(0,0,0,.08); }
.console .who { font-size: 18px; font-weight: 600; }
.console .meta { color: var(--mute); font-size: 14px; margin-top: 2px; }
.console .state { display: flex; align-items: center; gap: 10px; margin: 22px 0 8px; color: var(--mute); font-size: 14px; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--rec); animation: breathe 2.5s ease-in-out infinite; box-sizing: border-box; }
.dot.idle { background: transparent; border: 2px solid #c3cad2; animation: none; }
.dot.paused { background: transparent; border: 2px solid var(--rec); animation: none; }
.console .source { margin-top: 14px; }
.console .source .controls { margin-top: 10px; }
.console .source .hint a { color: var(--mute); }
.time { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 26px; letter-spacing: .02em; line-height: 1; color: #3a4148; }
/* Level meter, -60 to 0 dBFS. Zones by position: grey below the mark (-36 dBFS,
   too quiet to transcribe), amber for the first 6 dB above it, green from
   -30 dBFS. The bar is the full strip clipped to the level (--level, set by
   record.js), so a colour always means the same level. The track carries the
   same zones faintly so they read before anyone speaks. */
.meter { height: 10px; border-radius: 5px; margin: 20px 0 8px; position: relative; overflow: hidden;
  background: linear-gradient(to right, #eceff2 0 40%, #f6ecdb 40% 50%, #e4efe8 50%); }
.meter .bar { height: 100%; width: 100%; border-radius: 5px; clip-path: inset(0 calc(100% - var(--level, 0%)) 0 0); transition: clip-path .3s;
  background: linear-gradient(to right, var(--level-low) 0 40%, var(--level-edge) 40% 50%, var(--level-good) 50%); }
.meter.quiet { box-shadow: 0 0 0 1px var(--warn); }
.meter .mark { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #7d8894; left: 40%; }
.console .hint { font-size: 13px; color: var(--mute); }
.console .hint.warn { color: var(--warn); }
.controls { display: flex; gap: 10px; margin-top: 20px; }
.controls .btn { flex: 1; text-align: center; padding: 10px 12px; font-size: 14px; }
.console textarea { width: 100%; margin-top: 10px; border: 1px solid var(--line); border-radius: 6px; padding: 10px; font-size: 14px; min-height: 90px; resize: vertical; }
.ico { display: inline-block; width: 11px; height: 11px; vertical-align: -1px; margin-right: 7px; }
.ico.stop { background: currentColor; border-radius: 2px; }
.ico.pause { background: linear-gradient(to right, currentColor 0 36%, transparent 36% 64%, currentColor 64%); }
.ico.play { width: 0; height: 0; border-left: 11px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.confirm { margin-top: 12px; padding: 10px; border: 1px solid var(--fail); border-radius: 6px; background: #fff1f0; font-size: 13px; }

/* Review */
.banner { display: flex; align-items: baseline; gap: 14px; margin-bottom: 4px; flex-wrap: wrap; }
.banner .who { font-size: 18px; font-weight: 600; }
.subline { font-size: 14px; color: var(--mute); margin-bottom: 16px; line-height: 2.4; }
.subline form.inline { margin-left: 6px; }
.panes { display: grid; grid-template-columns: 1fr; gap: 14px; }
.panes.with-facts { grid-template-columns: 7fr 5fr; }
.pane { padding: 16px; }
.pane h2 { margin-bottom: 10px; }
.letter { font-size: 14px; line-height: 1.55; white-space: pre-wrap; border: 1px solid var(--line); border-radius: 6px; padding: 12px; min-height: 330px; background: #fff; }
textarea.letter { width: 100%; font-family: inherit; resize: vertical; min-height: 420px; }
.letter mark, mark.check { background: #fff3c4; padding: 0 2px; }
[data-letter-view][title] { cursor: text; }
[data-letter-view][title]:hover { border-color: var(--accent); }
.fact { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.fact:last-child { border-bottom: 0; }
.fact .k { color: var(--mute); font-size: 13px; }
.fact .v { margin-top: 2px; white-space: pre-wrap; }
.fact .flag { color: var(--warn); font-size: 12px; margin-left: 6px; }
.fact .src { color: var(--mute); font-size: 12px; margin-top: 2px; }
.fact.changed { background: #fff8ea; margin: 0 -16px; padding: 10px 16px; }
.fact details textarea { width: 100%; min-height: 60px; margin-top: 6px; border: 1px solid var(--line); border-radius: 6px; padding: 6px; }
.drawer { margin-top: 14px; padding: 10px 14px; }
.drawer summary { cursor: pointer; font-size: 14px; }
.details { margin: 0 0 16px; }
.details > summary .mute { font-size: 14px; }
.details .form { padding: 14px 0 6px; }
.recording { padding: 10px 0; border-top: 1px solid var(--line, #e5e7eb); }
.recording .row { gap: 14px; align-items: center; }
.recording audio { display: block; width: 100%; margin-top: 8px; }
.drawer .transcript, .card .transcript { white-space: pre-wrap; font-size: 14px; line-height: 1.5; max-height: 360px; overflow: auto; margin-top: 10px; }
.drawer audio { width: 100%; margin-top: 10px; }

/* Audio player (public/app.js replaces the native controls). Played is the
   accent blue, unplayed a light grey, so progress reads at a glance. */
.player { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 8px 14px 8px 8px;
  border: 1px solid var(--line); border-radius: 999px; background: #f7f8fa; }
.player .player-toggle { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.player .player-toggle .ico { margin: 0; }
.player .player-toggle .ico.play { margin-left: 3px; }
.player .time-label { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--mute); font-size: 14px; white-space: nowrap; }
.player input[type=range] { flex: 1; min-width: 60px; margin: 0; height: 6px; border-radius: 3px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background: linear-gradient(to right, var(--accent) 0 var(--played, 0%), #cfd5dd var(--played, 0%) 100%); }
.player input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid var(--accent); }
.player input[type=range]::-moz-range-track { background: transparent; }
.player input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); }
.player input[type=range]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.footer { display: flex; gap: 10px; margin-top: 14px; align-items: center; flex-wrap: wrap; }
.footer.top { margin: 0 0 12px; }
.notice { background: #fff8ea; border: 1px solid var(--warn); color: #7a4f0e; border-radius: 6px; padding: 10px 14px; margin-bottom: 12px; font-size: 14px; }

.prose { max-width: 720px; line-height: 1.55; }
.prose h2 { margin-top: 20px; }

/* Phones and narrow windows. Lists become stacked rows, forms one column,
   the review panes stack, and touch targets reach about 44 px. 16 px text in
   fields stops iOS zooming on focus. */
@media (max-width: 720px) {
  body { font-size: 16px; }
  input, select, textarea { font-size: 16px; }
  .narrow { display: inline; }
  .topbar { flex-wrap: wrap; gap: 4px 16px; padding: 12px 16px 6px; }
  .topbar .device { font-size: 13px; padding: 5px 12px; }
  .site-foot { padding: 4px 16px 24px; }
  .details .form { padding: 10px 0 4px; }
  .topbar nav { order: 3; width: calc(100% + 32px); margin: 0 -16px; padding: 0 12px 4px; overflow-x: auto; scrollbar-width: none; }
  .topbar nav a { flex: 1 0 auto; text-align: center; padding: 10px 6px; font-size: 15px; }
  .page { padding: 16px; }
  h1 { font-size: 20px; }
  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; }
  .seg a, .seg button { padding: 11px 14px; }
  .daybar .date { order: -1; flex-basis: 100%; }
  .daybar .grow { display: none; }

  table.list, table.list thead, table.list tbody { display: block; }
  table.list thead tr { display: block; padding: 10px 16px; border-bottom: 1px solid var(--line); }
  table.list thead tr:not(:has(input)) { display: none; }
  table.list th { display: none; }
  table.list th.select { display: block; width: auto; padding: 0; border: 0; }
  table.list th.select label { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 14px; }
  table.list tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  table.list tbody tr:last-child { border-bottom: 0; }
  table.list td { display: block; flex: 1 1 100%; padding: 0; border: 0; }
  table.list td:empty { display: none; }
  table.list td.select, table.list td.when { flex: 0 0 auto; width: auto; }
  table.list td.when { font-weight: 600; }
  table.list td.meta { flex: 0 0 auto; color: var(--mute); font-size: 14px; }
  table.list td.actions { display: flex; flex-wrap: wrap; gap: 8px; text-align: left; white-space: normal; margin-top: 4px; }
  table.list td.actions > * + * { margin-left: 0; }
  table.list td.actions form { display: flex; flex-wrap: wrap; gap: 8px; }

  .form { grid-template-columns: 1fr; gap: 6px; padding: 16px; }
  .form > label { margin-top: 10px; }
  .form input[type=text], .form input[type=email], .form input[type=date], .form input[type=time], .form select, .form textarea { max-width: none; }
  .form .choices { flex-wrap: wrap; }

  .panes.with-facts { grid-template-columns: 1fr; }
  .letter { min-height: 240px; }
  textarea.letter { min-height: 320px; }

  .overlay { align-items: flex-start; overflow-y: auto; padding: 16px; }
  .console { margin: auto 0; max-width: 100%; padding: 20px; }
  .controls { flex-wrap: wrap; }
  .player .player-toggle { width: 44px; height: 44px; }
  .player input[type=range]::-webkit-slider-thumb { width: 22px; height: 22px; }
}