/* Ser na Aldeia — tokens e componentes partilhados (claro + escuro) */
.screen{
  --paper:#FFF4DF; --surface:#FFFFFF; --ink:#1E1B16; --muted:#6B604F; --line:#1E1B16; --shadow:#1E1B16; --soft:#FCE9C4;
  --on:#1E1B16;
  --sol:#FFC83D; --floresta:#2FBF71; --horta:#A3D94B; --arte:#FF8A5B; --musica:#B18CFF; --historias:#5B95FF; --refeicao:#FF6B8B; --descanso:#8FD3F4;
  --pequenos:#FF9E80; --medios:#7FD1AE; --grandes:#B9A2FF;
  --ok:#2FBF71; --due:#FFC83D; --late:#FF6B6B;
  --display:"Bricolage Grotesque","Arial Rounded MT Bold",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  width:390px; height:844px; overflow:hidden; position:relative;
  background:var(--paper); color:var(--ink); font-family:var(--body); font-size:15px; line-height:1.4;
  box-sizing:border-box;
}
.screen *{box-sizing:border-box}
.screen.dark{
  --paper:#16140F; --surface:#24211A; --ink:#F7EEDB; --muted:#BFB39C; --line:#F7EEDB; --shadow:#000000; --soft:#2E2919;
}
.screen.dark .card,.screen.dark .hero,.screen.dark .tcard{--line:#0B0A08}

/* cabeçalho colorido */
.hero{background:var(--sec,var(--sol)); color:var(--on); border-bottom:3px solid #1E1B16; border-radius:0 0 34px 34px; padding:20px 20px 22px; display:flex; flex-direction:column; gap:14px}
.top{display:flex; justify-content:space-between; align-items:center; gap:12px}
.brand{font-family:var(--display); font-weight:800; font-size:16px; letter-spacing:-.01em}
.iconbtn{width:44px; height:44px; border-radius:50%; border:2.5px solid #1E1B16; background:#FFFFFF; color:#1E1B16; display:grid; place-items:center; box-shadow:3px 3px 0 #1E1B16; padding:0}
.eyebrow{font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase}
.h1{font-family:var(--display); font-weight:800; font-size:40px; line-height:.98; letter-spacing:-.025em; margin:0}
.h2{font-family:var(--display); font-weight:800; font-size:24px; line-height:1.05; letter-spacing:-.015em; margin:0}
.big{font-family:var(--display); font-weight:800; font-size:44px; line-height:.9; letter-spacing:-.03em}
.muted{color:var(--muted)}
.hero .muted{color:#1E1B16; opacity:.72}

/* faixa da semana */
.strip{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px}
.day{display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 0 7px; border-radius:999px; border:2.5px solid transparent; color:#1E1B16}
.day .dn{font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; opacity:.7}
.day .dd{font-family:var(--display); font-weight:800; font-size:19px; line-height:1}
.day.on{background:#1E1B16; color:#FFF4DF; border-color:#1E1B16}
.day.on .dn{opacity:1}
.day .mark{width:6px; height:6px; border-radius:50%; background:#1E1B16}
.day.on .mark{background:var(--sol)}

/* corpo */
.body{padding:18px 20px 120px; display:flex; flex-direction:column; gap:14px}
.sect{display:flex; justify-content:space-between; align-items:baseline; margin-top:4px}
.sect a{font-weight:700; font-size:13px; color:var(--ink)}

/* cartões */
.card{background:var(--surface); color:var(--ink); border:2.5px solid var(--line); border-radius:22px; box-shadow:4px 4px 0 var(--shadow); padding:14px 16px; display:flex; flex-direction:column; gap:10px}
.card.fill{color:#1E1B16; --line:#1E1B16}
.screen.dark .card.fill{--line:#0B0A08}
.row{display:flex; align-items:center; gap:10px}
.between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.stat{border:2.5px solid #1E1B16; border-radius:18px; padding:10px 10px 12px; color:#1E1B16; display:flex; flex-direction:column; gap:6px}
.stat .lbl{font-size:12px; font-weight:700; line-height:1.15}

/* timeline */
.tl{display:grid; grid-template-columns:44px minmax(0,1fr); gap:10px 10px}
.t{font-weight:800; font-size:12.5px; padding-top:13px; color:var(--muted); font-variant-numeric:tabular-nums}
.act{border:2.5px solid #1E1B16; border-radius:20px; box-shadow:4px 4px 0 var(--shadow); color:#1E1B16; padding:11px 13px; display:flex; flex-direction:column; gap:8px; min-width:0}
.act .what{font-family:var(--display); font-weight:800; font-size:19px; line-height:1.05}
.place{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:800; background:rgba(255,255,255,.7); border:2px solid #1E1B16; border-radius:999px; padding:2px 9px 2px 6px}
.c-sol{background:var(--sol)} .c-floresta{background:var(--floresta)} .c-horta{background:var(--horta)} .c-arte{background:var(--arte)}
.c-musica{background:var(--musica)} .c-historias{background:var(--historias)} .c-refeicao{background:var(--refeicao)} .c-descanso{background:var(--descanso)}
.act.past{opacity:.55}
.now{grid-column:1/-1; display:flex; align-items:center; gap:8px; color:var(--late); font-weight:800; font-size:12px; margin-block:-4px}
.now::after{content:""; flex:1; height:3px; background:var(--late); border-radius:3px}

/* pessoas */
.av{width:32px; height:32px; border-radius:50%; border:2.5px solid #1E1B16; display:grid; place-items:center; font-weight:800; font-size:12px; color:#1E1B16; flex:none}
.av.lg{width:58px; height:58px; font-size:22px; border-width:3px}
.av.xl{width:84px; height:84px; font-size:32px; border-width:3px}
.stack{display:flex}
.stack .av{margin-left:-8px}
.stack .av:first-child{margin-left:0}
.pname{font-weight:700; font-size:13px}

/* chips */
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; gap:6px; border:2.5px solid var(--line); border-radius:999px; padding:6px 12px; font-weight:700; font-size:13px; background:var(--surface); color:var(--ink)}
.chip.on{background:var(--ink); color:var(--paper)}
.chip .dot{width:14px; height:14px; border-radius:50%; border:2px solid #1E1B16}
.hero .chip{border-color:#1E1B16; background:#FFFFFF; color:#1E1B16}
.hero .chip.on{background:#1E1B16; color:#FFF4DF}
.tag{display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:3px 10px; font-size:11.5px; font-weight:800; border:2px solid #1E1B16; color:#1E1B16; background:#FFFFFF}
.tag.dark{background:#1E1B16; color:#FFF4DF}
.state-ok{background:var(--ok)} .state-due{background:var(--due)} .state-late{background:var(--late)}

/* barra de navegação em pílula */
.tabbar{position:absolute; left:16px; right:16px; bottom:18px; display:flex; gap:4px; background:#1E1B16; border-radius:999px; padding:6px; box-shadow:4px 4px 0 var(--sol)}
.screen.dark .tabbar{background:#F7EEDB; box-shadow:4px 4px 0 #000}
.tab{flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:9px 2px 8px; border-radius:999px; color:#FFF4DF; font-size:11.5px; font-weight:700; text-decoration:none}
.screen.dark .tab{color:#1E1B16}
.tab.on{background:var(--sol); color:#1E1B16}

/* mês */
.month{background:var(--surface); border:2.5px solid var(--line); border-radius:22px; box-shadow:4px 4px 0 var(--shadow); overflow:hidden}
.dow,.mgrid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr))}
.dow div{text-align:center; font-size:10px; font-weight:800; letter-spacing:.06em; color:var(--muted); padding:8px 0 4px}
.cell{min-height:70px; border-top:1.5px solid color-mix(in srgb,var(--ink) 14%,transparent); border-left:1.5px solid color-mix(in srgb,var(--ink) 14%,transparent); padding:4px 2px; display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0}
.cell.first{border-left:0}
.cell .n{align-self:flex-start; padding-left:4px; font-weight:800; font-size:12.5px; font-variant-numeric:tabular-nums}
.cell.out .n{opacity:.28}
.cell.today .n{background:var(--ink); color:var(--paper); border-radius:999px; padding:1px 7px}
.bd{display:flex; flex-direction:column; align-items:center; gap:1px; max-width:100%}
.bd .av{width:26px; height:26px; font-size:11px}
.bd small{font-size:9.5px; font-weight:800; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ev{width:100%; border:1.5px solid #1E1B16; border-radius:6px; background:var(--historias); color:#1E1B16; font-size:9px; font-weight:800; padding:1px 3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.agua{width:20px; height:20px; border-radius:50%; border:2px solid #1E1B16; background:var(--descanso); display:grid; place-items:center; font-size:9px; font-weight:800; color:#1E1B16}
.agua.mine{background:var(--sol); width:24px; height:24px}

/* listas */
.li{display:flex; align-items:center; gap:12px; padding:12px 0; border-top:2px dashed color-mix(in srgb,var(--ink) 18%,transparent)}
.li:first-child{border-top:0; padding-top:2px}
.datebox{width:52px; flex:none; border:2.5px solid #1E1B16; border-radius:14px; text-align:center; padding:5px 0 6px; color:#1E1B16}
.datebox b{display:block; font-family:var(--display); font-size:22px; line-height:1}
.datebox span{font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em}

/* formulário */
.field{display:flex; flex-direction:column; gap:5px}
.field label{font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
.input{border:2.5px solid var(--line); border-radius:14px; background:var(--surface); color:var(--ink); padding:11px 13px; font:inherit; font-weight:600; width:100%}
/* Sem zoom (Ronda 3, 4.4): o iPhone amplia ao tocar numa caixa com letra abaixo de 16px.
   !important porque há caixas com font-size no style; nenhuma da app passa dos 16px. */
.screen input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]),
.screen select,.screen textarea{font-size:16px !important}
.btn{display:flex; justify-content:center; align-items:center; gap:8px; border:2.5px solid #1E1B16; border-radius:999px; padding:14px 18px; font-family:var(--display); font-weight:800; font-size:17px; background:var(--sol); color:#1E1B16; box-shadow:4px 4px 0 var(--shadow); text-decoration:none}
.btn.ghost{background:var(--surface); color:var(--ink); border-color:var(--line)}
.check{display:flex; align-items:center; gap:10px; font-weight:600}
.box{width:24px; height:24px; border:2.5px solid var(--line); border-radius:8px; display:grid; place-items:center; flex:none; background:var(--surface)}
.box.on{background:var(--floresta); border-color:#1E1B16}

/* folha (bottom sheet) */
.scrim{position:absolute; inset:0; background:rgba(22,18,10,.5)}
.sheet{position:absolute; left:0; right:0; bottom:0; background:var(--surface); color:var(--ink); border:3px solid var(--line); border-bottom:0; border-radius:30px 30px 0 0; padding:10px 20px 26px; display:flex; flex-direction:column; gap:14px}
.grab{width:44px; height:5px; border-radius:5px; background:var(--muted); align-self:center; opacity:.5}
.gal{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.gal div{aspect-ratio:1; border:2.5px solid #1E1B16; border-radius:16px}

/* ---- v2 · scroll em todos os ecrãs + zonas seguras do iPhone ----
   Em produção: <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   e :root{--sat:env(safe-area-inset-top);--sab:env(safe-area-inset-bottom);--sal:env(safe-area-inset-left);--sar:env(safe-area-inset-right)} */
.screen{display:flex;flex-direction:column}
.screen>.hero{flex:none;padding-top:calc(20px + var(--sat,0px))}
.screen>.body{flex:1 1 auto;min-height:0;overflow-y:auto;padding-bottom:calc(120px + var(--sab,0px));scrollbar-width:none}
.screen>.body::-webkit-scrollbar{display:none}
.tabbar{bottom:calc(18px + var(--sab,0px))}
.sheet{padding-bottom:calc(26px + var(--sab,0px))}
.safe-b{bottom:calc(24px + var(--sab,0px)) !important}

/* ---- v3 · regra: números e nomes grandes nas caixas nunca partem linha nem saem da caixa ----
   O tamanho acompanha a largura da caixa (22% da largura, no máximo 32px). Em PHP basta usar .stat > .big. */
.stat{min-width:0;overflow:hidden;container-type:inline-size}
.stat .big{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-size:min(32px, 22cqi) !important;letter-spacing:-.03em}
.stat .lbl{overflow-wrap:anywhere}