:root {
  --bg: #F3F6F5; --surface: #FFFFFF; --ink: #10292C; --muted: #56706F;
  --line: #DDE6E4; --line-soft: #EDF2F1; --card-line: #D5E0DE;
  --brand: #0B7F8C; --brand-dark: #086570; --brand-soft: #E0F3F5; --on-brand-soft: #D6F1F4;
  --orange: #C4541A; --orange-ink: #A8440F; --orange-soft: #FDEBDD; --orange-line: #E9A77C;
  --scrim: rgba(16, 41, 44, .55);
  --display: 'Bricolage Grotesque', Figtree, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: Figtree, system-ui, sans-serif; background: var(--bg); color: var(--ink);
  display: flex; flex-direction: column; height: 100dvh; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }
a { color: var(--brand); }
#view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.display { font-family: var(--display); font-weight: 800; margin: 0; line-height: 1.05; }
h1.display { font-size: 30px; }
h2.display { font-size: 26px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.eyebrow { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 0; }
.loading { padding: 24px; color: var(--muted); }

/* Header */
.top { flex-shrink: 0; background: var(--surface); border-bottom: 1px solid var(--line);
  padding: calc(18px + env(safe-area-inset-top)) 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.top-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.seg { display: flex; gap: 4px; padding: 4px; background: #EAF0EF; border-radius: 14px; }
.seg button { min-width: 58px; height: 40px; border: 0; border-radius: 10px; font-weight: 700; background: transparent; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--brand); color: #fff; }
.lesson { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--bg); color: var(--ink); text-decoration: none; }
.lesson > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lesson-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Grid (concept B) */
.scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 14px; }
.card { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
  min-height: 70px; padding: 10px 34px 10px 14px; border-radius: 16px; border: 1.5px solid var(--card-line);
  background: var(--surface); text-align: left; cursor: pointer; touch-action: manipulation; }
.card .first { font-size: 18px; font-weight: 700; line-height: 1.15; }
.card .rest { max-width: 100%; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .tick { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center; opacity: 0; }
.card[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.card[aria-pressed="true"] .rest { color: var(--on-brand-soft); }
.card[aria-pressed="true"] .tick { opacity: 1; }
.card.add { flex-direction: row; align-items: center; justify-content: center; gap: 6px; padding: 10px;
  border: 2px dashed var(--orange-line); color: var(--orange-ink); font-weight: 700; }
.tag { margin-top: 4px; padding: 2px 7px; border-radius: 7px; background: var(--orange-soft); color: var(--orange-ink); font-size: 11px; font-weight: 700; }
.visitors { padding: 0 16px 16px; margin: 0; }
/* A visitor: orange, in the grid's visitor row and in the Salvar sheet. */
.chip.visitor, button.chip.visitor { background: var(--orange-soft); border-color: var(--orange-line); color: var(--orange-ink); font-weight: 600; }
.chip-tag { margin-left: 2px; font-size: 11px; font-weight: 700; opacity: .8; }

/* Footer bar */
.bar { flex-shrink: 0; display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--surface); border-top: 1px solid var(--line); }
.bar-count { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.count { font-family: var(--display); font-size: 24px; font-weight: 800; color: var(--brand); }

/* Buttons */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border: 0;
  border-radius: 14px; font-size: 17px; font-weight: 700; text-decoration: none; cursor: pointer; }
.btn.primary { background: var(--brand); color: #fff; }
.btn.orange { background: var(--orange); color: #fff; }
.btn.ghost { background: var(--bg); color: var(--ink); font-weight: 600; }
.btn.ghost.danger { color: var(--orange-ink); }
.btn.soft { align-self: flex-start; min-height: 44px; padding: 0 14px; font-size: 14px; background: var(--brand-soft); color: var(--brand-dark); }
.btn:disabled { opacity: .6; }
.link { align-self: center; min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--brand); font-weight: 600; cursor: pointer; }

/* Tabs */
.tabs { flex-shrink: 0; display: flex; background: var(--surface); border-top: 1px solid var(--line); padding: 4px 8px calc(10px + env(safe-area-inset-bottom)); }
.tabs[hidden] { display: none; }
.tabs a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0; text-decoration: none; color: var(--muted); font-size: 12px; font-weight: 600; }
.tabs a[aria-current="page"] { color: var(--brand); font-weight: 700; }

/* Bottom sheet */
.scrim { position: fixed; inset: 0; background: var(--scrim); }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 92dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 16px;
  padding: 12px 20px calc(24px + env(safe-area-inset-bottom)); background: var(--surface); border-radius: 26px 26px 0 0; }
.handle { align-self: center; width: 44px; height: 5px; border-radius: 3px; background: var(--card-line); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stats.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 14px; background: var(--bg); font-size: 13px; font-weight: 600; }
.stat strong { font-family: var(--display); font-size: 28px; font-weight: 800; line-height: 1; }
.stat.brand { background: var(--brand-soft); }
.stat.brand strong { color: var(--brand); }
.stat.orange { background: var(--orange-soft); }
.stat.orange strong { color: var(--orange-ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 190px; overflow-y: auto; }
.chip { padding: 6px 10px; border-radius: 9px; background: var(--bg); font-size: 14px; }
button.chip { border: 1.5px solid var(--card-line); background: var(--surface); cursor: pointer; min-height: 36px; }
.label { font-size: 14px; font-weight: 700; }
.input { height: 54px; padding: 0 16px; border: 2px solid var(--card-line); border-radius: 14px; font: inherit; font-size: 17px; color: var(--ink); }
.input:focus { outline: 3px solid #9ADCE5; outline-offset: 1px; }
.preview { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--bg); font-weight: 600; }
.error { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--orange-soft); color: var(--orange-ink); font-weight: 600; }
.error[hidden] { display: none; }
.warn { color: var(--orange-ink); }

/* Full-screen states */
.empty, .login, .done { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; }
.done-mark { width: 96px; height: 96px; border-radius: 50%; background: var(--brand); display: flex; align-items: center; justify-content: center; }
.done-mark.pending { background: var(--orange); }
.done-actions { display: flex; flex-direction: column; gap: 10px; padding: 0 20px calc(20px + env(safe-area-inset-bottom)); }

/* Prés list */
.filters { display: flex; gap: 8px; }
.pill { height: 40px; padding: 0 16px; border-radius: 20px; border: 1.5px solid var(--card-line); background: var(--surface); font-size: 14px; font-weight: 700; cursor: pointer; }
.pill[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.pill.warn { color: var(--orange-ink); border-color: var(--orange-line); }
.pill.warn[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: #fff; }
.legend { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px 6px; }
.list { list-style: none; margin: 0; padding: 0; background: var(--surface); border-top: 1px solid var(--line); }
.row { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 16px; border-bottom: 1px solid var(--line-soft); color: var(--ink); text-decoration: none; }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.name { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dots { display: flex; gap: 4px; flex-shrink: 0; }
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #9FB3B1; background: #fff; }
.dot.on { border-color: var(--brand); background: var(--brand); }
.dot.none { border-color: var(--line-soft); background: var(--line-soft); }
.pct { width: 40px; text-align: right; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.pct.low { color: var(--orange-ink); }

/* Pré detail */
.back { align-self: flex-start; display: flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 600; text-decoration: none; }
.day { width: 52px; flex-shrink: 0; font-weight: 700; }
.lesson-cell { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cells { display: flex; gap: 6px; flex-shrink: 0; }
.cell { min-width: 48px; height: 30px; padding: 0 6px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; border: 1.5px solid var(--line-soft); background: var(--bg); color: #8FA3A1; }
.cell.p { background: var(--brand); border-color: var(--brand); color: #fff; }
.cell.f { background: #fff; border-color: #9FB3B1; color: var(--ink); }
.pad { padding: 14px 16px 6px; }

/* Calendário: Sundays */
.pad-x { padding: 8px 14px 20px; display: flex; flex-direction: column; gap: 8px; }
.month { margin: 10px 6px 2px; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.week { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 2px solid var(--surface); }
.week.current { border-color: var(--brand); }
.week.off { flex-direction: row; align-items: center; gap: 14px; background: #EAF0EF; border-color: #EAF0EF; color: var(--muted); font-weight: 600; }
.week-top { display: flex; gap: 14px; align-items: flex-start; }
.day-num { width: 44px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; font-family: var(--display); font-size: 26px; font-weight: 800; line-height: 1; }
.badge { align-self: flex-start; padding: 2px 6px; border-radius: 6px; background: var(--brand); color: #fff; font-family: Figtree, sans-serif; font-size: 11px; }
.week-lesson { flex: 1; min-width: 0; font-weight: 600; line-height: 1.35; }
.week .btn.soft { margin-left: 58px; }

.week-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.week-kind { font-size: 12px; font-weight: 700; color: var(--brand-dark); text-transform: uppercase; letter-spacing: .05em; }
.teams-line { display: flex; flex-wrap: wrap; column-gap: 6px; row-gap: 2px; margin: 0; padding-left: 58px; font-size: 14px; }
.teams-line b { color: var(--muted); }
.teams-line .sep { color: var(--muted); }

/* Calendário: events. Each card sets --ev-bg / --ev-ink from its Cor (web/logic.js EVENT_COLORS). */
.ev-strip { display: flex; gap: 10px; margin: 0 -14px; padding: 2px 14px 6px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-inline: 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ev-strip::-webkit-scrollbar { display: none; }
.ev-card { flex: 0 0 168px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 18px;
  background: var(--ev-bg); color: var(--ev-ink); text-decoration: none; }
.ev-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.ev-card-emoji { font-size: 28px; line-height: 1; }
.ev-pill { flex-shrink: 0; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, .7); color: var(--ev-ink);
  font-size: 11px; font-weight: 700; white-space: nowrap; }
.ev-card-title { font-family: var(--display); font-size: 16px; font-weight: 800; line-height: 1.15; }
.ev-dates { font-size: 12px; font-weight: 600; }
.ev-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--ev-bg); color: var(--ev-ink); text-decoration: none; }
.ev-emoji { width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 14px;
  background: rgba(255, 255, 255, .7); font-size: 26px; line-height: 1; }
.ev-body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.ev-title { font-size: 16px; font-weight: 800; line-height: 1.2; }
.ev-tag { margin-top: 3px; padding: 2px 8px; border-radius: 7px; background: #fff; color: var(--ev-ink); font-size: 11px; font-weight: 700; }

/* Event detail */
.ev-head { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 20px; background: var(--ev-bg); color: var(--ev-ink); }
.ev-head .back { color: inherit; }
.ev-big-emoji { font-size: 56px; line-height: 1; }
.ev-head-title { font-size: 28px; }
.ev-head-dates { margin: 0; font-weight: 600; }
.info { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 16px; background: var(--surface); }
.info-text { margin: 0; line-height: 1.4; white-space: pre-line; overflow-wrap: anywhere; }

@media (min-width: 640px) {
  body { max-width: 720px; margin: 0 auto; border-inline: 1px solid var(--line); }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Motion ("suave"). Short on things that happen 40 times a Sunday, a bit longer on the
   one-off payoff. Everything is CSS; prefers-reduced-motion switches it all off, so every
   animation's resting state must be the visible one (keyframes carry the "from" state). */
:root { --spring: cubic-bezier(.34, 1.56, .64, 1); --ease-out: cubic-bezier(.2, .9, .25, 1); }
.card { transition: transform .12s ease, background-color .2s ease, border-color .2s ease, color .2s ease; -webkit-tap-highlight-color: transparent; }
.card:active { transform: scale(.95); }
.card .rest { transition: color .2s ease; }
.card .tick { transform: scale(0); transition: transform .3s var(--spring), opacity .12s ease; }
.card[aria-pressed="true"] .tick { transform: scale(1); }
.count { display: inline-block; transform-origin: 50% 60%; }
.count.bump { animation: bump .3s var(--spring); }
@keyframes bump { 45% { transform: scale(1.3); } }

.scrim { opacity: 0; transition: opacity .22s ease; }
.scrim.open { opacity: 1; }
.sheet { transform: translateY(105%); transition: transform .2s cubic-bezier(.4, 0, 1, 1); }
.sheet.open { transform: none; transition: transform .38s var(--ease-out); }
.sheet .stat { animation: rise .35s var(--ease-out) both; }
.sheet .stat:nth-child(1) { animation-delay: .14s; }
.sheet .stat:nth-child(2) { animation-delay: .19s; }
.sheet .stat:nth-child(3) { animation-delay: .24s; }

.done-mark { position: relative; animation: pop .45s var(--spring) both; }
.done-mark::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--brand);
  opacity: 0; animation: ring .8s ease-out .2s both; }
.done-mark.pending::after { border-color: var(--orange); }
.done-mark .draw { stroke-dasharray: 22; animation: draw .32s ease-out .25s both; }
.done > h1, .done > p { animation: rise .35s var(--ease-out) both; }
.done > h1 { animation-delay: .38s; }
.done > p { animation-delay: .46s; }
.done > p + p { animation-delay: .52s; }
@keyframes pop { from { transform: scale(.3); opacity: 0; } }
@keyframes ring { from { transform: scale(.9); opacity: .45; } to { transform: scale(1.8); opacity: 0; } }
@keyframes draw { from { stroke-dashoffset: 22; } to { stroke-dashoffset: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px) scale(.98); } }

/* First visit to a tab: its items cascade in, 25 ms apart (--i set per item). */
.enter > * { animation: rise .34s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 25ms); }
.tabs a { position: relative; }
.tabs a::before { content: ''; position: absolute; top: 0; left: 50%; width: 28px; height: 3px; margin-left: -14px; border-radius: 2px;
  background: var(--brand); transform: scaleX(0); transition: transform .25s var(--ease-out); }
.tabs a[aria-current="page"]::before { transform: scaleX(1); }

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

/* Past Sunday being corrected: never confusable with today's roll call. */
.tag.past { display: inline-block; margin-top: 8px; font-size: 12px; }
.week-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 58px; }
.week-actions .btn.soft { margin-left: 0; }

/* Regulars first: two sections when some pre-teens rarely come to this service. */
.sec { display: flex; justify-content: space-between; align-items: baseline; margin: 16px 16px 0; font-size: 12px;
  font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.grid.grid-sec { padding-top: 8px; }
.grid.grid-sec + .sec { margin-top: 6px; }
.card.rare { background: #F7FAF9; border-style: dashed; }
.card.rare[aria-pressed="true"] { background: var(--brand); border-style: solid; }
.bday { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 2px 7px; border-radius: 7px;
  background: #FFF1BF; color: #6B4E00; font-size: 11px; font-weight: 700; }

.login-logo { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 10px 30px rgba(16, 41, 44, .12); animation: pop .45s var(--spring) both; }

/* Loading between screens: the launch splash's dots on their own (styles inline in index.html). */
.splash.splash-small { background: transparent; }
.stats.one { grid-template-columns: minmax(0, 1fr); }

/* Items of a scrolling column never shrink: an overflow-x row (the events strip) would
   otherwise be squashed to nothing once the agenda is taller than the screen. */
.pad-x > * { flex-shrink: 0; }

/* DEMO=on only (app.js adds body.demo): a thin strip above every screen. It takes the
   top safe area, so the headers under it drop theirs. */
body.demo::before { content: 'Demonstração · dados fictícios'; flex-shrink: 0; display: block;
  padding: calc(2px + env(safe-area-inset-top)) 12px 2px; background: var(--orange); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: .02em; text-align: center; }
body.demo .top { padding-top: 18px; }
body.demo .ev-head { padding-top: 10px; }

/* A class Sunday's page: event-page layout; the card's top links to it. */
.week-link { color: inherit; text-decoration: none; }
.info-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; }
.info-row + .info-row { border-top: 1px solid var(--line-soft); }
.info-btn { min-height: 40px; padding: 0 14px; font-size: 14px; }