/* حصّتي website. Brand tokens from brand/README.md; the web room and the app use the same palette. */
:root {
  --paper: #FAF7F0; --sheet: #FFFFFF; --ink: #13233A; --ink-2: #5B6B7C; --ink-3: #5B6B7C; --rule: #E6E1D6; --edge: #D5CEC0;
  --outline: #8E8573; --lift: 0 1px 2px rgba(19, 35, 58, .06);
  --sun: #0B7A76; --on-sun: #FFFFFF; --sun-tint: #E3F4F2;
  --sky: #0B7A76; --sky-tint: #E3F4F2; --mint: #1B7F45; --mint-tint: #E2F2E8; --red: #B42D2D; --red-tint: #FBE6E4; --on-red: #FFFFFF;
  --brand: #0E9C97; --apricot: #FF8A3D; --apricot-tint: #FFEBDD; --marker: #FFD3B0; --warn-tint: #FFF4D6;
  --font-display: "Lemonada", "Readex Pro", "Segoe UI", Tahoma, sans-serif;
  --font-body: "Readex Pro", "Segoe UI", Tahoma, Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0D1826; --sheet: #16263A; --ink: #EEF3F6; --ink-2: #9FB1C2; --ink-3: #9FB1C2; --rule: #2A3F57; --edge: #2A3F57;
    --outline: #5C7590; --lift: none;
    --sun: #2BB8B0; --on-sun: #0D1826; --sun-tint: #12302F;
    --sky: #2BB8B0; --sky-tint: #12302F; --mint: #4CC98A; --mint-tint: #133A28; --red: #FF8A86; --red-tint: #46232A; --on-red: #0D1826;
    --brand: #2BB8B0; --apricot: #FF9A57; --apricot-tint: #3A2A1D; --marker: #6B4426; --warn-tint: #3A3319;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.8 var(--font-body); }
h1, h2, h3 { line-height: 1.4; margin: 0; text-wrap: balance; }
h1, h2 { font-family: var(--font-display); }
h1 { font-size: clamp(2.1rem, 5.5vw, 3.3rem); font-weight: 700; }
h2 { font-size: clamp(1.4rem, 3.2vw, 1.9rem); font-weight: 600; }
h3 { font-family: var(--font-body); font-size: 1.2rem; font-weight: 700; }
p { margin: 0; }
a { color: var(--sky); }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 8px; }
.wrap { max-width: 1120px; margin-inline: auto; padding-inline: max(16px, env(safe-area-inset-left)); }
.muted { color: var(--ink-2); }
.small { font-size: .9rem; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
/* One key word per headline at most. */
.marker { background: linear-gradient(transparent 56%, var(--marker) 56%); padding-inline: .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.site-head { border-bottom: 1px solid var(--rule); background: var(--sheet); }
.site-head .wrap { display: flex; align-items: center; gap: 18px; min-height: 68px; }
.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { display: block; width: 102px; height: 42px; }
.nav { margin-inline-start: auto; display: flex; gap: 6px; align-items: center; }
.nav-links { display: flex; gap: 6px; align-items: center; }
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--edge); border-radius: 12px; color: var(--ink); }
.menu summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; inset-inline-end: 0; top: 52px; z-index: 10; min-width: 200px; display: grid; padding: 8px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--lift); }
.menu-panel a { color: var(--ink); text-decoration: none; padding: 10px 12px; border-radius: 10px; font-weight: 500; }
.menu-panel a:hover { background: var(--paper); }
@media (max-width: 720px) {
  .nav-links { display: none; }
  .menu { display: block; }
  .site-head .wrap { gap: 10px; }
}
.nav a:not(.btn) { color: var(--ink); text-decoration: none; padding: 6px 10px; border-radius: 10px; font-weight: 500; }
.nav a:not(.btn):hover { background: var(--paper); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  font: 600 1rem var(--font-body); color: var(--ink); background: var(--sheet); text-decoration: none; cursor: pointer;
  border: 1px solid var(--edge); border-radius: 14px; box-shadow: var(--lift); padding: 8px 18px;
}
.btn:hover { background: var(--paper); }
.btn:active { transform: translateY(1px); }
.btn.sun { background: var(--sun); border-color: var(--sun); color: var(--on-sun); }
.btn.sun:hover { filter: brightness(.94); }
.btn.danger { background: var(--red); border-color: var(--red); color: var(--on-red); }
.btn.big { font-size: 1.1rem; padding: 12px 26px; min-height: 52px; }
.btn.block { width: 100%; }
.btn.google svg { flex: none; }
.or { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--ink-2); font-size: .9rem; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

.card { background: var(--sheet); border: 1px solid var(--rule); border-radius: 20px; box-shadow: var(--lift); padding: 22px; }
.note { background: var(--sky-tint); border-radius: 14px; padding: 12px 16px; }
.note.ok { background: var(--mint-tint); }
.note.warn { background: var(--red-tint); }
.note.sun { background: var(--warn-tint); }

.hero { border-bottom: 1px solid var(--rule); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 56px; align-items: center; }
@media (min-width: 860px) { .hero .wrap { grid-template-columns: minmax(0, 1fr) 320px; } }
.lead { font-size: 1.2rem; color: var(--ink-2); max-width: 58ch; }

/* The hero sample: the teacher's next lesson, then the week. */
.next-lesson { display: grid; gap: 8px; padding: 22px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 20px; box-shadow: var(--lift); }
.next-lesson .label { font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.next-title { font-size: 1.35rem; font-weight: 700; }
.next-lesson .btn { margin-top: 6px; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 10px; }
.day { position: relative; display: grid; place-items: center; padding: 8px 0 14px; border-radius: 10px; font-size: .72rem; color: var(--ink-2); background: var(--paper); }
.day.has::after, .day.next::after { content: ""; position: absolute; bottom: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--sky); }
.day.next { background: var(--sun); color: var(--on-sun); font-weight: 700; }
.day.next::after { background: var(--apricot); }

.section { padding-block: 56px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.feature h3 { margin-bottom: 4px; }

.plans { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.plan .price { font: 700 2.1rem var(--font-display); }
.plan ul { margin: 0; padding-inline-start: 1.2em; }
.plan.featured { background: var(--sun-tint); border-color: var(--sun); }

form.stack label { font-weight: 600; font-size: .92rem; color: var(--ink-2); margin-bottom: -8px; }
.field, select.field { font: inherit; color: var(--ink); background: var(--sheet); border: 1px solid var(--outline); border-radius: 12px; padding: 9px 14px; width: 100%; min-height: 44px; }
.field:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px var(--sky-tint); }
.error { color: var(--red); font-size: .9rem; }
.auth { max-width: 440px; margin: 48px auto; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: start; padding: 8px 10px; border-bottom: 1px solid var(--rule); }
.meter { height: 10px; border-radius: 99px; background: var(--sky-tint); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--sky); border-radius: 99px; }
.copy { font-family: Consolas, monospace; font-size: .85rem; direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; }

.site-foot { border-top: 1px solid var(--rule); padding-block: 28px; color: var(--ink-3); font-size: .9rem; margin-top: 40px; }
details > summary { cursor: pointer; font-weight: 700; }
.chip { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border: 1px solid var(--edge); border-radius: 999px; }
.methods { display: flex; flex-wrap: wrap; gap: 8px; }
.method { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border: 1px solid var(--edge); border-radius: 12px; cursor: pointer; }
.method:has(input:checked) { border-color: var(--sky); background: var(--sky-tint); font-weight: 700; }
.pay-box { display: grid; gap: 6px; padding: 16px; border: 1.5px dashed var(--outline); border-radius: 16px; text-align: center; }
.pay-box .amount { font-size: 1.8rem; font-weight: 800; }
.pay-box .number { font-size: 1.5rem; font-weight: 700; direction: ltr; unicode-bidi: isolate; letter-spacing: .04em; }
.steps { padding-inline-start: 1.3em; display: grid; gap: 6px; }
.wa-float { position: fixed; inset-inline-start: 18px; bottom: 18px; z-index: 20; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; box-shadow: 0 2px 8px rgba(19, 35, 58, .18); }
.steps-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: step; }
.step { counter-increment: step; display: grid; gap: 6px; }
.step::before { content: counter(step); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sun); color: var(--on-sun); font: 700 1.1rem var(--font-body); }
.faq { display: grid; gap: 10px; }
.faq details { background: var(--sheet); border: 1px solid var(--rule); border-radius: 16px; padding: 12px 16px; }
.faq summary { cursor: pointer; font: 700 1.05rem var(--font-body); }
.faq details p { margin-top: 8px; color: var(--ink-2); }
.checklist { list-style: none; padding: 0; display: grid; gap: 8px; }
.checklist li { display: flex; gap: 10px; align-items: center; }
.checklist li::before { content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--outline); background: var(--sheet); }
.checklist li.done { color: var(--ink-2); text-decoration: line-through; }
.checklist li.done::before { border-color: var(--mint); background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.link-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.btn.small { font-size: .85rem; padding: 4px 10px; min-height: 36px; }
.proof-preview { max-width: 100%; max-height: 320px; border-radius: 12px; border: 1px solid var(--rule); justify-self: center; }
.legal { max-width: 760px; }
.legal h2 { font-size: 1.3rem; margin-top: 10px; }
.legal ul { margin: 0; padding-inline-start: 1.3em; display: grid; gap: 6px; }
.site-foot a { color: var(--ink-2); }
.ad-slot { display: grid; gap: 2px; margin: 18px auto; padding-inline: 16px; }
.ad-slot img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--rule); }
.ad-slot .ad-label { font-size: .72rem; color: var(--ink-3); }

/* Notifications: the header bell, the live toast and the list page. */
.bell { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--edge); border-radius: 12px; color: var(--ink); }
.bell .badge { position: absolute; top: -8px; inset-inline-end: -8px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 99px; background: var(--red); color: #fff; font: 700 .75rem/22px var(--font-body); text-align: center; }
.live-toast { position: fixed; z-index: 50; inset-inline: 16px; bottom: 16px; max-width: 420px; margin-inline-start: auto; display: grid; gap: 2px; padding: 14px 18px; background: var(--sheet); color: var(--ink); text-decoration: none; border: 1px solid var(--rule); border-radius: 16px; box-shadow: 0 4px 16px rgba(19, 35, 58, .12); animation: toast-in .25s ease-out; }
.live-toast span { color: var(--ink-2); font-size: .95rem; }
@keyframes toast-in { from { transform: translateY(20px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .live-toast { animation: none; } }
.notif-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.notif-list li { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 14px; background: var(--sheet); }
.notif-list li.new { border-color: var(--sky); background: var(--sky-tint); }
.notif-list time { color: var(--ink-3); font-size: .8rem; }