/*
 * ঘণ্টিকা — স্কুলের পাবলিক সাইটের ভিত্তি (docs/PLAN-SITE-TEMPLATES.md §৩.৬, §৪; ইউনিট S2a)।
 *
 * প্রতিটি স্কুল-সাইটের প্রতিটি পাতায় আগে এটি, তারপর কেবল চলতি টেমপ্লেটের t-{slug}.css, তারপর স্কুলের রঙের ছোট
 * <style> (SiteColours)। এখানে:
 *   ১. ফন্ট — ভাগের দেহের মুখ, আর "_base"-এর মুখ (প্যানেলের বিদ্যমান ফাইল)
 *   ২. টোকেন — :root-এ ডিফল্ট = "_base"-এর চেহারা (আজকের "ফিতা"); প্রতিটি টেমপ্লেট নিজের :root-এ বদলায়।
 *      আজকের পাতাগুলোর --gh-* নাম নতুন টোকেনের ডাকনাম (admission-apply, exam-test-এর নিজের <style> সেগুলো পড়ে)
 *   ৩. ভিত্তি ও বাংলা লেখার নিয়ম (§৪.৩): letter-spacing/text-transform কেবল :lang(en)-এ, font-synthesis: none,
 *      শিরোনামে line-height ও text-wrap: balance, স্কুলের নামে overflow-wrap: anywhere, দাগ ০.৩em নিচে
 *   ৪. খোলসের ভাগের টুকরো (resources/views/site/partials) — নাম-লোগো, মেনু (কম্পিউটারে সারি, ফোনে <details>),
 *      ওপরের সরু সারি, "ভর্তি চলছে", জরুরি পট্টি, প্রিভিউর পট্টি, ফোনের নিচের বার, পরীক্ষার সরু খোলস
 *   ৫. ভেতরের পাতার সামঞ্জস্য-স্তর — ভেতরের পাতাগুলো (নোটিশ, শিক্ষক, গ্যালারি, ভর্তি, অভিভাবক…) সব টেমপ্লেটে
 *      একই markup ও ক্লাস রাখে; এখানে সেগুলোর রূপ টোকেন দিয়ে লেখা, তাই টেমপ্লেট কেবল টোকেন বদলালেই মানায়।
 *      কোন ক্লাস এখানে থাকতেই হবে তা SiteClassInventoryTest খুঁজে বের করে।
 *   ৬. "_base"-এর মাথা, হিরো ও পাদটীকা — নিজের ক্লাসে (site-head, base-hero, site-foot), তাই কোনো টেমপ্লেটে লাগে না
 *   ৭. ছাপা, নড়াচড়া
 *
 * কোনো JavaScript নয়, কোনো বাইরের ঠিকানা নয় (ফন্টও এই host থেকে), সবসময় হালকা (prefers-color-scheme নেই —
 * Omar-এর সিদ্ধান্ত ৫)। নিয়মগুলো SiteCssLintTest পাহারা দেয়, আকার SiteBudgetTest (gzip ≤ ৯ KB)।
 * স্কুলের রঙ লেখায় কেবল --primary-text বা --accent-line দিয়ে — `color: var(--primary)` নিষেধ।
 */

/* ---------- ১. ফন্ট ---------- */

/* ভাগের দেহের মুখ — static 400, বাংলা ও লাতিন আলাদা ফাইলে, তাই ইংরেজি পাতায় বাংলার ফাইল নামে না (§৪.৪; ফাইল S4f-এর) */
@font-face {
    font-family: "Site Noto Sans Bengali";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../../fonts/site/noto-sans-bengali/noto-sans-bengali-400-bengali.v1.woff2") format("woff2");
    unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+200C-200D, U+25CC;
}
@font-face {
    font-family: "Site Noto Sans Bengali";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../../fonts/site/noto-sans-bengali/noto-sans-bengali-400-latin.v1.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+2000-206F;
}

/* প্যানেলের বিদ্যমান variable ফাইল (৪০০–৮০০) — "_base"-এর চেহারা আর কাঁথা (নতুন ফাইল নয়, সিদ্ধান্ত ৭) */
@font-face {
    font-family: "Site Noto Sans Bengali Var";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../../fonts/ghontika/noto-sans-bengali-bengali.woff2") format("woff2");
    unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+200C-200D, U+25CC;
}
@font-face {
    font-family: "Site Noto Sans Bengali Var";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../../fonts/ghontika/noto-sans-bengali-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+2000-206F;
}

/* ---------- ২. টোকেন — ডিফল্ট "_base" (ফিতা: ময়ূরকণ্ঠী ও পিতল) ---------- */

:root {
    /* টোকেনের চুক্তি (§৪.২) — প্রতিটি t-{slug}.css নিজের :root-এ সবগুলো দেয় */
    --ground: #F2F5F4;
    --surface: #FFFFFF;
    --ink: #122A2E;
    --ink-soft: #46605F;
    --line: #CFDDDB;
    --primary: #946419;
    --on-primary: #FFFFFF;
    --primary-text: #0E6770;
    --accent: #946419;
    --on-accent: #FFFFFF;
    --accent-line: #946419;
    --deep: #0A4E55;
    --on-deep: #FFFFFF;
    --alert: #A4161A;
    --on-alert: #FFFFFF;
    --well-bg: var(--primary);
    --well-ink: var(--on-primary);
    --focus: var(--accent-line);
    --radius: 10px;
    /* ডিফল্ট মুখ ডিভাইসের — কোনো ফাইল নয়। base.css টেমপ্লেটের CSS-এর আগে এলে ব্রাউজার এই টোকেনেই একবার মাপে;
       এখানে নামানো মুখ থাকলে প্রাঙ্গণের পাতাও মাঝে মাঝে প্যানেলের ১৩১ KB-র ফাইল নামাত (পাইলটে ধরা)। "_base"-এর
       নিজের মুখ নিচে `body.t-_base`-এ। */
    --font-head: "Noto Sans Bengali", "Nirmala UI", "Kohinoor Bangla", sans-serif;
    --font-body: "Noto Sans Bengali", "Nirmala UI", "Kohinoor Bangla", sans-serif;
    --lh-head: 1.35;
    --lh-body: 1.75;
    --shadow: 0 1px 2px rgba(10, 78, 85, .08), 0 4px 16px rgba(10, 78, 85, .06);
    /* "_base"-এর নকশার বাড়তি রঙ — কেবল site-head, base-hero, site-foot পড়ে */
    --tabs: #0E6770;
    --tab-ink: #D7ECEA;
    --veil: rgba(6, 40, 44, .62);
    --focus-on-deep: #D9A441;

    /* আজকের পাতার নাম → নতুন টোকেন (§৪.২); SiteClassInventoryTest দেখে, view-তে যে --gh-* আছে তার সবই এখানে */
    --gh-ink: var(--ink);
    --gh-ink-soft: var(--ink-soft);
    --gh-line: var(--line);
    --gh-ground: var(--ground);
    --gh-surface: var(--surface);
    --gh-ribbon: var(--surface-2, var(--surface));
    --gh-title: var(--deep);
    --gh-on-title: var(--on-deep);
    --gh-link: var(--primary-text);
    --gh-school: var(--primary);
    --gh-school-ink: var(--on-primary);
    --gh-brass: var(--accent);
    --gh-brass-light: var(--accent-line);
    --gh-tabs: var(--deep);
    --gh-tab-ink: var(--on-deep);
    --gh-shadow: var(--shadow);
    --gh-hero-veil: rgba(0, 0, 0, .55);

    color-scheme: light;
}

/*
 * --surface-2 — হালকা আভার জমিন ("শীঘ্রই", বার্তা, ছবির ঘর)। টেমপ্লেট চাইলে নিজের :root-এ দেয়; না দিলে --surface।
 * "_base"-এর আজকের ময়ূরকণ্ঠী আভা কেবল "_base"-এ — :root-এই, যাতে --gh-ribbon-ও সেটি পায়।
 */
:root:has(> body.t-_base) { --surface-2: #E3EFEE; }
/* "_base"-এর মুখ — প্যানেলের variable Noto Sans Bengali, কেবল এই চেহারায় (ওপরে :root-এ নয়, কারণ সেখানে থাকলে অন্য
   টেমপ্লেটের পাতাও ফাইলটি নামাতে পারত) */
body.t-_base {
    --font-head: "Site Noto Sans Bengali Var", "Noto Sans Bengali", "Nirmala UI", "Kohinoor Bangla", sans-serif;
    --font-body: "Site Noto Sans Bengali Var", "Noto Sans Bengali", "Nirmala UI", "Kohinoor Bangla", sans-serif;
}

/* ---------- ৩. ভিত্তি ও বাংলা লেখা ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: var(--lh-body);
    font-synthesis: none;
    overflow-wrap: anywhere;
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }

a {
    color: var(--primary-text);
    text-underline-offset: .3em;
    text-decoration-skip-ink: auto;
}

h1, h2, h3 { margin: 0 0 .6rem; font-family: var(--font-head); line-height: var(--lh-head); text-wrap: balance; }
h1 { font-size: clamp(1.6rem, 5vw, 2.4rem); line-height: var(--lh-head); }
h2 { font-size: clamp(1.25rem, 3.4vw, 1.6rem); line-height: var(--lh-head); }
h3 { font-size: 1.15rem; line-height: var(--lh-head); }
p { margin: 0 0 1rem; }

/* ফোকাসের দাগ — :focus-visible, পুরোনো ব্রাউজারে :focus */
:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.ico {
    flex: none;
    width: 1.25em;
    height: 1.25em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wrap { width: 100%; max-width: 68rem; margin: 0 auto; padding: 0 1rem; }
.narrow { max-width: 30rem; margin-inline: auto; }

.skip {
    position: absolute;
    left: -999px;
    top: .5rem;
    z-index: 60;
    padding: .5rem 1rem;
    background: var(--surface);
    color: var(--ink);
}
.skip:focus { left: .5rem; }

/* ফোনে টেমপ্লেট CSS-এর `order:` দিয়ে অংশের ক্রম বদলাতে পারে (§৩.৪) */
main { display: flex; flex-direction: column; padding: 0 0 3rem; }

/* ---------- ৪. খোলসের টুকরো ---------- */

/* বোতাম — মূল বোতামে স্কুলের/টেমপ্লেটের মূল রঙ ভরাট, লেখা তার --on-primary */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 2.9rem;
    padding: .55rem 1.2rem;
    border: 2px solid transparent;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.btn-main { background: var(--primary); color: var(--on-primary); }
.btn-quiet { border-color: currentColor; color: inherit; background: transparent; }
.btn-block { width: 100%; margin-top: 1.2rem; }
.actions, .hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--primary-text); text-decoration: underline; cursor: pointer; }

/* নাম ও লোগো — নাম কখনো কাটা নয়; ছোট নাম কেবল ফোনের মাথায় */
.brand { display: flex; align-items: center; gap: .7rem; min-width: 0; color: inherit; text-decoration: none; }
.well {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--well-bg);
    color: var(--well-ink);
}
.well img { width: 100%; height: 100%; object-fit: contain; background: #FFFFFF; padding: 3px; }
.well-letter { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; line-height: 1; }
.brand-text { display: block; min-width: 0; }
.brand-name { display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; line-height: var(--lh-head); overflow-wrap: anywhere; }
.brand-sub { display: block; font-size: .8rem; line-height: 1.5; opacity: .85; }
.brand-short { display: none; }

/* মেনু, কম্পিউটারে — এক সারি (৭৬০ px-এর ওপরে) */
.nav ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.nav a { display: flex; align-items: center; min-height: 44px; padding: 0 .75rem; color: inherit; text-decoration: none; white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { text-decoration: underline; }

/* মেনু, ফোনে — <details> (৭৬০ px ও তার নিচে) */
.menu { position: relative; flex: none; }
.menu summary {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-height: 44px;
    padding: 0 .9rem;
    border: 1px solid currentColor;
    border-radius: var(--radius);
    cursor: pointer;
    list-style: none;
}
.menu summary::-webkit-details-marker { display: none; }
.menu .ico-close, .menu[open] .ico-open { display: none; }
.menu[open] .ico-close { display: block; }
.sheet {
    position: absolute;
    right: 0;
    top: calc(100% + .5rem);
    z-index: 50;
    width: min(18rem, calc(100vw - 2rem));
    max-height: calc(100svh - 9rem);
    overflow: auto;
    padding: .4rem;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.sheet ul { display: grid; margin: 0; padding: 0; list-style: none; }
.sheet nav a { display: flex; align-items: center; min-height: 44px; padding: 0 .8rem; border-radius: 6px; color: var(--ink); text-decoration: none; }
.sheet nav a[aria-current="page"] { background: var(--surface-2, var(--ground)); font-weight: 700; }
.sheet-logins { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .4rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.sheet-logins .btn { padding-inline: .5rem; font-size: .9rem; }
.sheet-locale { display: flex; justify-content: center; margin-top: .4rem; }

/* ওপরের সরু সারি — ফোন, ইমেইল, ফেসবুক, লগইন (যে টেমপ্লেট রাখে; ফোনে লুকানো) */
.utility { background: var(--deep); color: var(--on-deep); font-size: .875rem; line-height: 1.5; --focus: var(--focus-on-deep); }
.utility-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1.5rem; }
.u-left, .u-right { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.5rem; margin: 0; padding: 0; list-style: none; }
.utility a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; color: inherit; text-decoration: none; }
.utility a:hover { text-decoration: underline; }
.utility .ico { width: 1rem; height: 1rem; }
.u-locale { display: flex; }
.utility-locale { color: inherit; }

/* ইংরেজি পাতায় ভাষা বদলের "বাংলা" লেবেল ডিভাইসের বাংলা ফন্টে — এই নামগুলোর কোনো @font-face নেই, তাই কেবল এই
   ক'টি অক্ষরের জন্য বাংলার ফন্ট-ফাইল নামে না (ইংরেজি পাতা, ডিফল্ট ভাষা, কোনো বাংলা ফাইল টানে না — §৪.৪) */
html[lang="en"] .gh-locale [lang="bn"] { font-family: "Noto Sans Bengali", "Nirmala UI", "Kohinoor Bangla", "Bangla Sangam MN", sans-serif; }

/* "ভর্তি চলছে" — জ্বলা বিন্দু কেবল নড়াচড়া-সহ যন্ত্রে নড়ে (নিচে, অংশ ৭) */
.cta-admission { flex: none; }
.live-dot { position: relative; flex: none; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }

/* জরুরি পট্টি — স্থির; "জরুরি" শব্দসহ ভরাট ব্যাজ, কেবল রঙে নয় */
.urgent { background: var(--surface); border-bottom: 1px solid var(--line); }
.urgent-link { display: flex; align-items: center; gap: .9rem; min-height: 56px; padding-block: .5rem; color: var(--ink); text-decoration: none; }
/* খুব লম্বা শিরোনাম পট্টিতে তিন লাইনেই থামে — পুরোটা নোটিশের পাতায় (লিংক) */
.urgent-title { flex: 1 1 auto; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; text-decoration: underline; text-decoration-color: transparent; }
.urgent-link:hover .urgent-title { text-decoration-color: var(--accent-line); }
.urgent-date { flex: none; color: var(--ink-soft); font-size: .9rem; white-space: nowrap; }
.urgent-link > .ico { color: var(--accent-line); }
.badge-alert {
    display: inline-flex;
    flex: none;
    align-items: center;
    padding: 0 .6rem;
    border-radius: 4px;
    background: var(--alert);
    color: var(--on-alert);
    font-weight: 700;
    font-size: .875rem;
    line-height: 1.6;
}

/* স্কুলের দ্বিতীয় নাম (partials/second-name; দফা ২, ডোরা) — অন্য ভাষার নাম, নিজের সারিতে; চেহারা টেমপ্লেটের */
.second-name { display: block; }

/* চলমান জরুরি পট্টি (partials/urgent-ticker; দফা ২ — ঘুড়ি, সোপান, ছবিঘর), দুই বা বেশি জরুরি নোটিশে। এখানে স্থির রূপ:
   প্রতিটি নোটিশ একটি লিংক, জায়গা না থাকলে নিচের সারিতে; প্রতিলিপি ও "থামান" লুকানো। নড়াচড়া অংশ ৭-এ — কেবল
   নড়াচড়া-সহ যন্ত্রে আর :has() চেনা ব্রাউজারে। এক পাকের সময় সার্ভারের গতি-শ্রেণি থেকে (SiteChrome::ticker) */
.dur-s { --ticker-dur: 30s; }
.dur-m { --ticker-dur: 60s; }
.dur-l { --ticker-dur: 110s; }
.ticker-in { display: flex; align-items: center; gap: .5rem .9rem; min-height: 56px; padding-block: .5rem; }
.ticker-window { flex: 1 1 auto; min-width: 0; }
.ticker-track { display: flex; }
.ticker-list { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.ticker-item { display: inline-flex; align-items: baseline; gap: .6rem; color: var(--ink); text-decoration: none; }
.ticker-item .urgent-title { display: inline; overflow: visible; }
a.ticker-item:hover .urgent-title { text-decoration-color: var(--accent-line); }
.ticker-copy, .ticker-toggle { display: none; }
.ticker-toggle { align-items: center; gap: .4rem; flex: none; min-height: 44px; cursor: pointer; }
.ticker-stop { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--alert); }

/* প্রিভিউর পট্টি — "এটি প্রিভিউ", কেবল লিংক; কোনো টেমপ্লেটের রঙ নয়, যাতে সবখানে আলাদা চেনা যায় */
.preview-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .25rem 1.25rem;
    padding: .35rem 1rem;
    background: #1B1B1B;
    color: #FFFFFF;
    font-size: .95rem;
    line-height: 1.5;
    --focus: #FFD23F;
}
.preview-bar p { margin: 0; }
.preview-bar-actions { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.preview-bar a { display: inline-flex; align-items: center; min-height: 44px; color: #FFD23F; font-weight: 700; }
.preview-bar-text { overflow-wrap: anywhere; }
.preview-bar-name { font-weight: 700; }
.preview-bar-activate, .preview-bar-end { white-space: nowrap; }

/* ব্যানারের ছবি — মূল বিন্দু inline object-position-এ */
.banner { display: block; }
.banner-img { width: 100%; height: 100%; object-fit: cover; }

/* ফোনের নিচের বার — ফোন · নোটিশ · ভর্তি; কেবল ৭৬০ px ও তার নিচে (নিচে) */
.phonebar { display: none; }

/* পাদটীকার ছোট লাইন */
.foot-facts { margin: .5rem 0 0; font-size: .9rem; }
.copyright { margin: 1rem 0 0; font-size: .875rem; opacity: .85; }

/* পরীক্ষার সরু খোলস — মেনু নেই, আটকে থাকা মাথা নেই (পরীক্ষার ঘড়ি ওপরে আটকে থাকে) */
.bare-head { background: var(--surface); border-bottom: 1px solid var(--line); }
.bare-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 3.75rem; }
.bare-head .brand-name { font-size: 1rem; }
.bare-locale { flex: none; }
.bare-foot { padding: 1.25rem 0 1.5rem; color: var(--ink-soft); font-size: .875rem; }
.chrome-bare main { padding-top: .5rem; }

/* ---------- ৫. ভেতরের পাতা (সব টেমপ্লেটে একই markup) ---------- */

.page-head { padding: 2rem 0 1rem; }
.page-head p { color: var(--ink-soft); }
.section { padding-top: 2rem; }
.section h2 { padding-left: .7rem; border-left: 4px solid var(--accent-line); }
.card {
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) + 4px);
    box-shadow: var(--shadow);
}
.card h2 { border-left: 0; padding-left: 0; }
.stack > * + * { margin-top: 1rem; }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.cols { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.muted { color: var(--ink-soft); }
.soon { padding: 1rem 1.25rem; border-radius: calc(var(--radius) + 2px); background: var(--surface-2, var(--surface)); color: var(--ink-soft); }
.more-link { margin-top: .75rem; }

/* বাণী — হোমে ("_base") আর "আমাদের সম্পর্কে" পাতায় */
.message { display: grid; gap: 1.25rem; }
.who { display: flex; align-items: center; gap: .9rem; }
.who strong { display: block; font-size: 1.1rem; }
.portrait {
    flex: none;
    display: grid;
    place-items: center;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-2, var(--ground));
    color: var(--primary-text);
    font-size: 1.8rem;
    font-weight: 700;
}

/* নোটিশের তালিকা — নোটিশ বোর্ড, নিয়োগ, "_base"-এর হোম */
.notice-list { margin: 0; padding: .25rem 1.25rem; list-style: none; }
.notice-row { display: grid; gap: .15rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.notice-row:last-child { border-bottom: 0; }
.notice-row > a { color: var(--ink); font-weight: 700; text-decoration: none; }
.notice-row > a:hover { color: var(--primary-text); text-decoration: underline; }
.notice-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; color: var(--ink-soft); font-size: .92rem; }
.badge {
    display: inline-block;
    padding: 0 .6rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.6;
}
/* নোটিশের সারি ও পাতার "জরুরি" — হোমের চিপ ও ওপরের পট্টির মতো "জরুরি"-র রঙে (শব্দসহ, কেবল রঙে নয়) */
.notice-meta .badge { border-radius: 4px; background: var(--alert); color: var(--on-alert); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1.25rem; }
.pager a { display: inline-flex; align-items: center; min-height: 44px; }

/* শিক্ষক */
.people { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.person { display: flex; align-items: center; gap: .9rem; }
.person > div { min-width: 0; }
.person .portrait { width: 4.5rem; height: 4.5rem; font-size: 1.4rem; }
.person strong { display: block; font-size: 1.05rem; }
.person .muted { display: block; }
.subjects { display: block; color: var(--primary-text); font-size: .9rem; }

/* গ্যালারি */
.albums { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.album-card { overflow: hidden; padding: 0 0 1rem; }
.album-card a { display: block; color: var(--ink); text-decoration: none; }
.album-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-2, var(--ground)); }
.album-card strong { display: block; padding: .75rem 1rem 0; }
.album-card .muted { display: block; padding: .15rem 1rem 0; font-size: .92rem; }
.photos { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--surface-2, var(--ground)); }

/* যোগাযোগ */
.contact-list { display: grid; gap: 1rem; margin: 0; }
.contact-list dt { color: var(--ink-soft); font-size: .92rem; font-weight: 700; }
.contact-list dd { margin: .1rem 0 0; font-size: 1.1rem; }

/* ফরম — অভিভাবক, ভর্তির ফল, পরীক্ষায় ঢোকা */
.field { display: block; margin-top: 1rem; }
.field > span { display: block; margin-bottom: .35rem; font-weight: 700; }
.field input {
    width: 100%;
    min-height: 2.9rem;
    padding: .55rem .8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--ground);
    color: var(--ink);
    font: inherit;
    font-size: 1.1rem;
}
.field small { display: block; margin-top: .3rem; color: var(--ink-soft); }
.msg { padding: .75rem .9rem; border-radius: var(--radius); }
.msg-ok { background: var(--surface-2, var(--ground)); }
.msg-err { background: #FCEDEC; color: #8E2B2B; }
.err { color: #B42318; }

/* অভিভাবকের পাতা */
.child-link { display: flex; align-items: center; gap: .9rem; color: inherit; text-decoration: none; }
.child-link:hover h3 { text-decoration: underline; }
.child-link h3 { margin: 0; font-size: 1.15rem; line-height: var(--lh-head); }
.child-photo {
    flex: 0 0 3.5rem;
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-2, var(--ground));
    color: var(--primary-text);
    font-weight: 700;
}
.kv { display: grid; grid-template-columns: minmax(7rem, auto) 1fr; gap: .45rem 1rem; margin: 0; }
.kv dt { color: var(--ink-soft); }
.kv dd { margin: 0; font-weight: 600; }

/* ---------- ৬. "_base" — আজকের "ফিতা" চেহারা, নিজের ক্লাসে ---------- */

/* মাথা পাতার ওপরের স্তরে — খোলা মেনু নিচের লেখার ওপরে ভাসে */
.site-head { position: relative; z-index: 40; }
.site-bar { background: var(--deep); color: var(--on-deep); --focus: var(--focus-on-deep); }
.site-bar .wrap { display: flex; align-items: center; gap: .75rem; min-height: 4rem; }
.site-bar .brand { flex: 1; }
.site-bar .brand-sub { color: var(--tab-ink); opacity: 1; }
.site-bar .sheet-locale { display: none; }
.site-locale { flex: none; }
.tabs { background: var(--tabs); color: var(--tab-ink); --focus: var(--focus-on-deep); }
.tabs .nav ul { flex-wrap: nowrap; gap: .25rem; overflow-x: auto; scrollbar-width: thin; }
.tabs .nav a { padding: .5rem 1rem; border-radius: 8px 8px 0 0; }
.tabs .nav a:hover { color: var(--on-deep); }
.tabs .nav a[aria-current="page"] { background: var(--ground); color: var(--ink); font-weight: 700; text-decoration: none; }

.base-hero { position: relative; isolation: isolate; color: #FFFFFF; background: linear-gradient(135deg, var(--tabs), var(--deep)); --focus: var(--focus-on-deep); }
.base-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--veil); }
.base-hero.plain::before { background: transparent; }
.base-hero .banner { position: absolute; inset: 0; z-index: -2; }
.base-hero .wrap { padding-block: 3rem; }
.base-hero h1 { color: #FFFFFF; overflow-wrap: anywhere; }
.base-hero a { color: #FFFFFF; }
.base-hero .tagline { max-width: 40rem; font-size: 1.15rem; }
.base-hero .facts { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-bottom: 1.4rem; font-size: .95rem; opacity: .92; }
.base-hero .btn-main { color: var(--on-primary); }

.site-foot { padding: 2rem 0 1.5rem; background: var(--deep); color: var(--tab-ink); font-size: .95rem; --focus: var(--focus-on-deep); }
.site-foot a { color: var(--on-deep); }
.site-foot strong { color: var(--on-deep); }
.site-foot nav { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; }
.site-foot nav strong { grid-column: 1 / -1; }
.site-foot nav a { display: flex; align-items: center; min-height: 44px; }
.powered {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1.25rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .18);
}
.powered span { display: inline-flex; align-items: center; gap: .4rem; }
.powered img { width: 1.2rem; height: 1.2rem; }
.powered a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- কম্পিউটার আর ফোন — ৭৬০ px-এ ভাগ ---------- */

@media (min-width: 761px) {
    .menu { display: none; }
    .message { grid-template-columns: 12rem 1fr; align-items: start; }
    .message .who { flex-direction: column; text-align: center; }
    .message .portrait { width: 8rem; height: 8rem; }
}

@media (max-width: 760px) {
    .nav, .tabs, .utility { display: none; }
    .site-bar .cta-admission { display: none; }
    /* লম্বা নাম (brand-l, brand-xl) পুরো সারি পায়; ভাষা বদল আর মেনু তার নিচে, ডানে */
    .site-bar .wrap { flex-wrap: wrap; row-gap: 0; }
    .site-bar .brand-l, .site-bar .brand-xl { flex-basis: 100%; padding-top: .6rem; }
    .site-bar .site-locale { margin-left: auto; }
    .brand-sub { display: none; }
    .brand-name { font-size: 1rem; }
    /* ছোট নাম চোখে, পুরো নাম পর্দা-পাঠকের কাছে (ছোট নামটি aria-hidden) */
    .has-short .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .has-short .brand-short { display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; line-height: var(--lh-head); }
    .urgent-link { flex-wrap: wrap; align-items: flex-start; gap: .25rem .6rem; padding-block: .75rem; }
    .urgent-title { flex-basis: 12rem; }
    .urgent-link > .ico { display: none; }

    /* নিচের বার পাতার কিছু ঢাকে না — শরীর আর স্ক্রল দুটোরই নিচে জায়গা */
    html { scroll-padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
    body:not(.chrome-bare) { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
    .phonebar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 45;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--deep);
        color: var(--on-deep);
        box-shadow: 0 -6px 18px -10px rgba(0, 0, 0, .45);
        --focus: var(--focus-on-deep);
    }
    .phonebar a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: 60px;
        color: inherit;
        font-size: .9rem;
        line-height: 1.4;
        text-decoration: none;
    }
    .phonebar a + a { border-left: 1px solid rgba(255, 255, 255, .14); }
    .phonebar .ico { width: 22px; height: 22px; }
    /* ক্রম সব টেমপ্লেটে এক — ফোন, নোটিশ, ভর্তি */
    .pb-call { order: 1; }
    .pb-notice { order: 2; }
    .phonebar .pb-adm { order: 3; background: var(--primary); color: var(--on-primary); font-weight: 700; }
}

/* খুব সরু ফোন — মেনুর "মেনু" শব্দ চোখে লুকানো, পর্দা-পাঠকের জন্য থাকে */
@media (max-width: 400px) {
    .menu-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .menu summary { padding: 0 .7rem; }
}

/* ---------- ৭. ছাপা আর নড়াচড়া ---------- */

/* নোটিশ, ভর্তির আবেদন — কাগজে কেবল লেখা; মাথা, মেনু, পট্টি, নিচের বার নয় */
@media print {
    body > header, body > footer, body > nav, .skip, .utility, .menu, .urgent, .preview-bar, .phonebar, .no-print {
        display: none !important;
    }
    body { padding: 0; background: #FFFFFF; color: #000000; }
    .card { border-color: #999999; box-shadow: none; }
    a { color: inherit; }
}

@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    .btn, .nav a, .urgent-title { transition: background-color .18s ease, color .18s ease, text-decoration-color .18s ease; }
    .live-dot::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: currentColor;
        animation: site-ping 1.8s ease-out infinite;
    }
    @keyframes site-ping {
        0% { transform: scale(1); opacity: .7; }
        80%, 100% { transform: scale(2.6); opacity: 0; }
    }

    /* চলমান জরুরি পট্টি — তালিকা আর তার প্রতিলিপি পাশাপাশি এক সারিতে, এক পাকে অর্ধেক সরে (জোড়া দেখা যায় না); মাউস বা
       ফোকাসে থামে; "থামান"-এ টিক দিলে স্থির তালিকায় ফেরে। :has() না চিনলে এই অংশই খাটে না — তখন স্থির তালিকা */
    @supports selector(:has(*)) {
        .ticker-window { overflow: hidden; }
        .ticker-track { width: max-content; animation: site-ticker var(--ticker-dur, 60s) linear infinite; }
        .ticker-list, .ticker-copy { display: flex; flex: none; flex-wrap: nowrap; gap: 0; }
        .ticker-list .ticker-item, .ticker-copy .ticker-item { margin-inline-end: 3rem; white-space: nowrap; }
        .ticker-toggle { display: inline-flex; }
        .ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
        .ticker:has(.ticker-stop:checked) .ticker-track { width: auto; animation: none; }
        .ticker:has(.ticker-stop:checked) .ticker-copy { display: none; }
        .ticker:has(.ticker-stop:checked) .ticker-list { flex: 1 1 auto; flex-wrap: wrap; gap: .25rem 1.5rem; }
        .ticker:has(.ticker-stop:checked) .ticker-item { margin-inline-end: 0; white-space: normal; }
        @keyframes site-ticker {
            to { transform: translateX(-50%); }
        }
    }
}