/* Deep lagoon, with a highlighter colour the person chooses. The one bold thing is the ring that swells with
   what the microphone hears, because being sure it's hearing you is what matters.
   Uses Apple's rounded system face where available, so it feels at home on iPhone
   without a font download. */
:root {
  --ink: #12282c;
  --muted: #5b7176;
  --bg: #eef4f4;
  --panel: #ffffff;
  --line: #d5e1e2;
  --lagoon: #0e6a70;
  --on-lagoon: #ffffff;
  --marker: #ffe45c;
  --danger: #c5342a;
  --bar: #0e2a2e;
  --on-bar: #eaf6f5;
  --bar-line: #2a4d52;
  font: 16px/1.5 ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e4f0f0;
    --muted: #8fa6aa;
    --bg: #0c1a1d;
    --panel: #132528;
    --line: #27403f;
    --lagoon: #62d0ca;
    --on-lagoon: #06221f;
    --danger: #ff8176;
    --bar: #081315;
    --bar-line: #27403f;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--ink); overscroll-behavior: none; }
h1, h2, p { margin: 0; }
a { color: var(--lagoon); }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.error { color: var(--danger); min-height: 1.5em; font-size: 15px; }

/* 44px is the smallest comfortable tap target on a phone, and 16px text stops
   iPhone Safari zooming the page when a field is focused. */
button, select, input { font: inherit; color: inherit; }
button {
  min-height: 44px; padding: 8px 14px; cursor: pointer; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel); touch-action: manipulation;
}
button:disabled { opacity: .45; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--lagoon); outline-offset: 2px; }
.primary { background: var(--lagoon); border-color: var(--lagoon); color: var(--on-lagoon); font-weight: 650; }
.big { padding: 12px 22px; font-size: 18px; justify-self: start; }

.field { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.field select, .field input {
  width: 100%; min-height: 44px; padding: 8px 10px; font-size: 16px; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
}

.button-link { display: grid; place-items: center; min-height: 48px; border-radius: 12px; text-decoration: none; }
.account { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.account span { overflow-wrap: anywhere; }
.sign-in { display: grid; gap: 14px; width: min(340px, calc(100vw - 32px)); margin: 18dvh auto 0; }
.sign-in h1 { font-size: 34px; font-weight: 750; letter-spacing: -.02em; }

.app { display: flex; flex-direction: column; height: 100dvh; }

.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(8px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 8px calc(16px + env(safe-area-inset-left));
  background: var(--bar); color: var(--on-bar);
}
.wordmark { font-size: 21px; font-weight: 750; letter-spacing: -.02em; }
.controls { display: flex; gap: 8px; }
.bar button { background: transparent; border-color: var(--bar-line); color: inherit; }
.bar .toggle[aria-pressed="true"] { background: var(--on-bar); color: var(--bar); border-color: var(--on-bar); font-weight: 650; }

.notice { padding: 8px 16px; background: var(--panel); border-bottom: 1px solid var(--line); font-size: 15px; }
.notice.error { color: var(--danger); }

.workspace { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.workspace.listening { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); }

.rail { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 14px 16px; background: var(--panel); border-right: 1px solid var(--line); }
.rail-status { display: flex; align-items: center; gap: 12px; font-weight: 650; min-height: 44px; }
.rail-status .muted { font-weight: 400; font-size: 14px; }

.rings { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--lagoon) 16%, transparent); display: grid; place-items: center; }
.rings::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--lagoon); }
#ring { position: absolute; inset: 0; border-radius: 50%; background: color-mix(in srgb, var(--lagoon) 35%, transparent); transform: scale(.3); transition: transform 90ms linear; }

.lines { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: grid; gap: 10px; align-content: start; font-size: 15px; }
.line { color: var(--muted); }
.line.final { color: var(--ink); }

/* Highlighter colours are bright with dark text in both light and dark mode, like
   a real highlighter pen. */
[data-highlight="yellow"] { --marker: #ffe45c; }
[data-highlight="green"] { --marker: #9df0a8; }
[data-highlight="blue"] { --marker: #a5dcff; }
[data-highlight="pink"] { --marker: #ffbfe3; }
[data-highlight="orange"] { --marker: #ffc27a; }

/* The highlighter swipe, on the caught line and on its answer's question. */
.marked {
  background: linear-gradient(var(--marker), var(--marker)) no-repeat left / 100% 100%;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  color: #12282c; padding: 1px 4px; border-radius: 3px;
  animation: swipe .45s ease-out;
}
.line.final.marked { color: #12282c; } /* beats .line.final, whose pale dark-mode text is unreadable here */
@keyframes swipe { from { background-size: 0 100%; } }
@media (prefers-reduced-motion: reduce) { .marked { animation: none; } #ring { transition: none; } }

.feed { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px 16px; display: flex; flex-direction: column; gap: 26px; }
.feed > * { width: 100%; max-width: 680px; margin-inline: auto; }
.empty { margin-block: auto; display: grid; gap: 10px; }
.empty h2 { font-size: clamp(26px, 6vw, 36px); font-weight: 750; letter-spacing: -.02em; line-height: 1.15; }
.empty p { color: var(--muted); max-width: 44ch; }

.card { display: grid; gap: 6px; }
.question { font-size: 15px; font-weight: 650; color: var(--muted); }
.answer { font-size: 20px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 62ch; }
.answer.waiting { color: var(--muted); font-size: 16px; }
.answer.failed { color: var(--danger); font-size: 16px; }
.card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 14px; color: var(--muted); }
.card-foot button { min-height: 36px; padding: 2px 10px; font-size: 14px; }
.cite { color: var(--muted); max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.cite { color: var(--lagoon); }

.composer {
  display: flex; align-items: center; gap: 8px; background: var(--panel); border-top: 1px solid var(--line);
  padding: 10px max(calc(16px + env(safe-area-inset-right)), calc((100% - 680px) / 2)) calc(10px + env(safe-area-inset-bottom)) max(calc(16px + env(safe-area-inset-left)), calc((100% - 680px) / 2));
}
.composer input { flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; font-size: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.composer button { flex: none; }
.listen[aria-pressed="true"] { background: var(--danger); border-color: var(--danger); color: #fff; font-weight: 650; }
.mic { display: grid; place-items: center; width: 44px; padding: 0; border-radius: 50%; }
.mic[aria-pressed="true"] { background: var(--danger); border-color: var(--danger); color: #fff; }

.drawer {
  margin: 0 0 0 auto; width: min(460px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh;
  border: 0; border-left: 1px solid var(--line); background: var(--panel); color: var(--ink);
  padding: calc(14px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
}
.drawer[open] { display: flex; flex-direction: column; gap: 14px; }
.drawer::backdrop { background: rgb(0 0 0 / .4); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; }
.drawer-head h2 { font-size: 20px; }
.bar .icon { display: grid; place-items: center; width: 44px; padding: 0; }
.swatches { margin: 0; padding: 0; border: 0; display: grid; gap: 2px; }
.swatches legend { padding: 0 0 4px; font-size: 14px; color: var(--muted); }
.swatches label { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.swatches input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatch { width: 28px; height: 28px; border-radius: 50%; background: var(--marker); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .15); }
.swatches input:checked + .swatch { outline: 3px solid var(--lagoon); outline-offset: 2px; }
.swatches input:focus-visible + .swatch { outline: 3px solid var(--lagoon); outline-offset: 2px; }
.swatches label:has(input:checked) { font-weight: 650; }
#settings .account { margin-top: auto; }
.dropzone { display: grid; gap: 2px; padding: 16px; text-align: center; cursor: pointer; border: 1.5px dashed var(--line); border-radius: 12px; }
.dropzone span { color: var(--muted); font-size: 14px; }
.dropzone.over { border-color: var(--lagoon); }
.dropzone input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dropzone:focus-within { outline: 2px solid var(--lagoon); outline-offset: 2px; }
.link-form { display: flex; gap: 8px; align-items: end; }
.link-form .field { flex: 1; min-width: 0; }
.status { min-height: 1.5em; font-size: 15px; }
.status.error { color: var(--danger); }
.sources { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.sources li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); }
.source-info { min-width: 0; flex: 1 1 160px; }
.source-title { font-weight: 650; overflow-wrap: anywhere; }
.source-meta { font-size: 14px; color: var(--muted); }
.source-actions { display: flex; gap: 6px; flex: none; }

/* Phones: the answers matter most, so the transcript gets a short strip above them. */
@media (max-width: 760px) {
  .workspace.listening { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  /* One status row, then about three lines of transcript. */
  .rail { max-height: 40dvh; gap: 2px; border-right: 0; border-bottom: 1px solid var(--line); padding: 4px 16px 6px; }
  .rail-status { gap: 8px; min-height: 36px; font-size: 15px; }
  .rings { width: 26px; height: 26px; }
  .rings::after { width: 8px; height: 8px; }
  .lines { flex: none; max-height: 66px; font-size: 14px; gap: 4px; line-height: 1.4; }
  .bar { gap: 8px; }
  .controls { gap: 6px; }
  .bar button:not(.icon) { padding-inline: 10px; }
  .answer { font-size: 19px; }
  .feed { padding: 16px; gap: 22px; }
  .composer .primary { padding-inline: 12px; }
}
@media (min-width: 761px) { #stay-open { display: none; } }