/* © ٢٠٢٦ خدمة الألحان والطقس — كنيسة السيدة العذراء مريم والشهيد العظيم مارجرجس بمدينتي. جميع الحقوق محفوظة. */
/* خدمة الألحان — shared look: parchment, maroon and gold */
:root {
  --maroon: #7A1218;
  --maroon-2: #9C2028;
  --maroon-3: #6A1016;
  --maroon-dark: #4E0B0F;
  --red: #C0262E;
  --gold: #D9A93F;
  --gold-2: #E9B949;
  --gold-3: #F2C14E;
  --gold-dark: #A9741C;
  --gold-light: #F7E2A6;
  --cream: #FFF8E8;
  --cream-2: #FFFBF0;
  --line: #E2C27A;
  --line-2: #E9D3A0;
  --ink: #3A1A0E;
  --ink-2: #5A3A20;
  --muted: #7A5A3A;
  --green: #2F7A4A;
  --green-bg: #E3F4E8;
  --green-ink: #1E5631;
  /* fonts: playful headings, clear rounded body text */
  --display: 'Changa', 'Cairo', 'Noto Sans Coptic', system-ui, sans-serif;
  --body: 'Cairo', 'Noto Sans Coptic', system-ui, sans-serif;
  /* bright helpers for the children's pages (the brand stays maroon and gold) */
  --sky: #2B8FD6; --sky-bg: #E2F2FF;
  --grass: #2BA55F; --grass-bg: #E0F6E8;
  --sun: #F5A300; --sun-bg: #FFF1C9;
  --coral: #EC5F45; --coral-bg: #FFE5DE;
  --grape: #7655D8; --grape-bg: #ECE5FF;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: radial-gradient(120% 50% at 50% 0%, #FFF6DF 0%, #F6E6C4 55%, #EED6A6 100%) fixed, #F3E2BC;
  color: var(--ink);
  font-family: var(--body);
  min-height: 100vh;
}
a { color: var(--maroon); }
a:hover { color: var(--maroon-dark); }
button, input, select, textarea { font-family: inherit; }
.display { font-family: var(--display); font-weight: 400; }
.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- girls' app shell ---------- */
.app { max-width: 480px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; position: relative; overflow-x: hidden; padding-bottom: 96px; }
.topbar { display: flex; align-items: center; gap: 10px; padding: 16px 18px 4px; }
.topbar .title { flex: 1; font-family: var(--display); font-size: 28px; color: var(--maroon); line-height: 1.2; }
.round-btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--cream); display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; text-decoration: none; }
.cross-deco { opacity: .7; flex-shrink: 0; }

.card { background: var(--cream); border: 1.5px solid var(--line); border-radius: 22px; box-shadow: 0 4px 0 var(--line-2), 0 10px 24px rgba(110,70,10,.10); }
.ribbon { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: 18px 18px 0 0; background: linear-gradient(180deg, #8E1B22, var(--maroon-3)); border: 2px solid #C9962E; border-bottom: 0; color: #FFF3D6; font-family: var(--display); font-size: 22px; text-align: center; }
.ribbon + .card { border-radius: 0 0 22px 22px; border-top: 0; }
.section { margin: 20px 16px 0; }
.section-title { display: flex; align-items: center; gap: 8px; padding: 24px 18px 10px; font-family: var(--display); font-size: 22px; color: var(--maroon); }

.btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 22px; border-radius: 999px; border: 2.5px solid var(--gold); background: linear-gradient(180deg, var(--maroon-2) 0%, var(--maroon-3) 100%); box-shadow: inset 0 2px 0 rgba(255,220,180,.35), 0 5px 0 var(--maroon-dark), 0 10px 18px rgba(78,11,15,.25); color: #FFF3D6; text-decoration: none; font-family: var(--display); font-size: 21px; cursor: pointer; width: 100%; }
.btn:hover { color: #FFE7A8; }
.btn:disabled { opacity: .55; cursor: default; }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255,220,180,.35), 0 3px 0 var(--maroon-dark); }
.ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 16px; border-radius: 999px; border: 1.5px solid #D9B66A; background: var(--cream-2); color: #5A1A10; text-decoration: none; font-weight: 800; font-size: 15px; cursor: pointer; }
.gold-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 999px; background: linear-gradient(180deg, #F7DC8E, #E0AE45); border: 1.5px solid #FFF0C2; color: var(--maroon-dark); text-decoration: none; font-weight: 800; font-size: 16px; box-shadow: 0 4px 0 var(--gold-dark); cursor: pointer; }

.coin { width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FBE6A8, var(--gold-2) 70%); box-shadow: inset 0 -3px 0 #B8862A, 0 0 0 2px var(--cream), 0 0 0 3.5px var(--gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.badge-coin { width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #C8424A, var(--maroon) 72%); box-shadow: 0 0 0 3px var(--gold-2), 0 0 0 5px var(--gold-dark), 0 5px 10px rgba(78,11,15,.3); display: flex; align-items: center; justify-content: center; }
.badge-coin.locked { background: #EFDDB4; box-shadow: none; border: 2px dashed #C9A35A; }
.pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 99px; white-space: nowrap; }
.pill.ok { color: var(--green-ink); background: var(--green-bg); border: 1px solid #9FD0AE; }
.pill.wait { color: #6B4A08; background: var(--gold-light); border: 1px solid var(--gold); }
.pill.retry { color: var(--maroon); background: #FBE3DF; border: 1px solid #EBA9A2; }
.num-dot { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FBE6A8, var(--gold-2) 70%); box-shadow: 0 0 0 1.5px var(--gold-dark); color: #5A1A10; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.frame { border-radius: 50%; padding: 3px; background: conic-gradient(#F7DC8E, #C9962E, #F7DC8E, var(--gold-dark), #F7DC8E); flex-shrink: 0; display: block; }
.frame > svg, .frame > img { display: block; width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--cream); object-fit: cover; }

.progress { height: 18px; border-radius: 99px; background: #F3E2BC; border: 2px solid var(--gold); box-shadow: inset 0 2px 3px rgba(110,70,10,.2); overflow: hidden; }
.progress > div { height: 100%; border-radius: 99px; background: linear-gradient(180deg, #B52A32, var(--maroon)); box-shadow: inset 0 2px 0 rgba(255,220,180,.4); transition: width .6s; }

.list-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1.5px dashed var(--line); }
.list-row:last-child { border-bottom: 0; }

.tabs { position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); width: min(460px, calc(100% - 20px)); display: flex; gap: 4px; padding: 6px; background: var(--cream); border: 1.5px solid var(--line); border-radius: 26px; box-shadow: 0 -4px 18px rgba(110,70,10,.12); z-index: 20; }
.tabs a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; border-radius: 20px; text-decoration: none; color: var(--muted); font-size: 12px; font-weight: 700; }
.tabs a.on { background: linear-gradient(180deg, var(--maroon-2), var(--maroon-3)); color: #FFE7A8; box-shadow: inset 0 0 0 1.5px var(--gold), 0 4px 10px rgba(78,11,15,.3); }

.field { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 0 16px; border-radius: 18px; background: var(--cream-2); border: 1.5px solid var(--line); box-shadow: 0 3px 0 var(--line-2); }
.field input, .field select { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 17px; font-weight: 700; color: var(--ink); min-height: 52px; outline: none; }
.chip { min-height: 46px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--line); background: var(--cream); color: #5A1A10; box-shadow: 0 3px 0 var(--line-2); font-size: 15px; font-weight: 800; cursor: pointer; }
.chip.on { background: linear-gradient(180deg, var(--maroon-2), var(--maroon-3)); color: #FFE7A8; border-color: var(--gold); box-shadow: 0 4px 0 var(--maroon-dark); }

.toast { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 50; background: var(--maroon); color: #FFF3D6; border: 2px solid var(--gold); padding: 10px 18px; border-radius: 16px; font-weight: 800; box-shadow: 0 10px 24px rgba(0,0,0,.25); max-width: calc(100% - 32px); }
.loading { padding: 60px 20px; text-align: center; color: var(--muted); font-weight: 700; }
.empty { padding: 18px; text-align: center; color: var(--muted); font-size: 14px; }

/* ---------- servant (admin) shell ---------- */
.admin { display: flex; flex-wrap: wrap; min-height: 100vh; align-items: stretch; }
.admin aside { flex: 1 1 220px; max-width: 100%; background: linear-gradient(180deg, var(--maroon), var(--maroon-dark)); border-left: 3px solid #C9962E; color: #FFF3D6; padding: 22px 16px; display: flex; flex-direction: column; gap: 6px; }
.admin aside a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: 14px; text-decoration: none; color: #F3D9C0; font-weight: 700; font-size: 15px; }
.admin aside a.on { background: rgba(255,231,168,.14); color: #FFE7A8; box-shadow: inset 0 0 0 1.5px var(--gold); }
.admin aside .count { margin-right: auto; font-size: 12px; font-weight: 800; background: var(--red); color: #FFF8EA; border-radius: 99px; padding: 0 8px; }
.admin main { flex: 999 1 560px; min-width: 0; padding: 28px clamp(16px, 3vw, 40px) 60px; display: flex; flex-direction: column; gap: 22px; }
.admin h1 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 34px; color: var(--maroon); }
.admin h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 24px; color: var(--maroon); }
.panel { background: var(--cream); border: 1.5px solid var(--line); border-radius: 24px; box-shadow: 0 4px 0 var(--line-2), 0 10px 24px rgba(110,70,10,.08); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.hint { font-size: 13px; color: var(--muted); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.txt { min-height: 44px; border-radius: 12px; border: 1px solid #D9C597; background: var(--cream-2); font-size: 15px; color: var(--ink); padding: 8px 12px; width: 100%; }
textarea.txt { line-height: 1.6; resize: vertical; }
.num { width: 84px; min-height: 44px; border-radius: 12px; border: 1px solid #D9C597; background: var(--cream-2); font-size: 18px; font-weight: 800; color: var(--ink); text-align: center; }
.fld { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: #4A3D2C; }
.box { padding: 12px 14px; border-radius: 18px; background: var(--cream-2); border: 1px solid var(--line); }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sbtn { min-height: 42px; padding: 0 16px; border-radius: 12px; border: 2px solid var(--gold); background: linear-gradient(180deg, var(--maroon-2), var(--maroon-3)); color: #FFF3D6; font-weight: 800; font-size: 14px; cursor: pointer; }
.sbtn.green { background: var(--green); border-color: var(--green); }
.sbtn.light { background: var(--cream-2); color: var(--maroon); border: 1.5px solid #D9C597; }
.sbtn.dashed { background: transparent; color: #6B4A08; border: 2px dashed var(--gold); }
.sbtn:disabled { opacity: .5; cursor: default; }
.table { width: 100%; border-collapse: collapse; min-width: 760px; }
.table th { text-align: right; font-size: 13px; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.table td { padding: 10px; border-bottom: 1px dashed var(--line); vertical-align: middle; }
.scroll-x { overflow-x: auto; }
.stat { background: var(--cream); border: 1.5px solid var(--line); border-radius: 20px; padding: 14px 18px; display: flex; flex-direction: column; }
.stat b { font-family: var(--display); font-weight: 400; font-size: 34px; color: var(--maroon); }
.opt { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; border-radius: 14px; border: 2px solid var(--line); background: transparent; text-align: right; cursor: pointer; color: var(--ink); width: 100%; }
.opt.on { border-color: var(--maroon); background: var(--cream-2); }

/* ---------- decorative backdrop: crosses, notes, stars, church domes ---------- */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E %3Cg fill='%23C9962E' opacity='0.16'%3E %3Cpath transform='translate%2824 26%29 scale%281.6%29' d='M12 1.5l2 3-1 1v4.5h4.5l1-1 3 2-3 2-1-1H13v4.5l1 1-2 3-2-3 1-1V13H6.5l-1 1-3-2 3-2 1 1H11V5.5l-1-1z'/%3E %3Cpath transform='translate%28176 150%29 scale%281.1%29' d='M12 1.5l2 3-1 1v4.5h4.5l1-1 3 2-3 2-1-1H13v4.5l1 1-2 3-2-3 1-1V13H6.5l-1 1-3-2 3-2 1 1H11V5.5l-1-1z'/%3E %3Cpath transform='translate%28150 30%29 scale%28.8%29' d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6L2.5 9.4l6.6-.8z'/%3E %3Cpath transform='translate%2840 190%29 scale%28.7%29' d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6L2.5 9.4l6.6-.8z'/%3E %3C/g%3E %3Cg fill='%238E1B22' opacity='0.08'%3E %3Cpath d='M118 120 v-28 l26 -5 v26' fill='none' stroke='%238E1B22' stroke-width='4'/%3E %3Ccircle cx='112' cy='121' r='7'/%3E%3Ccircle cx='138' cy='114' r='7'/%3E %3Cpath d='M222 64 v-22 l14 -3' fill='none' stroke='%238E1B22' stroke-width='3'/%3E%3Ccircle cx='217' cy='65' r='6'/%3E %3C/g%3E%3C/svg%3E"); background-size: 260px 260px; }
body::after { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 190px; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='780' height='190' viewBox='0 0 780 190'%3E %3Cg fill='%23E3C489' opacity='0.55'%3E %3Cpath d='M0 190 V120 h30 v-30 a22 22 0 0 1 44 0 v30 h20 V190z'/%3E%3Crect x='47' y='52' width='10' height='22'/%3E%3Crect x='42' y='58' width='20' height='5'/%3E %3Cpath d='M120 190 V100 h24 V64 a51 51 0 0 1 102 0 V100 h24 V190z'/%3E%3Crect x='190' y='0' width='10' height='28'/%3E%3Crect x='183' y='8' width='24' height='6'/%3E %3Cpath d='M296 190 V118 h20 v-28 a24 24 0 0 1 48 0 v28 h26 V190z'/%3E%3Crect x='335' y='48' width='10' height='20'/%3E%3Crect x='330' y='53' width='20' height='5'/%3E %3Cpath d='M420 190 V130 h18 v-24 a20 20 0 0 1 40 0 v24 h18 V190z'/%3E%3Crect x='453' y='70' width='8' height='18'/%3E%3Crect x='449' y='75' width='16' height='4'/%3E %3Cpath d='M520 190 V96 h26 V60 a54 54 0 0 1 108 0 V96 h26 V190z'/%3E%3Crect x='595' y='-4' width='10' height='30'/%3E%3Crect x='588' y='5' width='24' height='6'/%3E %3Cpath d='M700 190 V120 h20 v-26 a22 22 0 0 1 44 0 v26 h16 V190z'/%3E%3Crect x='737' y='56' width='8' height='18'/%3E%3Crect x='733' y='61' width='16' height='4'/%3E %3C/g%3E%3C/svg%3E") repeat-x bottom center / auto 190px; }

/* ---------- home hero ---------- */
.hero { display: flex; align-items: center; gap: 14px; padding: 18px 18px 0; }
.hero-progress { padding: 14px 18px 0; display: flex; flex-direction: column; gap: 6px; }

/* ---------- columns: one on phones (natural order), two on wide screens ---------- */
.cols, .col { display: contents; }

@media (min-width: 900px) {
  .app { max-width: 1180px; padding: 0 28px 120px; }
  .topbar { padding: 22px 18px 6px; }
  .topbar .title { font-size: 34px; }
  .cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 32px; align-items: start; }
  .col { display: flex; flex-direction: column; min-width: 0; }
  .hero { margin: 20px 16px 0; padding: 22px; background: var(--cream); border: 1.5px solid var(--line); border-bottom: 0; border-radius: 22px 22px 0 0; }
  .hero-progress { margin: 0 16px; padding: 4px 22px 22px; background: var(--cream); border: 1.5px solid var(--line); border-top: 0; border-radius: 0 0 22px 22px; box-shadow: 0 4px 0 var(--line-2), 0 10px 24px rgba(110,70,10,.10); }
  .ach { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tabs { width: min(620px, calc(100% - 40px)); }
  .wheel-wrap { transform: scale(1.12); transform-origin: top center; margin-bottom: 40px; }
}

/* ---------- bigger text ---------- */
/* phones: a touch larger everywhere */
.app { font-size: 17px; }
/* computers: scale the whole girls' page up so it reads easily from a distance */
@media (min-width: 900px) { .app, .tabs { zoom: 1.12; } }
@media (min-width: 1400px) { .app, .tabs { zoom: 1.25; } }
/* servant page */
@media (min-width: 900px) { .admin main { zoom: 1.1; } }

/* ---------- dialogs (birthday card, child details) ---------- */
.card-dlg { border: 0; padding: 0; background: transparent; max-width: min(720px, calc(100vw - 24px)); width: 100%; }
.card-dlg::backdrop { background: rgba(40, 10, 5, .55); }
.card-box { background: var(--cream); border: 2px solid var(--gold); border-radius: 24px; padding: 20px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - 40px); overflow: auto; }
.card-box h2 { font-family: var(--display); font-weight: 400; font-size: 24px; color: var(--maroon); }

/* ---------- long text never spills out ----------
   A very long word or link (no spaces) wraps inside its box instead of running off the page.
   «anywhere» also lets flex items shrink to fit. */
body { overflow-wrap: anywhere; word-break: break-word; }
input, textarea, select { overflow-wrap: normal; }

/* the ownership line at the bottom of every page */
.copyright { text-align: center; font-size: 12px; line-height: 1.7; color: var(--muted); padding: 22px 16px 10px; }
.copyright b { color: var(--maroon); }
.app + .copyright, body:has(.tabs) > .copyright { margin-top: -80px; padding-bottom: 104px; }   /* children's pages: above the bottom tab bar */

/* «⋯» menus in the dashboard lists: the less-used actions of a row */
details.rowmenu { position: relative; }
details.rowmenu > summary { list-style: none; cursor: pointer; }
details.rowmenu > summary::-webkit-details-marker { display: none; }
.menu-pop { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; background: var(--cream); border: 1.5px solid var(--line); border-radius: 16px; padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 250px; box-shadow: 0 12px 28px rgba(60,30,10,.2); }
.menu-pop > .sbtn, .menu-pop > a { justify-content: flex-start; text-align: right; border: 0; width: 100%; }
/* an open «⋯» menu must sit above the rows under it: a faded (finished) row is its own layer, so lift the whole
   row while its menu is open, and show it at full strength so the menu isn't see-through */
.list-row:has(details.rowmenu[open]) { position: relative; z-index: 40; opacity: 1 !important; }
.menu-pop { z-index: 45; }

/* ================= children's pages: brighter, tidier, bigger =================
   Everything here is scoped to the children's shell (.app / .tabs), so the servants' dashboard keeps its look. */
body:has(> .app) { background: linear-gradient(180deg, #FFEFC2 0, #FFF8E6 260px, #FFFBF2 100%) fixed, #FFFBF2; }
body:has(> .app)::before { opacity: .45; }
.app { font-size: 17px; line-height: 1.5; }
.app .display, .app .topbar .title, .app .section-title, .app .ribbon, .app .btn { font-weight: 700; letter-spacing: 0; }
.app .topbar .title { font-size: 26px; }
.app .round-btn { background: #fff; border: 0; box-shadow: 0 3px 0 var(--line-2), 0 6px 14px rgba(110,70,10,.12); }
.app .card { background: #fff; border: 0; border-radius: 26px; box-shadow: 0 3px 0 #F0DDAE, 0 12px 28px rgba(110,70,10,.10); }
.app .section-title { font-size: 21px; padding: 26px 20px 10px; }
.app .ribbon { border: 0; border-radius: 26px 26px 0 0; min-height: 52px; font-size: 20px; background: linear-gradient(135deg, #A3222B, var(--maroon-3)); }
.app .ribbon + .card { border-radius: 0 0 26px 26px; }
.app .btn { min-height: 60px; font-size: 20px; border: 0; box-shadow: inset 0 2px 0 rgba(255,220,180,.35), 0 5px 0 var(--maroon-dark), 0 12px 20px rgba(78,11,15,.22); }
.app .ghost { background: #fff; border: 2px solid var(--line); }
.app .chip:not(.on) { background: #fff; }
.app .progress { height: 16px; border: 0; background: #F4E6C4; box-shadow: inset 0 2px 3px rgba(110,70,10,.15); }
.app .progress > div { background: linear-gradient(90deg, var(--sun), #FFD35C); box-shadow: inset 0 2px 0 rgba(255,255,255,.5); }
.app .list-row { border-bottom: 1.5px solid #F4E9CC; }
.app .list-row:last-child { border-bottom: 0; }
.app .pill { font-size: 13px; padding: 5px 12px; }
.app .empty { font-size: 15px; }

/* bottom bar: six clear buttons, the open one lifted in colour */
.tabs { gap: 2px; padding: 6px; background: #fff; border: 0; border-radius: 28px; box-shadow: 0 -2px 0 #F0DDAE inset, 0 10px 30px rgba(78,11,15,.22); }
.tabs a { min-height: 60px; border-radius: 22px; font-size: 12px; font-weight: 800; color: var(--ink-2); gap: 3px; }
/* seven tabs on a phone: labels stay on one line */
.tabs a { white-space: nowrap; min-width: 0; }
@media (max-width: 430px) { .tabs { width: calc(100% - 12px); gap: 1px; padding: 5px; } .tabs a { font-size: 11px; letter-spacing: -.2px; } .tabs a svg { width: 22px; height: 22px; } }
.tabs a.on { background: linear-gradient(180deg, #A3222B, var(--maroon-3)); box-shadow: 0 5px 12px rgba(78,11,15,.35); transform: translateY(-6px); }

/* coloured tiles (home and lesson) */
.ktile { text-decoration: none; color: var(--ink); border-radius: 22px; padding: 14px 8px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; background: var(--bg, var(--sun-bg)); box-shadow: 0 4px 0 var(--edge, #EBD08A); min-width: 0; }
.ktile:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--edge, #EBD08A); }
.ktile .ic { width: 54px; height: 54px; border-radius: 18px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 3px 8px rgba(0,0,0,.08); }
.ktile b { font-family: var(--display); font-size: 17px; color: var(--fg, var(--maroon)); line-height: 1.2; }
.ktile small { font-size: 13px; font-weight: 500; color: var(--ink-2); line-height: 1.3; }
.k-coral { --bg: var(--coral-bg); --edge: #F5B9AB; --fg: #B93A22; }
.k-sky { --bg: var(--sky-bg); --edge: #A9D3F2; --fg: #17689F; }
.k-grape { --bg: var(--grape-bg); --edge: #C5B6F3; --fg: #5236B4; }
.k-grass { --bg: var(--grass-bg); --edge: #A6DDBB; --fg: #1C7A44; }
.k-sun { --bg: var(--sun-bg); --edge: #F0D07A; --fg: #8A5A00; }

/* one even type scale on the children's pages: 14 small · 16 text · 18 · 20 · 24 titles */
.app { font-size: 16px; }
.app .topbar .title { font-size: 24px; }
.app .section-title, .app .ribbon, .app .btn { font-size: 20px; }
.app .ghost, .app .chip, .app .gold-btn, .app .empty { font-size: 16px; font-weight: 700; }
.app .pill { font-size: 14px; font-weight: 700; }
.app .ktile b { font-size: 16px; } .app .ktile small { font-size: 14px; }
.tabs a { font-size: 14px; font-weight: 700; }
.app b, .app strong { font-weight: 700; }
.copyright { font-size: 14px; }

/* ---------- loader: the logo breathing with three bouncing notes (the text inside .loading is hidden) ---------- */
.loading { font-size: 0 !important; color: transparent !important; min-height: 46vh; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.loading::before { content: ''; width: 92px; height: 92px; border-radius: 50%; background: #FFF6DF url('../img/logo.jpg') center / cover no-repeat; box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--gold-2), 0 0 0 0 rgba(217,169,63,.55); animation: ldPulse 1.4s ease-out infinite; }
.loading::after { content: ''; width: 76px; height: 16px; background:
    radial-gradient(circle 7px at 8px 8px, var(--maroon) 96%, transparent) 0 0 / 26px 16px no-repeat,
    radial-gradient(circle 7px at 8px 8px, var(--gold-2) 96%, transparent) 26px 0 / 26px 16px no-repeat,
    radial-gradient(circle 7px at 8px 8px, var(--maroon) 96%, transparent) 52px 0 / 26px 16px no-repeat;
  animation: ldDots 1s ease-in-out infinite; }
@keyframes ldPulse { 0% { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--gold-2), 0 0 0 7px rgba(217,169,63,.55); } 100% { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--gold-2), 0 0 0 30px rgba(217,169,63,0); } }
@keyframes ldDots { 0%, 100% { background-position: 0 4px, 26px 0, 52px 4px; } 50% { background-position: 0 0, 26px 4px, 52px 0; } }
@media (prefers-reduced-motion: reduce) { .loading::before, .loading::after { animation: none; } }
.nav-prog { position: fixed; top: 0; right: 0; left: 0; height: 4px; z-index: 9999; background: linear-gradient(90deg, var(--gold-2), var(--maroon), var(--gold-2)); background-size: 200% 100%; animation: navProg 1s linear infinite; }
@keyframes navProg { to { background-position: -200% 0; } }

/* ---------- phones: nothing squeezed, nothing hidden off to the side ----------
   A row keeps room for its name (never a column of single letters); buttons that don't fit move to the next line. */
.list-row { flex-wrap: wrap; row-gap: 8px; }
.list-row > [style*="flex:1"], .list-row > [style*="flex: 1"] { flex-basis: 140px !important; min-width: min(140px, 100%) !important; }
.list-row .pill, .list-row .hint { white-space: normal !important; }
@media (max-width: 700px) {
  /* tables become cards stacked under each other (each value with its column name), so nothing needs a sideways swipe */
  .scroll-x { overflow-x: visible; }
  table.table.stack { min-width: 0 !important; display: block; width: 100%; }
  table.table.stack thead { display: none; }
  table.table.stack tbody, table.table.stack tr { display: block; width: 100%; }
  table.table.stack tr { border: 1.5px solid var(--line); border-radius: 16px; padding: 8px 12px; margin: 0 0 10px; background: #fff; }
  table.table.stack td { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 6px 0; border: 0 !important; background: transparent !important; text-align: right; min-height: 0; }
  table.table.stack td[data-label]::before { content: attr(data-label); font-size: 13px; font-weight: 700; color: var(--muted); }
  table.table.stack td:empty { display: none; }
  table.table.stack td:first-child { font-weight: 800; font-size: 16px; }
  table.table.stack td audio, table.table.stack td video { width: 100%; max-width: 100%; }
  table.table.stack td .txt, table.table.stack td input:not([type=checkbox]):not([type=radio]) { max-width: 100%; }
  /* «⋯» menus open as a sheet at the bottom of the screen, never cut off at the edge */
  .menu-pop { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; min-width: 0; max-height: 70vh; overflow-y: auto; overflow-x: hidden; z-index: 1000; box-shadow: 0 -6px 40px rgba(60,30,10,.35); }
  .menu-pop > .sbtn, .menu-pop > a { min-height: 48px; font-size: 16px; }
}
audio, video { max-width: 100%; }

/* ---------- the site's own popups (questions, confirmations) ---------- */
dialog.ui-ask { border: 0; padding: 0; background: transparent; width: min(420px, calc(100vw - 32px)); max-width: none; height: fit-content; max-height: calc(100vh - 32px); }
dialog.ui-ask::backdrop { background: rgba(40, 10, 5, .55); }
.ui-ask-box { background: var(--cream, #FFF8E8); border: 2px solid var(--gold, #C9962E); border-radius: 24px; padding: 22px 18px 18px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.ui-ask-t { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.7; color: var(--ink, #2A1A10); white-space: pre-line; }
.ui-ask-in { width: 100%; font-size: 18px; min-height: 50px; }
.ui-ask-b { display: flex; gap: 10px; flex-wrap: wrap; }
.ui-ask-b > * { flex: 1 1 120px; min-height: 50px; justify-content: center; }
.btn.danger { background: linear-gradient(180deg, #B3242B, #7A1218); }
.toast { z-index: 100000; }
dialog .toast { position: fixed; }

/* ---------- 📲 «install the app» strip, on every page until it's installed or closed ---------- */
.inst-bar { position: fixed; left: 10px; right: 10px; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); z-index: 900; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 20px; background: #FFF8E8; border: 2px solid var(--gold, #C9962E); box-shadow: 0 10px 30px rgba(60,30,10,.28); max-width: 520px; margin: 0 auto; direction: rtl; }
.inst-bar img { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; }
.inst-bar > * { min-width: 0; }
@media (max-width: 360px) { .inst-bar { gap: 8px; padding: 8px 10px; left: 6px; right: 6px; } .inst-bar img { display: none; } .inst-bar .inst-go { padding: 0 12px; } .inst-bar .inst-t { font-size: 13px; } }
.inst-bar .inst-t { flex: 1; min-width: 0; line-height: 1.35; font-size: 14px; color: var(--ink, #2A1A10); }
.inst-bar .inst-t b { display: block; font-size: 15px; color: var(--maroon, #7A1218); }
.inst-bar .inst-go { flex-shrink: 0; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #A52A31, #7A1218); color: #FFF3D6; font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; }
.inst-bar .inst-x { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid #D9B66A; background: #fff; color: #7A1218; font-size: 17px; cursor: pointer; line-height: 1; }
body:has(> .tabs) .inst-bar { bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); }
@media print { .inst-bar { display: none !important; } }