/* nb-inner.css · KAN-796 v2 inner-page template (SEO/content pages, app/*.html except nabras-app.html)
   [agent-design] 2026-10-03. ONE shared stylesheet that replaces every page's inline <style> (today 418 blocks, 1.65 MB, avg 14.9 KB/page).
   Tokens = KAN-464 (light-warm default; html.nb-dark set by /nb-theme.js, same switch as the KAN-598 header/footer).
   Prefix .nbp- (page) so nothing collides with #nb-nav / #nb-footer (KAN-598) or legacy classes during the batch migration.
   No external fonts here: Cairo comes from the page head as today. No images. Target < 12 KB minified. */

:root{
  --p-bg:#FAF7F2;--p-card:#FFFFFF;--p-raised:#EFE9DF;--p-alt:#F3EEE5;--p-line:#E8E2D6;
  --p-text:#1F2937;--p-muted:#57606A;--p-link:#0F766E;--p-brand:#0891B2;--p-cta:#0E7490;--p-cta-hover:#155E75;
  --p-soft:#E0F4F8;--p-ok:#047857;--p-ok-soft:#E3F5EC;--p-warn:#92400E;--p-warn-soft:#FDF1DC;--p-bad:#B91C1C;--p-bad-soft:#FDEBDD;--p-note:#4F46E5;--p-note-soft:#ECEBFD;
  --p-shadow:0 8px 24px -16px rgba(31,41,55,.3);--p-r:16px;--p-r-sm:12px;--p-measure:720px;
}
html.nb-dark{
  --p-bg:#161527;--p-card:#232140;--p-raised:#334155;--p-alt:#1C1A33;--p-line:#334155;
  --p-text:#F5EFE8;--p-muted:#A89CB8;--p-link:#5EEAD4;--p-brand:#0891B2;--p-cta:#0E7490;--p-cta-hover:#0891B2;
  --p-soft:#17324A;--p-ok:#6EE7B7;--p-ok-soft:#153A35;--p-warn:#FCD34D;--p-warn-soft:#3A2F1C;--p-bad:#FECACA;--p-bad-soft:#3B2030;--p-note:#A5B4FC;--p-note-soft:#26285A;
  --p-shadow:none;
}
body.nbp-body{margin:0;background:var(--p-bg);color:var(--p-text);font-family:'Cairo','Segoe UI',Tahoma,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.nbp,.nbp *{box-sizing:border-box}
.nbp{direction:rtl;max-width:1120px;margin:0 auto;padding:12px 16px 40px;display:grid;grid-template-columns:minmax(0,1fr);gap:0 40px}
.nbp a{color:var(--p-link);text-underline-offset:3px}
.nbp a:hover{color:var(--p-text)}
.nbp :focus-visible{outline:3px solid var(--p-brand);outline-offset:2px;border-radius:6px}

/* ---------- 1. Article: crumbs, hero, answer-first, TOC, rhythm ---------- */
.nbp-crumbs{display:flex;flex-wrap:wrap;gap:2px 6px;font-size:.85rem;font-weight:700;color:var(--p-muted);margin:6px 0 10px;padding:0;list-style:none}
.nbp-crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--p-muted);text-decoration:none}
.nbp-crumbs li+li::before{content:"‹";margin-inline-end:6px;color:var(--p-muted)}
.nbp-hero{padding:4px 0 8px}
.nbp-kicker{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--p-raised);color:var(--p-link);font-weight:800;font-size:.82rem}
.nbp-hero h1{font-size:clamp(1.6rem,1.2rem + 2vw,2.4rem);line-height:1.3;font-weight:900;margin:12px 0 0;letter-spacing:-.3px}
.nbp-lead{font-size:1.08rem;line-height:1.9;color:var(--p-muted);font-weight:600;margin:12px 0 0;max-width:var(--p-measure)}
.nbp-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;font-size:.85rem;font-weight:700;color:var(--p-muted)}
.nbp-meta .is-verified{color:var(--p-ok)}
.nbp-answer{margin:18px 0 6px;background:var(--p-soft);border-radius:var(--p-r);padding:16px 18px}
.nbp-answer b.nbp-answer-k{display:block;font-size:.82rem;color:var(--p-link);font-weight:900;margin-bottom:4px}
.nbp-answer p{margin:0;font-weight:700;line-height:1.9;font-size:1.02rem}
.nbp-toc{margin:16px 0;background:var(--p-card);border:1px solid var(--p-line);border-radius:var(--p-r);padding:0 16px}
.nbp-toc summary{min-height:52px;display:flex;align-items:center;justify-content:space-between;font-weight:900;cursor:pointer;list-style:none}
.nbp-toc summary::-webkit-details-marker{display:none}
.nbp-toc summary::after{content:"";width:9px;height:9px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);margin-inline-start:12px;transition:transform .15s}
.nbp-toc[open] summary::after{transform:rotate(-135deg)}
.nbp-toc ol{margin:0;padding:0 0 10px;list-style:none;counter-reset:t}
.nbp-toc li{counter-increment:t}
.nbp-toc li a{display:flex;gap:10px;align-items:center;min-height:44px;color:var(--p-text);text-decoration:none;font-weight:700;border-top:1px solid var(--p-line)}
.nbp-toc li a::before{content:counter(t,arabic-indic);color:var(--p-link);font-weight:900;min-width:1.2em}
.nbp-main{min-width:0;max-width:var(--p-measure)}
.nbp-main h2{font-size:1.45rem;line-height:1.45;font-weight:900;margin:40px 0 10px;scroll-margin-top:92px}
.nbp-main h3{font-size:1.15rem;line-height:1.5;font-weight:800;margin:26px 0 8px;scroll-margin-top:92px}
.nbp-main p,.nbp-main li{font-size:1.02rem;line-height:1.95;font-weight:500}
.nbp-main p{margin:0 0 14px}
.nbp-main ul,.nbp-main ol{margin:0 0 16px;padding-inline-start:1.4em}
.nbp-main li{margin:4px 0}
.nbp-main li::marker{color:var(--p-link);font-weight:900}
.nbp-main blockquote{margin:18px 0;padding:6px 16px;border-inline-start:4px solid var(--p-brand);color:var(--p-text);font-weight:700;background:var(--p-alt);border-radius:0 var(--p-r-sm) var(--p-r-sm) 0}
.nbp-formula{direction:ltr;unicode-bidi:isolate;text-align:center;font-weight:900;font-size:1.05rem;background:var(--p-raised);border-radius:var(--p-r-sm);padding:12px 14px;margin:12px 0}

/* ---------- 2. Data: tables, date cards, chips, comparison ---------- */
.nbp-table-wrap{margin:14px 0 18px;overflow-x:auto;border:1px solid var(--p-line);border-radius:var(--p-r);background:var(--p-card);-webkit-overflow-scrolling:touch}
.nbp-table{width:100%;border-collapse:collapse;font-size:.95rem}
.nbp-table.is-wide{min-width:560px}/* 4+ columns only: scrolls inside .nbp-table-wrap, never the page */
.nbp-table caption{caption-side:top;text-align:start;padding:12px 14px 4px;font-weight:900}
.nbp-table th,.nbp-table td{padding:12px 12px;text-align:start;vertical-align:top;border-top:1px solid var(--p-line);line-height:1.7}
.nbp-table thead th{border-top:0;background:var(--p-alt);font-weight:900;font-size:.88rem}
.nbp-table tbody th{font-weight:800}
.nbp-table td.is-num{white-space:nowrap;font-weight:800}
.nbp-table .is-hl{background:var(--p-soft)}
.nbp-table-src{display:block;padding:8px 14px 12px;font-size:.8rem;font-weight:700;color:var(--p-muted)}
.nbp-dates{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:14px 0 18px}
.nbp-date{background:var(--p-card);border:1px solid var(--p-line);border-radius:var(--p-r);padding:14px;box-shadow:var(--p-shadow)}
.nbp-date .nbp-date-k{font-size:.85rem;font-weight:800;color:var(--p-muted)}
.nbp-date .nbp-date-v{display:block;font-size:1.2rem;font-weight:900;margin-top:4px}
.nbp-date.is-now{border:2px solid var(--p-brand)}
.nbp-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font-weight:800;font-size:.8rem;margin-top:8px;background:var(--p-raised);color:var(--p-text)}
.nbp-chip.is-ok{background:var(--p-ok-soft);color:var(--p-ok)}
.nbp-chip.is-warn{background:var(--p-warn-soft);color:var(--p-warn)}
.nbp-chip.is-soon{background:var(--p-soft);color:var(--p-link)}
.nbp-compare thead th.is-pick{background:var(--p-soft);color:var(--p-link)}
.nbp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:14px 0 18px}
.nbp-card{background:var(--p-card);border:1px solid var(--p-line);border-radius:var(--p-r);padding:16px;box-shadow:var(--p-shadow)}
.nbp-card h3,.nbp-card h4{margin:0 0 6px;font-size:1.05rem;font-weight:900}
.nbp-card p{margin:0;color:var(--p-muted);font-weight:600;line-height:1.8;font-size:.95rem}
.nbp-card .nbp-card-k{font-size:.8rem;font-weight:900;color:var(--p-link)}
.nbp-steps{list-style:none;margin:14px 0 18px;padding:0;counter-reset:s}
.nbp-steps li{counter-increment:s;display:grid;grid-template-columns:36px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--p-line);margin:0}
.nbp-steps li:first-child{border-top:0}
.nbp-steps li::before{content:counter(s,arabic-indic);width:36px;height:36px;border-radius:50%;background:var(--p-soft);color:var(--p-link);font-weight:900;display:grid;place-items:center}
.nbp-steps b{display:block}

/* ---------- 3. Callouts, FAQ, related, crumbs ---------- */
.nbp-callout{display:grid;grid-template-columns:28px 1fr;gap:10px;border-radius:var(--p-r);padding:14px 16px;margin:16px 0;background:var(--p-alt)}
.nbp-callout svg{margin-top:3px}
.nbp-callout b{display:block;font-weight:900;margin-bottom:2px}
.nbp-callout p{margin:0;font-weight:600;line-height:1.85}
.nbp-callout.is-tip{background:var(--p-ok-soft)}.nbp-callout.is-tip svg,.nbp-callout.is-tip b{color:var(--p-ok)}
.nbp-callout.is-warn{background:var(--p-warn-soft)}.nbp-callout.is-warn svg,.nbp-callout.is-warn b{color:var(--p-warn)}
.nbp-callout.is-note{background:var(--p-note-soft)}.nbp-callout.is-note svg,.nbp-callout.is-note b{color:var(--p-note)}
.nbp-faq{margin:14px 0 18px;display:flex;flex-direction:column;gap:10px}
.nbp-faq details{background:var(--p-card);border:1px solid var(--p-line);border-radius:var(--p-r-sm);padding:0 16px}
.nbp-faq summary{min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:800;font-size:1.02rem;cursor:pointer;list-style:none;padding:8px 0}
.nbp-faq summary::-webkit-details-marker{display:none}
.nbp-faq summary h3{font:inherit;margin:0}
.nbp-faq summary::after{content:"";flex:none;width:9px;height:9px;border:solid var(--p-link);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .15s}
.nbp-faq details[open] summary::after{transform:rotate(-135deg)}
.nbp-faq details>div{padding:0 0 14px;color:var(--p-text);line-height:1.9;font-weight:500}
.nbp-related{margin:28px 0 8px}
.nbp-related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:10px}
.nbp-related a{display:flex;flex-direction:column;justify-content:center;min-height:64px;padding:10px 14px;background:var(--p-card);border:1px solid var(--p-line);border-radius:var(--p-r-sm);text-decoration:none;color:var(--p-text)}
.nbp-related a b{font-weight:800}
.nbp-related a span{font-size:.85rem;color:var(--p-muted);font-weight:600}
.nbp-related a:hover{border-color:var(--p-brand)}

/* ---------- 4. CTA into the app ---------- */
.nbp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:12px;font:inherit;font-weight:800;font-size:1rem;text-decoration:none;border:0;cursor:pointer}
.nbp .nbp-btn-p{background:var(--p-cta);color:#fff}
.nbp .nbp-btn-p:hover{background:var(--p-cta-hover);color:#fff}
.nbp .nbp-btn-s{background:var(--p-card);color:var(--p-text);border:1px solid var(--p-line)}
.nbp-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;justify-content:space-between;background:var(--p-card);border:1px solid var(--p-line);border-radius:var(--p-r);padding:16px 18px;margin:20px 0;box-shadow:var(--p-shadow)}
.nbp-cta p{margin:0;font-weight:800;flex:1 1 260px;line-height:1.7}
.nbp-cta-end{margin:36px 0 8px;background:#123B47;color:#F5EFE8;border-radius:22px;padding:24px 22px}
.nbp-cta-end h2{margin:0;font-size:1.4rem;font-weight:900;color:#F5EFE8}
.nbp-cta-end p{margin:8px 0 16px;color:#CFE6EA;font-weight:600;line-height:1.8}
.nbp .nbp-cta-end .nbp-btn-p{background:#FFFFFF;color:#0E4A57}
.nbp .nbp-cta-end .nbp-btn-p:hover{background:#E0F4F8;color:#0E4A57}
html.nb-dark .nbp-cta-end{background:#0E2F3A}

/* ---------- 5. Interactive: calculator + daily question slot ---------- */
.nbp-tool{background:var(--p-card);border:1px solid var(--p-line);border-radius:var(--p-r);padding:16px 18px;margin:18px 0;box-shadow:var(--p-shadow)}
.nbp-tool h3{margin:0 0 4px}
.nbp-field{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.nbp-field label{font-weight:800;font-size:.92rem}
.nbp-field input,.nbp-field select{min-height:48px;border:1px solid var(--p-line);border-radius:12px;background:var(--p-bg);color:var(--p-text);font:inherit;font-weight:700;font-size:1rem;padding:0 14px;width:100%}
.nbp-field input{direction:ltr;text-align:right}
.nbp-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 12px}
.nbp-result{margin-top:14px;background:var(--p-soft);border-radius:var(--p-r-sm);padding:14px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.nbp-result b{font-size:1.9rem;font-weight:900;color:var(--p-link);line-height:1}
.nbp-result span{font-weight:700;color:var(--p-text)}
.nbp-daily{margin:18px 0}
.nbp-daily .nbp-q{font-weight:800;font-size:1.05rem;line-height:1.8;margin:8px 0 4px}
.nbp-opt{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;border:2px solid var(--p-line);background:var(--p-bg);border-radius:12px;padding:8px 12px;margin-top:8px;font:inherit;font-weight:700;color:var(--p-text);text-align:start;cursor:pointer}
.nbp-opt i{font-style:normal;width:30px;height:30px;border-radius:50%;background:var(--p-raised);display:grid;place-items:center;font-weight:800;flex:none}
.nbp-opt[aria-pressed="true"]{border-color:var(--p-brand);background:var(--p-soft)}

/* ---------- Build additions (KAN-818, agent-fullstack): two cases the mockup did not draw ---------- */
.nbp-formula[dir="rtl"]{direction:rtl}/* Arabic-worded formulas (موزونة) read right to left; numeric ones stay LTR */
.nbp-field textarea{min-height:132px;border:1px solid var(--p-line);border-radius:12px;background:var(--p-bg);color:var(--p-text);font:12px/1.6 ui-monospace,Menlo,monospace;padding:12px;width:100%;direction:ltr;resize:vertical}
.nbp-tool .nbp-btn{margin-top:14px}
.nbp [hidden]{display:none!important}/* .nbp-result is display:flex, which would beat the UA [hidden] rule */

/* ---------- Build additions (KAN-825, agent-fullstack): batch 3 bespoke blocks mapped onto the cards / chips / table / options above ---------- */
.nbp-card.is-pick{border:2px solid var(--p-brand)}
.nbp-card h3.is-ok{color:var(--p-ok)}.nbp-card h3.is-bad{color:var(--p-bad)}
.nbp-card p+p{margin-top:6px}
.nbp-card ul{margin:6px 0 0}
.nbp-card .nbp-btn{margin-top:12px}
.nbp-main>.nbp-card{margin:12px 0}
.nbp .is-yes{color:var(--p-ok);font-weight:800}.nbp .is-no{color:var(--p-bad);font-weight:800}.nbp .is-part{color:var(--p-warn);font-weight:800}
.nbp-table th.is-pick{background:var(--p-soft);color:var(--p-link)}
.nbp-main img{max-width:100%;height:auto;border-radius:var(--p-r-sm)}
.nbp-opt.is-ok{border-color:var(--p-ok);background:var(--p-ok-soft)}.nbp-opt.is-bad{border-color:var(--p-bad);background:var(--p-bad-soft)}
.nbp-tool>h2:first-child,.nbp-tool>h3:first-child{margin-top:0}
.nbp-main>.nbp-kicker{margin-top:28px}

/* ---------- Build additions (KAN-825 batch 3b, agent-fullstack): the 7 interactive pages (states their page JS sets) ---------- */
.nbp-count{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.nbp-count-u{background:var(--p-raised);border-radius:var(--p-r-sm);padding:10px 4px;text-align:center}
.nbp-count-u b{display:block;font-size:1.6rem;font-weight:900;line-height:1.2;color:var(--p-link);font-variant-numeric:tabular-nums}
.nbp-count-u span{font-size:.8rem;font-weight:700;color:var(--p-muted)}
.nbp-count-done{font-size:1.05rem;font-weight:800;line-height:1.9;padding:6px 3px}
.nbp-sum{margin-top:10px;font-weight:800;font-size:.92rem}.nbp-sum.is-ok{color:var(--p-ok)}.nbp-sum.is-bad{color:var(--p-bad)}
.nbp-result>p,.nbp-result>div{flex:1 1 100%;margin:0}
.nbp-result.is-warn{background:var(--p-warn-soft)}.nbp-result.is-warn b{color:var(--p-warn)}
.nbp-bd{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.nbp-bd>div{background:var(--p-card);border-radius:10px;padding:8px;text-align:center;font-size:.85rem;font-weight:700;color:var(--p-muted)}
.nbp-bd strong{display:block;font-size:1.1rem;color:var(--p-text)}
.nbp-out:not(.is-show){display:none}
.nbp-share{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.nbp-tl{margin:14px 0 18px;padding-inline-start:20px;border-inline-start:2px solid var(--p-line)}
.nbp-tl-item{position:relative;padding:6px 0 14px}
.nbp-tl-dot{position:absolute;inset-inline-start:-27px;top:13px;width:12px;height:12px;border-radius:50%;background:var(--p-line)}
.nbp-tl-dot.is-now{background:var(--p-brand);box-shadow:0 0 0 4px var(--p-soft)}.nbp-tl-dot.is-soon{background:var(--p-warn)}.nbp-tl-dot.is-past{background:var(--p-muted)}
.nbp-tl-date{font-size:.85rem;font-weight:800;color:var(--p-muted)}
.nbp-tl-event{font-weight:900;line-height:1.7}.nbp-tl-event.is-hot{color:var(--p-bad)}
.nbp-main .nbp-tl-note{margin:2px 0 0;color:var(--p-muted);font-size:.95rem}
.nbp-dots{display:flex;justify-content:center;gap:6px;margin-bottom:10px}
.nbp-dot{width:10px;height:10px;border-radius:50%;background:var(--p-line)}.nbp-dot.is-done{background:var(--p-ok)}.nbp-dot.is-on{background:var(--p-brand)}
.nbp-tool .nbp-meta{justify-content:center;margin-top:0}
.nbp-daily div.nbp-q{white-space:pre-line}
.nbp-opt:disabled{cursor:default}
.nbp-field input:disabled{opacity:.65}
.nbp-main .nbp-big{font-size:1.5rem;font-weight:900;color:var(--p-link);text-align:center;margin:10px 0}
.nbp-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
/* nested related box (calculator «موزونة جامعتك بالتفصيل»): its title as h3, its links as a chip row (KAN-825 r2) */
.nbp-related h3{margin:18px 0 0;font-size:1rem;font-weight:900}
.nbp-related h3+p{margin:4px 0 0;color:var(--p-muted)}
.nbp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.nbp-related .nbp-chips a{flex-direction:row;align-items:center;min-height:44px;padding:0 14px;border-radius:22px;font-weight:700;font-size:.9rem;color:var(--p-link)}

/* ---------- Moved from page heads (KAN-825 batch 3b) so inner_v2_gate holds 0 page CSS: KAN-890 «تابعنا» row (/contact); the FAQ h3 reset already lives in the FAQ block (KAN-824) ---------- */
.nbp-follow{margin:20px 0 4px}
.nbp-follow h2{margin:0 0 10px;font-size:1.1rem;font-weight:900}
.nbp-follow-row{display:flex;flex-wrap:wrap;gap:10px}
.nbp .nbp-follow-row a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--p-line);border-radius:22px;background:var(--p-card);color:var(--p-text);font-weight:800;font-size:.95rem;text-decoration:none}
.nbp .nbp-follow-row a:hover{border-color:var(--p-brand);color:var(--p-link)}
.nbp-follow-row svg{flex-shrink:0}
/* KAN-825 r4: pages with the generated <style data-nb-critical> hide everything after the hero until this sheet applies */
.nbp>:not(.nbp-crumbs,.nbp-hero){visibility:visible}

/* ---------- Desktop: sticky TOC column ---------- */
@media (min-width:1024px){
  .nbp{grid-template-columns:minmax(0,1fr) 280px;padding-top:20px}
  .nbp-crumbs,.nbp-hero{grid-column:1 / -1}
  .nbp-side{grid-column:2;grid-row:3 / span 20}
  .nbp-side .nbp-toc{position:sticky;top:96px;margin-top:6px}
  .nbp-main{grid-column:1;grid-row:3}
}
@media (prefers-reduced-motion:reduce){.nbp *{transition:none!important}}
@media print{#nb-nav,#nb-footer,.nbp-cta,.nbp-cta-end,.nbp-toc{display:none}}