/*
 * ভর্তির বয়স যাচাই — হোমের অংশ `age_check`, রূপ `panel` (Omar, ৩১ অক্টোবর ২০২৬)।
 *
 * সব টেমপ্লেটে একই চিহ্ন; চেহারা টেমপ্লেটের নিজের টোকেনে (--surface, --ink, --line, --primary, --font-head …) — তাই প্রতিটি
 * টেমপ্লেটের রঙ ও ফন্টেই দেখায়। প্রতিটি নিয়ম `.s-age_check`-এর ভেতরে, সাইটের অন্য কোথাও কিছু বদলায় না; color-scheme নেই —
 * টেমপ্লেটেরটিই চলে (ছবিঘর গাঢ়)। কেবল যে হোমে অংশটি আছে সেখানে নামে (site/partials/head)। ফোনে এক কলাম, ছক নিজের ঘরে সরে।
 */

.s-age_check .ac-lead { margin: .25rem 0 1.1rem; max-width: 42rem; color: var(--ink-soft); }
.s-age_check .ac-grid { display: grid; gap: 1rem; min-width: 0; }
.s-age_check .ac-card {
    display: grid;
    gap: .9rem;
    align-content: start;
    min-width: 0;
    padding: 1rem 1.1rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.s-age_check h3 { margin: 0; font-family: var(--font-head); font-size: 1.15rem; line-height: var(--lh-head); }

.s-age_check fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.s-age_check legend { margin-bottom: .5rem; padding: 0; font-weight: 700; }
.s-age_check .ac-date { display: grid; grid-template-columns: 1fr 1.6fr 1.25fr; gap: .6rem; }
.s-age_check .ac-field { display: grid; gap: .25rem; min-width: 0; }
.s-age_check .ac-field label { font-size: .9rem; color: var(--ink-soft); }
.s-age_check select {
    width: 100%;
    min-height: 48px;
    padding: .4rem .6rem;
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
}
.s-age_check select:focus-visible,
.s-age_check input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.s-age_check .ac-check { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; }
.s-age_check .ac-check input { flex: none; width: 22px; height: 22px; margin: .2rem 0 0; accent-color: var(--primary); }
.s-age_check .ac-check span { display: grid; }
.s-age_check .ac-check small { font-size: .9rem; color: var(--ink-soft); }

.s-age_check .ac-result { display: grid; gap: .35rem; padding: .9rem 1rem; background: var(--surface-2); border-radius: var(--radius); }
.s-age_check .ac-label { margin: 0; font-size: .9rem; color: var(--ink-soft); }
.s-age_check .ac-age { margin: 0 0 .3rem; font-family: var(--font-head); font-size: 1.45rem; font-weight: 700; line-height: var(--lh-head); color: var(--primary-text); }
.s-age_check .ac-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: .2rem 0 0; padding: 0; list-style: none; }
.s-age_check .ac-chips li { padding: .2rem .9rem; font-weight: 700; color: var(--on-primary); background: var(--primary); border-radius: 999px; }
.s-age_check .ac-hint { margin: .3rem 0 0; font-size: .95rem; }
.s-age_check .ac-msg { margin: 0; padding: .6rem .8rem; background: var(--surface); border-inline-start: 4px solid var(--alert); border-radius: var(--radius); }

.s-age_check .ac-note { margin: 0; font-size: .92rem; color: var(--ink-soft); }
.s-age_check .ac-table-wrap { min-width: 0; overflow-x: auto; }
.s-age_check .ac-table { width: 100%; min-width: 30rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.s-age_check .ac-table th,
.s-age_check .ac-table td { padding: .5rem .7rem; text-align: start; white-space: nowrap; border-bottom: 1px solid var(--line); }
.s-age_check .ac-table thead th { font-size: .88rem; color: var(--ink-soft); border-bottom: 2px solid var(--accent-line); }
.s-age_check .ac-table tbody th { font-weight: 700; }
.s-age_check .ac-table tr.is-ok th,
.s-age_check .ac-table tr.is-ok td { background: var(--surface-2); }
.s-age_check .ac-ok { display: inline-block; padding: 0 .6rem; font-size: .8rem; font-weight: 700; line-height: 1.7; color: var(--on-primary); background: var(--primary); border-radius: 999px; }

.s-age_check .ac-info { display: grid; gap: .25rem; margin: 0; padding-inline-start: 1.2em; }
.s-age_check .ac-contacts { display: flex; flex-wrap: wrap; gap: .6rem 2rem; margin: 0; padding: .7rem 0 0; list-style: none; border-top: 1px solid var(--line); }
.s-age_check .ac-contacts li { display: grid; }
.s-age_check .ac-contacts span { font-size: .88rem; color: var(--ink-soft); }
.s-age_check .ac-contacts a { font-size: 1.15rem; font-weight: 700; color: var(--primary-text); text-decoration: none; }
.s-age_check .ac-contacts a:hover { text-decoration: underline; }

@media (min-width: 52rem) {
    .s-age_check .ac-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
}

@media (max-width: 26rem) {
    .s-age_check .ac-card { padding: .9rem; }
    .s-age_check .ac-date { gap: .4rem; }
}