/* ============================================================
   Registro — painel de instrumento
   A metáfora: um marégrafo. Ele não elogia nem repreende,
   só desenha a linha. Dia pior = mais tinta no papel.
   ============================================================ */

:root {
  /* tintas — minerais, não semáforo. Distintas em matiz E em luminosidade,
     e sempre acompanhadas de uma diferença de forma (anel / meio / cheio). */
  --verde:    #6BA88B;
  --amarelo:  #D8A24A;
  --vermelho: #C25B45;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;

  --pad: clamp(14px, 4vw, 22px);
  --gap: clamp(10px, 2.6vw, 16px);

  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Bricolage Grotesque", var(--sans);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* painel escuro — o uso real é à noite */
[data-theme="escuro"] {
  --bg:      #0F1518;
  --panel:   #151E22;
  --raised:  #1C272C;
  --line:    #253339;
  --line-soft: #1D282D;
  --text:    #DDE5E5;
  --muted:   #7E9299;
  --faint:   #4A5B61;
  --shadow: 0 1px 2px rgb(0 0 0 / .5), 0 8px 24px -12px rgb(0 0 0 / .7);
  --glow: 0 0 0 1px rgb(255 255 255 / .03) inset;
}

/* papel de registrador — cinza-esverdeado frio, não creme */
[data-theme="claro"] {
  --bg:      #E7EBE6;
  --panel:   #F3F5F1;
  --raised:  #FBFCFA;
  --line:    #C6CFC7;
  --line-soft: #DAE0D9;
  --text:    #17201F;
  --muted:   #566360;
  --faint:   #96A29D;
  --verde:    #3F7F62;
  --amarelo:  #A2701C;
  --vermelho: #A3402B;
  --shadow: 0 1px 2px rgb(23 32 31 / .07), 0 8px 22px -14px rgb(23 32 31 / .28);
  --glow: none;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
  /* a grade fina do papel do registrador, quase imperceptível */
  background-image:
    repeating-linear-gradient(to right, var(--line-soft) 0 1px, transparent 1px 100%);
  background-size: 56px 100%;
}

h1, h2, h3 { margin: 0; font-weight: 500; }

button { font: inherit; color: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

[hidden] { display: none !important; }

/* ─────────────────────────────── portão ─────────────────────────────── */

.gate {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--pad);
}
.gate__inner { width: min(340px, 100%); text-align: center; }
.gate__mark { width: 52px; height: 52px; color: var(--verde); }
.gate__title {
  font-family: var(--display);
  font-size: 30px;
  letter-spacing: -.02em;
  margin-top: 14px;
}
.gate__sub {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  margin: 4px 0 26px;
}
.gate__form { display: grid; gap: 14px; text-align: left; margin-top: 4px; }
.gate__nota {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--faint);
}
.gate__error {
  margin: 14px 0 0;
  min-height: 1.2em;
  color: var(--vermelho);
  font-size: 13.5px;
}

/* ─────────────────────────────── aparelhos ─────────────────────────────── */

.dev__state {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}
.dev__state--alerta { color: var(--amarelo); }

.dev__diag {
  margin: 16px 0 12px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--r-md);
  background: var(--bg);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}
.dev__diag b { color: var(--text); font-weight: 500; }
.dev__diag--ok   { border-left-color: var(--verde); }
.dev__diag--ruim { border-left-color: var(--amarelo); }

/* Sem autenticador de plataforma o botão não leva a lugar nenhum — melhor
   desligado e explicado do que clicável e frustrante. */
.btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.dev__note {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--faint);
}
.dev__note p { margin: 0 0 8px; }
.dev__note b { color: var(--muted); }
.dev__code {
  margin: 0 0 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 11.5px;
  overflow-x: auto;
}

/* ─────────────────────────────── molduras ───────────────────────────── */

/* A tela é a moldura, não o papel: cabeçalho, painel e abas cabem na altura
   da janela e quem rola é o painel — nunca a página. Numa tela larga o
   painel abre em colunas; numa estreita, uma aba por vez. */
.app {
  height: 100dvh;
  padding: 0 var(--pad);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--gap);
  overflow: hidden;
}

/* Grade, não flex com quebra: quem decide onde a barra de trilhas cai é o
   layout, não a sobra de espaço da linha. Estreito = marca e ações em cima,
   trilhas embaixo; largo = tudo na mesma linha, trilhas no meio. */
.top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "marca  .       acoes"
    "trilha trilha  trilha";
  align-items: center;
  gap: 10px;
  padding: 12px 0 2px;
}
.top__brand { grid-area: marca; display: flex; align-items: center; gap: 9px; }
.top__mark { width: 21px; height: 21px; color: var(--verde); flex: none; }
.top h1 {
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: -.015em;
}
.top__actions { grid-area: acoes; display: flex; gap: 6px; }

/* ─────────────────────────────── painel e abas ──────────────────────── */

.board {
  display: grid;
  gap: var(--gap);
  align-content: start;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding-bottom: 2px;
  /* na tela estreita é uma coluna só, larga o bastante para o polegar */
  width: min(640px, 100%);
  margin-inline: auto;
}

/* sem isto, um filho largo (a faixa do ano, uma nota comprida) estica a
   coluna e leva o card para fora da tela em vez de se ajustar */
.panel { min-width: 0; }

/* Tela estreita: uma seção por vez. O HTML já nasce com a aba "hoje"
   marcada — sem isso, um erro de JS deixaria a tela vazia. */
@media (max-width: 1319.98px) {
  .panel:not(.is-on) { display: none; }
}

.tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 3px;
  padding: 3px;
  /* alinhada com o painel, não com a tela: numa janela larga em modo aba
     as duas barras ficariam de larguras diferentes */
  width: min(640px, 100%);
  margin: 0 auto calc(6px + env(safe-area-inset-bottom));
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--glow);
}
.tab {
  min-height: 46px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .05em;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.tab:hover { color: var(--text); }
.tab.is-on { background: var(--raised); color: var(--text); }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--pad);
  box-shadow: var(--shadow), var(--glow);
}
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.card__title {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.card__title--month {
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--text);
  font-weight: 500;
  text-align: center;
  flex: 1;
}
.card__meta {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--faint);
  letter-spacing: .03em;
}

.sub {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}
.sub__hint { margin: 3px 0 12px; font-size: 12.5px; color: var(--faint); }

/* ─────────────────────────────── botões ─────────────────────────────── */

.btn {
  min-height: 46px;
  padding: 0 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--raised);
  font-size: 15px;
  font-weight: 500;
  transition: background .16s var(--ease), border-color .16s var(--ease), transform .12s var(--ease);
}
.btn:hover { border-color: var(--faint); }
.btn:active { transform: translateY(1px); }
.btn--solid { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn--solid:hover { opacity: .88; border-color: var(--text); }
.btn--ghost { background: transparent; color: var(--muted); }
.btn--ghost:hover { color: var(--text); }
.btn--wide { width: 100%; margin-top: 10px; }

.icon-btn {
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: transparent;
  transition: border-color .16s var(--ease), color .16s var(--ease);
}
.icon-btn:hover { border-color: var(--faint); }
.icon-btn__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .07em;
  color: var(--muted);
}

.step {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  transition: color .16s var(--ease), background .16s var(--ease);
}
.step:hover { color: var(--text); background: var(--raised); }

.menu {
  position: absolute;
  right: var(--pad);
  z-index: 30;
  display: grid;
  min-width: 168px;
  padding: 6px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
}
.menu__item {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  font-size: 14.5px;
  text-align: left;
  text-decoration: none;
}
.menu__item:hover { background: var(--panel); }

.segmented {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.segmented__opt {
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.segmented__opt.is-on { background: var(--raised); color: var(--text); }

/* ─────────────── seletor de nível — a escala de tinta ───────────────── */

.picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.picker--three { grid-template-columns: repeat(3, 1fr); }

.pick {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 9px;
  min-height: 92px;
  padding: 15px 6px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--raised);
  cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease), transform .12s var(--ease);
}
.picker--sm .pick { min-height: 78px; padding: 12px 6px 11px; }
.pick:hover { border-color: currentColor; }
.pick:active { transform: translateY(1px); }
.pick input { position: absolute; opacity: 0; pointer-events: none; }

/* a marca: anel vazio → meio preenchido → sólido */
.pick__ink {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid currentColor;
  transition: transform .16s var(--ease);
}
.pick--verde    { color: var(--verde); }
.pick--amarelo  { color: var(--amarelo); }
.pick--vermelho { color: var(--vermelho); }
.pick--amarelo  .pick__ink { background: linear-gradient(to top, currentColor 50%, transparent 50%); }
.pick--vermelho .pick__ink { background: currentColor; }

.pick__name {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--muted);
}
.pick:hover .pick__name { color: var(--text); }
.pick:has(input:checked) {
  border-color: currentColor;
  background: color-mix(in oklab, currentColor 12%, var(--raised));
}
.pick:has(input:checked) .pick__name { color: var(--text); }
.pick:has(input:checked) .pick__ink { transform: scale(1.12); }
.pick:has(input:focus-visible) { outline: 2px solid currentColor; outline-offset: 2px; }

/* o botão que você mais vai usar carrega o peso */
.pick--lead {
  border-color: color-mix(in oklab, currentColor 45%, var(--line));
  background: color-mix(in oklab, currentColor 9%, var(--raised));
}
.pick--lead .pick__name { color: var(--text); }

/* ─────────────────────────────── trilhas ───────────────────────────── */

/* mora dentro da barra de cima: na tela estreita cai para a linha de baixo
   (order: 3), na larga senta no meio dela */
.tracks {
  grid-area: trilha;
  width: min(640px, 100%);
  margin-inline: auto;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 3px;
  padding: 3px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--glow);
}
.track {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .05em;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.track:hover { color: var(--text); }
.track.is-on { background: var(--raised); color: var(--text); }
.track__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--faint);
  flex: none;
}
.track.is-on .track__dot { background: var(--verde); }
.track.is-on[data-hoje="vermelho"] .track__dot { background: var(--vermelho); }
.track.is-on[data-hoje="amarelo"] .track__dot { background: var(--amarelo); }
.track[data-hoje="vermelho"] .track__dot { background: color-mix(in oklab, var(--vermelho) 70%, transparent); }
.track[data-hoje="amarelo"] .track__dot { background: color-mix(in oklab, var(--amarelo) 70%, transparent); }

/* ─────────────────────────────── hoje ──────────────────────────────── */

.today__state {
  margin: 0 0 14px;
  font-size: 14.5px;
  color: var(--muted);
}
.today__state b { color: var(--text); font-weight: 500; }

.today__more {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line-soft);
}
.linkish {
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 4px;
  transition: color .16s var(--ease), text-decoration-color .16s var(--ease);
}
.linkish:hover { color: var(--text); text-decoration-color: var(--faint); }

/* ─────────────────────────────── grade do mês ───────────────────────── */

.grid__weekdays,
.grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.grid__weekdays {
  margin-bottom: 7px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--faint);
  text-align: center;
}

.day {
  position: relative;
  aspect-ratio: 1;
  min-height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: transparent;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.day:hover { border-color: var(--faint); }
.day--pad { border-color: transparent; pointer-events: none; }
.day--hoje { border-color: var(--text); }

.day__n {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--faint);
  transition: color .16s var(--ease);
  z-index: 1;
}
.day--tem .day__n { color: var(--text); font-weight: 500; }

/* A tinta do dia é dividida ao meio, uma metade por trilha, sempre na mesma
   ordem. A quantidade de tinta continua acompanhando a gravidade — o mês se lê
   de relance sem depender de cor, e agora nas duas trilhas de uma vez. */
.day__ink {
  position: absolute;
  inset: 3px;
  display: flex;
  gap: 1.5px;
  border-radius: 4px;
  overflow: hidden;
}
.day__faixa {
  position: relative;
  flex: 1;
  animation: assenta .22s var(--ease);
}

/* futuro ou anterior ao primeiro registro: papel em branco, não dia limpo */
.day__faixa--sem { animation: none; }

/* Dia passado sem marca: limpo por omissão. Tinta mínima — presente o bastante
   para ver que o dia passou, discreta o bastante para os marcados saltarem. */
.day__faixa--implicito {
  background: color-mix(in oklab, var(--verde) 11%, transparent);
  animation: none;
}
/* limpo marcado a dedo: a mesma tinta, com a linha de base assentada */
.day__faixa--verde {
  background:
    linear-gradient(to top,
      color-mix(in oklab, var(--verde) 60%, transparent) 3px,
      color-mix(in oklab, var(--verde) 13%, transparent) 3px);
}
.day__faixa--amarelo {
  background:
    linear-gradient(to top,
      color-mix(in oklab, var(--amarelo) 58%, transparent) 50%, transparent 50%);
}
.day__faixa--vermelho { background: color-mix(in oklab, var(--vermelho) 62%, transparent); }

/* as duas no mesmo dia: o mesmo anel que elas ganham em "as duas juntas" */
.day--dupla .day__ink { box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--text) 45%, transparent); }

/* o número atravessa as duas metades, então ganha um halo da cor do cartão */
.day--tem .day__n { text-shadow: 0 0 3px var(--panel), 0 0 2px var(--panel); }

@keyframes assenta { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }

/* mais de um registro no dia — só cabe na trilha que aceita repetir */
.day__mais {
  position: absolute;
  right: 2px;
  bottom: 1px;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--text);
  opacity: .8;
}

/* Resumo do mês: uma linha por trilha, na ordem das metades da célula.
   Ele é o número do mês e a legenda de qual lado é de quem, ao mesmo tempo. */
.msum {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
}
.msum__row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; }
.msum__lado {
  flex: none;
  width: 13px;
  height: 13px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--line);
  background: linear-gradient(to right, var(--muted) 50%, transparent 50%);
}
.msum__lado--b { background: linear-gradient(to left, var(--muted) 50%, transparent 50%); }
.msum__nome {
  min-width: 54px;
  color: var(--text);
  letter-spacing: .05em;
}
.msum b { color: var(--text); font-weight: 600; }
.msum__pe { margin: 1px 0 0; color: var(--faint); }

/* ───────────── assinatura: a faixa das 24 horas (o traço) ───────────── */

.hours {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  align-items: end;
  gap: 2px;
  height: 96px;
  padding-bottom: 1px;
  border-bottom: 1px solid var(--line);
}
.hour {
  display: flex;
  flex-direction: column-reverse;
  gap: 1px;
  min-height: 2px;
  border-radius: 2px 2px 0 0;
  overflow: hidden;
}
.hour__seg { display: block; min-height: 2px; }
.hour__seg--verde    { background: var(--verde); }
.hour__seg--amarelo  { background: var(--amarelo); }
.hour__seg--vermelho { background: var(--vermelho); }
.hour--vazia { background: var(--line-soft); height: 2px; }
.hour--pico { box-shadow: 0 0 0 1px color-mix(in oklab, var(--vermelho) 45%, transparent); }

.hours__axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--faint);
  letter-spacing: .05em;
}

.readout {
  margin: 10px 0 22px;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.55;
}
.readout b { color: var(--text); font-weight: 500; }
.readout--vazio { color: var(--faint); font-style: italic; }

/* dias da semana */
.weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.wd { display: grid; gap: 6px; justify-items: center; }
/* Sem preenchimento de fundo: um bloco cheio atrás de uma barra vazia
   lê como valor alto. O zero precisa parecer zero — só a linha de base. */
.wd__bar {
  width: 100%;
  height: 54px;
  display: flex;
  flex-direction: column-reverse;
  gap: 1px;
  border-bottom: 2px solid var(--line);
  overflow: hidden;
}
.wd__seg { display: block; }
.wd__seg--verde    { background: var(--verde); }
.wd__seg--amarelo  { background: var(--amarelo); }
.wd__seg--vermelho { background: var(--vermelho); }
.wd__name {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .05em;
  color: var(--faint);
}

/* ─────────────────────────────── o ano ──────────────────────────────── */

/* 53 semanas sempre dentro da largura da coluna. Com célula fixa a faixa
   media 580px e empurrava o card inteiro para fora da tela do celular —
   aqui a semana encolhe junto com o espaço disponível. */
.year {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, clamp(5px, 1.4vw, 11px));
  grid-auto-columns: minmax(0, 1fr);
  gap: clamp(1px, .4vw, 2px);
  overflow: hidden;
  padding-bottom: 8px;
}
.ydot {
  width: auto;
  height: auto;
  border-radius: 2px;
  background: var(--line-soft);
}
.ydot--verde    { background: var(--verde); }
.ydot--amarelo  { background: var(--amarelo); }
.ydot--vermelho { background: var(--vermelho); }
/* fora do acompanhamento: papel em branco, não dia limpo */
.ydot--sem      { background: transparent; box-shadow: inset 0 0 0 1px var(--line-soft); }

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 9px;
  margin-top: 14px;
}
.tile {
  padding: 11px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.tile__n {
  display: block;
  font-family: var(--mono);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.tile__n--vazio { color: var(--faint); }
.tile__k {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--muted);
}

/* ─────────────────────────────── lista de registros ─────────────────── */

.stack { display: grid; gap: 7px; }
.stack:not(:empty) { margin-top: 14px; }

.rec {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 11px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--bg);
}
.rec__ink {
  flex: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.8px solid currentColor;
}
.rec--verde    { color: var(--verde); }
.rec--amarelo  { color: var(--amarelo); }
.rec--vermelho { color: var(--vermelho); }
.rec--amarelo  .rec__ink { background: linear-gradient(to top, currentColor 50%, transparent 50%); }
.rec--vermelho .rec__ink { background: currentColor; }

.rec__body { flex: 1; min-width: 0; }
.rec__top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .03em;
}
.rec__level { color: var(--text); font-weight: 500; }
.rec__time { color: var(--faint); }
/* na gaveta a lista mistura as duas trilhas, então o cartão diz de quem é */
.rec__track {
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: .06em;
}
.rec__note {
  margin: 3px 0 0;
  font-size: 13.5px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.rec__acts { display: flex; gap: 2px; flex: none; }
.rec__act {
  min-width: 36px;
  min-height: 36px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .05em;
  /* no celular não existe hover: a ação precisa ser visível parada */
  color: var(--muted);
  transition: color .16s var(--ease), background .16s var(--ease);
}
.rec__act:hover { color: var(--text); background: var(--raised); }
.rec__act--del:hover { color: var(--vermelho); }

.empty {
  padding: 14px 0 2px;
  font-size: 13.5px;
  color: var(--faint);
}

/* ─────────────────────────────── gaveta ─────────────────────────────── */

.sheet { position: fixed; inset: 0; z-index: 60; }
.sheet__scrim {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / .55);
  animation: fade .18s var(--ease);
}
.sheet__panel {
  position: absolute;
  inset: auto 0 0;
  max-height: 92dvh;
  overflow-y: auto;
  padding: 8px var(--pad) calc(var(--pad) + env(safe-area-inset-bottom));
  background: var(--panel);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  animation: sobe .26s var(--ease);
}
@media (min-width: 620px) {
  .sheet__panel {
    inset: 50% auto auto 50%;
    translate: -50% -50%;
    width: min(520px, calc(100vw - 32px));
    border-radius: var(--r-xl);
    border-bottom: 1px solid var(--line);
    animation: fade .2s var(--ease);
  }
}
@keyframes sobe { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.sheet__grip {
  width: 36px;
  height: 4px;
  margin: 4px auto 10px;
  border-radius: 2px;
  background: var(--line);
}
@media (min-width: 620px) { .sheet__grip { display: none; } }

.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.sheet__title {
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: -.015em;
}
.sheet__sub {
  margin: 1px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ──────────────────── as duas trilhas lado a lado ──────────────────── */

.overlap { display: grid; gap: 5px; }
.overlap__row { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 9px; }
.overlap__name {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--muted);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 90 células numa tela de celular: sem vão entre elas, senão o vão come a
   marca. Dias iguais se fundem em blocos — o que ajuda a ler as sequências. */
.overlap__line {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  height: 22px;
  border-radius: 3px;
  overflow: hidden;
}
.overlap__cell { background: var(--line-soft); }
.overlap__cell--sem      { background: transparent; }
.overlap__cell--verde    { background: color-mix(in oklab, var(--verde) 26%, transparent); }
.overlap__cell--amarelo  { background: var(--amarelo); }
.overlap__cell--vermelho { background: var(--vermelho); }
/* dias em que as duas subiram juntas ganham um sinal próprio */
.overlap__cell--dupla { box-shadow: 0 0 0 1.5px var(--text); border-radius: 0; }

/* ─────────────────────────────── formulário ─────────────────────────── */

.form { display: grid; gap: 15px; margin-top: 18px; }
.form__levels { margin: 0; padding: 0; border: 0; }
.form__levels legend { padding: 0; margin-bottom: 9px; }
.form__actions { display: flex; gap: 9px; justify-content: flex-end; }
.form__actions .btn--solid { min-width: 120px; }

/* seletor de trilha da gaveta — mesmo desenho das trilhas lá de cima */
.tsel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 3px;
  padding: 3px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.tsel__opt {
  min-height: 40px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .05em;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.tsel__opt:hover { color: var(--text); }
.tsel__opt.is-on { background: var(--raised); color: var(--text); }
.tsel__opt b { font-weight: 600; color: var(--faint); }
.tsel__opt.is-on b { color: var(--verde); }

.form__hint {
  margin: 9px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--faint);
}

.field { display: grid; gap: 6px; }
.field__label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.field__label em {
  font-style: normal;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: none;
  color: var(--faint);
}
.field__input {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px; /* 16px evita o zoom automático do iOS */
  transition: border-color .16s var(--ease);
}
.field__input:focus { border-color: var(--verde); outline: none; }
.field__input::placeholder { color: var(--faint); }
.field__input--time { font-family: var(--mono); max-width: 170px; }
.field__input--area { resize: vertical; min-height: 88px; line-height: 1.55; }

/* ─────────────────────────────── legenda / toast ────────────────────── */

.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 2px 0 0;
  padding: 0 4px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--muted);
}
.legend__item { display: inline-flex; align-items: center; gap: 7px; }
.legend__note {
  flex-basis: 100%;
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0;
  color: var(--faint);
}
.chip {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.6px solid currentColor;
}
.chip--verde    { color: var(--verde); }
.chip--amarelo  { color: var(--amarelo); background: linear-gradient(to top, currentColor 50%, transparent 50%); }
.chip--vermelho { color: var(--vermelho); background: currentColor; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  translate: -50% 0;
  z-index: 80;
  max-width: calc(100vw - 32px);
  padding: 11px 17px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--raised);
  box-shadow: var(--shadow);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .03em;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease), translate .2s var(--ease);
}
.toast.is-on { opacity: 1; translate: -50% -6px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ═══════════ tela larga: o instrumento inteiro, de uma vez ═══════════════
   Coluna de celular no meio de um monitor não é leitura de painel, é rolagem.
   Aqui as cinco seções abrem em três colunas e as abas somem — não há o que
   escolher quando tudo está à vista.

   As alturas viram vh de propósito: o que não pode acontecer é o painel
   passar da janela e a rolagem voltar pela porta dos fundos. Vem depois de
   tudo no arquivo para vencer as regras de altura fixa lá de cima. */

@media (min-width: 1320px) {
  .app { padding-bottom: 14px; }

  .top {
    padding-bottom: 0;
    width: min(2000px, 100%);
    margin-inline: auto;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "marca trilha acoes";
  }
  .top__actions { justify-self: end; }
  .tracks { width: min(420px, 100%); }

  /* Quatro colunas. O mês é a seção mais alta e ocupa uma inteira: com essa
     divisão nenhuma pilha passa dele, e é ele que define a altura do painel. */
  .board {
    width: min(2000px, 100%);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* a última faixa fica com a sobra: a legenda desce para o rodapé da tela
       em vez de deixar um vão solto embaixo do painel */
    grid-template-rows: auto auto minmax(min-content, 1fr);
    grid-template-areas:
      "hoje mes padroes ano"
      "duas mes padroes ano"
      "legenda legenda legenda legenda";
  }
  .panel--legenda { align-self: end; }
  .panel--hoje    { grid-area: hoje; }
  .panel--mes     { grid-area: mes; }
  .panel--padroes { grid-area: padroes; }
  .panel--ano     { grid-area: ano; }
  .panel--duas    { grid-area: duas; }
  .panel--legenda { grid-area: legenda; }
  /* cada card termina onde o conteúdo termina, sem esticar para casar linha */
  .board > .card { align-self: start; }

  .tabs { display: none; }

  /* o mês: a célula pode ficar retangular, a altura é que manda */
  .grid { grid-auto-rows: clamp(28px, 6.2vh, 62px); }
  .day { aspect-ratio: auto; min-height: 0; }

  /* o traço das 24h e as barras da semana respiram com a altura da janela */
  .hours { height: clamp(62px, 14.5vh, 148px); }
  .wd__bar { height: clamp(36px, 8vh, 80px); }

  /* 53 semanas dentro da coluna: nada de rolagem lateral escondida */
  .year {
    grid-template-rows: repeat(7, clamp(7px, 1.45vh, 14px));
    grid-auto-columns: minmax(0, 1fr);
    justify-content: stretch;
    overflow-x: hidden;
    padding-bottom: 0;
  }
  .ydot { width: auto; height: auto; }

  /* quatro numa linha quando a coluna comporta; senão duas e duas, que é
     melhor que quatro rótulos espremidos em quatro linhas cada */
  .tiles { grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); }

  .readout { margin-bottom: 14px; }
  .today__state { margin-bottom: 12px; }

  .legend { justify-content: center; gap: 8px 20px; }
  .legend__note { flex-basis: auto; }
}

/* Janela alta sobra altura: o desenho cresce em vez de deixar uma faixa vazia
   embaixo. Fica fora do bloco de cima porque o que manda aqui é a altura —
   num monitor largo e baixo estas medidas não cabem. */
@media (min-width: 1320px) and (min-height: 820px) {
  .grid { grid-auto-rows: clamp(28px, 7.6vh, 78px); }
  .hours { height: clamp(62px, 17vh, 172px); }
  .wd__bar { height: clamp(36px, 9.4vh, 96px); }
  .year { grid-template-rows: repeat(7, clamp(7px, 1.7vh, 17px)); }
}