/* Philnance — Apresentação (#/apresentacao): estilos só desta vista (ecrãs 15, 21 e 22 do design).
   Telemóvel (e qualquer ecrã estreito ou ao alto): ecrã inteiro escuro, progresso em segmentos no topo, toques à
   esquerda/direita. Portátil/TV (largo e deitado): diapositivos largos com a altura toda (até 16:9; num 4:3 não há
   barras), claros ou escuros conforme o diapositivo, com o texto à escala da largura (unidades cqw do contentor).
   As cores são fixas (não seguem o tema da app): é uma sala com duas pessoas e um ecrã. */
html:has(.ap) { overflow: hidden; }
.ap {
  position: fixed; inset: 0; z-index: 45; display: flex; align-items: stretch; justify-content: center;
  background: #121110;
}
.ap:focus, .ap-slide:focus { outline: none; }
.ap-palco {
  --ap-bg: #1C1A16; --ap-ink: #F4F0E8; --ap-ink2: #CFC8BC; --ap-ink3: #A9A296; --ap-ink4: #8E887C;
  --ap-linha: #3A362F; --ap-off: rgba(244, 240, 232, .2); --ap-cartao: rgba(244, 240, 232, .06);
  --ap-tan: oklch(0.8 0.11 72); --ap-verde: oklch(0.8 0.12 155); --ap-acc: oklch(0.78 0.12 262);
  position: relative; display: grid; width: 100%; height: 100%; overflow: hidden;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "prog" "meta" "slides" "pe";
  padding: calc(14px + env(safe-area-inset-top)) 24px calc(10px + env(safe-area-inset-bottom));
  background: var(--ap-bg); color: var(--ap-ink); font: 400 15px/1.4 var(--sans);
  -webkit-tap-highlight-color: transparent;
}
.ap-palco :focus-visible { outline-color: var(--ap-tan); }

/* progresso em segmentos */
.ap-prog { grid-area: prog; display: flex; gap: 4px; }
.ap-prog i { flex: 1; height: 3px; border-radius: 2px; background: var(--ap-off); }
.ap-prog i.on { background: var(--ap-ink); }

/* "Outubro 2026 · 9 de 9 · ×" (no ecrã largo "9 / 9") */
.ap-meta { grid-area: meta; display: flex; align-items: center; gap: 12px; margin-top: 8px; font: 400 13px var(--sans); color: var(--ap-ink3); }
.ap-marca { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ap-wm, .ap-sep, .ap-n2 { display: none; }
.ap-n, .ap-n2 { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-x {
  display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; flex: none; border-radius: 50%;
  color: var(--ap-ink3); text-decoration: none;
}
.ap-x:hover { color: var(--ap-ink); background: var(--ap-cartao); }
.ap-x .ms { font-size: 22px; }

/* o diapositivo */
.ap-slides { grid-area: slides; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 0 10px; }
.ap-slide { display: flex; flex-direction: column; gap: 18px; min-height: 100%; }
.ap-rot { margin-top: 10px; font: 600 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ap-tan); }
.ap-t { font: 300 32px/1.08 var(--serif); letter-spacing: -.025em; text-wrap: pretty; overflow-wrap: break-word; }
.ap-lead { font: 400 16px/1.5 var(--sans); color: var(--ap-ink2); text-wrap: pretty; }
.ap-lead-g { font-size: 18px; }
.ap-nota { font: 400 13.5px/1.5 var(--sans); color: var(--ap-ink3); text-wrap: pretty; }
.ap-fundo { margin-top: auto; }

/* números com rótulo (os grandes números, o fundo do 8) */
.ap-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; padding-top: 16px; border-top: 1px solid var(--ap-linha); }
.ap-num { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ap-num dt { font: 500 13px var(--sans); color: var(--ap-ink3); }
.ap-num dd { font: 300 28px/1.05 var(--serif); letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ap-nums-peq .ap-num dd { font-weight: 400; font-size: 24px; }
.ap-num.pos dd { color: var(--ap-verde); }
.ap-num.meta dd { color: var(--ap-ink3); }

/* o número grande do dia (ecrã 22) */
.ap-grande { display: flex; align-items: baseline; flex-wrap: wrap; margin-top: 4px; font-variant-numeric: normal; }
.ap-g-int { font: 300 96px/.85 var(--serif); letter-spacing: -.05em; }
.ap-g-dec { font: 300 40px/1 var(--serif); letter-spacing: -.03em; }

/* entrou × saiu */
.ap-es { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.ap-es li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.ap-es-r { font: 500 14px var(--sans); color: var(--ap-ink2); }
.ap-es-t { height: 14px; border-radius: 7px; background: var(--ap-off); overflow: hidden; }
.ap-es-t i { display: block; height: 100%; border-radius: 7px; }
.ap-es-t i.ent { background: var(--ap-verde); }
.ap-es-t i.sai { background: var(--ap-acc); }
.ap-es-v { font: 400 20px var(--serif); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* barras com nome e valor */
.ap-barras { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ap-barras li { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.ap-b-n { min-width: 0; font: 400 14px/1.25 var(--sans); overflow-wrap: anywhere; }
.ap-b-n small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ap-ink3); }
.ap-b-t { height: 10px; border-radius: 5px; background: var(--ap-off); overflow: hidden; }
.ap-b-t i { display: block; height: 100%; border-radius: 5px; background: var(--ap-acc); }
.ap-b-t i.escolha, .ap-legenda i.escolha { background: var(--ap-tan); }
.ap-b-t i.dificil, .ap-legenda i.dificil { background: var(--ap-ink3); }
.ap-b-t i.extra { background: oklch(0.6 0.14 330); }
.ap-b-v { font: 500 14px var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 400 12.5px var(--sans); color: var(--ap-ink3); }
.ap-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }

/* o que pesou */
.ap-cartoes { list-style: none; display: grid; gap: 10px; }
.ap-cartoes li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; border-radius: 20px; background: var(--ap-cartao); }
.ap-c-v { font: 300 30px/1 var(--serif); letter-spacing: -.02em; }
.ap-c-t { font: 600 15px/1.3 var(--sans); overflow-wrap: anywhere; }
.ap-c-n { font: 400 13px/1.35 var(--sans); color: var(--ap-ink3); }

/* o acordo do período anterior (✓/○) */
.ap-antes { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--ap-linha); }
.ap-antes-t { font: 600 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ap-ink3); }
.ap-feitos { list-style: none; }
.ap-feito {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 6px 0; border: 0; background: none;
  color: var(--ap-ink); font: 400 17px/1.35 var(--sans); text-align: left;
}
.ap-feito .ms { font-size: 24px; color: var(--ap-ink3); }
.ap-feito[aria-pressed="true"] .ms { color: var(--ap-verde); }
.ap-feito[aria-pressed="true"] span:last-child { color: var(--ap-ink2); }

/* o acordo (ecrã 15): linhas que crescem e partem como no desenho; o pé (nota + Guardar) fica sempre à vista */
.ap-s-acordo .ap-t { font-size: min(32px, 7.4vw); text-wrap: balance; }
.ap-acordo { list-style: none; display: flex; flex-direction: column; }
.ap-acordo li { display: flex; gap: 16px; align-items: flex-start; border-bottom: 1px solid var(--ap-linha); }
.ap-ac-n { min-width: 16px; padding-top: 12px; font: 400 26px/1 var(--serif); color: var(--ap-ink3); }
.ap-ac-in {
  display: block; flex: 1; min-width: 0; min-height: 48px; padding: 12px 0; border: 0; border-radius: 0; background: none; color: var(--ap-ink);
  font: 400 18px/1.35 var(--sans); outline: none; resize: none; overflow: hidden; field-sizing: content;
}
.ap-ac-in::placeholder { color: var(--ap-ink4); }
.ap-ac-in:focus-visible { box-shadow: 0 2px 0 var(--ap-tan); }
.ap-mais {
  display: flex; align-items: center; gap: 16px; min-height: 52px; padding: 0; border: 0; background: none;
  color: var(--ap-ink4); font: 400 18px var(--sans); text-align: left;
}
.ap-mais .ms { font-size: 24px; }
.ap-mais:hover { color: var(--ap-ink2); }
.ap-ac-pe {
  position: sticky; bottom: 0; z-index: 1; display: flex; flex-direction: column; gap: 14px; margin-top: auto; padding: 14px 0 2px;
  background: linear-gradient(to bottom, transparent, var(--ap-bg) 14px);
}
.ap-guardar {
  width: 100%; height: 54px; flex: none; border: 0; border-radius: 27px;
  background: var(--ap-ink); color: var(--ap-bg); font: 600 16px var(--sans);
}
.ap-guardar:disabled, .ap-guardar[aria-disabled="true"] { opacity: .5; }

/* pé: "‹ toca à esquerda" / "toca à direita ›" só em ecrãs de toque; com rato, ‹ › e "← → para mudar" */
.ap-pe { grid-area: pe; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 6px; }
.ap-ir {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none;
  color: var(--ap-ink4); font: 400 12.5px var(--sans);
}
.ap-ir:disabled { opacity: .35; cursor: default; }
.ap-ir .ap-rato { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ap-linha); color: var(--ap-ink2); }
.ap-ir:not(:disabled):hover .ap-rato { color: var(--ap-ink); }
.ap-dica { font: 400 12.5px var(--sans); color: var(--ap-ink4); }
.ap-toque { display: none; }
@media (hover: none) and (pointer: coarse) {
  .ap-toque { display: inline; }
  .ap-rato, .ap-ir .ap-rato { display: none; }
}

@media (max-width: 360px) {
  .ap-palco { padding-left: 18px; padding-right: 18px; }
  .ap-t { font-size: 28px; }
  .ap-g-int { font-size: 80px; }
  .ap-g-dec { font-size: 34px; }
  .ap-num dd { font-size: 24px; }
}
/* telemóveis baixos (até 640 px de altura): tudo mais apertado para caber sem deslocar */
@media (max-height: 640px) {
  .ap-palco { padding-top: calc(8px + env(safe-area-inset-top)); padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
  .ap-meta { margin-top: 2px; }
  .ap-slides { padding: 10px 0 4px; }
  .ap-slide { gap: 11px; }
  .ap-rot { margin-top: 4px; font-size: 11px; }
  .ap-t, .ap-s-acordo .ap-t { font-size: min(26px, 7vw); }
  .ap-lead { font-size: 14.5px; line-height: 1.45; }
  .ap-lead-g { font-size: 16px; }
  .ap-nums { gap: 10px 14px; padding-top: 10px; }
  .ap-num dd, .ap-nums-peq .ap-num dd { font-size: 22px; }
  .ap-g-int { font-size: 72px; }
  .ap-g-dec { font-size: 30px; }
  .ap-es { gap: 8px; }
  .ap-barras { gap: 7px; }
  .ap-b-n { font-size: 13px; }
  .ap-cartoes { gap: 8px; }
  .ap-cartoes li { padding: 10px 14px; }
  .ap-c-v { font-size: 24px; }
  .ap-antes { padding-top: 10px; gap: 2px; }
  .ap-feito { min-height: 44px; font-size: 15.5px; padding: 4px 0; }
  .ap-ac-n { padding-top: 10px; font-size: 22px; }
  .ap-ac-in { min-height: 44px; padding: 10px 0; font-size: 16px; }
  .ap-mais { min-height: 44px; font-size: 16px; }
  .ap-ac-pe { gap: 8px; padding-top: 10px; }
  .ap-ac-pe .ap-nota { font-size: 12.5px; }
  .ap-guardar { height: 48px; }
  .ap-pe { padding-top: 2px; }
}

/* ---------- portátil / TV: diapositivos largos (ecrãs 21 e 22) ---------- */
@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  .ap { align-items: center; }
  .ap:has(.ap-claro) { background: #E9E5DC; }
  .ap-palco {
    width: min(100vw, 177.78vh); height: 100vh; container-type: size;
    grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "meta meta" "slides slides" "prog pe";
    column-gap: 2cqw;
    padding: calc(min(100vw, 177.78vh) * .046) calc(min(100vw, 177.78vh) * .058) calc(min(100vw, 177.78vh) * .035);
  }
  .ap-claro {
    --ap-bg: #F7F4EE; --ap-ink: #211F1B; --ap-ink2: #5D5850; --ap-ink3: #716B63; --ap-ink4: #716B63;
    --ap-linha: #D5CEC1; --ap-off: #D5CEC1; --ap-cartao: #FFFDF9;
    --ap-tan: oklch(0.52 0.12 62); --ap-verde: oklch(0.5 0.12 155); --ap-acc: oklch(0.5 0.15 262);
  }
  .ap-claro .ap-cartoes li { border: 1px solid #E5DFD4; }
  .ap-prog { align-self: center; gap: .52cqw; }
  .ap-meta { margin-top: 0; font-size: 1.5625cqw; }
  .ap-n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ap-n2 { display: inline; }
  .ap-wm { display: block; height: 1.9cqw; width: auto; filter: none !important; }
  .ap-escuro .ap-wm { filter: invert(.95) !important; }
  .ap-sep { display: inline; white-space: pre; }
  .ap-x { width: 3.6cqw; height: 3.6cqw; min-width: 40px; min-height: 40px; }
  .ap-x .ms { font-size: max(20px, 2cqw); }
  .ap-slides { padding: 1.2cqw 0 .8cqw; overflow-y: auto; }
  .ap-slide { gap: 1.8cqw; }
  .ap-rot { margin-top: 1.46cqw; font-size: 1.354cqw; letter-spacing: .12em; }
  .ap-t, .ap-s-acordo .ap-t { max-width: 81%; font-size: 4.375cqw; line-height: 1.08; }
  .ap-lead { max-width: 70%; font-size: 1.9cqw; }
  .ap-lead-g { max-width: 67%; font-size: 2.1875cqw; }
  .ap-nota { font-size: 1.45cqw; }
  .ap-nums { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.9cqw; padding-top: 2.29cqw; }
  .ap-num { gap: .6cqw; }
  .ap-num dt { font-size: 1.5625cqw; color: var(--ap-ink2); }
  .ap-num dd { font-size: 4.1667cqw; }
  .ap-nums-peq { grid-template-columns: repeat(3, max-content); gap: 5cqw; padding-top: 1.9cqw; }
  .ap-nums-peq .ap-num dt { color: var(--ap-ink3); }
  .ap-nums-peq .ap-num dd { font-size: 3.125cqw; line-height: 1.2; }
  .ap-grande { margin-top: .6cqw; }
  .ap-g-int { font-size: 15.625cqw; }
  .ap-g-dec { font-size: 5.833cqw; }
  .ap-es { max-width: 80%; gap: 1.2cqw; }
  .ap-es li { grid-template-columns: 7cqw minmax(0, 1fr) auto; gap: 1.2cqw; }
  .ap-es-r { font-size: 1.6cqw; }
  .ap-es-t { height: 1.5cqw; }
  .ap-es-v { font-size: 2.3cqw; }
  .ap-barras { max-width: 86%; gap: .7cqw; }
  .ap-barras-6 li:nth-child(n+6) { display: none; }
  .ap-barras li { grid-template-columns: minmax(0, 32%) minmax(0, 1fr) auto; gap: 1.2cqw; }
  .ap-b-n { font-size: 1.5cqw; }
  .ap-b-n small { font-size: 1.2cqw; }
  .ap-b-t { height: 1cqw; }
  .ap-b-v { font-size: 1.5cqw; }
  .ap-legenda { font-size: 1.3cqw; }
  .ap-cartoes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6cqw; }
  .ap-cartoes li { padding: 1.8cqw 2cqw; border-radius: 1.8cqw; gap: .6cqw; }
  .ap-c-v { font-size: 3.6cqw; }
  .ap-c-t { font-size: 1.6cqw; }
  .ap-c-n { font-size: 1.35cqw; }
  .ap-antes { max-width: 70%; gap: .4cqw; padding-top: 1.4cqw; }
  .ap-antes-t { font-size: 1.25cqw; }
  .ap-feito { min-height: 40px; font-size: 1.8cqw; padding: .3cqw 0; }
  .ap-feito .ms { font-size: 2.4cqw; }
  .ap-s-acordo { gap: 1cqw; }
  .ap-acordo, .ap-mais, .ap-ac-pe { max-width: 72%; }
  .ap-ac-n { padding-top: 1cqw; font-size: 2.5cqw; }
  .ap-ac-in { min-height: max(40px, 3.8cqw); padding: 1cqw 0; font-size: max(16px, 1.8cqw); }
  .ap-mais { min-height: max(40px, 3.8cqw); font-size: max(16px, 1.8cqw); }
  .ap-ac-pe { flex-direction: row; align-items: center; justify-content: space-between; gap: 2cqw; padding-top: 1cqw; }
  .ap-guardar { width: auto; height: max(44px, 4.2cqw); padding: 0 3cqw; border-radius: 3cqw; font-size: max(15px, 1.6cqw); }
  .ap-pe { padding-top: 0; gap: 1cqw; }
  .ap-dica { font-size: 1.354cqw; }
  .ap-ir .ap-rato { width: max(36px, 3.4cqw); height: max(36px, 3.4cqw); }
}
@media (prefers-reduced-motion: no-preference) {
  .ap-slide:not([hidden]) { animation: ap-entra .25s ease-out; }
}
@keyframes ap-entra { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }