:root {
  --paper: #eae8df;
  --panel: #f4f3ec;
  --ink: #22261f;
  --ink-soft: #565b4c;
  --accent: #46614f;      /* verde-verdigris, capas de bíblias antigas */
  --accent-ink: #2e4038;
  --gold: #a9822f;        /* dourado de folha, para números de versículo */
  --gold-ink: #2b2210;    /* texto sobre fundo dourado */
  --line: #c9c7b6;
  --line-strong: #a9a793;
  --danger: #9c4a2f;
  --highlight: #f1dfa3;
  --highlight-ink: inherit;
  --overlay-backdrop: rgba(0, 0, 0, 0.45);
  --bar-bg: #2e4038;
  --bar-ink: #f4f3ec;
  --selection-bg: #d9e6dc;
  --selection-ink: #22261f;
  --accent-hover: #2e4038;
  --shadow: 0 1px 2px rgba(34, 38, 31, 0.06), 0 6px 20px rgba(34, 38, 31, 0.06);
  --radius: 3px;
  --font-scale: 1;
  --serif: "Spectral", "Iowan Old Style", Georgia, serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* controlos nativos (select, scrollbar, etc.) seguem o tema escolhido na
     app (o toggle ☀️/🌙 manual, não a preferência do SO) — sem isto, um
     telemóvel com o SO em modo claro mas a app em tema escuro mostrava o
     <select> da versão com fundo branco nativo, ignorando --panel/--ink
     abaixo. */
  color-scheme: light;
}

[data-theme="dark"] {
  color-scheme: dark;
  --paper: #1b1c17;
  --panel: #24261f;
  --ink: #e8e6da;
  --ink-soft: #a3a293;
  --accent: #52795f;
  --accent-ink: #a9d2b4;
  --gold: #d4ac54;
  --gold-ink: #2b2210;
  --line: #3a3c33;
  --line-strong: #4d4f43;
  --danger: #d9805e;
  --highlight: #5b4a26;
  --highlight-ink: #f4efd8;
  --overlay-backdrop: rgba(0, 0, 0, 0.65);
  --bar-bg: #32503e;
  --bar-ink: #eef3ea;
  --selection-bg: #33513f;
  --selection-ink: #eaf1e7;
  --accent-hover: #3f624c;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
}

html {
  transition: background 0.15s ease;
}
body {
  transition: background 0.15s ease, color 0.15s ease;
}

body {
  display: flex;
  flex-direction: column;
}

/* ------------------------------------------------------------- cabeçalho */

.topbar {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  grid-template-areas:
    "title nav search buttons"
    "chips chips chips chips";
  align-items: center;
  gap: 14px;
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(var(--panel), var(--paper));
}

.topbar__nav {
  grid-area: nav;
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel);
}

.topbar__nav-btn {
  font-family: var(--sans);
  font-size: calc(13px * var(--font-scale));
  font-weight: 600;
  padding: 6px 16px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.topbar__nav-btn:hover { color: var(--ink); }
.topbar__nav-btn.is-active {
  background: var(--accent);
  color: #f4f3ec;
}

.topbar--planos .searchbar-inline,
.topbar--planos .version-chips-wrap {
  display: none;
}

.searchbar-inline {
  grid-area: search;
  display: flex;
  gap: 6px;
  max-width: 420px;
  width: 100%;
  align-items: center;
  justify-self: end;
}

.searchbar-inline input[type="text"] {
  flex: 1;
  min-width: 0;
  font-family: var(--serif);
  font-size: calc(16px * var(--font-scale));
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
}
.searchbar-inline input[type="text"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* só existe dentro do painel de pesquisa em mobile (ver @media max-width:640px);
   escondido por omissão para não aparecer também na barra normal em ecrã largo. */
#mobileSearchClose { display: none; }

.searchbar-inline button {
  font-family: var(--sans);
  font-size: calc(14px * var(--font-scale));
  font-weight: 600;
  padding: 7px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: #f4f3ec;
  cursor: pointer;
  white-space: nowrap;
}
.searchbar-inline button:hover { background: var(--accent-hover); }

.theme-toggle {
  align-self: center;
  font-size: calc(17px * var(--font-scale));
  line-height: 1;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--ink); }

/* uma pílula só (como .theme-toggle/.topbar__nav), não dois botões
   separados — poupa a borda dupla + o gap entre eles, só um traço a meio a
   separar os dois. */
.font-size-controls {
  align-self: center;
  display: flex;
  align-items: stretch;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel);
  overflow: hidden;
  transition: border-color 0.15s;
}
.font-size-controls:hover { border-color: var(--accent); }

.font-size-btn {
  font-family: var(--sans);
  font-weight: 600;
  font-size: calc(13px * var(--font-scale));
  line-height: 1;
  width: 28px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.font-size-btn:first-child {
  border-right: 1px solid var(--line-strong);
}
.font-size-btn:hover { background: var(--line); color: var(--ink); }
.font-size-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.font-size-btn:disabled:hover { background: transparent; color: var(--ink-soft); }

.account-toggle {
  align-self: center;
  font-family: var(--sans);
  font-size: calc(13px * var(--font-scale));
  font-weight: 600;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.account-toggle:hover { border-color: var(--accent); color: var(--ink); }
.account-toggle--logged {
  background: var(--accent);
  border-color: var(--accent);
  color: #f4f3ec;
  width: 34px;
  padding: 0;
}

.account-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.account-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--sans);
  font-size: calc(13px * var(--font-scale));
  color: var(--ink-soft);
}

.account-field input {
  font-family: var(--serif);
  /* mínimo de 16px: abaixo disso, o Safari/iOS dá zoom automático ao focar
     o campo (e não desfaz sozinho ao desfocar) — era isto que "desencaixava"
     o ecrã ao entrar no formulário de login em mobile. */
  font-size: calc(16px * var(--font-scale));
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}
.account-field input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.account-error {
  font-family: var(--sans);
  font-size: calc(13px * var(--font-scale));
  color: var(--danger);
  margin: 0;
}

.account-submit {
  font-family: var(--sans);
  font-size: calc(14px * var(--font-scale));
  font-weight: 600;
  padding: 9px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: #f4f3ec;
  cursor: pointer;
}
.account-submit:hover { background: var(--accent-hover); }
.account-submit:disabled { opacity: 0.6; cursor: default; }
.account-submit--danger {
  border-color: var(--danger);
  background: var(--danger);
}
.account-submit--danger:hover { opacity: 0.9; }

.account-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.account-divider::before,
.account-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.account-google {
  display: block;
  width: calc(100% - 32px);
  margin: 4px 16px 0;
  font-family: var(--sans);
  font-size: calc(14px * var(--font-scale));
  font-weight: 600;
  padding: 9px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  text-align: center;
}
.account-google:hover { border-color: var(--accent); }

.account-switch {
  text-align: center;
  font-family: var(--sans);
  font-size: calc(13px * var(--font-scale));
  color: var(--ink-soft);
  margin: 14px 16px 16px;
}

.account-link {
  background: none;
  border: none;
  color: var(--accent-ink);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
  font-size: inherit;
  padding: 0 0 0 4px;
}

.account-toggle--logged {
  overflow: hidden;
}
.account-toggle__avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* a foto fica em float:right dentro de um bloco com o seu próprio contexto
   de bloco (display:flow-root) — assim Nome/Apelido encolhem à volta dela
   (usando a altura dos dois campos para uma foto maior), sem tirar largura
   de campo nenhum: por baixo, Biografia/Email continuam com a largura
   inteira do formulário, tal e qual Nome/Apelido teriam sem a foto. */
.profile-header-block {
  display: flow-root;
}
.profile-header-block .account-field + .account-field {
  margin-top: 12px;
}

.profile-avatar-wrap {
  float: right;
  position: relative;
  margin: 0 0 12px 16px;
}

.profile-avatar {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: var(--accent);
  color: #f4f3ec;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: var(--sans);
  font-size: 38px;
  font-weight: 700;
}
.profile-avatar__img { width: 100%; height: 100%; object-fit: cover; }

.profile-avatar__camera {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--ink);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.profile-avatar__camera:hover { border-color: var(--accent); }

.account-field--readonly input {
  color: var(--ink-soft);
  background: var(--paper);
  cursor: default;
  opacity: 0.8;
}

.account-field__label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.account-field__label-row em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
}

.account-field textarea {
  font-family: var(--serif);
  font-size: calc(16px * var(--font-scale)); /* mesmo motivo do zoom automático em .account-field input, acima */
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  resize: vertical;
  min-height: 60px;
}
.account-field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.account-success {
  font-family: var(--sans);
  font-size: calc(13px * var(--font-scale));
  color: var(--accent-ink);
  margin: 0;
}

.profile-danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding: 16px 16px;
}

.profile-delete-btn {
  font-family: var(--sans);
  font-size: calc(13px * var(--font-scale));
  font-weight: 600;
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  padding: 0;
}
.profile-delete-btn:hover { opacity: 0.8; }

.topbar__buttons {
  grid-area: buttons;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar__title {
  grid-area: title;
  font-family: var(--serif);
  font-weight: 600;
  font-size: calc(28px * var(--font-scale));
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--accent-ink);
  /* clicável (vai para a leitura normal, ver #appTitle em app.js) — sem
     nenhum efeito de hover de propósito (pedido explícito), só o cursor
     para indicar que é possível clicar. */
  cursor: pointer;
}

.version-chips-wrap {
  grid-area: chips;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* cópia inline (dentro de reading-header-row, ao lado do seletor de
   livro/capítulo) — escondida por omissão (desktop mantém a cópia do
   topbar); trocam de visibilidade em @media (max-width: 860px) abaixo,
   onde a linha "chips" é removida do grid do topbar para libertar espaço
   vertical. Nunca as duas visíveis ao mesmo tempo. */
.version-chips-wrap--inline {
  display: none;
  grid-area: unset;
  flex: 1 1 160px;
  min-width: 0;
  /* reading-header-row usa align-items:baseline (por causa do "▾" ao lado
     do título) — isso alinha o texto dos chips pela linha de base do
     título grande, que fica muito mais baixa que o topo da linha (título
     tem ascendentes altos, os chips não têm descendentes), empurrando
     visualmente os chips para perto do fundo da linha. align-self:center
     ignora o baseline do container só para este item. Isto sozinho já
     centra certinho no Chrome, mas continuava a aparecer descentrado no
     Safari/iOS — a causa era #readingHeader e .chip não terem
     line-height explícito: com "normal" (o valor por omissão), a altura
     da caixa de texto vem das métricas internas do tipo de letra
     (Spectral/IBM Plex Mono, ambos carregados via Google Fonts), e
     motores diferentes (Blink vs. WebKit) calculam esse "normal" de forma
     ligeiramente diferente para a mesma fonte — por isso o Chromium (usado
     para testar aqui) já mostrava isto centrado antes mesmo desta correção,
     mas o Safari não. Dar um line-height explícito (ver #readingHeader e
     .chip) torna a altura da caixa uma conta fixa (font-size × rácio),
     igual em qualquer motor, e resolve a causa em vez de só sintoma. */
  align-self: center;
}

/* terceira cópia, dentro de #resultsView (ver index.html) — herda
   display:none/flex de .version-chips-wrap--inline (mesma regra de
   visibilidade: só aparece em tablet/mobile), mas não está ao lado de um
   título com baseline diferente como a cópia da reading-header-row, por
   isso os ajustes de flex/alinhamento feitos para lá não fazem sentido
   aqui — ocupa a linha toda, com respiro por baixo antes da lista de
   resultados. */
.version-chips-wrap--results {
  flex: none;
  align-self: auto;
  width: 100%;
  margin: 0 0 14px;
}

.version-chips {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  gap: 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.version-chips::-webkit-scrollbar { display: none; }

.chips-scroll-btn {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--ink-soft);
  font-size: calc(14px * var(--font-scale));
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, opacity 0.15s;
}
.chips-scroll-btn:hover { border-color: var(--accent); color: var(--accent-ink); }
.chips-scroll-btn:disabled { opacity: 0.3; cursor: default; }
.chips-scroll-btn:disabled:hover { border-color: var(--line-strong); color: var(--ink-soft); }

.chip {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: calc(13px * var(--font-scale));
  line-height: 1.2;
  letter-spacing: 0.03em;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-soft);
  cursor: pointer;
  /* transform entra aqui só para o efeito FLIP de reordenar chips ao
     arrastar (ver reorderChipsDuringDrag em app.js) — nenhum outro sítio
     desta app anima transform num .chip diretamente. */
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s ease;
  /* Desliga o scroll nativo por toque de CADA chip (não do contentor
     .version-chips — não precisa, o valor mais restrito de qualquer um
     dos dois já vale) — testado ao vivo que uma mudança de touch-action a
     meio de um toque não é respeitada pelo Chromium (só o valor no início
     da sequência conta), por isso onChipPointerMove (app.js) é que rola a
     barra manualmente em toque enquanto não se sabe se o gesto vai virar
     um arrasto (ver o comentário grande junto a attachChipDragHandlers). */
  touch-action: none;
}

.chip:hover { border-color: var(--accent); color: var(--accent-ink); }

/* Desliga a seleção de texto da página inteira enquanto um gesto de
   reordenar/arrastar chip está em curso (incluindo a espera do
   long-press) — ver attachChipDragHandlers em app.js. Sem isto, "premir e
   segurar" um chip é o mesmo gesto que o browser usa para iniciar seleção
   de texto no conteúdo por baixo (a leitura), e o texto começava a ficar
   selecionado a meio do arrasto. Aplicado ao <body>, não só à barra de
   chips, porque o dedo se move para fora dela ao arrastar. */
.chip-drag-guard {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.chip--active {
  background: var(--accent);
  border-color: var(--accent);
  color: #f4f3ec;
}

.chip--missing {
  opacity: 0.45;
  border-style: dashed;
}

.chip--loading { opacity: 0.6; }

/* Botão "+" no fim da barra, mesmo formato dos chips normais (pedido
   explícito) — só o traço tracejado o distingue visualmente de uma versão
   de facto selecionável. Só existe enquanto houver pelo menos uma versão
   escondida (ver renderVersionChips em app.js). */
.chip--add {
  font-weight: 700;
  border-style: dashed;
  color: var(--ink-soft);
}
.chip--add:hover { border-color: var(--accent); color: var(--accent-ink); }

/* O chip de origem de um arrasto fica visível mas apagado no seu lugar
   (que já pode ter sido reordenado ao vivo) — o "chip-drag-ghost" é que
   segue o dedo/rato e carrega toda a affordance visual do gesto. */
.chip--drag-source { opacity: 0.35; }

.chip-drag-ghost {
  position: fixed;
  z-index: 1200;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
  transition: opacity 0.12s, transform 0.12s;
}

/* Feedback no próprio chip arrastado quando está mesmo em cima do X —
   sugere "vai ser absorvido", sem chegar a mudar de forma (isso é o
   trabalho do .chip-trash-zone abaixo, o alvo é que muda, não o chip). */
.chip-drag-ghost--over-trash {
  opacity: 0.5;
  transform: scale(0.85);
}

/* Alvo PARADO da lixeira (ver trashZoneRectBelowPointer/updateChipDrag em
   app.js) — aparece por baixo de onde o PONTEIRO estava assim que o
   arrasto desce o suficiente, e fica fixo aí: só esconde a versão se o
   chip for arrastado até CIMA dele, não só por ter descido — pedido
   explícito do utilizador depois de testar a 1ª versão (nessa, descer já
   bastava). Pequeno de propósito (26px) e um "✕" simples, não um ícone de
   lixeira — dois pedidos à parte do utilizador depois de ver a 2ª versão.
   Começa com opacidade 0 e ligeiramente encolhido: `.chip-trash-zone--shown`
   (acrescentada num frame seguinte, ver app.js) é que dispara a transição —
   sem isso o alvo aparecia instantaneamente, sem suavidade nenhuma. */
.chip-trash-zone {
  position: fixed;
  z-index: 1190;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--danger) 45%, transparent);
  color: var(--danger);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.18s ease-out, transform 0.18s ease-out, background 0.12s, color 0.12s;
}

.chip-trash-zone--shown {
  opacity: 1;
  transform: scale(1);
}

/* "armed" = o chip arrastado está mesmo em cima do X neste instante —
   largar agora esconde a versão. Especificidade igual a --shown, mas
   declarada depois no ficheiro — o transform daqui é que vence enquanto
   os dois estiverem presentes ao mesmo tempo. */
.chip-trash-zone--armed {
  background: var(--danger);
  color: #f4f3ec;
  transform: scale(1.3);
}

/* Popover do botão "+" (ver openChipAddMenu em app.js) — mesmo padrão
   visual/de posicionamento de .annotation-popover (position:fixed, criado
   ao abrir, removido ao fechar), mas com uma lista de itens em vez de
   texto livre. */
.chip-add-menu {
  position: fixed;
  z-index: 1150;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  /* Entrada suave (ver openChipAddMenu em app.js) — começa ligeiramente
     encolhido/deslocado e transparente; ganhar .chip-add-menu--shown num
     requestAnimationFrame a seguir é que dispara a transição. Mesmo
     padrão já usado em .chip-trash-zone/--shown. */
  opacity: 0;
  transform: scale(0.96) translateY(-4px);
  transform-origin: top left;
  transition: opacity 0.14s ease-out, transform 0.14s ease-out;
}

.chip-add-menu--shown {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.chip-add-menu__item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: calc(13px * var(--font-scale));
  text-align: left;
  cursor: pointer;
}
.chip-add-menu__item:hover { background: var(--highlight); color: var(--highlight-ink); }

.chip-add-menu__id {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-weight: 700;
  color: var(--accent-ink);
}

.chip-add-menu__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-soft);
}

/* item ativo no dropdown de troca de tradução (openChipVersionPicker,
   leitura guiada em mobile) — mesma lista/visual do menu do "+" acima, só
   com um "✓" à direita para marcar a tradução já em leitura; os outros
   itens ficam iguais aos do "+" (sem marca nenhuma). */
.chip-add-menu__item--active .chip-add-menu__name {
  color: var(--ink);
  font-weight: 600;
}
.chip-add-menu__check {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--accent-ink);
  font-weight: 700;
}

/* ------------------------------------------------------------- layout */

.layout {
  flex: 1;
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 0;
  position: relative;
  transition: grid-template-columns 0.15s ease;
}

.layout--sidebar-collapsed {
  grid-template-columns: 0px 1fr;
}
.layout--sidebar-collapsed .sidebar {
  overflow: hidden;
  padding-left: 0;
  padding-right: 0;
  border-right: none;
}

/* ------------------------------------------------------------ sidebar */

.sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--line);
  background: var(--panel);
}

.sidebar-toggle-row {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 8px 10px 16px;
  border-bottom: 1px solid var(--line);
}
.sidebar-toggle-row__label {
  font-family: var(--mono);
  font-size: calc(12px * var(--font-scale));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.sidebar-collapse-btn {
  flex: 0 0 auto;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink-soft);
  border-radius: var(--radius);
  width: 24px;
  height: 24px;
  font-size: calc(14px * var(--font-scale));
  line-height: 1;
  cursor: pointer;
}
.sidebar-collapse-btn:hover { border-color: var(--accent); color: var(--accent-ink); }

.sidebar-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 12px 40px;
}

.sidebar-expand-btn {
  position: absolute;
  top: 12px;
  left: 0;
  z-index: 10;
  width: 20px;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-left: none;
  border-radius: 0 6px 6px 0;
  background: var(--panel);
  color: var(--ink-soft);
  font-size: calc(14px * var(--font-scale));
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.sidebar-expand-btn:hover { color: var(--accent-ink); border-color: var(--accent); }
.sidebar-expand-btn.hidden { display: none; }

.sidebar-testament-tabs {
  flex: 0 0 auto;
  display: flex;
  gap: 2px;
  margin: 10px 12px 0;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper);
}
.sidebar-testament-tab {
  flex: 1;
  font-family: var(--sans);
  font-size: calc(11.5px * var(--font-scale));
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 6px 4px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.sidebar-testament-tab:hover { color: var(--ink); }
.sidebar-testament-tab--active {
  background: var(--accent);
  color: #f4f3ec;
}

.book-list { display: flex; flex-direction: column; }
.book-row { display: flex; flex-direction: column; }

.book-btn {
  text-align: left;
  border: none;
  background: transparent;
  font-family: var(--serif);
  font-size: calc(15.5px * var(--font-scale));
  color: var(--ink);
  padding: 5px 8px;
  border-radius: var(--radius);
  cursor: pointer;
}
.book-btn:hover { background: var(--paper); }
.book-btn--expanded { background: var(--paper); }
.book-btn--active {
  background: var(--accent);
  color: #f4f3ec;
}

/* Truque de "altura automática animável": uma grid de UMA linha/coluna
   cujo grid-template-rows anima entre 0fr (fechado) e 1fr (a altura
   natural do conteúdo lá dentro) — não precisa de medir nada em JS, ao
   contrário de animar height:auto diretamente (impossível em CSS puro).
   .book-chapter-grid (o filho direto) tem overflow:hidden para o
   conteúdo não aparecer por cima de nada enquanto a linha ainda está a
   crescer. */
.book-chapter-grid-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.22s ease;
}
.book-chapter-grid-wrap--shown { grid-template-rows: 1fr; }

.book-chapter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
  gap: 3px;
  overflow: hidden;
  min-height: 0;
  /* padding, não margin — margin de um filho "escapa" ao overflow:hidden
     do próprio elemento (é espaço FORA da caixa), o que deixava um
     resíduo visível mesmo com a linha de grid encolhida a 0fr. */
  padding: 4px 4px 10px;
}
.book-chapter-grid__cell {
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  font-family: var(--sans);
  font-size: calc(12.5px * var(--font-scale));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.book-chapter-grid__cell:hover { border-color: var(--accent); color: var(--accent-ink); }
.book-chapter-grid__cell--active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--gold-ink);
  font-weight: 600;
}

/* -------------------------------------------------------------- main */

main.content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.results-view {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 28px 60px;
}

#resultsContent { transition: opacity 0.15s ease; }
/* trocar de versão (chips) com os resultados já na tela reconstrói o
   conteúdo inteiro (ver refreshResultsForVersionChange em app.js) — esta
   classe baixa a opacidade por instantes durante a troca, para parecer uma
   atualização suave em vez de o conteúdo piscar fora/dentro. */
.results-content--updating { opacity: 0.4; }

.reading-view {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.reading-fixed {
  flex: 0 0 auto;
  /* padding igual nos 4 lados — ver comentário equivalente no bloco mobile
     (@media max-width:640px) abaixo: sem padding em baixo, o espaço à
     volta da reading-header-row ficava todo a sobrar por baixo, parecendo
     a linha "colada" ao topo. Vertical (14px) alinhado ao mesmo valor do
     .topbar (gap entre título/chips e padding antes do divisor) — antes
     era 20px aqui contra ~11px lá em cima, um salto que não seguia
     nenhuma escala de espaçamento consistente. */
  padding: 14px 28px;
  background: var(--paper);
  border-bottom: 1px solid var(--line-strong);
}

.reading-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 28px 60px;
}

.reading-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.reading-header-btn {
  display: flex;
  align-items: baseline;
  gap: 6px;
  border: none;
  background: none;
  /* só a componente horizontal do truque de aumentar a área de hover sem
     empurrar o resto da linha (padding positivo + margin negativo do mesmo
     valor, cancela-se em largura). A componente vertical foi removida: um
     item de flex com margin negativo tem uma "margin box" mais pequena do
     que a sua "border box" (a margem negativa é subtraída, não somada) —
     isso desalinhava este botão ~2px acima do centro real da linha assim
     que outro item (as versões) passou a partilhá-la, ficando visível como
     "o nome do livro está mais alto que o resto". */
  padding: 0 4px;
  margin: 0 -4px;
  cursor: pointer;
  border-radius: var(--radius);
}
.reading-header-btn:hover { background: var(--panel); }
.reading-header-btn:hover #readingHeader { color: var(--accent); }

#readingHeader {
  font-family: var(--serif);
  font-size: calc(26px * var(--font-scale));
  font-weight: 600;
  line-height: 1.2;
  color: var(--accent-ink);
  margin: 0;
  transition: color 0.15s;
}

.reading-header-chevron {
  font-size: calc(14px * var(--font-scale));
  line-height: 1.2;
  color: var(--ink-soft);
  transform: translateY(-1px);
}

.chapter-controls {
  display: flex;
  gap: 6px;
}
.chapter-controls button {
  font-family: var(--mono);
  font-size: calc(14px * var(--font-scale));
  border: 1px solid var(--line-strong);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 5px 10px;
  cursor: pointer;
  color: var(--ink-soft);
}
.chapter-controls button:hover { border-color: var(--accent); color: var(--accent-ink); }

.chapter-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--ink-soft);
  font-size: calc(20px * var(--font-scale));
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  opacity: 0.85;
  transition: opacity 0.15s, border-color 0.15s, color 0.15s;
  z-index: 5;
}
.chapter-nav-arrow:hover { opacity: 1; border-color: var(--accent); color: var(--accent-ink); }
.chapter-nav-arrow:disabled { opacity: 0.2; cursor: default; }
.chapter-nav-arrow:disabled:hover { border-color: var(--line-strong); color: var(--ink-soft); }
.chapter-nav-arrow--prev { left: 10px; }
.chapter-nav-arrow--next { right: 10px; }

/* --------------------------------------------------- picker de capítulo */

.chapter-picker-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.chapter-picker-overlay.hidden { display: none; }

.chapter-picker {
  width: 100%;
  max-width: 300px;
  max-height: 78vh;
  background: var(--panel);
  color: var(--ink);
  border-radius: 14px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chapter-picker__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.chapter-picker__back {
  flex: 0 0 auto;
  border: none;
  background: none;
  font-size: calc(16px * var(--font-scale));
  color: var(--ink-soft);
  cursor: pointer;
  padding: 2px 4px;
}
.chapter-picker__back:hover { color: var(--accent-ink); }
.chapter-picker__back.hidden { display: none; }
.chapter-picker__title {
  flex: 1;
  border: none;
  background: none;
  padding: 0;
  text-align: left;
  font-family: var(--mono);
  font-size: calc(12px * var(--font-scale));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
}
.chapter-picker__title:hover { color: var(--accent-ink); }
.chapter-picker__cancel {
  flex: 0 0 auto;
  border: none;
  background: none;
  font-family: var(--sans);
  font-size: calc(14px * var(--font-scale));
  color: var(--accent);
  cursor: pointer;
  padding: 2px 4px;
}
.chapter-picker__cancel:hover { color: var(--accent-ink); }

.chapter-picker__books {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 0;
}
.chapter-picker__books.hidden { display: none; }

.chapter-picker__book-group-label {
  font-family: var(--mono);
  font-size: calc(11px * var(--font-scale));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 10px 14px 4px;
}

.chapter-picker__book-row {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  font-family: var(--serif);
  font-size: calc(16px * var(--font-scale));
  color: var(--ink);
  padding: 7px 14px;
  cursor: pointer;
}
.chapter-picker__book-row:hover { background: var(--paper); }
.chapter-picker__book-row--active {
  background: var(--gold);
  color: var(--gold-ink);
  font-weight: 600;
}

.chapter-picker__grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line);
  overflow-y: auto;
  padding: 1px;
}
.chapter-picker__grid.hidden { display: none; }

.chapter-picker__cell {
  aspect-ratio: 1;
  border: none;
  background: var(--panel);
  color: var(--ink);
  font-family: var(--sans);
  font-size: calc(16px * var(--font-scale));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chapter-picker__cell:hover { background: var(--paper); }
.chapter-picker__cell--active {
  background: var(--gold);
  color: var(--gold-ink);
  font-weight: 600;
}

@media (min-width: 640px) {
  .chapter-picker {
    max-width: min(80vw, 640px);
    max-height: 82vh;
  }
  .chapter-picker__grid {
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  }
}

/* signature element: colunas de leitura tipo "aparato crítico" */

.reading-columns {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(320px, 1fr);
  gap: 0;
}

.reading-col {
  padding: 16px 20px;
  border-right: 1px solid var(--line);
}
.reading-col:last-child { border-right: none; }

.reading-col__label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--mono);
  font-size: calc(12px * var(--font-scale));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
  margin-bottom: 10px;
}

.verse-block {
  font-family: var(--serif);
  font-size: calc(18px * var(--font-scale));
  line-height: 1.75;
  color: var(--ink);
  margin: 0 0 14px;
}
/* :last-of-type, não :last-child — o botão "Copiar" (ref-card__copy) que
   vem a seguir no DOM é sempre o último filho de facto quando há um, o que
   fazia :last-child nunca corresponder e este parágrafo continuar com os
   14px de margin-bottom normais entre versículos, empurrando o botão para
   longe do texto. :last-of-type ignora o botão (tag diferente, <button> vs
   <p>) e continua a apanhar o último parágrafo de texto mesmo com ele a
   seguir. */
.verse-block:last-of-type { margin-bottom: 0; }

.verse-block--q1,
.verse-block--q2 {
  margin: 0 0 4px;
}
.verse-block--q1 .verse-unit,
.verse-block--q2 .verse-unit {
  display: block;
}
.verse-block--q1 { padding-left: 1.1em; }
.verse-block--q2 { padding-left: 2.2em; }

.verse-description {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(15px * var(--font-scale));
  color: var(--ink-soft);
  margin: 2px 0 12px;
}

.verse-subtitle {
  font-family: var(--sans);
  font-size: calc(14px * var(--font-scale));
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent-ink);
  margin: 18px 0 8px;
}
.verse-subtitle:first-child { margin-top: 4px; }

/* Etiqueta de interlocutor (ex. Cânticos: "A Amada"/"Esposa"/"Coro" —
   quem está a falar), de fronteira (antes do verso) ou a meio dele —
   deliberadamente DIFERENTE de .verse-subtitle: são conceitos distintos
   ("quem fala" vs. "de que secção é isto", ex. ARA Ct 1:2 tem os dois no
   mesmo verso, "Primeiro cântico" + "Esposa") e o utilizador pediu para
   não parecerem a mesma coisa. display:block força linha própria dentro
   do fluxo inline do próprio .verse-unit quando cai a meio de verso, sem
   quebrar a estrutura do parágrafo à volta (ver "Cânticos" no CLAUDE.md).
   */
.verse-inline-label {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(14px * var(--font-scale));
  color: var(--ink-soft);
  margin: 10px 0 4px;
}

.verse-num {
  font-family: var(--mono);
  color: var(--gold);
  font-size: calc(12px * var(--font-scale));
  margin-right: 2px;
  margin-left: 8px;
}
.verse-num:first-child { margin-left: 0; }

/* Destaques do utilizador. Blend com transparent (não com --panel) para
   funcionar em ambos os temas sem depender da cor de fundo do painel.
   Ordem no ficheiro importa: .verse-unit--selected e .verse-highlight usam
   o shorthand `background`, especificidade igual (uma classe cada) — a
   última declarada vence por propriedade quando coexistem no mesmo
   elemento. Esta regra vem primeiro de propósito, para a prioridade visual
   ficar seleção > salto de busca > marca de destaque (mais "de fundo",
   é o estado persistente). */
.verse-unit--marked {
  background-color: color-mix(in srgb, var(--mark-color, transparent) 35%, transparent);
  border-radius: 2px;
}

.verse-highlight {
  background: var(--highlight);
  color: var(--highlight-ink);
  border-radius: 2px;
}

/* Anotações — tracejado leve por baixo do texto, não border-bottom: .verse-unit
   é um <span> inline (sem display definido) dentro de prosa que quebra
   linha, e um border-bottom nessa situação só pinta sob o último fragmento
   da linha (mesma classe de bug do padding/margin negativo já documentada
   nesta folha — pintura fora do espaço reservado no fluxo). text-decoration
   segue texto que quebra corretamente e não é uma propriedade `background`,
   por isso não compete com a prioridade seleção/busca/marca acima — coexiste
   com qualquer uma delas independente da ordem de declaração. */
.verse-unit--annotated {
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-color: var(--ink-soft);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.empty-hint {
  color: var(--ink-soft);
  font-size: calc(15px * var(--font-scale));
  font-style: italic;
}

.empty-hint--big {
  font-size: calc(16px * var(--font-scale));
  padding: 24px 20px;
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  grid-column: 1 / -1;
}
.empty-hint--big code {
  font-style: normal;
  font-family: var(--mono);
  background: var(--paper);
  padding: 1px 5px;
  border-radius: 2px;
  border: 1px solid var(--line);
}

/* -------------------------------------------------------------- resultados */

.hidden { display: none !important; }

.results-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.results-toolbar button {
  font-family: var(--mono);
  font-size: calc(13px * var(--font-scale));
  border: 1px solid var(--line-strong);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 6px 10px;
  cursor: pointer;
  color: var(--ink-soft);
}

.results-title {
  font-family: var(--serif);
  font-size: calc(19px * var(--font-scale));
  color: var(--accent-ink);
  margin: 0 0 14px;
}

.results-copy-all {
  font-family: var(--mono);
  font-size: calc(13px * var(--font-scale));
  border: 1px solid var(--accent);
  background: var(--panel);
  color: var(--accent-ink);
  border-radius: var(--radius);
  padding: 6px 12px;
  cursor: pointer;
  height: fit-content;
}
#copyAllBtn {
  border-color: var(--accent);
  background: var(--panel);
  color: var(--accent-ink);
  padding: 6px 12px;
}
#copyAllBtn:hover { background: var(--accent); color: #f4f3ec; }
#copyAllBtn:disabled,
#copyAllBtn.hidden { display: none; }

.ref-card__copy {
  font-family: var(--mono);
  font-size: calc(12px * var(--font-scale));
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-soft);
  border-radius: var(--radius);
  padding: 3px 9px;
  cursor: pointer;
  margin: 6px 0 14px;
}
.ref-card__copy:hover { border-color: var(--accent); color: var(--accent-ink); }

#backToResults {
  font-family: var(--mono);
  font-size: calc(13px * var(--font-scale));
  border: 1px solid var(--line-strong);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 5px 10px;
  cursor: pointer;
  color: var(--ink-soft);
}
#backToResults:hover { border-color: var(--accent); color: var(--accent-ink); }

.ref-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 14px 18px 18px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.ref-card__cite {
  font-family: var(--mono);
  font-size: calc(14px * var(--font-scale));
  color: var(--accent-ink);
  letter-spacing: 0.02em;
  display: inline-block;
  margin-right: 12px;
}

.ref-card__jump {
  font-family: var(--sans);
  font-size: calc(13px * var(--font-scale));
  border: none;
  background: none;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.ref-card__version { margin-top: 12px; }
.ref-card__version-label {
  font-family: var(--mono);
  font-size: calc(11.5px * var(--font-scale));
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.verse-block mark {
  background: var(--highlight);
  color: var(--highlight-ink);
  border-radius: 2px;
}

.results-breakdown {
  font-family: var(--mono);
  font-size: calc(12.5px * var(--font-scale));
  color: var(--ink-soft);
  margin: 0 0 14px;
}

/* ---------------------------------------------------------------- toast */

.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bar-bg);
  color: var(--bar-ink);
  font-size: calc(14px * var(--font-scale));
  padding: 10px 18px;
  border-radius: var(--radius);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  max-width: 480px;
  text-align: center;
  box-shadow: var(--shadow);
  pointer-events: none;
  /* sem isto ficava sem contexto de stacking próprio (z-index:auto) — a
     pílula flutuante mobile (.mobile-tabbar, z-index:60) e os overlays
     (z-index:1000) tapavam o toast por cima, mesmo ele sendo o elemento
     mais "recente"/importante no ecrã. Acima de tudo o resto. */
  z-index: 1100;
}
.toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* -------------------------------------------------------------- responsive */

/* barra de navegação flutuante só para mobile (Ler/Planos/Conta) — ver
   dentro de @media (max-width: 640px) o estilo real; aqui só garante que
   fica escondida em ecrãs maiores. */
.mobile-tabbar { display: none; }

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr !important; }
  .sidebar,
  .sidebar-expand-btn { display: none; }
  .reading-columns { grid-auto-flow: row; }
  .reading-col { border-right: none; border-bottom: 1px solid var(--line); }

  /* as versões saem da sua própria linha no topbar e passam para dentro de
     reading-header-row, ao lado do seletor de livro/capítulo — ver
     .version-chips-wrap--inline acima e a remoção de "chips" do
     grid-template-areas do .topbar nos blocos de tablet/mobile abaixo.
     --plan (chips da leitura guiada de um plano) tem de ficar de fora
     deste :not() — é a cópia da própria reading-header-row, não uma
     alternativa dela, e sua visibilidade já é controlada à parte por JS
     (.hidden, ver .version-chips-wrap--plan acima); sem esta exceção, esta
     regra (mais específica que a de lá) prendia os chips do plano em
     display:none em qualquer largura ≤860px, mesmo depois do JS remover
     .hidden — bug real reportado pelo utilizador. */
  .version-chips-wrap:not(.version-chips-wrap--inline):not(.version-chips-wrap--plan) { display: none; }
  .version-chips-wrap--inline { display: flex; }
}

/* leitura guiada de um plano usa sempre uma única versão (chips próprios
   em #planReadingVersionWrap, ver .version-chips-wrap--plan abaixo) — a
   cópia normal de chips (multi-seleção) não faz sentido aí, mesmo
   tratamento já dado à cópia do topbar (.topbar--plan-focus
   .version-chips-wrap, mais abaixo). */
.layout--plan-focus .version-chips-wrap--inline { display: none; }

/* barra de chips da leitura guiada — mesmo visual das cópias de
   .version-chips-wrap--inline (chips em pílula, mesmo tamanho/gap), mas
   ao contrário delas fica visível em QUALQUER largura de ecrã, não só
   ≤860px: aqui não há uma cópia alternativa no topbar a mostrar as
   versões (a leitura guiada só usa uma versão de cada vez, nunca faz
   sentido gerir isso na barra multi-seleção do topbar). Visibilidade
   controlada por JS (updatePlanReadingBar, como plan-reading-bar__exit/
   __progress ao lado), não por @media. */
.version-chips-wrap--plan {
  grid-area: unset;
  flex: 1 1 160px;
  min-width: 0;
  align-self: center;
}

/* mobile (≤640px, não tablet — pedido explícito do utilizador): a barra
   inteira de chips da leitura guiada ocupava espaço demais só para mostrar
   1 tradução ativa entre 21 possíveis. Só o chip ativo fica visível, com um
   "▾" (mesmo glifo do chevron de #readingHeader, mesma linguagem visual de
   "toque para abrir um seletor") — tocar nele abre openChipVersionPicker
   (app.js), um dropdown para trocar de tradução, em vez de
   selectPlanReadingVersion direto como nas outras larguras. Os botões de
   scroll/"+" não fazem sentido com um só chip visível, escondidos também.
   Um long-press ainda arrasta o chip até o alvo de esconder (mesmo gesto
   de sempre, ver attachChipDragHandlers) — não tocado por este ajuste, só
   o toque curto (clique) ganha o comportamento novo.

   Bug real à parte, achado ao testar num telemóvel real, pré-existente a
   este ajuste (reproduzido também com a fileira inteira de chips forçada
   de volta): .version-chips-wrap--plan mantinha flex:1 1 160px mesmo aqui
   — cresce até um mínimo de 160px (mais o que sobrar de espaço na linha)
   independentemente do conteúdo lá dentro, e essa largura reivindicada já
   chegava a empurrar "1 DE 3" (#planReadingProgress) para fora da linha
   (flex-wrap:wrap em .reading-header-row), caindo para uma 2ª linha
   sozinho. Com só 1 chip pequeno visível nesta largura, não faz sentido
   continuar a reservar 160px — flex:0 1 auto deixa a caixa abraçar só o
   tamanho do próprio chip, devolvendo espaço de sobra a "1 DE 3". */
@media (max-width: 640px) {
  .version-chips-wrap--plan {
    flex: 0 1 auto;
  }
  .version-chips-wrap--plan .chips-scroll-btn,
  .version-chips-wrap--plan .chip--add {
    display: none;
  }
  .version-chips-wrap--plan .chip:not(.chip--active) {
    display: none;
  }
  .version-chips-wrap--plan .chip--active {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .version-chips-wrap--plan .chip--active::after {
    content: "▾";
    font-size: 0.7em;
    opacity: 0.85;
  }
}

/* tablet: ainda largo demais para o layout mobile (que troca o nav Ler|
   Planos pela pílula flutuante), mas title+nav+search+buttons numa só
   linha já não cabem depois do botão de Destaques — "nav" ganha a sua
   própria linha em vez de continuar espremido com os outros. Usa o mesmo
   breakpoint (860px) já estabelecido acima para este intervalo. */
@media (min-width: 641px) and (max-width: 860px) {
  /* title+nav+buttons cabem numa só linha se a pesquisa (que já pode
     encolher bastante, mas não o suficiente aqui) sair dessa linha — em
     vez de tirar o nav (1ª tentativa, tornava "Ler | Planos" numa linha à
     parte), tira-se antes a pesquisa, com a mesma ordem já usada em mobile
     (título+nav+botões, depois versões, depois pesquisa). */
  .topbar {
    grid-template-columns: auto auto 1fr;
    grid-template-areas:
      "title nav buttons"
      "search search search";
  }
  .searchbar-inline { justify-self: stretch; max-width: none; }
  /* título+nav+botões espremidos na mesma linha — menos espaço para o
     título do que no desktop (28px), para não voltar a quebrar linha. */
  .topbar__title { font-size: calc(22px * var(--font-scale)); }
}

@media (max-width: 640px) {
  /* "Ler"/"Planos" e a conta mudam-se para a barra flutuante debaixo —
     evita a segunda linha do topbar a espremer-se ("Ler | Planos" a cair
     sozinho para baixo do título). */
  .topbar {
    grid-template-columns: auto 1fr;
    grid-template-areas: "title buttons";
    padding: 14px 14px 12px;
    gap: 10px;
  }
  .topbar__title { font-size: calc(19px * var(--font-scale)); }
  .topbar__nav { display: none; }
  .account-toggle { display: none; }

  /* A pesquisa deixa de reservar uma linha inteira do topbar (ganha espaço
     para o texto de leitura) — vira um painel acionado pela lupa na pílula
     flutuante (#mobileSearchToggle). Fica ANCORADA por cima da pílula (não
     no topo do ecrã): a pílula continua visível por baixo, e no mobile o
     teclado abre já perto do campo em vez de longe, lá em cima. 82px =
     14px (offset da pílula ao fundo) + ~58px (altura da pílula) + ~10px de
     folga. Fica sempre no DOM (não "display:none") para a transição de
     opacidade/deslize funcionar — pointer-events:none enquanto fechada
     evita que fique clicável por cima do texto por trás.
     --mobile-kb-inset (definida por syncMobileChromeToKeyboard em app.js,
     via a visualViewport API) soma a altura do teclado do telemóvel: sem
     isto, abrir a pesquisa focava o campo mas o teclado tapava por
     completo tanto o painel como a pílula por baixo dele — "bottom" fixo
     é relativo à viewport de layout, que o iOS/Android não encolhem
     quando o teclado aparece, só a "visual viewport" visível por cima
     dele. */
  .searchbar-inline {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(82px + var(--mobile-kb-inset, 0px));
    z-index: 60;
    max-width: none;
    padding: 8px 8px 8px 14px;
    background: var(--panel);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .searchbar-inline.mobile-search--open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  #mobileSearchClose {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--panel);
    color: var(--ink-soft);
    font-size: 15px;
    cursor: pointer;
  }

  /* minimalista: só ícones, sem texto por baixo — barra compacta e
     centrada em vez de esticada de ponta a ponta. --mobile-kb-inset (ver
     comentário em .searchbar-inline acima) sobe a pílula junto com o
     painel de pesquisa quando o teclado do telemóvel está aberto. */
  .mobile-tabbar {
    display: flex;
    position: fixed;
    left: 50%;
    bottom: calc(14px + var(--mobile-kb-inset, 0px));
    transform: translateX(-50%);
    z-index: 40;
    gap: 6px;
    padding: 6px;
    background: var(--panel);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    box-shadow: var(--shadow);
    /* a pílula de seleção (grupo --selection) pode não caber toda no ecrã —
       em vez de quebrar para uma 2ª linha (o que ficava mal), desliza para
       os lados; sem barra de scroll visível, como as pílulas nativas do
       iOS. Inofensivo no grupo de navegação normal, que já cabe sempre. */
    max-width: calc(100vw - 24px);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .mobile-tabbar::-webkit-scrollbar { display: none; }
  .mobile-tabbar__group { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
  .mobile-tabbar__btn {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
  }
  .mobile-tabbar__icon { font-size: 21px; line-height: 1; display: inline-flex; }
  .mobile-tabbar__icon svg { width: 22px; height: 22px; }
  .mobile-tabbar__icon--avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
  }
  .mobile-tabbar__label { display: none; }
  .mobile-tabbar__btn.is-active {
    background: var(--accent);
    color: #f4f3ec;
  }

  /* pílula de ações da seleção de versículos — mesmo container/estilo da
     pílula de navegação (troca de conteúdo, não uma 2ª pílula à parte, ver
     updateSelectionBar em app.js), mas os botões aqui mostram ícone+texto
     em coluna, como o menu nativo de seleção de texto do iOS. */
  .mobile-tabbar__group--selection .mobile-tabbar__btn {
    width: auto;
    height: 46px;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    border-radius: 12px;
    padding: 5px 10px 4px;
    white-space: nowrap;
  }
  .mobile-tabbar__group--selection .mobile-tabbar__icon svg { width: 18px; height: 18px; }
  .mobile-tabbar__group--selection .mobile-tabbar__label {
    display: block;
    font-size: 9px;
    font-family: var(--sans);
    font-weight: 600;
    letter-spacing: 0.01em;
  }
  .mobile-tabbar__swatches {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 0 10px 0 6px;
    margin-right: 2px;
    border-right: 1px solid var(--line-strong);
  }
  .mobile-tabbar__swatches button.highlight-swatch { width: 22px; height: 22px; }

  .searchbar-inline { justify-self: stretch; max-width: none; }
  .searchbar-inline input[type="text"] { font-size: calc(16px * var(--font-scale)); padding: 6px 10px; }
  .searchbar-inline button { font-size: calc(13px * var(--font-scale)); padding: 6px 10px; }

  .results-view { padding: 14px 14px 90px; }
  /* padding igual dos 4 lados: a versão anterior (14px 14px 0, sem padding
     em baixo) deixava a reading-header-row "colada" ao topo do bloco fixo,
     com todo o espaço à volta a sobrar por baixo — parecia (e via-se bem
     com as versões agora nesta linha) que a linha estava desalinhada para
     cima, quando na verdade era o espaço à sua volta que era assimétrico. */
  .reading-fixed { padding: 14px; }
  .reading-scroll { padding: 12px 14px 90px; }

  /* reading-header-row fica em flex-row+wrap (herda da regra base): o
     seletor de livro/capítulo e a cópia inline das versões tentam caber na
     mesma linha (pedido do utilizador), só quebrando para uma 2ª linha
     quando não há espaço — as versões, por sua vez, já rolam
     horizontalmente dentro do seu próprio container quando não cabem
     todas. */
  #readingHeader { font-size: calc(21px * var(--font-scale)); }
  .chapter-controls { justify-content: space-between; }
  .chapter-controls button { flex: 1; text-align: center; }

  .reading-col { padding: 12px 14px; }
  .verse-block { font-size: calc(17px * var(--font-scale)); line-height: 1.7; }

  .chapter-nav-arrow { width: 36px; height: 36px; font-size: calc(18px * var(--font-scale)); }
  .chapter-nav-arrow--prev { left: 4px; }
  .chapter-nav-arrow--next { right: 4px; }

  .ref-card { padding: 12px 14px 14px; }
  .ref-card__cite { display: block; margin-bottom: 6px; }

  .results-toolbar button { flex: 1 1 auto; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

.verse-unit {
  cursor: pointer;
  border-radius: 2px;
  padding: 1px 2px;
  /* sem margin negativo (era -1px -2px, a cancelar o padding em largura):
     esse truque não reserva espaço no fluxo do texto para o padding, então
     o padding de um verso ficava pintado por cima do espaço do vizinho —
     invisível com fundo transparente, mas visível assim que dois versos
     adjacentes têm cores de destaque diferentes (uma cor "sangrava" para
     cima do número do verso seguinte). Mesma causa raiz já corrigida em
     .reading-header-btn. */
}
.verse-unit:hover { background: rgba(70, 97, 79, 0.08); }
.verse-unit--selected {
  background: var(--selection-bg);
  color: var(--selection-ink);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* leitura guiada de um plano: versos fora do intervalo do dia ficam
   apagados mas legíveis, em vez de realçar os que fazem parte (evita a
   sensação de "por que é que só estes é que estão marcados"). */
.verse-unit--dim { opacity: 0.45; }
.verse-unit--dim:hover { opacity: 0.7; }

.verse-selection-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 28px;
  background: var(--bar-bg);
  color: var(--bar-ink);
  font-family: var(--mono);
  font-size: calc(14px * var(--font-scale));
}
@media (max-width: 640px) {
  /* a barra de seleção "de sempre" (desktop) fica de fora em mobile — as
     mesmas ações já vivem dentro da pílula flutuante (#mobileTabbar). Tem
     de vir DEPOIS da regra base acima (mesma especificidade — uma classe —
     por isso a ordem no ficheiro decide; posto antes, a regra base ganhava
     e a barra continuava visível por trás da pílula). */
  .verse-selection-bar { display: none; }
}
.verse-selection-actions { display: flex; gap: 8px; }
.verse-selection-actions button {
  font-family: var(--sans);
  font-size: calc(14px * var(--font-scale));
  font-weight: 600;
  padding: 6px 14px;
  border: 1px solid rgba(244, 243, 236, 0.4);
  border-radius: var(--radius);
  background: transparent;
  color: var(--bar-ink);
  cursor: pointer;
}
.verse-selection-actions button:hover { background: rgba(244, 243, 236, 0.15); }

/* ------------------------------------------------------------ destaques */

.verse-highlight-swatches {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 8px;
  margin-right: 4px;
  border-right: 1px solid rgba(244, 243, 236, 0.3);
}

/* especificidade igual a ".verse-selection-actions button" (1 classe + 1
   elemento) — declarada depois, por isso vence por ordem no ficheiro e
   substitui o padding/borda genéricos dos outros botões da barra. */
button.highlight-swatch {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid rgba(244, 243, 236, 0.5);
  border-radius: 50%;
  background-color: var(--mark-color);
  cursor: pointer;
}
button.highlight-swatch--active { box-shadow: 0 0 0 2px var(--bar-ink); }

.highlights-toggle {
  align-self: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s;
}
.highlights-toggle:hover { border-color: var(--accent); }
/* movida para aqui (era antes um "display:none" dentro do @media
   max-width:640px, lá em cima) — precisa de vir DEPOIS da regra base acima:
   mesma especificidade (uma classe), a última no ficheiro vence,
   independentemente de qual delas está dentro de @media. Estava a
   perder para a regra base por estar antes dela, deixando o círculo de
   destaques visível no topbar em mobile (deveria só existir no botão
   "Destaques" da pílula flutuante, #mobileTabHighlights). */
@media (max-width: 640px) {
  .highlights-toggle { display: none; }
}
.highlights-toggle__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--mark-color, #f1dfa3);
  border: 1px solid rgba(0, 0, 0, 0.15);
}
/* sem sessão: um círculo cinza preenchido sobre o fundo creme do botão
   tinha pouco contraste e passava por "não renderizou" — um contorno
   tracejado e vazio é um sinal visual claramente diferente (e intencional)
   de "ainda não há destaque nenhum", em vez de uma cor apagada. */
.highlights-toggle__dot--empty {
  background-color: transparent;
  border: 1.5px dashed var(--ink-soft);
}

.highlights-list { display: flex; flex-direction: column; gap: 10px; }
.highlight-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.highlight-row:last-child { border-bottom: none; }
.highlight-row__picker {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: none;
  cursor: pointer;
  flex: 0 0 auto;
}
.highlight-row__presets { display: flex; gap: 4px; flex: 0 0 auto; }
.highlight-row__preset {
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background-color: var(--mark-color);
  cursor: pointer;
}
.highlight-row__name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--sans);
  font-size: calc(16px * var(--font-scale)); /* mesmo motivo do zoom automático em .account-field input */
  color: var(--ink);
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 2px 0;
}
.highlight-row__name:focus { outline: none; border-bottom-color: var(--accent); }
.highlight-row__count {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: calc(12px * var(--font-scale));
  color: var(--ink-soft);
  white-space: nowrap;
}
.highlight-row__view, .highlight-row__delete {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--ink-soft);
}
.highlight-row__view svg, .highlight-row__delete svg {
  width: calc(17px * var(--font-scale));
  height: calc(17px * var(--font-scale));
}
.highlight-row__view:hover { color: var(--ink); }
.highlight-row__delete:hover { color: var(--danger); }
.highlight-row__delete:disabled { opacity: 0.3; cursor: default; }

/* Em mobile, a linha (picker + 8 bolinhas de preset + nome + contagem + ver
   + apagar) toda numa única fileira flex não cabe — o nome, o único campo
   de largura flexível (flex:1 1 auto; min-width:0), acabava espremido a
   ~0px e ficava invisível/imedível para editar. Passa a grid de duas linhas
   só neste breakpoint: 1ª linha reserva espaço a sério para o nome (picker
   + nome + ver + apagar), 2ª linha leva as bolinhas de cor (que não
   precisam de disputar espaço com texto) + a contagem. */
@media (max-width: 640px) {
  .highlight-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas:
      "picker name view delete"
      "presets presets presets count";
    row-gap: 8px;
    column-gap: 8px;
  }
  .highlight-row__picker { grid-area: picker; }
  .highlight-row__name { grid-area: name; }
  .highlight-row__view { grid-area: view; }
  .highlight-row__delete { grid-area: delete; }
  .highlight-row__presets { grid-area: presets; flex-wrap: wrap; }
  .highlight-row__count { grid-area: count; justify-self: end; }
}

.highlights-add-btn {
  margin-top: 14px;
  width: 100%;
  font-family: var(--sans);
  font-weight: 600;
  font-size: calc(14px * var(--font-scale));
  padding: 10px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--accent-ink);
  cursor: pointer;
}
.highlights-add-btn:hover { border-color: var(--accent); background: var(--paper); }

.highlights-detail-sort {
  display: flex;
  gap: 2px;
  margin-bottom: 12px;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper);
}
.highlights-detail-sort__btn {
  flex: 1;
  font-family: var(--sans);
  font-size: calc(12.5px * var(--font-scale));
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 7px 4px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.highlights-detail-sort__btn:hover { color: var(--ink); }
.highlights-detail-sort__btn--active {
  background: var(--accent);
  color: var(--bar-ink);
}

.highlights-detail__list { display: flex; flex-direction: column; }
.highlights-detail__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 10px 16px;
  border: none;
  border-top: 1px solid var(--line);
  background: none;
  cursor: pointer;
  font-family: var(--sans);
  color: var(--ink);
}
.highlights-detail__item:hover { background: var(--paper); }
.highlights-detail__ref { font-weight: 600; }
.highlights-detail__version {
  font-family: var(--mono);
  font-size: calc(12px * var(--font-scale));
  color: var(--ink-soft);
}
.highlights-detail__snippet {
  flex: 1 1 100%;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  font-size: calc(14px * var(--font-scale));
}

/* ---------------------------------------------------------- anotações */

.annotations-toggle {
  align-self: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s;
}
.annotations-toggle svg { width: 17px; height: 17px; }
.annotations-toggle:hover { border-color: var(--accent); color: var(--accent-ink); }
/* mesmo cuidado documentado junto de .highlights-toggle: a regra de
   max-width:640px tem de vir DEPOIS da regra base acima neste ficheiro,
   senão a base (mesma especificidade, declarada depois) ganhava e o ícone
   ficava visível a mais no topbar em mobile. */
@media (max-width: 640px) {
  .annotations-toggle { display: none; }
}

/* Popover automático ao passar o rato/selecionar um verso anotado — sem
   precedente no resto da app. Fixo à viewport, fecha-se em scroll/resize
   (ver app.js) em vez de se reposicionar continuamente. */
.annotation-popover {
  position: fixed;
  z-index: 500;
  max-width: 260px;
  max-height: 220px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  padding: 8px 10px;
}
@media (max-width: 640px) {
  .annotation-popover { max-width: calc(100vw - 24px); }
}
.annotation-popover__entry + .annotation-popover__entry {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.annotation-popover__scope {
  display: block;
  font-family: var(--mono);
  font-size: calc(10px * var(--font-scale));
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gold);
  margin-bottom: 3px;
}
.annotation-popover__text {
  margin: 0;
  font-family: var(--serif);
  font-size: calc(13px * var(--font-scale));
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-wrap;
}

.annotations-auto-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: calc(13px * var(--font-scale));
  color: var(--ink-soft);
  margin-bottom: 10px;
  cursor: pointer;
}

.annotations-search {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--sans);
  font-size: calc(16px * var(--font-scale)); /* mesmo motivo do zoom automático em .account-field input */
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  margin-bottom: 14px;
}
.annotations-search:focus { outline: none; border-color: var(--accent); }

.annotation-group__title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: calc(13px * var(--font-scale));
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-ink);
  margin: 16px 0 4px;
}
.annotation-group:first-of-type,
.annotation-group__title:first-child { margin-top: 0; }

.annotation-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 10px 0;
  border: none;
  border-top: 1px solid var(--line);
  background: none;
  cursor: pointer;
  font-family: var(--sans);
  color: var(--ink);
}
.annotation-row:hover { background: var(--paper); }
.annotation-row__ref { font-weight: 600; }
.annotation-row__scope {
  font-family: var(--mono);
  font-size: calc(12px * var(--font-scale));
  color: var(--ink-soft);
}
.annotation-row__preview {
  flex: 1 1 100%;
  font-family: var(--serif);
  color: var(--ink-soft);
  font-size: calc(14px * var(--font-scale));
}

.annotation-edit__ref {
  font-family: var(--serif);
  font-weight: 600;
  font-size: calc(16px * var(--font-scale));
  color: var(--ink);
  margin-bottom: 10px;
}
.annotation-edit__overlap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.annotation-edit__overlap-item {
  text-align: left;
  font-family: var(--sans);
  font-size: calc(13px * var(--font-scale));
  line-height: 1.4;
  padding: 8px 10px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--accent-ink);
  cursor: pointer;
}
.annotation-edit__overlap-item:hover { border-color: var(--accent); }

.annotation-edit__scope {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.annotation-edit__textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--serif);
  font-size: calc(16px * var(--font-scale)); /* mesmo motivo do zoom automático em .account-field input */
  line-height: 1.5;
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  resize: vertical;
}
.annotation-edit__textarea:focus { outline: none; border-color: var(--accent); }
.annotation-edit__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.annotation-edit__jump { margin-left: auto; }
.annotation-edit__delete,
.annotation-edit__jump,
.annotation-edit__save {
  font-family: var(--sans);
  font-weight: 600;
  font-size: calc(14px * var(--font-scale));
  padding: 9px 14px;
  border-radius: var(--radius);
  cursor: pointer;
}
.annotation-edit__delete {
  border: 1px solid transparent;
  background: none;
  color: var(--danger);
}
.annotation-edit__delete:hover { opacity: 0.8; }
.annotation-edit__jump {
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--ink);
}
.annotation-edit__jump:hover { border-color: var(--accent); }
.annotation-edit__save {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #f4f3ec;
}
.annotation-edit__save:hover { background: var(--accent-hover); }

/* ---------------------------------------------------------- comentários */

.commentary-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-backdrop);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1000;
}

.commentary-overlay.hidden {
  display: none;
}

.commentary-panel {
  background: var(--panel);
  color: var(--ink);
  width: 100%;
  max-width: 720px;
  max-height: 80vh;
  border-radius: 12px 12px 0 0;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
}

@media (max-width: 640px) {
  /* --mobile-kb-inset (ver .searchbar-inline/.mobile-tabbar) sobe o painel
     junto com o teclado do telemóvel: "align-items: flex-end" ancora o
     painel ao fundo do "inset:0", que é a viewport de layout — o iOS não a
     encolhe quando o teclado abre, só a "visual viewport" por cima dele.
     Sem isto, o fundo do painel (ex.: o campo de password do login) ficava
     tapado pelo teclado assim que um campo ganhava foco. */
  .commentary-overlay {
    padding-bottom: var(--mobile-kb-inset, 0px);
  }
}

@media (min-width: 768px) {
  .commentary-overlay {
    align-items: center;
  }
  .commentary-panel {
    border-radius: 12px;
    max-height: 70vh;
  }
}

.commentary-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.commentary-panel__ref {
  flex: 1;
  font-weight: 600;
  font-family: var(--sans);
  color: var(--accent-ink);
}

/* #highlightsTitle é um <button> (clicável para voltar à lista a partir do
   detalhe de um destaque), mas deve continuar com o mesmo aspeto dos outros
   títulos de popup (divs) — repõe o reset de <button> por cima. */
button.commentary-panel__ref {
  border: none;
  background: none;
  padding: 0;
  text-align: left;
  font-size: calc(15px * var(--font-scale));
  cursor: pointer;
}
button.commentary-panel__ref:hover { opacity: 0.8; }

.commentary-panel__nav {
  display: flex;
  gap: 6px;
  margin-right: 8px;
}

.commentary-nav-btn {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: calc(16px * var(--font-scale));
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: opacity 0.15s, border-color 0.15s, color 0.15s;
}
.commentary-nav-btn:hover { border-color: var(--accent); color: var(--accent-ink); }
.commentary-nav-btn:disabled { opacity: 0.3; cursor: default; }
.commentary-nav-btn:disabled:hover { border-color: var(--line-strong); color: var(--ink-soft); }

.commentary-panel__close {
  background: none;
  border: none;
  font-size: calc(19px * var(--font-scale));
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  color: var(--ink-soft);
}

.commentary-panel__close:hover {
  color: var(--ink);
}

.commentary-panel__tabs {
  display: flex;
  gap: 6px;
  padding: 10px 16px 0;
  flex-wrap: wrap;
}

.commentary-tab {
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: calc(14px * var(--font-scale));
  cursor: pointer;
  min-width: 84px;
  text-align: center;
}

.commentary-tab--active {
  background: var(--accent);
  color: #f4f3ec;
  border-color: var(--accent);
}

.commentary-panel__body {
  padding: 16px;
  overflow-y: auto;
  font-family: var(--serif);
}

.help-diagnostics {
  font-family: var(--mono);
  font-size: calc(12px * var(--font-scale));
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 8px 0;
}

.commentary-chunk {
  margin-bottom: 20px;
}

.commentary-chunk:last-child {
  margin-bottom: 0;
}

.commentary-chunk__label {
  font-family: var(--mono);
  font-size: calc(13px * var(--font-scale));
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gold);
  margin-bottom: 6px;
}

.commentary-chunk__verse-text {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0 0 14px;
  padding-left: 12px;
  border-left: 2px solid var(--line);
}

.commentary-chunk__text {
  line-height: 1.6;
  margin: 0 0 14px;
}

.commentary-chunk__text:last-child {
  margin-bottom: 0;
}

.commentary-title {
  font-family: var(--serif);
  font-size: calc(20px * var(--font-scale));
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0 0 4px;
}

.commentary-intro-label {
  font-family: var(--mono);
  font-size: calc(12px * var(--font-scale));
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin: 0 0 16px;
}

.commentary-heading {
  font-family: var(--sans);
  font-size: calc(15px * var(--font-scale));
  font-weight: 600;
  color: var(--accent-ink);
  margin: 18px 0 6px;
}

.commentary-heading:first-child {
  margin-top: 0;
}

.commentary-subheading {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(15px * var(--font-scale));
  color: var(--ink-soft);
  margin: 14px 0 6px;
}

.commentary-subheading:first-child {
  margin-top: 0;
}

.commentary-inline-lead {
  color: var(--accent-ink);
  font-weight: 600;
}

/* Subtítulo de secção (ex.: "Gostavam da ostentação (23:5-12)") — repete-se
   em todos os versículos do intervalo que declara, por isso tem de se
   distinguir claramente do corpo do comentário em si. Vem sempre depois
   do texto do versículo (nunca antes, pedido explícito do utilizador) —
   por isso nunca é o 1º elemento real do bloco (a referência é sempre
   antes), precisa sempre de espaço por cima para se separar do que veio
   antes (o blockquote do versículo, ou — quando embutido a meio do texto
   do comentário, ex. Beacon com dois títulos fundidos no mesmo chunk — o
   parágrafo anterior). */
.commentary-section-title {
  font-family: var(--sans);
  font-size: calc(14px * var(--font-scale));
  font-weight: 600;
  font-style: italic;
  color: var(--gold);
  margin: 18px 0 10px;
}

.commentary-section-title:first-child {
  margin-top: 0;
}

/* 4 níveis de título do Beacon (romano "Seção"/divisão maior "A."/secção
   numerada "1."/subdivisão "a)") pedem formatações diferentes para o
   leitor distinguir a hierarquia à primeira vista — reaproveita a base
   acima (cor dourada, itálico, margem), só acrescenta tamanho/peso por
   nível, do mais largo (section) ao mais fino (subletter). */
.commentary-section-title--section {
  font-size: calc(16px * var(--font-scale));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.commentary-section-title--letter {
  font-size: calc(15px * var(--font-scale));
  font-weight: 700;
}

.commentary-section-title--num {
  font-size: calc(14px * var(--font-scale));
  font-weight: 600;
}

.commentary-section-title--subletter {
  font-size: calc(13px * var(--font-scale));
  font-weight: 500;
}

/* Texto original grego do versículo, tal como impresso no Champlin —
   mostrado à parte da tradução/exposição, com tipografia distinta (mono,
   mais pequena) para não se confundir com prosa em português. */
.commentary-greek-text {
  font-family: var(--mono);
  font-size: calc(13px * var(--font-scale));
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 0 14px;
  padding: 8px 12px;
  border-left: 2px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 7%, transparent);
  white-space: pre-wrap;
}

/* -------------------------------------------------------- concordância */

.concordance-verse {
  margin-bottom: 18px;
}

.concordance-verse__label {
  font-family: var(--mono);
  font-size: calc(13px * var(--font-scale));
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gold);
  margin-bottom: 6px;
}

.concordance-verse__text {
  line-height: 1.9;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.concordance-word {
  cursor: pointer;
  border-radius: 4px;
  padding: 1px 2px;
  margin: 0 -2px;
}

.concordance-word:hover {
  background: var(--line);
}

.concordance-word--active {
  background: var(--accent);
  color: #f4f3ec;
}

.concordance-word--plain {
  cursor: default;
}

.concordance-word--plain:hover {
  background: none;
}

.concordance-results {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.concordance-entry {
  margin-bottom: 16px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}

.concordance-entry:last-child {
  margin-bottom: 0;
}

.concordance-entry__header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.concordance-entry__lemma {
  font-family: var(--serif);
  font-size: calc(19px * var(--font-scale));
  font-weight: 600;
}

.concordance-entry__xlit {
  font-family: var(--sans);
  font-style: italic;
  color: var(--ink-soft);
}

.concordance-entry__num {
  font-family: var(--mono);
  font-size: calc(12px * var(--font-scale));
  color: var(--gold);
  margin-left: auto;
}

.concordance-entry__def {
  line-height: 1.6;
}

.concordance-entry__def--en {
  color: var(--ink-soft);
  font-size: calc(13px * var(--font-scale));
  margin-top: 4px;
}

.concordance-entry__occ-link {
  margin-top: 8px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--sans);
  font-size: calc(13px * var(--font-scale));
  color: var(--accent-ink);
  text-decoration: underline;
  cursor: pointer;
}

.concordance-entry__occ-link:hover {
  color: var(--gold);
}

.concordance-occ-hint {
  font-family: var(--sans);
  font-size: calc(13px * var(--font-scale));
  color: var(--ink-soft);
  margin-bottom: 12px;
}

.concordance-occ-item {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  font-family: var(--serif);
  color: var(--ink);
}

.concordance-occ-item:hover {
  border-color: var(--accent);
}

.concordance-occ-item__ref {
  font-family: var(--mono);
  font-size: calc(12px * var(--font-scale));
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--gold);
  margin-bottom: 4px;
}

.concordance-occ-item__text {
  line-height: 1.5;
}

.concordance-occ-highlight {
  background: var(--accent);
  color: #f4f3ec;
  padding: 0 2px;
  border-radius: 3px;
}

/* --------------------------------------------------------------- ajuda */

#helpOverlay .commentary-panel__body h3 {
  font-family: var(--sans);
  font-size: calc(16px * var(--font-scale));
  font-weight: 600;
  color: var(--accent-ink);
  margin: 18px 0 6px;
}
#helpOverlay .commentary-panel__body h3:first-child {
  margin-top: 0;
}

#helpOverlay .commentary-panel__body p {
  font-family: var(--sans);
  font-size: calc(15px * var(--font-scale));
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 10px;
}

#helpOverlay .commentary-panel__body ul {
  font-family: var(--sans);
  font-size: calc(15px * var(--font-scale));
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 10px;
  padding-left: 22px;
}

#helpOverlay .commentary-panel__body code {
  font-family: var(--mono);
  font-size: calc(14px * var(--font-scale));
  background: var(--paper);
  padding: 1px 5px;
  border-radius: 2px;
  border: 1px solid var(--line);
}

/* ------------------------------------------------------------ planos de leitura */

.plans-view {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 28px 28px 60px;
}
.plans-view.hidden { display: none; }

.plans-list {
  max-width: 880px;
  margin: 0 auto;
}

.plans-section + .plans-section { margin-top: 36px; }
.plans-section__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: calc(20px * var(--font-scale));
  color: var(--ink);
  margin: 0 0 14px;
}
.plans-section.hidden { display: none; }

.plans-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.plan-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  text-align: left;
}

.plan-card__name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: calc(17px * var(--font-scale));
  color: var(--ink);
  margin: 0;
}
.plan-card__desc {
  font-family: var(--sans);
  font-size: calc(13.5px * var(--font-scale));
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  flex: 1;
}
.plan-card__meta {
  font-family: var(--mono);
  font-size: calc(11.5px * var(--font-scale));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.plan-card__progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.plan-card__bar {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.plan-card__bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}
.plan-card__status {
  font-family: var(--sans);
  font-size: calc(12px * var(--font-scale));
  font-weight: 600;
  white-space: nowrap;
}
.plan-card__status--atrasado { color: var(--danger); }
.plan-card__status--adiantado { color: var(--accent); }
.plan-card__status--em-dia { color: var(--ink-soft); }

.plan-card__action,
.plan-card {
  cursor: pointer;
  transition: border-color 0.15s;
}
.plan-card:hover { border-color: var(--accent); }
.plan-card__action {
  align-self: flex-start;
  margin-top: 4px;
  font-family: var(--sans);
  font-size: calc(13px * var(--font-scale));
  font-weight: 600;
  padding: 7px 16px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: #f4f3ec;
}
.plan-card__action:hover { background: var(--accent-hover); }

/* -------------------------------------------------------- vista de um dia */

.plan-day {
  max-width: 720px;
  margin: 0 auto;
}
.plan-day.hidden { display: none; }

.plan-day__back {
  font-family: var(--sans);
  font-size: calc(13px * var(--font-scale));
  color: var(--ink-soft);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0 14px;
}
.plan-day__back:hover { color: var(--accent); }

.plan-day__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: calc(24px * var(--font-scale));
  color: var(--ink);
  margin: 0 0 4px;
}
.plan-day__subtitle {
  font-family: var(--sans);
  font-size: calc(13.5px * var(--font-scale));
  color: var(--ink-soft);
  margin: 0 0 14px;
}

.plan-day__status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--sans);
  font-size: calc(13.5px * var(--font-scale));
  font-weight: 600;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--line);
  margin-bottom: 18px;
}
.plan-day__status.hidden { display: none; }
.plan-day__status--atrasado { color: var(--danger); border-color: var(--danger); }
.plan-day__status--adiantado { color: var(--accent-ink); }
.plan-day__status--em-dia { color: var(--ink-soft); }

.plan-day__catchup {
  font-family: var(--sans);
  font-size: calc(12.5px * var(--font-scale));
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.plan-day__catchup:hover { opacity: 0.8; }

.day-strip-wrap { margin-bottom: 20px; }
.day-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  -webkit-overflow-scrolling: touch;
}
.day-strip__item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 46px;
  cursor: pointer;
}
.day-strip__num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: calc(13px * var(--font-scale));
  font-weight: 600;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  color: var(--ink);
}
.day-strip__item.is-done .day-strip__num {
  background: var(--accent);
  border-color: var(--accent);
  color: #f4f3ec;
}
.day-strip__item.is-current .day-strip__num {
  border-color: var(--gold);
  border-width: 2px;
  color: var(--gold-ink);
  background: var(--highlight);
}
.day-strip__date {
  font-family: var(--mono);
  font-size: calc(10.5px * var(--font-scale));
  color: var(--ink-soft);
}

.plan-day__checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.checklist-item__check {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(15px * var(--font-scale));
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.checklist-item__check:hover { border-color: var(--accent); }
.checklist-item.is-done .checklist-item__check {
  background: var(--accent);
  border-color: var(--accent);
  color: #f4f3ec;
}

.checklist-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
  padding: 0;
}
.checklist-item__trilha {
  font-family: var(--mono);
  font-size: calc(11px * var(--font-scale));
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold);
}
.checklist-item__ref {
  font-family: var(--serif);
  font-size: calc(16px * var(--font-scale));
  color: var(--ink);
}
.checklist-item.is-done .checklist-item__ref { color: var(--ink-soft); text-decoration: line-through; }

.checklist-item__chevron {
  flex: 0 0 auto;
  color: var(--ink-soft);
  font-size: calc(16px * var(--font-scale));
}

.plans-empty {
  font-family: var(--sans);
  font-size: calc(13.5px * var(--font-scale));
  color: var(--ink-soft);
  padding: 10px 2px;
}

.plan-day__links {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.plan-day__overview-link {
  font-family: var(--sans);
  font-size: calc(12.5px * var(--font-scale));
  font-weight: 600;
  color: var(--accent-ink);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0 16px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.plan-day__overview-link:hover { color: var(--accent); }
.plan-day__overview-link--danger { color: var(--danger); }
.plan-day__overview-link--danger:hover { opacity: 0.8; color: var(--danger); }

/* --------------------------------------------------------- visão geral */

.plan-overview {
  max-width: 900px;
  margin: 0 auto;
}
.plan-overview.hidden { display: none; }

.plan-overview__dates {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-family: var(--sans);
  font-size: calc(13.5px * var(--font-scale));
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.plan-overview__dates strong { color: var(--ink); font-weight: 600; }

.plan-overview__start {
  margin-bottom: 22px;
}
.plan-overview__start.hidden { display: none; }

.plan-overview__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.plan-overview__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: calc(13px * var(--font-scale));
  min-width: 480px;
}
.plan-overview__table thead th {
  position: sticky;
  top: 0;
  background: var(--panel);
  text-align: left;
  font-family: var(--mono);
  font-size: calc(11px * var(--font-scale));
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.plan-overview__table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: top;
}
.plan-overview__table td.col-day,
.plan-overview__table td.col-date {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  white-space: nowrap;
}
.plan-overview__table tr:hover td { background: var(--panel); }
.plan-overview__table tr.is-today td { background: var(--highlight); color: var(--highlight-ink); }
.plan-overview__table tr.is-today td.col-day,
.plan-overview__table tr.is-today td.col-date { color: inherit; }
.plan-overview__table tr.is-done td.col-reading { color: var(--ink-soft); text-decoration: line-through; }
.plan-overview__table tr.is-clickable { cursor: pointer; }
.plan-overview__table td.col-check { text-align: center; color: var(--accent); font-weight: 700; }

@media (max-width: 640px) {
  .plans-view { padding: 16px 14px 90px; }
  .plans-cards { grid-template-columns: 1fr; }
  .plan-overview__table { min-width: 380px; }
}

/* --------------------------------------------------- leitura guiada do dia */

/* voltar ao plano + progresso vivem na mesma reading-header-row do título
   (ao lado/à direita de "Salmos 1 ▾"), não numa linha própria — aproveita o
   espaço que ficaria vazio nessa linha (cópia inline das versões e
   chapter-controls ficam escondidas durante a leitura guiada, ver regras
   .layout--plan-focus abaixo). "voltar ao plano" quebra em 2 linhas
   propositadamente: num link de 1 linha só, ~13px, alinhado ao centro do
   <h2> de 26px ao lado, o link "flutua" a meio da altura do título — 2
   linhas aproximam a altura total do bloco à do título, o centro vertical
   dos dois já não fica tão descolado um do outro. Os chips de versão
   (single-select) vivem na mesma linha, ver .version-chips-wrap--plan
   acima. */
.plan-reading-bar__exit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.3;
  font-family: var(--sans);
  font-size: calc(12px * var(--font-scale));
  font-weight: 600;
  color: var(--ink-soft);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.plan-reading-bar__exit:hover { color: var(--accent); }

.plan-reading-bar__progress {
  margin-left: auto;
  font-family: var(--mono);
  font-size: calc(12px * var(--font-scale));
  letter-spacing: 0.03em;
  color: var(--gold);
  text-transform: uppercase;
  text-align: right;
}

.reading-header-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* leitura guiada: colapsa a sidebar via layout--sidebar-collapsed (mantém o
   elemento como grid item, só encolhido — display:none o removeria da grid e
   quebraria o layout de 2 colunas) e esconde só o botão de reabrir. */
.layout--plan-focus .sidebar-expand-btn {
  display: none;
}
/* chapter-controls (voltar aos resultados) não faz sentido durante a
   leitura guiada — a busca fecha a sessão automaticamente ao navegar. */
.layout--plan-focus .chapter-controls {
  display: none;
}
.topbar--plan-focus .searchbar-inline,
.topbar--plan-focus .version-chips-wrap {
  display: none;
}

/* -------------------------------------------------------------- offline */

.offline-download-all {
  display: block;
  width: 100%;
  font-family: var(--sans);
  font-size: calc(14px * var(--font-scale));
  font-weight: 600;
  padding: 9px 14px;
  margin-top: 10px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: #f4f3ec;
  cursor: pointer;
}
.offline-download-all:hover { background: var(--accent-hover); }
.offline-download-all:disabled { opacity: 0.6; cursor: default; }

.offline-section { margin-top: 18px; }
.offline-section:first-of-type { margin-top: 4px; }
.offline-section__title {
  font-family: var(--mono);
  font-size: calc(12px * var(--font-scale));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 6px;
}

.offline-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.offline-row:last-child { border-bottom: none; }

.offline-row__name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--sans);
  font-size: calc(14px * var(--font-scale));
  color: var(--ink);
}
.offline-row__size {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: calc(11px * var(--font-scale));
  color: var(--ink-soft);
  white-space: nowrap;
}

.offline-row__action {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--sans);
  font-size: calc(12px * var(--font-scale));
  font-weight: 600;
  padding: 5px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.offline-row__action:hover { border-color: var(--accent); color: var(--accent-ink); }
.offline-row__action svg { width: calc(15px * var(--font-scale)); height: calc(15px * var(--font-scale)); }
.offline-row__action--downloaded { color: var(--accent-ink); border-color: var(--accent); }
.offline-row__action--downloaded:hover { color: var(--danger); border-color: var(--danger); }
.offline-row__action:disabled { opacity: 0.6; cursor: default; }

.offline-row__progress {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.offline-row__bar {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.offline-row__bar-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.15s linear;
}
.offline-row__percent {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: calc(11px * var(--font-scale));
  color: var(--ink-soft);
}

/* aviso de fila offline (Destaques/Anotações) — ver flushOfflineQueue em app.js */
.offline-queue-hint {
  font-family: var(--sans);
  font-size: calc(12px * var(--font-scale));
  color: var(--gold-ink);
  background: var(--highlight);
  border-radius: var(--radius);
  padding: 8px 12px;
  margin: 0 0 12px;
}