/* 7.papel.press (09/10/2026): cadernos lado a lado, folhas descendo, faixa de cima que vira pontinho */
#app7 { height: 100dvh; display: flex; flex-direction: column; font-family: var(--ui); background: var(--fundo) }
#faixa { position: relative; flex: none; height: 76px; background: var(--lado); transition: height .42s var(--suave), background .3s; overflow: hidden }
#ponto { position: absolute; left: 24px; top: 32px; width: 12px; height: 12px; border-radius: 50%; background: var(--rosa); opacity: .55; transition: left .42s var(--suave), top .42s var(--suave), transform .3s var(--mola), opacity .2s; z-index: 2 }
#ponto:hover { opacity: .9; transform: scale(1.3) }
#ponto:active { transform: scale(.8) }
#abas { display: flex; align-items: center; gap: 6px; height: 76px; padding: 0 24px 0 56px; overflow-x: auto; scrollbar-width: none; transition: opacity .3s .1s }
#abas::-webkit-scrollbar { display: none }
.aba { flex: none; height: 40px; padding: 0 24px; border-radius: 20px; font: 500 16px var(--ui); color: var(--texto); white-space: nowrap; transition: background .2s, transform .16s var(--suave) }
.aba.sel { background: var(--sel) }
.aba:active { transform: scale(.95) }
.aba[contenteditable="true"] { background: var(--botao); box-shadow: 0 0 0 1px rgba(86,82,118,.12); cursor: text }
.aba.mais { color: var(--icone); font-size: 22px; padding: 0 18px }
@media (hover: hover) { .aba:hover:not(.sel) { background: rgba(224,189,182,.38) } }
body[data-faixa="0"] #faixa { height: 28px; background: var(--fundo) }
body[data-faixa="0"] #abas { opacity: 0; pointer-events: none; transition: opacity .15s }
body[data-faixa="0"] #ponto { left: calc(50% - 6px); top: 12px }

#trilho { flex: 1; display: flex; overflow: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none }
#trilho::-webkit-scrollbar { display: none }
.caderno { flex: none; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; scroll-snap-align: start; scroll-snap-stop: always; overscroll-behavior-y: contain }
.folhas { max-width: 924px; margin: 0 auto; padding: 136px 48px 40vh }
.folha { position: relative; padding-bottom: 112px; margin-bottom: 112px; border-bottom: 1px solid var(--linha) }
.folha.entra { animation: sobe .45s var(--suave) }
.mais-folha { display: block; margin: 0 auto; width: 56px; height: 56px; color: var(--icone); font: 300 34px var(--ui); border-radius: 50%; transition: transform .18s var(--suave), color .2s, background .2s }
.mais-folha:active { transform: scale(.85) }
@media (hover: hover) { .mais-folha:hover { color: var(--texto); background: var(--lado) } }
.nada { padding: 30vh 24px; text-align: center; color: var(--data); font: 17px var(--ui) }

@media (max-width: 760px) {
  #faixa { height: calc(64px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top) }
  #abas { height: 64px; padding-left: 52px }
  #ponto { top: calc(26px + env(safe-area-inset-top)) }
  body[data-faixa="0"] #faixa { height: calc(28px + env(safe-area-inset-top)) }
  body[data-faixa="0"] #ponto { top: calc(10px + env(safe-area-inset-top)) }
  .folhas { padding: 112px 24px 50vh }
  .folha { padding-bottom: 80px; margin-bottom: 80px }
}
#app7 #ponto { display: block }
.folha .cm-scroller { font-family: inherit !important; line-height: inherit !important; overflow: visible !important }