/* Read Aloud - styles. Areas never blend (r349): each panel has its own tint + 2px border;
   items inside are white tiles with a 1.5px border and a 6px colour bar, alternating tint. */
:root {
  --ink: #111827;
  --muted: #374151;
  --navy: #1e3a8a;
  --navy-2: #1d4ed8;
  --page: #f3f4f6;
  --paste-bg: #eff6ff;   --paste-edge: #1e40af;
  --ctl-bg: #e0e7ff;     --ctl-edge: #1e3a8a;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--page);
  color: var(--ink);
  font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
button { font: inherit; cursor: pointer; }

.top {
  background: var(--navy);
  color: #fff;
  padding: 10px 16px;
  border-bottom: 2px solid #172554;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { border-radius: 9px; }
.brand h1 { font-size: 22px; margin: 0; }
.menu-btn {
  margin-left: auto; background: #fff; color: var(--navy); border: 2px solid var(--navy);
  border-radius: 12px; min-width: 40px; min-height: 44px; font-size: 24px; line-height: 1; font-weight: 700; padding: 0;
}

/* Settings sheet: its own violet tint so it never blends with the panels (r349) */
.sheet-back {
  position: fixed; left: 0; right: 0; top: 0; bottom: 0;
  background: rgba(17, 24, 39, .45); z-index: 80;
}
.sheet-back[hidden] { display: none; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: var(--kb, 0px);
  max-width: 560px; margin: 0 auto;
  max-height: calc(var(--vvh, 100dvh) - 24px); overflow-y: auto;
  background: #f5f3ff; border: 2px solid #5b21b6;
  border-radius: 16px 16px 0 0;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sheet-head h2 { margin: 0; font-size: 20px; color: #4c1d95; }
.x {
  background: #fff; color: #4c1d95; border: 2px solid #5b21b6; border-radius: 10px;
  min-width: 44px; min-height: 44px; font-size: 20px; font-weight: 700;
}
.set-card {
  background: #ffffff; border: 1.5px solid #6d28d9; border-left: 6px solid #7c3aed;
  border-radius: 10px; padding: 10px 12px; margin-top: 12px;
}
.set-card h3 { margin: 0 0 4px; font-size: 17px; color: #4c1d95; }
.def-speeds { margin: 8px 0 4px; }

/* The screen is one column exactly as tall as the visible area: bar on top, the text box takes ALL the rest, nothing is ever cut off at the bottom */
main { max-width: 860px; margin: 0 auto; padding: 6px; height: var(--vvh, 100dvh); display: flex; flex-direction: column; }
.panel { border-radius: 14px; padding: 6px; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.panel-paste  { background: var(--paste-bg);  border: 2px solid var(--paste-edge); }
.panel h2 { margin: 0 0 10px; font-size: 20px; }

[hidden] { display: none !important; }   /* .row's flex must not show a hidden row */
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
.big {
  background: var(--navy); color: #fff; border: 2px solid #172554;
  border-radius: 12px; padding: 0 12px; font-size: 16px; font-weight: 700; min-height: 44px;
}
.plain {
  background: #fff; color: var(--navy); border: 2px solid var(--navy);
  border-radius: 12px; padding: 0 12px; font-weight: 600; min-height: 44px; font-size: 16px;
}
.hint { color: var(--muted); margin: 8px 0; }
.small { font-size: 14px; }
.status { font-weight: 600; color: #064e3b; }

textarea {
  width: 100%; flex: 1 1 auto; min-height: 90px; resize: none;   /* fills the screen under the slim bar */
  font: 18px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink); background: #fff;
  border: 2px solid var(--paste-edge); border-radius: 12px; padding: 12px;
}
.readview {
  background: #fff;
  border: 2px solid var(--paste-edge);
  border-radius: 12px;
  padding: 6px 16px;
  font-size: 19px; line-height: 1.65;
  cursor: text;
  margin-top: 0;
  /* The text scrolls INSIDE its own box, so the highlighted sentence is kept in view by reader.js and the bar above can never cover it */
  flex: 1 1 auto; min-height: 90px; overflow-y: auto;
}
.readview p { margin: 10px 0; }

/* Control area: sits inside the paste panel under Paste & Read / Clear; its own tint + 2px border (r349) */
.controls {
  background: var(--ctl-bg);
  border: 2px solid var(--ctl-edge);
  border-radius: 12px;
  padding: 6px;
  margin: 0 0 6px;
}
.ctl-row, .speeds { display: flex; flex-wrap: nowrap; gap: 4px; align-items: center; margin: 0; }
.speeds { margin-top: 6px; gap: 4px; }
.play {
  background: var(--navy); color: #fff; border: 2px solid #172554; border-radius: 12px;
  font-size: 16px; font-weight: 700; min-height: 44px; padding: 0 12px;
}
.ctl {
  background: #fff; color: var(--navy); border: 2px solid var(--navy); border-radius: 12px;
  font-weight: 700; min-height: 44px; padding: 0 12px; font-size: 16px;
}
.voice { display: flex; align-items: center; gap: 6px; color: var(--navy); font-weight: 600; width: 100%; }
.voice select {
  flex: 1; min-width: 0; font: inherit; font-size: 15px; color: var(--ink); background: #fff;
  border: 2px solid var(--navy); border-radius: 10px; padding: 9px 8px; min-height: 44px;
}
.speed {
  background: #fff; color: var(--navy); border: 2px solid var(--navy); border-radius: 10px;
  font-weight: 700; min-width: 58px; min-height: 42px; padding: 0 8px;
}
.speed.is-on { background: var(--navy); color: #fff; }
.speeds .lbl { color: var(--navy); font-weight: 600; margin-right: 2px; }
.status-line { font-size: 14px; color: var(--muted); line-height: 18px; min-height: 18px; margin: 4px 2px 0; flex: 0 0 auto; }   /* below the text box, so the sticky bar never changes height */

@media (max-width: 520px) {
  main { padding: 10px 8px; }
  .panel { padding: 10px; }
  .play, .ctl, .big, .plain { padding: 0 8px; font-size: 15px; }
  .big { flex: 1 1 auto; }
  .speeds .lbl { font-size: 14px; }
  .speed { min-width: 0; flex: 1 1 0; padding: 0 1px; font-size: 14px; letter-spacing: -.2px; }
  .def-speeds { flex-wrap: nowrap; }
}

.controls, #pasteViewBar { flex: 0 0 auto; }
#pasteViewBar { flex-wrap: nowrap; margin: 4px 0 0; }
#pasteViewBar .hint { margin: 0; font-size: 14px; }
html.set-open [data-ra-skip] { display: none !important; }   /* the reading highlight must not paint over the Settings sheet */

#speedSel { min-width: 58px; min-height: 44px; font-size: 16px; padding: 0 6px; }   /* sits on the same row as the other buttons */
.ctl-row button { white-space: nowrap; }   /* Vera r9: "Paste & Read" must never wrap and grow the bar */
.play { min-width: 66px; }   /* fits "Resume", so Play/Pause/Resume never resizes the row */
@media (max-width: 400px) {
  .play, .ctl, .big, .plain { padding: 0 5px; font-size: 14px; }
  #speedSel { min-width: 50px; padding: 0 4px; font-size: 14px; }
  .play { min-width: 62px; }
  .menu-btn { min-width: 36px; padding: 0 6px; }
}
@media (max-width: 370px) {
  .ctl-row { gap: 3px; }
  .play, .ctl, .big, .plain { padding: 0 4px; font-size: 13px; }
  #speedSel { min-width: 44px; padding: 0 3px; font-size: 13px; }
  .play { min-width: 56px; }
  .menu-btn { min-width: 32px; padding: 0 4px; }
}

#speedSel { min-height: 44px; font-weight: 700; font-size: 16px; font-family: inherit; padding: 0 2px; border: 2px solid var(--navy); border-radius: 10px; background: #fff; color: var(--navy); }
#doneBar { flex: 0 0 auto; margin: 6px 0 0; }
#doneBar .big { flex: 1 1 auto; min-height: 48px; }

/* Edge to edge (Kevin 10/26/2026): the text box uses the whole screen width, no frame around it; only a 2px line above and below keeps it apart from the bar (r349) */
main { max-width: none; padding: 0; }
.panel { border: 0; border-radius: 0; padding: 0; }
.controls { border-width: 0 0 2px; border-radius: 0; margin: 0; padding: 6px; }
textarea, .readview { border-width: 0; border-bottom: 2px solid var(--paste-edge); border-radius: 0; margin: 0; }
textarea { padding: 12px 10px; }
.readview { padding: 6px 10px; }
#doneBar, #pasteViewBar { margin: 0; padding: 6px; }
.status-line { margin: 2px 8px 2px; }

/* Play/Pause is a picture, not a word (Kevin 10/26/2026); the Tweak card in Settings reorders the bar */
.play { min-width: 52px; display: inline-flex; align-items: center; justify-content: center; }
.play .ico { width: 24px; height: 24px; }
.play .ico-pause { display: none; }
.play.is-playing .ico-play { display: none; }
.play.is-playing .ico-pause { display: block; }
.tw-list { list-style: none; margin: 8px 0; padding: 0; }
.tw-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border: 1.5px solid #6d28d9; border-left: 6px solid #7c3aed; border-radius: 8px; margin-bottom: 6px; background: #ffffff; }
.tw-row:nth-child(even) { background: #f3e8ff; }
.tw-name { flex: 1; font-weight: 700; color: #4c1d95; }
.tw-btn { min-width: 44px; min-height: 44px; font-size: 18px; background: #fff; color: #4c1d95; border: 2px solid #5b21b6; border-radius: 10px; }
.tw-btn:disabled { opacity: .35; }
.tw-reset { min-height: 44px; padding: 0 12px; }
@media (max-width: 400px) { .play { min-width: 46px; } }
@media (max-width: 370px) { .play { min-width: 42px; } }

.edge-open { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; margin-top: 4px; }
.upd-spin { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border: 3px solid #c4b5fd; border-top-color: #5b21b6; border-radius: 50%; animation: updspin .8s linear infinite; }
@keyframes updspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .upd-spin { animation-duration: 2.4s; } }

/* r367 (Kevin 10/27/2026): every button looks like a button. In the Settings sheet the secondary
   actions (Check for updates, Reset to the laptop order, Open in Edge) were white on the white card
   and as wide as their words; now they get a pale-blue fill that differs from the card, a uniform
   width (260px max) and sit centered. The default-speed chips get the same fill when not chosen. */
.set-card .plain { display: flex; align-items: center; justify-content: center; width: min(100%, 260px); margin: 8px auto 0; background: #eef2ff; text-align: center; }
.set-card .plain[hidden] { display: none; }
.set-card .plain:hover { background: #e0e7ff; }
.set-card .speed:not(.is-on) { background: #eef2ff; }

/* r367 (Kevin approval 4, 10/27/2026): Clear wipes the text, so it is destructive - red words + red edge */
.plain.danger { color: #b91c1c; border-color: #b91c1c; background: #fff5f5; }
.plain.danger:hover { background: #fee2e2; }