/* ============================================================
   Livro-Razão do Sono — folha de estilo
   Estética: livro-caixa fino, papel pautado, duas tintas (preto + vermelho).
   ============================================================ */

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

:root {
  /* papel e tintas */
  --paper:      #f2e8d2;
  --paper-2:    #ecdfc2;
  --paper-edge: #e2d1a9;
  --ink:        #2a2016;   /* tinta preta (sépia-escura) */
  --ink-soft:   #6a5b45;
  --ink-faint:  #7c6a49;
  --red:        #9e2b23;   /* tinta vermelha do razão (no vermelho) */
  --red-deep:   #7f2019;
  --blue:       #234a63;   /* tinta azul (no azul / capital) */
  --rule:       #c8b98f;   /* pauta / linhas do razão */
  --rule-soft:  #d8cba6;
  --rule-blue:  #b7c3c9;   /* pauta feint azulada */

  --serif:  "Spectral", Georgia, "Times New Roman", serif;
  --disp:   "Fraunces", Georgia, serif;
  --mono:   "Spline Sans Mono", "SFMono-Regular", ui-monospace, monospace;

  --maxw: 1160px;
}

html, body { overflow-x: hidden; }
.slim .ledger { display: none; } /* somente teste (?slim): encurta a página p/ auditoria do rodapé */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.55;
  font-size: clamp(15px, 1.15vw + 12px, 18px);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* papel de fundo generativo (canvas) */
.paper {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: -1;
  display: block;
}

.skip {
  position: absolute; left: 50%; top: -60px; transform: translateX(-50%);
  background: var(--ink); color: var(--paper);
  padding: .55rem 1rem; border-radius: 0 0 6px 6px;
  font-family: var(--mono); font-size: .8rem; letter-spacing: .04em;
  z-index: 50; transition: top .18s ease;
}
.skip:focus { top: 0; }

/* foco visível consistente */
:focus-visible {
  outline: 2.5px solid var(--red);
  outline-offset: 3px;
}

.book {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(1.1rem, 3.5vw, 3rem) clamp(1rem, 4vw, 3rem) 4rem;
}

.red  { color: var(--red) !important; }
em    { font-style: italic; }

/* ---------------- CABEÇALHO ---------------- */
.masthead { padding-bottom: 1.4rem; border-bottom: 1.5px solid var(--rule); }
.masthead__row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .75rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
  color: var(--ink-soft); text-transform: uppercase;
}
.folio { white-space: nowrap; }
.ledger-chip {
  border: 1px solid var(--rule); border-radius: 999px;
  padding: .22em .7em; color: var(--red-deep);
  background: rgba(158,43,35,.06);
  text-transform: none; letter-spacing: .02em;
}
.masthead__title {
  font-family: var(--disp);
  font-weight: 600;
  font-size: clamp(2.6rem, 8.5vw, 5.6rem);
  line-height: .96;
  letter-spacing: -.02em;
  margin: .5rem 0 .3rem;
  font-variation-settings: "opsz" 120, "SOFT" 30, "WONK" 1;
}
.masthead__title span {
  font-style: italic; font-weight: 400;
  font-size: .5em; color: var(--ink-soft);
  font-variation-settings: "opsz" 40, "SOFT" 60;
  vertical-align: .18em; margin: 0 .12em;
}
.masthead__sub {
  font-size: clamp(1.02rem, 1.4vw, 1.24rem);
  max-width: 46ch; color: var(--ink);
  margin: 0 0 1rem;
}
.masthead__sub em { color: var(--red-deep); font-weight: 500; }
.lei {
  font-size: .96rem; max-width: 62ch; color: var(--ink-soft);
  border-left: 3px double var(--red); padding-left: .9rem;
  margin: 0;
}
.lei__k { font-family: var(--disp); font-weight: 600; color: var(--ink); font-style: italic; }
.lei b { font-weight: 600; color: var(--ink); }

/* ---------------- MESA (controles + saldo) ---------------- */
.desk {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(1rem, 2.5vw, 2.2rem);
  margin: 1.8rem 0;
  align-items: start;
}

.bench {
  position: relative;
  border: 1.5px solid var(--rule);
  background: linear-gradient(180deg, rgba(255,251,240,.5), rgba(255,251,240,.16));
  border-radius: 3px;
  padding: 1.4rem 1.35rem 1.2rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 10px 30px -22px rgba(42,32,22,.5);
}
.bench__tag {
  position: absolute; top: -.72rem; left: 1.1rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase;
  background: var(--red); color: var(--paper);
  padding: .18em .7em; border-radius: 2px;
  box-shadow: 0 4px 12px -6px rgba(158,43,35,.8);
}
.bench__hint {
  margin: .2rem 0 1.1rem; font-size: .9rem; color: var(--ink-soft); font-style: italic;
}

.field { margin-bottom: 1rem; }
.field > label {
  display: block; font-size: .82rem; font-weight: 500;
  letter-spacing: .01em; color: var(--ink);
  margin-bottom: .3rem;
}
.field__ctl {
  display: flex; align-items: center; gap: .85rem;
  flex-wrap: nowrap;
}
.field__ctl output {
  font-family: var(--mono); font-weight: 600; font-size: .95rem;
  color: var(--red-deep); min-width: 4.6ch; text-align: right;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.field__note {
  display: block; font-family: var(--mono); font-size: .72rem;
  color: var(--ink-faint); margin-top: .35rem; letter-spacing: .01em;
}

/* range inputs — pena sobre a régua */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  flex: 1 1 auto; height: 22px; background: transparent; cursor: pointer;
  margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 2px; background: var(--ink-soft);
  border-radius: 2px;
}
input[type="range"]::-moz-range-track {
  height: 2px; background: var(--ink-soft); border-radius: 2px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; margin-top: -7px;
  background: var(--red); border: 2px solid var(--paper);
  border-radius: 50%;
  box-shadow: 0 2px 6px -1px rgba(42,32,22,.55);
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  background: var(--red); border: 2px solid var(--paper);
  border-radius: 50%;
  box-shadow: 0 2px 6px -1px rgba(42,32,22,.55);
}

.presets {
  border: none; padding: .5rem 0 0; margin: .6rem 0 0;
  border-top: 1px dashed var(--rule);
}
.presets legend {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint); padding: .5rem 0 0;
  float: left; width: 100%;
}
.preset {
  font-family: var(--serif); font-size: .84rem;
  background: transparent; color: var(--ink);
  border: 1.3px solid var(--ink-soft); border-radius: 2px;
  padding: .32em .7em; margin: .55rem .4rem 0 0; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.preset:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.preset[aria-pressed="true"] { background: var(--red); color: var(--paper); border-color: var(--red); }

/* ---------------- SALDO VIVO ---------------- */
.tally {
  position: sticky; top: 12px;
  border: 1.5px solid var(--ink);
  background: linear-gradient(180deg, rgba(255,252,244,.55), rgba(255,252,244,.2));
  border-radius: 3px;
  padding: 1.3rem 1.4rem 1.5rem;
  text-align: center;
  box-shadow: 0 14px 40px -26px rgba(42,32,22,.7);
}
.tally__cap {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0;
}
.tally__cap span { color: var(--ink-faint); text-transform: none; letter-spacing: .02em; }
.tally__big { margin: .3rem 0 .1rem; }
.tally__num {
  font-family: var(--disp); font-weight: 600;
  font-size: clamp(3.2rem, 8vw, 5rem);
  line-height: 1; letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-variation-settings: "opsz" 140, "SOFT" 0, "WONK" 0;
}
.tally__num.is-neg { color: var(--red); }
.tally__num.is-pos { color: var(--blue); }
.tally__state {
  font-family: var(--serif); font-style: italic; font-size: 1rem;
  color: var(--ink-soft); margin: .1rem 0 1rem; min-height: 1.4em;
  position: relative; padding-top: .7rem;
}
.tally__state::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 48px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--rule) 20%, var(--rule) 80%, transparent);
}
.tally__split {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .5rem; border-top: 1px solid var(--rule); padding-top: .9rem;
}
.tally__acct { display: flex; flex-direction: column; gap: .15rem; }
.tally__k {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .03em;
  text-transform: uppercase; color: var(--ink-faint); line-height: 1.2;
}
.tally__v {
  font-family: var(--mono); font-weight: 600; font-size: 1.05rem;
  color: var(--ink); font-variant-numeric: tabular-nums;
}

/* selo / carimbo */
.stamp {
  margin: 1.2rem auto 0; width: 120px; height: 120px;
  transform: rotate(-8deg);
  transition: opacity .3s ease, transform .3s ease;
}
.stamp svg { display: block; overflow: visible; }
.stamp__ring { fill: none; stroke: var(--red); stroke-width: 2.4; opacity: .82; }
.stamp__ring--thin { stroke-width: 1; opacity: .6; }
.stamp__arc {
  fill: var(--red); font-family: var(--mono); font-weight: 600;
  font-size: 8.6px; letter-spacing: 1.4px; opacity: .85;
}
.stamp__center {
  fill: var(--red); font-family: var(--disp); font-weight: 700;
  font-size: 15px; letter-spacing: .5px;
}
.stamp--pop { animation: stampPop .34s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes stampPop {
  0%   { transform: rotate(-8deg) scale(.7); opacity: .2; }
  60%  { transform: rotate(-6deg) scale(1.12); opacity: 1; }
  100% { transform: rotate(-8deg) scale(1); opacity: 1; }
}
.stamp[data-mode="closed"] { transform: rotate(-4deg); }
.stamp[data-mode="closed"] .stamp__ring { stroke: var(--blue); }
.stamp[data-mode="closed"] .stamp__arc,
.stamp[data-mode="closed"] .stamp__center { fill: var(--blue); }

/* ---------------- O RAZÃO ---------------- */
.razao { margin: 2.4rem 0 0; }
.razao__head h2 {
  font-family: var(--disp); font-weight: 600; font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  margin: 0 0 .2rem; letter-spacing: -.01em;
}
.razao__head p { margin: 0 0 1.3rem; color: var(--ink-soft); max-width: 60ch; font-size: .98rem; }
.razao__head em { color: var(--red-deep); font-style: italic; }

/* extrato: curva do saldo */
.extrato {
  margin: 0 0 1.6rem; padding: 1rem 1.1rem .6rem;
  border: 1.3px solid var(--rule); border-radius: 2px;
  background: linear-gradient(180deg, rgba(255,252,244,.35), rgba(255,252,244,.04));
}
.extrato figcaption {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: .3rem;
}
.extrato figcaption span { text-transform: none; letter-spacing: .01em; color: var(--ink-faint); }
.extrato svg { display: block; width: 100%; height: auto; }

.ledger { display: flex; flex-direction: column; gap: 1.1rem; }

/* lançamento */
.entry {
  border: 1.3px solid var(--rule);
  border-left: 4px solid var(--ink);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(255,252,244,.35), rgba(255,252,244,.05));
  padding: .9rem 1.1rem 1rem;
}
.entry.is-debt { border-left-color: var(--red); }
.entry.is-credit { border-left-color: var(--blue); }
.entry { transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.entry:hover {
  box-shadow: 0 12px 34px -24px rgba(42,32,22,.75);
  transform: translateY(-1px);
  border-color: var(--ink-soft);
}
@media (hover: none) { .entry:hover { transform: none; box-shadow: none; } }

.entry__head {
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  padding-bottom: .6rem; margin-bottom: .55rem;
  border-bottom: 1px solid var(--rule-soft);
}
.entry__folio {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
  color: var(--paper); background: var(--ink); padding: .12em .5em; border-radius: 2px;
}
.entry.is-debt .entry__folio { background: var(--red); }
.entry.is-credit .entry__folio { background: var(--blue); }
.entry__day {
  font-family: var(--disp); font-weight: 600; font-size: 1.06rem;
  letter-spacing: -.01em;
}
.entry__times {
  font-family: var(--mono); font-size: .78rem; color: var(--ink-soft);
  margin-left: auto; text-align: right; font-variant-numeric: tabular-nums;
}

/* o T de partidas dobradas */
.entry__book {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
  position: relative;
}
.entry__book::before {
  content: ""; position: absolute; top: 0; bottom: 1.4rem; left: 50%;
  width: 1px; background: var(--rule); transform: translateX(-.5px);
}
.col { padding: 0 .2rem; }
.col--debito { padding-right: 1.1rem; }
.col--credito { padding-left: 1.1rem; }
.col__h {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
  border-bottom: 1.5px solid var(--ink-soft);
  padding-bottom: .2rem; margin-bottom: .35rem;
}
.line {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .6rem; padding: .16rem 0;
  border-bottom: 1px dotted var(--rule-soft);
  font-size: .92rem;
}
.line:last-child { border-bottom: none; }
.line__acct { color: var(--ink); }
.line__acct small { color: var(--ink-faint); font-size: .82em; }
.line__val {
  font-family: var(--mono); font-weight: 500; font-size: .9rem;
  color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.line--debt .line__acct, .line--debt .line__val { color: var(--red); }
.line--debt .line__val { font-weight: 600; }
.line--reserve .line__acct, .line--reserve .line__val { color: var(--blue); }
.line--lost .line__acct, .line--lost .line__val { color: var(--ink-faint); font-style: italic; }
.line--juros .line__acct, .line--juros .line__val { color: var(--red); font-style: italic; }

/* ink write-in animation */
.line__val, .tally__v { transition: opacity .25s ease; }
.ink-in { animation: inkIn .45s ease both; }
@keyframes inkIn {
  from { opacity: 0; filter: blur(1.2px); transform: translateY(1px); }
  to   { opacity: 1; filter: none; transform: none; }
}

/* notas de ajuste (o mecanismo visível) */
.entry__notes {
  display: flex; flex-wrap: wrap; gap: .4rem .5rem;
  margin-top: .5rem;
}
.note {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .01em;
  border: 1px solid var(--rule); border-radius: 999px;
  padding: .12em .6em; color: var(--ink-soft);
  background: rgba(255,255,255,.25);
}
.note b { color: var(--red-deep); font-weight: 600; }

/* linha de fechamento do lançamento */
.entry__close {
  display: flex; align-items: baseline; gap: .6rem 1rem; flex-wrap: wrap;
  margin-top: .7rem; padding-top: .55rem; border-top: 1.5px solid var(--rule);
  font-family: var(--mono); font-size: .78rem;
}
.entry__eq { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.entry__ok { color: var(--blue); font-weight: 600; letter-spacing: .02em; }
.entry__run { margin-left: auto; color: var(--ink); }
.entry__run b { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------------- FECHAMENTO ---------------- */
.foot {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  margin: 2.6rem 0 1.4rem;
  padding-top: 1.6rem; border-top: 2px double var(--ink);
}
.foot h3 {
  font-family: var(--disp); font-weight: 600; font-size: 1.25rem;
  margin: 0 0 .7rem;
}
.bal { width: 100%; border-collapse: collapse; font-size: .9rem; }
.bal th, .bal td { text-align: left; padding: .34rem .3rem; border-bottom: 1px solid var(--rule-soft); }
.bal thead th {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); border-bottom: 1.5px solid var(--ink-soft);
}
.bal .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.bal tbody th { font-weight: 400; color: var(--ink); }
.bal__total th, .bal__total td {
  border-top: 1.5px solid var(--ink); border-bottom: none;
  font-weight: 700; padding-top: .5rem;
}
.bal__total td { font-family: var(--mono); }
.bal__law {
  font-family: var(--mono); font-size: .8rem; color: var(--blue);
  margin: .7rem 0 0; letter-spacing: .02em;
}
.foot__note p { font-size: .95rem; color: var(--ink-soft); margin: 0 0 .8rem; max-width: 52ch; }
.foot__note b { color: var(--ink); font-weight: 600; }

/* leitura à beira do leito */
.clinica {
  position: relative;
  border: 1.5px solid var(--ink); border-radius: 3px;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 33px, rgba(158,43,35,.05) 33px, rgba(158,43,35,.05) 34px),
    linear-gradient(180deg, rgba(255,252,244,.5), rgba(255,252,244,.15));
  padding: 1.6rem 1.5rem 1.35rem; margin: 2rem 0 1.4rem;
  box-shadow: 0 16px 44px -30px rgba(42,32,22,.7);
}
.clinica__tag {
  position: absolute; top: -.72rem; left: 1.2rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; background: var(--ink); color: var(--paper);
  padding: .18em .7em; border-radius: 2px;
}
.clinica__read {
  font-family: var(--disp); font-weight: 400; font-style: italic;
  font-size: clamp(1.12rem, 2vw, 1.5rem); line-height: 1.42;
  color: var(--ink); margin: .2rem 0 .8rem; max-width: 60ch;
}
.clinica__read b { font-style: normal; font-weight: 600; }
.clinica__read b.red { color: var(--red); }
.clinica__read b.blue { color: var(--blue); }
.clinica__lever {
  font-size: .98rem; color: var(--ink); margin: 0 0 .7rem; max-width: 62ch;
  padding-left: .9rem; border-left: 3px double var(--red);
}
.clinica__lever b { font-weight: 600; }
.clinica__lever .amt { font-family: var(--mono); color: var(--blue); font-weight: 600; }
.clinica__foot {
  font-family: var(--mono); font-size: .74rem; color: var(--ink-faint);
  letter-spacing: .01em; margin: 0; max-width: 60ch;
}

/* ---------------- RODAPÉ ---------------- */
.disclaimer {
  font-size: .82rem; color: var(--ink-soft);
  border: 1px solid var(--rule); border-radius: 3px;
  background: rgba(158,43,35,.04);
  padding: .8rem 1rem; margin: 1.6rem 0 1.2rem; max-width: 74ch;
}
.disclaimer b { color: var(--red-deep); }
.guide-link {
  display: inline-flex; align-items: baseline; gap: .6rem;
  text-decoration: none; color: var(--ink);
  font-family: var(--disp); font-style: italic; font-size: 1.1rem;
  border-bottom: 1.5px solid var(--red); padding-bottom: .1rem;
}
.guide-link:hover { color: var(--red); }
.guide-link__s {
  font-family: var(--mono); font-style: normal; font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint);
}

.noscript {
  max-width: 60ch; margin: 3rem auto; padding: 1.5rem;
  border: 1.5px solid var(--rule); border-radius: 4px;
}
.noscript h1 { font-family: var(--disp); }

/* ---------------- RESPONSIVO ---------------- */
@media (max-width: 860px) {
  .desk { grid-template-columns: 1fr; }
  .tally { position: static; order: -1; }
  .foot { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .book { padding: 1rem .9rem 3rem; }
  .masthead__title { font-size: clamp(2.4rem, 13vw, 3.4rem); }
  .entry { padding: .8rem .85rem .9rem; }
  .entry__times { margin-left: 0; width: 100%; text-align: left; }
  .entry__book { grid-template-columns: 1fr; gap: .2rem; }
  .entry__book::before { display: none; }
  .col--debito { padding-right: 0; padding-bottom: .5rem; border-bottom: 1px solid var(--rule-soft); margin-bottom: .5rem; }
  .col--credito { padding-left: 0; }
  .entry__run { margin-left: 0; width: 100%; }
  .tally__num { font-size: clamp(3rem, 18vw, 4.2rem); }
  .tally__split { gap: .3rem; }
  .tally__v { font-size: .95rem; }
  .field__ctl output { min-width: 4ch; font-size: .88rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ink-in { animation: none; }
  .stamp { transition: none; }
  .line__val, .tally__v { transition: none; }
}