/* Akademik add-on (prefix ak-). Uses the design tokens of app.css; brand colours only via --brand / --accent. */

.ak-ic { width: 20px; height: 20px; flex: none; vertical-align: middle; }
.ak-tabs { margin-bottom: var(--s5); flex-wrap: wrap; }
.ak-tabs a { padding-left: 10px; padding-right: 10px; font-size: 13.5px; }
.ak-h3 { font-size: 15px; margin: var(--s5) 0 var(--s2); }
.ak-ro { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.ak-ethic { display: flex; gap: 8px; align-items: center; margin-top: var(--s4); }
.ak-ethic .ak-ic { width: 16px; height: 16px; color: var(--stamp); }
.ak-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.ak-list li { gap: var(--s3); }
.ak-num { width: 70px !important; text-align: right; }
.ak-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: var(--s4); }
.ak-chips .chip { text-decoration: none; padding: 6px 12px; }
.ak-chips .chip::before { display: none; }
.ak-filter { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; margin-bottom: var(--s4); }
.ak-filter select, .ak-filter input { width: auto; min-width: 180px; }

[data-ak-quran][hidden], [data-ak-iqra][hidden], [data-ak-ayah][hidden], [data-ak-page][hidden] { display: none !important; }

/* overview cards */
.ak-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s4); margin-bottom: var(--s5); }
.ak-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--s3); align-items: center; padding: var(--s4); background: var(--g-paper); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--hl), var(--sh-1); color: var(--ink); text-decoration: none; }
.ak-card:hover { box-shadow: var(--hl), var(--sh-2); text-decoration: none; }
.ak-card .ic { grid-row: span 2; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-text); }
.ak-card .ic .ak-ic { width: 22px; height: 22px; }
.ak-card .n { font-size: 24px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ak-card .l { font-size: 13px; color: var(--muted); }
.ak-card .s { grid-column: 2; font-size: 12px; color: var(--warn); }
.ak-card.on { border-color: var(--accent); }
.ak-card.on .ic { background: var(--warn-soft); color: var(--warn); }

/* settings */
.ak-mods { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s3); margin: var(--s3) 0 var(--s5); }
.ak-mod { display: flex; gap: 10px; align-items: flex-start; padding: var(--s3) var(--s4); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--sheet); cursor: pointer; }
.ak-mod:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.ak-mod span { display: grid; gap: 2px; }
.ak-mod small { font-size: 12.5px; }
.ak-days { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ak-iqra-pages { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.ak-iqra-pages label { display: grid; gap: 2px; font-size: 12px; color: var(--muted); }
.ak-grades td { vertical-align: middle; }
.ak-assign, .ak-inline-form { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: flex-end; margin-top: var(--s3); padding-top: var(--s3); border-top: 1px dashed var(--rule); }
.ak-assign select, .ak-inline-form select, .ak-inline-form input { width: auto; min-width: 140px; flex: 1 1 140px; }
.ak-mini { display: grid; gap: 2px; font-size: 12px; color: var(--muted); flex: 0 0 110px !important; }
.ak-mini input { min-width: 0 !important; }
.ak-staff { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--s5); }
.ak-staff .panel { margin: 0; }
.ak-pick-list { max-height: 340px; overflow: auto; border: 1px solid var(--rule-2); border-radius: var(--r-sm); padding: var(--s3); margin-bottom: var(--s3); background: var(--sheet); }

/* progress bits */
.ak-bar { height: 9px; border-radius: var(--r-pill); background: var(--sheet-2); box-shadow: var(--sh-inset); overflow: hidden; margin: 4px 0; }
.ak-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-hi), var(--brand)); }
.ak-bar.ok span { background: linear-gradient(90deg, #3aa57f, var(--ok)); }
.ak-ring { --p: 0; width: 132px; height: 132px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(var(--brand) calc(var(--p) * 1%), color-mix(in srgb, var(--brand) 12%, #e9ece6) 0); box-shadow: var(--sh-1); }
.ak-ring > div { width: 100px; height: 100px; border-radius: 50%; background: var(--sheet); display: grid; place-content: center; text-align: center; box-shadow: var(--sh-inset); }
.ak-ring b { font-size: 22px; font-weight: 800; line-height: 1; }
.ak-ring small { font-size: 11.5px; color: var(--muted); }
.ak-hero { display: flex; gap: var(--s6); align-items: center; flex-wrap: wrap; padding: var(--s5); margin-bottom: var(--s5); background: var(--g-paper); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--hl), var(--sh-1); }
.ak-hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); gap: var(--s5); }
.ak-hero-stats div { display: grid; }
.ak-hero-stats b { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; }
.ak-hero-stats span { font-size: 12.5px; color: var(--muted); }
.ak-next { margin-left: auto; display: grid; gap: 4px; }
.ak-juz { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.ak-juz > div { --p: 0; position: relative; aspect-ratio: 1; border-radius: 9px; border: 1px solid var(--rule); background: linear-gradient(0deg, color-mix(in srgb, var(--brand) 28%, #fff) calc(var(--p) * 1%), var(--sheet) 0);
  display: grid; place-content: center; text-align: center; font-variant-numeric: tabular-nums; }
.ak-juz > div b { font-size: 13px; }
.ak-juz > div small { font-size: 10px; color: var(--muted); line-height: 1; }
.ak-juz > div.done { background: var(--brand); border-color: var(--brand-lo); color: var(--brand-ink); }
.ak-juz > div.done small { color: var(--brand-ink); }
.ak-juz.sm { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; margin: var(--s3) 0; }
.ak-juz.sm > div { border-radius: 6px; }
.ak-juz.sm > div b { font-size: 11px; }
.ak-iqra-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s2); }
.ak-iqra-row > div { display: grid; gap: 2px; text-align: center; font-size: 12px; }
.ak-iqra-row > div.done b { color: var(--ok); }
.ak-target { margin-bottom: var(--s4); }
.ak-target-h { display: flex; justify-content: space-between; gap: var(--s3); align-items: baseline; flex-wrap: wrap; }
.ak-chart { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; height: 130px; align-items: end; }
.ak-chart > div { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.ak-chart span { width: 100%; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--brand); }
.ak-chart small { font-size: 10px; color: var(--muted); }

/* badges */
.ak-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s4); }
.ak-shelf.sm { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--s3); margin-top: var(--s3); }
.ak-shelf-item { text-align: center; }
.ak-badge { margin: 0; display: grid; justify-items: center; gap: 6px; text-align: center; }
.ak-medal { --t1: #c98b56; --t2: #8d5328; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--t1) 70%, #fff), var(--t1) 45%, var(--t2)); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), 0 0 0 4px #fff, 0 0 0 5px color-mix(in srgb, var(--t2) 40%, transparent), var(--sh-1); }
.ak-medal .ak-ic { width: 30px; height: 30px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .25)); }
.tier-silver .ak-medal { --t1: #b9c2cc; --t2: #6d7884; }
.tier-gold .ak-medal { --t1: #f0c24b; --t2: #a87512; }
.tier-platinum .ak-medal { --t1: #8fd0cd; --t2: #2d7b86; }
.ak-badge figcaption { display: grid; gap: 1px; line-height: 1.25; }
.ak-badge figcaption b { font-size: 13px; }
.ak-badge figcaption small { font-size: 11px; color: var(--muted); }
.ak-shelf.sm .ak-medal { width: 54px; height: 54px; }
.ak-shelf.sm .ak-medal .ak-ic { width: 26px; height: 26px; }
.ak-levels { display: flex; flex-wrap: wrap; gap: 8px; }
.ak-levels span { display: grid; padding: 6px 10px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--sheet); font-size: 12.5px; }
.ak-levels small { color: var(--muted); }
.ak-rules li { margin-bottom: 4px; }

/* quick entry (phone first) */
.ak-entry-top { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.ak-entry-top .grow { min-width: 0; }
.ak-entry-top b { font-size: 17px; }
.ak-back { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 20px; text-decoration: none; color: var(--ink); background: var(--g-key); border: 1px solid var(--rule-key); box-shadow: var(--sh-key); }
.ak-entry { max-width: 640px; background: var(--g-paper); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--hl), var(--sh-1); padding: var(--s4); margin-bottom: var(--s5); }
.ak-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--rule-key); border-radius: 12px; padding: 3px; background: var(--sheet-2); box-shadow: var(--sh-inset); margin: 0 0 var(--s4); }
.ak-seg label, .ak-mode label, .ak-books label, .ak-grades-pick label, .ak-pills label, .ak-moods label { position: relative; margin: 0; cursor: pointer; }
.ak-seg input, .ak-mode input, .ak-books input, .ak-grades-pick input, .ak-pills input, .ak-moods input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.ak-seg span { display: block; text-align: center; padding: 10px 4px; border-radius: 9px; font-weight: 700; font-size: 14px; color: var(--ink-2); }
.ak-seg input:checked + span { background: var(--g-brand); color: var(--brand-ink); box-shadow: var(--sh-key); }
.ak-seg input:focus-visible + span, .ak-grades-pick input:focus-visible + span, .ak-pills input:focus-visible + span, .ak-moods input:focus-visible + span, .ak-books input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 1px; }
.ak-mode { display: flex; gap: var(--s4); margin-bottom: var(--s3); font-size: 14px; }
.ak-mode label { display: flex; align-items: center; gap: 6px; }
.ak-mode input { position: static; opacity: 1; width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.ak-range { display: grid; gap: var(--s2); }
.ak-r { display: flex; align-items: center; gap: var(--s2); }
.ak-r select { flex: 1 1 auto; min-width: 0; }
.ak-r input[type=number] { width: 84px; flex: none; font-size: 18px; font-weight: 700; text-align: center; }
.ak-r-l { width: 52px; flex: none; font-size: 13px; color: var(--muted); font-weight: 600; }
.ak-dash { color: var(--muted); }
.ak-quick { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 2px 0 var(--s2) 60px; }
.ak-quick .chip { cursor: pointer; border: 1px solid var(--rule-key); background: var(--g-key); font-weight: 700; padding: 6px 12px; }
.ak-quick .chip::before { display: none; }
.ak-books { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: var(--s3); }
.ak-books span { display: grid; place-items: center; height: 46px; border-radius: 10px; border: 1px solid var(--rule-key); background: var(--g-key); font-weight: 800; font-size: 18px; box-shadow: var(--sh-key); position: relative; }
.ak-books span i { position: absolute; top: 2px; right: 5px; font-style: normal; font-size: 11px; color: var(--ok); }
.ak-books input:checked + span { background: var(--g-brand); color: var(--brand-ink); border-color: var(--brand-lo); }
.ak-books input:checked + span i { color: var(--brand-ink); }
.ak-grades-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: var(--s4) 0; }
.ak-grades-pick span { display: grid; place-items: center; min-height: 48px; padding: 6px; border-radius: 12px; border: 1px solid var(--rule-key); background: var(--g-key); box-shadow: var(--sh-key); font-weight: 700; font-size: 14px; text-align: center; line-height: 1.15; }
.ak-grades-pick input:checked + span { background: var(--g-brand); color: var(--brand-ink); border-color: var(--brand-lo); }
.ak-grades-pick .fail input:checked + span { background: linear-gradient(180deg, #d2484f, var(--stamp)); border-color: #7d1218; color: #fff; }
.ak-grades-pick .none span { font-weight: 600; color: var(--muted); }
.ak-steppers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin-bottom: var(--s3); }
.ak-step { display: grid; gap: 4px; text-align: center; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.ak-step > div { display: grid; grid-template-columns: 38px 1fr 38px; border: 1px solid var(--rule-field); border-radius: 10px; overflow: hidden; background: var(--field); box-shadow: var(--sh-inset); }
.ak-step button { border: 0; background: var(--g-key); font-size: 20px; font-weight: 700; color: var(--ink); cursor: pointer; }
.ak-step button:active { box-shadow: var(--sh-key-press); }
.ak-step input { border: 0 !important; box-shadow: none !important; border-radius: 0 !important; text-align: center; font-weight: 800; font-size: 17px; padding: 8px 0; min-width: 0; background: transparent; }
.ak-more { margin: var(--s2) 0 var(--s4); }
.ak-more summary { cursor: pointer; font-weight: 600; color: var(--brand-text); padding: 6px 0; }
.ak-save { display: flex; gap: var(--s2); flex-wrap: wrap; position: sticky; bottom: 0; padding: var(--s3) 0 2px; background: var(--sheet); border-top: 1px solid var(--rule-2); margin: 0 calc(-1 * var(--s4)) calc(-1 * var(--s4)); padding: var(--s3) var(--s4); border-radius: 0 0 var(--radius) var(--radius); }
.ak-save .btn.lg { flex: 1 1 auto; }
.ak-today { max-width: 640px; }
.ak-search { margin-bottom: var(--s3); max-width: 420px; }
.ak-kids { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--s2); margin-bottom: var(--s5); }
.ak-kid { display: flex; align-items: center; gap: var(--s3); padding: 12px var(--s3); min-height: 60px; background: var(--g-paper); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--hl), var(--sh-1); color: var(--ink); text-decoration: none; position: relative; }
.ak-kid:hover { text-decoration: none; box-shadow: var(--hl), var(--sh-2); }
.ak-kid[hidden] { display: none; }
.ak-kid .n { font-weight: 700; line-height: 1.25; flex: 1; min-width: 0; display: grid; }
.ak-kid .n small { font-weight: 500; font-size: 12px; color: var(--muted); }
.ak-kid .ok { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #fff; font-weight: 800; font-size: 14px; }
.ak-kid.done { border-color: color-mix(in srgb, var(--ok) 45%, var(--rule)); background: linear-gradient(180deg, #fff, var(--ok-soft)); }
.ak-kid.draft { border-color: color-mix(in srgb, var(--warn) 40%, var(--rule)); }
.ak-kid .ak-mood .ak-ic { width: 24px; height: 24px; color: var(--brand-text); }
.ak-kid .ak-nocam { color: var(--stamp); opacity: .7; }
.ak-kid .ak-nocam .ak-ic { width: 16px; height: 16px; }

/* daily log */
.ak-daily .ak-sec { padding: var(--s3) 0; border-bottom: 1px dashed var(--rule); }
.ak-daily .ak-sec:last-of-type { border-bottom: 0; }
.ak-daily h3 { font-size: 15px; margin: 0 0 var(--s2); display: flex; align-items: center; gap: 8px; }
.ak-daily h3 .ak-ic { color: var(--brand-text); }
.ak-r2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.ak-r2 label { display: grid; gap: 2px; font-size: 12px; color: var(--muted); font-weight: 600; }
.ak-opt { display: grid; grid-template-columns: 120px 1fr; gap: var(--s2); align-items: center; margin-bottom: 8px; }
.ak-opt-l { font-size: 13.5px; font-weight: 600; }
.ak-pills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.ak-pills span { display: grid; place-items: center; min-height: 40px; padding: 4px; border-radius: 9px; border: 1px solid var(--rule-key); background: var(--g-key); font-size: 12.5px; font-weight: 600; text-align: center; line-height: 1.1; }
.ak-pills input:checked + span { background: var(--g-brand); color: var(--brand-ink); border-color: var(--brand-lo); }
.ak-moods { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.ak-moods span { display: grid; justify-items: center; gap: 2px; padding: 8px 2px; border-radius: 12px; border: 1px solid var(--rule-key); background: var(--g-key); }
.ak-moods span .ak-ic { width: 30px; height: 30px; color: var(--ink-2); }
.ak-moods span small { font-size: 11px; font-weight: 600; text-align: center; }
.ak-moods input:checked + span { background: var(--brand-soft); border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); }
.ak-moods input:checked + span .ak-ic { color: var(--brand-text); }
.ak-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--s2); margin-bottom: var(--s3); }
.ak-photos figure { margin: 0; display: grid; gap: 4px; }
.ak-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--rule); box-shadow: var(--sh-1); background: var(--sheet-2); }
.ak-photos figcaption { font-size: 12px; color: var(--muted); }
.ak-upload { display: grid; gap: var(--s2); }
.ak-child-photos { max-width: 640px; }
.ak-child-photos h2 { display: flex; align-items: center; gap: 8px; }

/* marks grid */
.ak-grid th small { display: block; font-weight: 500; color: var(--muted); font-size: 11px; }
.ak-grid td { padding-top: 4px; padding-bottom: 4px; }
.ak-grid-name { white-space: nowrap; }
.ak-mark { width: 84px !important; margin-left: auto; display: block; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; padding: 6px 8px; }
.ak-mark.bad { border-color: var(--stamp) !important; background: var(--stamp-soft); }
.ak-marks-save { padding: var(--s4); }
.ak-results td { white-space: nowrap; }
.ak-g { display: inline-block; min-width: 20px; padding: 0 4px; border-radius: 4px; background: var(--brand-soft); color: var(--brand-text); font-weight: 800; font-size: 12px; text-align: center; }

/* report card (screen) */
.ak-report th small { display: block; font-weight: 500; font-size: 11px; color: var(--muted); }
.ak-card-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); margin: var(--s4) 0; }
.ak-card-meta > div { display: grid; padding: var(--s3); border: 1px solid var(--rule-2); border-radius: var(--r-sm); background: var(--sheet); }
.ak-card-meta span { font-size: 12px; color: var(--muted); }
.ak-card-meta b { font-size: 17px; }
.ak-card-meta small { font-size: 12px; }
.ak-remarks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.ak-remarks > div { padding: var(--s3); border: 1px solid var(--rule-2); border-radius: var(--r-sm); background: var(--sheet); }
.ak-remarks span { font-size: 12px; color: var(--muted); font-weight: 600; }
.ak-remarks p { margin: 4px 0 0; }
.ak-extra { margin: var(--s4) 0; }
.ak-extra h3 { font-size: 15px; margin: 0 0 var(--s2); }

/* RPH */
.ak-weekbar { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; margin-bottom: var(--s4); }
.ak-weekbar select { width: auto; }
.ak-week { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s3); }
.ak-day { background: var(--g-paper); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--hl), var(--sh-1); padding: var(--s3); display: grid; gap: var(--s2); align-content: start; }
.ak-day.today { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft), var(--sh-1); }
.ak-day h3 { margin: 0; font-size: 14px; display: flex; justify-content: space-between; }
.ak-day h3 small { color: var(--muted); font-weight: 500; }
.ak-rph { display: grid; gap: 3px; padding: var(--s2) var(--s3); border-radius: var(--r-sm); border: 1px solid var(--rule-2); background: var(--sheet); color: var(--ink); text-decoration: none; }
.ak-rph:hover { border-color: var(--brand); text-decoration: none; }
.ak-rph .chip { justify-self: start; }
.ak-rph small { color: var(--muted); font-size: 12px; }
.ak-add { font-size: 13px; color: var(--muted); }
.ak-rph-form textarea { min-height: 70px; }
.ak-rpt input { min-width: 120px; }
.ak-rpt tr.ak-now td { background: var(--brand-soft); }
.ak-rph-view h3:first-of-type { margin-top: var(--s4); }

/* parent app */
.ak-p-head { display: grid; gap: var(--s3); }
.ak-p-level { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s2); align-items: center; font-size: 13px; font-weight: 700; }
.ak-p-level small { color: var(--muted); font-weight: 600; }
.ak-ptabs { display: flex; gap: 4px; overflow-x: auto; margin: 0 0 var(--s3); padding: 3px; border-radius: 12px; background: var(--sheet-2); box-shadow: var(--sh-inset); scrollbar-width: none; }
.ak-ptabs a { flex: 1 1 auto; text-align: center; padding: 9px 7px; border-radius: 9px; font-weight: 700; font-size: 13.5px; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.ak-ptabs a[aria-current] { background: var(--g-brand); color: var(--brand-ink); box-shadow: var(--sh-key); }
.ak-p-sum { display: flex !important; align-items: center; gap: var(--s4); }
.ak-p-sum .ak-ring { width: 84px; height: 84px; }
.ak-p-sum .ak-ring > div { width: 64px; height: 64px; }
.ak-p-sum .ak-ring b { font-size: 15px; }
.ak-p-sum .ak-ring small { display: none; }
.ak-p-ic { width: 46px; height: 46px; border-radius: 14px; flex: none; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-text); }
.ak-p-ic .ak-ic { width: 24px; height: 24px; }
.ak-p-hero { display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap; margin-bottom: var(--s3); }
.ak-p-hero .ak-ring { width: 108px; height: 108px; }
.ak-p-hero .ak-ring > div { width: 82px; height: 82px; }
.ak-p-hero .ak-hero-stats { grid-template-columns: repeat(3, auto); gap: var(--s4); }
.ak-p-hero .ak-hero-stats b { font-size: 20px; }
.ak-days-scroll { display: flex; gap: 6px; overflow-x: auto; margin-bottom: var(--s3); padding-bottom: 4px; scrollbar-width: thin; }
.ak-days-scroll a { flex: none; width: 52px; display: grid; justify-items: center; padding: 6px 0; border-radius: 12px; border: 1px solid var(--rule); background: var(--sheet); color: var(--ink); text-decoration: none; }
.ak-days-scroll a small { font-size: 11px; color: var(--muted); }
.ak-days-scroll a b { font-size: 18px; }
.ak-days-scroll a[aria-current] { background: var(--g-brand); color: var(--brand-ink); border-color: var(--brand-lo); }
.ak-days-scroll a[aria-current] small { color: var(--brand-ink); }
.ak-tl-head { display: flex !important; justify-content: space-between; align-items: center; gap: var(--s3); }
.ak-mood-big { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--brand-text); }
.ak-mood-big .ak-ic { width: 28px; height: 28px; }
.ak-timeline { list-style: none; margin: 0 0 var(--s4); padding: 0 0 0 4px; position: relative; }
.ak-timeline::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px; background: color-mix(in srgb, var(--brand) 25%, var(--rule)); }
.ak-timeline li { display: flex; gap: var(--s3); align-items: flex-start; padding: 8px 0; position: relative; }
.ak-tl-ic { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--sheet); border: 2px solid color-mix(in srgb, var(--brand) 45%, #fff); color: var(--brand-text); z-index: 1; }
.ak-tl-ic .ak-ic { width: 18px; height: 18px; }
.ak-timeline li > div { padding-top: 6px; min-width: 0; }
.ak-timeline li.note > div { background: var(--warn-soft); padding: 8px 10px; border-radius: var(--r-sm); }
.ak-p-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); margin-bottom: var(--s4); }
.ak-p-photos figure { margin: 0; }
.ak-p-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--rule); box-shadow: var(--sh-1); }
.ak-p-photos figcaption { font-size: 12px; color: var(--muted); margin-top: 2px; }
.ak-consent .btn { margin-top: 4px; }
.ak-p-bests { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: var(--s2); margin-top: var(--s3); }
.ak-p-bests > div { display: grid; justify-items: center; text-align: center; padding: var(--s2); border-radius: var(--r-sm); background: var(--sheet-2); }
.ak-p-bests .ak-ic { color: var(--accent); width: 22px; height: 22px; }
.ak-p-bests b { font-size: 20px; }
.ak-p-bests small { font-size: 11px; color: var(--muted); line-height: 1.2; }
.ak-p-report .ak-report th, .ak-p-report .ak-report td { font-size: 13px; }
.ak-p-home li { gap: var(--s3); }

@media (max-width: 760px) {
  .ak-hero { gap: var(--s4); }
  .ak-hero-stats { grid-template-columns: repeat(2, minmax(0, auto)); gap: var(--s3) var(--s5); }
  .ak-next { margin-left: 0; }
  .ak-remarks { grid-template-columns: 1fr; }
  .ak-iqra-pages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ak-staff { grid-template-columns: 1fr; }
  /* marks grid → one card per pupil on a phone */
  .ak-marks-form .table-wrap { overflow: visible; }
  .ak-grid thead { display: none; }
  .ak-grid, .ak-grid tbody, .ak-grid tr, .ak-grid td { display: block; width: 100%; }
  .ak-grid tr { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule); }
  .ak-grid td { border: 0 !important; padding: 3px 0 !important; text-align: left; }
  .ak-grid td:first-child { display: none; }
  .ak-grid td[data-label] { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }
  .ak-grid td[data-label]::before { content: attr(data-label); font-size: 13.5px; color: var(--ink-2); }
  .ak-mark { width: 96px; font-size: 17px; }
}
@media (max-width: 520px) {
  .ak-entry { padding: var(--s3); border-radius: var(--r-sm); }
  .ak-save { margin: 0 calc(-1 * var(--s3)) calc(-1 * var(--s3)); padding: var(--s3); }
  .ak-juz { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ak-juz.sm { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .ak-opt { grid-template-columns: 1fr; gap: 4px; }
  .ak-moods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ak-iqra-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ak-kids { grid-template-columns: 1fr; }
  .ak-filter select, .ak-filter input { min-width: 0; flex: 1 1 140px; }
}
@media print {
  .ak-tabs, .ak-save, .ak-filter { display: none !important; }
}

/* overview: module setup card (v1.12 — Akademik included in every plan) */
.ak-setup { border-left: 4px solid var(--brand); }
.ak-setup-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s3); }
.ak-setup-list li { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--sheet); }
.ak-setup-list li.on { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 40%, var(--rule)); }
.ak-setup-list .ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--sheet-2); color: var(--brand-text); flex: none; }
.ak-setup-list li.on .ic { background: var(--brand); color: var(--brand-ink); }
.ak-setup-list .grow { display: grid; gap: 2px; min-width: 0; }
.ak-setup-list small { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.ak-setup-list form { margin: 0; }
.ak-setup-list .btn { white-space: nowrap; }