/* ==========================================================================
   Home C (HM-1). Mockup aprovado: design-reference/redesign/home-C.html; regras em design-reference/redesign/decisoes.md
   ("Regras de referência" e "Ordem e grade").

   - Um estilo de cartão só: fundo de superfície, borda de 1 px, raio 12, sem sombra, brilho nem gradiente. Brilho só no
     Focus Timer.
   - Título em caixa alta (10 px no celular, 10,5 px no desktop) com ícone de traço de 14 px; o link "Ver …" fica sempre à
     direita do título. Número e rótulo na mesma linha (.home-num).
   - Celular (<= 900px): uma coluna, na ordem do DOM (edital, frase, plano, revisões de hoje | sequência, pendentes, questões,
     tempo, desempenho, foco, conquistas). 901px em diante: escala de texto do desktop. 1101px em diante: grade de 3 colunas
     iguais, fileiras de altura igual (edital 2 | frase; plano 2 | pilha; questões | tempo | desempenho; foco 2 | conquistas).
   - Tudo escopado em #view-dashboard: styles.css (legado) usa !important no .dashboard-grid; aqui só onde é preciso vencer.
   Carregado depois de styles.css e antes de mobile-shell.css.
   ========================================================================== */

#view-dashboard {
  --hm-card: #0c0f1e;
  --hm-line: rgba(139, 92, 246, 0.16);
  --hm-hair: rgba(148, 163, 184, 0.14);
  --hm-hair-strong: rgba(139, 92, 246, 0.28);
  --hm-track: rgba(30, 41, 59, 0.9);
  --hm-ink-primary: #c4b5fd;
  --hm-quote-ring: rgba(148, 163, 184, 0.26);
  --hm-cyan: #22d3ee;
  --hm-theory: #86efac;
  --hm-daily: #22d3ee;
  --hm-weekly: #c084fc;
  --hm-on-tone: #070a13;
  --hm-display: "Bahnschrift", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
}

html[data-theme="light"] #view-dashboard {
  --hm-card: #ffffff;
  --hm-line: rgba(57, 44, 89, 0.12);
  --hm-hair: rgba(57, 44, 89, 0.12);
  --hm-hair-strong: rgba(124, 58, 237, 0.3);
  --hm-track: rgba(57, 44, 89, 0.1);
  --hm-ink-primary: #6d28d9;
  --hm-quote-ring: rgba(57, 44, 89, 0.16);
  --hm-cyan: #0891b2;
  --hm-theory: #16a34a;
  --hm-daily: #0891b2;
  --hm-weekly: #9333ea;
  --hm-on-tone: #ffffff;
}

/* ---------- Grade ---------- */
#view-dashboard .dashboard-grid {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 10px !important;
}

/* O cabeçalho deixou de ser sobreposto pelo banner flutuante: sem deslocamentos nem folga de compensação. */
#view-dashboard .dashboard-grid > .home-head {
  margin-bottom: 4px;
}

/* Celular: seletor de edital e "Iniciar Sessão" com alvo de 44 px (styles.css os fixa em 38 px). */
@media (max-width: 900px) {
  #view-dashboard .home-head .home-exam-selector,
  #view-dashboard .home-head .home-start-session {
    height: 44px !important;
    min-height: 44px !important;
  }
}

#view-dashboard .home-head .page-context-title-lockup,
#view-dashboard .home-head .page-context-actions {
  transform: none !important;
}

/* Invólucros estruturais (contrato do design system): não têm caixa; cada cartão entra direto na grade. */
#view-dashboard .dashboard-lower,
#view-dashboard .dashboard-main,
#view-dashboard .dashboard-content,
#view-dashboard .home-stats {
  display: contents !important;
}

/* A pilha da direita (revisões de hoje + sequência + pendentes) é um item de grade de verdade. */
#view-dashboard .dashboard-rail {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 10px;
}

#view-dashboard .home-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
}

/* ---------- Cartão ---------- */
#view-dashboard .home-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 12px 14px 14px;
  border: 1px solid var(--hm-line);
  border-radius: 12px;
  background: var(--hm-card);
  box-shadow: none;
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.4;
  letter-spacing: 0;
}

#view-dashboard .home-card p,
#view-dashboard .home-card dl,
#view-dashboard .home-card dd {
  margin: 0;
}

#view-dashboard .home-card-state {
  grid-column: 1 / -1;
  gap: 8px;
}

#view-dashboard .home-card-state h2 {
  margin: 0;
  font-size: 15px;
}

#view-dashboard .home-card-state .ghost {
  align-self: flex-start;
}

#view-dashboard .home-card-head {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 22px;
  margin-bottom: 10px;
}

#view-dashboard .home-card-icon {
  flex: none;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--hm-ink-primary);
}

/* Exceção semântica: a chama da sequência é laranja. */
#view-dashboard .home-card-icon.is-flame {
  color: #f97316;
}

#view-dashboard .home-card-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* Link "Ver …": sempre no título, à direita; alvo de 44 px no celular. */
#view-dashboard .home-link {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  margin: -11px 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--hm-ink-primary);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

#view-dashboard .home-link svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#view-dashboard .home-card button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Número + rótulo na mesma linha ("1 dia seguido", "20 itens", "73% taxa de acertos"). */
#view-dashboard .home-num {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 6px;
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

#view-dashboard .home-num > b {
  color: var(--ink);
  font-family: var(--hm-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}

#view-dashboard .home-num > b.is-ok {
  color: var(--hm-cyan);
}

#view-dashboard .home-num > span.soft {
  color: var(--muted);
  font-weight: 400;
}

#view-dashboard .home-sub,
#view-dashboard .home-note {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 10.5px;
}

#view-dashboard .home-sub b {
  color: var(--hm-cyan);
  font-weight: 600;
}

/* ---------- Progresso do edital ---------- */
#view-dashboard .home-edital-grid {
  display: grid;
  gap: 14px;
}

#view-dashboard .home-edital-now > b {
  color: var(--hm-ink-primary);
  font-size: 26px;
}

#view-dashboard .home-edital-now > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}

#view-dashboard .home-ebar {
  position: relative;
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--hm-track);
}

#view-dashboard .home-ebar i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 4px;
}

#view-dashboard .home-ebar .proj {
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--hm-cyan) 75%, transparent) 0 3px, transparent 3px 6px);
}

#view-dashboard .home-ebar .now {
  background: var(--primary);
}

#view-dashboard .home-escale {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 10.5px;
}

#view-dashboard .home-edital-proj {
  padding-top: 10px;
  border-top: 1px solid var(--hm-hair);
}

#view-dashboard .home-edital-proj p {
  color: var(--muted);
  font-size: 11px;
}

#view-dashboard .home-proj-num {
  color: var(--hm-cyan);
  font-family: var(--hm-display);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#view-dashboard .home-edital-proj small {
  display: block;
  margin-top: 3px;
  color: var(--hm-cyan);
  font-size: 11px;
  font-weight: 600;
}

/* "i" do edital (tooltip por hover e por foco de teclado, abre abaixo e para a esquerda, dentro do cartão). */
#view-dashboard .progress-caption {
  display: inline-flex;
  flex: none;
  color: var(--text-muted);
}

#view-dashboard .progress-caption b {
  width: 16px;
  height: 16px;
  border-color: var(--hm-hair-strong);
  color: var(--text-muted);
  font-size: 10px;
}

/* Alvo de toque maior sem aumentar o círculo. */
#view-dashboard .progress-caption b::before {
  content: "";
  position: absolute;
  inset: -14px;
}

#view-dashboard .progress-caption b::after {
  left: auto;
  right: -8px;
}

/* Tooltip do "i" de Progresso do edital: abre abaixo do ícone, com largura contida, e também por foco de teclado. */
.dashboard-grid .progress-caption b::after {
  top: calc(100% + 8px);
  bottom: auto;
  left: -8px;
  width: 240px;
  max-width: 240px;
  white-space: normal;
  transform: translate(0, -4px);
}

.dashboard-grid .progress-caption b:hover::after,
.dashboard-grid .progress-caption b:focus-visible::after {
  opacity: 1;
  transform: translate(0, 0);
}

.dashboard-grid .progress-caption b { outline-offset: 2px; }

/* ---------- Frase do dia ---------- */
#view-dashboard .home-card-quote p {
  color: var(--text-secondary);
  font-size: 12.5px;
  line-height: 1.45;
}

/* Ícone de pensamento: só no desktop (grade de 3 colunas), no mesmo tamanho e trilho do anel da Sequência de foco. */
#view-dashboard .home-quote-mark {
  display: none;
}

/* ---------- Plano de hoje ---------- */
#view-dashboard .home-plan-rows {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

#view-dashboard .home-plan-row {
  --c: var(--hm-theory);
  position: relative;
  padding-left: 26px;
}

#view-dashboard .home-plan-row.is-daily { --c: var(--hm-daily); }
#view-dashboard .home-plan-row.is-weekly { --c: var(--hm-weekly); }

#view-dashboard .home-plan-row::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 7px;
  width: 1px;
  background: var(--hm-hair-strong);
}

#view-dashboard .home-plan-row:first-child::before { top: 17px; }
#view-dashboard .home-plan-row.is-next:first-child::before { top: 32px; }
#view-dashboard .home-plan-row:last-child::before { bottom: calc(100% - 17px); }
#view-dashboard .home-plan-row.is-next:last-child::before { bottom: calc(100% - 32px); }

#view-dashboard .home-plan-row + .home-plan-row .home-plan-entry {
  border-top: 1px solid var(--hm-hair);
}

#view-dashboard .home-plan-node {
  position: absolute;
  top: 10px;
  left: 0;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--hm-card);
  box-shadow: inset 0 0 0 1.6px var(--c);
}

#view-dashboard .home-plan-row.is-next .home-plan-node { top: 25px; }

#view-dashboard .home-plan-row.is-done .home-plan-node {
  background: var(--c);
  box-shadow: none;
}

#view-dashboard .home-plan-node svg {
  width: 9px;
  height: 9px;
  fill: none;
  stroke: var(--hm-on-tone);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#view-dashboard .home-plan-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 10px;
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

#view-dashboard .home-plan-entry strong {
  grid-column: 1;
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}

#view-dashboard .home-plan-row.is-done .home-plan-entry strong {
  color: var(--text-secondary);
  text-decoration: line-through;
  text-decoration-color: var(--text-muted);
  text-decoration-thickness: 1px;
}

#view-dashboard .home-plan-time {
  grid-column: 2;
  align-self: start;
  padding-top: 1px;
  color: var(--text-muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#view-dashboard .home-plan-path {
  display: -webkit-box;
  grid-column: 1 / -1;
  margin-top: 1px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.38;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#view-dashboard .home-next-tag {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
  color: var(--hm-ink-primary);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

#view-dashboard .home-next-tag span {
  padding: 0 6px;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  border-radius: 999px;
  color: var(--c);
  font-size: 9.5px;
  letter-spacing: 0.04em;
}

#view-dashboard .home-plan-row.is-next .home-plan-time { grid-row: 2; }

#view-dashboard .home-next-action {
  padding: 0 0 10px;
}

/* Próxima sessão: bloco interno sem contorno, com o roxo da marca nos dois temas. */
#view-dashboard .home-plan-row.is-next {
  --hm-next-bg: color-mix(in srgb, var(--primary) 18%, var(--hm-card));
  isolation: isolate;
  margin-block: 4px;
}

/* Inclui o trilho e a bolinha no fundo, sem deslocar o conteúdo nem a linha do tempo. */
#view-dashboard .home-plan-row.is-next::after {
  content: "";
  position: absolute;
  inset: 0 0 0 -6px;
  z-index: -1;
  border-radius: 10px;
  background: var(--hm-next-bg);
  pointer-events: none;
}

#view-dashboard .home-plan-row.is-next .home-plan-entry {
  padding: 12px 12px 8px;
  border: 0;
  border-radius: 10px 10px 0 0;
}

#view-dashboard .home-plan-row.is-next .home-next-action {
  padding: 0 12px 12px;
  border-radius: 0 0 10px 10px;
}

#view-dashboard .home-plan-row.is-next .home-plan-time,
#view-dashboard .home-plan-row.is-next .home-plan-path { color: var(--text-secondary); }

#view-dashboard .home-start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--primary);
  box-shadow: none;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

#view-dashboard .home-start svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
  stroke: none;
}

#view-dashboard .home-plan-note {
  display: grid;
  gap: 2px;
  padding: 4px 0 10px;
  list-style: none;
}

#view-dashboard .home-plan-note strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}

#view-dashboard .home-plan-note span {
  color: var(--muted);
  font-size: 11px;
}

/* Estados vazios dentro de um cartão: texto no estilo único, sem a caixa grande do legado. */
#view-dashboard .home-card .empty-neon {
  display: grid;
  gap: 4px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}

#view-dashboard .home-card .empty-neon strong {
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
}

#view-dashboard .home-card .empty-neon p {
  color: var(--muted);
  font-size: 11px;
}

#view-dashboard .home-card .empty-neon button {
  justify-self: start;
  min-height: 44px;
  margin-top: 4px;
}

/* ---------- Revisões de hoje e sequência (par no celular) ---------- */
/* "Abrir" no canto inferior direito; o cartão reserva a faixa de 44 px do alvo de toque. */
#view-dashboard .home-card-mini:not(.home-card-streak) {
  padding-bottom: 46px;
}

#view-dashboard .home-card-mini .home-link {
  position: absolute;
  right: 14px;
  bottom: 2px;
  margin: 0;
}

#view-dashboard .home-card-streak .home-num > b {
  color: var(--warning);
}

#view-dashboard .home-streak-ring {
  display: none;
}

#view-dashboard .home-streak-body .home-note {
  margin-top: 5px;
  font-size: 10.5px;
  line-height: 1.4;
}

#view-dashboard .home-streak-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

#view-dashboard .home-streak-ring circle {
  fill: none;
  stroke-width: 10;
}

#view-dashboard .home-streak-ring .trk { stroke: var(--hm-track); }
#view-dashboard .home-streak-ring .fill { stroke: url(#homeStreakGradient); stroke-linecap: round; }

#view-dashboard .home-streak-ring b {
  position: relative;
  color: var(--ink);
  font-family: var(--hm-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}

/* ---------- Revisões pendentes ---------- */
#view-dashboard .home-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: auto 0;
}

#view-dashboard .home-trio > div {
  display: grid;
  gap: 1px;
  min-width: 0;
  padding: 0 12px;
  border-left: 1px solid var(--hm-hair);
}

#view-dashboard .home-trio > div:first-child {
  padding-left: 0;
  border-left: 0;
}

#view-dashboard .home-trio dt {
  margin-bottom: 6px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
}

#view-dashboard .home-trio dt small {
  display: block;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 400;
}

#view-dashboard .home-trio .home-num > span.soft {
  font-size: 11.5px;
}

/* ---------- Questões da semana ---------- */
#view-dashboard .home-q-grid {
  display: grid;
  flex: 1;
  align-content: space-between;
  gap: 10px;
}

#view-dashboard .home-q-grid > div + div {
  padding-top: 10px;
  border-top: 1px solid var(--hm-hair);
}

#view-dashboard .home-q-grid .home-sub {
  margin-top: 5px;
}

#view-dashboard .home-qbar {
  height: 4px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--hm-track);
}

#view-dashboard .home-qbar span {
  display: block;
  height: 100%;
  background: var(--primary);
}

#view-dashboard .home-sub .delta-indicator {
  display: inline;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

/* ---------- Tempo estudado ---------- */
#view-dashboard .home-bars {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: 6px;
  height: 42px;
  margin: 18px 0 20px;
  border-bottom: 1px solid var(--hm-hair);
}

#view-dashboard .home-bars > div {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
}

#view-dashboard .home-bars i {
  display: block;
  width: 100%;
  max-width: 20px;
  height: var(--h);
  min-height: 2px;
  border-radius: 3px 3px 1px 1px;
  background: var(--primary);
}

#view-dashboard .home-bars i.zero {
  background: var(--hm-track);
}

#view-dashboard .home-bars small {
  position: absolute;
  top: calc(100% + 5px);
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1;
}

#view-dashboard .home-bars b {
  position: absolute;
  bottom: calc(var(--h) + 4px);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#view-dashboard .home-pairs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}

#view-dashboard .home-pairs > div {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

#view-dashboard .home-pairs dt {
  color: var(--text-muted);
  font-size: 10px;
}

#view-dashboard .home-pairs dd {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---------- Desempenho resumido ---------- */
#view-dashboard .home-perf {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

#view-dashboard .home-perf-compare {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 10.5px;
}

#view-dashboard .home-spark {
  display: block;
  width: 100%;
  height: 44px;
}

#view-dashboard .home-spark path {
  fill: none;
  stroke: var(--primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#view-dashboard .home-quad {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--hm-hair);
}

#view-dashboard .home-quad > div {
  display: grid;
  gap: 1px;
}

#view-dashboard .home-quad dt {
  color: var(--text-muted);
  font-size: 10px;
}

#view-dashboard .home-quad dd {
  font-size: 13px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

#view-dashboard .home-quad .ok { color: var(--success); }
#view-dashboard .home-quad .bad { color: var(--danger); }

/* ---------- Foco por disciplina ---------- */
#view-dashboard .home-donut-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 12px;
}

#view-dashboard .home-donut-wrap .home-legend {
  justify-self: stretch;
}

#view-dashboard .home-donut {
  position: relative;
  width: 132px;
  height: 132px;
}

#view-dashboard .home-donut svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

#view-dashboard .home-donut circle {
  fill: none;
  stroke-width: 12;
}

#view-dashboard .home-donut .home-donut-track {
  stroke: var(--hm-track);
}

#view-dashboard .home-donut-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}

#view-dashboard .home-donut-center b {
  font-family: var(--hm-display);
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

#view-dashboard .home-donut-center small {
  color: var(--muted);
  font-size: 10.5px;
}

#view-dashboard .home-legend {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

#view-dashboard .home-legend li {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 8px;
  padding: 3px 0;
  color: var(--text-secondary);
  font-size: 11px;
}

#view-dashboard .home-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
  transform: translateY(-1px);
}

#view-dashboard .home-legend b {
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---------- Conquistas ---------- */
#view-dashboard .home-ach {
  display: grid;
  flex: 1;
  align-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}

#view-dashboard .home-ach li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  column-gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--hm-hair);
}

#view-dashboard .home-ach li:first-child { padding-top: 0; }

#view-dashboard .home-ach li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

#view-dashboard .home-ach .home-card-icon {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--warning);
}

#view-dashboard .home-ach .is-next .home-card-icon {
  color: var(--hm-ink-primary);
}

#view-dashboard .home-ach strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
}

#view-dashboard .home-ach small {
  display: block;
  color: var(--muted);
  font-size: 10.5px;
}

#view-dashboard .home-abar {
  display: block;
  height: 3px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--hm-track);
  font-style: normal;
}

#view-dashboard .home-abar b {
  display: block;
  height: 100%;
  background: var(--primary);
}

/* ==========================================================================
   A partir de 901px (sidebar fixa): escala de texto do desktop.
   ========================================================================== */
@media (min-width: 901px) {
  #view-dashboard .dashboard-grid > .home-head {
    margin-bottom: 6px;
  }

  #view-dashboard .home-card-title { font-size: 10.5px; }
  #view-dashboard .home-link { min-height: 30px; margin: -6px 0; font-size: 12px; }
  #view-dashboard .home-num { font-size: 12px; }
  #view-dashboard .home-num > b { font-size: 24px; }
  #view-dashboard .home-card-mini .home-num > b { font-size: 22px; }
  #view-dashboard .home-edital-now > b { font-size: 34px; }
  #view-dashboard .home-edital-now > span,
  #view-dashboard .home-edital-proj p { font-size: 12px; }
  #view-dashboard .home-sub,
  #view-dashboard .home-note,
  #view-dashboard .home-perf-compare,
  #view-dashboard .home-streak-body .home-note { font-size: 11px; }
  #view-dashboard .home-plan-entry strong { font-size: 12.5px; }
  #view-dashboard .home-plan-path { font-size: 11px; }
  #view-dashboard .home-plan-time { font-size: 10.5px; }
  #view-dashboard .home-legend li,
  #view-dashboard .home-legend b { font-size: 11.5px; }
  #view-dashboard .home-trio dt { font-size: 12px; }
  #view-dashboard .home-quad dt,
  #view-dashboard .home-pairs dt { font-size: 10.5px; }
  #view-dashboard .home-quad dd { font-size: 14px; }
  #view-dashboard .home-pairs dd { font-size: 12.5px; }
  #view-dashboard .home-ach strong { font-size: 12.5px; }
  #view-dashboard .home-ach small { font-size: 11px; }
  #view-dashboard .home-card-quote p { font-size: 13.5px; }

  #view-dashboard .home-next-action { padding: 0 0 8px; }
  #view-dashboard .home-start {
    width: auto;
    height: 32px;
    font-size: 12.5px;
  }

  /* "Abrir" sobe para o título no desktop. */
  #view-dashboard .home-card-mini .home-link {
    position: static;
  }

  #view-dashboard .home-card-mini:not(.home-card-streak) {
    padding-bottom: 14px;
  }
}

/* ==========================================================================
   A partir de 1101px: grade de 3 colunas iguais, fileiras de altura igual. Nenhuma coluna termina antes das outras.
   ========================================================================== */
@media (min-width: 1101px) {
  #view-dashboard .dashboard-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px !important;
  }

  #view-dashboard .dashboard-grid > .home-head,
  #view-dashboard .home-card-state {
    grid-column: 1 / -1;
  }

  #view-dashboard .home-card-wide {
    grid-column: span 2;
  }

  /* Pilha da direita: revisões de hoje, sequência e pendentes; as pendentes absorvem a folga da fileira. */
  #view-dashboard .dashboard-rail {
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
    gap: 14px;
  }

  #view-dashboard .home-pair {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  #view-dashboard .home-quote-body {
    display: grid;
    flex: 1;
    grid-template-columns: 60px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
  }

  #view-dashboard .home-card-quote p {
    margin: 0;
  }

  #view-dashboard .home-quote-mark {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    /* Contorno fino e neutro, sem preenchimento: não parece progresso (anel grosso) nem pinta o cartão de roxo. */
    border: 1px solid var(--hm-quote-ring);
    border-radius: 50%;
    color: var(--hm-ink-primary);
  }

  #view-dashboard .home-quote-mark svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  #view-dashboard .home-edital-grid {
    flex: 1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "now proj" "bar bar";
    align-items: center;
    gap: 12px 28px;
  }

  #view-dashboard .home-edital-now { grid-area: now; }
  #view-dashboard .home-edital-bar { grid-area: bar; }

  #view-dashboard .home-edital-proj {
    grid-area: proj;
    padding: 0 0 0 24px;
    border-top: 0;
    border-left: 1px solid var(--hm-hair);
  }

  /* Sequência: anel do original (56 + 4 × dias) com o número dentro e "dia seguido" ao lado. */
  #view-dashboard .home-streak-body {
    display: grid;
    flex: 1;
    grid-template-columns: 60px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
  }

  #view-dashboard .home-streak-ring {
    position: relative;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
  }

  #view-dashboard .home-streak-text .home-num > b { display: none; }
  #view-dashboard .home-streak-text .home-num > span { font-size: 13px; }

  #view-dashboard .home-donut-wrap {
    flex: 1;
    grid-template-columns: 150px minmax(0, 1fr);
    justify-items: stretch;
    align-items: center;
    gap: 28px;
  }

  #view-dashboard .home-donut {
    width: 150px;
    height: 150px;
  }

  #view-dashboard .home-donut-wrap .home-legend {
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
  }

  #view-dashboard .home-donut-wrap .home-legend li {
    padding: 5px 0;
    border-bottom: 1px solid var(--hm-hair);
  }
}

/* ==========================================================================
   Conquistas: drawer com o banco completo (continua no estilo próprio do drawer).
   ========================================================================== */
.achievement-groups { display: grid; gap: 16px; }
.achievement-group header h3 { margin: 0; color: var(--ink); font-size: 14px; font-weight: 600; }
.achievement-group header p { margin: 2px 0 8px; color: var(--text-secondary); font-size: 12px; line-height: 1.4; }
.achievement-group ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.achievement-group li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 9px 11px; border: 1px solid var(--card-border); border-radius: var(--radius-md); }
.achievement-group li.is-unlocked { border-color: rgba(250, 204, 21, 0.4); background: rgba(250, 204, 21, 0.05); }
.achievement-group li.is-locked { opacity: 0.86; }
.achievement-group li strong { display: block; color: var(--ink); font-size: 13px; font-weight: 560; }
.achievement-group li span { display: block; margin-top: 1px; color: var(--text-secondary); font-size: 12px; }
.achievement-progress { display: grid; gap: 4px; min-width: 130px; max-width: 200px; }
.achievement-progress small { color: var(--muted); font-size: 11px; }
.achievement-track { height: 5px; }
.achievement-done { color: #facc15; font-size: 12px; font-weight: 600; }
html[data-theme="light"] .achievement-done { color: var(--warning); }

/* Legado: contrato de home-engagement-tests (cards antigos não pulavam no hover e usavam o raio padrão). O raio padrão
   também vale para o botão "Iniciar" da Home C. */
.dashboard-grid .neon-card:hover {
  transform: none;
}

/* ==========================================================================
   Ajustes do celular (HM-1, rodada 1).
   ========================================================================== */
/* Cabeçalho: seletor de edital à esquerda e "Iniciar Sessão" à direita, na mesma linha (como no mockup). Em 320px não cabe
   sem cortar o nome do edital: empilha. */
@media (min-width: 360px) and (max-width: 900px) {
  #view-dashboard .home-head .page-context-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
  }

  #view-dashboard .home-head .home-exam-selector {
    width: 100%;
    min-width: 0;
    max-width: none;
    font-size: 16px;
  }

  #view-dashboard .home-head .home-start-session {
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 0 16px;
    font-size: 13.5px;
    white-space: nowrap;
  }
}

/* No celular o card fica compacto; a projeção continua disponível no computador. */
@media (max-width: 900px) {
  #view-dashboard .home-edital-proj {
    display: none;
  }
}

/* Até 379px (320 e 360): revisões de hoje e sequência em largura total, para "0 itens pendentes · 0min" caber numa linha. */
@media (max-width: 379px) {
  #view-dashboard .home-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}