/*
 * Tracker UI (Fatia 3.2): barra do timer + lista diária + edição inline.
 */

/* A linha-assinatura mora no topo do .app (shell.css) — aqui só o layout da barra. */
.shell-timerbar {
  min-height: auto;
  padding: var(--space-3) var(--space-5);
  background-color: var(--color-surface);
}

.shell-timerbar turbo-frame {
  display: block;
  /* width:100% conserta o bug real: o host .shell-timerbar é flex, então sem isto
     o frame encolhia pro conteúdo (~587px) em vez de esticar até o teto.
     max-width 61rem (976px), NÃO 64rem: o .shell-content é 64rem MAS com padding
     lateral de 24px, então o conteúdo real da lista mede 976px (64rem − 2×24px).
     A barra e a lista têm o mesmo padding de host, então igualar o max-width interno
     alinha as bordas exatamente. margin auto centraliza. */
  width: 100%;
  max-width: 61rem;
  margin-inline: auto;
}

.shell-timerbar__loading {
  font-size: var(--text-sm);
}

.timer-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
}

.timer-bar--idle {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "fields actions";
  align-items: center;
  padding: 0.375rem var(--space-3);
  background-color: var(--color-surface-raised);
  border: 1px solid color-mix(in srgb, var(--color-accent) 58%, var(--color-border));
  border-radius: var(--radius);
}

.timer-bar__fields {
  display: grid;
  grid-area: fields;
  grid-template-columns: minmax(12rem, 1fr) minmax(9rem, 14rem) auto;
  grid-template-areas: "description project tags";
  column-gap: var(--space-3);
  align-items: center;
  min-width: 0;
}

.timer-bar__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.timer-bar__actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.timer-bar--idle .timer-bar__input {
  grid-area: description;
}

.timer-bar--idle .timer-bar__select {
  grid-area: project;
  position: relative;
  min-width: 0;
}

.timer-bar--idle .timer-bar__fields > .tags-field {
  grid-area: tags;
  align-self: center;
}

.timer-bar--idle input[type="text"] {
  min-height: 1.5rem;
  padding: 0;
  background-color: transparent;
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
  font-size: var(--text-base);
}

.timer-bar--idle input[type="text"]:hover,
.timer-bar--idle input[type="text"]:focus {
  border-color: transparent;
  box-shadow: none;
}

.timer-project-picker {
  position: relative;
  width: 100%;
}

.timer-project-picker__summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  max-width: 100%;
  min-height: 1.5rem;
  padding: 1px var(--space-6) 1px var(--space-2);
  box-sizing: border-box;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.timer-project-picker__summary::-webkit-details-marker {
  display: none;
}

.timer-project-picker__summary::after {
  content: "";
  position: absolute;
  right: var(--space-2);
  top: 50%;
  width: 0;
  height: 0;
  border-inline: 4px solid transparent;
  border-top: 5px solid var(--color-text-subtle);
  transform: translateY(-35%);
  pointer-events: none;
}

.timer-project-picker__summary:hover,
.timer-project-picker__summary:focus {
  outline: none;
  background-color: var(--color-surface-sunken);
}

.timer-project-picker__label,
.timer-project-picker__option-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timer-project-picker__dot {
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 999px;
  background-color: var(--timer-project-color);
}

.timer-bar--idle .timer-bar__select--empty .timer-project-picker__dot {
  display: none;
}

.timer-bar--idle .timer-bar__select--empty .timer-project-picker__summary {
  padding-left: var(--space-2);
}

.timer-project-picker__panel {
  position: absolute;
  z-index: 11;
  left: 0;
  margin-top: var(--space-1);
  min-width: 14rem;
  max-width: min(22rem, calc(100vw - 2 * var(--space-4)));
  max-height: min(22rem, calc(100vh - 8rem));
  overflow-y: auto;
  padding: var(--space-2);
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.timer-project-picker__group + .timer-project-picker__group {
  margin-top: var(--space-2);
}

.timer-project-picker__group-label {
  margin: var(--space-2) var(--space-2) var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.timer-project-picker__option {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  min-height: 1.75rem;
  padding: var(--space-1) var(--space-2);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.timer-project-picker__option:hover,
.timer-project-picker__option:focus,
.timer-project-picker__option--selected {
  outline: none;
  background-color: color-mix(in srgb, var(--color-accent) 14%, transparent);
}

.timer-bar--idle .tags-field__details > summary {
  min-height: 1.5rem;
  padding: 1px var(--space-2);
  border-color: transparent;
  color: var(--color-text-subtle);
}

.timer-bar--idle .tags-field__details > summary:hover {
  color: var(--color-text);
  background-color: var(--color-surface-sunken);
}

.timer-bar--idle .tags-field__details > summary .icon {
  color: var(--color-accent);
}

.timer-bar--idle .tags-field__panel {
  right: 0;
}

.timer-bar--idle .timer-bar__start.timer-bar__start {
  width: 2.25rem;
  min-width: 2.25rem;
  height: 2.25rem;
  min-height: 2.25rem;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 999px;
  flex: none;
}

.timer-bar--idle .timer-bar__start .icon {
  margin-left: 1px;
}

.timer-bar__start-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ====================== Timer RODANDO: a cápsula viva ======================
   O form de largura total CONDENSA num objeto único fit-content ancorado à
   esquerda da régua (flush com a lista). Mata o vazio por gestalt: nada
   relacionado fica separado — descrição, relógio e Parar moram no MESMO
   objeto; o espaço à direita vira moldura, não buraco. Segmentos divididos
   por hairlines (instrumento, não toolbar). A cor do projeto é a régua de
   3px na borda esquerda, respirando — identidade + "gravando". */

.timer-bar--running {
  /* Fallback da régua: entry sem projeto respira no acento. */
  --project-color: var(--color-accent);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(10rem, 1fr) minmax(8rem, auto) auto;
  grid-template-areas: "clock description project stop";
  gap: var(--space-3);
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  padding: 0.375rem var(--space-3);
  background-color: var(--color-surface-raised);
  border: 1px solid color-mix(in srgb, var(--color-accent) 58%, var(--color-border));
  border-radius: var(--radius);
  /* Nasce subindo: o momento start→cápsula é a assinatura. Roda no swap do
     Turbo Stream e no load — 0.2s, imperceptível como custo, sentido como vida. */
  animation: timer-bar-enter 0.2s ease-out;
}

.timer-bar__clock {
  grid-area: clock;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
}

.timer-bar__stopwatch {
  font-size: 1.25rem;
  line-height: 1;
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  color: var(--color-text);
}

/* Pulso "gravando" no acento — o estado é mostrado, não escrito (pra leitor
   de tela fica o .timer-bar__sr). */
.timer-bar__live {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--color-accent);
  animation: timer-bar-pulse 2s ease-out infinite;
}

.timer-bar--running .timer-bar__context {
  display: contents;
}

.timer-bar__description {
  grid-area: description;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.35;
}

.timer-bar--running .timer-bar__project {
  grid-area: project;
  max-width: 100%;
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.35;
  color: var(--color-text-subtle);
}

/* Nome do projeto trunca dentro do inline-flex (regra compartilhada com
   .tracker-entry__project segue valendo pro display/gap). */
.timer-bar__project-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timer-bar__project,
.tracker-entry__project {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Segmento 3 — a única ação, dentro do objeto (não órfã na outra ponta). */
.timer-bar__stop {
  grid-area: stop;
  display: flex;
  align-items: center;
  padding: 0;
  border: 0;
}

.timer-bar__stop .btn.btn--danger {
  width: 2.25rem;
  min-width: 2.25rem;
  height: 2.25rem;
  min-height: 2.25rem;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 999px;
  flex: none;
}

.timer-bar__stop .btn.btn--danger .icon {
  color: var(--color-on-danger);
  fill: currentColor;
}

.timer-bar__stop-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Texto só pra leitores de tela (mesmo clip do .timer-bar__label). */
.timer-bar__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@keyframes timer-bar-pulse {
  0%        { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 40%, transparent); }
  70%, 100% { box-shadow: 0 0 0 0.5rem transparent; }
}

/* Respiração da régua do projeto: devagar, no mesmo período do pulso. */
@keyframes timer-bar-edge {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

@keyframes timer-bar-enter {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: none; }
}

.timer-bar__error {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-danger);
}

.tracker-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* SEM overflow:hidden — ele decapitava o dropdown do ⋮ das entries. Os cantos
   arredondados são replicados à mão: topo no header, base na última entry. */
.tracker-day {
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

/* Cabeçalho dentro do bloco do dia: replica as trilhas da direita das entries
   (total 6.5ch + placeholder do ⋮, mesmo gap), então as horas do dia caem na
   MESMA coluna vertical das durações. O € do dia fica logo à esquerda das horas
   (trilha auto — é o único lugar onde dinheiro aparece na lista). */
.tracker-day__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 6.5ch auto;
  grid-template-areas: "label amount total menu";
  column-gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-2) var(--space-3);
  /* Casado com o padding-right da entry (space-3) — o ::after (pseudo-coluna do
     ⋮) fecha o resto do afastamento do total até a borda. */
  padding-right: var(--space-3);
  background-color: var(--color-surface-sunken);
  border-bottom: 1px solid var(--color-border);
  /* -1px: raio interno de um container com borda de 1px. */
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}

.tracker-day__header h2 {
  grid-area: label;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

/* Placeholder do ⋮: sem markup novo, mas reserva a mesma trilha de ações das
   entries para o total do dia colunar com as durações. Largura = a trilha do
   summary (2.75rem cheios, sem margin negativa desde 07/07 — ver o summary). */
.tracker-day__header::after {
  content: "";
  grid-area: menu;
  width: 2.75rem;
}

/* Os spans do partial entram direto no grid do header; o wrapper continua como
   alvo do Turbo Stream day-<date>-totals. */
.tracker-day__totals {
  display: contents;
}

.tracker-day__amount {
  grid-area: amount;
  min-width: 0;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

.tracker-day__total {
  grid-area: total;
  text-align: right;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.tracker-day__entries {
  display: flex;
  flex-direction: column;
}

/* O turbo-frame é o item real da lista; a borda fica na entry interna, mas o
   seletor entre frames evita borda duplicada logo abaixo do cabeçalho do dia. */
.tracker-day__entries > turbo-frame {
  display: block;
}

.tracker-day__entries > turbo-frame + turbo-frame .tracker-entry {
  border-top: 1px solid var(--color-border);
}

/* Última entry fecha o card: raio na base pro hover wash não vazar do canto
   arredondado (já que o container não clipa mais — ver .tracker-day). */
.tracker-day__entries > turbo-frame:last-child .tracker-entry {
  border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px);
}

/* Desktop = DUAS linhas dentro do bloco do dia (decisão do dono 07/07):
     1ª: descrição ………………… início–fim · decorrido · ⋮
     2ª: ● projeto · tags
   A col-1 é auto (dimensionada pelo projeto na 2ª linha, com teto via max-width);
   a descrição spanna col-1+2 e flexiona pela col-2 (1fr). Horário e duração em
   trilhas determinísticas — decorrido cola na MESMA coluna vertical em todas as
   linhas e no total do header. O € por entry saiu da linha: mora no total do dia
   e no title do decorrido. Gap uniforme (space-3) entre os dados. */
.tracker-entry {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 6.5ch auto;
  grid-template-areas:
    "desc desc range dur  menu"
    "proj tags tags  tags tags";
  column-gap: var(--space-3);
  row-gap: var(--space-2);
  align-items: baseline;
  padding: var(--space-3);
  /* ⋮ afastado da borda (revisado 07/07): antes era padding-right:0 e a CAIXA do
     botão no hover/focus (.btn--quiet) encostava na borda do bloco. space-3 (=
     padding interno do card) dá respiro simétrico — o header casa o mesmo valor
     e o ::after encolhe junto, então decorrido/total seguem colunados. */
  padding-right: var(--space-3);
}

/* A linha responde ao mouse (tem ⋮/edição): lavagem sutil de ACENTO, sem virar card. */
.tracker-entry:hover {
  background-color: color-mix(in srgb, var(--color-accent) 5%, transparent);
}

/* Os wrappers somem do layout: os filhos viram grid items da própria entry. */
.tracker-entry__main,
.tracker-entry__summary,
.tracker-entry__actions {
  display: contents;
}

/* Chips na 2ª linha, logo depois do projeto (cluster esquerdo). nowrap + overflow
   escondem excesso raro sem esticar a linha. gap próprio → o .tag-badge NÃO usa a
   margin-left dele aqui (senão duplica o espaço); zeramos a margin no contexto flex. */
.tracker-entry__tags {
  grid-area: tags;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-1);
  min-width: 0;
  overflow: hidden;
}

.tracker-entry__tags .tag-badge {
  flex: 0 0 auto;
  margin-left: 0;
}

/* Tags da linha SEM caixa (borda fora, só o fundo sunken) — chips com borda em
   série viravam um trem confuso. O badge de alerta (--danger) mantém a caixa:
   é o único que DEVE saltar. */
.tracker-entry__tags .tag-badge:not(.tag-badge--danger) {
  border-color: transparent;
}

/* Fontes de tamanhos diferentes alinham pelo PÉ (baseline), não pelo topo — senão
   o horário (xs) flutua acima da descrição. Descrição longa trunca com ellipsis;
   o texto inteiro vive no title (mouseover) / :focus (tap). */
.tracker-entry__description {
  grid-area: desc;
  align-self: baseline;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--weight-medium);
}

/* Descrição truncada expande no FOCO (tap no mobile — onde o title do span não
   existe —, Tab no teclado): o próprio texto abrindo é o indicador de foco. */
.tracker-entry__description:focus {
  white-space: normal;
  overflow: visible;
  outline: none;
}

/* Horário (range) — o dado mais QUIETO da cascata: xs, normal, subtle. É
   metadata (QUANDO), não um número pra escanear. A linha hierarquiza por
   tipografia: descrição forte, duração protagonista, valor secundário, horário
   e tags quietos, badge de alerta como único elemento alto. */
.tracker-entry__range {
  grid-area: range;
  align-self: baseline;
  white-space: nowrap;
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
  color: var(--color-text-subtle);
}

/* Projeto abre a 2ª linha: metadado, não protagonista — sm, subtle, bolinha
   COLADA no nome (2px). O teto (16rem) segura a col-1 (auto) — nome gigante
   trunca em vez de esmagar a descrição da 1ª linha. */
.tracker-entry__project {
  grid-area: proj;
  min-width: 0;
  max-width: 16rem;
  overflow: hidden;
  gap: calc(var(--space-1) / 2);
  font-size: var(--text-sm);
}

.tracker-entry__project-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Duração — o PROTAGONISTA da linha: base (14px), semibold (600), cor principal.
   É o número que o olho procura (quanto tempo levou). Destaca-se do valor (que é
   sm/medium/subtle) em TODOS os eixos: tamanho, peso e cor. */
.tracker-entry__duration {
  grid-area: dur;
  align-self: baseline;
  text-align: right;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  /* Âncora do tooltip de valor (abaixo). */
  position: relative;
}

/* Tooltip do € no FOCO (tap no mobile, onde o title nativo não existe; Tab/clique
   no desktop): CSS puro lendo o próprio title — sem JS, sem markup. O tooltip é o
   indicador de foco (outline fora), mesmo racional da descrição truncada. */
.tracker-entry__duration[title]:focus {
  outline: none;
}

.tracker-entry__duration[title]:focus::after {
  content: attr(title);
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  z-index: 2;
  padding: var(--space-1) var(--space-2);
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-subtle);
  white-space: nowrap;
}

/* O ⋮ sem CAIXA (a moldura pendurada lia como bagunça): ícone quieto, alvo de
   clique/toque de 2.75rem intacto, centrado na 1ª linha via margem negativa. */
.tracker-entry__actions .row-menu {
  grid-area: menu;
  justify-self: end;
}

/* Largura FIXA (2.75rem = alvo de toque) casada com o ::after do header — é o que
   faz o decorrido e o total do dia caírem na mesma coluna, sem depender de 1lh
   (que varia com o font-size do contexto). A margin-left negativa encolhe a
   TRILHA (o alvo de toque fica inteiro): o botão invade o gap e o decorrido chega
   mais perto do ⋮ — pareada com o ::after do header (largura - space-2). */
.tracker-entry__actions .row-menu > summary {
  border-color: transparent;
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin-block: calc((1lh - 2.75rem) / 2);
  /* Sem margin-left negativa (revisado 07/07): ela colava a CAIXA do hover na
     duração (4px de gap). Zerada, o ⋮ fica centrado na própria trilha e ganha
     o column-gap (space-3) de folga dos dois lados. O ::after do header casa a
     trilha cheia (2.75rem) → total do dia segue alinhado às durações. */
}

.tracker-entry--running .tracker-entry__description,
.tracker-entry--running .tracker-entry__duration {
  color: var(--color-accent);
}

/* EDIÇÃO inline: coluna única e sem áreas (o form tem grid próprio; as áreas da
   linha de leitura esmagariam o form). */
.tracker-entry--editing {
  grid-template-columns: 1fr;
  grid-template-areas: none;
  padding: var(--space-3);
  margin: var(--space-2) 0;
  background-color: color-mix(in srgb, var(--color-accent) 4%, var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.tracker-entry__edit-grid,
.tracker-entry__readonly {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.tracker-entry__readonly {
  margin: 0;
}

.tracker-entry__readonly dt {
  margin-bottom: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

.tracker-entry__readonly dd {
  margin: 0;
}

.tracker-billable {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 1.65rem 0 0;
}

.tracker-billable input {
  width: auto;
}

/* --- Entry manual (Q46): <details> que expande no topo da lista ------------- */
.manual-entry {
  margin-bottom: var(--space-4);
}

.manual-entry > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
}

.manual-entry > summary::-webkit-details-marker {
  display: none;
}

.manual-entry__form {
  margin-top: var(--space-3);
  padding: var(--space-4);
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

/* Duas linhas por design: descrição (campo de captura) ocupa a LINHA inteira;
   projeto·início·fim·duração dividem a linha 2 em colunas com teto — o `auto`
   antigo deixava os datetime-local (largura varia com o locale, ex. AM/PM)
   incharem até esmagar a descrição pra ~6px. Áreas por nth-child (markup intacto). */
.manual-entry__grid {
  display: grid;
  grid-template-columns: minmax(11rem, 1.4fr) minmax(10rem, 1fr) minmax(10rem, 1fr) minmax(7rem, 0.8fr);
  grid-template-areas:
    "desc  desc  desc desc"
    "proj  start end  dur"
    "bill  bill  bill bill";
  gap: var(--space-3);
  align-items: end;
}

.manual-entry__grid > :nth-child(1) { grid-area: desc; }
.manual-entry__grid > :nth-child(2) { grid-area: proj; }
.manual-entry__grid > :nth-child(3) { grid-area: start; }
.manual-entry__grid > :nth-child(4) { grid-area: end; }
.manual-entry__grid > :nth-child(5) { grid-area: dur; }
.manual-entry__grid > .tracker-billable { grid-area: bill; margin: 0; }

/* --- Form de corte do split, dentro do menu ⋮ ------------------------------- */
.row-menu__split > summary {
  cursor: pointer;
  list-style: none;
}

.row-menu__split > summary::-webkit-details-marker {
  display: none;
}

.row-menu__split-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

@media (max-width: 48rem) {
  .manual-entry__grid {
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }

  /* :nth-child(n) iguala a especificidade (0,2,0) dos grid-area nomeados do
     desktop — com `> *` (0,1,0) o reset perdia e os campos empilhavam na mesma
     célula (popup quebrado no mobile, 07/07). */
  .manual-entry__grid > :nth-child(n) {
    grid-area: auto;
  }

  .shell-timerbar {
    padding: var(--space-2) var(--space-3);
  }

  /* Timer ocioso mobile: uma cápsula só, como a extensão. Descrição domina; o
     projeto e tags ficam como metadados compactos; Play permanece sempre na borda. */
  .timer-bar {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .timer-bar--idle {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
    padding: 0.375rem var(--space-3);
  }

  .timer-bar--idle .timer-bar__fields {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "description description"
      "project tags";
    column-gap: var(--space-2);
  }

  .timer-bar--idle .timer-bar__input {
    min-width: 0;
  }

  .timer-bar--idle .timer-bar__select {
    min-width: 0;
  }

  .timer-bar--idle .timer-bar__fields > .tags-field {
    justify-self: end;
  }

  .timer-bar--idle .timer-bar__actions {
    align-self: start;
  }

  .timer-project-picker__summary {
    max-width: 100%;
  }

  .tracker-entry__edit-grid,
  .tracker-entry__readonly {
    grid-template-columns: 1fr;
  }

  /* Mobile em 3 linhas (REVISADO 07/07 — o início–fim DESCEU da 1ª linha; a
     descrição era quem pagava o aperto):
       1ª: descrição ………………………… decorrido · ⋮
       2ª: ● projeto ………………………… início–fim (alinhado sob o decorrido — os dados
           de tempo formam uma coluna à direita)
       3ª: tags e alertas. */
  .tracker-entry {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "desc dur   menu"
      "proj range ."
      "tags tags  tags";
    row-gap: var(--space-3);
    align-items: start;
  }

  /* Range na MESMA coluna do decorrido, com a fonte calibrada pra LARGURA bater:
     decorrido = 8 chars em text-base (14px); início–fim = 13 chars → 9px iguala
     as larguras (medido no device; pedido do dono 07/07). Fora da escala de
     tokens de propósito — é o único lugar com essa restrição geométrica. O
     letter-spacing positivo compensa a legibilidade no tamanho mínimo. */
  .tracker-entry__range {
    justify-self: end;
    font-size: 0.5625rem;
    letter-spacing: 0.01em;
  }

  .tracker-entry__tags {
    flex-wrap: wrap;
    overflow: visible;
  }

  /* No mobile o projeto spanna a 2ª linha inteira — o teto de 16rem do desktop
     (que segura a col-1 auto) não se aplica. */
  .tracker-entry__project {
    max-width: none;
  }

  /* Cabeçalho do dia no mobile = o MESMO do desktop, € incluso (decisão do dono
     07/07 — agora que o € saiu das linhas, o total do dia é o único lugar dele
     na lista; a data trunca antes de empurrar os números). */

  .timer-bar--running {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "clock stop"
      "description description"
      "project project";
    gap: var(--space-2) var(--space-3);
    padding: 0.375rem var(--space-3);
  }

  .timer-bar__clock {
    padding: 0;
  }

  .timer-bar__stopwatch {
    font-size: 1.25rem;
  }

  .timer-bar__stop {
    padding: 0;
    border: 0;
  }

  .timer-bar--running .timer-bar__context {
    display: contents;
  }

  .timer-bar--running .timer-bar__description {
    min-width: 0;
  }

  .timer-bar--running .timer-bar__project {
    max-width: 100%;
  }

  .tracker-billable {
    margin-top: 0;
  }
}